632 lines
23 KiB
JavaScript
632 lines
23 KiB
JavaScript
define([
|
||
'jquery',
|
||
'json.sortify',
|
||
'/bower_components/chainpad-crypto/crypto.js',
|
||
'/common/sframe-app-framework.js',
|
||
'/common/toolbar.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/inner/share.js',
|
||
'/common/inner/access.js',
|
||
'/common/inner/properties.js',
|
||
|
||
'/bower_components/sortablejs/Sortable.min.js',
|
||
|
||
'/bower_components/file-saver/FileSaver.min.js',
|
||
'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
|
||
'less!/form/app-form.less',
|
||
], function (
|
||
$,
|
||
JSONSortify,
|
||
Crypto,
|
||
Framework,
|
||
Toolbar,
|
||
nThen,
|
||
SFCommon,
|
||
Util,
|
||
Hash,
|
||
UI,
|
||
UIElements,
|
||
Clipboard,
|
||
MT,
|
||
h,
|
||
Messages,
|
||
AppConfig,
|
||
Share, Access, Properties,
|
||
Sortable
|
||
)
|
||
{
|
||
var SaveAs = window.saveAs;
|
||
var APP = window.APP = {
|
||
};
|
||
|
||
Messages.button_newform = "New Form"; // XXX
|
||
Messages.form_invalid = "Invalid form";
|
||
Messages.form_editBlock = "Edit options";
|
||
Messages.form_editQuestion = "Edit question";
|
||
|
||
Messages.form_newOption = "New option";
|
||
|
||
Messages.form_default = "Your question here?";
|
||
Messages.form_type_input = "Text"; // XXX
|
||
Messages.form_type_radio = "Radio"; // XXX
|
||
|
||
Messages.form_duplicates = "Duplicate entries have been removed";
|
||
|
||
Messages.form_submit = "Submit";
|
||
Messages.form_update = "Update";
|
||
Messages.form_reset = "Reset";
|
||
Messages.form_sent = "Sent";
|
||
Messages.form_delete = "Delete block";
|
||
|
||
Messages.form_cantFindAnswers = "Unable to retrieve your existing answers for this form.";
|
||
|
||
Messages.form_viewResults = "Go to responses";
|
||
Messages.form_viewCreator = "Go to form creator";
|
||
|
||
Messages.form_notAnswered = "And <b>{0}</b> empty answers";
|
||
|
||
var editOptions = function (v, cb) {
|
||
var add = h('button.btn.btn-secondary', [
|
||
h('i.fa.fa-plus'),
|
||
h('span', Messages.tag_add)
|
||
]);
|
||
|
||
// Show existing options
|
||
var getOption = function (val) {
|
||
var input = h('input', {value:val});
|
||
var del = h('button.btn.btn-danger', h('i.fa.fa-times'));
|
||
var el = h('div.cp-form-edit-block-input', [ input, del ]);
|
||
$(del).click(function () { $(el).remove(); });
|
||
return el;
|
||
};
|
||
var inputs = v.map(getOption);
|
||
inputs.push(add);
|
||
var container = h('div.cp-form-edit-block', inputs);
|
||
|
||
// Add option
|
||
var $add = $(add).click(function () {
|
||
$add.before(getOption(Messages.form_newOption));
|
||
});
|
||
|
||
// Cancel changes
|
||
var cancelBlock = h('button.btn.btn-secondary', Messages.cancel);
|
||
$(cancelBlock).click(function () { cb(); });
|
||
|
||
// Save changes
|
||
var saveBlock = h('button.btn.btn-primary', [
|
||
h('i.fa.fa-floppy-o'),
|
||
h('span', Messages.settings_save)
|
||
]);
|
||
$(saveBlock).click(function () {
|
||
$(saveBlock).attr('disabled', 'disabled');
|
||
var values = [];
|
||
var duplicates = false;
|
||
$(container).find('input').each(function (i, el) {
|
||
var val = $(el).val().trim();
|
||
if (values.indexOf(val) === -1) { values.push(val); }
|
||
else { duplicates = true; }
|
||
});
|
||
if (duplicates) {
|
||
UI.warn(Messages.form_duplicates);
|
||
}
|
||
cb({values: values});
|
||
});
|
||
|
||
return [
|
||
container,
|
||
h('div', [cancelBlock, saveBlock])
|
||
];
|
||
};
|
||
|
||
var getEmpty = function (empty) {
|
||
if (empty) {
|
||
return UI.setHTML(h('div.cp-form-results-type-text-empty'), Messages._getKey('form_notAnswered', [empty]));
|
||
}
|
||
};
|
||
|
||
var TYPES = {
|
||
input: {
|
||
get: function () {
|
||
var tag = h('input');
|
||
var $tag = $(tag);
|
||
return {
|
||
tag: tag,
|
||
getValue: function () { return $tag.val(); },
|
||
setValue: function (val) { $tag.val(val); },
|
||
reset: function () { $tag.val(''); }
|
||
};
|
||
},
|
||
printResults: function (answers, uid) {
|
||
var results = [];
|
||
var empty = 0;
|
||
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-form-results-type-text-data', answer));
|
||
});
|
||
results.push(getEmpty(empty));
|
||
|
||
return h('div.cp-form-results-type-text', results);
|
||
},
|
||
icon: h('i.fa.fa-font')
|
||
},
|
||
radio: {
|
||
defaultOpts: {
|
||
values: ["Option 1", "Option 2"] // XXX?
|
||
},
|
||
get: function (opts) {
|
||
if (!opts) { opts = TYPES.radio.defaultOpts; }
|
||
var name = Util.uid();
|
||
var els = opts.values.map(function (data, i) {
|
||
var radio = UI.createRadio(name, 'cp-form-'+name+'-'+i,
|
||
data, false, { mark: { tabindex:1 } });
|
||
$(radio).find('input').data('val', data);
|
||
return radio;
|
||
});
|
||
var tag = h('div.radio-group.cp-form-type-radio', els);
|
||
return {
|
||
tag: tag,
|
||
getValue: function () {
|
||
var res;
|
||
els.some(function (el, i) {
|
||
if (Util.isChecked($(el).find('input'))) {
|
||
res = opts.values[i];
|
||
}
|
||
});
|
||
return res;
|
||
},
|
||
reset: function () { $(tag).find('input').removeAttr('checked'); },
|
||
edit: function (cb) {
|
||
var v = opts.values.slice();
|
||
return editOptions(v, cb);
|
||
},
|
||
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) {
|
||
var results = [];
|
||
var empty = 0;
|
||
var count = {};
|
||
Object.keys(answers).forEach(function (author) {
|
||
var obj = answers[author];
|
||
var answer = obj.msg[uid];
|
||
if (!answer || !answer.trim()) { return empty++; }
|
||
count[answer] = count[answer] || 0;
|
||
count[answer]++;
|
||
});
|
||
Object.keys(count).forEach(function (value) {
|
||
results.push(h('div.cp-form-results-type-radio-data', [
|
||
h('span.cp-value', value),
|
||
h('span.cp-count', count[value])
|
||
]));
|
||
});
|
||
results.push(getEmpty(empty));
|
||
|
||
return h('div.cp-form-results-type-radio', results);
|
||
},
|
||
icon: h('i.fa.fa-list-ul')
|
||
}
|
||
};
|
||
|
||
var makeFormControls = function (framework, content, update) {
|
||
var send = h('button.btn.btn-primary', update ? Messages.form_update : Messages.form_submit);
|
||
var reset = h('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(); }
|
||
});
|
||
});
|
||
var $send = $(send).click(function () {
|
||
$send.attr('disabled', 'disabled');
|
||
if (!Array.isArray(APP.formBlocks)) { return; }
|
||
var results = {};
|
||
APP.formBlocks.forEach(function (data) {
|
||
results[data.uid] = data.getValue();
|
||
});
|
||
|
||
var sframeChan = framework._.sfCommon.getSframeChannel();
|
||
sframeChan.query('Q_FORM_SUBMIT', {
|
||
mailbox: content.answers,
|
||
results: results
|
||
}, function (err, data) {
|
||
$send.attr('disabled', 'disabled');
|
||
if (err || (data && data.error)) {
|
||
console.error(err || data.error);
|
||
return void UI.warn(Messages.error);
|
||
}
|
||
UI.alert(Messages.form_sent);
|
||
$send.text(Messages.form_update);
|
||
});
|
||
});
|
||
return h('div.cp-form-send-container', [send, reset]);
|
||
};
|
||
var updateForm = function (framework, content, editable, answers) {
|
||
var $container = $('div.cp-form-creator-content');
|
||
|
||
var form = content.form;
|
||
|
||
APP.formBlocks = [];
|
||
|
||
// XXX order array later
|
||
var elements = content.order.map(function (uid) {
|
||
var block = form[uid];
|
||
var type = block.type;
|
||
var model = TYPES[type];
|
||
if (!model) { return; }
|
||
|
||
var data = model.get(block.opts);
|
||
data.uid = uid;
|
||
if (answers && answers[uid]) { data.setValue(answers[uid]); }
|
||
|
||
var q = h('div.cp-form-block-question', block.q || Messages.form_default);
|
||
var editButtons, editContainer;
|
||
|
||
APP.formBlocks.push(data);
|
||
|
||
if (editable) {
|
||
// Question
|
||
|
||
var inputQ = h('input', {
|
||
value: block.q || Messages.form_default
|
||
});
|
||
var $inputQ = $(inputQ);
|
||
var saveQ = h('button.btn.btn-primary.small', [
|
||
h('i.fa.fa-pencil.cp-form-edit'),
|
||
h('span.cp-form-edit', Messages.form_editQuestion),
|
||
h('i.fa.fa-floppy-o.cp-form-save'),
|
||
h('span.cp-form-save', Messages.settings_save)
|
||
]);
|
||
var dragHandle = h('i.fa.fa-arrows-v.cp-form-block-drag');
|
||
|
||
var $saveQ = $(saveQ).click(function () {
|
||
if (!$(q).hasClass('editing')) {
|
||
$(q).addClass('editing');
|
||
$inputQ.focus();
|
||
return;
|
||
}
|
||
var v = $inputQ.val();
|
||
if (!v || !v.trim()) { return void UI.warn(Messages.error); }
|
||
block.q = v.trim();
|
||
framework.localChange();
|
||
$saveQ.attr('disabled', 'disabled');
|
||
framework._.cpNfInner.chainpad.onSettle(function () {
|
||
$(q).removeClass('editing');
|
||
$saveQ.removeAttr('disabled');
|
||
$inputQ.blur();
|
||
UI.log(Messages.saved);
|
||
});
|
||
});
|
||
var onCancelQ = function (e) {
|
||
if (e && e.relatedTarget && e.relatedTarget === saveQ) { return; }
|
||
$inputQ.val(block.q || Messages.form_default);
|
||
if (!e) { $inputQ.blur(); }
|
||
$(q).removeClass('editing');
|
||
};
|
||
$inputQ.keydown(function (e) {
|
||
if (e.which === 13) { return void $saveQ.click(); }
|
||
if (e.which === 27) { return void onCancelQ(); }
|
||
});
|
||
$inputQ.focus(function () {
|
||
$(q).addClass('editing');
|
||
});
|
||
$inputQ.blur(onCancelQ);
|
||
q = h('div.cp-form-input-block', [inputQ, saveQ, dragHandle]);
|
||
|
||
// Delete question
|
||
var edit;
|
||
var del = h('button.btn.btn-danger', [
|
||
h('i.fa.fa-trash-o'),
|
||
h('span', Messages.form_delete)
|
||
]);
|
||
UI.confirmButton(del, {
|
||
classes: 'btn-danger',
|
||
new: true
|
||
}, function () {
|
||
delete content.form[uid];
|
||
var idx = content.order.indexOf(uid);
|
||
content.order.splice(idx, 1);
|
||
$('.cp-form-block[data-id="'+uid+'"]').remove();
|
||
framework.localChange();
|
||
});
|
||
|
||
// Values
|
||
if (data.edit) {
|
||
edit = h('button.btn.btn-primary.cp-form-edit-button', [
|
||
h('i.fa.fa-pencil'),
|
||
h('span', Messages.form_editBlock)
|
||
]);
|
||
editContainer = h('div');
|
||
var onSave = function (newOpts) {
|
||
if (!newOpts) { // Cancel edit
|
||
$(editContainer).empty();
|
||
$(editButtons).show();
|
||
$(data.tag).show();
|
||
return;
|
||
}
|
||
$(editContainer).empty();
|
||
block.opts = newOpts;
|
||
framework.localChange();
|
||
var $oldTag = $(data.tag);
|
||
framework._.cpNfInner.chainpad.onSettle(function () {
|
||
$(editButtons).show();
|
||
UI.log(Messages.saved);
|
||
data = model.get(newOpts);
|
||
$oldTag.before(data.tag).remove();
|
||
});
|
||
};
|
||
$(edit).click(function () {
|
||
$(data.tag).hide();
|
||
$(editContainer).append(data.edit(onSave));
|
||
$(editButtons).hide();
|
||
});
|
||
}
|
||
|
||
editButtons = h('div.cp-form-edit-buttons-container', [
|
||
edit, del
|
||
]);
|
||
}
|
||
var editableCls = editable ? ".editable" : "";
|
||
return h('div.cp-form-block'+editableCls, {
|
||
'data-id':uid
|
||
}, [
|
||
q,
|
||
h('div.cp-form-block-content', [
|
||
data.tag,
|
||
editButtons
|
||
]),
|
||
editContainer
|
||
]);
|
||
});
|
||
|
||
$container.empty().append(elements);
|
||
|
||
if (editable) {
|
||
Sortable.create($container[0], {
|
||
direction: "vertical",
|
||
filter: "input, button",
|
||
preventOnFilter: false,
|
||
store: {
|
||
set: function (s) {
|
||
content.order = s.toArray();
|
||
framework.localChange();
|
||
}
|
||
}
|
||
});
|
||
|
||
return;
|
||
}
|
||
|
||
// In view mode, add "Submit" and "reset" buttons
|
||
$container.append(makeFormControls(framework, content, Boolean(answers)));
|
||
};
|
||
|
||
var renderResults = function (content, answers) {
|
||
var $container = $('div.cp-form-creator-results').empty();
|
||
var form = content.form;
|
||
var elements = content.order.map(function (uid) {
|
||
var block = form[uid];
|
||
var type = block.type;
|
||
var model = TYPES[type];
|
||
if (!model || !model.printResults) { return; }
|
||
var print = model.printResults(answers, uid);
|
||
|
||
var q = h('div.cp-form-block-question', block.q || Messages.form_default);
|
||
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),
|
||
]);
|
||
});
|
||
$container.append(elements);
|
||
};
|
||
|
||
var andThen = function (framework) {
|
||
framework.start();
|
||
var content = {};
|
||
|
||
var sframeChan = framework._.sfCommon.getSframeChannel();
|
||
var metadataMgr = framework._.cpNfInner.metadataMgr;
|
||
|
||
var priv = metadataMgr.getPrivateData();
|
||
APP.isEditor = Boolean(priv.form_public);
|
||
var $body = $('body');
|
||
|
||
var makeFormSettings = function () {
|
||
var viewResults = h('button.btn.btn-primary', [
|
||
h('span.cp-app-form-button-results', Messages.form_viewResults),
|
||
h('span.cp-app-form-button-creator', Messages.form_viewCreator),
|
||
]);
|
||
var $v = $(viewResults).click(function () {
|
||
if ($body.hasClass('cp-app-form-results')) {
|
||
$body.removeClass('cp-app-form-results');
|
||
return;
|
||
}
|
||
$v.attr('disabled', 'disabled');
|
||
sframeChan.query("Q_FORM_FETCH_ANSWERS", {
|
||
channel: content.answers.channel,
|
||
validateKey: content.answers.validateKey,
|
||
publicKey: content.answers.publicKey
|
||
}, function (err, answers) {
|
||
$v.removeAttr('disabled');
|
||
$body.addClass('cp-app-form-results');
|
||
renderResults(content, answers);
|
||
});
|
||
|
||
});
|
||
return [
|
||
viewResults
|
||
];
|
||
|
||
// XXX
|
||
// Button to set results as public
|
||
// Checkbox to allow anonymous answers
|
||
// Button to clear all answers?
|
||
};
|
||
|
||
var checkIntegrity = function (getter) {
|
||
var changed = false;
|
||
content.order.forEach(function (uid) {
|
||
if (!content.form[uid]) {
|
||
var idx = content.order.indexOf(uid);
|
||
content.order.splice(idx, 1);
|
||
changed = true;
|
||
}
|
||
});
|
||
Object.keys(content.form).forEach(function (uid) {
|
||
var idx = content.order.indexOf(uid);
|
||
if (idx === -1) {
|
||
changed = true;
|
||
content.order.push(uid);
|
||
}
|
||
});
|
||
|
||
if (!getter && changed) { framework.localChange(); }
|
||
};
|
||
|
||
var makeFormCreator = function () {
|
||
|
||
var controlContainer;
|
||
if (APP.isEditor) {
|
||
var controls = Object.keys(TYPES).map(function (type) {
|
||
|
||
var btn = h('button.btn', [
|
||
TYPES[type].icon.cloneNode(),
|
||
h('span', Messages['form_type_'+type])
|
||
]);
|
||
$(btn).click(function () {
|
||
var uid = Util.uid();
|
||
content.form[uid] = {
|
||
//q: Messages.form_default,
|
||
//opts: opts
|
||
type: type,
|
||
};
|
||
content.order.push(uid);
|
||
framework.localChange();
|
||
updateForm(framework, content, true);
|
||
});
|
||
return btn;
|
||
});
|
||
|
||
var settings = makeFormSettings();
|
||
|
||
controlContainer = h('div.cp-form-creator-control', [
|
||
h('div.cp-form-creator-settings', settings),
|
||
h('div.cp-form-creator-types', controls)
|
||
]);
|
||
}
|
||
|
||
var contentContainer = h('div.cp-form-creator-content');
|
||
var resultsContainer = h('div.cp-form-creator-results');
|
||
var div = h('div.cp-form-creator-container', [
|
||
controlContainer,
|
||
contentContainer,
|
||
resultsContainer
|
||
]);
|
||
return div;
|
||
};
|
||
|
||
var $container = $('#cp-app-form-container');
|
||
$container.append(makeFormCreator());
|
||
if (!APP.isEditor) { makeFormControls(); }
|
||
|
||
framework.onReady(function (isNew) {
|
||
var priv = metadataMgr.getPrivateData();
|
||
if (APP.isEditor) {
|
||
if (!content.form) {
|
||
content.form = {};
|
||
framework.localChange();
|
||
}
|
||
if (!content.order) {
|
||
content.order = [];
|
||
framework.localChange();
|
||
}
|
||
if (!content.answers || !content.answers.channel || !content.answers.publicKey || !content.answers.validateKey) {
|
||
content.answers = {
|
||
channel: Hash.createChannelId(),
|
||
publicKey: priv.form_public,
|
||
validateKey: priv.form_answerValidateKey
|
||
};
|
||
framework.localChange();
|
||
}
|
||
}
|
||
|
||
if (!content.answers || !content.answers.channel || !content.answers.publicKey || !content.answers.validateKey) {
|
||
return void UI.errorLoadingScreen(Messages.form_invalid);
|
||
}
|
||
// XXX fetch answers and
|
||
// * viewers ==> check if you've already answered and show form (new or edit)
|
||
// * editors ==> show schema and warn users if existing questions already have answers
|
||
if (APP.isEditor) {
|
||
sframeChan.query("Q_FORM_FETCH_ANSWERS", {
|
||
channel: content.answers.channel,
|
||
validateKey: content.answers.validateKey,
|
||
publicKey: content.answers.publicKey
|
||
}, function (err, obj) {
|
||
if (obj) { APP.answers = obj; }
|
||
checkIntegrity(false);
|
||
updateForm(framework, content, true);
|
||
|
||
});
|
||
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) {
|
||
UI.warn(Messages.form_cantFindAnswers);
|
||
}
|
||
var answers;
|
||
if (obj && !obj.error) { answers = obj; }
|
||
checkIntegrity(false);
|
||
updateForm(framework, content, false, answers);
|
||
});
|
||
|
||
});
|
||
|
||
framework.onContentUpdate(function (newContent) {
|
||
console.log(newContent);
|
||
content = newContent;
|
||
updateForm(framework, content, APP.isEditor);
|
||
});
|
||
|
||
framework.setContentGetter(function () {
|
||
checkIntegrity(true);
|
||
return content;
|
||
});
|
||
|
||
};
|
||
|
||
Framework.create({
|
||
toolbarContainer: '#cp-toolbar',
|
||
contentContainer: '#cp-app-form-editor',
|
||
}, andThen);
|
||
});
|