Add page break

www/form/app-form.less

@@ -64,6 +64,26 @@
                 flex: 1;
                 overflow: auto;
 
+                .cp-form-page-container {
+                    display: flex;
+                    justify-content: center;
+                    margin: 10px 0;
+                    & > span {
+                        margin: 0 20px;
+                        width: 100px;
+                        display: inline-flex;
+                        align-items: center;
+                        justify-content: center;
+                    }
+                    button {
+                        .cp-next {
+                            .fa {
+                                margin-right: 0;
+                                margin-left: 5px;
+                            }
+                        }
+                    }
+                }
                 .cp-form-block {
                     .tools_unselectable();
                     background: @cp_form-bg1;
@@ -76,6 +96,13 @@
                     }
                     .cp-form-block-content {
                         overflow-x: auto;
+                        .cp-form-page-break-edit {
+                            text-align: center;
+                            padding: 10px;
+                            i {
+                                margin-right: 5px;
+                            }
+                        }
                     }
                     .cp-form-input-block {
                         //width: @form_input-width;

www/form/inner.js

@@ -96,6 +96,7 @@ define([
     Messages.form_type_poll = "Poll"; // XXX
 
     Messages.form_type_md = "Description"; // XXX
+    Messages.form_type_page = "Page break"; // XXX
 
     Messages.form_duplicates = "Duplicate entries have been removed";
     Messages.form_maxOptions = "{0} answer(s) max";
@@ -140,6 +141,10 @@ define([
     Messages.form_addMultiple = "Add all";
     Messages.form_clear = "Clear";
 
+    Messages.form_page_prev = "Previous";
+    Messages.form_page = "Page {0}/{1}";
+    Messages.form_page_next = "Next";
+
     Messages.form_anonymousBox = "Answer anonymously";
 
     var MAX_OPTIONS = 15; // XXX
@@ -720,17 +725,26 @@ define([
                         ];
                     },
                     getCursor: function () { return cursorGetter(); },
-                    //getValue: function () { return $tag.val(); },
-                    //setValue: function (val) { $tag.val(val); },
-                    //reset: function () { $tag.val(''); }
                 };
             },
-            printResults: function () {
-                var results = [];
-                return h('div.cp-form-results-type-text', results);
-            },
+            printResults: function () { return; },
             icon: h('i.fa.fa-info')
         },
+        page: {
+            get: function () {
+                var tag = h('div.cp-form-page-break-edit', [
+                    h('i.fa.fa-hand-o-right'),
+                    h('span', Messages.form_type_page)
+                ]);
+                var $tag = $(tag);
+                return {
+                    tag: tag,
+                    pageBreak: true
+                };
+            },
+            printResults: function () { return; },
+            icon: h('i.fa.fa-hand-o-right')
+        },
     };
     var TYPES = {
         input: {
@@ -1377,6 +1391,11 @@ define([
             data.uid = uid;
             if (answers && answers[uid] && data.setValue) { data.setValue(answers[uid]); }
 
+            if (data.pageBreak && !editable) {
+                return data;
+            }
+
+
             var q = h('div.cp-form-block-question', block.q || Messages.form_default);
             var editButtons, editContainer;
 
@@ -1511,7 +1530,57 @@ define([
             ]);
         });
 
-        $container.empty().append(elements);
+        var _content = elements;
+        if (!editable) {
+            _content = [];
+            var div = h('div.cp-form-page');
+            var pages = 1;
+            var wasPage = false;
+            elements.forEach(function (obj) {
+                if (obj && obj.pageBreak) {
+                    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);
+
+            var pageContainer = h('div.cp-form-page-container');
+            var $page = $(pageContainer);
+            _content.push(pageContainer);
+            var refreshPage = function (current) {
+                $page.empty();
+                if (!current || current < 1) { current = 1; }
+                if (current > pages) { current = pages; }
+                var left = h('button.btn.btn-secondary.small.cp-prev', [
+                    h('i.fa.fa-chevron-left'),
+                    h('span', Messages.form_page_prev)
+                ]);
+                var state = h('span', Messages._getKey('form_page', [current, pages]));
+                var right = h('button.btn.btn-secondary.small.cp-next', [
+                    h('span', Messages.form_page_next),
+                    h('i.fa.fa-chevron-right'),
+                ]);
+                $(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);
 
         if (editable) {
             Sortable.create($container[0], {
@@ -1900,7 +1969,6 @@ define([
                             myAnswers = myAnswersObj.msg;
                         }
                     }
-                    console.warn(obj);
                     updateForm(framework, content, false, myAnswers);
                 });
                 return;