Sandboxed Poll app with less2

customize.dist/pages.js

@@ -638,48 +638,45 @@ define([
 
     Pages['/poll/'] = Pages['/poll/index.html'] = function () {
         return [
-            appToolbar(),
+            appToolbar3(),
-            h('div#content', [
+            h('div#cp-app-poll-content', [
-                h('div#poll', [
+                h('div#cp-app-poll-form', [
-                    h('div#howItWorks', [
+                    h('div#cp-app-poll-help', [
                         h('h1', 'CryptPoll'),
                         setHTML(h('h2'), Msg.poll_subtitle),
                         h('p', Msg.poll_p_save),
                         h('p', Msg.poll_p_encryption)
                     ]),
-                    h('div.upper', [
+                    h('div.cp-app-poll-upper', [
-                        h('button#publish.btn.btn-success', {
+                        h('button#cp-app-poll-action-publish.btn.btn-success', {
                             style: { display: 'none' }
                         }, Msg.poll_publish_button),
-                        h('button#admin.btn.btn-primary', {
+                        h('button#cp-app-poll-action-admin.btn.btn-primary', {
                             style: { display: 'none' },
                             title: Msg.poll_admin_button
                         }, Msg.poll_admin_button),
-                        h('button#help.btn.btn-secondary', {
+                        h('button#cp-app-poll-action-help.btn.btn-secondary', {
                             title: Msg.poll_show_help_button
                         }, Msg.poll_show_help_button)
                     ]),
-                    h('div.realtime', [
+                    h('div.cp-app-poll-realtime', [
                         h('br'),
                         h('center', [
-                            h('textarea#description', {
+                            h('textarea#cp-app-poll-description', {
                                 rows: "5",
                                 cols: "50",
                                 disabled: true
                             }),
                             h('br')
                         ]),
-                        h('div#tableContainer', [
+                        h('div#cp-app-poll-table-container', [
-                            h('div#tableScroll'),
+                            h('div#cp-app-poll-table-scroll'),
-                            h('button#create-user.btn.btn-secondary', {
+                            h('button#cp-app-poll-create-user.btn.btn-secondary', {
                                 title: Msg.poll_create_user
                             }, h('span.fa.fa-plus')),
-                            h('button#create-option.btn.btn-secondary', {
+                            h('button#cp-app-poll-create-option.btn.btn-secondary', {
                                 title: Msg.poll_create_option
                             }, h('span.fa.fa-plus')),
-                            h('button#commit.btn.btn-secondary', {
-                                title: Msg.poll_commit
-                            }, h('span.fa.fa-check'))
                         ])
                     ])
                 ])

customize.dist/src/less2/main.less

@@ -28,6 +28,6 @@ body.cp-app-code { @import "../../../code/app-code.less"; }
 body.cp-app-slide { @import "../../../slide/app-slide.less"; }
 body.cp-app-file { @import "../../../file/app-file.less"; }
 body.cp-app-filepicker { @import "../../../filepicker/app-filepicker.less"; }
-//body.cp-app-poll { @import "../../../poll/app-poll.less"; }
+body.cp-app-poll { @import "../../../poll/app-poll.less"; }
 body.cp-app-whiteboard { @import "../../../whiteboard/app-whiteboard.less"; }
 

www/drive/inner.js

@@ -1,6 +1,5 @@
 define([
     'jquery',
-    '/bower_components/chainpad-crypto/crypto.js',
     '/bower_components/textpatcher/TextPatcher.js',
     '/common/toolbar3.js',
     'json.sortify',
@@ -12,7 +11,6 @@ define([
     '/common/common-realtime.js',
     '/common/userObject.js',
     '/customize/application_config.js',
-    '/common/mergeDrive.js',
     '/common/sframe-chainpad-listmap.js',
 
     'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
@@ -20,7 +18,6 @@ define([
     'less!/customize/src/less2/main.less',
 ], function (
     $,
-    Crypto,
     TextPatcher,
     Toolbar,
     JSONSortify,
@@ -32,7 +29,6 @@ define([
     CommonRealtime,
     FO,
     AppConfig,
-    Merge,
     Listmap)
 {
     var Messages = Cryptpad.Messages;

www/poll/app-drive.less

@@ -0,0 +1,820 @@
+@import (once) "../../customize/src/less2/include/browser.less";
+@import (once) "../../customize/src/less2/include/toolbar.less";
+@import (once) "../../customize/src/less2/include/markdown.less";
+@import (once) '../../customize/src/less2/include/fileupload.less';
+@import (once) '../../customize/src/less2/include/alertify.less';
+@import (once) '../../customize/src/less2/include/leftside-menu.less';
+@import (once) "../../customize/src/less2/include/tools.less";
+@import (once) "../../customize/src/less2/include/limit-bar.less";
+
+.toolbar_main();
+.fileupload_main();
+.alertify_main();
+.limit-bar_main();
+
+@drive_hover: #eee;
+@drive_hover-light: lighten(@drive_hover, 20%);
+@drive_info-box-bg: #d2e1f2;
+@drive_info-box-border: #bbb;
+@drive_table-header-fg: #555;
+@drive_table-header-bg: #e8e8e8;
+@drive_mobile-tree-border-col: #ccc;
+
+@drive_content-fg: @colortheme_sidebar-right-fg;
+@drive_content-bg: @colortheme_sidebar-right-bg;
+@drive_content-bg-ro: darken(@drive_content-bg, 10%);
+
+
+/* PAGE */
+
+display: flex;
+flex-flow: column;
+max-height: 100%;
+min-height: auto;
+
+.cp-unselectable {
+    .tools_unselectable();
+}
+
+/* local mixins */
+.drive_fileIcon {
+    li {
+        display: inline-block;
+        margin: 10px 10px;
+        width: 140px;
+        height: 140px;
+        text-align: center;
+        vertical-align: top;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        padding-top: 5px;
+        padding-bottom: 5px;
+
+        &:not(.cp-app-drive-element-selected):not(.cp-app-drive-element-selected-tmp) {
+            border: 1px solid #CCC;
+        }
+        .cp-app-drive-element-name {
+            width: 100%;
+            height: 48px;
+            margin: 8px 0;
+            display: inline-block;
+            //align-items: center;
+            //justify-content: center;
+            overflow: hidden;
+            //text-overflow: ellipsis;
+            word-wrap: break-word;
+        }
+        .cp-app-drive-element-truncated {
+            display: block;
+            position: absolute;
+            bottom: 0px;
+            left: 0; right: 0;
+            text-align: center;
+        }
+        img.cp-app-drive-content-icon {
+            height: 48px;
+            max-height: none;
+            max-width: none;
+            margin: 8px 0;
+        }
+        .fa {
+            display: block;
+            margin: auto;
+            font-size: 48px;
+            margin: 8px 0;
+            text-align: center;
+            &.listonly {
+                display: none;
+            }
+        }
+    }
+}
+
+img.cp-app-drive-icon {
+    max-width: 20px;
+    max-height: 16px;
+}
+
+.cp-app-drive-container {
+    flex: 1;
+    overflow: auto;
+    width: 100%;
+    display: flex;
+    flex-flow: row;
+    @media screen and (max-width: @browser_media-medium-screen) {
+        display: block;
+        #cp-app-drive-toolbar {
+            .path .element {
+                display: none;
+            }
+        }
+        #cp-app-drive-tree {
+            resize: none;
+            width: 100%;
+            max-width: unset;
+            max-height: unset;
+            border-bottom: 1px solid @drive_mobile-tree-border-col;
+            .cp-app-drive-tree-category {
+                margin-top: 0.5em;
+            }
+        }
+    }
+}
+
+div:focus {
+    outline: none;
+}
+
+.fa {
+    font-family: FontAwesome;
+}
+
+ul {
+    list-style: none;
+    padding-left: 0px; // Remove the default padding
+}
+
+li {
+    padding: 0px 5px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.cp-app-drive-context {
+    display: none;
+    position: absolute;
+    z-index: 500;
+    li {
+        padding: 0;
+        font-size: @colortheme_app-font-size;
+        a {
+            cursor: pointer;
+        }
+    }
+}
+
+.cp-app-drive-element-droppable {
+    background-color: #FE9A2E;
+    color: #222;
+}
+
+.cp-app-drive-element-selected {
+    background: #666 !important;
+    color: #eee;
+    margin: -1px;
+    .fa-minus-square-o, .fa-plus-square-o {
+        color: @colortheme_sidebar-left-fg;
+    }
+}
+
+.cp-app-drive-element-selected-tmp {
+    border: 1px dotted #bbb;
+    background: #AAA;
+    color: #ddd;
+    margin: -1px;
+    .fa-minus-square-o, .fa-plus-square-o {
+        color: @colortheme_sidebar-left-fg;
+    }
+}
+
+span {
+    &.fa-folder, &.fa-folder-open {
+        //color: #FEDE8B;
+        //text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
+    }
+}
+
+/* TREE */
+
+
+#cp-app-drive-tree {
+    font-size: @colortheme_app-font-size;
+    //border-right: 1px solid #ccc;
+    box-sizing: border-box;
+    background: @colortheme_sidebar-left-bg;
+    overflow: auto;
+    resize: horizontal;
+    width: auto;
+    white-space: nowrap;
+    max-width: 500px;
+    min-width: 200px;
+    padding: 0px;
+    color: @colortheme_sidebar-left-fg;
+    display: flex;
+    flex-flow: column;
+    max-height: 100%;
+    .cp-app-drive-tree-categories-container {
+        flex: 1;
+        max-width: 500px;
+        overflow: auto;
+    }
+    img.cp-app-drive-icon {
+        margin-bottom: 3px;
+        margin-left: -2px;
+    }
+    .cp-app-drive-tree-docs {
+        margin-top: 20px;
+        //padding: 0 0 0 20px;
+        padding: 0;
+        cursor: auto;
+        &li, li {
+            padding: 0;
+            &.cp-app-drive-element-collapsed ul {
+                display: none;
+            }
+            input {
+                width: ~"calc(100% - 30px)";
+                padding: 0 10px;
+                border: 0;
+                color: lighten(@colortheme_sidebar-left-fg, 40%);
+            }
+            & > span.cp-app-drive-element-row {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                //min-width: ~"calc(100% + 5px)";
+                .leftside-menu-category_main();
+                width: ~"calc(100% + 5px)";
+                margin: 0;
+                margin-bottom: -6px;
+                display: inline-block;
+                cursor: pointer;
+                margin-left: -5px;
+                padding-left: 5px;
+            }
+            & > span.cp-app-drive-element-row:not(.cp-app-drive-element-selected):not(.cp-app-drive-element-active):hover {
+            }
+        }
+    }
+    span.cp-app-drive-element {
+        cursor: pointer;
+    }
+    .cp-app-drive-tree-category {
+        margin: 0;
+        margin-top: 15px;
+        .cp-app-drive-tree-root {
+            &> .fa {
+                min-width: 30px;
+                cursor: pointer;
+            }
+        }
+        li {
+            padding: 0;
+            .cp-app-drive-element-row {
+                display: block;
+                padding-left: 20px;
+                .leftside-menu-category_main();
+                margin: 0;
+                .fa {
+                    width: 25px;
+                }
+            }
+        }
+    }
+    .cp-app-drive-tree-category:last-child {
+        margin-bottom: 20px;
+    }
+    .limit-container {
+        margin-top: 0;
+    }
+    #cp-app-drive-tree-search {
+        text-align: center;
+        padding: 0;
+        position: relative;
+        input {
+            background: lighten(@colortheme_drive-bg, 8%);
+            color: @colortheme_drive-color;
+            .tools_placeholder-color(@colortheme_drive-color);
+            outline-width: 0px;
+            border-radius: 0;
+            width: 100%;
+            //border: 1px solid #ccc;
+            border: 0;
+            border-right: 1px solid lighten(@colortheme_drive-bg, 16%);
+            //border-right: 0;
+            height: @variables_bar-height;
+            padding: 0 5px;
+            padding-left: 45px;
+            &:focus {
+                outline-width: 0px;
+            }
+        }
+        .cp-app-drive-tree-search-con {
+            color: @colortheme_drive-color;
+            position: absolute;
+            left: 20px; // TODO align with drive categories
+            top: 8px;
+        }
+    }
+    .fa.cp-app-drive-icon-expcol {
+        margin-left: -10px;
+        font-size: 14px;
+        position: absolute;
+        left: -20px;
+        top: 10px;
+        width: 11px !important;
+        height: 11px !important;
+        padding: 0;
+        margin: 0;
+        background: white;
+        z-index: 10;
+        cursor: default;
+        &:before {
+            position:relative;
+            top: -1px;
+        }
+    }
+    .cp-app-drive-tree-docs {
+        .cp-app-drive-tree-root > .cp-app-drive-element-row > .cp-app-drive-icon-expcol {
+            position: relative;
+            top:0;
+            left: -10px;
+        }
+        .cp-app-drive-tree-root > .cp-app-drive-element-row > .cp-app-drive-icon-folder {
+            margin-left: -5px;
+        }
+        .cp-app-drive-tree-root {
+            &> .cp-app-drive-element-row {
+                padding-left: 20px;
+            }
+            &> ul {
+                padding-left: 30px;
+            }
+        }
+    }
+
+    // Expand/collapse lines
+    .cp-app-drive-tree-docs ul {
+        margin: 0px 0px 0px 10px;
+        list-style: none;
+        padding-left: 10px;
+        li {
+            position: relative;
+            &:before {
+                position: absolute;
+                left: -15px;
+                top: -11px;
+                content: '';
+                display: block;
+                border-left: 1px solid @colortheme_sidebar-left-branch;
+                height: ~"calc(1em + 11px)";
+                border-bottom: 1px solid @colortheme_sidebar-left-branch;
+                width: 15px;
+            }
+            &:after {
+                position: absolute;
+                left: -15px;
+                bottom: -7px;
+                content: '';
+                display: block;
+                border-left: 1px solid @colortheme_sidebar-left-branch;
+                height: 100%;
+            }
+            &.cp-app-drive-tree-root {
+                margin: 0px 0px 0px -10px;
+                &:before {
+                    display: none;
+                }
+                &:after {
+                    display: none;
+                }
+            }
+            &:last-child:after {
+                display: none;
+            }
+        }
+    }
+}
+
+/* CONTENT */
+#cp-app-drive-content-container {
+    display: flex;
+    flex-flow: column;
+    flex: 1;
+    // Needed to avoid the folder's path to overflows
+    // https://stackoverflow.com/questions/38223879/white-space-nowrap-breaks-flexbox-layout
+    min-width: 0;
+}
+#cp-app-drive-content {
+    box-sizing: border-box;
+    background: @drive_content-bg;
+    color: @drive_content-fg;
+    overflow: auto;
+    flex: 1;
+    display: flex;
+    flex-flow: column;
+    position: relative;
+    .cp-app-drive-content-select-box {
+        display: none;
+        background-color: rgba(100, 100, 100, 0.7);
+        position: absolute;
+        z-index: 50;
+    }
+    &.cp-app-drive-readonly {
+        background: @drive_content-bg-ro;
+    }
+    h1 {
+        padding-left: 10px;
+        margin-top: 10px;
+    }
+    .cp-app-drive-content-info-box {
+        line-height: 2em;
+        padding: 0.25em 0.75em;
+        margin: 1em;
+        background: @drive_info-box-bg;
+        span {
+            cursor: pointer;
+            float: right;
+            margin-top: 0.5em;
+        }
+    }
+    li {
+        cursor: default;
+        &:not(.cp-app-drive-element-header) {
+            &:hover {
+                &:not(.-cp-app-drive-element-selected, .cp-app-drive-element-selected-tmp) {
+                    background-color: @drive_hover;
+                }
+            }
+        }
+    }
+    #cp-app-drive-content-folder {
+        li {
+            &.cp-app-drive-search-result {
+                border-bottom: 1px solid @drive_info-box-border;
+                display: block;
+                &:hover {
+                    background-color: initial;
+                }
+                table {
+                    width: 100%;
+                    .cp-app-drive-search-label2 {
+                        width: 150px;
+                        font-size: 15px;
+                        text-align: right;
+                        padding-right: 15px;
+                    }
+                    .cp-app-drive-search-opendir {
+                        a {
+                            cursor: pointer;
+                            color: #41b7d8;
+                            &:hover {
+                                color: #014c8c;
+                                text-decoration: underline;
+                            }
+                        }
+                    }
+                    .cp-app-drive-search-path {
+                        font-style: italic;
+                        direction: rtl;
+                        .cp-app-drive-path-element {
+                            display: inline-block;
+                            margin-right: 5px;
+                        }
+                    }
+                    .cp-app-drive-search-title {
+                        font-weight: bold;
+                        cursor: pointer;
+                        &:hover {
+                            background-color: @drive_hover;
+                        }
+                    }
+                    .cp-app-drive-search-col2 {
+                        width: 250px;
+                    }
+                    td.cp-app-drive-search-icon {
+                        width: 50px;
+                        font-size: 40px;
+                    }
+                }
+            }
+        }
+    }
+    .cp-app-drive-element {
+        .cp-app-drive-element-truncated { display: none; }
+    }
+    div.cp-app-drive-content-grid {
+        padding: 20px;
+        .drive_fileIcon;
+        li {
+            &.cp-app-drive-element {
+                position: relative;
+            }
+            input {
+                width: 100%;
+                margin-top: 5px;
+            }
+            .cp-app-drive-element-state {
+                position: absolute;
+                top: 3px;
+                right: 3px;
+                .fa {
+                    margin:0;
+                    font-size: 18px;
+                }
+            }
+        }
+        .cp-app-drive-element-list {
+            display: none;
+        }
+        .cp-app-drive-new-ghost {
+            cursor: pointer;
+            opacity: 0.5;
+            padding: 0;
+            &:hover {
+                opacity: 0.7;
+            }
+            .fa {
+                cursor: pointer;
+                font-size: 90px;
+                margin-top: 5px;
+                margin-bottom: 0;
+            }
+        }
+    }
+
+    .cp-app-drive-content-list {
+        .cp-app-drive-element-grid {
+            display: none;
+        }
+        // Make it act as a table!
+        padding-left: 20px;
+        ul {
+            display: table;
+            width: 100%;
+            padding: 0px 10px;
+        }
+        li {
+            display: table-row;
+            &> span {
+                padding: 0 5px;
+                display: table-cell;
+            }
+            &:not(.cp-app-drive-element-header) {
+                height: @variables_bar-height;
+                line-height: @variables_bar-height;
+            }
+            &.cp-app-drive-element-header {
+                cursor: default;
+                color: @drive_table-header-fg;
+                span {
+                    &:not(.fa) {
+                        text-align: left;
+                    }
+                    &.sortasc, &.sortdesc {
+                        float: right;
+                    }
+                }
+                &> span {
+                    padding: 15px 5px;
+                    &.cp-app-drive-sort-active {
+                        font-weight: bold;
+                    }
+                    &.cp-app-drive-sort-clickable {
+                        cursor: pointer;
+                        &:hover {
+                            background: @drive_table-header-bg;
+                        }
+                    }
+                }
+            }
+        }
+        .cp-app-drive-element {
+            span {
+                overflow: hidden;
+                white-space: nowrap;
+                box-sizing: border-box;
+                &.cp-app-drive-element-state {
+                    .fa:not(:last-child) {
+                        margin-right: 5px;
+                    }
+                }
+                &.cp-app-drive-content-icon, &.cp-app-drive-element-state {
+                    width: 30px;
+                }
+                &.cp-app-drive-element-type, &.cp-app-drive-element-atime, &.cp-app-drive-element-ctime {
+                    width: 175px;
+                }
+                &.cp-app-drive-element-title {
+                    width: 250px;
+                    @media screen and (max-width: 1200px) {
+                        display: none;
+                    }
+                }
+                &.cp-app-drive-element-folders, &.cp-app-drive-element-files {
+                    width: 150px;
+                }
+            }
+        }
+    }
+}
+
+#cp-app-drive-content-folder {
+    padding-right: 10px;
+    flex: 1;
+}
+
+#cp-app-drive-new-ghost-dialog.cp-modal-container {
+    .drive_fileIcon;
+
+    li:not(.cp-app-drive-element-selected):hover {
+        border: 1px solid white;
+    }
+    .cp-modal {
+        display: flex;
+        flex-flow: column;
+        li, li .fa {
+            cursor: pointer;
+        }
+        &> p {
+            margin: 50px;
+        }
+        &> div {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            align-content: center;
+            overflow-y: auto;
+            .cp-app-drive-new-upload {
+                break-after: always;
+                page-break-after: always;
+            }
+        }
+    }
+
+    @media screen and (max-height: @browser_media-not-big) {
+        .cp-modal {
+            & > p {
+                display: none;
+            }
+            & > div {
+                align-content: unset;
+                li {
+                    height: 40px;
+                    width: 90%;
+                    display: flex;
+                    align-items: center;
+                    .fa {
+                        font-size: 32px;
+                    }
+                    .cp-app-drive-new-name {
+                        height: auto;
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+/* Toolbar */
+
+#cp-app-drive-toolbar {
+    background: lighten(@colortheme_drive-bg, 8%);
+    color: @colortheme_drive-color;
+    //height: 30px;
+    //display: flex;
+    //flex-flow: row;
+    z-index: 100;
+    box-sizing: border-box;
+    height: @variables_bar-height;
+    padding: 0;
+    display: flex;
+    flex-flow: row;
+
+    * {
+        outline-width: 0;
+        &:focus {
+            outline-width: 0;
+        }
+    }
+
+    .history {
+        float: right;
+        .cp-toolbar-drawer-element {
+            display: none;
+        }
+    }
+
+    .cp-app-drive-toolbar-rightside, .cp-app-drive-toolbar-leftside {
+        display: inline-block;
+        margin: 0;
+        padding: 0;
+        .fa {
+            margin: 0;
+        }
+        button {
+            height: @variables_bar-height;
+            padding: 0 10px;
+            border: none;
+            border-radius: 0;
+            box-sizing: border-box;
+            background: transparent;
+            font-size: @colortheme_app-font-size;
+            color: @colortheme_drive-color;
+            transition: all 0.15s;
+            .drawer {
+                display: none;
+            }
+            .fa, span {
+                font-size: @colortheme_app-font-size;
+            }
+            &:hover {
+                background: @colortheme_drive-bg;
+            }
+            &.cp-app-drive-toolbar-active {
+                display: none;
+            }
+        }
+    }
+    .cp-app-drive-toolbar-rightside {
+        float: right;
+        & > * {
+            float: right;
+        }
+        #cp-app-drive-toolbar-contextbuttons {
+            display: inline-block;
+            height: 100%;
+        }
+        padding-left: 10px;
+    }
+    .cp-app-drive-toolbar-leftside {
+        & > span {
+            height: 100%;
+            margin: 0;
+        }
+        button {
+            padding: 0 10px;
+            .fa {
+                margin-right: 5px;
+            }
+            .cp-dropdown-button-title {
+                display: inline-flex;
+                height: @variables_bar-height;
+                align-items: center;
+                span:not(.fa) {
+                    line-height: 23px;
+                }
+            }
+        }
+    }
+
+    button {
+        font: @colortheme_app-font;
+        span {
+            font: @colortheme_app-font;
+        }
+        .fa, &.fa {
+            font-family: FontAwesome;
+        }
+    }
+    /* The container <div> - needed to position the dropdown content */
+    .cp-dropdown-container {
+        margin: 2px 2px;
+        line-height: 1em;
+        position: relative;
+        display: inline-block;
+    }
+    .cp-dropdown-content {
+        margin-right: 2px;
+    }
+
+    .cp-app-drive-path {
+        flex: 1;
+        width: 100%;
+        height: @variables_bar-height;
+        line-height: @variables_bar-height;
+        cursor: default;
+        width: auto;
+        overflow: hidden;
+        white-space: nowrap;
+        direction: rtl;
+        max-width: 100%;
+        text-align: left;
+        .cp-app-drive-path-element {
+            display: inline-block;
+            height: @variables_bar-height;
+            line-height: @variables_bar-height;
+            font-size: @colortheme_app-font-size;
+            padding: 0 5px;
+            border: 0;
+            background: darken(@colortheme_drive-bg, 10%);
+            color: @colortheme_drive-color;
+            box-sizing: border-box;
+            transition: all 0.15s;
+            &.cp-app-drive-path-separator {
+                color: #ccc;
+            }
+            &.cp-app-drive-path-lickable {
+                cursor: pointer;
+                &:hover {
+                    background: darken(@colortheme_drive-bg, 15%);
+                }
+            }
+        }
+    }
+}
+
+
+

www/poll/app-poll.less

@@ -0,0 +1,477 @@
+@import (once) "../../customize/src/less2/include/browser.less";
+@import (once) "../../customize/src/less2/include/toolbar.less";
+@import (once) "../../customize/src/less2/include/markdown.less";
+@import (once) '../../customize/src/less2/include/fileupload.less';
+@import (once) '../../customize/src/less2/include/alertify.less';
+@import (once) '../../customize/src/less2/include/tokenfield.less';
+
+.toolbar_main();
+.fileupload_main();
+.alertify_main();
+.tokenfield_main();
+
+@poll-fore: #555;
+@poll-th-bg: #aaa;
+@poll-th-user-bg: #999;
+@poll-td-bg: #aaa;
+@poll-editing: #88b8cc;
+@poll-placeholder: #666;
+@poll-border-color: #555;
+@poll-cover-color: #000;
+@poll-fg: #000;
+@poll-option-yellow: #ff5;
+@poll-option-gray: #ccc;
+
+.bottom-left(@s: 5px) { border-bottom-left-radius: @s; }
+.top-left(@s: 5px) { border-top-left-radius: @s; }
+
+display: flex;
+flex-flow: column;
+overflow-x: hidden;
+
+#cp-app-poll-content {
+    display: flex;
+    flex: 1;
+    #cp-app-poll-form {
+        flex: 1;
+        overflow-y: auto;
+    }
+}
+
+/*.cp-toolbar-container h2 {
+    font: normal normal normal 12px Arial, Helvetica, Tahoma, Verdana, Sans-Serif;
+    color: #000;
+    line-height: auto;
+}
+.cp-toolbar-container {
+    display: block;
+}*/
+
+.cp-app-poll-table-text-cell input[type="text"] {
+    width: 400px;
+}
+
+input[type="text"], textarea {
+    background-color: white;
+    color: black;
+    border: 0;
+}
+
+input[type="text"][disabled], textarea[disabled] {
+    background-color: transparent;
+    border: 0px;
+}
+
+// The placeholder color only seems to effect Safari when not set
+
+input[type="text"]::placeholder {
+    color: @poll-placeholder;
+}
+
+table#cp-app-poll-table {
+    margin: 0px;
+}
+#cp-app-poll-table-container {
+    position: relative;
+    padding: 29px;
+    padding-right: 79px;
+}
+#cp-app-poll-table-container button {
+    height: 2rem;
+    display: none;
+}
+#cp-app-poll-publish {
+    display: none;
+}
+#cp-app-poll-action-publish, #cp-app-poll-action-admin {
+    margin-top: 15px;
+    margin-bottom: 15px;
+}
+#cp-app-poll-create-user {
+    position: absolute;
+    display: inline-block;
+    /*left: 0px;*/
+    top: 55px;
+    width: 50px;
+    overflow: hidden;
+}
+#cp-app-poll-create-option {
+    width: 50px;
+}
+#cp-app-poll-table-scroll {
+    overflow-y: hidden;
+    overflow-x: auto;
+    margin-left: calc(~"30% - 50px + 31px");
+    max-width: 70%;
+    width: auto;
+    display: inline-block;
+}
+#cp-app-poll-description {
+    padding: 15px;
+    margin: auto;
+
+    min-width: 80%;
+    width: 80%;
+    min-height: 7em;
+    font-size: 20px;
+    font-weight: bold;
+    border: 1px solid black;
+
+}
+#cp-app-poll-description[disabled] {
+    resize: none;
+    color: #000;
+    border: 1px solid #444;
+}
+
+#cp-app-poll-help {
+    width: 80%;
+    margin: auto;
+}
+div.cp-app-poll-upper {
+    width: 80%;
+    margin: auto;
+
+    & > * {
+        margin-right: 1em;
+    }
+}
+
+// from cryptpad.less
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    margin: 20px;
+}
+tbody {
+    border: 1px solid @poll-border-color;
+    * {
+        box-sizing: border-box;
+    }
+    tr {
+        text-align: center;
+        &:first-of-type th{
+            font-size: 20px;
+            border-top: 0px;
+            font-weight: bold;
+            padding: 10px;
+            text-decoration: underline;
+            &.table-refresh {
+                color: @colortheme_cp-green;
+                text-decoration: none;
+                cursor: pointer;
+            }
+
+        }
+        &:nth-child(odd) {
+            background-color: @colortheme_light-base;
+        }
+        th:first-of-type {
+            border-left: 0px;
+        }
+        th {
+            box-sizing: border-box;
+            border: 1px solid @poll-border-color;
+        }
+        th, td {
+            color: @poll-fore;
+
+            .cp-app-poll-table-remove {
+                cursor: pointer;
+            }
+        }
+        th:last-child {
+            border-right: 0px;
+        }
+    }
+
+    td {
+        border-right: 1px solid @poll-border-color;
+        padding: 12px;
+        padding-top: 0px;
+        padding-bottom: 0px;
+        &:last-child {
+            border-right: none;
+        }
+    }
+}
+
+div.cp-app-poll-realtime {
+    display: block;
+    max-height: 100%;
+    max-width: 100%;
+
+    input {
+        &[type="text"] {
+            height: 1em;
+            margin: 0px;
+        }
+    }
+    > textarea {
+        width: 50%;
+        height: 15vh;
+    }
+
+    padding: 0px;
+    margin: 0px;
+
+    table {
+        border-collapse: collapse;
+        width: ~"calc(100% - 1px)";
+        .cp-app-poll-table-editing {
+            background-color: @poll-editing;
+        }
+        tr {
+            td:first-child {
+                position:absolute;
+                left: 29px;
+                top: auto;
+                width: ~"calc(30% - 50px)";
+            }
+            td {
+                padding: 0px;
+                margin: 0px;
+
+                div.cp-app-poll-table-text-cell {
+                    padding: 0px;
+                    margin: 0px;
+                    height: 100%;
+
+                    input {
+                        width: 80%;
+                        width: 90%;
+                        height: 100%;
+                        border: 0px;
+                        &[disabled] {
+                            background-color: transparent;
+                            color: @poll-fg;
+                            font-weight: bold;
+                        }
+                    }
+                }
+
+                &.cp-app-poll-table-checkbox-cell {
+                    margin: 0px;
+                    padding: 0px;
+                    height: 100%;
+                    min-width: 150px;
+
+                    div.cp-app-poll-table-checkbox-contain {
+                        display: inline-block;
+                        height: 100%;
+                        width: 100%;
+                        position: relative;
+
+                        label {
+                            background-color: transparent;
+                            display: block;
+                            position: absolute;
+                            top: 0px;
+                            left: 0px;
+                            height: 100%;
+                            width: 100%;
+                        }
+
+                        input {
+                            &[type="number"] {
+                                &:not(.editable) {
+                                    display: none;
+
+                                    ~ .cp-app-poll-table-cover {
+                                        display: block;
+                                        font-weight: bold;
+
+                                        color: @poll-cover-color;
+
+                                        &:after {
+                                            height: 100%;
+                                        }
+
+                                        display: block;
+                                        &.yes {
+                                            background-color: @colortheme_cp-green;
+                                        }
+
+                                        &.uncommitted {
+                                            background: #ddd;
+                                        }
+
+                                        &.mine {
+                                            display: none;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+
+                        input[type="number"][value="0"] {
+                            ~ .cp-app-poll-table-cover {
+                                background-color: @colortheme_cp-red;
+                                &:after { content: "✖"; }
+                            }
+                        }
+                        input[type="number"][value="1"] {
+                            ~ .cp-app-poll-table-cover {
+                                background-color: @colortheme_cp-green;
+                                &:after { content: "✔"; }
+                            }
+                        }
+                        input[type="number"][value="2"] {
+                            ~ .cp-app-poll-table-cover {
+                                background-color: @poll-option-yellow;
+                                &:after { content: "~"; }
+                            }
+                        }
+                        input[type="number"][value="3"] {
+                            ~ .cp-app-poll-table-cover {
+                                background-color: @poll-option-gray;
+                                &:after { content: "?"; }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        input {
+            &[type="text"] {
+                height: auto;
+                width: 80%;
+            }
+        }
+        span {
+            user-select: none;
+            -moz-user-select: none;
+            -webkit-user-select: none;
+            -ms-user-select: none;
+        }
+        thead {
+            td {
+                padding: 0px 5px;
+                background: @poll-th-bg;
+                border-radius: 20px 20px 0 0;
+                //text-align: center;
+                &:nth-of-type(2) {
+                    background: @poll-th-user-bg;
+                    .cp-app-poll-table-lock {
+                        cursor: default;
+                    }
+                }
+                input {
+                    &[type="text"] {
+                        width: 100%;
+                        box-sizing: border-box;
+                        padding: 1px 5px;
+                        &[disabled] {
+                            color: @poll-fg;
+                            border: 1px solid transparent;
+                        }
+                    }
+                }
+            }
+        }
+
+        tbody {
+            td:not(.cp-app-poll-table-editing) {
+                .cp-app-poll-table-text-cell {
+                    background: @poll-td-bg;
+                }
+            }
+            .cp-app-poll-table-text-cell {
+                //border-radius: 20px 0 0 20px;
+                input[type="text"] {
+                    width: ~"calc(100% - 50px)";
+                    padding: 0 0.5em;
+                }
+                .cp-app-poll-table-edit {
+                    float:right;
+                    margin: 0 10px 0 0;
+                }
+                .cp-app-poll-table-remove {
+                    float: left;
+                    margin: 0 0 0 10px;
+                }
+            }
+            tr:not(:first-child) {
+                td:not(:first-child) {
+                    label {
+                        border-top: 1px solid @poll-border-color;
+                    }
+                }
+            }
+        }
+        .cp-app-poll-table-edit {
+            color: @poll-cover-color;
+            cursor: pointer;
+            float: left;
+            margin-left: 10px;
+        }
+
+        .cp-app-poll-table-lock {
+            margin-left: ~"calc(50% - 0.5em)";
+            cursor: pointer;
+            width: 1em;
+            text-align: center;
+        }
+        .cp-app-poll-table-remove {
+            float: right;
+            margin-right: 10px;
+        }
+
+        thead {
+            tr {
+                th {
+                    input[type="text"][disabled] {
+                        background-color: transparent;
+                        color: @poll-fore;
+                        font-weight: bold;
+                    }
+                    .cp-app-poll-table-remove {
+                        cursor: pointer;
+                        font-size: 20px;
+                    }
+                }
+            }
+        }
+        tbody {
+            tr {
+                td {
+
+                }
+            }
+        }
+        tfoot {
+            tr {
+                border: none;
+                td {
+                    border: none;
+                    text-align: center;
+                    .save {
+                        padding: 15px;
+                        border-top-left-radius: 5px;
+                        border-top-right-radius: 5px;
+                    }
+                }
+            }
+        }
+    }
+
+    #adduser,
+    #addoption {
+        color: @colortheme_cp-green;
+        border: 1px solid @colortheme_cp-green;
+        padding: 15px;
+        cursor: pointer;
+    }
+
+    #adduser { .top-left; }
+    #addoption { .bottom-left; }
+}
+
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+

www/poll/index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CryptPad</title>
+    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="referrer" content="no-referrer" />
+    <script async data-bootload="main.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
+    <style>
+        html, body {
+            margin: 0px;
+            padding: 0px;
+        }
+        #sbox-iframe {
+            position:fixed;
+            top:0px;
+            left:0px;
+            bottom:0px;
+            right:0px;
+            width:100%;
+            height:100%;
+            border:none;
+            margin:0;
+            padding:0;
+            overflow:hidden;
+        }
+        #sbox-filePicker-iframe {
+            position: fixed;
+            top:0; left:0;
+            bottom:0; right:0;
+            width:100%;
+            height: 100%;
+            border: 0;
+        }
+    </style>
+</head>
+<body>
+<iframe id="sbox-iframe">

www/poll/inner.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
+    <script async data-bootload="/poll/inner.js" data-main="/common/sframe-boot.js?ver=1.6" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
+    <style>
+        .loading-hidden { display: none; }
+        #editor1 { display: none; }
+        html, body {
+            width: 100%;
+            height: 100%;
+            margin: 0px;
+            padding: 0px;
+            border: 0px;
+        }
+    </style>
+</head>
+<body class="cp-app-poll">
+

www/poll/inner.js

@@ -0,0 +1,972 @@
+define([
+    'jquery',
+    '/bower_components/textpatcher/TextPatcher.js',
+    '/common/toolbar3.js',
+    'json.sortify',
+    '/common/cryptpad-common.js',
+    '/common/common-util.js',
+    '/common/cryptget.js',
+    '/bower_components/nthen/index.js',
+    '/common/sframe-common.js',
+    '/common/common-realtime.js',
+    '/customize/application_config.js',
+    '/common/sframe-chainpad-listmap.js',
+    '/customize/pages.js',
+    '/poll/render.js',
+
+    '/bower_components/file-saver/FileSaver.min.js',
+
+    'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
+    'less!/bower_components/components-font-awesome/css/font-awesome.min.css',
+    'less!/customize/src/less2/main.less',
+], function (
+    $,
+    TextPatcher,
+    Toolbar,
+    JSONSortify,
+    Cryptpad,
+    Util,
+    Cryptget,
+    nThen,
+    SFCommon,
+    CommonRealtime,
+    AppConfig,
+    Listmap,
+    Pages,
+    Renderer)
+{
+    var Messages = Cryptpad.Messages;
+
+    var Render = Renderer(Cryptpad);
+    var APP = window.APP = {
+        Render: Render,
+        unlocked: {
+            row: [],
+            col: []
+        },
+        readOnly: false,
+        Cryptpad: Cryptpad,
+        mobile: function () { return $('body').width() <= 600; } // Menu and content area are not inline-block anymore for mobiles
+    };
+
+    var debug = $.noop; //console.log;
+
+    var stringify = function (obj) {
+        return JSONSortify(obj);
+    };
+
+    var onConnectError = function () {
+        Cryptpad.errorLoadingScreen(Messages.websocketError);
+    };
+
+    var HIDE_INTRODUCTION_TEXT = "hide-text";
+
+    var metadataMgr;
+    var Title;
+    var defaultName;
+    var common;
+    var readOnly;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    var sortColumns = function (order, firstcol) {
+        var colsOrder = order.slice();
+        colsOrder.sort(function (a, b) {
+            return (a === firstcol) ? -1 :
+                        ((b === firstcol) ? 1 : 0);
+        });
+        return colsOrder;
+    };
+
+    var isOwnColumnCommitted = function () {
+        return APP.proxy && APP.proxy.content.colsOrder.indexOf(APP.userid) !== -1;
+    };
+
+    var mergeUncommitted = function (proxy, uncommitted, commit) {
+        var newObj;
+        if (commit) {
+            newObj = proxy;
+        } else {
+            newObj = $.extend(true, {}, proxy);
+        }
+        // We have uncommitted data only if the user's column is not in the proxy
+        // If it is already is the proxy, nothing to merge
+        /*if (isOwnColumnCommitted()) {
+            return newObj;
+        }*/
+
+        // Merge uncommitted into the proxy
+        uncommitted.content.colsOrder = uncommitted.content.colsOrder || [];
+        uncommitted.content.colsOrder.forEach(function (x) {
+            if (newObj.content.colsOrder.indexOf(x) !== -1) { return; }
+            newObj.content.colsOrder.push(x);
+        });
+        for (var k in uncommitted.content.cols) {
+            if (!newObj.content.cols[k]) {
+                newObj.content.cols[k] = uncommitted.content.cols[k];
+            }
+        }
+        for (var l in uncommitted.content.cells) {
+            if (!newObj.content.cells[l]) {
+                newObj.content.cells[l] = uncommitted.content.cells[l];
+            }
+        }
+        // Uncommitted rows
+        uncommitted.content.rowsOrder = uncommitted.content.rowsOrder || [];
+        uncommitted.content.rowsOrder.forEach(function (x) {
+            if (newObj.content.rowsOrder.indexOf(x) !== -1) { return; }
+            newObj.content.rowsOrder.push(x);
+        });
+        for (var k in uncommitted.content.rows) {
+            if (!newObj.content.rows[k]) {
+                newObj.content.rows[k] = uncommitted.content.rows[k];
+            }
+        }
+
+        if (commit) {
+            APP.uncommited = {};
+            prepareProxy(APP.uncommitted, copyObject(Render.Example));
+        }
+        return newObj;
+    };
+
+    var styleUncommittedColumn = function () {
+        var id = APP.userid;
+
+        // TODO: move?
+        // Enable input for the userid column
+        $('input[disabled="disabled"][data-rt-id^="' + id + '"]').removeAttr('disabled');
+        $('input[type="number"][data-rt-id^="' + id + '"]').addClass('enabled');
+        $('.cp-app-poll-table-lock[data-rt-id="' + id + '"]').addClass('fa-unlock').removeClass('fa-lock').attr('title', Messages.poll_unlocked);
+
+        APP.uncommitted.content.colsOrder.forEach(function(id) {
+            // Enable the checkboxes for the uncommitted column
+            $('input[disabled="disabled"][data-rt-id^="' + id + '"]').removeAttr('disabled');
+            $('input[type="number"][data-rt-id^="' + id + '"]').addClass('enabled');
+            $('.cp-app-poll-table-lock[data-rt-id="' + id + '"]').addClass('fa-unlock').removeClass('fa-lock').attr('title', Messages.poll_unlocked);
+
+            $('[data-rt-id^="' + id + '"]').closest('td').addClass("cp-app-poll-table-uncommitted");
+            $('td.cp-app-poll-table-uncommitted .cover').addClass("cp-app-poll-table-uncommitted");
+        });
+        APP.uncommitted.content.rowsOrder.forEach(function(id) {
+            // Enable the checkboxes for the uncommitted column
+            $('input[disabled="disabled"][data-rt-id="' + id + '"]').removeAttr('disabled');
+
+            $('[data-rt-id="' + id + '"]').closest('tr').addClass("cp-app-poll-table-uncommitted");
+            //$('td.uncommitted .cover').addClass("uncommitted");
+            //$('.uncommitted input[type="text"]').attr("placeholder", Messages.poll_userPlaceholder);
+        });
+    };
+
+    var unlockElements = function () {
+        APP.unlocked.row.forEach(function (id) {
+            var $input = $('input[type="text"][disabled="disabled"][data-rt-id="' + id + '"]').removeAttr('disabled');
+            $input.parent().parent().addClass('cp-app-poll-table-editing');
+            $('span.cp-app-poll-table-edit[data-rt-id="' + id + '"]').css('visibility', 'hidden');
+        });
+        APP.unlocked.col.forEach(function (id) {
+            var $input = $('input[disabled="disabled"][data-rt-id^="' + id + '"]')
+                .removeAttr('disabled');
+            $input.parent().addClass('cp-app-poll-table-editing');
+            $('input[type="number"][data-rt-id^="' + id + '"]').addClass('enabled');
+            $('.cp-app-poll-table-lock[data-rt-id="' + id + '"]').addClass('fa-unlock')
+                .removeClass('fa-lock').attr('title', Messages.poll_unlocked);
+        });
+    };
+
+    var updateTableButtons = function () {
+        var $createOption = APP.$table.find('tfoot tr td:first-child');
+        $createOption.append(APP.$createRow);
+
+        $('#cp-app-poll-create-user, #cp-app-poll-create-option').css('display', 'inline-flex');
+        if (!APP.proxy ||
+            !APP.proxy.content.rowsOrder ||
+            APP.proxy.content.rowsOrder.length === 0) {
+            //$('#create-user').hide();
+        }
+        var width = $('#cp-app-poll-table').outerWidth();
+        if (width) {
+            //$('#create-user').css('left', width + 30 + 'px');
+        }
+    };
+
+    var setTablePublished = function (bool) {
+        if (bool) {
+            if (APP.$publish) { APP.$publish.hide(); }
+            if (APP.$admin) { APP.$admin.show(); }
+            $('#cp-app-poll-create-option').hide();
+            $('.cp-app-poll-table-remove[data-rt-id^="y"], .cp-app-poll-table-edit[data-rt-id^="y"]').hide();
+        } else {
+            if (APP.$publish) { APP.$publish.show(); }
+            if (APP.$admin) { APP.$admin.hide(); }
+            $('#cp-app-poll-create-option').show();
+            $('.cp-app-poll-table-remove[data-rt-id^="y"], .cp-app-poll-table-edit[data-rt-id^="y"]').show();
+        }
+    };
+
+    var updateDisplayedTable = function () {
+        styleUncommittedColumn();
+        unlockElements();
+        updateTableButtons();
+        setTablePublished(APP.proxy.published);
+
+        /*
+        APP.proxy.table.rowsOrder.forEach(function (rowId) {
+            $('[data-rt-id="' + rowId +'"]').val(APP.proxy.table.rows[rowId] || '');
+        });*/
+    };
+
+    var unlockColumn = function (id, cb) {
+        if (APP.unlocked.col.indexOf(id) === -1) {
+            APP.unlocked.col.push(id);
+        }
+        if (typeof(cb) === "function") {
+            cb();
+        }
+    };
+    var unlockRow = function (id, cb) {
+        if (APP.unlocked.row.indexOf(id) === -1) {
+            APP.unlocked.row.push(id);
+        }
+        if (typeof(cb) === "function") {
+            cb();
+        }
+    };
+    var lockColumn = function (id, cb) {
+        var idx = APP.unlocked.col.indexOf(id);
+        if (idx !== -1) {
+            APP.unlocked.col.splice(idx, 1);
+        }
+        if (typeof(cb) === "function") {
+            cb();
+        }
+    };
+    var lockRow = function (id, cb) {
+        var idx = APP.unlocked.row.indexOf(id);
+        if (idx !== -1) {
+            APP.unlocked.row.splice(idx, 1);
+        }
+        if (typeof(cb) === "function") {
+            cb();
+        }
+    };
+
+    /*  Any time the realtime object changes, call this function */
+    var change = function (o, n, path, throttle, cb) {
+        if (path && !Cryptpad.isArray(path)) {
+            return;
+        }
+        if (path && path.join) {
+            debug("Change from [%s] to [%s] at [%s]",
+                o, n, path.join(', '));
+        }
+
+        var table = APP.$table[0];
+
+        var displayedObj = mergeUncommitted(APP.proxy, APP.uncommitted);
+
+        var colsOrder = sortColumns(displayedObj.content.colsOrder, APP.userid);
+        var conf = {
+            cols: colsOrder,
+            readOnly: readOnly
+        };
+
+        //Render.updateTable(table, displayedObj, conf);
+
+        /*  FIXME browser autocomplete fills in new fields sometimes
+            calling updateTable twice removes the autofilled in values
+            setting autocomplete="off" is not reliable
+
+            https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
+        */
+        common.notify();
+
+        var getFocus = function () {
+            var active = document.activeElement;
+            if (!active) { return; }
+            return {
+                el: active,
+                start: active.selectionStart,
+                end: active.selectionEnd
+            };
+        };
+        var setFocus = function (obj) {
+            if (obj.el) { obj.el.focus(); }
+            else { return; }
+            if (obj.start) { obj.el.selectionStart = obj.start; }
+            if (obj.end) { obj.el.selectionEnd = obj.end; }
+        };
+
+        var updateTable = function () {
+            var displayedObj2 = mergeUncommitted(APP.proxy, APP.uncommitted);
+            var f = getFocus();
+            Render.updateTable(table, displayedObj2, conf);
+            APP.proxy.content.rowsOrder.forEach(function (rowId) {
+                $('input[data-rt-id="' + rowId +'"]').val(APP.proxy.content.rows[rowId] || '');
+            });
+            updateDisplayedTable();
+            setFocus(f);
+            if (typeof(cb) === "function") {
+                cb();
+            }
+        };
+
+        if (throttle) {
+            if (APP.throttled) { window.clearTimeout(APP.throttled); }
+            updateTable();
+            APP.throttled = window.setTimeout(function () {
+                updateDisplayedTable();
+            }, throttle);
+            return;
+        }
+
+        window.setTimeout(updateTable);
+    };
+
+    var getRealtimeId = function (input) {
+        return input.getAttribute && input.getAttribute('data-rt-id');
+    };
+
+    /*  Called whenever an event is fired on an input element */
+    var handleInput = function (input) {
+        var type = input.type.toLowerCase();
+        var id = getRealtimeId(input);
+
+        debug(input);
+
+        var object = APP.proxy;
+
+        var x = Render.getCoordinates(id)[0];
+        if (type !== "row" && x === APP.userid && APP.proxy.content.colsOrder.indexOf(x) === -1) {
+            object = APP.uncommitted;
+        }
+
+        switch (type) {
+            case 'text':
+                debug("text[rt-id='%s'] [%s]", id, input.value);
+                Render.setValue(object, id, input.value);
+                change(null, null, null, 50);
+                break;
+            case 'number':
+                debug("checkbox[tr-id='%s'] %s", id, input.value);
+                if (APP.unlocked.col.indexOf(x) >= 0 || x === APP.userid) {
+                    var value = parseInt(input.value);
+
+                    if (isNaN(value)) {
+                        console.error("Got NaN?!");
+                        break;
+                    }
+
+                    Render.setValue(object, id, value);
+                    change();
+                } else {
+                    debug('checkbox locked');
+                }
+                break;
+            default:
+                debug("Input[type='%s']", type);
+                break;
+        }
+    };
+
+    var hideInputs = function (id) {
+        if (APP.readOnly) { return; }
+        console.log(id);
+        if (id) {
+            var type = Render.typeofId(id);
+            console.log(type);
+            if (type === 'col') { return void lockColumn(id, change); }
+            if (type === 'row') { return void lockRow(id, change); }
+            return;
+        }
+        APP.unlocked.col = Cryptpad.deduplicateString([APP.userid].concat(APP.uncommitted.content.colsOrder).slice());
+        APP.unlocked.row = APP.uncommitted.content.rowsOrder.slice();
+        change();
+    };
+
+    /*  Called whenever an event is fired on a span */
+    var handleSpan = function (span) {
+        var id = span.getAttribute('data-rt-id');
+        var type = Render.typeofId(id);
+        var isRemove = span.className && span.className.split(' ')
+            .indexOf('cp-app-poll-table-remove') !== -1;
+        var isEdit = span.className && span.className.split(' ')
+            .indexOf('cp-app-poll-table-edit') !== -1;
+        var isLock = span.className && span.className.split(' ')
+            .indexOf('cp-app-poll-table-lock') !== -1;
+        var isLocked = span.className && span.className.split(' ').indexOf('fa-lock') !== -1;
+        if (type === 'row') {
+            if (isRemove) {
+                Cryptpad.confirm(Messages.poll_removeOption, function (res) {
+                    if (!res) { return; }
+                    Render.removeRow(APP.proxy, id, function () {
+                        change();
+                    });
+                });
+            } else if (isEdit) {
+                //hideInputs(span);
+                unlockRow(id, function () {
+                    change(null, null, null, null, function() {
+                        $('input[data-rt-id="' + id + '"]').focus();
+                    });
+                });
+            }
+        } else if (type === 'col') {
+            if (isRemove) {
+                Cryptpad.confirm(Messages.poll_removeUser, function (res) {
+                    if (!res) { return; }
+                    Render.removeColumn(APP.proxy, id, function () {
+                        change();
+                    });
+                });
+            } else if (isLock && isLocked) {
+                //hideInputs(span);
+                unlockColumn(id, function () {
+                    change(null, null, null, null, function() {
+                        $('input[data-rt-id="' + id + '"]').focus();
+                    });
+                });
+            } else if (isLock) {
+                lockColumn(id, function () {
+                    change(null, null, null, null, function() {
+                    });
+                });
+            }
+        } else if (type === 'cell') {
+            change();
+        } else {
+            debug("UNHANDLED");
+        }
+    };
+
+    var handleClick = function (e, isKeyup) {
+        if (APP.readOnly) { return; }
+
+        e.stopPropagation();
+
+        if (!APP.ready) { return; }
+        if (!isKeyup && e.which !== 1) { return; } // only allow left clicks
+
+        var target = e && e.target;
+
+        if (!target) { return void debug("NO TARGET"); }
+
+        var nodeName = target && target.nodeName;
+        //var shouldLock = $(target).hasClass('fa-unlock');
+
+        if ((!$(target).parents('#cp-app-poll-table tbody').length &&
+            $(target).hasClass('cp-app-poll-table-lock'))) {
+            //hideInputs(e);
+        }
+
+        switch (nodeName) {
+            case 'INPUT':
+                if (isKeyup && (e.keyCode === 13 || e.keyCode === 27)) {
+                    var id = target.getAttribute('data-rt-id');
+                    hideInputs(id);
+                    break;
+                }
+                if ($(target).is('input[type="number"]')) { console.error("number input focused?"); break; }
+
+                handleInput(target);
+                break;
+            case 'LABEL':
+                var input = $('input[type="number"][id=' + $(target).attr('for') + ']');
+                var value = parseInt(input.val());
+
+                input.val((value + 1) % 4);
+
+                handleInput(input[0]);
+                break;
+            case 'SPAN':
+                /*if (shouldLock) {
+                    break;
+                }*/
+                handleSpan(target);
+                break;
+            case undefined:
+                //console.error(new Error("C'est pas possible!"));
+                break;
+            default:
+                debug(target, nodeName);
+                break;
+        }
+    };
+
+    /*
+        Make sure that the realtime data structure has all the required fields
+    */
+    var prepareProxy = function (proxy, schema) {
+        if (proxy && proxy.version === 1) { return; }
+        debug("Configuring proxy schema...");
+
+        proxy.metadata = proxy.metadata || schema.metadata;
+        Object.keys(schema.metadata).forEach(function (k) {
+            if (!proxy.metadata[k]) { proxy.metadata[k] = schema.metadata[k]; }
+        });
+
+        proxy.content = proxy.content || schema.content;
+        Object.keys(schema.content).forEach(function (k) {
+            if (!proxy.content[k]) { proxy.content[k] = schema.content[k]; }
+        });
+
+        proxy.version = 1;
+        proxy.type = 'poll';
+    };
+
+    /*
+
+    */
+    var publish = APP.publish = function (bool) {
+        if (!APP.ready) { return; }
+        if (APP.proxy.published !== bool) {
+            APP.proxy.published = bool;
+        }
+        setTablePublished(bool);
+        ['textarea'].forEach(function (sel) {
+            $(sel).attr('disabled', bool);
+        });
+    };
+
+    var showHelp = function(help) {
+        if (typeof help === 'undefined') {
+            help = !$('#cp-app-poll-help').is(':visible');
+        }
+
+        var msg = (help ? Messages.poll_hide_help_button : Messages.poll_show_help_button);
+
+        $('#cp-app-poll-help').toggle(help);
+        $('#cp-app-poll-action-help').text(msg);
+    };
+
+    var copyObject = function (obj) {
+        return JSON.parse(JSON.stringify(obj));
+    };
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    var setEditable = function (editable) {
+        APP.readOnly = !editable;
+
+        if (editable === false) {
+            // disable all the things
+            $('.icp-app-poll-realtime input, .cp-app-poll-realtime button, .cp-app-poll-upper button, .cp-app-poll-realtime textarea').attr('disabled', true);
+            $('span.cp-app-poll-table-edit, span.cp-app-poll-table-remove').hide();
+            $('span.cp-app-poll-table-lock').addClass('fa-lock').removeClass('fa-unlock')
+                .attr('title', Messages.poll_locked)
+                .css({'cursor': 'default'});
+        } else {
+            // enable
+            $('span.cp-app-poll-table-edit, span.cp-app-poll-table-remove').show();
+            $('span.cp-app-poll-table-lock').css({'cursor': ''});
+            $('.cp-app-poll-realtime button, .cp-app-poll-upper button, .cp-app-poll-realtime textarea').attr('disabled', false);
+            unlockElements();
+        }
+    };
+
+    var updateDescription = function (n) {
+        var o = APP.$description.val();
+        var op = TextPatcher.diff(o, n);
+        var el = APP.$description[0];
+
+        var selects = ['selectionStart', 'selectionEnd'].map(function (attr) {
+            return TextPatcher.transformCursor(el[attr], op);
+        });
+        APP.$description.val(n);
+        if (op) {
+            el.selectionStart = selects[0];
+            el.selectionEnd = selects[1];
+        }
+        common.notify();
+    };
+    var updateLocalDescription = function (n) {
+        var md = copyObject(metadataMgr.getMetadata());
+        md.description = n;
+        metadataMgr.updateMetadata(md);
+        APP.proxy.metadata.description = n;
+    };
+
+    var onReady = function (info, userid, readOnly) {
+        var proxy = APP.proxy;
+
+        var isNew = false;
+        var userDoc = JSON.stringify(proxy);
+        if (userDoc === "" || userDoc === "{}") { isNew = true; }
+
+        if (!isNew) {
+            if (proxy.info) {
+                // Migration??
+                proxy.metadata = proxy.info;
+                delete proxy.info;
+            }
+            if (proxy.table) {
+                // Migration??
+                proxy.content = proxy.table;
+                delete proxy.table;
+            }
+            if (proxy && proxy.metadata) {
+                metadataMgr.updateMetadata(proxy.metadata);
+            }
+            if (typeof (proxy) !== 'object' || Array.isArray(proxy) ||
+                (proxy.metadata && typeof(proxy.metadata.type) !== 'undefined' &&
+                 proxy.metadata.type !== 'poll')) {
+                var errorText = Messages.typeError;
+                Cryptpad.errorLoadingScreen(errorText);
+                throw new Error(errorText);
+            }
+        } else {
+            //Title.updateTitle(Title.defaultTitle);
+        }
+
+        if (typeof(proxy.type) === 'undefined') {
+            proxy.type = 'poll';
+        }
+
+        // Add uncommitted and unlock uncommited & own column
+        var uncommitted = APP.uncommitted = {};
+        prepareProxy(proxy, copyObject(Render.Example));
+        prepareProxy(uncommitted, copyObject(Render.Example));
+        if (!readOnly) {
+            var coluid = Render.coluid();
+            if (proxy.content.colsOrder.indexOf(userid) === -1 &&
+                uncommitted.content.colsOrder.indexOf(userid) === -1) {
+                // The user doesn't have his own column: the new one should be his
+                coluid = userid;
+            } else {
+                // The user already has his own column: unlock it
+                unlockColumn(userid);
+            }
+            uncommitted.content.colsOrder.push(coluid);
+            unlockColumn(coluid);
+
+            var rowuid = Render.rowuid();
+            uncommitted.content.rowsOrder.push(rowuid);
+            unlockRow(coluid);
+        }
+
+        var displayedObj = mergeUncommitted(proxy, uncommitted, false);
+
+        var colsOrder = sortColumns(displayedObj.content.colsOrder, userid);
+
+        var $table = APP.$table = $(Render.asHTML(displayedObj, null, colsOrder, readOnly));
+
+        var getUncommitted = function (type) {
+            var ret = {};
+            var uncommitted = APP.uncommitted.content;
+            if (type === 'col') {
+                ret.colsOrder = uncommitted.colsOrder.slice();
+                ret.cols = copyObject(uncommitted.cols);
+                // get only the cells corresponding to the committed rows
+                var toRemove = Object.keys(uncommitted.cells).filter(function (coor) {
+                    var c = Render.getCoordinates(coor);
+                    return APP.proxy.content.rowsOrder.indexOf(c[1]) !== -1;
+                });
+                ret.cells = {};
+                toRemove.forEach(function (k) {
+                    ret.cells[k] = uncommitted.cells[k];
+                    delete uncommitted.cells[k];
+                });
+                uncommitted.colsOrder = [Render.coluid()];
+                uncommitted.cols = {};
+                return ret;
+            }
+
+            // Row
+            ret.rowsOrder = uncommitted.rowsOrder.slice();
+            ret.rows = copyObject(uncommitted.rows);
+            // get only the cells corresponding to the committed rows
+            var toRemove = Object.keys(uncommitted.cells).filter(function (coor) {
+                var c = Render.getCoordinates(coor);
+                return APP.proxy.content.colsOrder.indexOf(c[1]) !== -1;
+            });
+            ret.cells = {};
+            toRemove.forEach(function (k) {
+                ret.cells[k] = uncommitted.cells[k];
+                delete uncommitted.cells[k];
+            });
+            uncommitted.rowsOrder = [Render.rowuid()];
+            uncommitted.rows = {};
+            return ret;
+        };
+        APP.$createCol = $('#cp-app-poll-create-user').click(function () {
+            var uncommittedCopy = { content: getUncommitted('col') };
+            var id = uncommittedCopy.content.colsOrder[0];
+            mergeUncommitted(proxy, uncommittedCopy, true);
+            change(null, null, null, null, function() {
+                handleSpan($('.cp-app-poll-table-lock[data-rt-id="' + id + '"]')[0]);
+            });
+        });
+        APP.$createRow = $('#cp-app-poll-create-option').click(function () {
+            var uncommittedCopy = { content: getUncommitted('row') };
+            var id = uncommittedCopy.content.rowsOrder[0];
+            mergeUncommitted(proxy, uncommittedCopy, true);
+            change(null, null, null, null, function() {
+                handleSpan($('.cp-app-poll-table-edit[data-rt-id="' + id + '"]')[0]);
+            });
+        });
+
+        // Commit button
+        APP.$commit = $('#commit').click(function () {
+            var uncommittedCopy = copyObject(APP.uncommitted);
+            APP.uncommitted = {};
+            prepareProxy(APP.uncommitted, copyObject(Render.Example));
+            mergeUncommitted(proxy, uncommittedCopy, true);
+            APP.$commit.hide();
+            change();
+        }).remove(); // TODO
+
+        // #publish button is removed in readonly
+        APP.$publish = $('#cp-app-poll-action-publish')
+            .click(function () {
+                publish(true);
+            });
+
+        APP.$admin = $('#cp-app-poll-action-admin')
+            .click(function () {
+                publish(false);
+            });
+
+        APP.$help = $('#cp-app-poll-action-help')
+            .click(function () {
+                showHelp();
+            });
+
+        if (!readOnly) {
+            common.setPadAttribute('userid', userid, function (e) {
+                if (e) { console.error(e); }
+            });
+        }
+
+        // Description
+        var resize = function () {
+            var lineCount = APP.$description.val().split('\n').length;
+            APP.$description.css('height', lineCount + 'rem');
+        };
+        APP.$description.on('change keyup', function () {
+            var val = APP.$description.val();
+            updateLocalDescription(val);
+            resize();
+        });
+        resize();
+
+        $('#cp-app-poll-table-scroll').html('').prepend($table);
+        updateDisplayedTable();
+
+        $table
+            .click(handleClick)
+            .on('keyup', function (e) { handleClick(e, true); });
+
+        $(window).click(function(e) {
+            if (e.which !== 1) { return; }
+            hideInputs();
+        });
+
+        proxy
+            .on('change', ['metadata'], function (o, n, p) {
+                metadataMgr.updateMetadata(proxy.metadata);
+            })
+            .on('change', ['content'], change)
+            .on('remove', [], change);
+
+        // If the user's column is not committed, add his username
+        var $userInput = $('.cp-app-poll-table-uncommitted > input[data-rt-id^='+ APP.userid +']');
+        if ($userInput.val() === '') {
+            $userInput.val(metadataMgr.getUserData().name);
+        }
+
+        APP.ready = true;
+        if (!proxy.published) {
+            publish(false);
+        } else {
+            publish(true);
+        }
+
+        Cryptpad.removeLoadingScreen();
+    };
+
+    var onDisconnect = function () {
+        setEditable(false);
+        // TODO toolar.failed?
+        APP.toolbar.failed();
+        Cryptpad.alert(Messages.common_connectionLost, undefined, true);
+    };
+
+    var onReconnect = function (info) {
+        setEditable(true);
+        // TODO: reconnecting??
+        APP.toolbar.reconnecting(info.myId);
+        Cryptpad.findOKButton().click();
+    };
+
+    var onCreate = function (info) {
+        APP.myID = info.myID;
+
+        if (APP.realtime !== info.realtime) {
+            APP.realtime = info.realtime;
+            APP.patchText = TextPatcher.create({
+                realtime: info.realtime,
+                logging: true,
+            });
+        }
+
+        metadataMgr = common.getMetadataMgr();
+
+        Title = common.createTitle();
+
+        var configTb = {
+            displayed: ['title', 'useradmin', 'spinner', 'share', 'userlist', 'newpad', 'limit'],
+            title: Title.getTitleConfig(),
+            metadataMgr: metadataMgr,
+            readOnly: readOnly,
+            realtime: info.realtime,
+            common: Cryptpad,
+            sfCommon: common,
+            $container: APP.$bar,
+            $contentContainer: APP.$content
+        };
+        var toolbar = APP.toolbar = Toolbar.create(configTb);
+
+        Title.setToolbar(APP.toolbar);
+
+        var $rightside = APP.toolbar.$rightside;
+
+        metadataMgr.onChange(function () {
+            var md = copyObject(metadataMgr.getMetadata());
+            if (md.description) {
+                updateDescription(md.description);
+            }
+            APP.proxy.metadata = md;
+        });
+        return; // TODO
+
+
+
+
+        /* add a forget button */
+        var forgetCb = function (err) {
+            if (err) { return; }
+            setEditable(false);
+        };
+        var $forgetPad = Cryptpad.createButton('forget', true, {}, forgetCb);
+        $rightside.append($forgetPad);
+
+        // set the hash
+        if (!readOnly) { Cryptpad.replaceHash(editHash); }
+
+        /* save as template */
+        if (!Cryptpad.isTemplate(window.location.href)) {
+            var templateObj = {
+                rt: info.realtime,
+                Crypt: Cryptget,
+                getTitle: function () { return document.title; }
+            };
+            var $templateButton = Cryptpad.createButton('template', true, templateObj);
+            $rightside.append($templateButton);
+        }
+    };
+
+
+    var main = function () {
+
+        nThen(function (waitFor) {
+            $(waitFor(function () {
+                Cryptpad.addLoadingScreen();
+                var $div = $('<div>').append(Pages['/poll/']());
+                $('body').append($div.html());
+            }));
+            SFCommon.create(waitFor(function (c) { APP.common = common = c; }));
+        }).nThen(function (waitFor) {
+            var privReady = Util.once(waitFor());
+            var metadataMgr = common.getMetadataMgr();
+            if (JSON.stringify(metadataMgr.getPrivateData()) !== '{}') {
+                privReady();
+                return;
+            }
+            metadataMgr.onChange(function () {
+                if (typeof(metadataMgr.getPrivateData().readOnly) === 'boolean') {
+                    readOnly = metadataMgr.getPrivateData().readOnly;
+                    privReady();
+                }
+            });
+        }).nThen(function (/* waitFor */) {
+            APP.loggedIn = common.isLoggedIn();
+            APP.SFCommon = common;
+
+            APP.$body = $('body');
+            APP.$bar = $('#cp-toolbar');
+            APP.$content = $('#cp-app-poll-content');
+            APP.$description = $('#cp-app-poll-description')
+                .attr('placeholder', Messages.poll_descriptionHint || 'description');
+
+            var listmapConfig = {
+                data: {},
+                common: common,
+                logLevel: 1
+            };
+
+            if (readOnly) {
+                $('#cp-app-poll-create-user, #cp-app-poll-create-option, #cp-app-poll-action-publish, #cp-app-poll-action-admin').remove();
+            }
+
+            var metadataMgr;
+            var rt = APP.rt = Listmap.create(listmapConfig);
+            APP.proxy = rt.proxy;
+
+            rt.proxy.on('create', onCreate)
+                 .on('ready', function (info) {
+                    common.getPadAttribute('userid', function (e, userid) {
+                        if (e) { console.error(e); }
+                        if (!userid) { userid = Render.coluid(); }
+                        APP.userid = userid;
+                        onReady(info, userid, readOnly);
+                    });
+                 })
+                 .on('disconnect', onDisconnect)
+                 .on('reconnect', onReconnect);
+
+            common.getAttribute(['poll', HIDE_INTRODUCTION_TEXT], function (e, value) {
+                if (e) { console.error(e); }
+                if (!value) {
+                    common.setAttribute(['poll', HIDE_INTRODUCTION_TEXT], "1", function (e) {
+                        if (e) { console.error(e); }
+                    });
+                    showHelp(true);
+                } else {
+                    showHelp(false);
+                }
+            });
+
+            /*Cryptpad.onError(function (info) {
+                if (info && info.type === "store") {
+                    onConnectError();
+                }
+            });*/
+            //Cryptpad.onLogout(function () { setEditable(false); });
+        });
+    };
+    main();
+});

www/poll/main.js

@@ -0,0 +1,41 @@
+// Load #1, load as little as possible because we are in a race to get the loading screen up.
+define([
+    '/bower_components/nthen/index.js',
+    '/api/config',
+    'jquery',
+    '/common/requireconfig.js',
+    '/common/sframe-common-outer.js',
+], function (nThen, ApiConfig, $, RequireConfig, SFCommonO, Cryptpad, Netflux) {
+    var requireConfig = RequireConfig();
+
+    // Loaded in load #2
+    nThen(function (waitFor) {
+        $(waitFor());
+    }).nThen(function (waitFor) {
+        var req = {
+            cfg: requireConfig,
+            req: [ '/common/loading.js' ],
+            pfx: window.location.origin
+        };
+        window.rc = requireConfig;
+        window.apiconf = ApiConfig;
+        $('#sbox-iframe').attr('src',
+            ApiConfig.httpSafeOrigin + '/poll/inner.html?' + requireConfig.urlArgs +
+                '#' + encodeURIComponent(JSON.stringify(req)));
+
+        // This is a cheap trick to avoid loading sframe-channel in parallel with the
+        // loading screen setup.
+        var done = waitFor();
+        var onMsg = function (msg) {
+            var data = JSON.parse(msg.data);
+            if (data.q !== 'READY') { return; }
+            window.removeEventListener('message', onMsg);
+            var _done = done;
+            done = function () { };
+            _done();
+        };
+        window.addEventListener('message', onMsg);
+    }).nThen(function (/*waitFor*/) {
+        SFCommonO.start();
+    });
+});

www/poll/render.js

@@ -0,0 +1,453 @@
+define([
+    //'/common/cryptpad-common.js',
+    '/bower_components/hyperjson/hyperjson.js',
+    '/bower_components/textpatcher/TextPatcher.js',
+    '/bower_components/diff-dom/diffDOM.js',
+], function (Hyperjson, TextPatcher) {
+    var DiffDOM = window.diffDOM;
+
+    var Example = {
+        metadata: {
+            title: '',
+            description: '',
+            userData: {}
+        },
+        content: {
+/*  TODO
+
+deprecate the practice of storing cells, cols, and rows separately.
+
+Instead, keep everything in one map, and iterate over columns and rows
+by maintaining indexes in rowsOrder and colsOrder
+
+*/
+            cells: {},
+            cols: {},
+            colsOrder: [],
+            rows: {},
+            rowsOrder: []
+        }
+    };
+
+var Renderer = function (Cryptpad) {
+
+    var Render = {
+        Example: Example
+    };
+
+    var Uid = Render.Uid = function (prefix, f) {
+        f = f || function () {
+            return Number(Math.random() * Number.MAX_SAFE_INTEGER)
+                .toString(32).replace(/\./g, '');
+        };
+        return function () { return prefix + '-' + f(); };
+    };
+
+    var coluid = Render.coluid = Uid('x');
+    var rowuid = Render.rowuid = Uid('y');
+
+    var isRow = Render.isRow = function (id) { return /^y\-[^_]*$/.test(id); };
+    var isColumn = Render.isColumn = function (id) { return /^x\-[^_]*$/.test(id); };
+    var isCell = Render.isCell = function (id) { return /^x\-[^_]*_y\-.*$/.test(id); };
+
+    var typeofId = Render.typeofId = function (id) {
+        if (isRow(id)) { return 'row'; }
+        if (isColumn(id)) { return 'col'; }
+        if (isCell(id)) { return 'cell'; }
+        return null;
+    };
+
+    Render.getCoordinates = function (id) {
+        return id.split('_');
+    };
+
+    var getColumnValue = Render.getColumnValue = function (obj, colId) {
+        return Cryptpad.find(obj, ['content', 'cols'].concat([colId]));
+    };
+
+    var getRowValue = Render.getRowValue = function (obj, rowId) {
+        return Cryptpad.find(obj, ['content', 'rows'].concat([rowId]));
+    };
+
+    var getCellValue = Render.getCellValue = function (obj, cellId) {
+        var value = Cryptpad.find(obj, ['content', 'cells'].concat([cellId]));
+        if (typeof value === 'boolean') {
+            return (value === true ? 1 : 0);
+        } else {
+            return value;
+        }
+    };
+
+    var setRowValue = Render.setRowValue = function (obj, rowId, value) {
+        var parent = Cryptpad.find(obj, ['content', 'rows']);
+        if (typeof(parent) === 'object') { return (parent[rowId] = value); }
+        return null;
+    };
+
+    var setColumnValue = Render.setColumnValue = function (obj, colId, value) {
+        var parent = Cryptpad.find(obj, ['content', 'cols']);
+        if (typeof(parent) === 'object') { return (parent[colId] = value); }
+        return null;
+    };
+
+    var setCellValue = Render.setCellValue = function (obj, cellId, value) {
+        var parent = Cryptpad.find(obj, ['content', 'cells']);
+        if (typeof(parent) === 'object') { return (parent[cellId] = value); }
+        return null;
+    };
+
+    Render.createColumn = function (obj, cb, id, value) {
+        var order = Cryptpad.find(obj, ['content', 'colsOrder']);
+        if (!order) { throw new Error("Uninitialized realtime object!"); }
+        id = id || coluid();
+        value = value || "";
+        setColumnValue(obj, id, value);
+        order.push(id);
+        if (typeof(cb) === 'function') { cb(void 0, id); }
+    };
+
+    Render.removeColumn = function (obj, id, cb) {
+        var order = Cryptpad.find(obj, ['content', 'colsOrder']);
+        var parent = Cryptpad.find(obj, ['content', 'cols']);
+
+        if (!(order && parent)) { throw new Error("Uninitialized realtime object!"); }
+
+        var idx = order.indexOf(id);
+        if (idx === -1) {
+            return void console
+                .error(new Error("Attempted to remove id which does not exist"));
+        }
+
+        Object.keys(obj.content.cells).forEach(function (key) {
+            if (key.indexOf(id) === 0) {
+                delete obj.content.cells[key];
+            }
+        });
+
+        order.splice(idx, 1);
+        if (parent[id]) { delete parent[id]; }
+        if (typeof(cb) === 'function') {
+            cb();
+        }
+    };
+
+    Render.createRow = function (obj, cb, id, value) {
+        var order = Cryptpad.find(obj, ['content', 'rowsOrder']);
+        if (!order) { throw new Error("Uninitialized realtime object!"); }
+        id = id || rowuid();
+        value = value || "";
+        setRowValue(obj, id, value);
+        order.push(id);
+        if (typeof(cb) === 'function') { cb(void 0, id); }
+    };
+
+    Render.removeRow = function (obj, id, cb) {
+        var order = Cryptpad.find(obj, ['content', 'rowsOrder']);
+        var parent = Cryptpad.find(obj, ['content', 'rows']);
+
+        if (!(order && parent)) { throw new Error("Uninitialized realtime object!"); }
+
+        var idx = order.indexOf(id);
+        if (idx === -1) {
+            return void console
+                .error(new Error("Attempted to remove id which does not exist"));
+        }
+
+        order.splice(idx, 1);
+        if (parent[id]) { delete parent[id]; }
+        if (typeof(cb) === 'function') { cb(); }
+    };
+
+    Render.setValue = function (obj, id, value) {
+        var type = typeofId(id);
+
+        switch (type) {
+            case 'row': return setRowValue(obj, id, value);
+            case 'col': return setColumnValue(obj, id, value);
+            case 'cell': return setCellValue(obj, id, value);
+            case null: break;
+            default:
+                console.log("[%s] has type [%s]", id, type);
+            throw new Error("Unexpected type!");
+        }
+    };
+
+    Render.getValue = function (obj, id) {
+        switch (typeofId(id)) {
+            case 'row': return getRowValue(obj, id);
+            case 'col': return getColumnValue(obj, id);
+            case 'cell': return getCellValue(obj, id);
+            case null: break;
+            default: throw new Error("Unexpected type!");
+        }
+    };
+
+    var getRowIds = Render.getRowIds = function (obj) {
+        return Cryptpad.find(obj, ['content', 'rowsOrder']);
+    };
+
+    var getColIds = Render.getColIds = function (obj) {
+        return Cryptpad.find(obj, ['content', 'colsOrder']);
+    };
+
+    var getCells = Render.getCells = function (obj) {
+        return Cryptpad.find(obj, ['content', 'cells']);
+    };
+
+    /*  cellMatrix takes a proxy object, and optionally an alternate ordering
+        of row/column keys (as an array).
+
+        it returns an array of arrays containing the relevant data for each
+        cell in table we wish to construct.
+    */
+    var cellMatrix = Render.cellMatrix = function (obj, rows, cols, readOnly) {
+        if (typeof(obj) !== 'object') {
+            throw new Error('expected realtime-proxy object');
+        }
+
+        var cells = getCells(obj);
+        rows = rows || getRowIds(obj);
+        rows.push('');
+        cols = cols || getColIds(obj);
+
+        return [null].concat(rows).map(function (row, i) {
+            if (i === 0) {
+                return [null].concat(cols.map(function (col) {
+                    var result = {
+                        'data-rt-id': col,
+                        type: 'text',
+                        value: getColumnValue(obj, col) || "",
+                        placeholder: Cryptpad.Messages.poll_userPlaceholder,
+                        disabled: 'disabled'
+                    };
+                    return result;
+                }));
+            }
+            if (i === rows.length) {
+                return [null].concat(cols.map(function () {
+                    return {
+                        'class': 'cp-app-poll-table-lastrow',
+                    };
+                }));
+            }
+
+            return [{
+                'data-rt-id': row,
+                value: getRowValue(obj, row) || '',
+                type: 'text',
+                placeholder: Cryptpad.Messages.poll_optionPlaceholder,
+                disabled: 'disabled',
+            }].concat(cols.map(function (col) {
+                var id = [col, rows[i-1]].join('_');
+                var val = cells[id];
+                var result = {
+                    'data-rt-id': id,
+                    type: 'number',
+                    autocomplete: 'nope',
+                    value: '3',
+                };
+                if (readOnly) {
+                    result.disabled = "disabled";
+                }
+                if (typeof val !== 'undefined') {
+                    if (typeof val === 'boolean') { val = (val ? '1' : '0'); }
+                    result.value = val;
+                }
+                return result;
+            }));
+        });
+    };
+
+    var makeRemoveElement = Render.makeRemoveElement = function (id) {
+        return ['SPAN', {
+            'data-rt-id': id,
+            'title': Cryptpad.Messages.poll_remove,
+            class: 'cp-app-poll-table-remove',
+        }, ['✖']];
+    };
+
+    var makeEditElement = Render.makeEditElement = function (id) {
+        return ['SPAN', {
+            'data-rt-id': id,
+            'title': Cryptpad.Messages.poll_edit,
+            class: 'cp-app-poll-table-edit',
+        }, ['✐']];
+    };
+
+    var makeLockElement = Render.makeLockElement = function (id) {
+        return ['SPAN', {
+            'data-rt-id': id,
+            'title': Cryptpad.Messages.poll_locked,
+            class: 'cp-app-poll-table-lock fa fa-lock',
+        }, []];
+    };
+
+    var makeHeadingCell = Render.makeHeadingCell = function (cell, readOnly) {
+        if (!cell) { return ['TD', {}, []]; }
+        if (cell.type === 'text') {
+            var elements = [['INPUT', cell, []]];
+            if (!readOnly) {
+                elements.unshift(makeRemoveElement(cell['data-rt-id']));
+                elements.unshift(makeLockElement(cell['data-rt-id']));
+            }
+            return ['TD', {}, elements];
+        }
+        return ['TD', cell, []];
+    };
+
+    var clone = function (o) {
+        return JSON.parse(JSON.stringify(o));
+    };
+
+    var makeCheckbox = Render.makeCheckbox = function (cell) {
+        var attrs = clone(cell);
+
+        // FIXME
+        attrs.id = cell['data-rt-id'];
+
+        var labelClass = 'cp-app-poll-table-cover';
+
+        // TODO implement Yes/No/Maybe/Undecided
+        return ['TD', {class:"cp-app-poll-table-checkbox-cell"}, [
+            ['DIV', {class: 'cp-app-poll-table-checkbox-contain'}, [
+                ['INPUT', attrs, []],
+                ['SPAN', {class: labelClass}, []],
+                ['LABEL', {
+                    for: attrs.id,
+                    'data-rt-id': attrs.id,
+                }, []]
+            ]]
+        ]];
+    };
+
+    var makeBodyCell = Render.makeBodyCell = function (cell, readOnly) {
+        if (cell && cell.type === 'text') {
+            var elements = [['INPUT', cell, []]];
+            if (!readOnly) {
+                elements.push(makeRemoveElement(cell['data-rt-id']));
+                elements.push(makeEditElement(cell['data-rt-id']));
+            }
+            return ['TD', {}, [
+                    ['DIV', {class: 'cp-app-poll-table-text-cell'}, elements]
+            ]];
+        }
+
+        if (cell && cell.type === 'number') {
+            return makeCheckbox(cell);
+        }
+        return ['TD', cell, []];
+    };
+
+    var makeBodyRow = Render.makeBodyRow = function (row, readOnly) {
+        return ['TR', {}, row.map(function (cell) {
+            return makeBodyCell(cell, readOnly);
+        })];
+    };
+
+    var toHyperjson = Render.toHyperjson = function (matrix, readOnly) {
+        if (!matrix || !matrix.length) { return; }
+        var head = ['THEAD', {}, [ ['TR', {}, matrix[0].map(function (cell) {
+            return makeHeadingCell(cell, readOnly);
+        })] ]];
+        var foot = ['TFOOT', {}, matrix.slice(-1).map(function (row) {
+            return makeBodyRow(row, readOnly);
+        })];
+        var body = ['TBODY', {}, matrix.slice(1, -1).map(function (row) {
+            return makeBodyRow(row, readOnly);
+        })];
+        return ['TABLE', {id:'cp-app-poll-table'}, [head, foot, body]];
+    };
+
+    Render.asHTML = function (obj, rows, cols, readOnly) {
+        return Hyperjson.toDOM(toHyperjson(cellMatrix(obj, rows, cols, readOnly), readOnly));
+    };
+
+    var diffIsInput = Render.diffIsInput = function (info) {
+        var nodeName = Cryptpad.find(info, ['node', 'nodeName']);
+        if (nodeName !== 'INPUT') { return; }
+        return true;
+    };
+
+    var getInputType = Render.getInputType = function (info) {
+        return Cryptpad.find(info, ['node', 'type']);
+    };
+
+    var preserveCursor = Render.preserveCursor = function (info) {
+        if (['modifyValue', 'modifyAttribute'].indexOf(info.diff.action) !== -1) {
+            var element = info.node;
+
+            if (typeof(element.selectionStart) !== 'number') { return; }
+
+            var o = info.oldValue || '';
+            var n = info.newValue || '';
+            var op = TextPatcher.diff(o, n);
+
+            info.selection = ['selectionStart', 'selectionEnd'].map(function (attr) {
+                return TextPatcher.transformCursor(element[attr], op);
+            });
+        }
+    };
+
+    var recoverCursor = Render.recoverCursor = function (info) {
+        try {
+            if (info.selection && info.node) {
+                info.node.selectionStart = info.selection[0];
+                info.node.selectionEnd = info.selection[1];
+            }
+        } catch (err) {
+            // FIXME LOL empty try-catch?
+            //console.log(info.node);
+            //console.error(err);
+        }
+    };
+
+    var diffOptions = {
+        preDiffApply: function (info) {
+            if (!diffIsInput(info)) { return; }
+            switch (getInputType(info)) {
+                case 'number':
+                    //console.log('checkbox');
+                    //console.log("[preDiffApply]", info);
+                    break;
+                case 'text':
+                    preserveCursor(info);
+                    break;
+                default: break;
+            }
+        },
+        postDiffApply: function (info) {
+            if (info.selection) { recoverCursor(info); }
+            /*
+            if (!diffIsInput(info)) { return; }
+            switch (getInputType(info)) {
+                case 'checkbox':
+                    console.log("[postDiffApply]", info);
+                    break;
+                case 'text': break;
+                default: break;
+            }*/
+        }
+    };
+
+    Render.updateTable = function (table, obj, conf) {
+        var DD = new DiffDOM(diffOptions);
+
+        var rows = conf ? conf.rows : null;
+        var cols = conf ? conf.cols : null;
+        var readOnly = conf ? conf.readOnly : false;
+        var matrix = cellMatrix(obj, rows, cols, readOnly);
+
+        var hj = toHyperjson(matrix, readOnly);
+
+        if (!hj) { throw new Error("Expected Hyperjson!"); }
+
+        var table2 = Hyperjson.toDOM(hj);
+        var patch = DD.diff(table, table2);
+        DD.apply(table, patch);
+    };
+
+    return Render;
+};
+
+    return Renderer;
+});

www/whiteboard/inner.js

@@ -363,7 +363,7 @@ define([
             updateLocalPalette(palette);
             readOnly = metadataMgr.getPrivateData().readOnly;
 
-            Title = common.createTitle({}, config.onLocal);
+            Title = common.createTitle({});
 
             var configTb = {
                 displayed: ['title', 'useradmin', 'spinner', 'share', 'userlist', 'newpad', 'limit'],