infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Autosave in forms

Browse Source
pull/1/head
yflory 3 years ago
parent ad50be0308
commit 9d195ed7be
1 changed files with 89 additions and 72 deletions
Show Stats Download Patch File Download Diff File

159
www/form/inner.js
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save