Sandboxed Poll app with less2

pull/1/head
yflory 7 years ago
parent 9b2251005c
commit 66da349ee4

@ -638,48 +638,45 @@ define([
Pages['/poll/'] = Pages['/poll/index.html'] = function () {
return [
appToolbar(),
h('div#content', [
h('div#poll', [
h('div#howItWorks', [
appToolbar3(),
h('div#cp-app-poll-content', [
h('div#cp-app-poll-form', [
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('button#publish.btn.btn-success', {
h('div.cp-app-poll-upper', [
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#tableScroll'),
h('button#create-user.btn.btn-secondary', {
h('div#cp-app-poll-table-container', [
h('div#cp-app-poll-table-scroll'),
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'))
])
])
])

@ -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"; }

@ -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;

@ -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%);
}
}
}
}
}

@ -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;
}

@ -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">

@ -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">

@ -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();
});

@ -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();
});
});

@ -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;
});

@ -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'],

Loading…
Cancel
Save