define([
'jquery',
'json.sortify',
'/api/config',
'/bower_components/chainpad-crypto/crypto.js',
'/common/sframe-app-framework.js',
'/common/toolbar.js',
'/form/export.js',
'/bower_components/nthen/index.js',
'/common/sframe-common.js',
'/common/common-util.js',
'/common/common-hash.js',
'/common/common-interface.js',
'/common/common-ui-elements.js',
'/common/clipboard.js',
'/common/inner/common-mediatag.js',
'/common/hyperscript.js',
'/customize/messages.js',
'/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',
'/common/inner/properties.js',
'/lib/datepicker/flatpickr.js',
'/bower_components/sortablejs/Sortable.min.js',
'cm/addon/display/placeholder',
'cm/mode/gfm/gfm',
'css!cm/lib/codemirror.css',
'/bower_components/file-saver/FileSaver.min.js',
'css!/bower_components/codemirror/lib/codemirror.css',
'css!/bower_components/codemirror/addon/dialog/dialog.css',
'css!/bower_components/codemirror/addon/fold/foldgutter.css',
'css!/lib/datepicker/flatpickr.min.css',
'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
'less!/form/app-form.less',
], function (
$,
Sortify,
ApiConfig,
Crypto,
Framework,
Toolbar,
Exporter,
nThen,
SFCommon,
Util,
Hash,
UI,
UIElements,
Clipboard,
MT,
h,
Messages,
AppConfig,
DiffMd,
SFCodeMirror,
TextCursor,
CMeditor,
ChainPad,
Share, Access, Properties,
Flatpickr,
Sortable
)
{
var APP = window.APP = {
blocks: {}
};
var is24h = UIElements.is24h();
var dateFormat = "Y-m-d H:i";
var timeFormat = "H:i";
var evCheckConditions = Util.mkEvent();
var evShowConditions = Util.mkEvent();
if (!is24h) {
dateFormat = "Y-m-d h:i K";
timeFormat = "h:i K";
}
// multi-line radio, checkboxes, and possibly other things have a max number of items
// we'll consider increasing this restriction if people are unhappy with it
// but as a general rule we expect users will appreciate having simpler questions
var MAX_OPTIONS = 25;
var MAX_ITEMS = 10;
var getOptionValue = function (obj) {
if (!Util.isObject(obj)) { return obj; }
return obj.v;
};
var extractValues = function (values) {
if (!Array.isArray(values)) { return []; }
return values.map(getOptionValue);
};
var saveAndCancelOptions = function (cb) {
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;
};
var editTextOptions = function (opts, setCursorGetter, cb) {
var evOnSave = Util.mkEvent();
var maxLength, getLengthVal;
if (opts.maxLength) {
var lengthInput = h('input', {
type:"number",
value: opts.maxLength,
min: 100,
max: 5000
});
maxLength = h('div.cp-form-edit-max-options', [
h('span', Messages.form_editMaxLength),
lengthInput
]);
getLengthVal = function () {
var val = Number($(lengthInput).val()) || 1000;
if (val < 1) { val = 1; }
if (val > 5000) { val = 5000; }
return val;
};
var $l = $(lengthInput).on('input', Util.throttle(function () {
$l.val(getLengthVal());
evOnSave.fire();
}, 500));
}
var type, typeSelect;
if (opts.type) {
// Messages.form_text_text.form_text_number.form_text_url.form_text_email
var options = ['text', 'number', 'url', 'email'].map(function (t) {
return {
tag: 'a',
attributes: {
'class': 'cp-form-type-value',
'data-value': t,
'href': '#',
},
content: Messages['form_text_'+t]
};
});
var dropdownConfig = {
text: '', // Button initial text
options: options, // Entries displayed in the menu
//left: true, // Open to the left of the button
//container: $(type),
isSelect: true,
caretDown: true,
buttonCls: 'btn btn-secondary'
};
typeSelect = UIElements.createDropdown(dropdownConfig);
typeSelect.setValue(opts.type);
type = h('div.cp-form-edit-type', [
h('span', Messages.form_textType),
typeSelect[0]
]);
typeSelect.onChange.reg(evOnSave.fire);
}
setCursorGetter(function () {
return {};
});
var getSaveRes = function () {
return {
maxLength: getLengthVal ? getLengthVal() : undefined,
type: typeSelect ? typeSelect.getValue() : undefined
};
};
evOnSave.reg(function () {
var res = getSaveRes();
if (!res) { return; }
cb(res);
});
var saveAndCancel = saveAndCancelOptions(cb);
return [
maxLength,
type,
saveAndCancel
];
};
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)
]);
var addItem = h('button.btn.btn-secondary', [
h('i.fa.fa-plus'),
h('span', Messages.form_add_item)
]);
var cursor;
if (tmp && tmp.cursor) {
cursor = tmp.cursor;
}
// Checkbox: max options
var maxOptions, maxInput;
if (typeof(v.max) === "number") {
maxInput = h('input', {
type:"number",
value: v.max,
min: 1,
max: v.values.length
});
maxOptions = h('div.cp-form-edit-max-options', [
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
var options = ['text', 'day', 'time'].map(function (t) {
return {
tag: 'a',
attributes: {
'class': 'cp-form-type-value',
'data-value': t,
'href': '#',
},
content: Messages['form_poll_'+t]
};
});
var dropdownConfig = {
text: '', // Button initial text
options: options, // Entries displayed in the menu
//left: true, // Open to the left of the button
//container: $(type),
isSelect: true,
caretDown: true,
buttonCls: 'btn btn-secondary'
};
typeSelect = UIElements.createDropdown(dropdownConfig);
typeSelect.setValue(v.type);
type = h('div.cp-form-edit-type', [
h('span', Messages.form_editType),
typeSelect[0]
]);
}
// Show existing options
var $add, $addItem;
var addMultiple;
var getOption = function (val, placeholder, isItem, uid) {
var input = h('input', {value:val});
var $input = $(input);
if (placeholder) {
input.placeholder = val;
input.value = '';
$input.on('keypress', function () {
$input.removeAttr('placeholder');
$input.off('keypress');
});
}
if (uid) { $input.data('uid', uid); }
// If the input is a date, initialize flatpickr
if (v.type && v.type !== 'text') {
if (v.type === 'time') {
Flatpickr(input, {
enableTime: true,
time_24hr: is24h,
dateFormat: dateFormat,
defaultDate: val ? new Date(val) : undefined
});
} else if (v.type === 'day') {
/*Flatpickr(input, {
defaultDate: val ? new Date(val) : undefined
});*/
}
}
// 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(); });
};
if (cursor && cursor.uid === uid && Boolean(cursor.item) === Boolean(isItem)) {
setCursor();
}
var del = h('button.btn.btn-danger-outline', h('i.fa.fa-times'));
var el = h('div.cp-form-edit-block-input', [
h('span.cp-form-handle', [
h('i.fa.fa-ellipsis-v'),
h('i.fa.fa-ellipsis-v'),
]),
input,
del
]);
$(del).click(function () {
var $block = $(el).closest('.cp-form-edit-block');
$(el).remove();
// We've just deleted an item/option so we should be under the MAX limit and
// we can show the "add" button again
if (isItem && $addItem) { $addItem.show(); }
if (!isItem && $add) {
$add.show();
if (v.type === "time") { $(addMultiple).show(); }
}
// decrement the max choices input when there are fewer options than the current maximum
if (maxInput) {
var inputs = $block.find('input').length;
var $maxInput = $(maxInput);
var currentMax = Number($maxInput.val());
$maxInput.val(Math.min(inputs, currentMax));
}
evOnSave.fire();
});
if (!v.type || v.type === "text") {
$input.keyup(function (e) {
try {
if (e.which === 13) {
var $line = $input.closest('.cp-form-edit-block-input');
if ($input.closest('.cp-form-edit-block')
.find('.cp-form-edit-block-input').last()[0] === $line[0]) {
// If we're the last input, add a new one
if (isItem && $addItem && $addItem.is(':visible')) {
$addItem.click();
}
if (!isItem && $add && $add.is(':visible')) { $add.click(); }
} else {
// Otherwise focus the next one
$line.next().find('input').focus();
}
}
if (e.which === 27 && !$(input).val()) {
$(del).click();
}
} catch (err) { console.error(err); }
});
}
$(input).on('input', function () {
evOnSave.fire();
});
return el;
};
var inputs = v.values.map(function (data) {
return getOption(data.v, isDefaultOpts, false, data.uid);
});
inputs.push(add);
var container = h('div.cp-form-edit-block', inputs);
var $container = $(container);
var sortableOption = Sortable.create(container, {
direction: "vertical",
handle: ".cp-form-handle",
draggable: ".cp-form-edit-block-input",
forceFallback: true,
store: {
set: function () {
evOnSave.fire();
}
}
});
var containerItems;
if (v.items) {
var inputsItems = v.items.map(function (itemData) {
return getOption(itemData.v, isDefaultOpts, true, itemData.uid);
});
inputsItems.push(addItem);
containerItems = h('div.cp-form-edit-block', inputsItems);
Sortable.create(containerItems, {
direction: "vertical",
handle: ".cp-form-handle",
draggable: ".cp-form-edit-block-input",
forceFallback: true,
store: {
set: function () {
evOnSave.fire();
}
}
});
}
// Calendar...
var calendarView;
if (v.type) { // Polls
// Calendar inline for "day" type
var calendarInput = h('input');
calendarView = h('div', calendarInput);
var calendarDefault = v.type === "day" ? extractValues(v.values).map(function (time) {
if (!time) { return; }
var d = new Date(time);
if (!isNaN(d)) { return d; }
}).filter(Boolean) : undefined;
Flatpickr(calendarInput, {
mode: 'multiple',
inline: true,
defaultDate: calendarDefault,
appendTo: calendarView,
onChange: function () {
evOnSave.fire();
}
});
// 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', [
h('i.fa.fa-plus'),
h('span', Messages.form_addMultiple)
]);
addMultiple = h('div.cp-form-multiple-picker', { style: "display: none;" }, [
multipleInput,
addMultipleButton,
multipleClearButton
]);
var multiplePickr = Flatpickr(multipleInput, {
mode: 'multiple',
enableTime: true,
dateFormat: dateFormat,
});
$(multipleClearButton).click(function () {
multiplePickr.clear();
});
$(addMultipleButton).click(function () {
multiplePickr.selectedDates.some(function (date) {
$add.before(getOption(date, false, false, Util.uid()));
var l = $container.find('input').length;
$(maxInput).attr('max', l);
if (l >= MAX_OPTIONS) {
$add.hide();
$(addMultiple).hide();
return true;
}
});
multiplePickr.clear();
evOnSave.fire();
});
}
var refreshView = function () {
if (!v.type) { return; }
var $calendar = $(calendarView);
sortableOption.option("disabled", v.type !== "text");
$container.toggleClass('cp-no-sortable', v.type !== "text");
if (v.type !== "day") {
$calendar.hide();
$container.show();
var l = $container.find('input').length;
if (v.type === "time" && l < MAX_OPTIONS) {
$(addMultiple).show();
} else {
$(addMultiple).hide();
}
} else {
$(addMultiple).hide();
$calendar.show();
$container.hide();
}
};
refreshView();
// Doodle type change: empty current values and change input types?
if (typeSelect) {
typeSelect.onChange.reg(function (prettyVal, val) {
v.type = val;
refreshView();
setTimeout(evOnSave.fire);
if (val !== "text") {
$container.find('.cp-form-edit-block-input').remove();
if (val === "time") {
var time = new Date();
time.setHours(14);
time.setMinutes(0);
time.setSeconds(0);
time.setMilliseconds(0);
var el = getOption(+time, false, false, Util.uid());
$add.before(el);
$(el).find('input').focus();
return;
}
$(add).click();
return;
}
$container.find('input').each(function (i, input) {
if (input._flatpickr) {
input._flatpickr.destroy();
delete input._flatpickr;
}
});
});
}
// "Add option" button handler
$add = $(add).click(function () {
var txt = v.type ? '' : Messages.form_newOption;
var el = getOption(txt, true, false, Util.uid());
$add.before(el);
$(el).find('input').focus();
var l = $container.find('input').length;
$(maxInput).attr('max', l);
if (l >= MAX_OPTIONS) { $add.hide(); }
});
// If multiline block, handle "Add item" button
$addItem = $(addItem).click(function () {
var el = getOption(Messages.form_newItem, true, true, Util.uid());
$addItem.before(el);
$(el).find('input').focus();
if ($(containerItems).find('input').length >= MAX_ITEMS) { $addItem.hide(); }
});
if ($container.find('input').length >= MAX_OPTIONS) { $add.hide(); }
if ($(containerItems).find('input').length >= MAX_ITEMS) { $addItem.hide(); }
// Set cursor getter (to handle remote changes to the form)
setCursorGetter(function () {
var active = document.activeElement;
var cursor = {};
$container.find('input').each(function (i, el) {
var val = $(el).val() || el.placeholder || '';
if (el === active && !el._flatpickr) {
cursor.item = false;
cursor.uid= $(el).data('uid');
cursor.start = el.selectionStart;
cursor.end = el.selectionEnd;
cursor.el = val;
}
});
if (v.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;
}
});
}
if (v.type === "time") {
$container.find('input').each(function (i, el) {
var f = el._flatpickr;
if (!f || !f.isOpen) { return; }
var rect = el.getBoundingClientRect();
cursor = {
flatpickr: true,
val: +f.selectedDates[0],
y: rect && rect.y
};
});
}
return {
cursor: cursor
};
});
var getSaveRes = function () {
// Get values
var values = [];
if (v.type === "day") {
var dayPickr = $(calendarView).find('input')[0]._flatpickr;
values = dayPickr.selectedDates.map(function (date) {
return +date;
});
} else {
$container.find('input').each(function (i, el) {
var val = ($(el).val() || el.placeholder || '').trim();
if (v.type === "day" || v.type === "time") {
var f = el._flatpickr;
if (f && f.selectedDates && f.selectedDates.length) {
val = +f.selectedDates[0];
}
}
var uid = $(el).data('uid');
var hasUid = values.some(function (i) { return i.uid === uid; });
if (hasUid) { uid = Util.uid(); }
values.push({
uid: uid,
v: val
});
if (hasUid) { $(el).data('uid', uid); }
});
}
var res = { values: values };
// If multiline block, get items
if (v.items) {
var items = [];
$(containerItems).find('input').each(function (i, el) {
var val = ($(el).val() || el.placeholder || '').trim();
var uid = $(el).data('uid');
var hasUid = items.some(function (i) { return i.uid === uid; });
if (hasUid) { uid = Util.uid(); }
items.push({
uid: uid,
v: val
});
if (hasUid) { $(el).data('uid', uid); }
});
items = items.filter(Boolean);
res.items = items;
}
// If checkboxes, get the maximum number of values the users can select
if (maxInput) {
var maxVal = Number($(maxInput).val());
if (isNaN(maxVal)) { maxVal = values.length; }
res.max = maxVal;
}
if (typeSelect) {
res.type = typeSelect.getValue();
}
return res;
};
evOnSave.reg(function () {
var res = getSaveRes();
if (!res) { return; }
cb(res);
});
var saveAndCancel = saveAndCancelOptions(cb);
return [
type,
maxOptions,
calendarView,
h('div.cp-form-edit-options-block', [containerItems, container]),
addMultiple,
saveAndCancel
];
};
var getWeekDays = function (large) {
var baseDate = new Date(2017, 0, 1); // just a Sunday
var weekDays = [];
for(var i = 0; i < 7; i++) {
weekDays.push(baseDate.toLocaleDateString(undefined, { weekday: 'long' }));
baseDate.setDate(baseDate.getDate() + 1);
}
if (!large) {
weekDays = weekDays.map(function (day) { return day.slice(0,3); });
}
return weekDays.map(function (day) { return day.replace(/^./, function (str) { return str.toUpperCase(); }); });
};
// "resultsPageObj" is an object with "content" and "answers"
// only available when viewing the Responses page
var makePollTable = function (answers, opts, resultsPageObj) {
// Sort date values
if (opts.type !== "text") {
opts.values.sort(function (_a, _b) {
var a = getOptionValue(_a);
var b = getOptionValue(_b);
return +new Date(a) - +new Date(b);
});
}
// Create first line with options
var allDays = getWeekDays(true);
var els = extractValues(opts.values).map(function (data) {
var _date;
if (opts.type === "day") {
_date = new Date(data);
data = _date.toLocaleDateString();
}
if (opts.type === "time") {
_date = new Date(data);
data = Flatpickr.formatDate(_date, timeFormat);
}
var day = _date && allDays[_date.getDay()];
return h('div.cp-poll-cell.cp-form-poll-option', {
title: data,
}, [
opts.type === 'day' ? h('span.cp-form-weekday', day) : undefined,
opts.type === 'day' ? h('span.cp-form-weekday-separator', ' - ') : undefined,
h('span', data)
]);
});
// Insert axis switch button
var switchAxis = h('button.btn.btn-default', [
Messages.form_poll_switch,
h('i.fa.fa-exchange'),
]);
els.unshift(h('div.cp-poll-cell.cp-poll-switch', switchAxis));
var lines = [h('div', els)];
// Add an initial row to "time" values containing the days
if (opts.type === "time") {
var days = [h('div.cp-poll-cell')];
var _days = {};
extractValues(opts.values).forEach(function (d) {
var date = new Date(d);
var day = date.toLocaleDateString();
_days[day] = {
n: (_days[day] && _days[day].n) || 0,
name: allDays[date.getDay()]
};
_days[day].n++;
});
Object.keys(_days).forEach(function (day) {
days.push(h('div.cp-poll-cell.cp-poll-time-day', {
style: 'flex-grow:'+(_days[day].n - 1)+';'
}, [
h('span.cp-form-weekday', _days[day].name),
h('span.cp-form-weekday-separator', ' - '),
h('span', day)
]));
});
lines.unshift(h('div', days));
}
// Add answers
var bodyEls = [];
if (Array.isArray(answers)) {
answers.forEach(function (answerObj) {
var answer = answerObj.results;
if (!answer || !answer.values) { return; }
var name = Util.find(answerObj, ['user', 'name']) || answer.name || Messages.anonymous;
var avatar = h('span.cp-avatar');
APP.common.displayAvatar($(avatar), Util.find(answerObj, ['user', 'avatar']), name);
var values = answer.values || {};
var els = extractValues(opts.values).map(function (data) {
var res = values[data] || 0;
var v = (Number(res) === 1) ? h('i.fa.fa-check.cp-yes') : undefined;
var cell = h('div.cp-poll-cell.cp-form-poll-answer', {
'data-value': res
}, v);
return cell;
});
var nameCell;
els.unshift(nameCell = h('div.cp-poll-cell.cp-poll-answer-name', {
title: Util.fixHTML(name)
}, [
avatar,
h('span', name)
]));
bodyEls.push(h('div', els));
if (resultsPageObj && (APP.isEditor || APP.isAuditor)) {
$(nameCell).addClass('cp-clickable').click(function () {
APP.renderResults(resultsPageObj.content, resultsPageObj.answers, answerObj.curve);
});
}
});
}
var body = h('div.cp-form-poll-body', bodyEls);
lines.push(body);
var $s = $(switchAxis).click(function () {
$s.closest('.cp-form-type-poll').toggleClass('cp-form-poll-switch');
});
return lines;
};
var makePollTotal = function (answers, opts, myLine, evOnChange) {
if (!Array.isArray(answers)) { return; }
var totals = {};
var myTotals = {};
var updateMyTotals = function () {
if (!myLine) { return; }
extractValues(opts.values).forEach(function (data) {
myLine.some(function (el) {
if ($(el).data('option') !== data) { return; }
var res = Number($(el).attr('data-value')) || 0;
if (res === 1) {
myTotals[data] = {
y: 1,
m: 0
};
}
else if (res === 2) {
myTotals[data] = {
y: 0,
m: 1
};
} else {
delete myTotals[data];
}
return true;
});
});
};
var totalEls = extractValues(opts.values).map(function (data) {
var y = 0; // Yes
var m = 0; // Maybe
answers.forEach(function (answerObj) {
var answer = answerObj.results;
if (!answer || !answer.values) { return; }
var values = answer.values || {};
var res = Number(values[data]) || 0;
if (res === 1) { y++; }
else if (res === 2) { m++; }
});
totals[data] = {
y: y,
m: m
};
return h('div.cp-poll-cell', {
'data-id': data
}, [
h('span.cp-form-total-yes', y),
h('span.cp-form-total-maybe', '('+m+')'),
]);
});
totalEls.unshift(h('div.cp-poll-cell', Messages.form_pollTotal));
var total = h('div.cp-poll-total', totalEls);
var $total = $(total);
var refreshBest = function () {
var totalMax = {
value: 0,
data: []
};
Object.keys(totals).forEach(function (k) {
var obj = Util.clone(totals[k]);
if (myTotals[k]) {
obj.y += myTotals[k].y || 0;
obj.m += myTotals[k].m || 0;
}
if (obj.y === totalMax.value) {
totalMax.data.push(k);
} else if (obj.y > totalMax.value) {
totalMax.value = obj.y;
totalMax.data = [k];
}
});
if (totalMax.value) {
$total.find('[data-id]').removeClass('cp-poll-best');
totalMax.data.forEach(function (k) {
$total.find('[data-id="'+ (k.replace(/"/g, '\\"')) + '"]').addClass('cp-poll-best');
});
}
};
refreshBest();
if (myLine && evOnChange) {
var updateValues = function () {
totalEls.forEach(function (cell) {
var $c = $(cell);
var data = $c.attr('data-id');
if (!data) { return; }
var y = totals[data].y + ((myTotals[data] || {}).y || 0);
var m = totals[data].m + ((myTotals[data] || {}).m || 0);
$c.find('.cp-form-total-yes').text(y);
$c.find('.cp-form-total-maybe').text('('+m+')');
});
};
evOnChange.reg(function () {
updateMyTotals();
updateValues();
refreshBest();
});
}
return total;
};
var multiAnswerSubHeading = function (content) {
return h('span.cp-charts-row', h('td.cp-charts-cell.cp-grid-sub-question', {
colspan: 3,
style: 'font-weight: bold;',
}, content));
};
var getEmpty = function (empty) {
if (!empty) { return; }
var msg = UI.setHTML(h('span.cp-form-results-empty-text'), Messages._getKey('form_notAnswered', [empty]));
return multiAnswerSubHeading(msg);
};
var barGraphic = function (itemScale) {
return h('span.cp-bar-container', h('div.cp-bar', {
style: 'width: ' + (itemScale * 100) + '%',
}, ' '));
};
var barRow = function (value, count, max, showBar) {
return h('div.cp-charts-row', [
h('span.cp-value', value),
h('span.cp-count', count),
showBar? barGraphic((count / max)): undefined,
]);
};
var findItem = function (items, uid) {
if (!Array.isArray(items)) { return; }
var res;
items.some(function (item) {
if (item.uid === uid) {
res = item.v;
return true;
}
});
return res;
};
var getSections = function (content) {
var uids = Object.keys(content.form).filter(function (uid) {
return content.form[uid].type === 'section';
});
return uids;
};
var getFullOrder = function (content) {
var order = content.order.slice();
getSections(content).forEach(function (uid) {
var block = content.form[uid];
if (!block.opts || !Array.isArray(block.opts.questions)) { return; }
var idx = order.indexOf(uid);
if (idx === -1) { return; }
idx++;
block.opts.questions.forEach(function (el, i) {
order.splice(idx+i, 0, el);
});
});
return order;
};
var getBlockAnswers = function (answers, uid, filterCurve) {
if (!answers) { return; }
return Object.keys(answers || {}).map(function (user) {
if (filterCurve && user === filterCurve) { return; }
try {
return {
curve: user,
user: answers[user].msg._userdata,
results: answers[user].msg[uid]
};
} catch (e) { console.error(e); }
}).filter(Boolean);
};
// When there is a change to the form, we need to check if we can still add
// conditions to the different sections
evShowConditions.reg(function () {
(APP.formBlocks || []).forEach(function (block) {
if (!block || !block.updateState) { return; }
block.updateState();
});
});
// When a section contains a condition that is now invalid (the question has been moved
// or deleted locally), we need to redraw the list of conditions for this section
evCheckConditions.reg(function (_uid) {
(APP.formBlocks || []).some(function (block) {
if (block.uid && block.uid !== _uid) { return; }
if (!block || !block.updateState) { return; }
return block.updateState(true, _uid);
});
});
var linkClickHandler = function (ev) {
ev.preventDefault();
var href = ($(this).attr('href') || '').trim();
if (!href) { return; }
APP.common.openUnsafeURL(href);
};
var STATIC_TYPES = {
md: {
defaultOpts: {
text: Messages.form_description_default
},
get: function (opts) {
if (!opts) { opts = Util.clone(STATIC_TYPES.md.defaultOpts); }
var tag = h('div', {
id: 'form'+Util.uid()
}, opts.text);
var $tag = $(tag);
DiffMd.apply(DiffMd.render(opts.text || ''), $tag, APP.common);
$tag.find('a').click(linkClickHandler);
var cursorGetter;
return {
tag: tag,
edit: function (cb, tmp) {
// Cancel changes
var cancelBlock = saveAndCancelOptions(cb);
var text = opts.text;
var cursor;
if (tmp && tmp.cursor) {
cursor = tmp.cursor;
}
var block, editor;
if (tmp && tmp.block) {
block = tmp.block;
editor = tmp.editor;
}
var cm;
if (!block || !editor) {
var t = h('textarea');
block = h('div.cp-form-edit-options-block', [t]);
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.focus();
if (!(tmp && tmp.editor)) {
editor.setValue(text);
} else {
SFCodeMirror.setValueAndCursor(editor, editor.getValue(), text);
}
editor.refresh();
editor.save();
editor.focus();
});
if (APP.common && !(tmp && tmp.block) && cm) {
var markdownTb = APP.common.createMarkdownToolbar(editor, {
embed: function (mt) {
editor.focus();
editor.replaceSelection($(mt)[0].outerHTML);
}
});
$(block).prepend(markdownTb.toolbar);
$(markdownTb.toolbar).show();
cm.configureTheme(APP.common, function () {});
}
var getContent = function () {
return {
text: editor.getValue()
};
};
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)) {
cursor = {
start: editor.getCursor('from'),
end: editor.getCursor('to')
};
}
return {
cursor: cursor,
block: block,
editor: editor,
onChange: on
};
};
return [
block,
cancelBlock
];
},
getCursor: function () { return cursorGetter(); },
};
},
printResults: function () { return; },
icon: h('i.cptools.cptools-form-paragraph')
},
page: {
get: function () {
var tag = h('div.cp-form-page-break-edit', [
h('i.cptools.cptools-form-page-break'),
h('span', Messages.form_type_page)
]);
return {
tag: tag,
pageBreak: true
};
},
printResults: function () { return; },
icon: h('i.cptools.cptools-form-page-break')
},
section: {
defaultOpts: {
questions: []
},
get: function (opts, a, n, ev, data) {
var sortable = h('div.cp-form-section-sortable');
var tag = h('div.cp-form-section-edit', [
sortable
]);
if (!APP.isEditor) {
return {
tag: tag,
noViewMode: true
};
}
var block = data.block;
if (!opts) { opts = block.opts = Util.clone(STATIC_TYPES.section.defaultOpts); }
var content = data.content;
var uid = data.uid;
var form = content.form;
var framework = APP.framework;
var tmp = data.tmp;
var getConditionsValues = function () {
var order = getFullOrder(content);
var blockIdx = order.indexOf(uid);
var blocks = order.slice(0, blockIdx); // Get all previous questions
var values = blocks.map(function(uid) {
var block = form[uid];
var type = block.type;
if (['radio', 'checkbox'].indexOf(type) === -1) { return; }
var obj = {
uid: uid,
type: type,
q: block.q || Messages.form_default
};
var val;
if (type === 'radio') {
val = block.opts ? block.opts.values
: Util.clone(APP.TYPES.radio.defaultOpts.values);
}
if (type === 'checkbox') {
val = block.opts ? block.opts.values
: Util.clone(APP.TYPES.checkbox.defaultOpts.values);
}
obj.values = extractValues(val);
return obj;
}).filter(Boolean);
return values;
};
var addCondition = h('button.btn.btn-secondary', [
h('i.fa.fa-plus'),
h('span', Messages.form_conditional_add)
]);
var $addC = $(addCondition);
var getConditions;
var getAddAndButton = function ($container, rules) {
var btn = h('button.btn.btn-secondary.cp-form-add-and', [
h('i.fa.fa-plus'),
h('span', Messages.form_conditional_addAnd)
]);
var $b = $(btn).click(function () {
getConditions($container, true, rules, undefined, $b);
});
$container.append(btn);
return $b;
};
var values = getConditionsValues();
getConditions = function ($container, isNew, rules, condition, $btn) {
condition = condition || {};
condition.uid = condition.uid || Util.uid();
var content = h('div.cp-form-condition', {
'data-uid': condition.uid,
});
var $content = $(content);
var qSelect, iSelect, vSelect;
var onChange = function (resetV) {
var w = block.opts.when = block.opts.when || [];
if (qSelect) { condition.q = qSelect.getValue(); }
if (iSelect) { condition.is = Number(iSelect.getValue()); }
if (resetV) { delete condition.v; }
else if (vSelect) { condition.v = vSelect.getValue(); }
if (isNew) {
if (!Array.isArray(rules)) { // new set of rules (OR)
rules = [condition];
w.push(rules);
$btn = getAddAndButton($container, rules);
} else {
rules.push(condition);
}
isNew = false;
}
framework.localChange();
};
onChange();
var qOptions = values.map(function (obj) {
return {
tag: 'a',
attributes: {
'class': 'cp-form-condition-question',
'data-value': obj.uid,
'href': '#',
},
content: obj.q
};
});
var qConfig = {
text: Messages.form_condition_q, // Button initial text
options: qOptions, // Entries displayed in the menu
isSelect: true,
caretDown: true,
buttonCls: 'btn btn-secondary'
};
qSelect = UIElements.createDropdown(qConfig);
qSelect[0].dropdown = qSelect;
$(qSelect).attr('data-drop', 'q');
var isOn = !condition || condition.is !== 0;
var iOptions = [{
tag: 'a',
attributes: {
'data-value': 1,
'href': '#',
},
content: Messages.form_condition_is
}, {
tag: 'a',
attributes: {
'data-value': 0,
'href': '#',
},
content: Messages.form_condition_isnot
}];
var iConfig = {
options: iOptions, // Entries displayed in the menu
isSelect: true,
caretDown: true,
buttonCls: 'btn btn-default'
};
iSelect = UIElements.createDropdown(iConfig);
iSelect[0].dropdown = iSelect;
iSelect.setValue(isOn ? 1 : 0, undefined, true);
$(iSelect).attr('data-drop', 'i').hide();
iSelect.onChange.reg(function () { onChange(); });
var remove = h('button.btn.btn-danger-alt.cp-condition-remove', [
h('i.fa.fa-times.nomargin')
]);
$(remove).on('click', function () {
var w = block.opts.when = block.opts.when || [];
var deleteRule = false;
if (rules.length === 1) {
var rIdx = w.indexOf(rules);
w.splice(rIdx, 1);
deleteRule = true;
} else {
var idx = rules.indexOf(condition);
rules.splice(idx, 1);
}
framework.localChange();
framework._.cpNfInner.chainpad.onSettle(function () {
if (deleteRule) {
$content.closest('.cp-form-condition-rule').remove();
return;
}
$content.remove();
});
});
$content.append(qSelect).append(iSelect).append(remove);
if ($container.find('button.cp-form-add-and').length) {
$container.find('button.cp-form-add-and').before($content);
} else {
$container.append($content);
}
qSelect.onChange.reg(function (prettyVal, val, init) {
qSelect.find('button').removeClass('btn-secondary')
.addClass('btn-default');
onChange(!init);
$(iSelect).show();
var res, type;
values.some(function (obj) {
if (String(obj.uid) === String(val)) {
res = obj.values;
type = obj.type;
return true;
}
});
var $selDiv = $(iSelect);
if (type === 'checkbox') {
$selDiv.find('[data-value="0"]').text(Messages.form_condition_hasnot);
$selDiv.find('[data-value="1"]').text(Messages.form_condition_has);
} else {
$selDiv.find('[data-value="0"]').text(Messages.form_condition_isnot);
$selDiv.find('[data-value="1"]').text(Messages.form_condition_is);
}
iSelect.setValue(iSelect.getValue(), undefined, true);
$content.find('.cp-form-condition-values').remove();
if (!res) { return; }
var vOptions = res.map(function (str) {
return {
tag: 'a',
attributes: {
'class': 'cp-form-condition-value',
'data-value': str,
'href': '#',
},
content: str
};
});
var vConfig = {
text: Messages.form_condition_v, // Button initial text
options: vOptions, // Entries displayed in the menu
//left: true, // Open to the left of the button
//container: $(type),
isSelect: true,
caretDown: true,
buttonCls: 'btn btn-secondary'
};
vSelect = UIElements.createDropdown(vConfig);
vSelect[0].dropdown = vSelect;
vSelect.addClass('cp-form-condition-values').attr('data-drop', 'v');
$content.append(vSelect).append(remove);
vSelect.onChange.reg(function () {
vSelect.find('button').removeClass('btn-secondary')
.addClass('btn-default');
$(remove).off('click').click(function () {
var w = block.opts.when = block.opts.when || [];
var deleteRule = false;
if (rules.length === 1) {
var rIdx = w.indexOf(rules);
w.splice(rIdx, 1);
deleteRule = true;
} else {
var idx = rules.indexOf(condition);
rules.splice(idx, 1);
}
framework.localChange();
framework._.cpNfInner.chainpad.onSettle(function () {
if (deleteRule) {
$content.closest('.cp-form-condition-rule').remove();
return;
}
$content.remove();
});
}).appendTo($content);
onChange();
});
if (condition && condition.v && init) {
vSelect.setValue(condition.v, undefined, true);
vSelect.onChange.fire(condition.v, condition.v);
}
if (!tmp || tmp.uid !== condition.uid) { return; }
if (tmp.type === 'v') {
vSelect.click();
}
});
if (condition && condition.q) {
qSelect.setValue(condition.q, undefined, true);
qSelect.onChange.fire(condition.q, condition.q, true);
}
if (!tmp || tmp.uid !== condition.uid) { return; }
if (tmp.type === 'q') { qSelect.click(); }
else if (tmp.type === 'i') { iSelect.click(); }
};
var conditionalDiv = h('div.cp-form-conditional', [
h('div.cp-form-conditional-hint', Messages.form_conditional),
addCondition
]);
var $condition = $(conditionalDiv).prependTo(tag);
var redraw = function () {
var w = block.opts.when = block.opts.when || [];
w.forEach(function (rules) {
var rulesC = h('div.cp-form-condition-rule');
var $rulesC = $(rulesC);
var $b = getAddAndButton($rulesC, rules);
rules.forEach(function (obj) {
getConditions($rulesC, false, rules, obj, $b);
});
$addC.before($rulesC);
});
};
redraw();
var hintDiv = h('div.cp-form-conditional-hint', [
h('div.cp-form-conditional-hint', Messages.form_conditional_hint)
]);
var $hint = $(hintDiv).prependTo(tag);
$addC.click(function () {
var rulesC = h('div.cp-form-condition-rule');
var $rulesC = $(rulesC);
getConditions($rulesC, true);
$addC.before($rulesC);
});
var cursorGetter = function () {
var $activeDrop = $condition.find('.cp-dropdown-content:visible').first();
if (!$activeDrop.length) { return; }
var uid = $activeDrop.closest('.cp-form-condition').attr('data-uid');
var type = $activeDrop.closest('.cp-dropdown-container').attr('data-drop');
var $btn = $activeDrop.closest('.cp-dropdown-container').find('button');
var y = $btn && $btn.length && $btn[0].getBoundingClientRect().y;
return {
uid: uid,
type: type,
y: y
};
};
Sortable.create(sortable, {
group: {
name: 'nested',
put: function (to, from, el) {
// Make sure sections dan't be dropped into other sections
return $(el).attr('data-type') !== 'section';
}
},
direction: "vertical",
filter: "input, button, .CodeMirror, .cp-form-type-sort, .cp-form-block-type.editable",
preventOnFilter: false,
draggable: ".cp-form-block",
//forceFallback: true,
fallbackTolerance: 5,
onStart: function () {
var $container = $('div.cp-form-creator-content');
$container.find('.cp-form-creator-add-inline').remove();
},
store: {
set: function (s) {
opts.questions = s.toArray();
setTimeout(APP.framework.localChange);
if (APP.updateAddInline) { APP.updateAddInline(); }
}
}
});
// If "needRedraw" is false, we only want to know if we can add conditions and
// if we can't, make sure we delete incomplete conditions before hiding the button
// If "needRedraw" is true, it means we ant to redraw a section because some
// conditions are invalid
var updateState = function (needRedraw, _uid) {
if (needRedraw && uid !== _uid) { return; }
values = getConditionsValues();
var available = values.length;
if (available) {
$condition.show();
$hint.hide();
} else {
$condition.hide();
$hint.show();
}
if (needRedraw) {
$condition.find('.cp-form-condition-rule').remove();
redraw();
return true;
} else {
if (available) {
// Questions may have moved. We need to redraw our dropdowns
// to make sure we use the correct list
$condition.find('.cp-form-condition').each(function (i, el) {
// Update question dropdown
var $q = $(el).find('.cp-dropdown-container[data-drop="q"]');
var drop = $q[0] && $q[0].dropdown;
if (!drop) { return; }
var qOptions = values.map(function (obj) {
return {
tag: 'a',
attributes: {
'class': 'cp-form-condition-question',
'data-value': obj.uid,
'href': '#',
},
content: obj.q
};
});
var val = drop.getValue();
drop.setOptions(qOptions);
drop.setValue(val);
// Update values dropdown
var $v = $(el).find('.cp-dropdown-container[data-drop="v"]');
if (!$v.length) { return; }
var dropV = $v[0] && $v[0].dropdown;
if (!dropV) { return; }
var res, type;
values.some(function (obj) {
if (String(obj.uid) === String(val)) {
res = obj.values;
type = obj.type;
return true;
}
});
var vOptions = res.map(function (str) {
return {
tag: 'a',
attributes: {
'class': 'cp-form-condition-value',
'data-value': str,
'href': '#',
},
content: str
};
});
var valV = dropV.getValue();
dropV.setOptions(vOptions);
if (valV && res.indexOf(valV) === -1) {
dropV.setValue('', Messages.form_condition_v);
dropV.onChange.fire();
dropV.find('button').removeClass('btn-default')
.addClass('btn-secondary');
}
});
} else {
// We don't have invalid condition but we may have incomplete
// conditions to delete
block.opts.when = [];
$condition.find('.cp-form-condition-rule').remove();
}
}
};
updateState();
return {
updateState: updateState,
tag: tag,
noViewMode: true,
getCursor: cursorGetter,
};
},
printResults: function () { return; },
icon: h('i.cptools.cptools-form-conditional')
},
};
var arrayMax = function (A) {
return Array.isArray(A)? Math.max.apply(null, A): NaN;
};
var renderTally = function (tally, empty, showBar) {
var rows = [];
var counts = Util.values(tally);
var max = arrayMax(counts);
if (empty) { rows.push(getEmpty(empty)); }
Object.keys(tally).forEach(function (value) {
var itemCount = tally[value];
var itemScale = (itemCount / max);
rows.push(h('div.cp-charts-row', [
h('span.cp-value', {'title': value}, value),
h('span.cp-count', itemCount),
showBar? barGraphic(itemScale): undefined,
]));
});
return rows;
};
var TYPES = APP.TYPES = {
input: {
defaultOpts: {
type: 'text'
},
get: function (opts, a, n, evOnChange) {
if (!opts) { opts = Util.clone(TYPES.input.defaultOpts); }
// Messages.form_input_ph_email.form_input_ph_url
var tag = h('input', {
type: opts.type,
placeholder: Messages['form_input_ph_'+opts.type] || ''
});
var $tag = $(tag);
$tag.on('change keypress', Util.throttle(function () {
evOnChange.fire();
}, 500));
var cursorGetter;
var setCursorGetter = function (f) { cursorGetter = f; };
return {
tag: tag,
isEmpty: function () { return !$tag.val().trim(); },
getValue: function () {
//var invalid = $tag.is(':invalid');
//if (invalid) { return; }
return $tag.val();
},
setValue: function (val) { $tag.val(val); },
setEditable: function (state) {
if (state) { $tag.removeAttr('disabled'); }
else { $tag.attr('disabled', 'disabled'); }
},
edit: function (cb, tmp) {
var v = Util.clone(opts);
return editTextOptions(v, setCursorGetter, cb, tmp);
},
getCursor: function () { return cursorGetter(); },
reset: function () { $tag.val(''); }
};
},
printResults: function (answers, uid) { // results text
var results = [];
var empty = 0;
var tally = {};
var isEmpty = function (answer) {
return !answer || !answer.trim();
};
Object.keys(answers).forEach(function (author) {
var obj = answers[author];
var answer = obj.msg[uid];
if (isEmpty(answer)) { return empty++; }
Util.inc(tally, answer);
});
//var counts = Util.values(tally);
//var max = arrayMax(counts);
//if (max < 2) { // there are no duplicates, so just return text
results.push(getEmpty(empty));
Object.keys(answers).forEach(function (author) {
var obj = answers[author];
var answer = obj.msg[uid];
if (!answer || !answer.trim()) { return empty++; }
results.push(h('div.cp-charts-row', h('span.cp-value', answer)));
});
return h('div.cp-form-results-contained', h('div.cp-charts.cp-text-table', results));
//}
},
icon: h('i.cptools.cptools-form-text')
},
textarea: {
defaultOpts: {
maxLength: 1000
},
get: function (opts, a, n, evOnChange) {
if (!opts || typeof(opts.maxLength) === "undefined") { opts = Util.clone(TYPES.textarea.defaultOpts); }
var text = h('textarea', {maxlength: opts.maxLength});
var $text = $(text);
var charCount = h('div.cp-form-type-textarea-charcount');
var updateChar = function () {
var l = $text.val().length;
if (l > opts.maxLength) {
$text.val($text.val().slice(0, opts.maxLength));
l = $text.val().length;
}
$(charCount).text(Messages._getKey('form_maxLength', [
$text.val().length,
opts.maxLength
]));
};
updateChar();
var tag = h('div.cp-form-type-textarea', [
text,
charCount
]);
var evChange = Util.throttle(function () {
evOnChange.fire();
}, 500);
$text.on('change keypress keyup keydown', function () {
setTimeout(updateChar);
evChange();
});
var cursorGetter;
var setCursorGetter = function (f) { cursorGetter = f; };
return {
tag: tag,
isEmpty: function () { return !$text.val().trim(); },
getValue: function () { return $text.val().slice(0, opts.maxLength); },
setValue: function (val) {
$text.val(val);
updateChar();
},
setEditable: function (state) {
if (state) { $(tag).find('textarea').removeAttr('disabled'); }
else { $(tag).find('textarea').attr('disabled', 'disabled'); }
},
edit: function (cb, tmp) {
var v = Util.clone(opts);
return editTextOptions(v, setCursorGetter, cb, tmp);
},
getCursor: function () { return cursorGetter(); },
reset: function () { $text.val(''); }
};
},
printResults: function (answers, uid) { // results textarea
var results = [];
var empty = 0;
Object.keys(answers).forEach(function (author) { // TODO deduplicate these
var obj = answers[author];
var answer = obj.msg[uid];
if (!answer || !answer.trim()) { return empty++; }
results.push(h('div.cp-charts-row', h('span.cp-value', answer)));
});
results.unshift(getEmpty(empty));
return h('div.cp-form-results-contained', h('div.cp-charts.cp-text-table', results));
},
icon: h('i.cptools.cptools-form-paragraph')
},
radio: {
compatible: ['radio', 'checkbox', 'sort'],
defaultOpts: {
values: [1,2].map(function (i) {
return {
uid: Util.uid(),
v: Messages._getKey('form_defaultOption', [i])
};
})
},
get: function (opts, a, n, evOnChange) {
var isDefaultOpts = !opts;
if (!opts) { opts = Util.clone(TYPES.radio.defaultOpts); }
if (!Array.isArray(opts.values)) { return; }
var name = Util.uid();
var els = extractValues(opts.values).map(function (data, i) {
var radio = UI.createRadio(name, 'cp-form-'+name+'-'+i,
data, false, {});
$(radio).find('input').data('val', data);
return radio;
});
var tag = h('div.radio-group.cp-form-type-radio', els);
var cursorGetter;
var setCursorGetter = function (f) { cursorGetter = f; };
$(tag).find('input[type="radio"]').on('change', function () {
evOnChange.fire(false, false, true);
});
return {
tag: tag,
isEmpty: function () { return !this.getValue(); },
getValue: function () {
var res;
els.some(function (el) {
var $i = $(el).find('input');
if (Util.isChecked($i)) {
res = $i.data('val');
return true;
}
});
return res;
},
reset: function () { $(tag).find('input').removeAttr('checked'); },
setEditable: function (state) {
if (state) { $(tag).find('input').removeAttr('disabled'); }
else { $(tag).find('input').attr('disabled', 'disabled'); }
},
edit: function (cb, tmp) {
var v = Util.clone(opts);
return editOptions(v, isDefaultOpts, setCursorGetter, cb, tmp);
},
getCursor: function () { return cursorGetter(); },
setValue: function (val) {
this.reset();
els.some(function (el) {
var $el = $(el).find('input');
if ($el.data('val') === val) {
$el.prop('checked', true);
return true;
}
});
}
};
},
printResults: function (answers, uid, form, content) {
// results radio
var empty = 0;
var count = {};
var opts = form[uid].opts || Util.clone(TYPES.radio.defaultOpts);
extractValues(opts.values).forEach(function (v) { count[v] = 0; });
Object.keys(answers).forEach(function (author) {
var obj = answers[author];
var answer = obj.msg[uid];
if (!answer || !answer.trim || !answer.trim()) { return empty++; }
Util.inc(count, answer);
});
var showBars = Boolean(content);
var rendered = renderTally(count, empty, showBars);
return h('div.cp-charts.cp-bar-table', rendered);
},
icon: h('i.cptools.cptools-form-list-radio')
},
multiradio: {
compatible: ['multiradio', 'multicheck'],
defaultOpts: {
items: [1,2].map(function (i) {
return {
//uid: Util.uid(),
v: Messages._getKey('form_defaultItem', [i])
};
}),
values: [1,2].map(function (i) {
return {
uid: Util.uid(),
v: Messages._getKey('form_defaultOption', [i])
};
})
},
get: function (opts, a, n, evOnChange) {
var isDefaultOpts = !opts;
if (!opts) { opts = Util.clone(TYPES.multiradio.defaultOpts); }
if (!Array.isArray(opts.items) || !Array.isArray(opts.values)) { return; }
var lines = opts.items.map(function (itemData) {
if (!itemData.uid) {
itemData.uid = Util.uid();
if (APP.isEditor) { APP.framework.localChange(); }
}
var name = itemData.uid;
var item = itemData.v;
var els = extractValues(opts.values).map(function (data, i) {
var radio = UI.createRadio(name, 'cp-form-'+name+'-'+i,
'', false, {});
$(radio).find('input').data('uid', name);
$(radio).find('input').data('val', data);
return radio;
});
els.unshift(h('div.cp-form-multiradio-item', item));
return h('div.radio-group', {'data-uid':name}, els);
});
var header = extractValues(opts.values).map(function (v) { return h('span', v); });
header.unshift(h('span'));
lines.unshift(h('div.cp-form-multiradio-header', header));
var tag = h('div.radio-group.cp-form-type-multiradio', lines);
var cursorGetter;
var setCursorGetter = function (f) { cursorGetter = f; };
var $tag = $(tag);
$tag.find('input[type="radio"]').on('change', function () {
evOnChange.fire();
});
return {
tag: tag,
isEmpty: function () {
var v = this.getValue();
return !Object.keys(v).length || Object.keys(v).some(function (uid) {
return !v[uid];
});
},
getValue: function () {
var res = {};
var l = lines.slice(1);
l.forEach(function (el) {
var $el = $(el);
var uid = $el.attr('data-uid');
$el.find('input').each(function (i, input) {
var $i = $(input);
if (res[uid]) { return; }
res[uid] = undefined;
if (Util.isChecked($i)) { res[uid] = $i.data('val'); }
});
});
return res;
},
reset: function () { $(tag).find('input').removeAttr('checked'); },
setEditable: function (state) {
if (state) { $tag.find('input').removeAttr('disabled'); }
else { $tag.find('input').attr('disabled', 'disabled'); }
},
edit: function (cb, tmp) {
var v = Util.clone(opts);
return editOptions(v, isDefaultOpts, setCursorGetter, cb, tmp);
},
getCursor: function () { return cursorGetter(); },
setValue: function (val) {
this.reset();
Object.keys(val || {}).forEach(function (uid) {
$(tag).find('[name="'+uid+'"]').each(function (i, el) {
if ($(el).data('val') !== val[uid]) { return; }
$(el).prop('checked', true);
});
});
}
};
},
printResults: function (answers, uid, form, content) {
// results multiradio
var structure = form[uid];
if (!structure) { return; }
var opts = structure.opts || Util.clone(TYPES.multiradio.defaultOpts);
var results = [];
var empty = 0;
var count = {};
var showBars = Boolean(content);
Object.keys(answers).forEach(function (author) {
var obj = answers[author];
var answer = obj.msg[uid];
if (!answer || !Object.keys(answer).length) { return empty++; }
//count[answer] = count[answer] || {};
Object.keys(answer).forEach(function (q_uid) {
var c = count[q_uid];
if (!c) {
count[q_uid] = c = {};
extractValues(opts.values).forEach(function (v) { c[v] = 0; });
}
var res = answer[q_uid];
if (!res || !res.trim || !res.trim()) { return; }
Util.inc(c, res);
});
});
var max = 0;
var count_keys = Object.keys(count);
count_keys.forEach(function (q_uid) {
var counts = Object.values(count[q_uid]);
counts.push(max);
max = arrayMax(counts);
});
results.push(getEmpty(empty));
count_keys.forEach(function (q_uid) {
var q = findItem(opts.items, q_uid);
var c = count[q_uid];
results.push(multiAnswerSubHeading(q));
Object.keys(c).forEach(function (res) {
results.push(barRow(res, c[res], max, showBars));
});
});
return h('div.cp-charts.cp-bar-table', results);
},
exportCSV: function (answer, form) {
var opts = form.opts || {};
var q = form.q || Messages.form_default;
if (answer === false) {
return (opts.items || []).map(function (obj) {
return q + ' | ' + obj.v;
});
}
if (!answer) { return ['']; }
return (opts.items || []).map(function (obj) {
var uid = obj.uid;
return String(answer[uid] || '');
});
},
icon: h('i.cptools.cptools-form-grid-radio')
},
checkbox: {
compatible: ['radio', 'checkbox', 'sort'],
defaultOpts: {
max: 3,
values: [1, 2, 3].map(function (i) {
return {
uid: Util.uid(),
v: Messages._getKey('form_defaultOption', [i])
};
})
},
get: function (opts, a, n, evOnChange) {
var isDefaultOpts = !opts;
if (!opts) { opts = Util.clone(TYPES.checkbox.defaultOpts); }
if (!Array.isArray(opts.values)) { return; }
var name = Util.uid();
var els = extractValues(opts.values).map(function (data, i) {
var cbox = UI.createCheckbox('cp-form-'+name+'-'+i,
data, false, {});
$(cbox).find('input').data('val', data);
return cbox;
});
if (!opts.max) { opts.max = TYPES.checkbox.defaultOpts.max; }
var tag = h('div', [
h('div.cp-form-max-options', Messages._getKey('form_maxOptions', [opts.max])),
h('div.radio-group.cp-form-type-checkbox', els)
]);
var $tag = $(tag);
var checkDisabled = function () {
var selected = $tag.find('input:checked').length;
if (selected >= opts.max) {
$tag.find('input:not(:checked)').attr('disabled', 'disabled');
} else {
$tag.find('input').removeAttr('disabled');
}
};
$tag.find('input').on('change', function () {
checkDisabled();
evOnChange.fire(false, false, true);
});
var cursorGetter;
var setCursorGetter = function (f) { cursorGetter = f; };
return {
tag: tag,
isEmpty: function () {
var v = this.getValue();
return !v.length;
},
getValue: function () {
var res = [];
els.forEach(function (el) {
var $i = $(el).find('input');
if (Util.isChecked($i)) {
res.push($i.data('val'));
}
});
return res;
},
reset: function () {
$(tag).find('input').removeAttr('checked');
checkDisabled();
},
setEditable: function (state) {
if (state) { checkDisabled(); }
else { $tag.find('input').attr('disabled', 'disabled'); }
},
edit: function (cb, tmp) {
var v = Util.clone(opts);
return editOptions(v, isDefaultOpts, setCursorGetter, cb, tmp);
},
getCursor: function () { return cursorGetter(); },
setValue: function (val) {
this.reset();
if (!Array.isArray(val)) { return; }
els.forEach(function (el) {
var $el = $(el).find('input');
if (val.indexOf($el.data('val')) !== -1) {
$el.prop('checked', true);
}
});
checkDisabled();
}
};
},
printResults: function (answers, uid, form, content) {
// results checkbox
var empty = 0;
var count = {};
var opts = form[uid].opts || Util.clone(TYPES.checkbox.defaultOpts);
extractValues(opts.values || []).forEach(function (v) { count[v] = 0; });
var showBars = Boolean(content);
Object.keys(answers).forEach(function (author) {
var obj = answers[author];
var answer = obj.msg[uid];
if (answer && typeof(answer) === "string") { answer = [answer]; }
if (!Array.isArray(answer) || !answer.length) { return empty++; }
answer.forEach(function (val) {
Util.inc(count, val);
});
});
var rendered = renderTally(count, empty, showBars);
return h('div.cp-charts.cp-bar-table', rendered);
},
icon: h('i.cptools.cptools-form-list-check')
},
multicheck: {
compatible: ['multiradio', 'multicheck'],
defaultOpts: {
max: 3,
items: [1,2].map(function (i) {
return {
uid: Util.uid(),
v: Messages._getKey('form_defaultItem', [i])
};
}),
values: [1,2,3].map(function (i) {
return {
uid: Util.uid(),
v: Messages._getKey('form_defaultOption', [i])
};
})
},
get: function (opts, a, n, evOnChange) {
var isDefaultOpts = !opts;
if (!opts) { opts = Util.clone(TYPES.multicheck.defaultOpts); }
if (!Array.isArray(opts.items) || !Array.isArray(opts.values)) { return; }
var lines = opts.items.map(function (itemData) {
var name = itemData.uid;
var item = itemData.v;
var els = extractValues(opts.values).map(function (data, i) {
var cbox = UI.createCheckbox('cp-form-'+name+'-'+i,
'', false, {});
$(cbox).find('input').data('uid', name);
$(cbox).find('input').data('val', data);
return cbox;
});
els.unshift(h('div.cp-form-multiradio-item', item));
return h('div.radio-group', {'data-uid':name}, els);
});
if (!opts.max) { opts.max = TYPES.multicheck.defaultOpts.max; }
var checkDisabled = function (l) {
var selected = $(l).find('input:checked').length;
if (selected >= opts.max) {
$(l).find('input:not(:checked)').attr('disabled', 'disabled');
} else {
$(l).find('input').removeAttr('disabled');
}
};
lines.forEach(function (l) {
$(l).find('input').on('change', function () {
checkDisabled(l);
evOnChange.fire();
});
});
var header = extractValues(opts.values).map(function (v) { return h('span', v); });
header.unshift(h('span'));
lines.unshift(h('div.cp-form-multiradio-header', header));
var tag = h('div.radio-group.cp-form-type-multiradio', lines);
var cursorGetter;
var setCursorGetter = function (f) { cursorGetter = f; };
return {
tag: tag,
isEmpty: function () {
var v = this.getValue();
return Object.keys(v).some(function (uid) {
return !v[uid].length;
});
},
getValue: function () {
var res = {};
var l = lines.slice(1);
l.forEach(function (el) {
var $el = $(el);
var uid = $el.attr('data-uid');
res[uid] = [];
$el.find('input').each(function (i, input) {
var $i = $(input);
if (Util.isChecked($i)) { res[uid].push($i.data('val')); }
});
});
return res;
},
reset: function () {
$(tag).find('input').removeAttr('checked');
lines.forEach(checkDisabled);
},
setEditable: function (state) {
if (state) { lines.forEach(checkDisabled); }
else { $(tag).find('input').attr('disabled', 'disabled'); }
},
edit: function (cb, tmp) {
var v = Util.clone(opts);
return editOptions(v, isDefaultOpts, setCursorGetter, cb, tmp);
},
getCursor: function () { return cursorGetter(); },
setValue: function (val) {
this.reset();
Object.keys(val || {}).forEach(function (uid) {
if (!Array.isArray(val[uid])) { return; }
$(tag).find('[data-uid="'+uid+'"] input').each(function (i, el) {
if (val[uid].indexOf($(el).data('val')) === -1) { return; }
$(el).prop('checked', true);
});
});
lines.forEach(checkDisabled);
}
};
},
printResults: function (answers, uid, form, content ) {
// results multicheckbox
var structure = form[uid];
if (!structure) { return; }
var opts = structure.opts || Util.clone(TYPES.multicheck.defaultOpts);
var results = [];
var empty = 0;
var count = {};
var showBars = Boolean(content);
var isEmpty = function (answer) {
if (!answer) { return true; }
return !Object.keys(answer).some(function (k) {
var A = answer[k];
return Array.isArray(A) && A.length;
});
};
Object.keys(answers).forEach(function (author) {
var obj = answers[author];
var answer = obj.msg[uid];
if (isEmpty(answer)) { return empty++; }
Object.keys(answer).forEach(function (q_uid) {
var c = count[q_uid];
if (!c) {
count[q_uid] = c = {};
extractValues(opts.values || []).forEach(function (v) { c[v] = 0; });
}
var res = answer[q_uid];
if (res && typeof(res) === "string") { res = [res]; }
if (!Array.isArray(res) || !res.length) { return; }
res.forEach(function (v) {
Util.inc(c, v);
});
});
});
var max = 0;
var count_keys = Object.keys(count);
count_keys.forEach(function (q_uid) {
var counts = Object.values(count[q_uid]);
counts.push(max);
max = arrayMax(counts);
});
results.push(getEmpty(empty));
count_keys.forEach(function (q_uid) {
var q = findItem(opts.items, q_uid);
var c = count[q_uid];
results.push(multiAnswerSubHeading(q));
Object.keys(c).forEach(function (res) {
results.push(barRow(res, c[res], max, showBars));
});
});
return h('div.cp-charts.cp-bar-table', results);
},
exportCSV: function (answer, form) {
var opts = form.opts || {};
var q = form.q || Messages.form_default;
if (answer === false) {
return (opts.items || []).map(function (obj) {
return q + ' | ' + obj.v;
});
}
if (!answer) { return ['']; }
return (opts.items || []).map(function (obj) {
var uid = obj.uid;
return String(answer[uid] || '');
});
},
icon: h('i.cptools.cptools-form-grid-check')
},
sort: {
compatible: ['radio', 'checkbox', 'sort'],
defaultOpts: {
values: [1,2].map(function (i) {
return {
uid: Util.uid(),
v: Messages._getKey('form_defaultOption', [i])
};
})
},
get: function (opts, a, n, evOnChange) {
var isDefaultOpts = !opts;
if (!opts) { opts = Util.clone(TYPES.sort.defaultOpts); }
if (!Array.isArray(opts.values)) { return; }
var map = {};
var invMap = {};
var sorted = false;
if (!APP.isEditor) {
/* There is probably a more reliable check for this, but if we always
shuffle the values then authors reorder the results in the data structure
every time they reload. If multiple authors are present then this leads
to fights over what the content should be, which tends to trick chainpad
into concatenating strings, which quickly turns the sortable list
into complete nonsense.
*/
Util.shuffleArray(opts.values);
}
var els = extractValues(opts.values).map(function (data) {
var uid = Util.uid();
map[uid] = data;
invMap[data] = uid;
var div = h('div.cp-form-type-sort', {'data-id': uid}, [
h('span.cp-form-handle', [
h('i.fa.fa-ellipsis-v'),
h('i.fa.fa-ellipsis-v'),
]),
h('span.cp-form-sort-order', '?'),
h('span', data)
]);
$(div).data('val', data);
return div;
});
var tag = h('div.cp-form-type-sort-container', [
h('div.cp-form-sort-hint', Messages._getKey('form_sort_hint', [els.length])),
els
]);
var $tag = $(tag);
var reorder = function (reset) {
$tag.find('.cp-form-type-sort').each(function (i, el) {
$(el).find('.cp-form-sort-order').text(reset ? '?' : i+1);
});
sorted = !reset;
};
var cursorGetter;
var setCursorGetter = function (f) { cursorGetter = f; };
var sortable = Sortable.create(tag, {
direction: "vertical",
draggable: ".cp-form-type-sort",
forceFallback: true,
store: {
set: function () {
reorder();
evOnChange.fire();
}
}
});
return {
tag: tag,
isEmpty: function () { return !this.getValue(); },
getValue: function () {
if (!sorted) { return; }
return sortable.toArray().map(function (id) {
return map[id];
});
},
reset: function () {
Util.shuffleArray(opts.values);
var toSort = extractValues(opts.values).map(function (val) {
return invMap[val];
});
sortable.sort(toSort);
reorder(true);
},
setEditable: function (state) {
sortable.options.disabled = !state;
$(tag).toggleClass('cp-form-disabled', !state);
},
edit: function (cb, tmp) {
var v = Util.clone(opts);
return editOptions(v, isDefaultOpts, setCursorGetter, cb, tmp);
},
getCursor: function () { return cursorGetter(); },
setValue: function (val) {
if (!Array.isArray(val)) { val = []; }
var toSort = val.map(function (val) {
return invMap[val];
});
sortable.sort(toSort);
reorder();
}
};
},
printResults: function (answers, uid, form, content) {
// results sort
var opts = form[uid].opts || Util.clone(TYPES.sort.defaultOpts);
var l = (opts.values || []).length;
var empty = 0;
var count = {};
extractValues(opts.values || []).forEach(function (v) { count[v] = 0; });
var showBars = Boolean(content);
Object.keys(answers).forEach(function (author) {
var obj = answers[author];
var answer = obj.msg[uid];
if (answer && typeof(answer) === "string") { answer = [answer]; }
if (!Array.isArray(answer) || !answer.length) { return empty++; }
answer.forEach(function (el, i) {
var score = l - i;
Util.inc(count, el, score);
});
});
var rendered = renderTally(count, empty, showBars);
return h('div.cp-charts.cp-bar-table', rendered);
},
icon: h('i.cptools.cptools-form-list-ordered')
},
poll: {
defaultOpts: {
type: 'text', // Text or Days or Time
values: [1, 2, 3].map(function (i) {
return {
uid: Util.uid(),
v: Messages._getKey('form_defaultOption', [i])
};
})
},
get: function (opts, answers, username, evOnChange) {
var isDefaultOpts = !opts;
if (!opts) { opts = Util.clone(TYPES.poll.defaultOpts); }
if (!Array.isArray(opts.values)) { return; }
if (APP.isEditor) { answers = {}; }
var lines = makePollTable(answers, opts, false);
var disabled = false;
// Add form
var addLine = extractValues(opts.values).map(function (data) {
var cell = h('div.cp-poll-cell.cp-form-poll-choice', [
h('i.fa.fa-times.cp-no'),
h('i.fa.fa-check.cp-yes'),
h('i.cptools.cptools-form-poll-maybe.cp-maybe'),
]);
var $c = $(cell);
$c.data('option', data);
var val = 0;
$c.attr('data-value', val);
$c.click(function () {
if (disabled) { return; }
val = (val+1)%3;
$c.attr('data-value', val);
evOnChange.fire();
});
cell._setValue = function (v) {
val = v;
$c.attr('data-value', val);
};
return cell;
});
// Name input
//var nameInput = h('input', { value: username || Messages.anonymous });
var nameInput = h('span.cp-poll-your-answers', Messages.form_pollYourAnswers);
addLine.unshift(h('div.cp-poll-cell', nameInput));
lines.push(h('div', addLine));
var total = makePollTotal(answers, opts, addLine, evOnChange);
if (total) { lines.push(h('div', total)); }
var pollHint = UI.setHTML(h('div.cp-form-poll-hint'), Messages.form_poll_hint);
var classes = [
'fa fa-check cp-yes',
'fa fa-times cp-no',
'cptools cptools-form-poll-maybe cp-maybe',
];
$(pollHint).find('i').each(function (index) {
this.setAttribute('class', classes[index]);
});
var tag = h('div.cp-form-type-poll-container', [
pollHint,
h('div.cp-form-type-poll', lines)
]);
var $tag = $(tag);
var cursorGetter;
var setCursorGetter = function (f) { cursorGetter = f; };
return {
tag: tag,
getValue: function () {
var res = {};
$tag.find('.cp-form-poll-choice').each(function (i, el) {
var $el = $(el);
res[$el.data('option')] = $el.attr('data-value');
});
return {
values: res
};
},
reset: function () {
$tag.find('.cp-form-poll-choice').attr('data-value', 0);
},
setEditable: function (state) {
disabled = !state;
$tag.toggleClass('cp-form-disabled', disabled);
},
edit: function (cb, tmp) {
var v = Util.clone(opts);
return editOptions(v, isDefaultOpts, setCursorGetter, cb, tmp);
},
getCursor: function () { return cursorGetter(); },
setValue: function (res) {
this.reset();
if (!res || !res.values) { return; }
var val = res.values;
$tag.find('.cp-form-poll-choice').each(function (i, el) {
if (!el._setValue) { return; }
var $el = $(el);
el._setValue(val[$el.data('option')] || 0);
});
}
};
},
printResults: function (answers, uid, form, content) {
var opts = form[uid].opts || Util.clone(TYPES.poll.defaultOpts);
var _answers = getBlockAnswers(answers, uid);
// If content is defined, we'll be able to click on a row to display
// all the answers of this user
var lines = makePollTable(_answers, opts, content && {
content: content,
answers: answers
});
var total = makePollTotal(_answers, opts);
if (total) { lines.push(h('div', total)); }
return h('div.cp-form-type-poll', lines);
},
exportCSV: function (answer, form) {
var opts = form.opts || Util.clone(TYPES.poll.defaultOpts);
var q = form.q || Messages.form_default;
if (answer === false) {
var cols = extractValues(opts.values).map(function (key) {
return q + ' | ' + key;
});
cols.unshift(q);
return cols;
}
if (!answer || !answer.values) {
var empty = opts.values.map(function () { return ''; });
empty.unshift('');
return empty;
}
var str = '';
Object.keys(answer.values).sort().forEach(function (k, i) {
if (i !== 0) { str += ';'; }
str += k.replace(';', '').replace(':', '') + ':' + answer.values[k];
});
var res = extractValues(opts.values).map(function (key) {
return answer.values[key] || '';
});
res.unshift(str);
return res;
},
icon: h('i.cptools.cptools-form-poll')
},
};
var getDay = function (d) {
return new Date(d.getFullYear(), d.getMonth(), d.getDate());
};
var ONE_DAY = 1000 * 60 * 60 * 24;
var getDayArray = function (a, b) {
// coerce inputs to numbers
var r_a = +getDay(new Date(a));
var r_b = +getDay(new Date(b));
var A = [ r_a ];
var next = r_a + ONE_DAY;
while (next <= r_b) {
A.push(next);
next += ONE_DAY;
}
return A;
};
Messages.form_timelineLabel = "{0} ({1})"; // TODO investigate whether this needs translation
var makeTimeline = APP.makeTimeline = function (answers) {
// Randomly changing date of answers to get a more realistic example of timeline
var tally = {};
//var answersByTime = {};
Object.keys(answers).forEach(function (curve) {
var obj = answers[curve];
var day = getDay(new Date(obj.time));
Util.inc(tally, +day);
});
var times = Object.keys(tally).map(Number).filter(Boolean);
var max_count = arrayMax(Util.values(tally));
var min_day = Math.min.apply(null, times);
var max_day = arrayMax(times);
var days = getDayArray(new Date(min_day), new Date(max_day));
if (days.length < 2) { return; }
return h('div.timeline-container', {
//style: 'width: 100%; height: 200px;',
}, h('table.cp-charts.column.cp-chart-timeline.cp-chart-table',
h('tbody', days.map(function (time) {
var count = tally[time] || 0;
var percent = count / max_count;
var date = new Date(time).toLocaleDateString();
var bar = h('td', {
style: '--size: ' + Number(percent).toFixed(2),
//"data-tippy-placement": "top",
title: Messages._getKey('form_timelineLabel', [date, count])
});
//var dateEl = h('th', { scope: "row" }, date);
return h('tr', bar/* dateEl*/ );
}))
)
);
};
var renderResults = APP.renderResults = function (content, answers, showUser) {
var $container = $('div.cp-form-creator-results').empty().css('display', '');
var framework = APP.framework;
var title = framework._.title.title || framework._.title.defaultTitle;
$container.append(h('h1.cp-form-view-title', title));
var answerCount = Object.keys(answers || {}).length;
if (!answerCount) {
$container.append(h('div.alert.alert-info', Messages.form_results_empty));
return;
}
var heading = h('h2#cp-title', Messages._getKey('form_totalResponses', [answerCount]));
$(heading).appendTo($container);
var timeline = h('div.cp-form-creator-results-timeline');
var $timeline = $(timeline).appendTo($container);
$timeline.append(makeTimeline(answers));
var controls = h('div.cp-form-creator-results-controls');
var $controls = $(controls).appendTo($container);
var exportButton = h('button.btn.btn-primary', [
h('i.fa.fa-download'),
Messages.form_exportCSV
]);
$(exportButton).appendTo($controls);
var results = h('div.cp-form-creator-results-content');
var $results = $(results).appendTo($container);
$(exportButton).click(function () {
var csv = Exporter.results(content, answers, TYPES, getFullOrder(content));
if (!csv) { return void UI.warn(Messages.error); }
var suggestion = APP.framework._.title.suggestTitle('cryptpad-document');
var title = Util.fixFileName(suggestion) + '.csv';
window.saveAs(new Blob([csv], {
type: 'text/csv'
}), title);
});
// Export in "sheet"
var export2Button = h('button.btn.btn-primary', [
h('i.fa.fa-file-excel-o'),
Messages.form_exportSheet
]);
$(export2Button).appendTo($controls);
$(export2Button).click(function () {
var arr = Exporter.results(content, answers, TYPES, getFullOrder(content), true);
if (!arr) { return void UI.warn(Messages.error); }
var sframeChan = framework._.sfCommon.getSframeChannel();
var title = framework._.title.title || framework._.title.defaultTitle;
sframeChan.event('EV_EXPORT_SHEET', {
title: title,
content: arr
});
});
var summary = true;
var form = content.form;
var switchMode = h('button.btn.btn-secondary', Messages.form_showIndividual);
$controls.hide().append(switchMode);
var show = function (answers, header) {
var order = getFullOrder(content);
var elements = order.map(function (uid) {
var block = form[uid];
var type = block.type;
var model = TYPES[type];
if (!model || !model.printResults) { return; }
// Only use content if we're not viewing individual answers
var print = model.printResults(answers, uid, form, !header && content);
var q = h('div.cp-form-block-question', block.q || Messages.form_default);
//Messages.form_type_checkbox.form_type_input.form_type_md.form_type_multicheck.form_type_multiradio.form_type_poll.form_type_radio.form_type_sort.form_type_textarea.form_type_section
return h('div.cp-form-block', [
h('div.cp-form-block-type', [
TYPES[type].icon.cloneNode(),
h('span', Messages['form_type_'+type])
]),
q,
h('div.cp-form-block-content', print),
]);
});
$results.empty().append(elements);
if (header) { $results.prepend(header); }
};
show(answers);
if (APP.isEditor || APP.isAuditor) { $controls.show(); }
var $s = $(switchMode).click(function () {
$results.empty();
if (!summary) {
$s.text(Messages.form_showIndividual);
summary = true;
show(answers);
return;
}
summary = false;
$s.text(Messages.form_showSummary);
var origin, priv;
if (APP.common) {
var metadataMgr = APP.common.getMetadataMgr();
priv = metadataMgr.getPrivateData();
origin = priv.origin;
}
var getHref = function (hash) {
if (APP.common) {
return origin + Hash.hashToHref(hash, 'profile');
}
return '#';
};
var els = Object.keys(answers).map(function (curve) {
var obj = answers[curve];
var answer = obj.msg;
var date = new Date(obj.time).toLocaleString();
var text, warning, badge;
if (!answer._userdata || (!answer._userdata.name && !answer._userdata.curvePublic)) {
text = Messages._getKey('form_answerAnonymous', [date]);
} else {
var ud = answer._userdata;
var user;
if (ud.profile) {
if (priv && priv.friends[curve]) {
badge = h('span.cp-form-friend', [
h('i.fa.fa-address-book'),
Messages._getKey('isContact', [ud.name || Messages.anonymous])
]);
}
user = h('a', {
href: getHref(ud.profile) // Only used visually
}, Util.fixHTML(ud.name || Messages.anonymous));
if (curve !== ud.curvePublic) {
warning = h('span.cp-form-warning', Messages.form_answerWarning);
}
} else {
user = h('b', Util.fixHTML(ud.name || Messages.anonymous));
}
text = Messages._getKey('form_answerName', [user.outerHTML, date]);
}
var span = UI.setHTML(h('span'), text);
var viewButton = h('button.btn.btn-secondary.small', Messages.form_viewButton);
var div = h('div.cp-form-individual', [span, viewButton, warning, badge]);
$(viewButton).click(function () {
var res = {};
res[curve] = obj;
var back = h('button.btn.btn-secondary.small', Messages.form_backButton);
$(back).click(function () {
summary = true;
$s.click();
});
var header = h('div.cp-form-individual', [
span.cloneNode(true),
back
]);
show(res, header);
});
$(div).find('a').click(function (e) {
e.preventDefault();
APP.common.openURL(Hash.hashToHref(ud.profile, 'profile'));
});
if (showUser === curve) {
setTimeout(function () {
showUser = undefined;
$(viewButton).click();
});
}
return div;
});
$results.append(els);
});
if (showUser) {
$s.click();
}
};
var getAnswersLength = function (answers) {
return Object.keys(answers || {}).filter(function (key) {
return key && key.slice(0,1) !== "_";
}).length;
};
var addResultsButton = function (framework, content, answers) {
var $container = $('.cp-forms-results-participant');
var l = getAnswersLength(answers);
var $res = $(h('button.btn.btn-default.cp-toolbar-form-button', [
h('i.fa.fa-bar-chart'),
h('span.cp-button-name', Messages._getKey('form_results', [l])),
]));
$res.click(function () {
$res.attr('disabled', 'disabled');
var sframeChan = framework._.sfCommon.getSframeChannel();
sframeChan.query("Q_FORM_FETCH_ANSWERS", content.answers, function (err, obj) {
var answers = obj && obj.results;
if (answers) { APP.answers = answers; }
$res.removeAttr('disabled');
$('body').addClass('cp-app-form-results');
renderResults(content, answers);
$res.remove();
var $editor = $(h('button.btn.btn-default', [
h('i.fa.fa-pencil'),
h('span.cp-button-name', Messages.form_editor)
]));
$editor.click(function () {
$('body').removeClass('cp-app-form-results');
$editor.remove();
sframeChan.query("Q_FORM_FETCH_ANSWERS", content.answers, function (err, obj) {
var answers = obj && obj.results;
addResultsButton(framework, content, answers);
});
});
$container.prepend($editor);
});
});
$container.prepend($res);
};
var getLogo = function () {
var logo = h('div.cp-form-view-logo', [
h('img', {
src:'/customize/CryptPad_logo_grey.svg?'+ApiConfig.requireConf.urlArgs,
alt:'CryptPad_logo'
}),
h('span', 'CryptPad')
]);
$(logo).click(function () {
APP.framework._.sfCommon.gotoURL('/');
});
var footer = h('div.cp-form-view-footer', [logo]);
return footer;
};
var showAnsweredPage = function (framework, content, answers) {
var $formContainer = $('div.cp-form-creator-content').hide();
var $resContainer = $('div.cp-form-creator-results').hide();
var $container = $('div.cp-form-creator-answered').empty().css('display', '');
if (APP.answeredInForm) {
$container.hide();
$formContainer.css('display', '');
} else if (APP.answeredInResponses) {
$container.hide();
$resContainer.css('display', '');
}
var viewOnly = content.answers.cantEdit || APP.isClosed;
var action = h(viewOnly ? 'button.btn.btn-secondary' : 'button.btn.btn-primary', [
viewOnly ? h('i.fa.fa-bar-chart') : h('i.fa.fa-pencil'),
h('span', viewOnly ? Messages.form_viewAnswer : Messages.form_editAnswer)
]);
$(action).click(function () {
$formContainer.css('display', '');
$container.hide();
APP.answeredInForm = true;
if (viewOnly) {
$formContainer.find('.cp-form-send-container .cp-open').hide();
if (Array.isArray(APP.formBlocks)) {
APP.formBlocks.forEach(function (b) {
if (!b.setEditable) { return; }
b.setEditable(false);
});
}
}
});
if (answers._time) { APP.lastAnswerTime = answers._time; }
// If responses are public, show button to view them
var responses;
if (content.answers.privateKey) {
var l = getAnswersLength(answers);
responses = h('button.btn.btn-secondary', [
h('i.fa.fa-bar-chart'),
h('span.cp-button-name', Messages._getKey('form_viewAllAnswers', [l]))
]);
var sframeChan = framework._.sfCommon.getSframeChannel();
sframeChan.query("Q_FORM_FETCH_ANSWERS", content.answers, function (err, obj) {
var answers = obj && obj.results;
var l = getAnswersLength(answers);
$(responses).find('.cp-button-name').text(Messages._getKey('form_viewAllAnswers', [l]));
});
$(responses).click(function () {
sframeChan.query("Q_FORM_FETCH_ANSWERS", content.answers, function (err, obj) {
APP.answeredInResponses = true;
var answers = obj && obj.results;
if (answers) { APP.answers = answers; }
$('body').addClass('cp-app-form-results');
renderResults(content, answers);
$container.hide();
});
});
}
var description = h('div.cp-form-creator-results-description#cp-form-response-msg');
if (content.answers.msg) {
var $desc = $(description);
DiffMd.apply(DiffMd.render(content.answers.msg), $desc, APP.common);
$desc.find('a').click(linkClickHandler);
}
var actions = h('div.cp-form-submit-actions', [
action,
responses || undefined
]);
var title = framework._.title.title || framework._.title.defaultTitle;
$container.append(h('div.cp-form-submit-success', [
h('h3.cp-form-view-title', title),
h('div.alert.alert-info', Messages._getKey('form_alreadyAnswered', [
new Date(APP.lastAnswerTime).toLocaleString()])),
description,
actions
]));
$container.append(getLogo());
};
var getFormResults = function () {
if (!Array.isArray(APP.formBlocks)) { return; }
var results = {};
APP.formBlocks.some(function (data) {
if (!data.getValue) { return; }
results[data.uid] = data.getValue();
});
return results;
};
var getSectionFromQ = function (content, uid) {
var arr = content.order;
var idx = content.order.indexOf(uid);
var sectionUid;
if (idx === -1) { // If it's not in the main array, check in sections
getSections(content).some(function (_uid) {
var block = content.form[_uid];
if (!block.opts || !Array.isArray(block.opts.questions)) { return; }
var _idx = block.opts.questions.indexOf(uid);
if (_idx !== -1) {
arr = block.opts.questions;
sectionUid = _uid;
idx = _idx;
return true;
}
});
}
return {
uid: sectionUid,
arr: arr,
idx: idx
};
};
var removeQuestion = function (content, uid) {
delete content.form[uid];
var idx = content.order.indexOf(uid);
if (idx !== -1) {
content.order.splice(idx, 1);
} else {
getSections(content).some(function (_uid) {
var block = content.form[_uid];
if (!block.opts || !Array.isArray(block.opts.questions)) { return; }
var _idx = block.opts.questions.indexOf(uid);
if (_idx !== -1) {
block.opts.questions.splice(_idx, 1);
return true;
}
});
}
};
var checkResults = {};
var checkCondition = function (block) {
if (!block || block.type !== 'section') { return; }
if (!block.opts || !Array.isArray(block.opts.questions) || !block.opts.when) {
return true;
}
// This function may be called multiple times synchronously to check the conditions
// of multiple sections. These sections may require the result of the same question
// so we store the results in an object outside.
// To make sure the results are cleared on the next change in the form, we
// clear it just after the current synchronous actions are done.
setTimeout(function () { checkResults = {}; });
var results = checkResults;
var findResult = function (uid) {
if (results.hasOwnProperty(uid)) { return results[uid]; }
APP.formBlocks.some(function (data) {
if (!data.getValue) { return; }
if (data.uid === String(uid)) {
results[uid] = data.getValue();
return true;
}
});
return results[uid];
};
var w = block.opts.when;
return !w.length || w.some(function (rules) {
return rules.every(function (rule) {
var res = findResult(rule.q);
// Checkbox
if (Array.isArray(res)) {
var idx = res.indexOf(rule.v);
return rule.is ? idx !== -1 : idx === -1;
}
// Radio
return rule.is ? res === rule.v : res !== rule.v;
});
});
};
var makeFormControls = function (framework, content, evOnChange) {
var loggedIn = framework._.sfCommon.isLoggedIn();
var metadataMgr = framework._.cpNfInner.metadataMgr;
var user = metadataMgr.getUserData();
if (!loggedIn && !content.answers.anonymous) { return; }
var $anonName;
var anonRadioOn = UI.createRadio('cp-form-anon', 'cp-form-anon-on',
Messages.form_anonymousBox, false, {
input: { value: 1 },
});
var anonOffContent = h('span');
var anonRadioOff = UI.createRadio('cp-form-anon', 'cp-form-anon-off',
anonOffContent, false, {
input: { value: 0 },
});
var radioContainer = h('div.cp-form-required-radio', [
Messages.form_answerChoice,
anonRadioOn,
anonRadioOff,
]);
var $radio = $(radioContainer);
if (content.answers.makeAnonymous) {
// If we make all answers anonymous, hide the checkbox and display a message
$radio.hide();
$(anonRadioOn).find('input').prop('checked', true);
setTimeout(function () {
// We need to wait for cbox to be added into the DOM before using .after()
$radio.after(h('div.alert.alert-info', Messages.form_anonAnswer));
});
} else if (content.answers.anonymous) {
// Answers aren't anonymous and guests are allowed
// Guests can set a username and logged in users can answer anonymously
if (!loggedIn) {
$(anonOffContent).append(h('span.cp-form-anon-answer-input', [
Messages.form_answerAs,
h('input', {
value: user.name || '',
placeholder: Messages.form_anonName
})
]));
$anonName = $(anonOffContent).find('input');
var $off = $(anonRadioOff).find('input[type="radio"]');
$anonName.on('click input', function () {
if (!Util.isChecked($off)) { $off.prop('checked', true); }
});
} else if (APP.cantAnon) {
// You've already answered with your credentials
$(anonRadioOn).find('input').attr('disabled', 'disabled');
$(anonRadioOff).find('input[type="radio"]').prop('checked', true);
}
if (!$anonName) {
$(anonOffContent).append(h('div.cp-form-anon-answer-input', [
Messages.form_answerAs,
h('span.cp-form-anon-answer-registered', user.name || Messages.anonymous)
]));
}
if (!$radio.find('input[type="radio"]:checked').length) {
$radio.addClass('cp-radio-required');
$radio.find('input[type="radio"]').on('change', function () {
$radio.removeClass('cp-radio-required');
});
}
} else {
// Answers don't have to be anonymous and only logged in users can answer
// ==> they have to answer with their keys so we know their name too
$(anonRadioOn).find('input').attr('disabled', 'disabled');
$(anonRadioOff).find('input[type="radio"]').prop('checked', true);
setTimeout(function () {
// We need to wait for cbox to be added into the DOM before using .after()
if (content.answers.cantEdit) { return; }
$radio.after(h('div.alert.alert-info', Messages.form_authAnswer));
});
$(anonOffContent).append(h('div.cp-form-anon-answer-input', [
Messages.form_answerAs,
h('span.cp-form-anon-answer-registered', user.name || Messages.anonymous)
]));
}
if (APP.hasAnswered && content.answers.cantEdit || APP.isClosed) {
$radio.hide();
}
var send = h('button.cp-open.btn.btn-primary', APP.hasAnswered ? Messages.form_update : Messages.form_submit);
var reset = h('button.cp-open.cp-reset-button.btn.btn-danger-alt', Messages.form_reset);
$(reset).click(function () {
if (!Array.isArray(APP.formBlocks)) { return; }
APP.formBlocks.forEach(function (data) {
if (typeof(data.reset) === "function") { data.reset(); }
});
$(reset).attr('disabled', 'disabled');
evOnChange.fire();
});
var $send = $(send).click(function () {
if (!$radio.find('input[type="radio"]:checked').length) {
return UI.warn(Messages.error);
}
$send.attr('disabled', 'disabled');
var results = getFormResults();
if (!results) { return; }
var wantName = Util.isChecked($(anonRadioOff).find('input[type="radio"]'));
var user = metadataMgr.getUserData();
if (wantName && !content.answers.makeAnonymous) {
results._userdata = loggedIn ? {
avatar: user.avatar,
name: user.name,
notifications: user.notifications,
curvePublic: user.curvePublic,
profile: user.profile
} : {
name: $anonName ? $anonName.val() : user.name
};
}
var sframeChan = framework._.sfCommon.getSframeChannel();
sframeChan.query('Q_FORM_SUBMIT', {
mailbox: content.answers,
results: results,
anonymous: content.answers.makeAnonymous || !loggedIn
|| (!wantName && !APP.cantAnon) // use ephemeral keys
}, function (err, data) {
$send.attr('disabled', 'disabled');
if (err || (data && data.error)) {
if (data.error === "EANSWERED") {
return void UI.warn(Messages.form_answered);
}
console.error(err || data.error);
return void UI.warn(Messages.error);
}
if (results._userdata && loggedIn) {
$(anonRadioOn).find('input').attr('disabled', 'disabled');
$(anonRadioOff).find('input[type="radio"]').prop('checked', true);
APP.cantAnon = true;
}
evOnChange.fire(false, true);
window.onbeforeunload = undefined;
$send.removeAttr('disabled');
$send.text(Messages.form_update);
APP.hasAnswered = true;
APP.answeredInForm = false;
showAnsweredPage(framework, content, { '_time': +new Date() });
if (content.answers.cantEdit) {
$(radioContainer).hide();
}
});
});
if (APP.isClosed) {
send = undefined;
reset = undefined;
}
var errors = h('div.cp-form-invalid-warning');
var $errors = $(errors);
var invalid = h('div.cp-form-invalid-warning');
var $invalid = $(invalid);
if (evOnChange) {
var origin, priv;
if (APP.common) {
priv = metadataMgr.getPrivateData();
origin = priv.origin;
}
var gotoQuestion = function (el) {
var $el = $(el).closest('.cp-form-block');
var number = $el.find('.cp-form-block-question-number').text();
var a = h('a', {
href: origin + '#' + Messages._getKey('form_invalidQuestion', [number])
}, Messages._getKey('form_invalidQuestion', [number]));
$(a).click(function (e) {
e.preventDefault();
if (!$el.is(':visible')) {
var pages = $el.closest('.cp-form-page').index();
if (APP.refreshPage) { APP.refreshPage(pages + 1); }
}
$el[0].scrollIntoView();
});
return h('li', a);
};
// Check invalid inputs
evOnChange.reg(function () {
var $container = $('div.cp-form-creator-content');
var $inputs = $container.find('input:invalid');
if (!$inputs.length) {
$send.text(APP.hasAnswered ? Messages.form_update : Messages.form_submit);
return void $invalid.empty();
}
$send.text(APP.hasAnswered ? Messages.form_updateWarning : Messages.form_submitWarning);
var lis = [];
$inputs.each(function (i, el) {
lis.push(gotoQuestion(el));
});
var list = h('ul', lis);
var content = [
h('span', Messages.form_invalidWarning),
list
];
$invalid.empty().append(content);
});
// Check empty required questions
evOnChange.reg(function () {
if (!Array.isArray(APP.formBlocks)) { return; }
var form = content.form;
var errorBlocks = APP.formBlocks.filter(function (data) {
var uid = data.uid;
var block = form[uid];
if (!data.isEmpty) { return; }
if (!block) { return; }
if (!block.opts || !block.opts.required) { return; }
// Don't require questions that are in a hidden section
var section = getSectionFromQ(content, uid);
if (section.uid) {
// Check if section is hidden
var sBlock = form[section.uid];
var visible = checkCondition(sBlock);
if (!visible) { return; }
}
var isEmpty = data.isEmpty();
var $el = $(data.tag).closest('.cp-form-block');
$el.find('.cp-form-required-tag').toggleClass('cp-is-empty', isEmpty);
return isEmpty;
});
if (!errorBlocks.length) {
$send.removeAttr('disabled');
return void $errors.empty();
}
$send.attr('disabled', 'disabled');
var lis = [];
errorBlocks.forEach(function (data) {
lis.push(gotoQuestion(data.tag));
});
var list = h('ul', lis);
var divContent = [
h('div.alert.alert-danger', [
Messages.form_requiredWarning,
list
])
];
$errors.empty().append(divContent);
});
evOnChange.fire(true);
}
return h('div.cp-form-send-container', [
errors,
invalid,
h('div.cp-form-anon-answer', [
radioContainer
]),
reset, send
]);
};
var updateForm = function (framework, content, editable, answers, temp) {
var $container = $('div.cp-form-creator-content');
if (!$container.length) { return; } // Not ready
var form = content.form;
$('body').find('.flatpickr-calendar').remove();
APP.formBlocks = [];
var color = content.answers.color || 'nocolor';
var $body = $('body');
$body[0].classList.forEach(function (cls) {
if (/^cp-form-palette/.test(cls)) {
$body.removeClass(cls);
}
});
$body.addClass('cp-form-palette-'+color);
$container.attr('class', 'cp-form-creator-content');
if (APP.isClosed && content.answers.privateKey && !APP.isEditor && !APP.hasAnswered) {
var sframeChan = framework._.sfCommon.getSframeChannel();
sframeChan.query("Q_FORM_FETCH_ANSWERS", content.answers, function (err, obj) {
var answers = obj && obj.results;
if (answers) { APP.answers = answers; }
$('body').addClass('cp-app-form-results');
$('.cp-toolbar-form-button').remove();
renderResults(content, answers);
});
return;
}
var evOnChange = Util.mkEvent();
if (!APP.isEditor) {
var _answers = Util.clone(answers || {});
delete _answers._proof;
delete _answers._userdata;
evOnChange.reg(function (noBeforeUnload, isSave) {
if (noBeforeUnload) { return; }
$container.find('.cp-reset-button').removeAttr('disabled');
var results = getFormResults();
if (isSave) {
answers = Util.clone(results || {});
_answers = Util.clone(answers);
}
if (!answers || Sortify(_answers) !== Sortify(results)) {
window.onbeforeunload = function () {
return true;
};
} else {
window.onbeforeunload = undefined;
}
});
}
var getFormCreator = function (uid, inSection) {
if (!APP.isEditor) { return; }
var full = !uid;
var addControl = function (type) {
var btn = h('button.btn.btn-secondary', {
title: full ? '' : Messages['form_type_'+type],
'data-type': type
}, [
(TYPES[type] || STATIC_TYPES[type]).icon.cloneNode(),
full ? h('span', Messages['form_type_'+type]) : undefined
]);
$(btn).click(function () {
// Get the array in which we want to create the new block
// and the position in this array
var arr = content.order;
var idx = content.order.indexOf(uid);
if (!full) {
if (inSection) {
var section = content.form[uid];
section.opts = section.opts || STATIC_TYPES.section.opts;
arr = section.opts.questions;
} else {
var obj = getSectionFromQ(content, uid);
arr = obj.arr;
idx = obj.idx;
}
}
var _uid = Util.uid();
// Make sure we can't create a section inside another one
if (type === 'section' && arr !== content.order) { return; }
var model = TYPES[type] || STATIC_TYPES[type];
if (!model) { return; }
content.form[_uid] = {
//q: Messages.form_default,
opts: model.defaultOpts ? Util.clone(model.defaultOpts) : undefined,
type: type,
};
if (full || inSection) {
arr.push(_uid);
} else {
arr.splice(idx, 0, _uid);
}
framework.localChange();
updateForm(framework, content, true);
});
return btn;
};
var controls = Object.keys(TYPES).map(addControl);
var staticControls = Object.keys(STATIC_TYPES).map(addControl);
var buttons = h('div.cp-form-creator-control-inline', [
h('div.cp-form-creator-types', controls),
h('div.cp-form-creator-types', staticControls)
]);
var add = h('div', [h('i.fa.fa-plus')]);
if (!full) {
add = h('button.btn.cp-form-creator-inline-add', {
title: Messages.tag_add
}, [
h('i.fa.fa-plus.add-open'),
h('i.fa.fa-times.add-close')
]);
var $b = $(buttons).hide();
$(add).click(function () {
$b.toggle();
$(add).toggleClass('displayed');
});
}
else {
$(add).append(h('span', Messages.tag_add));
}
var inlineCls = full ? '-full' : '-inline';
return h('div.cp-form-creator-add'+inlineCls, [
add,
buttons
]);
};
var updateAddInline = APP.updateAddInline = function () {
$container.find('.cp-form-creator-add-inline').remove();
// Add before existing question
$container.find('.cp-form-block').each(function (i, el) {
var $el = $(el);
var uid = $el.attr('data-id');
$el.before(getFormCreator(uid));
});
// Add to the end of a section
$container.find('.cp-form-section-sortable').each(function (i, el) {
var $el = $(el);
var uid = $el.closest('.cp-form-block').attr('data-id');
$el.append(getFormCreator(uid, true));
});
};
var elements = [];
var n = 1; // Question number
var order = getFullOrder(content);
order.forEach(function (uid) {
var block = form[uid];
var type = block.type;
var model = TYPES[type] || STATIC_TYPES[type];
var isStatic = Boolean(STATIC_TYPES[type]);
if (!model) { return; }
var _answers, name;
if (type === 'poll') {
var metadataMgr = framework._.cpNfInner.metadataMgr;
var user = metadataMgr.getUserData();
// If we are a participant, our results shouldn't be in the table but in the
// editable part: remove them from _answers
_answers = getBlockAnswers(APP.answers, uid, !editable && user.curvePublic);
name = user.name;
}
var data = model.get(block.opts, _answers, name, evOnChange, {
block: block,
content: content,
uid: uid,
tmp: temp && temp[uid]
});
if (!data) { return; }
data.uid = uid;
if (answers && answers[uid] && data.setValue) { data.setValue(answers[uid]); }
if (data.pageBreak && !editable) {
elements.push(data);
return;
}
if (data.noViewMode && !editable) {
elements.push(data);
return;
}
var requiredTag;
if (block.opts && block.opts.required) {
requiredTag = h('span.cp-form-required-tag', Messages.form_required_on);
}
var dragHandle;
var q = h('div.cp-form-block-question', [
h('span.cp-form-block-question-number', (n++)+'.'),
h('span.cp-form-block-question-text', block.q || Messages.form_default),
requiredTag
]);
// Static blocks don't have questions ("q" is not used) so we can decrement n
if (isStatic) { n--; }
var editButtons, editContainer;
APP.formBlocks.push(data);
var previewDiv = h('div.cp-form-preview', Messages.form_preview_button);
// Required radio displayed only for types that have an "isEmpty" function
var requiredDiv;
if (APP.isEditor && !isStatic && data.isEmpty) {
if (!block.opts) { block.opts = Util.clone(TYPES[type].defaultOpts); }
var isRequired = Boolean(block.opts.required);
var radioOn = UI.createRadio('cp-form-required-'+uid, 'cp-form-required-on',
Messages.form_required_on, isRequired, {
input: { value: 1 },
});
var radioOff = UI.createRadio('cp-form-required-'+uid, 'cp-form-required-off',
Messages.form_required_off, !isRequired, {
input: { value: 0 },
});
var radioContainer = h('div.cp-form-required-radio', [
h('span', Messages.form_required_answer),
radioOff,
radioOn
]);
requiredDiv = h('div.cp-form-required', [
radioContainer
]);
$(radioContainer).find('input[type="radio"]').on('change', function() {
var val = $('input:radio[name="cp-form-required-'+uid+'"]:checked').val();
val = Number(val) || 0;
block.opts.required = Boolean(val);
framework.localChange();
framework._.cpNfInner.chainpad.onSettle(function () {
UI.log(Messages.saved);
});
});
}
if (APP.isEditor && type === "section") {
data.editing = true;
}
var changeType;
if (editable) {
// Drag handle
dragHandle = h('span.cp-form-block-drag-handle', [
h('i.fa.fa-ellipsis-h'),
h('i.fa.fa-ellipsis-h'),
]);
// Question
var inputQ = h('input', {
value: block.q || Messages.form_default
});
var $inputQ = $(inputQ);
var saving = false;
var cancel = false;
var onSaveQ = function (e) {
if (cancel) {
cancel = false;
return;
}
var v = $inputQ.val();
if (!v || !v.trim()) { return void UI.warn(Messages.error); }
// Don't save if no change
if (v.trim() === block.q) {
$(q).removeClass('editing');
if (!e) { $inputQ.blur(); }
return;
}
if (saving && !e) { return; } // Prevent spam Enter
block.q = v.trim();
framework.localChange();
saving = true;
framework._.cpNfInner.chainpad.onSettle(function () {
saving = false;
$(q).removeClass('editing');
if (!e) { $inputQ.blur(); }
UI.log(Messages.saved);
});
};
var onCancelQ = function () {
$inputQ.val(block.q || Messages.form_default);
cancel = true;
$inputQ.blur();
$(q).removeClass('editing');
};
$inputQ.keydown(function (e) {
if (e.which === 13) { return void onSaveQ(); }
if (e.which === 27) { return void onCancelQ(); }
});
$inputQ.focus(function () {
$(q).addClass('editing');
});
$inputQ.blur(onSaveQ);
q = h('div.cp-form-input-block', [inputQ]);
// Delete question
var fakeEdit = h('span');
var del = h('button.btn.btn-danger-alt', [
h('i.fa.fa-trash-o'),
h('span', Messages.form_delete)
]);
UI.confirmButton(del, {
classes: 'btn-danger',
new: true
}, function () {
removeQuestion(content, uid);
$('.cp-form-block[data-id="'+uid+'"]').remove();
framework.localChange();
updateAddInline();
});
editButtons = h('div.cp-form-edit-buttons-container', [ fakeEdit, del ]);
changeType = h('div.cp-form-block-type', [
model.icon.cloneNode(),
h('span', Messages['form_type_'+type])
]);
// Values
if (data.edit) {
var edit = h('button.btn.btn-default.cp-form-edit-button', [
h('i.fa.fa-pencil'),
h('span', Messages.form_editBlock)
]);
editButtons = h('div.cp-form-edit-buttons-container', [ edit, del ]);
editContainer = h('div');
var onSave = function (newOpts, close) {
if (close) { // Cancel edit
data.editing = false;
$(editContainer).empty();
var $oldTag = $(data.tag);
$(edit).show();
$(previewDiv).show();
$(requiredDiv).hide();
$(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;
}
block.opts = newOpts;
framework.localChange();
};
var onEdit = function (tmp) {
data.editing = true;
$(requiredDiv).show();
$(previewDiv).hide();
$(data.tag).hide();
$(editContainer).append(data.edit(onSave, tmp, framework));
$(editContainer).find('.cp-form-preview-button').prependTo(editButtons);
$(edit).hide();
};
$(edit).click(function () {
onEdit();
});
$(requiredDiv).hide();
// If we were editing this field, recover our unsaved changes
if (temp && temp[uid]) {
onEdit(temp[uid]);
}
if (Array.isArray(model.compatible)) {
changeType = h('div.cp-form-block-type.editable', [
model.icon.cloneNode(),
h('span', Messages['form_type_'+type]),
h('i.fa.fa-caret-down')
]);
$(changeType).click(function () {
var name = Util.uid();
var els = model.compatible.map(function (data, i) {
var text = Messages['form_type_'+data];
if (!text) { return; }
var radio = UI.createRadio(name, 'cp-form-changetype-'+i,
text, data===type, {});
$(radio).find('input').data('val', data);
return radio;
});
var tag = h('div.radio-group', els);
var changeTypeContent = [
APP.answers && Object.keys(APP.answers).length ?
h('div.alert.alert-warning', Messages.form_corruptAnswers) :
undefined,
h('p', Messages.form_changeTypeConfirm),
tag
];
UI.confirm(changeTypeContent, function (yes) {
if (!yes) { return; }
var res;
els.some(function (el) {
var $i = $(el).find('input');
if (Util.isChecked($i)) {
res = $i.data('val');
return true;
}
});
if (res === type || !TYPES[res]) { return; }
var oldOpts = model.defaultOpts || {};
model = TYPES[res];
Object.keys(oldOpts).forEach(function (v) {
var opts = model.defaultOpts || {};
if (!opts[v]) { delete (block.opts || {})[v]; }
});
type = res;
if (!data) { data = {}; }
block.type = res;
framework.localChange();
var wasEditing = data.editing;
onSave(null, true);
var $oldTag = $(data.tag);
framework._.cpNfInner.chainpad.onSettle(function () {
$(changeType).find('span').text(Messages['form_type_'+type]);
data = model.get(block.opts, _answers, null, evOnChange);
$oldTag.before(data.tag).remove();
if (wasEditing) { $(edit).click(); }
});
});
});
}
}
}
var editableCls = editable ? ".editable" : "";
elements.push(h('div.cp-form-block'+editableCls, {
'data-id':uid,
'data-type':type
}, [
APP.isEditor ? dragHandle : undefined,
changeType,
isStatic ? undefined : q,
h('div.cp-form-block-content', [
APP.isEditor && !isStatic ? requiredDiv : undefined,
APP.isEditor && !isStatic ? previewDiv : undefined,
data.tag,
editContainer,
editButtons
]),
]));
});
if (APP.isEditor) {
elements.push(getFormCreator());
}
var _content = elements;
if (!editable) {
_content = [];
var div = h('div.cp-form-page');
var pages = 1;
var wasPage = false;
elements.forEach(function (obj, i) {
if (obj && obj.pageBreak) {
if (i === 0) { return; } // Can't start with a page break
if (i === (elements.length - 1)) { return; } // Can't end with a page break
if (wasPage) { return; } // Prevent double page break
_content.push(div);
pages++;
div = h('div.cp-form-page');
wasPage = true;
return;
}
wasPage = false;
$(div).append(obj);
});
_content.push(div);
if (pages > 1) {
var pageContainer = h('div.cp-form-page-container');
var $page = $(pageContainer);
_content.push(pageContainer);
var refreshPage = APP.refreshPage = function (current) {
$page.empty();
if (!current || current < 1) { current = 1; }
if (current > pages) { current = pages; }
var left = h('button.btn.btn-secondary.cp-prev', [
h('i.fa.fa-arrow-left'),
]);
var state = h('span', Messages._getKey('form_page', [current, pages]));
var right = h('button.btn.btn-secondary.cp-next', [
h('i.fa.fa-arrow-right'),
]);
if (current === pages) { $(right).css('visibility', 'hidden'); }
if (current === 1) { $(left).css('visibility', 'hidden'); }
$(left).click(function () { refreshPage(current - 1); });
$(right).click(function () { refreshPage(current + 1); });
$page.append([left, state, right]);
$container.find('.cp-form-page').hide();
$($container.find('.cp-form-page').get(current-1)).show();
if (current !== pages) {
$container.find('.cp-form-send-container').hide();
} else {
$container.find('.cp-form-send-container').show();
}
};
setTimeout(refreshPage);
}
}
$container.empty().append(_content);
getSections(content).forEach(function (uid) {
var block = content.form[uid];
if (!block.opts || !Array.isArray(block.opts.questions)) { return; }
var $block = $container.find('.cp-form-block[data-id="'+uid+'"] .cp-form-section-sortable');
block.opts.questions.forEach(function (_uid) {
$container.find('.cp-form-block[data-id="'+_uid+'"]').appendTo($block);
});
});
updateAddInline();
// Fix cursor in conditions dropdown
// If we had a condition dropdown displayed, we're going to make sure
// it doesn't move on the screen after the redraw
// To do so, we need to adjust the "scrollTop" value saved before redrawing
getSections(content).some(function (uid) {
if (!temp) { return true; }
var block = content.form[uid];
if (!block.opts || !Array.isArray(block.opts.questions)) { return; }
var $block = $container.find('.cp-form-block[data-id="'+uid+'"] .cp-form-section-sortable');
if (temp && temp[uid]) {
var tmp = temp[uid];
var u = tmp.uid;
var t = tmp.type;
var $c = $block.closest('.cp-form-block').find('.cp-form-condition[data-uid="'+u+'"]');
var $b = $c.find('[data-drop="'+t+'"]').find('button');
var pos = $b && $b.length && $b[0].getBoundingClientRect().y;
// If we know the old position of the button and the new one, we can fix the scroll
// accordingly
if (typeof(pos) === "number" && typeof(tmp.y) === "number") {
var diff = pos - tmp.y;
APP.sTop += diff;
}
return true;
}
});
// Fix cursor with flatpickr
APP.formBlocks.some(function (b) {
if (!temp) { return true; }
var uid = b.uid;
var block = form[uid];
if (!block) { return; }
if (block.type !== "poll") { return; }
var opts = block.opts;
if (!opts) { return; }
if (opts.type !== "time") { return; }
var tmp = temp[uid];
if (!tmp || !tmp.cursor || !tmp.cursor.flatpickr) { return; }
var $block = $container.find('.cp-form-block[data-id="'+uid+'"]');
var $i = $block.find('.flatpickr-input[value="'+tmp.cursor.val+'"]');
if (!$i.length) { return; }
APP.afterScroll = function () {
$i[0]._flatpickr.open();
delete APP.afterScroll;
};
var pos = $i && $i.length && $i[0].getBoundingClientRect().y;
if (typeof(pos) === "number" && typeof(tmp.cursor.y) === "number") {
var diff = pos - tmp.cursor.y;
APP.sTop += diff;
}
return true;
});
if (editable) {
if (APP.mainSortable) { APP.mainSortable.destroy(); }
APP.mainSortable = Sortable.create($container[0], {
group: 'nested',
direction: "vertical",
filter: "input, button, .CodeMirror, .cp-form-type-sort, .cp-form-block-type.editable",
preventOnFilter: false,
draggable: ".cp-form-block",
//forceFallback: true,
fallbackTolerance: 5,
onStart: function () {
$container.find('.cp-form-creator-add-inline').remove();
},
store: {
set: function (s) {
content.order = s.toArray();
setTimeout(framework.localChange);
updateAddInline();
}
}
});
return;
}
// In view mode, hide sections when conditions aren't met
evOnChange.reg(function (reset, save, condition) {
if (!reset && !condition) { return; }
getSections(content).forEach(function (uid) {
var block = content.form[uid];
if (block.type !== 'section') { return; }
if (!block.opts || !Array.isArray(block.opts.questions) || !block.opts.when) {
return;
}
var show = checkCondition(block);
block.opts.questions.forEach(function (_uid) {
$container.find('.cp-form-block[data-id="'+_uid+'"]').toggle(show);
});
});
});
// If the form is already submitted, show an info message
if (APP.hasAnswered) {
showAnsweredPage(framework, content, answers);
$container.prepend(h('div.alert.alert-info',
Messages._getKey('form_alreadyAnswered', [
new Date(answers._time || APP.lastAnswerTime).toLocaleString()])));
}
if (APP.isClosed) {
APP.formBlocks.forEach(function (b) {
if (!b.setEditable) { return; }
b.setEditable(false);
});
}
// In view mode, add "Submit" and "reset" buttons
$container.append(makeFormControls(framework, content, evOnChange));
// In view mode, tell the user if answers are forced to be anonymous or authenticated
var infoTxt;
var loggedIn = framework._.sfCommon.isLoggedIn();
if (content.answers.makeAnonymous) {
infoTxt = Messages.form_anonAnswer;
} else if (!content.answers.anonymous && loggedIn && !content.answers.cantEdit) {
infoTxt = Messages.form_authAnswer;
}
if (infoTxt) {
$container.prepend(h('div.alert.alert-info', infoTxt));
}
if (!loggedIn && !content.answers.anonymous) {
APP.formBlocks.forEach(function (b) {
if (!b.setEditable) { return; }
b.setEditable(false);
});
}
// Embed mode is enforced so we add the title at the top and a CryptPad logo
// at the bottom
var title = framework._.title.title || framework._.title.defaultTitle;
$container.prepend(h('h1.cp-form-view-title', title));
$container.append(getLogo());
if (!answers) {
$container.find('.cp-reset-button').attr('disabled', 'disabled');
}
};
var getTempFields = function () {
if (!Array.isArray(APP.formBlocks)) { return; }
var temp = {};
APP.formBlocks.forEach(function (data) {
if (data.editing) {
var cursor = data.getCursor && data.getCursor();
temp[data.uid] = cursor;
}
});
return temp;
};
var andThen = function (framework) {
framework.start();
APP.framework = framework;
var evOnChange = Util.mkEvent();
var content = {};
APP.common = framework._.sfCommon;
var sframeChan = framework._.sfCommon.getSframeChannel();
var metadataMgr = framework._.cpNfInner.metadataMgr;
var user = metadataMgr.getUserData();
var priv = metadataMgr.getPrivateData();
APP.isEditor = Boolean(priv.form_public);
var $body = $('body');
var $toolbarContainer = $('#cp-toolbar');
var helpMenu = framework._.sfCommon.createHelpMenu(['text', 'pad']);
$toolbarContainer.after(helpMenu.menu);
framework._.toolbar.$drawer.append(helpMenu.button);
if (!APP.isEditor && !priv.form_auditorKey) {
$(helpMenu.menu).hide();
}
var offlineEl = h('div.alert.alert-danger.cp-burn-after-reading', Messages.disconnected);
framework.onEditableChange(function (editable) {
if (editable) {
if (APP.mainSortable) {
APP.mainSortable.options.disabled = false;
}
if (!APP.isEditor) { $(offlineEl).remove(); }
$body.removeClass('cp-form-readonly');
$('.cp-form-creator-settings').find('input, button').removeAttr('disabled');
} else {
if (APP.mainSortable) {
APP.mainSortable.options.disabled = true;
}
if (!APP.isEditor) { $('.cp-help-container').before(offlineEl); }
$body.addClass('cp-form-readonly');
$('.cp-form-creator-settings').find('input, button').attr('disabled', 'disabled');
}
});
if (!APP.isEditor) {
framework._.toolbar.alone();
$('.cp-toolbar-icon-history').hide();
$('.cp-toolbar-icon-snapshots').hide();
}
var makeFormSettings = function () {
var previewBtn = h('button.btn.btn-primary', [
h('i.fa.fa-eye'),
Messages.form_preview
]);
var participantBtn = h('button.btn.btn-primary',[
h('i.fa.fa-link'),
Messages.form_geturl
]);
var preview = h('div.cp-forms-results-participant', [previewBtn, participantBtn]);
$(previewBtn).click(function () {
sframeChan.event('EV_OPEN_VIEW_URL');
});
$(participantBtn).click(function () {
sframeChan.query('Q_COPY_VIEW_URL', null, function (err, success) {
if (success) { return void UI.log(Messages.shareSuccess); }
UI.warn(Messages.error);
});
});
// Private / public status
var resultsType = h('div.cp-form-results-type-container');
var $results = $(resultsType);
var refreshPublic = function () {
$results.empty();
var makePublic = h('button.btn.btn-secondary', Messages.form_makePublic);
var makePublicDiv = h('div.cp-form-actions', makePublic);
if (content.answers.privateKey) { makePublicDiv = undefined; }
var publicText = content.answers.privateKey ? Messages.form_isPublic : Messages.form_isPrivate;
$results.append(h('span.cp-form-results-type', publicText));
$results.append(makePublicDiv);
var $makePublic = $(makePublic).click(function () {
UI.confirm(Messages.form_makePublicWarning, function (yes) {
if (!yes) { return; }
$makePublic.attr('disabled', 'disabled');
var priv = metadataMgr.getPrivateData();
content.answers.privateKey = priv.form_private;
framework.localChange();
framework._.cpNfInner.chainpad.onSettle(function () {
UI.log(Messages.saved);
refreshPublic();
});
});
});
};
refreshPublic();
var responseMsg = h('div.cp-form-response-msg-container');
var $responseMsg = $(responseMsg);
var refreshResponse = function () {
$responseMsg.empty();
var text = content.answers.msg ? Messages.form_updateMsg : Messages.form_addMsg;
var btn = h('button.btn.btn-secondary', text);
$(btn).click(function () {
var editor;
if (!APP.responseModal) {
var t = h('textarea');
var p = h('p', Messages.form_responseMsg);
var div = h('div', [
p,
h('div.cp-form-response-modal', t),
]);
var cm = window.my_cm = SFCodeMirror.create("gfm", CMeditor, t);
editor = APP.responseEditor = cm.editor;
var markdownTb = APP.common.createMarkdownToolbar(editor, {
embed: function (mt) {
editor.focus();
editor.replaceSelection($(mt)[0].outerHTML);
}
});
$(markdownTb.toolbar).insertAfter($(p));
$(markdownTb.toolbar).show();
cm.configureTheme(APP.common, function () {});
editor.setOption('lineNumbers', true);
editor.setOption('lineWrapping', true);
editor.setOption('styleActiveLine', true);
editor.setOption('readOnly', false);
setTimeout(function () {
editor.setValue(content.answers.msg || '');
editor.refresh();
editor.save();
editor.focus();
});
var buttons = [{
className: 'cancel',
name: Messages.cancel,
onClick: function () {},
keys: [27]
},
{
className: 'primary',
name: Messages.settings_save,
onClick: function () {
var v = editor.getValue();
content.answers.msg = v.slice(0, 2000); // XXX 4.11.0 max length?
framework.localChange();
framework._.cpNfInner.chainpad.onSettle(function () {
UI.log(Messages.saved);
refreshResponse();
});
},
//keys: []
}];
APP.responseModal = UI.dialog.customModal(div, { buttons: buttons });
} else {
editor = APP.responseEditor;
setTimeout(function () {
editor.setValue(content.answers.msg || '');
editor.refresh();
editor.save();
editor.focus();
});
}
UI.openCustomModal(APP.responseModal);
});
$responseMsg.append(btn);
};
refreshResponse();
// Make answers anonymous
var anonContainer = h('div.cp-form-anon-container');
var $anon = $(anonContainer);
var refreshAnon = function () {
$anon.empty();
var anonymous = content.answers.makeAnonymous;
var cbox = UI.createCheckbox('cp-form-make-anon',
Messages.form_makeAnon, anonymous, {});
var radioContainer = h('div.cp-form-anon-radio', [cbox]);
var $r = $(radioContainer).find('input').on('change', function() {
var val = Util.isChecked($r);
content.answers.makeAnonymous = val;
framework.localChange();
framework._.cpNfInner.chainpad.onSettle(function () {
UI.log(Messages.saved);
});
});
$anon.append(h('div.cp-form-actions', radioContainer));
};
refreshAnon();
// Allow guest(anonymous) answers
var privacyContainer = h('div.cp-form-privacy-container');
var $privacy = $(privacyContainer);
var refreshPrivacy = function () {
$privacy.empty();
var anonymous = content.answers.anonymous;
var radioOn = UI.createRadio('cp-form-privacy', 'cp-form-privacy-on',
Messages.form_anonymous_on, Boolean(anonymous), {
input: { value: 1 },
});
var radioOff = UI.createRadio('cp-form-privacy', 'cp-form-privacy-off',
Messages.form_anonymous_off, !anonymous, {
input: { value: 0 },
});
var radioContainer = h('div.cp-form-privacy-radio', [radioOn, radioOff]);
$(radioContainer).find('input[type="radio"]').on('change', function() {
var val = $('input:radio[name="cp-form-privacy"]:checked').val();
val = Number(val) || 0;
content.answers.anonymous = Boolean(val);
framework.localChange();
framework._.cpNfInner.chainpad.onSettle(function () {
UI.log(Messages.saved);
});
});
$privacy.append(h('div.cp-form-status', Messages.form_anonymous));
$privacy.append(h('div.cp-form-actions', radioContainer));
};
refreshPrivacy();
// Allow responses edition
var editableContainer = h('div.cp-form-editable-container');
var $editable = $(editableContainer);
var refreshEditable = function () {
$editable.empty();
var editable = !content.answers.cantEdit;
var radioOn = UI.createRadio('cp-form-editable', 'cp-form-editable-on',
Messages.form_anonymous_on, Boolean(editable), {
input: { value: 1 },
});
var radioOff = UI.createRadio('cp-form-editable', 'cp-form-editable-off',
Messages.form_anonymous_off, !editable, {
input: { value: 0 },
});
var radioContainer = h('div.cp-form-editable-radio', [radioOn, radioOff]);
$(radioContainer).find('input[type="radio"]').on('change', function() {
var val = $('input:radio[name="cp-form-editable"]:checked').val();
val = Number(val) || 0;
content.answers.cantEdit = !val;
framework.localChange();
framework._.cpNfInner.chainpad.onSettle(function () {
UI.log(Messages.saved);
});
});
$editable.append(h('div.cp-form-status', Messages.form_editable));
$editable.append(h('div.cp-form-actions', radioContainer));
};
refreshEditable();
// End date / Closed state
var endDateContainer = h('div.cp-form-status-container');
var $endDate = $(endDateContainer);
var refreshEndDate = function () {
$endDate.empty();
var endDate = content.answers.endDate;
var date = new Date(endDate).toLocaleString();
var now = +new Date();
var text = Messages.form_isOpen;
var buttonTxt = Messages.form_setEnd;
if (endDate <= now) {
text = Messages._getKey('form_isClosed', [date]);
buttonTxt = Messages.form_open;
} else if (endDate > now) {
text = Messages._getKey('form_willClose', [date]);
buttonTxt = Messages.form_removeEnd;
}
var button = h('button.btn.btn-secondary', buttonTxt);
var $button = $(button).click(function () {
$button.attr('disabled', 'disabled');
// If there is an end date, remove it
if (endDate) {
delete content.answers.endDate;
framework.localChange();
refreshEndDate();
return;
}
// Otherwise add it
var datePicker = h('input');
var picker = Flatpickr(datePicker, {
enableTime: true,
time_24hr: is24h,
dateFormat: dateFormat,
minDate: new Date()
});
var save = h('button.btn.btn-primary', Messages.settings_save);
$(save).click(function () {
if (datePicker.value === '') {
return void refreshEndDate();
}
var d = picker.parseDate(datePicker.value);
content.answers.endDate = +d;
framework.localChange();
framework._.cpNfInner.chainpad.onSettle(function () {
refreshEndDate();
});
});
var cancel = h('button.btn.btn-danger', h('i.fa.fa-times.nomargin'));
$(cancel).click(function () {
refreshEndDate();
});
var confirmContent = h('div', [
h('div', Messages.form_setEnd),
h('div.cp-form-input-block', [datePicker, save, cancel]),
]);
$button.after(confirmContent);
$button.remove();
picker.open();
});
$endDate.append(h('div.cp-form-status', text));
$endDate.append(h('div.cp-form-actions', button));
};
refreshEndDate();
var colorLine1 = h('div');
var colorLine2 = h('div');
var colorContainer = h('div.cp-form-color-container', [
colorLine1,
colorLine2
]);
var colorTheme = h('div.cp-form-color-theme-container', [
h('span', Messages.form_colors),
colorContainer
]);
var $colors = $(colorContainer);
var refreshColorTheme = function () {
$(colorLine1).empty();
$(colorLine2).empty();
var palette = ['nocolor'];
for (var i=1; i<=8; i++) { palette.push('color'+i); }
var color = content.answers.color || 'nocolor';
var selectedColor = color;
var currentContainer = colorLine1;
palette.forEach(function (_color, i) {
if (i === 5) { currentContainer = colorLine2; }
var $color = $(h('span.cp-form-palette.fa'));
$color.addClass('cp-form-palette-'+(_color || 'nocolor'));
if (selectedColor === _color) { $color.addClass('fa-check'); }
$color.click(function () {
if (_color === selectedColor) { return; }
content.answers.color = _color;
framework.localChange();
framework._.cpNfInner.chainpad.onSettle(function () {
UI.log(Messages.saved);
selectedColor = _color;
$colors.find('.cp-form-palette').removeClass('fa-check');
$color.addClass('fa-check');
var $body = $('body');
$body[0].classList.forEach(function (cls) {
if (/^cp-form-palette/.test(cls)) {
$body.removeClass(cls);
}
});
$body.addClass('cp-form-palette-'+_color);
});
}).appendTo(currentContainer);
});
};
refreshColorTheme();
evOnChange.reg(refreshPublic);
evOnChange.reg(refreshPrivacy);
evOnChange.reg(refreshAnon);
evOnChange.reg(refreshEditable);
evOnChange.reg(refreshEndDate);
evOnChange.reg(refreshColorTheme);
//evOnChange.reg(refreshResponse);
return [
preview,
endDateContainer,
anonContainer,
privacyContainer,
editableContainer,
resultsType,
responseMsg,
colorTheme
];
};
var checkIntegrity = function (getter) {
if (!content.order || !content.form) { return; }
var changed = false;
var deduplicate = [];
// Check if the questions in the lists (content.order or sections) exist in
// content.form and remove duplicates
var check1 = function (arr) {
arr.forEach(function (uid) {
if (!content.form[uid] || deduplicate.indexOf(uid) !== -1) {
var idx = arr.indexOf(uid);
arr.splice(idx, 1);
changed = true;
return;
}
deduplicate.push(uid);
});
};
check1(content.order);
getSections(content).forEach(function (uid) {
var block = content.form[uid];
if (!block.opts || !Array.isArray(block.opts.questions)) { return; }
check1(block.opts.questions);
});
// Make sure all the questions are displayed in the main list or a section and add
// the missing ones
Object.keys(content.form).forEach(function (uid) {
var idx = deduplicate.indexOf(uid);
if (idx === -1) {
changed = true;
content.order.push(uid);
}
});
// Check if conditions on sections are valid
var order = getFullOrder(content);
getSections(content).forEach(function (uid) {
var block = content.form[uid];
if (!block.opts || !Array.isArray(block.opts.when)) { return; }
var sectionIdx = order.indexOf(uid);
if (sectionIdx === -1) { return; }
var available = order.slice(0, sectionIdx);
var errors = false;
block.opts.when.forEach(function (rules) {
if (!Array.isArray(rules)) {
var idx = block.opts.when.indexOf(rules);
block.opts.when.splice(idx, 1);
errors = true;
return;
}
rules.forEach(function (obj) {
if (!obj.q) { return; }
var idx = available.indexOf(String(obj.q));
// If this question doesn't exist before the section, remove the condition
if (idx === -1) {
var cIdx = rules.indexOf(obj);
rules.splice(cIdx, 1);
errors = true;
return;
}
});
if (!rules.length) {
var rIdx = block.opts.when.indexOf(rules);
block.opts.when.splice(rIdx, 1);
errors = true;
}
});
if (errors) {
evCheckConditions.fire(uid);
changed = true;
}
});
evShowConditions.fire();
// Migrate opts.values from string to object
if (!content.version) {
Object.keys(content.form).forEach(function (uid) {
var block = content.form[uid];
var values = Util.find(block, ['opts', 'values']);
if (!Array.isArray(values)) { return; }
if (block.opts.type === 'day') { return; }
block.opts.values = values.map(function (data) {
if (Util.isObject(data)) { return data; }
return {
uid: Util.uid(),
v: data || Messages.form_newOption
};
});
});
content.version = 1;
changed = true;
}
if (!getter && changed) { framework.localChange(); }
};
var makeFormCreator = function () {
var controlContainer;
var fillerContainer;
if (APP.isEditor) {
var settings = makeFormSettings();
controlContainer = h('div.cp-form-creator-control', [
h('div.cp-form-creator-settings', settings),
]);
fillerContainer = h('div.cp-form-filler-container');
}
var contentContainer = h('div.cp-form-creator-content');
var resultsContainer = h('div.cp-form-creator-results');
var answeredContainer = h('div.cp-form-creator-answered', {
style: 'display: none;'
});
var div = h('div.cp-form-creator-container', [
controlContainer,
contentContainer,
resultsContainer,
answeredContainer,
fillerContainer
]);
return div;
};
var endDateEl = h('div.alert.alert-warning.cp-burn-after-reading');
var endDate;
var endDateTo;
// numbers greater than this overflow the maximum delay for a setTimeout
// which results in it being executed immediately (oops)
// https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#maximum_delay_value
var MAX_TIMEOUT_DELAY = 2147483647;
var refreshEndDateBanner = function (force) {
if (APP.isEditor) { return; }
var _endDate = content.answers.endDate;
if (_endDate === endDate && !force) { return; }
endDate = _endDate;
var date = new Date(endDate).toLocaleString();
var text = Messages._getKey('form_isClosed', [date]);
if (endDate > +new Date()) {
text = Messages._getKey('form_willClose', [date]);
}
if ($('.cp-help-container').length && endDate) {
$(endDateEl).text(text);
$('.cp-help-container').before(endDateEl);
} else {
$(endDateEl).remove();
}
APP.isClosed = endDate && endDate < (+new Date());
clearTimeout(endDateTo);
if (!APP.isClosed && endDate) {
// calculate how many ms in the future the poll will be closed
var diff = (endDate - +new Date() + 100);
// if that value would overflow, then check again in a day
// (if the tab is still open)
if (diff > MAX_TIMEOUT_DELAY) {
endDateTo = setTimeout(function () {
refreshEndDateBanner(true);
}, 1000 * 3600 * 24);
return;
}
endDateTo = setTimeout(function () {
refreshEndDateBanner(true);
$('.cp-form-send-container').find('.cp-open').hide();
}, diff);
}
};
var showAnonBlockedAlert = function () {
var content = UI.setHTML(h('span.cp-anon-blocked-msg'), Messages.form_anonymous_blocked);
$(content).find('a').click(function (ev) {
ev.preventDefault();
var href = ($(this).attr('href') || '').replace(/\//g, '');
APP.common.setLoginRedirect(href || 'login');
});
UI.alert(content);
};
framework.onReady(function (isNew) {
var priv = metadataMgr.getPrivateData();
if (APP.isEditor) {
if (!content.form) {
content.form = {
"1": { type: 'md' },
"2": { type: 'radio' }
};
framework.localChange();
}
if (!content.order) {
content.order = ["1", "2"];
framework.localChange();
}
if (!content.answers || !content.answers.channel || !content.answers.publicKey || !content.answers.validateKey) {
// Don't override other settings (anonymous, makeAnonymous, etc.) from templates
content.answers = content.answers || {};
content.answers.channel = Hash.createChannelId();
content.answers.publicKey = priv.form_public;
content.answers.validateKey = priv.form_answerValidateKey;
framework.localChange();
}
checkIntegrity();
}
if (isNew && content.answers && typeof(content.answers.anonymous) === "undefined") {
content.answers.anonymous = true;
}
sframeChan.event('EV_FORM_PIN', {channel: content.answers.channel});
var $container = $('#cp-app-form-container');
$container.append(makeFormCreator());
if (!content.answers || !content.answers.channel || !content.answers.publicKey || !content.answers.validateKey) {
return void UI.errorLoadingScreen(Messages.form_invalid);
}
var getResults = function (key) {
sframeChan.query("Q_FORM_FETCH_ANSWERS", {
channel: content.answers.channel,
validateKey: content.answers.validateKey,
publicKey: content.answers.publicKey,
privateKey: key,
cantEdit: content.answers.cantEdit
}, function (err, obj) {
var answers = obj && obj.results;
if (answers) { APP.answers = answers; }
$body.addClass('cp-app-form-results');
renderResults(content, answers);
});
};
if (priv.form_auditorKey) {
APP.isAuditor = true;
getResults(priv.form_auditorKey);
return;
}
if (APP.isEditor) {
sframeChan.query("Q_FORM_FETCH_ANSWERS", {
channel: content.answers.channel,
validateKey: content.answers.validateKey,
publicKey: content.answers.publicKey,
cantEdit: content.answers.cantEdit
}, function (err, obj) {
var answers = obj && obj.results;
addResultsButton(framework, content, answers);
if (answers) { APP.answers = answers; }
checkIntegrity(false);
updateForm(framework, content, true);
});
return;
}
refreshEndDateBanner();
var loggedIn = framework._.sfCommon.isLoggedIn();
if (!loggedIn && !content.answers.anonymous) {
showAnonBlockedAlert();
}
// If the results are public and there is at least one doodle, fetch the results now
if (content.answers.privateKey && Object.keys(content.form).some(function (uid) {
return content.form[uid].type === "poll";
})) {
sframeChan.query("Q_FORM_FETCH_ANSWERS", {
channel: content.answers.channel,
validateKey: content.answers.validateKey,
publicKey: content.answers.publicKey,
privateKey: content.answers.privateKey,
cantEdit: content.answers.cantEdit
}, function (err, obj) {
var answers = obj && obj.results;
if (answers) { APP.answers = answers; }
if (obj && obj.noDriveAnswered) {
// No drive mode already answered: can't answer again
if (answers) {
$body.addClass('cp-app-form-results');
renderResults(content, answers);
} else {
return void UI.errorLoadingScreen(Messages.form_answered);
}
return;
}
checkIntegrity(false);
var myAnswers;
var curve1 = user.curvePublic;
var curve2 = obj && obj.myKey; // Anonymous answer key
if (answers) {
var myAnswersObj = answers[curve1] || answers[curve2] || undefined;
if (myAnswersObj) {
APP.hasAnswered = true;
myAnswers = myAnswersObj.msg;
myAnswers._time = myAnswersObj.time;
}
}
// If we have a non-anon answer, we can't answer anonymously later
if (answers[curve1]) { APP.cantAnon = true; }
updateForm(framework, content, false, myAnswers);
});
return;
}
sframeChan.query("Q_FETCH_MY_ANSWERS", {
channel: content.answers.channel,
validateKey: content.answers.validateKey,
publicKey: content.answers.publicKey
}, function (err, obj) {
if (obj && obj.error) {
if (obj.error === "EANSWERED") {
// No drive mode already answered: can't answer again
if (content.answers.privateKey) {
return void getResults(content.answers.privateKey);
}
// Here, we know results are private so we can use an error screen
return void UI.errorLoadingScreen(Messages.form_answered);
}
UI.warn(Messages.form_cantFindAnswers);
}
var answers;
if (obj && !obj.error) {
answers = obj;
APP.hasAnswered = true;
// If we have a non-anon answer, we can't answer anonymously later
if (!obj._isAnon) { APP.cantAnon = true; }
}
checkIntegrity(false);
updateForm(framework, content, false, answers);
});
});
// Only redraw once every 500ms on remote change.
// If we try to redraw in the first 500ms following a redraw, we'll
// redraw again when the timer allows it. If we call "redrawRemote"
// repeatedly, we'll only "redraw" once with the latest content.
var _redraw = Util.notAgainForAnother(function (framework, content) {
var answers, temp;
if (!APP.isEditor) { answers = getFormResults(); }
else { temp = getTempFields(); }
updateForm(framework, content, APP.isEditor, answers, temp);
}, 500);
var redrawTo;
var redrawRemote = function () {
var $main = $('.cp-form-creator-container');
var args = Array.prototype.slice.call(arguments);
APP.sTop = $main.scrollTop();
var until = _redraw.apply(null, args);
if (until) {
clearTimeout(redrawTo);
redrawTo = setTimeout(function (){
APP.sTop = $main.scrollTop();
_redraw.apply(null, args);
$main.scrollTop(APP.sTop);
if (typeof(APP.afterScroll) === "function") { APP.afterScroll(); }
}, until+1);
return;
}
// Only restore scroll if we were able to redraw
$main.scrollTop(APP.sTop);
if (typeof(APP.afterScroll) === "function") { APP.afterScroll(); }
};
framework.onContentUpdate(function (newContent) {
content = newContent;
evOnChange.fire();
refreshEndDateBanner();
redrawRemote(framework, content);
});
framework.setContentGetter(function () {
checkIntegrity(true);
return content;
});
framework.setFileImporter({ accept: ['.json'] }, function (newContent) {
var parsed = JSON.parse(newContent || {});
parsed.answers = content.answers;
return parsed;
});
framework.setFileExporter(['.json'], function(cb, ext) {
Exporter.main(content, cb, ext);
}, true);
};
Framework.create({
toolbarContainer: '#cp-toolbar',
contentContainer: '#cp-app-form-editor',
}, andThen);
});