diff --git a/www/form/app-form.less b/www/form/app-form.less index 18431ead1..022d11dac 100644 --- a/www/form/app-form.less +++ b/www/form/app-form.less @@ -64,6 +64,61 @@ flex: 1; overflow: auto; + .cp-form-creator-add-inline { + display: flex; + flex-flow: column; + align-items: center; + margin-bottom: 20px; + button { + width: 50px; + i { + margin-right: 0; + } + } + .cp-form-creator-inline-add { + .add-close { display: none; } + &.displayed { + .add-close { display: inline; } + .add-open { display: none; } + } + } + .cp-form-creator-control-inline { + display: flex; + justify-content: space-around; + margin-top: 10px; + button:not(:last-child) { + margin-right: 5px; + } + .cp-form-creator-types:first-child { + margin-right: 50px; + } + } + } + .cp-form-creator-add-full { + display: flex; + align-items: center; + margin-bottom: 20px; + &> div:first-child { + border-right: 1px solid black; + display: flex; + height: 100%; + align-items: center; + padding-right: 10px; + margin-right: 10px; + } + .cp-form-creator-control-inline { + display: flex; + flex-flow: column; + justify-content: space-around; + button:not(:last-child) { + margin-right: 5px; + } + .cp-form-creator-types:first-child { + margin-right: 50px; + } + } + } + .cp-form-page + .cp-form-send-container { margin-top: 10px; } diff --git a/www/form/inner.js b/www/form/inner.js index 8a3baa470..d3a849998 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -1487,8 +1487,80 @@ define([ APP.formBlocks = []; - // XXX order array later - var elements = content.order.map(function (uid) { + + var getFormCreator = function (uid) { + var full = !uid; + var idx = content.order.indexOf(uid); + var addControl = function (type) { + var btn = h('button.btn.small', { + title: full ? undefined : Messages['form_type_'+type] + }, [ + (TYPES[type] || STATIC_TYPES[type]).icon.cloneNode(), + full ? h('span', Messages['form_type_'+type]) : undefined + ]); + $(btn).click(function () { + var uid = Util.uid(); + content.form[uid] = { + //q: Messages.form_default, + //opts: opts + type: type, + }; + if (full) { + content.order.push(uid); + } else { + content.order.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', Messages.tag_add); + 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'); + }); + } + + var inlineCls = full ? '-full' : '-inline' + return h('div.cp-form-creator-add'+inlineCls, [ + h('div', add), + buttons + ]); + + }; + + var updateAddInline = function () { + console.log($container, $container.find('.cp-form-block')); + $container.find('.cp-form-creator-add-inline').remove(); + $container.find('.cp-form-block').each(function (i, el) { + console.log(i, el); + if (i === 0) { return; } + var $el = $(el); + var uid = $el.attr('data-id'); + $el.before(getFormCreator(uid)); + }); + }; + + + var elements = []; + content.order.forEach(function (uid, i) { var block = form[uid]; var type = block.type; var model = TYPES[type] || STATIC_TYPES[type]; @@ -1511,7 +1583,8 @@ define([ if (answers && answers[uid] && data.setValue) { data.setValue(answers[uid]); } if (data.pageBreak && !editable) { - return data; + elements.push(data); + return; } @@ -1584,6 +1657,7 @@ define([ content.order.splice(idx, 1); $('.cp-form-block[data-id="'+uid+'"]').remove(); framework.localChange(); + updateAddInline(); }); // Values @@ -1637,7 +1711,7 @@ define([ ]); } var editableCls = editable ? ".editable" : ""; - return h('div.cp-form-block'+editableCls, { + elements.push(h('div.cp-form-block'+editableCls, { 'data-id':uid }, [ isStatic ? undefined : q, @@ -1646,9 +1720,13 @@ define([ editButtons ]), editContainer - ]); + ])); }); + if (APP.isEditor) { + elements.push(getFormCreator()); + } + var _content = elements; if (!editable) { _content = []; @@ -1702,6 +1780,7 @@ define([ } $container.empty().append(_content); + updateAddInline(); if (editable) { Sortable.create($container[0], { @@ -1712,6 +1791,7 @@ define([ set: function (s) { content.order = s.toArray(); framework.localChange(); + updateAddInline(); } } }); @@ -1924,33 +2004,10 @@ define([ var controlContainer; if (APP.isEditor) { - var addControl = function (type) { - var btn = h('button.btn', [ - (TYPES[type] || STATIC_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 controls = Object.keys(TYPES).map(addControl); - var staticControls = Object.keys(STATIC_TYPES).map(addControl); - var settings = makeFormSettings(); controlContainer = h('div.cp-form-creator-control', [ h('div.cp-form-creator-settings', settings), - h('div.cp-form-creator-types', controls), - h('div.cp-form-creator-types', staticControls) ]); }