From 9d195ed7be24803cbf4adb6fb8e680a1b3dae6ca Mon Sep 17 00:00:00 2001 From: yflory Date: Thu, 26 Aug 2021 14:35:22 +0200 Subject: [PATCH 1/6] 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 () { From ccc5e92659a092607db58c7a747e076557699850 Mon Sep 17 00:00:00 2001 From: yflory Date: Thu, 26 Aug 2021 14:47:46 +0200 Subject: [PATCH 2/6] Keep 'required' radio in form edit mode --- www/form/inner.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/www/form/inner.js b/www/form/inner.js index 0b7db96b7..ecc4db7b5 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -2777,7 +2777,6 @@ define([ var $oldTag = $(data.tag); $(edit).show(); $(previewDiv).show(); - $(requiredDiv).show(); $(editButtons).find('.cp-form-preview-button').remove(); @@ -2796,7 +2795,6 @@ define([ }; var onEdit = function (tmp) { data.editing = true; - $(requiredDiv).hide(); $(previewDiv).hide(); $(data.tag).hide(); $(editContainer).append(data.edit(onSave, tmp, framework)); From fe9d17cd17c94c2dc20e0dcf4bbae6d4b2268e51 Mon Sep 17 00:00:00 2001 From: yflory Date: Thu, 26 Aug 2021 14:57:18 +0200 Subject: [PATCH 3/6] Hide 'required' radio in preview mode --- www/form/inner.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/www/form/inner.js b/www/form/inner.js index ecc4db7b5..3c3aca31b 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -2777,6 +2777,7 @@ define([ var $oldTag = $(data.tag); $(edit).show(); $(previewDiv).show(); + $(requiredDiv).hide(); $(editButtons).find('.cp-form-preview-button').remove(); @@ -2795,6 +2796,7 @@ define([ }; var onEdit = function (tmp) { data.editing = true; + $(requiredDiv).show(); $(previewDiv).hide(); $(data.tag).hide(); $(editContainer).append(data.edit(onSave, tmp, framework)); @@ -2806,6 +2808,7 @@ define([ $(edit).click(function () { onEdit(); }); + $(requiredDiv).hide(); // If we were editing this field, recover our unsaved changes if (temp && temp[uid]) { From ae95f06bdba97266267ddfab5a68dcd7fc773d3e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Thu, 26 Aug 2021 14:11:40 +0100 Subject: [PATCH 4/6] Style tweaks for question edit and preview --- www/form/app-form.less | 3 +-- www/form/inner.js | 6 ++++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/www/form/app-form.less b/www/form/app-form.less index e630c8ca1..d763ed204 100644 --- a/www/form/app-form.less +++ b/www/form/app-form.less @@ -344,8 +344,6 @@ color: @cp_sidebar-hint; margin-bottom: 10px; padding: 0; - text-align: center; - font-weight: bold; } .cp-form-block-drag-handle { @@ -404,6 +402,7 @@ .cp-form-required-radio { flex-direction: row; display: flex; + margin-bottom: 20px; span { margin-right: 10px; &.cp-radio-mark { diff --git a/www/form/inner.js b/www/form/inner.js index 3c3aca31b..b1904bb8e 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -87,8 +87,10 @@ define([ 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); + var cancelBlock = h('button.btn.btn-default.cp-form-preview-button',[ + h('i.fa.fa-eye'), + Messages.form_preview_button + ]); $(cancelBlock).click(function () { cb(undefined, true); }); return cancelBlock; From 9f5cf8daf64947de74b31330b53f3ed159182a29 Mon Sep 17 00:00:00 2001 From: yflory Date: Thu, 26 Aug 2021 15:40:40 +0200 Subject: [PATCH 5/6] Fix cursor issues in forms realtime edition --- www/form/inner.js | 103 +++++++++++++++++++++------------------------- 1 file changed, 48 insertions(+), 55 deletions(-) diff --git a/www/form/inner.js b/www/form/inner.js index 3c3aca31b..e1dadd81d 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -19,7 +19,9 @@ define([ '/customize/application_config.js', '/common/diffMarked.js', '/common/sframe-common-codemirror.js', + '/common/text-cursor.js', 'cm/lib/codemirror', + '/bower_components/chainpad/chainpad.dist.js', '/common/inner/share.js', '/common/inner/access.js', @@ -61,7 +63,9 @@ define([ AppConfig, DiffMd, SFCodeMirror, + TextCursor, CMeditor, + ChainPad, Share, Access, Properties, Flatpickr, Sortable @@ -195,12 +199,6 @@ define([ 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; @@ -287,6 +285,12 @@ define([ // if this element was active before the remote change, restore cursor var setCursor = function () { if (v.type && v.type !== 'text') { return; } + try { + var ops = ChainPad.Diff.diff(cursor.el, val); + ['start', 'end'].forEach(function (attr) { + cursor[attr] = TextCursor.transformCursor(cursor[attr], ops); + }); + } catch (e) { console.error(e); } input.selectionStart = cursor.start || 0; input.selectionEnd = cursor.end || 0; setTimeout(function () { input.focus(); }); @@ -493,7 +497,6 @@ define([ // Set cursor getter (to handle remote changes to the form) setCursorGetter(function () { - var values = []; var active = document.activeElement; var cursor = {}; $container.find('input').each(function (i, el) { @@ -503,44 +506,21 @@ define([ cursor.start = el.selectionStart; cursor.end = el.selectionEnd; } - values.push(val); }); - if (v.type === "day") { - var dayPickr = $(calendarView).find('input')[0]._flatpickr; - values = dayPickr.selectedDates.map(function (date) { - return +date; - }); - } - var _content = {values: values}; - - if (maxInput) { - _content.max = Number($(maxInput).val()) || 1; - } - - if (typeSelect) { - _content.type = typeSelect.getValue(); - } - if (v.items) { var items = []; $(containerItems).find('input').each(function (i, el) { + var val = $(el).val() || el.placeholder || ''; if (el === active) { cursor.item = true; cursor.uid= $(el).data('uid'); cursor.start = el.selectionStart; cursor.end = el.selectionEnd; + cursor.el = val; } - var val = $(el).val() || el.placeholder || ''; - items.push({ - uid: $(el).data('uid'), - v: val - }); }); - _content.items = items; } return { - old: (tmp && tmp.old) || v, - content: _content, cursor: cursor }; }); @@ -901,14 +881,8 @@ define([ return { tag: tag, edit: function (cb, tmp) { - var t = h('textarea'); - var block = h('div.cp-form-edit-options-block', [t]); - var cm = SFCodeMirror.create("gfm", CMeditor, t); - var editor = cm.editor; - editor.setOption('lineNumbers', true); - editor.setOption('lineWrapping', true); - editor.setOption('styleActiveLine', true); - editor.setOption('readOnly', false); + // Cancel changes + var cancelBlock = saveAndCancelOptions(cb); var text = opts.text; var cursor; @@ -916,20 +890,36 @@ define([ cursor = tmp.cursor; } + var block, editor; + if (tmp && tmp.block) { + block = tmp.block; + editor = tmp.editor; + } + + if (!block || !editor) { + var t = h('textarea'); + block = h('div.cp-form-edit-options-block', [t]); + var cm = SFCodeMirror.create("gfm", CMeditor, t); + editor = cm.editor; + editor.setOption('lineNumbers', true); + editor.setOption('lineWrapping', true); + editor.setOption('styleActiveLine', true); + editor.setOption('readOnly', false); + } + setTimeout(function () { - editor.setValue(text); - if (cursor) { - if (Sortify(cursor.start) === Sortify(cursor.end)) { - editor.setCursor(cursor.start); - } else { - editor.setSelection(cursor.start, cursor.end); - } + editor.focus(); + if (!(tmp && tmp.editor)) { + editor.setValue(text); + } else { + SFCodeMirror.setValueAndCursor(editor, editor.getValue(), text); } editor.refresh(); editor.save(); editor.focus(); }); - if (APP.common) { + + if (APP.common && !(tmp && tmp.block)) { var markdownTb = APP.common.createMarkdownToolbar(editor, { embed: function (mt) { editor.focus(); @@ -940,8 +930,6 @@ define([ $(markdownTb.toolbar).show(); cm.configureTheme(APP.common, function () {}); } - // Cancel changes - var cancelBlock = saveAndCancelOptions(cb); var getContent = function () { return { @@ -949,9 +937,13 @@ define([ }; }; - editor.on('change', function () { + if (tmp && tmp.onChange) { + editor.off('change', tmp.onChange); + } + var on = function () { cb(getContent()); - }); + }; + editor.on('change', on); cursorGetter = function () { if (document.activeElement && block.contains(document.activeElement)) { @@ -961,9 +953,10 @@ define([ }; } return { - old: opts, - content: getContent(), - cursor: cursor + cursor: cursor, + block: block, + editor: editor, + onChange: on }; }; From 2655a99b80c8b36a3dee9b2f35e6694f8241ea6b Mon Sep 17 00:00:00 2001 From: yflory Date: Thu, 26 Aug 2021 15:43:16 +0200 Subject: [PATCH 6/6] Allow guest answers by default in forms --- www/form/inner.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/www/form/inner.js b/www/form/inner.js index c22cb7e8e..b83728c0e 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -3477,7 +3477,7 @@ define([ UI.alert(content); }; - framework.onReady(function () { + framework.onReady(function (isNew) { var priv = metadataMgr.getPrivateData(); if (APP.isEditor) { @@ -3502,6 +3502,9 @@ define([ } checkIntegrity(); } + if (isNew && content.answers && typeof(content.answers.anonymous) === "undefined") { + content.answers.anonymous = true; + } sframeChan.event('EV_FORM_PIN', {channel: content.answers.channel});