From 9d195ed7be24803cbf4adb6fb8e680a1b3dae6ca Mon Sep 17 00:00:00 2001 From: yflory Date: Thu, 26 Aug 2021 14:35:22 +0200 Subject: [PATCH] Autosave in forms --- www/form/inner.js | 161 +++++++++++++++++++++++++--------------------- 1 file changed, 89 insertions(+), 72 deletions(-) diff --git a/www/form/inner.js b/www/form/inner.js index f832caf7b..0b7db96b7 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -85,28 +85,16 @@ define([ var MAX_OPTIONS = 15; var MAX_ITEMS = 10; - var saveAndCancelOptions = function (getRes, cb) { - // Cancel changes - var cancelBlock = h('button.btn.btn-secondary', Messages.cancel); - $(cancelBlock).click(function () { cb(); }); - - // Save changes - var saveBlock = h('button.btn.btn-primary', [ - h('i.fa.fa-floppy-o'), - h('span', Messages.settings_save) - ]); - - $(saveBlock).click(function () { - $(saveBlock).attr('disabled', 'disabled'); - cb(getRes()); - }); + var saveAndCancelOptions = function (cb) { + Messages.form_preview_button = "Preview"; // XXX + var cancelBlock = h('button.btn.btn-secondary.cp-form-preview-button', + Messages.form_preview_button); + $(cancelBlock).click(function () { cb(undefined, true); }); - return h('div.cp-form-edit-save', [cancelBlock, saveBlock]); + return cancelBlock; }; - var editTextOptions = function (opts, setCursorGetter, cb, tmp) { - if (tmp && tmp.content && Sortify(opts) === Sortify(tmp.old)) { - opts = tmp.content; - } + var editTextOptions = function (opts, setCursorGetter, cb) { + var evOnSave = Util.mkEvent(); var maxLength, getLengthVal; if (opts.maxLength) { @@ -129,8 +117,8 @@ define([ var $l = $(lengthInput).on('input', Util.throttle(function () { $l.val(getLengthVal()); + evOnSave.fire(); }, 500)); - } var type, typeSelect; @@ -163,16 +151,11 @@ define([ h('span', Messages.form_textType), typeSelect[0] ]); + typeSelect.onChange.reg(evOnSave.fire()); } setCursorGetter(function () { - return { - old: (tmp && tmp.old) || opts, - content: { - maxLength: getLengthVal ? getLengthVal() : undefined, - type: typeSelect ? typeSelect.getValue() : undefined - } - }; + return {}; }); var getSaveRes = function () { @@ -181,7 +164,14 @@ define([ type: typeSelect ? typeSelect.getValue() : undefined }; }; - var saveAndCancel = saveAndCancelOptions(getSaveRes, cb); + + evOnSave.reg(function () { + var res = getSaveRes(); + if (!res) { return; } + cb(res); + }); + + var saveAndCancel = saveAndCancelOptions(cb); return [ maxLength, @@ -190,6 +180,8 @@ define([ ]; }; var editOptions = function (v, isDefaultOpts, setCursorGetter, cb, tmp) { + var evOnSave = Util.mkEvent(); + var add = h('button.btn.btn-secondary', [ h('i.fa.fa-plus'), h('span', Messages.form_add_option) @@ -200,11 +192,17 @@ define([ ]); var cursor; + if (tmp && tmp.cursor) { + cursor = tmp.cursor; + } + /* if (tmp && tmp.content && Sortify(v) === Sortify(tmp.old)) { v = tmp.content; cursor = tmp.cursor; } + */ + // Checkbox: max options var maxOptions, maxInput; if (typeof(v.max) === "number") { maxInput = h('input', { @@ -217,8 +215,12 @@ define([ h('span', Messages.form_editMax), maxInput ]); + $(maxInput).on('input', function () { + setTimeout(evOnSave.fire); + }); } + // Poll: type (text/day/time) var type, typeSelect; if (v.type) { // Messages.form_poll_text.form_poll_day.form_poll_time @@ -321,6 +323,8 @@ define([ var currentMax = Number($maxInput.val()); $maxInput.val(Math.min(inputs, currentMax)); } + + evOnSave.fire(); }); if (!v.type || v.type === "text") { @@ -335,6 +339,10 @@ define([ }); } + $(input).on('input', function () { + evOnSave.fire(); + }); + return el; }; var inputs = v.values.map(function (val) { return getOption(val, isDefaultOpts, false); }); @@ -367,7 +375,8 @@ define([ // Calendar... var calendarView; - if (v.type) { + if (v.type) { // Polls + // Calendar inline for "day" type var calendarInput = h('input'); calendarView = h('div', calendarInput); var calendarDefault = v.type === "day" ? v.values.map(function (time) { @@ -379,12 +388,13 @@ define([ mode: 'multiple', inline: true, defaultDate: calendarDefault, - appendTo: calendarView + appendTo: calendarView, + onChange: function () { + evOnSave.fire(); + } }); - } - // Calendar time - if (v.type) { + // Calendar popup for "time" var multipleInput = h('input', {placeholder: Messages.form_addMultipleHint}); var multipleClearButton = h('button.btn', Messages.form_clear); var addMultipleButton = h('button.btn', [ @@ -416,6 +426,7 @@ define([ } }); multiplePickr.clear(); + evOnSave.fire(); }); } @@ -444,6 +455,7 @@ define([ typeSelect.onChange.reg(function (prettyVal, val) { v.type = val; refreshView(); + setTimeout(evOnSave.fire); if (val !== "text") { $container.find('.cp-form-edit-block-input').remove(); $(add).click(); @@ -555,9 +567,10 @@ define([ else { duplicates = true; } }); } - values = values.filter(Boolean); // Block empty or undeinfed options + values = values.filter(Boolean); // Block empty or undefined options if (!values.length) { - return void UI.warn(Messages.error); + return; + //return void UI.warn(Messages.error); // XXX not anymore with autosave? } var res = { values: values }; @@ -575,12 +588,13 @@ define([ } else { duplicates = true; } }); + items = items.filter(Boolean); res.items = items; } // Show duplicates warning if (duplicates) { - UI.warn(Messages.form_duplicates); + UI.warn(Messages.form_duplicates); // XXX } // If checkboxes, get the maximum number of values the users can select @@ -597,7 +611,13 @@ define([ return res; }; - var saveAndCancel = saveAndCancelOptions(getSaveRes, cb); + evOnSave.reg(function () { + var res = getSaveRes(); + if (!res) { return; } + cb(res); + }); + + var saveAndCancel = saveAndCancelOptions(cb); return [ type, @@ -892,8 +912,7 @@ define([ var text = opts.text; var cursor; - if (tmp && tmp.content && tmp.old.text === text) { - text = tmp.content.text; + if (tmp && tmp.cursor) { cursor = tmp.cursor; } @@ -922,23 +941,15 @@ define([ cm.configureTheme(APP.common, function () {}); } // Cancel changes - var cancelBlock = h('button.btn.btn-secondary', Messages.cancel); - $(cancelBlock).click(function () { - cb(); - }); - // Save changes - var saveBlock = h('button.btn.btn-primary', [ - h('i.fa.fa-floppy-o'), - h('span', Messages.settings_save) - ]); + var cancelBlock = saveAndCancelOptions(cb); var getContent = function () { return { text: editor.getValue() }; }; - $(saveBlock).click(function () { - $(saveBlock).attr('disabled', 'disabled'); + + editor.on('change', function () { cb(getContent()); }); @@ -958,7 +969,7 @@ define([ return [ block, - h('div.cp-form-edit-save', [cancelBlock, saveBlock]) + cancelBlock ]; }, getCursor: function () { return cursorGetter(); }, @@ -2643,7 +2654,7 @@ define([ Messages.form_preview = "Preview:"; // XXX var previewDiv = h('div.cp-form-preview', Messages.form_preview); - Messages.form_required_answer = "Answer: " + Messages.form_required_answer = "Answer: "; Messages.form_required_on = "required"; Messages.form_required_off = "optional"; // Required radio displayed only for types that have an "isEmpty" function @@ -2759,30 +2770,29 @@ define([ h('span', Messages.form_editBlock) ]); editContainer = h('div'); - var onSave = function (newOpts) { - data.editing = false; - if (!newOpts) { // Cancel edit + var onSave = function (newOpts, close) { + if (close) { // Cancel edit + data.editing = false; $(editContainer).empty(); - $(editButtons).show(); - $(data.tag).show(); + var $oldTag = $(data.tag); + $(edit).show(); $(previewDiv).show(); $(requiredDiv).show(); + + $(editButtons).find('.cp-form-preview-button').remove(); + + _answers = getBlockAnswers(APP.answers, uid); + data = model.get(block.opts, _answers, null, evOnChange); + if (!data) { data = {}; } + $oldTag.before(data.tag).remove(); + return; + } + if (!newOpts) { + // invalid options, nothing to save return; } - $(editContainer).empty(); block.opts = newOpts; framework.localChange(); - var $oldTag = $(data.tag); - framework._.cpNfInner.chainpad.onSettle(function () { - $(editButtons).show(); - $(previewDiv).show(); - $(requiredDiv).show(); - UI.log(Messages.saved); - _answers = getBlockAnswers(APP.answers, uid); - data = model.get(newOpts, _answers, null, evOnChange); - if (!data) { data = {}; } - $oldTag.before(data.tag).remove(); - }); }; var onEdit = function (tmp) { data.editing = true; @@ -2790,7 +2800,10 @@ define([ $(previewDiv).hide(); $(data.tag).hide(); $(editContainer).append(data.edit(onSave, tmp, framework)); - $(editButtons).hide(); + + $(editContainer).find('.cp-form-preview-button').prependTo(editButtons); + + $(edit).hide(); }; $(edit).click(function () { onEdit(); @@ -2876,9 +2889,9 @@ define([ APP.isEditor && !isStatic ? requiredDiv : undefined, APP.isEditor && !isStatic ? previewDiv : undefined, data.tag, + editContainer, editButtons ]), - editContainer ])); }); @@ -3631,7 +3644,11 @@ define([ var answers, temp; if (!APP.isEditor) { answers = getFormResults(); } else { temp = getTempFields(); } + + var $main = $('.cp-form-creator-container'); + var sTop = $main.scrollTop(); updateForm(framework, content, APP.isEditor, answers, temp); + $main.scrollTop(sTop); }); framework.setContentGetter(function () {