Merge branch 'staging' of github.com:xwiki-labs/cryptpad into staging
yflory
7 years ago
commit
cf5ccf04f2
@ -1,821 +0,0 @@
|
|||||||
@import "/customize/src/less/variables.less";
|
|
||||||
@import "/customize/src/less/mixins.less";
|
|
||||||
@import (once) "/customize/src/less2/include/tools.less";
|
|
||||||
|
|
||||||
@tree-bg: #eee;
|
|
||||||
@tree-fg: #000;
|
|
||||||
@tree-lines-col: #888;
|
|
||||||
|
|
||||||
@drive-hover: #eee;
|
|
||||||
@drive-hover-light: lighten(@drive-hover, 20%);
|
|
||||||
|
|
||||||
@content-bg: #fff;
|
|
||||||
@content-bg-ro: darken(@content-bg, 10%);
|
|
||||||
@content-fg: @tree-fg;
|
|
||||||
@info-box-bg: #d2e1f2;
|
|
||||||
@info-box-border: #bbb;
|
|
||||||
@table-header-fg: #555;
|
|
||||||
@table-header-bg: #e8e8e8;
|
|
||||||
|
|
||||||
@toolbar-bg: #ddd;
|
|
||||||
@toolbar-fg: #555;
|
|
||||||
@toolbar-border-col: #ccc;
|
|
||||||
@toolbar-button-bg: #888;
|
|
||||||
@toolbar-button-border: #888;
|
|
||||||
@toolbar-button-bg-hover: #777;
|
|
||||||
@toolbar-button-fg: #eee;
|
|
||||||
@toolbar-path-bg: #fff;
|
|
||||||
@toolbar-path-border: #888;
|
|
||||||
|
|
||||||
@size-mobile: 600px;
|
|
||||||
|
|
||||||
/* PAGE */
|
|
||||||
|
|
||||||
html, body {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
position: relative;
|
|
||||||
font-size: @main-font-size;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column;
|
|
||||||
}
|
|
||||||
img.icon {
|
|
||||||
max-width: 20px;
|
|
||||||
max-height: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.unselectable {
|
|
||||||
-webkit-touch-callout: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-khtml-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-container {
|
|
||||||
flex: 1;
|
|
||||||
overflow: auto;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-flow: row;
|
|
||||||
@media screen and (max-width: @size-mobile) {
|
|
||||||
display: block;
|
|
||||||
#driveToolbar {
|
|
||||||
.path .element {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#tree {
|
|
||||||
resize: none;
|
|
||||||
width: 100%;
|
|
||||||
max-width: unset;
|
|
||||||
max-height: unset;
|
|
||||||
border-bottom: 1px solid @toolbar-border-col;
|
|
||||||
.category {
|
|
||||||
margin-top: 0.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.padColor { color: @toolbar-pad-bg; }
|
|
||||||
.codeColor { color: @toolbar-code-bg; }
|
|
||||||
.slideColor { color: @toolbar-slide-bg; }
|
|
||||||
.pollColor { color: @toolbar-poll-bg; }
|
|
||||||
.fileColor { color: @toolbar-file-bg; }
|
|
||||||
.whiteboardColor { color: @toolbar-whiteboard-bg; }
|
|
||||||
.driveColor { color: @toolbar-drive-bg; }
|
|
||||||
.defaultColor { color: @toolbar-default-bg; }
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contextMenu {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 500;
|
|
||||||
li {
|
|
||||||
padding: 0;
|
|
||||||
font-size: @main-font-size;
|
|
||||||
a {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.droppable {
|
|
||||||
background-color: #FE9A2E;
|
|
||||||
color: #222;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selected {
|
|
||||||
background: #666 !important;
|
|
||||||
color: #eee;
|
|
||||||
margin: -1px;
|
|
||||||
.fa-minus-square-o, .fa-plus-square-o {
|
|
||||||
color: @tree-fg;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectedTmp {
|
|
||||||
border: 1px dotted #bbb;
|
|
||||||
background: #AAA;
|
|
||||||
color: #ddd;
|
|
||||||
margin: -1px;
|
|
||||||
.fa-minus-square-o, .fa-plus-square-o {
|
|
||||||
color: @tree-fg;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
&.fa-folder, &.fa-folder-open {
|
|
||||||
//color: #FEDE8B;
|
|
||||||
//text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* TREE */
|
|
||||||
|
|
||||||
|
|
||||||
#tree {
|
|
||||||
font-size: @main-font-size;
|
|
||||||
//border-right: 1px solid #ccc;
|
|
||||||
box-sizing: border-box;
|
|
||||||
background: @tree-bg;
|
|
||||||
overflow: auto;
|
|
||||||
resize: horizontal;
|
|
||||||
width: auto;
|
|
||||||
white-space: nowrap;
|
|
||||||
max-width: 500px;
|
|
||||||
min-width: 200px;
|
|
||||||
padding: 0px;
|
|
||||||
color: @tree-fg;
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column;
|
|
||||||
max-height: 100%;
|
|
||||||
.categories-container {
|
|
||||||
flex: 1;
|
|
||||||
max-width: 500px;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
img.icon {
|
|
||||||
margin-bottom: 3px;
|
|
||||||
margin-left: -2px;
|
|
||||||
}
|
|
||||||
.docTree {
|
|
||||||
margin-top: 20px;
|
|
||||||
//padding: 0 0 0 20px;
|
|
||||||
padding: 0;
|
|
||||||
cursor: auto;
|
|
||||||
&li, li {
|
|
||||||
padding: 0;
|
|
||||||
&.collapsed ul {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
input {
|
|
||||||
width: ~"calc(100% - 30px)";
|
|
||||||
padding: 0 10px;
|
|
||||||
border: 0;
|
|
||||||
color: lighten(@tree-fg, 40%);
|
|
||||||
}
|
|
||||||
& > span.element-row {
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
//min-width: ~"calc(100% + 5px)";
|
|
||||||
.leftsideCategory();
|
|
||||||
width: ~"calc(100% + 5px)";
|
|
||||||
margin: 0;
|
|
||||||
margin-bottom: -6px;
|
|
||||||
display: inline-block;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-left: -5px;
|
|
||||||
padding-left: 5px;
|
|
||||||
}
|
|
||||||
& > span.element-row:not(.selected):not(.active):hover {
|
|
||||||
//background-color: @drive-hover;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
span.element {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
/*.active {
|
|
||||||
&:not(.selected):not(.droppable) {
|
|
||||||
background-color: darken(@drive-hover, 15%);
|
|
||||||
}
|
|
||||||
}*/
|
|
||||||
.category {
|
|
||||||
margin: 0;
|
|
||||||
margin-top: 15px;
|
|
||||||
.root {
|
|
||||||
&> .fa {
|
|
||||||
min-width: 30px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
padding: 0;
|
|
||||||
.element-row {
|
|
||||||
display: block;
|
|
||||||
padding-left: 20px;
|
|
||||||
.leftsideCategory();
|
|
||||||
margin: 0;
|
|
||||||
.fa {
|
|
||||||
width: 25px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.category:last-child {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
#allfilesTree {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
.limit-container {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
#searchContainer {
|
|
||||||
text-align: center;
|
|
||||||
padding: 0;
|
|
||||||
position: relative;
|
|
||||||
input {
|
|
||||||
background: lighten(@toolbar-drive-bg, 8%);
|
|
||||||
color: @toolbar-drive-color;
|
|
||||||
.tools_placeholder-color(@toolbar-drive-color);
|
|
||||||
outline-width: 0px;
|
|
||||||
border-radius: 0;
|
|
||||||
width: 100%;
|
|
||||||
//border: 1px solid #ccc;
|
|
||||||
border: 0;
|
|
||||||
border-right: 1px solid lighten(@toolbar-drive-bg, 16%);
|
|
||||||
//border-right: 0;
|
|
||||||
height: @toolbar-line-height;
|
|
||||||
padding: 0 5px;
|
|
||||||
padding-left: 45px;
|
|
||||||
&:focus {
|
|
||||||
outline-width: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.searchIcon {
|
|
||||||
color: @toolbar-drive-color;
|
|
||||||
position: absolute;
|
|
||||||
left: 20px; // TODO align with drive categories
|
|
||||||
top: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.fa.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.docTree {
|
|
||||||
.root > .element-row > .expcol {
|
|
||||||
position: relative;
|
|
||||||
top:0;
|
|
||||||
left: -10px;
|
|
||||||
}
|
|
||||||
.root > .element-row > .folder {
|
|
||||||
margin-left: -5px;
|
|
||||||
}
|
|
||||||
.root {
|
|
||||||
&> .element-row {
|
|
||||||
padding-left: 20px;
|
|
||||||
}
|
|
||||||
&> ul {
|
|
||||||
padding-left: 30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Expand/collapse lines
|
|
||||||
.docTree 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 @tree-lines-col;
|
|
||||||
height: ~"calc(1em + 11px)";
|
|
||||||
border-bottom: 1px solid @tree-lines-col;
|
|
||||||
width: 15px;
|
|
||||||
}
|
|
||||||
&:after {
|
|
||||||
position: absolute;
|
|
||||||
left: -15px;
|
|
||||||
bottom: -7px;
|
|
||||||
content: '';
|
|
||||||
display: block;
|
|
||||||
border-left: 1px solid @tree-lines-col;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
&.root {
|
|
||||||
margin: 0px 0px 0px -10px;
|
|
||||||
&:before {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
&:after {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:last-child:after {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* CONTENT */
|
|
||||||
#rightCol {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
#content {
|
|
||||||
box-sizing: border-box;
|
|
||||||
background: @content-bg;
|
|
||||||
color: @content-fg;
|
|
||||||
overflow: auto;
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column;
|
|
||||||
position: relative;
|
|
||||||
.selectBox {
|
|
||||||
display: none;
|
|
||||||
background-color: rgba(100, 100, 100, 0.7);
|
|
||||||
position: absolute;
|
|
||||||
z-index: 50;
|
|
||||||
}
|
|
||||||
&.readonly {
|
|
||||||
background: @content-bg-ro;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
padding-left: 10px;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
.info-box {
|
|
||||||
line-height: 2em;
|
|
||||||
padding: 0.25em 0.75em;
|
|
||||||
margin: 1em;
|
|
||||||
background: @info-box-bg;
|
|
||||||
span {
|
|
||||||
cursor: pointer;
|
|
||||||
float: right;
|
|
||||||
margin-top: 0.5em;
|
|
||||||
}
|
|
||||||
&.noclose {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
cursor: default;
|
|
||||||
&:not(.header) {
|
|
||||||
*:not(input) {
|
|
||||||
/*pointer-events: none;*/
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
&:not(.selected, .selectedTmp) {
|
|
||||||
background-color: @drive-hover;
|
|
||||||
}
|
|
||||||
.name {
|
|
||||||
/*text-decoration: underline;*/
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#folderContent {
|
|
||||||
li {
|
|
||||||
&.searchResult {
|
|
||||||
border-bottom: 1px solid @info-box-border;
|
|
||||||
display: block;
|
|
||||||
&:hover {
|
|
||||||
background-color: initial;
|
|
||||||
}
|
|
||||||
table {
|
|
||||||
width: 100%;
|
|
||||||
.label2 {
|
|
||||||
width: 150px;
|
|
||||||
font-size: 15px;
|
|
||||||
text-align: right;
|
|
||||||
padding-right: 15px;
|
|
||||||
}
|
|
||||||
.openDir {
|
|
||||||
a {
|
|
||||||
cursor: pointer;
|
|
||||||
color: #41b7d8;
|
|
||||||
&:hover {
|
|
||||||
color: #014c8c;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.path {
|
|
||||||
font-style: italic;
|
|
||||||
direction: rtl;
|
|
||||||
.element {
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.title {
|
|
||||||
font-weight: bold;
|
|
||||||
cursor: pointer;
|
|
||||||
&:hover {
|
|
||||||
background-color: @drive-hover;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.col2 {
|
|
||||||
width: 250px;
|
|
||||||
}
|
|
||||||
td.icon {
|
|
||||||
width: 50px;
|
|
||||||
font-size: 40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.element {
|
|
||||||
.truncated { display: none; }
|
|
||||||
}
|
|
||||||
div.grid {
|
|
||||||
padding: 20px;
|
|
||||||
.fileIcon;
|
|
||||||
li {
|
|
||||||
&.element {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
input {
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 5px;
|
|
||||||
}
|
|
||||||
.state {
|
|
||||||
position: absolute;
|
|
||||||
top: 3px;
|
|
||||||
right: 3px;
|
|
||||||
.fa {
|
|
||||||
margin:0;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.listElement {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.addpad {
|
|
||||||
cursor: pointer;
|
|
||||||
opacity: 0.5;
|
|
||||||
padding: 0;
|
|
||||||
&:hover {
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
.fa {
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 90px;
|
|
||||||
margin-top: 5px;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.list {
|
|
||||||
.grid-element {
|
|
||||||
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(.header) {
|
|
||||||
height: @toolbar-line-height;
|
|
||||||
line-height: @toolbar-line-height;
|
|
||||||
}
|
|
||||||
&.header {
|
|
||||||
cursor: default;
|
|
||||||
color: @table-header-fg;
|
|
||||||
span {
|
|
||||||
&:not(.fa) {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
&.sortasc, &.sortdesc {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&> span {
|
|
||||||
padding: 15px 5px;
|
|
||||||
&.active {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
&.clickable {
|
|
||||||
cursor: pointer;
|
|
||||||
&:hover {
|
|
||||||
background: @table-header-bg;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.element {
|
|
||||||
span {
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
box-sizing: border-box;
|
|
||||||
&.state {
|
|
||||||
.fa:not(:last-child) {
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.icon, &.state {
|
|
||||||
width: 30px;
|
|
||||||
}
|
|
||||||
&.type, &.atime, &.ctime {
|
|
||||||
width: 175px;
|
|
||||||
}
|
|
||||||
&.title {
|
|
||||||
width: 250px;
|
|
||||||
@media screen and (max-width: 1200px) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.folders, &.files {
|
|
||||||
width: 150px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.parentFolder {
|
|
||||||
cursor: pointer;
|
|
||||||
margin-left: 10px;
|
|
||||||
&:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#folderContent {
|
|
||||||
padding-right: 10px;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
#addPadDialog.cp-modal-container {
|
|
||||||
.fileIcon;
|
|
||||||
|
|
||||||
li:not(.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;
|
|
||||||
.uploadFile {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
.name {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Toolbar */
|
|
||||||
|
|
||||||
#driveToolbar {
|
|
||||||
background: lighten(@toolbar-drive-bg, 8%);
|
|
||||||
color: @toolbar-drive-color;
|
|
||||||
//height: 30px;
|
|
||||||
//display: flex;
|
|
||||||
//flex-flow: row;
|
|
||||||
z-index: 100;
|
|
||||||
box-sizing: border-box;
|
|
||||||
height: @toolbar-line-height;
|
|
||||||
padding: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-flow: row;
|
|
||||||
|
|
||||||
* {
|
|
||||||
outline-width: 0;
|
|
||||||
&:focus {
|
|
||||||
outline-width: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.newPadContainer {
|
|
||||||
display: inline-block;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.history {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rightside, .leftside {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
.fa {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
height: @toolbar-line-height;
|
|
||||||
padding: 0 10px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
background: transparent;
|
|
||||||
font-size: @main-font-size;
|
|
||||||
color: @toolbar-drive-color;
|
|
||||||
transition: all 0.15s;
|
|
||||||
.drawer {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.fa, span {
|
|
||||||
font-size: @main-font-size;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
background: @toolbar-drive-bg;
|
|
||||||
}
|
|
||||||
&.active {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.rightside {
|
|
||||||
float: right;
|
|
||||||
& > * {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
#contextButtonsContainer {
|
|
||||||
display: inline-block;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
padding-left: 10px;
|
|
||||||
}
|
|
||||||
.leftside {
|
|
||||||
& > span {
|
|
||||||
height: 100%;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
padding: 0 10px;
|
|
||||||
.fa {
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
.cp-dropdown-button-title {
|
|
||||||
display: inline-flex;
|
|
||||||
height: @toolbar-line-height;
|
|
||||||
align-items: center;
|
|
||||||
span:not(.fa) {
|
|
||||||
line-height: 23px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
font: @toolbar-button-font;
|
|
||||||
span {
|
|
||||||
font: @toolbar-button-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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.path {
|
|
||||||
flex: 1;
|
|
||||||
width: 100%;
|
|
||||||
height: @toolbar-line-height;
|
|
||||||
line-height: @toolbar-line-height;
|
|
||||||
cursor: default;
|
|
||||||
width: auto;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
direction: rtl;
|
|
||||||
max-width: 100%;
|
|
||||||
text-align: left;
|
|
||||||
.element {
|
|
||||||
display: inline-block;
|
|
||||||
height: @toolbar-line-height;
|
|
||||||
line-height: @toolbar-line-height;
|
|
||||||
font-size: @main-font-size;
|
|
||||||
padding: 0 5px;
|
|
||||||
border: 0;
|
|
||||||
background: darken(@toolbar-drive-bg, 10%);
|
|
||||||
color: @toolbar-drive-color;
|
|
||||||
box-sizing: border-box;
|
|
||||||
transition: all 0.15s;
|
|
||||||
&.separator {
|
|
||||||
color: #ccc;
|
|
||||||
}
|
|
||||||
&.clickable {
|
|
||||||
cursor: pointer;
|
|
||||||
&:hover {
|
|
||||||
background: darken(@toolbar-drive-bg, 15%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,29 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html class="cp">
|
|
||||||
<head>
|
|
||||||
<title>CryptDrive</title>
|
|
||||||
<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="/customize/template.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;
|
|
||||||
}
|
|
||||||
#pad-iframe {
|
|
||||||
position:fixed;
|
|
||||||
top:0;
|
|
||||||
left:0px;
|
|
||||||
bottom:0px;
|
|
||||||
right:0px;
|
|
||||||
width:100%;
|
|
||||||
height:100%;
|
|
||||||
border:none;
|
|
||||||
margin:0;
|
|
||||||
padding:0;
|
|
||||||
overflow:hidden;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<iframe id="pad-iframe"></iframe><script src="/common/noscriptfix.js"></script>
|
|
||||||
@ -1,60 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
|
|
||||||
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
|
|
||||||
<script async data-bootload="/drive/inner.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
|
|
||||||
</head>
|
|
||||||
<body style="display: none;">
|
|
||||||
<div id="toolbar" class="toolbar-container"></div>
|
|
||||||
<div class="app-container" tabindex="0">
|
|
||||||
<div id="tree">
|
|
||||||
</div>
|
|
||||||
<div id="rightCol">
|
|
||||||
<div id="driveToolbar"></div>
|
|
||||||
<div id="content" tabindex="2"></div>
|
|
||||||
</div>
|
|
||||||
<div id="treeContextMenu" class="contextMenu dropdown clearfix unselectable">
|
|
||||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
|
|
||||||
<li><a tabindex="-1" data-icon="fa-folder-open" class="open dropdown-item" data-localization="fc_open">Open</a></li>
|
|
||||||
<li><a tabindex="-1" data-icon="fa-eye" class="open_ro dropdown-item" data-localization="fc_open_ro">Open (read-only)</a></li>
|
|
||||||
<li><a tabindex="-1" data-icon="fa-pencil" class="rename editable dropdown-item" data-localization="fc_rename">Rename</a></li>
|
|
||||||
<li><a tabindex="-1" data-icon="fa-trash" class="delete editable dropdown-item" data-localization="fc_delete">Delete</a></li>
|
|
||||||
<li><a tabindex="-1" data-icon="fa-folder" class="newfolder editable dropdown-item" data-localization="fc_newfolder">New folder</a></li>
|
|
||||||
<li><a tabindex="-1" data-icon="fa-database" class="properties dropdown-item" data-localization="fc_prop">Properties</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div id="contentContextMenu" class="contextMenu dropdown clearfix unselectable">
|
|
||||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
|
|
||||||
<li><a tabindex="-1" data-icon="fa-folder" class="newfolder editable dropdown-item" data-localization="fc_newfolder">New folder</a></li>
|
|
||||||
<li><a tabindex="-1" data-icon="fa-file-word-o" class="newdoc own editable dropdown-item" data-type="pad" data-localization="button_newpad">New pad</a></li>
|
|
||||||
<li><a tabindex="-1" data-icon="fa-file-code-o" class="newdoc own editable dropdown-item" data-type="code" data-localization="button_newcode">New code</a></li>
|
|
||||||
<li><a tabindex="-1" data-icon="fa-file-powerpoint-o" class="newdoc own editable dropdown-item" data-type="slide" data-localization="button_newslide">New slide</a></li>
|
|
||||||
<li><a tabindex="-1" data-icon="fa-calendar" class="newdoc own editable dropdown-item" data-type="poll" data-localization="button_newpoll">New poll</a></li>
|
|
||||||
<li><a tabindex="-1" data-icon="fa-paint-brush" class="newdoc own editable dropdown-item" data-type="whiteboard" data-localization="button_newwhiteboard">New whiteboard</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div id="defaultContextMenu" class="contextMenu dropdown clearfix unselectable">
|
|
||||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
|
|
||||||
<li><a tabindex="-1" data-icon="fa-folder-open" class="open dropdown-item" data-localization="fc_open">Open</a></li>
|
|
||||||
<li><a tabindex="-1" data-icon="fa-eye" class="open_ro dropdown-item" data-localization="fc_open_ro">Open (read-only)</a></li>
|
|
||||||
<li><a tabindex="-1" data-icon="fa-trash" class="delete dropdown-item" data-localization="fc_delete">Delete</a></li>
|
|
||||||
<li><a tabindex="-1" data-icon="fa-database" class="properties dropdown-item" data-localization="fc_prop">Properties</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div id="trashTreeContextMenu" class="contextMenu dropdown clearfix unselectable">
|
|
||||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
|
|
||||||
<li><a tabindex="-1" data-icon="fa-trash-o" class="empty editable dropdown-item" data-localization="fc_empty">Empty the trash</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div id="trashContextMenu" class="contextMenu dropdown clearfix unselectable">
|
|
||||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
|
|
||||||
<li><a tabindex="-1" data-icon="fa-eraser" class="remove editable dropdown-item" data-localization="fc_remove">Delete permanently</a></li>
|
|
||||||
<li><a tabindex="-1" data-icon="fa-repeat" class="restore editable dropdown-item" data-localization="fc_restore">Restore</a></li>
|
|
||||||
<li><a tabindex="-1" data-icon="fa-database" class="properties dropdown-item" data-localization="fc_prop">Properties</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
define([
|
|
||||||
'less!/bower_components/components-font-awesome/css/font-awesome.min.css',
|
|
||||||
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
|
|
||||||
'less!/drive/file.less',
|
|
||||||
'less!/customize/src/less/cryptpad.less',
|
|
||||||
'less!/customize/src/less/toolbar.less',
|
|
||||||
], function () {});
|
|
||||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
@ -1,271 +0,0 @@
|
|||||||
define([
|
|
||||||
'/bower_components/tweetnacl/nacl-fast.min.js',
|
|
||||||
], function () {
|
|
||||||
var Nacl = window.nacl;
|
|
||||||
var PARANOIA = true;
|
|
||||||
|
|
||||||
var plainChunkLength = 128 * 1024;
|
|
||||||
var cypherChunkLength = 131088;
|
|
||||||
|
|
||||||
var computeEncryptedSize = function (bytes, meta) {
|
|
||||||
var metasize = Nacl.util.decodeUTF8(JSON.stringify(meta)).length;
|
|
||||||
var chunks = Math.ceil(bytes / plainChunkLength);
|
|
||||||
return metasize + 18 + (chunks * 16) + bytes;
|
|
||||||
};
|
|
||||||
|
|
||||||
var encodePrefix = function (p) {
|
|
||||||
return [
|
|
||||||
65280, // 255 << 8
|
|
||||||
255,
|
|
||||||
].map(function (n, i) {
|
|
||||||
return (p & n) >> ((1 - i) * 8);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
var decodePrefix = function (A) {
|
|
||||||
return (A[0] << 8) | A[1];
|
|
||||||
};
|
|
||||||
|
|
||||||
var slice = function (A) {
|
|
||||||
return Array.prototype.slice.call(A);
|
|
||||||
};
|
|
||||||
|
|
||||||
var createNonce = function () {
|
|
||||||
return new Uint8Array(new Array(24).fill(0));
|
|
||||||
};
|
|
||||||
|
|
||||||
var increment = function (N) {
|
|
||||||
var l = N.length;
|
|
||||||
while (l-- > 1) {
|
|
||||||
if (PARANOIA) {
|
|
||||||
if (typeof(N[l]) !== 'number') {
|
|
||||||
throw new Error('E_UNSAFE_TYPE');
|
|
||||||
}
|
|
||||||
if (N[l] > 255) {
|
|
||||||
throw new Error('E_OUT_OF_BOUNDS');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* jshint probably suspects this is unsafe because we lack types
|
|
||||||
but as long as this is only used on nonces, it should be safe */
|
|
||||||
if (N[l] !== 255) { return void N[l]++; } // jshint ignore:line
|
|
||||||
N[l] = 0;
|
|
||||||
|
|
||||||
// you don't need to worry about this running out.
|
|
||||||
// you'd need a REAAAALLY big file
|
|
||||||
if (l === 0) {
|
|
||||||
throw new Error('E_NONCE_TOO_LARGE');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
var joinChunks = function (chunks) {
|
|
||||||
return new Blob(chunks);
|
|
||||||
};
|
|
||||||
|
|
||||||
var concatBuffer = function (a, b) { // TODO make this not so ugly
|
|
||||||
return new Uint8Array(slice(a).concat(slice(b)));
|
|
||||||
};
|
|
||||||
|
|
||||||
var fetchMetadata = function (src, cb) {
|
|
||||||
var done = false;
|
|
||||||
var CB = function (err, res) {
|
|
||||||
if (done) { return; }
|
|
||||||
done = true;
|
|
||||||
cb(err, res);
|
|
||||||
};
|
|
||||||
|
|
||||||
var xhr = new XMLHttpRequest();
|
|
||||||
xhr.open("GET", src, true);
|
|
||||||
xhr.setRequestHeader('Range', 'bytes=0-1');
|
|
||||||
xhr.responseType = 'arraybuffer';
|
|
||||||
|
|
||||||
xhr.onload = function () {
|
|
||||||
if (/^4/.test('' + this.status)) { return CB('XHR_ERROR'); }
|
|
||||||
var res = new Uint8Array(xhr.response);
|
|
||||||
var size = decodePrefix(res);
|
|
||||||
var xhr2 = new XMLHttpRequest();
|
|
||||||
|
|
||||||
xhr2.open("GET", src, true);
|
|
||||||
xhr2.setRequestHeader('Range', 'bytes=2-' + (size + 2));
|
|
||||||
xhr2.responseType = 'arraybuffer';
|
|
||||||
xhr2.onload = function () {
|
|
||||||
if (/^4/.test('' + this.status)) { return CB('XHR_ERROR'); }
|
|
||||||
var res2 = new Uint8Array(xhr2.response);
|
|
||||||
var all = concatBuffer(res, res2);
|
|
||||||
CB(void 0, all);
|
|
||||||
};
|
|
||||||
xhr2.send(null);
|
|
||||||
};
|
|
||||||
xhr.send(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
var decryptMetadata = function (u8, key) {
|
|
||||||
var prefix = u8.subarray(0, 2);
|
|
||||||
var metadataLength = decodePrefix(prefix);
|
|
||||||
|
|
||||||
var metaBox = new Uint8Array(u8.subarray(2, 2 + metadataLength));
|
|
||||||
var metaChunk = Nacl.secretbox.open(metaBox, createNonce(), key);
|
|
||||||
|
|
||||||
try {
|
|
||||||
return JSON.parse(Nacl.util.encodeUTF8(metaChunk));
|
|
||||||
}
|
|
||||||
catch (e) { return null; }
|
|
||||||
};
|
|
||||||
|
|
||||||
var fetchDecryptedMetadata = function (src, key, cb) {
|
|
||||||
if (typeof(src) !== 'string') {
|
|
||||||
return window.setTimeout(function () {
|
|
||||||
cb('NO_SOURCE');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
fetchMetadata(src, function (e, buffer) {
|
|
||||||
if (e) { return cb(e); }
|
|
||||||
cb(void 0, decryptMetadata(buffer, key));
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
var decrypt = function (u8, key, done, progress) {
|
|
||||||
var MAX = u8.length;
|
|
||||||
var _progress = function (offset) {
|
|
||||||
if (typeof(progress) !== 'function') { return; }
|
|
||||||
progress(Math.min(1, offset / MAX));
|
|
||||||
};
|
|
||||||
|
|
||||||
var nonce = createNonce();
|
|
||||||
var i = 0;
|
|
||||||
|
|
||||||
var prefix = u8.subarray(0, 2);
|
|
||||||
var metadataLength = decodePrefix(prefix);
|
|
||||||
|
|
||||||
var res = {
|
|
||||||
metadata: undefined,
|
|
||||||
};
|
|
||||||
|
|
||||||
var metaBox = new Uint8Array(u8.subarray(2, 2 + metadataLength));
|
|
||||||
|
|
||||||
var metaChunk = Nacl.secretbox.open(metaBox, nonce, key);
|
|
||||||
increment(nonce);
|
|
||||||
|
|
||||||
try {
|
|
||||||
res.metadata = JSON.parse(Nacl.util.encodeUTF8(metaChunk));
|
|
||||||
} catch (e) {
|
|
||||||
return window.setTimeout(function () {
|
|
||||||
done('E_METADATA_DECRYPTION');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!res.metadata) {
|
|
||||||
return void setTimeout(function () {
|
|
||||||
done('NO_METADATA');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
var takeChunk = function (cb) {
|
|
||||||
var start = i * cypherChunkLength + 2 + metadataLength;
|
|
||||||
var end = start + cypherChunkLength;
|
|
||||||
i++;
|
|
||||||
var box = new Uint8Array(u8.subarray(start, end));
|
|
||||||
|
|
||||||
// decrypt the chunk
|
|
||||||
var plaintext = Nacl.secretbox.open(box, nonce, key);
|
|
||||||
increment(nonce);
|
|
||||||
|
|
||||||
if (!plaintext) { return cb('DECRYPTION_ERROR'); }
|
|
||||||
|
|
||||||
_progress(end);
|
|
||||||
cb(void 0, plaintext);
|
|
||||||
};
|
|
||||||
|
|
||||||
var chunks = [];
|
|
||||||
|
|
||||||
var again = function () {
|
|
||||||
takeChunk(function (e, plaintext) {
|
|
||||||
if (e) {
|
|
||||||
return setTimeout(function () {
|
|
||||||
done(e);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
if (plaintext) {
|
|
||||||
if ((2 + metadataLength + i * cypherChunkLength) < u8.length) { // not done
|
|
||||||
chunks.push(plaintext);
|
|
||||||
return setTimeout(again);
|
|
||||||
}
|
|
||||||
chunks.push(plaintext);
|
|
||||||
res.content = joinChunks(chunks);
|
|
||||||
return done(void 0, res);
|
|
||||||
}
|
|
||||||
done('UNEXPECTED_ENDING');
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
again();
|
|
||||||
};
|
|
||||||
|
|
||||||
// metadata
|
|
||||||
/* { filename: 'raccoon.jpg', type: 'image/jpeg' } */
|
|
||||||
var encrypt = function (u8, metadata, key) {
|
|
||||||
var nonce = createNonce();
|
|
||||||
|
|
||||||
// encode metadata
|
|
||||||
var plaintext = Nacl.util.decodeUTF8(JSON.stringify(metadata));
|
|
||||||
|
|
||||||
// if metadata is too large, drop the thumbnail.
|
|
||||||
if (plaintext.length > 65535) {
|
|
||||||
var temp = JSON.parse(JSON.stringify(metadata));
|
|
||||||
delete metadata.thumbnail;
|
|
||||||
plaintext = Nacl.util.decodeUTF8(JSON.stringify(temp));
|
|
||||||
}
|
|
||||||
|
|
||||||
var i = 0;
|
|
||||||
|
|
||||||
var state = 0;
|
|
||||||
var next = function (cb) {
|
|
||||||
if (state === 2) { return void cb(); }
|
|
||||||
|
|
||||||
var start;
|
|
||||||
var end;
|
|
||||||
var part;
|
|
||||||
var box;
|
|
||||||
|
|
||||||
if (state === 0) { // metadata...
|
|
||||||
part = new Uint8Array(plaintext);
|
|
||||||
box = Nacl.secretbox(part, nonce, key);
|
|
||||||
increment(nonce);
|
|
||||||
|
|
||||||
if (box.length > 65535) {
|
|
||||||
return void cb('METADATA_TOO_LARGE');
|
|
||||||
}
|
|
||||||
var prefixed = new Uint8Array(encodePrefix(box.length)
|
|
||||||
.concat(slice(box)));
|
|
||||||
state++;
|
|
||||||
|
|
||||||
return void cb(void 0, prefixed);
|
|
||||||
}
|
|
||||||
|
|
||||||
// encrypt the rest of the file...
|
|
||||||
start = i * plainChunkLength;
|
|
||||||
end = start + plainChunkLength;
|
|
||||||
|
|
||||||
part = u8.subarray(start, end);
|
|
||||||
box = Nacl.secretbox(part, nonce, key);
|
|
||||||
increment(nonce);
|
|
||||||
i++;
|
|
||||||
|
|
||||||
// regular data is done
|
|
||||||
if (i * plainChunkLength >= u8.length) { state = 2; }
|
|
||||||
|
|
||||||
return void cb(void 0, box);
|
|
||||||
};
|
|
||||||
|
|
||||||
return next;
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
decrypt: decrypt,
|
|
||||||
encrypt: encrypt,
|
|
||||||
joinChunks: joinChunks,
|
|
||||||
computeEncryptedSize: computeEncryptedSize,
|
|
||||||
decryptMetadata: decryptMetadata,
|
|
||||||
fetchMetadata: fetchMetadata,
|
|
||||||
fetchDecryptedMetadata: fetchDecryptedMetadata,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
@ -1,130 +0,0 @@
|
|||||||
@import "/customize/src/less/variables.less";
|
|
||||||
@import "/customize/src/less/mixins.less";
|
|
||||||
|
|
||||||
@button-border: 2px;
|
|
||||||
|
|
||||||
html, body {
|
|
||||||
margin: 0px;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#toolbar {
|
|
||||||
display: flex; // We need this to remove a 3px border at the bottom of the toolbar
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column;
|
|
||||||
}
|
|
||||||
#app {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app.ready {
|
|
||||||
//background: url('/customize/bg3.jpg') no-repeat center center;
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
}
|
|
||||||
.cryptpad-toolbar {
|
|
||||||
padding: 0px;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
#file, #dl {
|
|
||||||
display: block;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
border: @button-border solid black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inputfile {
|
|
||||||
width: 0.1px;
|
|
||||||
height: 0.1px;
|
|
||||||
opacity: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
position: absolute;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
media-tag {
|
|
||||||
img {
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: ~"calc(100vh - 96px)";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#upload-form, #download-form {
|
|
||||||
padding: 0px;
|
|
||||||
margin: 0px;
|
|
||||||
|
|
||||||
position: relative;
|
|
||||||
width: 50vh;
|
|
||||||
height: 50vh;
|
|
||||||
display: block;
|
|
||||||
margin: 50px auto;
|
|
||||||
max-width: 80vw;
|
|
||||||
label {
|
|
||||||
line-height: ~"calc(50vh - 20px)";
|
|
||||||
text-align: center;
|
|
||||||
position: relative;
|
|
||||||
padding: 10px;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
height: 50vh;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#download-form {
|
|
||||||
label {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
white-space: normal;
|
|
||||||
word-wrap: break-word;
|
|
||||||
span {
|
|
||||||
width: 50vh;
|
|
||||||
max-width: 80vw;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 1.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.hovering {
|
|
||||||
background-color: rgba(255, 0, 115, 0.5) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.block {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.inputfile + label {
|
|
||||||
//border: 2px solid black;
|
|
||||||
//background-color: rgba(50, 50, 50, .10);
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inputfile:focus + label,
|
|
||||||
.inputfile + label:hover {
|
|
||||||
//background-color: rgba(50, 50, 50, 0.30);
|
|
||||||
}
|
|
||||||
|
|
||||||
#progress {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
|
|
||||||
transition: width 200ms;
|
|
||||||
width: 0%;
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
background-color: rgba(255, 0, 115, 0.75);
|
|
||||||
z-index: 10000;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
@ -1,30 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html class="cp pad">
|
|
||||||
<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">
|
|
||||||
<script async data-bootload="/customize/template.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;
|
|
||||||
}
|
|
||||||
#pad-iframe {
|
|
||||||
position:fixed;
|
|
||||||
top:0px;
|
|
||||||
left:0px;
|
|
||||||
bottom:0px;
|
|
||||||
right:0px;
|
|
||||||
width:100%;
|
|
||||||
height:100%;
|
|
||||||
border:none;
|
|
||||||
margin:0;
|
|
||||||
padding:0;
|
|
||||||
overflow:hidden;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<iframe id="pad-iframe"></iframe><script src="/common/noscriptfix.js"></script>
|
|
||||||
|
|
||||||
@ -1,30 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
|
|
||||||
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
|
|
||||||
<script async data-bootload="/file/inner.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
|
|
||||||
<style>.loading-hidden, .loading-hidden * {display: none !important;}</style>
|
|
||||||
</head>
|
|
||||||
<body class="loading-hidden">
|
|
||||||
<div id="toolbar" class="toolbar-container"></div>
|
|
||||||
<div id="app">
|
|
||||||
<div id="upload-form" style="display: none;">
|
|
||||||
<input type="file" name="file" id="file" class="inputfile" />
|
|
||||||
<label for="file" class="btn btn-primary block unselectable" data-localization-title="upload_choose"
|
|
||||||
data-localization="upload_choose"></label>
|
|
||||||
</div>
|
|
||||||
<div id="download-form" style="display: none;">
|
|
||||||
<input type="button" name="dl" id="dl" class="inputfile" />
|
|
||||||
<label for="dl" class="btn btn-success block unselectable" data-localization-title="download_button"><span data-localization="download_button"></span></label>
|
|
||||||
<span class="block" id="progress"></span>
|
|
||||||
</div>
|
|
||||||
<div id="download-view" style="display: none;">
|
|
||||||
<media-tag id="encryptedFile"></media-tag>
|
|
||||||
</div>
|
|
||||||
<div id="feedback" class="block hidden">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
define([
|
|
||||||
'jquery',
|
|
||||||
'less!/bower_components/components-font-awesome/css/font-awesome.min.css',
|
|
||||||
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
|
|
||||||
'less!/file/file.less',
|
|
||||||
'less!/customize/src/less/cryptpad.less',
|
|
||||||
'less!/customize/src/less/toolbar.less',
|
|
||||||
], function ($) {
|
|
||||||
$('.loading-hidden').removeClass('loading-hidden');
|
|
||||||
// dirty hack to get rid the flash of the lock background
|
|
||||||
setTimeout(function () {
|
|
||||||
$('#app').addClass('ready');
|
|
||||||
}, 100);
|
|
||||||
});
|
|
||||||
@ -1,269 +0,0 @@
|
|||||||
define([
|
|
||||||
'jquery',
|
|
||||||
'/bower_components/chainpad-crypto/crypto.js',
|
|
||||||
'/bower_components/chainpad-netflux/chainpad-netflux.js',
|
|
||||||
'/common/toolbar2.js',
|
|
||||||
'/common/cryptpad-common.js',
|
|
||||||
'/common/visible.js',
|
|
||||||
'/common/notify.js',
|
|
||||||
'/file/file-crypto.js',
|
|
||||||
|
|
||||||
'/common/media-tag.js',
|
|
||||||
|
|
||||||
'/bower_components/file-saver/FileSaver.min.js',
|
|
||||||
|
|
||||||
'less!/bower_components/components-font-awesome/css/font-awesome.min.css',
|
|
||||||
'less!/customize/src/less/cryptpad.less',
|
|
||||||
], function ($, Crypto, realtimeInput, Toolbar, Cryptpad, Visible, Notify, FileCrypto, MediaTag) {
|
|
||||||
var Messages = Cryptpad.Messages;
|
|
||||||
var saveAs = window.saveAs;
|
|
||||||
var Nacl = window.nacl;
|
|
||||||
|
|
||||||
var APP = window.APP = {};
|
|
||||||
|
|
||||||
$(function () {
|
|
||||||
|
|
||||||
var andThen = function () {
|
|
||||||
var ifrw = $('#pad-iframe')[0].contentWindow;
|
|
||||||
var $iframe = $('#pad-iframe').contents();
|
|
||||||
var $appContainer = $iframe.find('#app');
|
|
||||||
var $form = $iframe.find('#upload-form');
|
|
||||||
var $dlform = $iframe.find('#download-form');
|
|
||||||
var $dlview = $iframe.find('#download-view');
|
|
||||||
var $label = $form.find('label');
|
|
||||||
var $dllabel = $dlform.find('label span');
|
|
||||||
var $progress = $iframe.find('#progress');
|
|
||||||
var $body = $iframe.find('body');
|
|
||||||
|
|
||||||
$body.on('dragover', function (e) { e.preventDefault(); });
|
|
||||||
$body.on('drop', function (e) { e.preventDefault(); });
|
|
||||||
|
|
||||||
Cryptpad.addLoadingScreen();
|
|
||||||
|
|
||||||
var Title;
|
|
||||||
|
|
||||||
var uploadMode = false;
|
|
||||||
|
|
||||||
var $bar = $iframe.find('.toolbar-container');
|
|
||||||
|
|
||||||
var secret;
|
|
||||||
var hexFileName;
|
|
||||||
if (window.location.hash) {
|
|
||||||
secret = Cryptpad.getSecrets();
|
|
||||||
if (!secret.keys) { throw new Error("You need a hash"); } // TODO
|
|
||||||
hexFileName = Cryptpad.base64ToHex(secret.channel);
|
|
||||||
} else {
|
|
||||||
uploadMode = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
Title = Cryptpad.createTitle({}, function(){}, Cryptpad);
|
|
||||||
|
|
||||||
var displayed = ['useradmin', 'newpad', 'limit', 'upgrade'];
|
|
||||||
if (secret && hexFileName) {
|
|
||||||
displayed.push('fileshare');
|
|
||||||
}
|
|
||||||
|
|
||||||
var configTb = {
|
|
||||||
displayed: displayed,
|
|
||||||
ifrw: ifrw,
|
|
||||||
common: Cryptpad,
|
|
||||||
//hideDisplayName: true,
|
|
||||||
$container: $bar,
|
|
||||||
};
|
|
||||||
|
|
||||||
if (uploadMode) {
|
|
||||||
displayed.push('pageTitle');
|
|
||||||
configTb.pageTitle = Messages.upload_title;
|
|
||||||
}
|
|
||||||
|
|
||||||
var toolbar = APP.toolbar = Toolbar.create(configTb);
|
|
||||||
toolbar.$rightside.html(''); // Remove the drawer if we don't use it to hide the toolbar
|
|
||||||
|
|
||||||
|
|
||||||
if (!uploadMode) {
|
|
||||||
var src = Cryptpad.getBlobPathFromHex(hexFileName);
|
|
||||||
var cryptKey = secret.keys && secret.keys.fileKeyStr;
|
|
||||||
var key = Nacl.util.decodeBase64(cryptKey);
|
|
||||||
|
|
||||||
FileCrypto.fetchDecryptedMetadata(src, key, function (e, metadata) {
|
|
||||||
if (e) { return void console.error(e); }
|
|
||||||
var title = document.title = metadata.name;
|
|
||||||
Title.updateTitle(title || Title.defaultTitle);
|
|
||||||
toolbar.addElement(['pageTitle'], {pageTitle: title});
|
|
||||||
|
|
||||||
console.error(metadata);
|
|
||||||
|
|
||||||
var displayFile = function (ev, sizeMb, CB) {
|
|
||||||
var called_back;
|
|
||||||
var cb = function (e) {
|
|
||||||
if (called_back) { return; }
|
|
||||||
called_back = true;
|
|
||||||
if (CB) { CB(e); }
|
|
||||||
};
|
|
||||||
|
|
||||||
var $mt = $dlview.find('media-tag');
|
|
||||||
var cryptKey = secret.keys && secret.keys.fileKeyStr;
|
|
||||||
var hexFileName = Cryptpad.base64ToHex(secret.channel);
|
|
||||||
$mt.attr('src', '/blob/' + hexFileName.slice(0,2) + '/' + hexFileName);
|
|
||||||
$mt.attr('data-crypto-key', 'cryptpad:'+cryptKey);
|
|
||||||
|
|
||||||
var rightsideDisplayed = false;
|
|
||||||
|
|
||||||
$(window.document).on('decryption', function (e) {
|
|
||||||
var decrypted = e.originalEvent;
|
|
||||||
if (decrypted.callback) {
|
|
||||||
decrypted.callback();
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(decrypted);
|
|
||||||
$dlview.show();
|
|
||||||
$dlform.hide();
|
|
||||||
var $dlButton = $dlview.find('media-tag button');
|
|
||||||
if (ev) { $dlButton.click(); }
|
|
||||||
if (!$dlButton.length) {
|
|
||||||
$appContainer.css('background', 'white');
|
|
||||||
}
|
|
||||||
$dlButton.addClass('btn btn-success');
|
|
||||||
var text = Messages.download_mt_button + '<br>';
|
|
||||||
text += '<b>' + Cryptpad.fixHTML(title) + '</b><br>';
|
|
||||||
text += '<em>' + Messages._getKey('formattedMB', [sizeMb]) + '</em>';
|
|
||||||
$dlButton.html(text);
|
|
||||||
|
|
||||||
if (!rightsideDisplayed) {
|
|
||||||
toolbar.$rightside.append(Cryptpad.createButton('export', true, {}, function () {
|
|
||||||
saveAs(decrypted.blob, decrypted.metadata.name);
|
|
||||||
}))
|
|
||||||
.append(Cryptpad.createButton('forget', true, {}, function () {
|
|
||||||
// not sure what to do here
|
|
||||||
}));
|
|
||||||
rightsideDisplayed = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// make pdfs big
|
|
||||||
var toolbarHeight = $iframe.find('#toolbar').height();
|
|
||||||
var $another_iframe = $iframe.find('media-tag iframe').css({
|
|
||||||
'height': 'calc(100vh - ' + toolbarHeight + 'px)',
|
|
||||||
'width': '100vw',
|
|
||||||
'position': 'absolute',
|
|
||||||
'bottom': 0,
|
|
||||||
'left': 0,
|
|
||||||
'border': 0
|
|
||||||
});
|
|
||||||
|
|
||||||
if ($another_iframe.length) {
|
|
||||||
$another_iframe.load(function () {
|
|
||||||
cb();
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
cb();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.on('decryptionError', function (e) {
|
|
||||||
var error = e.originalEvent;
|
|
||||||
//Cryptpad.alert(error.message);
|
|
||||||
cb(error.message);
|
|
||||||
})
|
|
||||||
.on('decryptionProgress', function (e) {
|
|
||||||
var progress = e.originalEvent;
|
|
||||||
var p = progress.percent +'%';
|
|
||||||
$progress.width(p);
|
|
||||||
console.log(progress.percent);
|
|
||||||
});
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Allowed mime types that have to be set for a rendering after a decryption.
|
|
||||||
*
|
|
||||||
* @type {Array}
|
|
||||||
*/
|
|
||||||
var allowedMediaTypes = [
|
|
||||||
'image/png',
|
|
||||||
'image/jpeg',
|
|
||||||
'image/jpg',
|
|
||||||
'image/gif',
|
|
||||||
'audio/mp3',
|
|
||||||
'audio/ogg',
|
|
||||||
'audio/wav',
|
|
||||||
'audio/webm',
|
|
||||||
'video/mp4',
|
|
||||||
'video/ogg',
|
|
||||||
'video/webm',
|
|
||||||
'application/pdf',
|
|
||||||
'application/dash+xml',
|
|
||||||
'download'
|
|
||||||
];
|
|
||||||
MediaTag.CryptoFilter.setAllowedMediaTypes(allowedMediaTypes);
|
|
||||||
|
|
||||||
MediaTag($mt[0]);
|
|
||||||
};
|
|
||||||
|
|
||||||
var todoBigFile = function (sizeMb) {
|
|
||||||
$dlform.show();
|
|
||||||
Cryptpad.removeLoadingScreen();
|
|
||||||
$dllabel.append($('<br>'));
|
|
||||||
$dllabel.append(Cryptpad.fixHTML(metadata.name));
|
|
||||||
|
|
||||||
// don't display the size if you don't know it.
|
|
||||||
if (typeof(sizeM) === 'number') {
|
|
||||||
$dllabel.append($('<br>'));
|
|
||||||
$dllabel.append(Messages._getKey('formattedMB', [sizeMb]));
|
|
||||||
}
|
|
||||||
var decrypting = false;
|
|
||||||
var onClick = function (ev) {
|
|
||||||
if (decrypting) { return; }
|
|
||||||
decrypting = true;
|
|
||||||
displayFile(ev, sizeMb, function (err) {
|
|
||||||
if (err) { Cryptpad.alert(err); }
|
|
||||||
});
|
|
||||||
};
|
|
||||||
if (typeof(sizeMb) === 'number' && sizeMb < 5) { return void onClick(); }
|
|
||||||
$dlform.find('#dl, #progress').click(onClick);
|
|
||||||
};
|
|
||||||
Cryptpad.getFileSize(window.location.href, function (e, data) {
|
|
||||||
if (e) {
|
|
||||||
return void Cryptpad.errorLoadingScreen(e);
|
|
||||||
}
|
|
||||||
var size = Cryptpad.bytesToMegabytes(data);
|
|
||||||
return void todoBigFile(size);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!Cryptpad.isLoggedIn()) {
|
|
||||||
return Cryptpad.alert(Messages.upload_mustLogin, function () {
|
|
||||||
if (sessionStorage) {
|
|
||||||
sessionStorage.redirectTo = window.location.href;
|
|
||||||
}
|
|
||||||
window.location.href = '/login/';
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
$form.css({
|
|
||||||
display: 'block',
|
|
||||||
});
|
|
||||||
|
|
||||||
var fmConfig = {
|
|
||||||
dropArea: $form,
|
|
||||||
hoverArea: $label,
|
|
||||||
body: $body,
|
|
||||||
keepTable: true // Don't fadeOut the tbale with the uploaded files
|
|
||||||
};
|
|
||||||
|
|
||||||
var FM = Cryptpad.createFileManager(fmConfig);
|
|
||||||
|
|
||||||
$form.find("#file").on('change', function (e) {
|
|
||||||
var file = e.target.files[0];
|
|
||||||
FM.handleFile(file);
|
|
||||||
});
|
|
||||||
|
|
||||||
// we're in upload mode
|
|
||||||
Cryptpad.removeLoadingScreen();
|
|
||||||
};
|
|
||||||
|
|
||||||
Cryptpad.ready(function () {
|
|
||||||
andThen();
|
|
||||||
Cryptpad.reportAppUsage();
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html class="cp pad">
|
|
||||||
<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">
|
|
||||||
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
|
|
||||||
<script data-bootload="main.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script>
|
|
||||||
<link rel="icon" type="image/png"
|
|
||||||
href="/customize/main-favicon.png"
|
|
||||||
data-main-favicon="/customize/main-favicon.png"
|
|
||||||
data-alt-favicon="/customize/alt-favicon.png"
|
|
||||||
id="favicon" />
|
|
||||||
<link rel="stylesheet" href="/customize/main.css" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
@ -1,89 +0,0 @@
|
|||||||
define([
|
|
||||||
'/api/config',
|
|
||||||
'jquery',
|
|
||||||
'/bower_components/chainpad-crypto/crypto.js',
|
|
||||||
'/bower_components/chainpad-netflux/chainpad-netflux.js',
|
|
||||||
'/common/toolbar.js',
|
|
||||||
'/common/cryptpad-common.js',
|
|
||||||
'/common/visible.js',
|
|
||||||
'/common/notify.js',
|
|
||||||
'/file/file-crypto.js',
|
|
||||||
'/bower_components/tweetnacl/nacl-fast.min.js',
|
|
||||||
'/bower_components/file-saver/FileSaver.min.js',
|
|
||||||
], function (Config, $, Crypto, realtimeInput, Toolbar, Cryptpad, Visible, Notify, FileCrypto) {
|
|
||||||
var urlArgs = Config.requireConf.urlArgs;
|
|
||||||
var Nacl = window.nacl;
|
|
||||||
$(function () {
|
|
||||||
|
|
||||||
var filesAreSame = function (a, b) {
|
|
||||||
var l = a.length;
|
|
||||||
if (l !== b.length) { return false; }
|
|
||||||
|
|
||||||
var i = 0;
|
|
||||||
for (; i < l; i++) { if (a[i] !== b[i]) { return false; } }
|
|
||||||
return true;
|
|
||||||
};
|
|
||||||
|
|
||||||
var metadataIsSame = function (A, B) {
|
|
||||||
return !Object.keys(A).some(function (k) {
|
|
||||||
return A[k] !== B[k];
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
var upload = function (blob, metadata) {
|
|
||||||
var u8 = new Uint8Array(blob);
|
|
||||||
var key = Nacl.randomBytes(32);
|
|
||||||
|
|
||||||
var next = FileCrypto.encrypt(u8, metadata, key);
|
|
||||||
|
|
||||||
var chunks = [];
|
|
||||||
var sendChunk = function (box, cb) {
|
|
||||||
chunks.push(box);
|
|
||||||
cb();
|
|
||||||
};
|
|
||||||
|
|
||||||
var again = function (err, box) {
|
|
||||||
if (err) { throw new Error(err); }
|
|
||||||
|
|
||||||
if (box) {
|
|
||||||
return void sendChunk(box, function (e) {
|
|
||||||
if (e) {
|
|
||||||
console.error(e);
|
|
||||||
return Cryptpad.alert('Something went wrong');
|
|
||||||
}
|
|
||||||
next(again);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
// check if the uploaded file can be decrypted
|
|
||||||
var newU8 = FileCrypto.joinChunks(chunks);
|
|
||||||
|
|
||||||
console.log('encrypted file with metadata is %s uint8s', newU8.length);
|
|
||||||
FileCrypto.decrypt(newU8, key, function (e, res) {
|
|
||||||
if (e) { return Cryptpad.alert(e); }
|
|
||||||
|
|
||||||
if (filesAreSame(blob, res.content) &&
|
|
||||||
metadataIsSame(res.metadata, metadata)) {
|
|
||||||
Cryptpad.alert("successfully uploaded");
|
|
||||||
} else {
|
|
||||||
Cryptpad.alert('encryption failure!');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
next(again);
|
|
||||||
};
|
|
||||||
|
|
||||||
var andThen = function () {
|
|
||||||
var src = '/customize/cryptofist_mini.png?' + urlArgs;
|
|
||||||
Cryptpad.fetch(src, function (e, file) {
|
|
||||||
console.log('original file is %s uint8s', file.length);
|
|
||||||
upload(file, {
|
|
||||||
pew: 'pew',
|
|
||||||
bang: 'bang',
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
andThen();
|
|
||||||
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html class="cp poll">
|
|
||||||
<head>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
||||||
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
|
|
||||||
<title data-localization="poll_title">Zero Knowledge Date Picker</title>
|
|
||||||
<script async data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"
|
|
||||||
data-bootload="/customize/template.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
@ -1,806 +0,0 @@
|
|||||||
define([
|
|
||||||
'jquery',
|
|
||||||
'/bower_components/textpatcher/TextPatcher.js',
|
|
||||||
'/bower_components/chainpad-listmap/chainpad-listmap.js',
|
|
||||||
'/bower_components/chainpad-crypto/crypto.js',
|
|
||||||
'/common/cryptpad-common.js',
|
|
||||||
'/common/cryptget.js',
|
|
||||||
'/bower_components/hyperjson/hyperjson.js',
|
|
||||||
'render.js',
|
|
||||||
'/common/toolbar2.js',
|
|
||||||
'/bower_components/file-saver/FileSaver.min.js',
|
|
||||||
|
|
||||||
'less!/bower_components/components-font-awesome/css/font-awesome.min.css',
|
|
||||||
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
|
|
||||||
'less!/customize/src/less/toolbar.less',
|
|
||||||
'less!/customize/src/less/cryptpad.less',
|
|
||||||
'less!/poll/poll.less',
|
|
||||||
], function ($, TextPatcher, Listmap, Crypto, Cryptpad, Cryptget, Hyperjson, Renderer, Toolbar) {
|
|
||||||
|
|
||||||
var Messages = Cryptpad.Messages;
|
|
||||||
|
|
||||||
$(function () {
|
|
||||||
|
|
||||||
var HIDE_INTRODUCTION_TEXT = "hide-text";
|
|
||||||
var defaultName;
|
|
||||||
|
|
||||||
var secret = Cryptpad.getSecrets();
|
|
||||||
var readOnly = secret.keys && !secret.keys.editKeyStr;
|
|
||||||
// DEPRECATE_F
|
|
||||||
if (!secret.keys) {
|
|
||||||
secret.keys = secret.key;
|
|
||||||
}
|
|
||||||
|
|
||||||
var DEBUG = false;
|
|
||||||
var debug = console.log;
|
|
||||||
if (!DEBUG) {
|
|
||||||
debug = function() {};
|
|
||||||
}
|
|
||||||
|
|
||||||
Cryptpad.addLoadingScreen();
|
|
||||||
var onConnectError = function () {
|
|
||||||
Cryptpad.errorLoadingScreen(Messages.websocketError);
|
|
||||||
};
|
|
||||||
|
|
||||||
var Render = Renderer(Cryptpad);
|
|
||||||
|
|
||||||
var APP = window.APP = {
|
|
||||||
Toolbar: Toolbar,
|
|
||||||
Hyperjson: Hyperjson,
|
|
||||||
Render: Render,
|
|
||||||
$bar: $('#toolbar'),
|
|
||||||
editable: {
|
|
||||||
row: [],
|
|
||||||
col: []
|
|
||||||
},
|
|
||||||
locked: false
|
|
||||||
};
|
|
||||||
|
|
||||||
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.table.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.table.colsOrder.forEach(function (x) {
|
|
||||||
if (newObj.table.colsOrder.indexOf(x) !== -1) { return; }
|
|
||||||
newObj.table.colsOrder.push(x);
|
|
||||||
});
|
|
||||||
for (var k in uncommitted.table.cols) {
|
|
||||||
if (!newObj.table.cols[k]) {
|
|
||||||
newObj.table.cols[k] = uncommitted.table.cols[k];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
for (var l in uncommitted.table.cells) {
|
|
||||||
if (!newObj.table.cells[l]) {
|
|
||||||
newObj.table.cells[l] = uncommitted.table.cells[l];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return newObj;
|
|
||||||
};
|
|
||||||
|
|
||||||
var styleUncommittedColumn = function () {
|
|
||||||
var id = APP.userid;
|
|
||||||
|
|
||||||
// Enable the checkboxes for the user's column (committed or not)
|
|
||||||
$('input[disabled="disabled"][data-rt-id^="' + id + '"]').removeAttr('disabled');
|
|
||||||
$('input[type="number"][data-rt-id^="' + id + '"]').addClass('enabled');
|
|
||||||
$('.lock[data-rt-id="' + id + '"]').addClass('fa-unlock').removeClass('fa-lock').attr('title', Messages.poll_unlocked);
|
|
||||||
|
|
||||||
if (isOwnColumnCommitted()) { return; }
|
|
||||||
$('[data-rt-id^="' + id + '"]').closest('td').addClass("uncommitted");
|
|
||||||
$('td.uncommitted .cover').addClass("uncommitted");
|
|
||||||
$('.uncommitted input[type="text"]').attr("placeholder", Messages.poll_userPlaceholder);
|
|
||||||
};
|
|
||||||
|
|
||||||
var unlockElements = function () {
|
|
||||||
APP.editable.row.forEach(function (id) {
|
|
||||||
var $input = $('input[type="text"][disabled="disabled"][data-rt-id="' + id + '"]').removeAttr('disabled');
|
|
||||||
$input.parent().parent().addClass('editing');
|
|
||||||
$('span.edit[data-rt-id="' + id + '"]').css('visibility', 'hidden');
|
|
||||||
});
|
|
||||||
APP.editable.col.forEach(function (id) {
|
|
||||||
var $input = $('input[disabled="disabled"][data-rt-id^="' + id + '"]').removeAttr('disabled');
|
|
||||||
$input.parent().addClass('editing');
|
|
||||||
$('input[type="number"][data-rt-id^="' + id + '"]').addClass('enabled');
|
|
||||||
$('.lock[data-rt-id="' + id + '"]').addClass('fa-unlock').removeClass('fa-lock').attr('title', Messages.poll_unlocked);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
var updateTableButtons = function () {
|
|
||||||
if (!isOwnColumnCommitted()) {
|
|
||||||
$('#commit').show();
|
|
||||||
}
|
|
||||||
|
|
||||||
var $createOption = APP.$table.find('tfoot tr td:first-child');
|
|
||||||
var $commitCell = APP.$table.find('tfoot tr td:nth-child(2)');
|
|
||||||
$createOption.append(APP.$createRow);
|
|
||||||
$commitCell.append(APP.$commit);
|
|
||||||
$('#create-user, #create-option').css('display', 'inline-flex');
|
|
||||||
if (!APP.proxy || !APP.proxy.table.rowsOrder || APP.proxy.table.rowsOrder.length === 0) { $('#create-user').hide(); }
|
|
||||||
var width = $('#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(); }
|
|
||||||
$('#create-option').hide();
|
|
||||||
$('.remove[data-rt-id^="y"], .edit[data-rt-id^="y"]').hide();
|
|
||||||
} else {
|
|
||||||
if (APP.$publish) { APP.$publish.show(); }
|
|
||||||
if (APP.$admin) { APP.$admin.hide(); }
|
|
||||||
$('#create-option').show();
|
|
||||||
$('.remove[data-rt-id^="y"], .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.editable.col.indexOf(id) === -1) {
|
|
||||||
APP.editable.col.push(id);
|
|
||||||
}
|
|
||||||
if (typeof(cb) === "function") {
|
|
||||||
cb();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
var unlockRow = function (id, cb) {
|
|
||||||
if (APP.editable.row.indexOf(id) === -1) {
|
|
||||||
APP.editable.row.push(id);
|
|
||||||
}
|
|
||||||
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.table.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
|
|
||||||
*/
|
|
||||||
Cryptpad.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.table.rowsOrder.forEach(function (rowId) {
|
|
||||||
$('input[data-rt-id="' + rowId +'"]').val(APP.proxy.table.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.table.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.editable.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 (target, isKeyup) {
|
|
||||||
if (APP.locked) { return; }
|
|
||||||
if (!isKeyup && $(target).is('[type="text"]')) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
$('.lock[data-rt-id!="' + APP.userid + '"]').addClass('fa-lock').removeClass('fa-unlock').attr('title', Messages.poll_locked);
|
|
||||||
var $cells = APP.$table.find('thead td:not(.uncommitted), tbody td');
|
|
||||||
$cells.find('[type="text"][data-rt-id!="' + APP.userid + '"]').attr('disabled', true);
|
|
||||||
$cells.removeClass('editing');
|
|
||||||
$('.edit[data-rt-id!="' + APP.userid + '"]').css('visibility', 'visible');
|
|
||||||
APP.editable.col = [APP.userid];
|
|
||||||
APP.editable.row = [];
|
|
||||||
};
|
|
||||||
|
|
||||||
/* 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('remove') !== -1;
|
|
||||||
var isEdit = span.className && span.className.split(' ').indexOf('edit') !== -1;
|
|
||||||
var isLock = span.className && span.className.split(' ').indexOf('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 (type === 'cell') {
|
|
||||||
change();
|
|
||||||
} else {
|
|
||||||
debug("UNHANDLED");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
var handleClick = function (e, isKeyup) {
|
|
||||||
if (APP.locked) { 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('#table tbody').length && $(target).hasClass('lock'))) {
|
|
||||||
hideInputs(e);
|
|
||||||
}
|
|
||||||
|
|
||||||
switch (nodeName) {
|
|
||||||
case 'INPUT':
|
|
||||||
if (isKeyup && (e.keyCode === 13 || e.keyCode === 27)) {
|
|
||||||
hideInputs(target, isKeyup);
|
|
||||||
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.info = proxy.info || schema.info;
|
|
||||||
Object.keys(schema.info).forEach(function (k) {
|
|
||||||
if (!proxy.info[k]) { proxy.info[k] = schema.info[k]; }
|
|
||||||
});
|
|
||||||
|
|
||||||
proxy.table = proxy.table || schema.table;
|
|
||||||
Object.keys(schema.table).forEach(function (k) {
|
|
||||||
if (!proxy.table[k]) { proxy.table[k] = schema.table[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 = !$('#howItWorks').is(':visible'); }
|
|
||||||
|
|
||||||
var msg = (help ? Messages.poll_hide_help_button : Messages.poll_show_help_button);
|
|
||||||
|
|
||||||
$('#howItWorks').toggle(help);
|
|
||||||
$('#help').text(msg);
|
|
||||||
};
|
|
||||||
|
|
||||||
var Title;
|
|
||||||
var UserList;
|
|
||||||
|
|
||||||
var copyObject = function (obj) {
|
|
||||||
return JSON.parse(JSON.stringify(obj));
|
|
||||||
};
|
|
||||||
|
|
||||||
// special UI elements
|
|
||||||
var $description = $('#description').attr('placeholder', Messages.poll_descriptionHint || 'description');
|
|
||||||
|
|
||||||
var ready = function (info, userid, readOnly) {
|
|
||||||
debug("READY");
|
|
||||||
debug('userid: %s', userid);
|
|
||||||
|
|
||||||
var proxy = APP.proxy;
|
|
||||||
|
|
||||||
var isNew = false;
|
|
||||||
var userDoc = JSON.stringify(proxy);
|
|
||||||
if (userDoc === "" || userDoc === "{}") { isNew = true; }
|
|
||||||
|
|
||||||
if (!isNew && typeof(proxy.type) !== 'undefined' && proxy.type !== 'poll') {
|
|
||||||
var errorText = Messages.typeError;
|
|
||||||
Cryptpad.errorLoadingScreen(errorText);
|
|
||||||
throw new Error(errorText);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof(proxy.type) === 'undefined') {
|
|
||||||
proxy.type = 'poll';
|
|
||||||
}
|
|
||||||
|
|
||||||
var uncommitted = APP.uncommitted = {};
|
|
||||||
prepareProxy(proxy, copyObject(Render.Example));
|
|
||||||
prepareProxy(uncommitted, copyObject(Render.Example));
|
|
||||||
if (!readOnly && proxy.table.colsOrder.indexOf(userid) === -1 &&
|
|
||||||
uncommitted.table.colsOrder.indexOf(userid) === -1) {
|
|
||||||
uncommitted.table.colsOrder.unshift(userid);
|
|
||||||
}
|
|
||||||
|
|
||||||
var displayedObj = mergeUncommitted(proxy, uncommitted, false);
|
|
||||||
|
|
||||||
var colsOrder = sortColumns(displayedObj.table.colsOrder, userid);
|
|
||||||
|
|
||||||
var $table = APP.$table = $(Render.asHTML(displayedObj, null, colsOrder, readOnly));
|
|
||||||
APP.$createRow = $('#create-option').click(function () {
|
|
||||||
Render.createRow(proxy, function (empty, id) {
|
|
||||||
change(null, null, null, null, function() {
|
|
||||||
handleSpan($('.edit[data-rt-id="' + id + '"]')[0]);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
APP.$createCol = $('#create-user').click(function () {
|
|
||||||
Render.createColumn(proxy, function (empty, id) {
|
|
||||||
change(null, null, null, null, function() {
|
|
||||||
handleSpan($('.lock[data-rt-id="' + id + '"]')[0]);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Commit button
|
|
||||||
APP.$commit = $('#commit').click(function () {
|
|
||||||
var uncommittedCopy = JSON.parse(JSON.stringify(APP.uncommitted));
|
|
||||||
APP.uncommitted = {};
|
|
||||||
prepareProxy(APP.uncommitted, copyObject(Render.Example));
|
|
||||||
mergeUncommitted(proxy, uncommittedCopy, true);
|
|
||||||
APP.$commit.hide();
|
|
||||||
change();
|
|
||||||
});
|
|
||||||
|
|
||||||
// #publish button is removed in readonly
|
|
||||||
APP.$publish = $('#publish')
|
|
||||||
.click(function () {
|
|
||||||
publish(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
APP.$admin = $('#admin')
|
|
||||||
.click(function () {
|
|
||||||
publish(false);
|
|
||||||
});
|
|
||||||
|
|
||||||
APP.$help = $('#help')
|
|
||||||
.click(function () {
|
|
||||||
showHelp();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Title
|
|
||||||
if (APP.proxy.info.defaultTitle) {
|
|
||||||
Title.updateDefaultTitle(APP.proxy.info.defaultTitle);
|
|
||||||
} else {
|
|
||||||
APP.proxy.info.defaultTitle = Title.defaultTitle;
|
|
||||||
}
|
|
||||||
|
|
||||||
var andThen = function () {
|
|
||||||
if (readOnly) { return; }
|
|
||||||
Cryptpad.setPadAttribute('userid', userid, function (e) {
|
|
||||||
if (e) { console.error(e); }
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
if (Cryptpad.initialName && !APP.proxy.info.title) {
|
|
||||||
APP.proxy.info.title = Cryptpad.initialName;
|
|
||||||
Title.updateTitle(Cryptpad.initialName, null, andThen);
|
|
||||||
} else {
|
|
||||||
Title.updateTitle(APP.proxy.info.title || Title.defaultTitle, null, andThen);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Description
|
|
||||||
var resize = function () {
|
|
||||||
var lineCount = $description.val().split('\n').length;
|
|
||||||
$description.css('height', lineCount + 'rem');
|
|
||||||
};
|
|
||||||
$description.on('change keyup', function () {
|
|
||||||
var val = $description.val();
|
|
||||||
proxy.info.description = val;
|
|
||||||
resize();
|
|
||||||
});
|
|
||||||
resize();
|
|
||||||
if (typeof(proxy.info.description) !== 'undefined') {
|
|
||||||
$description.val(proxy.info.description);
|
|
||||||
}
|
|
||||||
|
|
||||||
$('#tableScroll').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', ['info'], function (o, n, p) {
|
|
||||||
if (p[1] === 'title') {
|
|
||||||
Title.updateTitle(n);
|
|
||||||
Cryptpad.notify();
|
|
||||||
} else if (p[1] === "userData") {
|
|
||||||
UserList.addToUserData(APP.proxy.info.userData);
|
|
||||||
} else if (p[1] === 'description') {
|
|
||||||
var op = TextPatcher.diff(o, n);
|
|
||||||
var el = $description[0];
|
|
||||||
|
|
||||||
var selects = ['selectionStart', 'selectionEnd'].map(function (attr) {
|
|
||||||
return TextPatcher.transformCursor(el[attr], op);
|
|
||||||
});
|
|
||||||
$description.val(n);
|
|
||||||
if (op) {
|
|
||||||
el.selectionStart = selects[0];
|
|
||||||
el.selectionEnd = selects[1];
|
|
||||||
}
|
|
||||||
Cryptpad.notify();
|
|
||||||
}
|
|
||||||
|
|
||||||
debug("change: (%s, %s, [%s])", o, n, p.join(', '));
|
|
||||||
})
|
|
||||||
.on('change', ['table'], change)
|
|
||||||
.on('remove', [], change);
|
|
||||||
|
|
||||||
var userInput = $('.uncommitted > input');
|
|
||||||
if (userInput.val() === '')
|
|
||||||
{
|
|
||||||
userInput.val(Cryptpad.getProxy()[Cryptpad.displayNameKey]);
|
|
||||||
}
|
|
||||||
|
|
||||||
UserList.addToUserData(APP.proxy.info.userData);
|
|
||||||
|
|
||||||
APP.ready = true;
|
|
||||||
if (!proxy.published) {
|
|
||||||
publish(false);
|
|
||||||
} else {
|
|
||||||
publish(true);
|
|
||||||
}
|
|
||||||
|
|
||||||
Cryptpad.removeLoadingScreen();
|
|
||||||
|
|
||||||
if (readOnly) { return; }
|
|
||||||
UserList.getLastName(APP.toolbar.$userNameButton, isNew);
|
|
||||||
};
|
|
||||||
|
|
||||||
var setEditable = function (editable) {
|
|
||||||
APP.locked = !editable;
|
|
||||||
|
|
||||||
if (editable === false) {
|
|
||||||
// disable all the things
|
|
||||||
$('.realtime input, .realtime button, .upper button, .realtime textarea').attr('disabled', APP.locked);
|
|
||||||
$('span.edit, span.remove').hide();
|
|
||||||
$('span.lock').addClass('fa-lock').removeClass('fa-unlock')
|
|
||||||
.attr('title', Messages.poll_locked)
|
|
||||||
.css({'cursor': 'default'});
|
|
||||||
} else {
|
|
||||||
// enable
|
|
||||||
$('span.edit, span.remove').show();
|
|
||||||
$('span.lock').css({'cursor': ''});
|
|
||||||
$('.realtime button, .upper button, .realtime textarea').attr('disabled', APP.locked);
|
|
||||||
unlockElements();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
var disconnect = function () {
|
|
||||||
setEditable(false);
|
|
||||||
APP.toolbar.failed();
|
|
||||||
Cryptpad.alert(Messages.common_connectionLost, undefined, true);
|
|
||||||
};
|
|
||||||
|
|
||||||
var reconnect = function (info) {
|
|
||||||
setEditable(true);
|
|
||||||
APP.toolbar.reconnecting(info.myId);
|
|
||||||
Cryptpad.findOKButton().click();
|
|
||||||
};
|
|
||||||
|
|
||||||
var create = function (info) {
|
|
||||||
APP.myID = info.myID;
|
|
||||||
|
|
||||||
var editHash;
|
|
||||||
if (!readOnly) {
|
|
||||||
editHash = Cryptpad.getEditHashFromKeys(info.channel, secret.keys);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (APP.realtime !== info.realtime) {
|
|
||||||
APP.realtime = info.realtime;
|
|
||||||
APP.patchText = TextPatcher.create({
|
|
||||||
realtime: info.realtime,
|
|
||||||
logging: true,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
var onLocal = function () {
|
|
||||||
APP.proxy.info.userData = UserList.userData;
|
|
||||||
};
|
|
||||||
UserList = Cryptpad.createUserList(info, onLocal, Cryptget, Cryptpad);
|
|
||||||
|
|
||||||
var onLocalTitle = function () {
|
|
||||||
APP.proxy.info.title = Title.isDefaultTitle() ? "" : Title.title;
|
|
||||||
};
|
|
||||||
Title = Cryptpad.createTitle({}, onLocalTitle, Cryptpad);
|
|
||||||
|
|
||||||
var configTb = {
|
|
||||||
displayed: ['title', 'useradmin', 'spinner', 'lag', 'state', 'share', 'userlist', 'newpad', 'limit', 'upgrade'],
|
|
||||||
userList: UserList.getToolbarConfig(),
|
|
||||||
share: {
|
|
||||||
secret: secret,
|
|
||||||
channel: info.channel
|
|
||||||
},
|
|
||||||
title: Title.getTitleConfig(),
|
|
||||||
common: Cryptpad,
|
|
||||||
readOnly: readOnly,
|
|
||||||
ifrw: window,
|
|
||||||
realtime: info.realtime,
|
|
||||||
network: info.network,
|
|
||||||
$container: APP.$bar,
|
|
||||||
$contentContainer: $('#content')
|
|
||||||
};
|
|
||||||
APP.toolbar = Toolbar.create(configTb);
|
|
||||||
|
|
||||||
Title.setToolbar(APP.toolbar);
|
|
||||||
|
|
||||||
var $rightside = APP.toolbar.$rightside;
|
|
||||||
|
|
||||||
/* 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);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// don't initialize until the store is ready.
|
|
||||||
Cryptpad.ready(function () {
|
|
||||||
Cryptpad.reportAppUsage();
|
|
||||||
var config = {
|
|
||||||
websocketURL: Cryptpad.getWebsocketURL(),
|
|
||||||
channel: secret.channel,
|
|
||||||
readOnly: readOnly,
|
|
||||||
data: {},
|
|
||||||
// our public key
|
|
||||||
validateKey: secret.keys.validateKey || undefined,
|
|
||||||
//readOnly: readOnly,
|
|
||||||
crypto: Crypto.createEncryptor(secret.keys),
|
|
||||||
userName: 'poll',
|
|
||||||
network: Cryptpad.getNetwork()
|
|
||||||
};
|
|
||||||
|
|
||||||
if (readOnly) {
|
|
||||||
$('#commit, #create-user, #create-option, #publish, #admin').remove();
|
|
||||||
}
|
|
||||||
|
|
||||||
var parsedHash = Cryptpad.parsePadUrl(window.location.href);
|
|
||||||
defaultName = Cryptpad.getDefaultName(parsedHash);
|
|
||||||
var rt = window.rt = APP.rt = Listmap.create(config);
|
|
||||||
APP.proxy = rt.proxy;
|
|
||||||
rt.proxy
|
|
||||||
.on('create', create)
|
|
||||||
.on('ready', function (info) {
|
|
||||||
Cryptpad.getPadAttribute('userid', function (e, userid) {
|
|
||||||
if (e) { console.error(e); }
|
|
||||||
if (!userid) { userid = Render.coluid(); }
|
|
||||||
APP.userid = userid;
|
|
||||||
ready(info, userid, readOnly);
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.on('disconnect', disconnect)
|
|
||||||
.on('reconnect', reconnect);
|
|
||||||
|
|
||||||
Cryptpad.getAttribute(['poll', HIDE_INTRODUCTION_TEXT], function (e, value) {
|
|
||||||
if (e) { console.error(e); }
|
|
||||||
if (!value) {
|
|
||||||
Cryptpad.setAttribute(['poll', HIDE_INTRODUCTION_TEXT], "1", function (e) {
|
|
||||||
if (e) { console.error(e); }
|
|
||||||
});
|
|
||||||
showHelp(true);
|
|
||||||
} else {
|
|
||||||
showHelp(false);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
Cryptpad.onLogout(function () { setEditable(false); });
|
|
||||||
});
|
|
||||||
Cryptpad.onError(function (info) {
|
|
||||||
if (info) {
|
|
||||||
onConnectError();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1,479 +0,0 @@
|
|||||||
@import "/customize/src/less/variables.less";
|
|
||||||
@import "/customize/src/less/mixins.less";
|
|
||||||
|
|
||||||
@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;
|
|
||||||
|
|
||||||
html, body {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
border: 0px;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
#content {
|
|
||||||
display: flex;
|
|
||||||
flex: 1;
|
|
||||||
#poll {
|
|
||||||
flex: 1;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.cryptpad-toolbar h2 {
|
|
||||||
font: normal normal normal 12px Arial, Helvetica, Tahoma, Verdana, Sans-Serif;
|
|
||||||
color: #000;
|
|
||||||
line-height: auto;
|
|
||||||
}
|
|
||||||
.cryptpad-toolbar {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.realtime {
|
|
||||||
display: block;
|
|
||||||
max-height: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.realtime input[type="text"] {
|
|
||||||
height: 1em;
|
|
||||||
margin: 0px;
|
|
||||||
}
|
|
||||||
.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#table {
|
|
||||||
margin: 0px;
|
|
||||||
}
|
|
||||||
#tableContainer {
|
|
||||||
position: relative;
|
|
||||||
padding: 29px;
|
|
||||||
padding-right: 79px;
|
|
||||||
}
|
|
||||||
#tableContainer button {
|
|
||||||
height: 2rem;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
#publish {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
#publish, #admin {
|
|
||||||
margin-top: 15px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
#create-user {
|
|
||||||
position: absolute;
|
|
||||||
display: inline-block;
|
|
||||||
/*left: 0px;*/
|
|
||||||
top: 55px;
|
|
||||||
width: 50px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
#create-option {
|
|
||||||
width: 50px;
|
|
||||||
}
|
|
||||||
#tableScroll {
|
|
||||||
overflow-y: hidden;
|
|
||||||
overflow-x: auto;
|
|
||||||
margin-left: calc(~"30% - 50px + 31px");
|
|
||||||
max-width: 70%;
|
|
||||||
width: auto;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
#description {
|
|
||||||
padding: 15px;
|
|
||||||
margin: auto;
|
|
||||||
|
|
||||||
min-width: 80%;
|
|
||||||
width: 80%;
|
|
||||||
min-height: 7em;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: bold;
|
|
||||||
border: 1px solid black;
|
|
||||||
|
|
||||||
}
|
|
||||||
#description[disabled] {
|
|
||||||
resize: none;
|
|
||||||
color: #000;
|
|
||||||
border: 1px solid #444;
|
|
||||||
}
|
|
||||||
|
|
||||||
#commit {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
#howItWorks {
|
|
||||||
width: 80%;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
div.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: @cp-green;
|
|
||||||
text-decoration: none;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
&:nth-child(odd) {
|
|
||||||
background-color: @light-base;
|
|
||||||
}
|
|
||||||
th:first-of-type {
|
|
||||||
border-left: 0px;
|
|
||||||
}
|
|
||||||
th {
|
|
||||||
box-sizing: border-box;
|
|
||||||
border: 1px solid @poll-border-color;
|
|
||||||
}
|
|
||||||
th, td {
|
|
||||||
color: @fore;
|
|
||||||
|
|
||||||
&.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
form.realtime, div.realtime {
|
|
||||||
> input {
|
|
||||||
&[type="text"] {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> textarea {
|
|
||||||
width: 50%;
|
|
||||||
height: 15vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
padding: 0px;
|
|
||||||
margin: 0px;
|
|
||||||
|
|
||||||
table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
width: ~"calc(100% - 1px)";
|
|
||||||
.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.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.checkbox-cell {
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
height: 100%;
|
|
||||||
min-width: 150px;
|
|
||||||
|
|
||||||
div.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;
|
|
||||||
|
|
||||||
~ .cover {
|
|
||||||
display: block;
|
|
||||||
font-weight: bold;
|
|
||||||
|
|
||||||
color: @poll-cover-color;
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
&.yes {
|
|
||||||
background-color: @cp-green;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.uncommitted {
|
|
||||||
background: #ddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.mine {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="number"][value="0"] {
|
|
||||||
~ .cover {
|
|
||||||
background-color: @cp-red;
|
|
||||||
&:after { content: "✖"; }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
input[type="number"][value="1"] {
|
|
||||||
~ .cover {
|
|
||||||
background-color: @cp-green;
|
|
||||||
&:after { content: "✔"; }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
input[type="number"][value="2"] {
|
|
||||||
~ .cover {
|
|
||||||
background-color: @poll-option-yellow;
|
|
||||||
&:after { content: "~"; }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
input[type="number"][value="3"] {
|
|
||||||
~ .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;
|
|
||||||
.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(.editing) {
|
|
||||||
.text-cell {
|
|
||||||
background: @poll-td-bg;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.text-cell {
|
|
||||||
//border-radius: 20px 0 0 20px;
|
|
||||||
input[type="text"] {
|
|
||||||
width: ~"calc(100% - 50px)";
|
|
||||||
padding: 0 0.5em;
|
|
||||||
}
|
|
||||||
.edit {
|
|
||||||
float:right;
|
|
||||||
margin: 0 10px 0 0;
|
|
||||||
}
|
|
||||||
.remove {
|
|
||||||
float: left;
|
|
||||||
margin: 0 0 0 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
tr:not(:first-child) {
|
|
||||||
td:not(:first-child) {
|
|
||||||
label {
|
|
||||||
border-top: 1px solid @poll-border-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.edit {
|
|
||||||
color: @poll-cover-color;
|
|
||||||
cursor: pointer;
|
|
||||||
float: left;
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lock {
|
|
||||||
margin-left: ~"calc(50% - 0.5em)";
|
|
||||||
cursor: pointer;
|
|
||||||
width: 1em;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.remove {
|
|
||||||
float: right;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
thead {
|
|
||||||
tr {
|
|
||||||
th {
|
|
||||||
input[type="text"][disabled] {
|
|
||||||
background-color: transparent;
|
|
||||||
color: @fore;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.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: @cp-green;
|
|
||||||
border: 1px solid @cp-green;
|
|
||||||
padding: 15px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#adduser { .top-left; }
|
|
||||||
#addoption { .bottom-left; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -1,453 +0,0 @@
|
|||||||
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 = {
|
|
||||||
info: {
|
|
||||||
title: '',
|
|
||||||
description: '',
|
|
||||||
userData: {}
|
|
||||||
},
|
|
||||||
table: {
|
|
||||||
/* 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, ['table', 'cols'].concat([colId]));
|
|
||||||
};
|
|
||||||
|
|
||||||
var getRowValue = Render.getRowValue = function (obj, rowId) {
|
|
||||||
return Cryptpad.find(obj, ['table', 'rows'].concat([rowId]));
|
|
||||||
};
|
|
||||||
|
|
||||||
var getCellValue = Render.getCellValue = function (obj, cellId) {
|
|
||||||
var value = Cryptpad.find(obj, ['table', '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, ['table', 'rows']);
|
|
||||||
if (typeof(parent) === 'object') { return (parent[rowId] = value); }
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
|
|
||||||
var setColumnValue = Render.setColumnValue = function (obj, colId, value) {
|
|
||||||
var parent = Cryptpad.find(obj, ['table', 'cols']);
|
|
||||||
if (typeof(parent) === 'object') { return (parent[colId] = value); }
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
|
|
||||||
var setCellValue = Render.setCellValue = function (obj, cellId, value) {
|
|
||||||
var parent = Cryptpad.find(obj, ['table', 'cells']);
|
|
||||||
if (typeof(parent) === 'object') { return (parent[cellId] = value); }
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
|
|
||||||
Render.createColumn = function (obj, cb, id, value) {
|
|
||||||
var order = Cryptpad.find(obj, ['table', '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, ['table', 'colsOrder']);
|
|
||||||
var parent = Cryptpad.find(obj, ['table', '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.table.cells).forEach(function (key) {
|
|
||||||
if (key.indexOf(id) === 0) {
|
|
||||||
delete obj.table.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, ['table', '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, ['table', 'rowsOrder']);
|
|
||||||
var parent = Cryptpad.find(obj, ['table', '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, ['table', 'rowsOrder']);
|
|
||||||
};
|
|
||||||
|
|
||||||
var getColIds = Render.getColIds = function (obj) {
|
|
||||||
return Cryptpad.find(obj, ['table', 'colsOrder']);
|
|
||||||
};
|
|
||||||
|
|
||||||
var getCells = Render.getCells = function (obj) {
|
|
||||||
return Cryptpad.find(obj, ['table', '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': '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: 'remove',
|
|
||||||
}, ['✖']];
|
|
||||||
};
|
|
||||||
|
|
||||||
var makeEditElement = Render.makeEditElement = function (id) {
|
|
||||||
return ['SPAN', {
|
|
||||||
'data-rt-id': id,
|
|
||||||
'title': Cryptpad.Messages.poll_edit,
|
|
||||||
class: 'edit',
|
|
||||||
}, ['✐']];
|
|
||||||
};
|
|
||||||
|
|
||||||
var makeLockElement = Render.makeLockElement = function (id) {
|
|
||||||
return ['SPAN', {
|
|
||||||
'data-rt-id': id,
|
|
||||||
'title': Cryptpad.Messages.poll_locked,
|
|
||||||
class: '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 = 'cover';
|
|
||||||
|
|
||||||
// TODO implement Yes/No/Maybe/Undecided
|
|
||||||
return ['TD', {class:"checkbox-cell"}, [
|
|
||||||
['DIV', {class: '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: '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:'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;
|
|
||||||
});
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html class="cp">
|
|
||||||
<!-- If this file is not called customize.dist/src/template.html, it is generated -->
|
|
||||||
<head>
|
|
||||||
<title data-localization="main_title">CryptPad: Zero Knowledge, Collaborative Real Time Editing</title>
|
|
||||||
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
||||||
<link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/>
|
|
||||||
<script async data-bootload="/customize/template.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="/bower_components/codemirror/lib/codemirror.css">
|
|
||||||
<link rel="stylesheet" href="/bower_components/codemirror/addon/dialog/dialog.css">
|
|
||||||
<link rel="stylesheet" href="/bower_components/codemirror/addon/fold/foldgutter.css" />
|
|
||||||
</head>
|
|
||||||
<body class="html">
|
|
||||||
<noscript>
|
|
||||||
<p><strong>OOPS</strong> In order to do encryption in your browser, Javascript is really <strong>really</strong> required.</p>
|
|
||||||
<p><strong>OUPS</strong> Afin de pouvoir réaliser le chiffrement dans votre navigateur, Javascript est <strong>vraiment</strong> nécessaire.</p>
|
|
||||||
</noscript>
|
|
||||||
</html>
|
|
||||||
@ -1,532 +0,0 @@
|
|||||||
require.config({
|
|
||||||
paths: {
|
|
||||||
cm: '/bower_components/codemirror'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
define([
|
|
||||||
'jquery',
|
|
||||||
'/common/cryptpad-common.js',
|
|
||||||
'/bower_components/chainpad-listmap/chainpad-listmap.js',
|
|
||||||
'/bower_components/chainpad-crypto/crypto.js',
|
|
||||||
'/bower_components/marked/marked.min.js',
|
|
||||||
'/common/toolbar2.js',
|
|
||||||
'cm/lib/codemirror',
|
|
||||||
'cm/mode/markdown/markdown',
|
|
||||||
'less!/profile/main.less',
|
|
||||||
'less!/customize/src/less/toolbar.less',
|
|
||||||
'less!/customize/src/less/cryptpad.less',
|
|
||||||
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
|
|
||||||
], function ($, Cryptpad, Listmap, Crypto, Marked, Toolbar, CodeMirror) {
|
|
||||||
|
|
||||||
var APP = window.APP = {
|
|
||||||
Cryptpad: Cryptpad,
|
|
||||||
_onRefresh: []
|
|
||||||
};
|
|
||||||
|
|
||||||
$(window.document).on('decryption', function (e) {
|
|
||||||
var decrypted = e.originalEvent;
|
|
||||||
if (decrypted.callback) { decrypted.callback(); }
|
|
||||||
})
|
|
||||||
.on('decryptionError', function (e) {
|
|
||||||
var error = e.originalEvent;
|
|
||||||
Cryptpad.alert(error.message);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Marked
|
|
||||||
var renderer = new Marked.Renderer();
|
|
||||||
Marked.setOptions({
|
|
||||||
renderer: renderer,
|
|
||||||
sanitize: true
|
|
||||||
});
|
|
||||||
// Tasks list
|
|
||||||
var checkedTaskItemPtn = /^\s*\[x\]\s*/;
|
|
||||||
var uncheckedTaskItemPtn = /^\s*\[ \]\s*/;
|
|
||||||
renderer.listitem = function (text) {
|
|
||||||
var isCheckedTaskItem = checkedTaskItemPtn.test(text);
|
|
||||||
var isUncheckedTaskItem = uncheckedTaskItemPtn.test(text);
|
|
||||||
if (isCheckedTaskItem) {
|
|
||||||
text = text.replace(checkedTaskItemPtn,
|
|
||||||
'<i class="fa fa-check-square" aria-hidden="true"></i> ') + '\n';
|
|
||||||
}
|
|
||||||
if (isUncheckedTaskItem) {
|
|
||||||
text = text.replace(uncheckedTaskItemPtn,
|
|
||||||
'<i class="fa fa-square-o" aria-hidden="true"></i> ') + '\n';
|
|
||||||
}
|
|
||||||
var cls = (isCheckedTaskItem || isUncheckedTaskItem) ? ' class="todo-list-item"' : '';
|
|
||||||
return '<li'+ cls + '>' + text + '</li>\n';
|
|
||||||
};
|
|
||||||
/*renderer.image = function (href, title, text) {
|
|
||||||
if (href.slice(0,6) === '/file/') {
|
|
||||||
var parsed = Cryptpad.parsePadUrl(href);
|
|
||||||
var hexFileName = Cryptpad.base64ToHex(parsed.hashData.channel);
|
|
||||||
var src = '/blob/' + hexFileName.slice(0,2) + '/' + hexFileName;
|
|
||||||
var mt = '<media-tag src="' + src + '" data-crypto-key="cryptpad:' + parsed.hashData.key + '">';
|
|
||||||
mt += '</media-tag>';
|
|
||||||
return mt;
|
|
||||||
}
|
|
||||||
var out = '<img src="' + href + '" alt="' + text + '"';
|
|
||||||
if (title) {
|
|
||||||
out += ' title="' + title + '"';
|
|
||||||
}
|
|
||||||
out += this.options.xhtml ? '/>' : '>';
|
|
||||||
return out;
|
|
||||||
};*/
|
|
||||||
|
|
||||||
var Messages = Cryptpad.Messages;
|
|
||||||
|
|
||||||
var DISPLAYNAME_ID = "displayName";
|
|
||||||
var LINK_ID = "link";
|
|
||||||
var AVATAR_ID = "avatar";
|
|
||||||
var DESCRIPTION_ID = "description";
|
|
||||||
var PUBKEY_ID = "pubKey";
|
|
||||||
var CREATE_ID = "createProfile";
|
|
||||||
var HEADER_ID = "header";
|
|
||||||
var HEADER_RIGHT_ID = "rightside";
|
|
||||||
var CREATE_INVITE_BUTTON = 'inviteButton'; /* jshint ignore: line */
|
|
||||||
var VIEW_PROFILE_BUTTON = 'viewProfileButton';
|
|
||||||
|
|
||||||
var createEditableInput = function ($block, name, ph, getValue, setValue, realtime, fallbackValue) {
|
|
||||||
fallbackValue = fallbackValue || ''; // don't ever display 'null' or 'undefined'
|
|
||||||
var lastVal;
|
|
||||||
getValue(function (value) {
|
|
||||||
lastVal = value;
|
|
||||||
var $input = $('<input>', {
|
|
||||||
'id': name+'Input',
|
|
||||||
placeholder: ph
|
|
||||||
}).val(value);
|
|
||||||
var $icon = $('<span>', {'class': 'fa fa-pencil edit'});
|
|
||||||
var editing = false;
|
|
||||||
var todo = function () {
|
|
||||||
if (editing) { return; }
|
|
||||||
editing = true;
|
|
||||||
|
|
||||||
var newVal = $input.val().trim();
|
|
||||||
|
|
||||||
if (newVal === lastVal) {
|
|
||||||
editing = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setValue(newVal, function (err) {
|
|
||||||
if (err) { return void console.error(err); }
|
|
||||||
Cryptpad.whenRealtimeSyncs(realtime, function () {
|
|
||||||
lastVal = newVal;
|
|
||||||
Cryptpad.log(Messages._getKey('profile_fieldSaved', [newVal || fallbackValue]));
|
|
||||||
editing = false;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
$input.on('keyup', function (e) {
|
|
||||||
if (e.which === 13) { return void todo(); }
|
|
||||||
if (e.which === 27) {
|
|
||||||
$input.val(lastVal);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
$icon.click(function () { $input.focus(); });
|
|
||||||
$input.focus(function () {
|
|
||||||
$input.width('');
|
|
||||||
});
|
|
||||||
$input.focusout(todo);
|
|
||||||
$block.append($input).append($icon);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/* jshint ignore:start */
|
|
||||||
var isFriend = function (proxy, edKey) {
|
|
||||||
var friends = Cryptpad.find(proxy, ['friends']);
|
|
||||||
return typeof(edKey) === 'string' && friends && (edKey in friends);
|
|
||||||
};
|
|
||||||
|
|
||||||
var addCreateInviteLinkButton = function ($container) {
|
|
||||||
return;
|
|
||||||
var obj = APP.lm.proxy;
|
|
||||||
|
|
||||||
var proxy = Cryptpad.getProxy();
|
|
||||||
var userViewHash = Cryptpad.find(proxy, ['profile', 'view']);
|
|
||||||
|
|
||||||
var edKey = obj.edKey;
|
|
||||||
var curveKey = obj.curveKey;
|
|
||||||
|
|
||||||
if (!APP.readOnly || !curveKey || !edKey || userViewHash === window.location.hash.slice(1) || isFriend(proxy, edKey)) {
|
|
||||||
//console.log("edit mode or missing curve key, or you're viewing your own profile");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// sanitize user inputs
|
|
||||||
|
|
||||||
var unsafeName = obj.name || '';
|
|
||||||
console.log(unsafeName);
|
|
||||||
var name = Cryptpad.fixHTML(unsafeName) || Messages.anonymous;
|
|
||||||
console.log(name);
|
|
||||||
|
|
||||||
console.log("Creating invite button");
|
|
||||||
$("<button>", {
|
|
||||||
id: CREATE_INVITE_BUTTON,
|
|
||||||
title: Messages.profile_inviteButtonTitle,
|
|
||||||
})
|
|
||||||
.addClass('btn btn-success')
|
|
||||||
.text(Messages.profile_inviteButton)
|
|
||||||
.click(function () {
|
|
||||||
Cryptpad.confirm(Messages._getKey('profile_inviteExplanation', [name]), function (yes) {
|
|
||||||
if (!yes) { return; }
|
|
||||||
console.log(obj.curveKey);
|
|
||||||
Cryptpad.alert("TODO");
|
|
||||||
// TODO create a listmap object using your curve keys
|
|
||||||
// TODO fill the listmap object with your invite data
|
|
||||||
// TODO generate link to invite object
|
|
||||||
// TODO copy invite link to clipboard
|
|
||||||
}, null, true);
|
|
||||||
})
|
|
||||||
.appendTo($container);
|
|
||||||
};
|
|
||||||
/* jshint ignore:end */
|
|
||||||
|
|
||||||
var addViewButton = function ($container) {
|
|
||||||
if (!Cryptpad.isLoggedIn() || window.location.hash) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var hash = Cryptpad.find(Cryptpad.getProxy(), ['profile', 'view']);
|
|
||||||
var url = '/profile/#' + hash;
|
|
||||||
|
|
||||||
var $button = $('<button>', {
|
|
||||||
'class': 'btn btn-success',
|
|
||||||
id: VIEW_PROFILE_BUTTON,
|
|
||||||
})
|
|
||||||
.text(Messages.profile_viewMyProfile)
|
|
||||||
.click(function () {
|
|
||||||
window.open(url, '_blank');
|
|
||||||
});
|
|
||||||
$container.append($button);
|
|
||||||
};
|
|
||||||
|
|
||||||
var addDisplayName = function ($container) {
|
|
||||||
var $block = $('<div>', {id: DISPLAYNAME_ID}).appendTo($container);
|
|
||||||
|
|
||||||
|
|
||||||
var getValue = function (cb) {
|
|
||||||
cb(APP.lm.proxy.name);
|
|
||||||
};
|
|
||||||
var placeholder = Messages.profile_namePlaceholder;
|
|
||||||
if (APP.readOnly) {
|
|
||||||
var $span = $('<span>', {'class': DISPLAYNAME_ID}).appendTo($block);
|
|
||||||
getValue(function (value) {
|
|
||||||
$span.text(value || Messages.anonymous);
|
|
||||||
});
|
|
||||||
|
|
||||||
//addCreateInviteLinkButton($block);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var setValue = function (value, cb) {
|
|
||||||
APP.lm.proxy.name = value;
|
|
||||||
cb();
|
|
||||||
};
|
|
||||||
var rt = Cryptpad.getStore().getProxy().info.realtime;
|
|
||||||
createEditableInput($block, DISPLAYNAME_ID, placeholder, getValue, setValue, rt, Messages.anonymous);
|
|
||||||
};
|
|
||||||
|
|
||||||
var addLink = function ($container) {
|
|
||||||
var $block = $('<div>', {id: LINK_ID}).appendTo($container);
|
|
||||||
var getValue = function (cb) {
|
|
||||||
cb(APP.lm.proxy.url);
|
|
||||||
};
|
|
||||||
if (APP.readOnly) {
|
|
||||||
var $a = $('<a>', {
|
|
||||||
'class': LINK_ID,
|
|
||||||
target: '_blank',
|
|
||||||
rel: 'noreferrer noopener'
|
|
||||||
}).appendTo($block);
|
|
||||||
getValue(function (value) {
|
|
||||||
if (!value) {
|
|
||||||
return void $a.hide();
|
|
||||||
}
|
|
||||||
$a.attr('href', value).text(value);
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var setValue = function (value, cb) {
|
|
||||||
APP.lm.proxy.url = value;
|
|
||||||
cb();
|
|
||||||
};
|
|
||||||
var rt = APP.lm.realtime;
|
|
||||||
var placeholder = Messages.profile_urlPlaceholder;
|
|
||||||
createEditableInput($block, LINK_ID, placeholder, getValue, setValue, rt);
|
|
||||||
};
|
|
||||||
|
|
||||||
var addAvatar = function ($container) {
|
|
||||||
var $block = $('<div>', {id: AVATAR_ID}).appendTo($container);
|
|
||||||
var $span = $('<span>').appendTo($block);
|
|
||||||
var allowedMediaTypes = Cryptpad.avatarAllowedTypes;
|
|
||||||
var displayAvatar = function () {
|
|
||||||
$span.html('');
|
|
||||||
if (!APP.lm.proxy.avatar) {
|
|
||||||
$('<img>', {
|
|
||||||
src: '/customize/images/avatar.png',
|
|
||||||
title: Messages.profile_avatar,
|
|
||||||
alt: 'Avatar'
|
|
||||||
}).appendTo($span);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
Cryptpad.displayAvatar($span, APP.lm.proxy.avatar);
|
|
||||||
|
|
||||||
if (APP.readOnly) { return; }
|
|
||||||
|
|
||||||
var $delButton = $('<button>', {
|
|
||||||
'class': 'delete btn btn-danger fa fa-times',
|
|
||||||
title: Messages.fc_delete
|
|
||||||
});
|
|
||||||
$span.append($delButton);
|
|
||||||
$delButton.click(function () {
|
|
||||||
var oldChanId = Cryptpad.hrefToHexChannelId(APP.lm.proxy.avatar);
|
|
||||||
Cryptpad.unpinPads([oldChanId], function (e) {
|
|
||||||
if (e) { Cryptpad.log(e); }
|
|
||||||
delete APP.lm.proxy.avatar;
|
|
||||||
delete Cryptpad.getProxy().profile.avatar;
|
|
||||||
Cryptpad.whenRealtimeSyncs(APP.lm.realtime, function () {
|
|
||||||
var driveRt = Cryptpad.getStore().getProxy().info.realtime;
|
|
||||||
Cryptpad.whenRealtimeSyncs(driveRt, function () {
|
|
||||||
displayAvatar();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
displayAvatar();
|
|
||||||
if (APP.readOnly) { return; }
|
|
||||||
|
|
||||||
var fmConfig = {
|
|
||||||
noHandlers: true,
|
|
||||||
noStore: true,
|
|
||||||
body: $('body'),
|
|
||||||
onUploaded: function (ev, data) {
|
|
||||||
var chanId = Cryptpad.hrefToHexChannelId(data.url);
|
|
||||||
var profile = Cryptpad.getProxy().profile;
|
|
||||||
var old = profile.avatar;
|
|
||||||
var todo = function () {
|
|
||||||
Cryptpad.pinPads([chanId], function (e) {
|
|
||||||
if (e) { return void Cryptpad.log(e); }
|
|
||||||
APP.lm.proxy.avatar = data.url;
|
|
||||||
Cryptpad.getProxy().profile.avatar = data.url;
|
|
||||||
Cryptpad.whenRealtimeSyncs(APP.lm.realtime, function () {
|
|
||||||
var driveRt = Cryptpad.getStore().getProxy().info.realtime;
|
|
||||||
Cryptpad.whenRealtimeSyncs(driveRt, function () {
|
|
||||||
displayAvatar();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
if (old) {
|
|
||||||
var oldChanId = Cryptpad.hrefToHexChannelId(old);
|
|
||||||
Cryptpad.unpinPads([oldChanId], function (e) {
|
|
||||||
if (e) { Cryptpad.log(e); }
|
|
||||||
todo();
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
todo();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
APP.FM = Cryptpad.createFileManager(fmConfig);
|
|
||||||
var data = {
|
|
||||||
FM: APP.FM,
|
|
||||||
filter: function (file) {
|
|
||||||
var sizeMB = Cryptpad.bytesToMegabytes(file.size);
|
|
||||||
var type = file.type;
|
|
||||||
return sizeMB <= 0.5 && allowedMediaTypes.indexOf(type) !== -1;
|
|
||||||
},
|
|
||||||
accept: ".gif,.jpg,.jpeg,.png"
|
|
||||||
};
|
|
||||||
var $upButton = Cryptpad.createButton('upload', false, data);
|
|
||||||
$upButton.text(Messages.profile_upload);
|
|
||||||
$upButton.prepend($('<span>', {'class': 'fa fa-upload'}));
|
|
||||||
$block.append($upButton);
|
|
||||||
};
|
|
||||||
|
|
||||||
var addDescription = function ($container) {
|
|
||||||
var $block = $('<div>', {id: DESCRIPTION_ID}).appendTo($container);
|
|
||||||
|
|
||||||
if (APP.readOnly) {
|
|
||||||
if (!(APP.lm.proxy.description || "").trim()) { return void $block.hide(); }
|
|
||||||
var $div = $('<div>', {'class': 'rendered'}).appendTo($block);
|
|
||||||
var val = Marked(APP.lm.proxy.description);
|
|
||||||
$div.html(val);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
$('<h3>').text(Messages.profile_description).insertBefore($block);
|
|
||||||
|
|
||||||
var $ok = $('<span>', {'class': 'ok fa fa-check', title: Messages.saved}).appendTo($block);
|
|
||||||
var $spinner = $('<span>', {'class': 'spin fa fa-spinner fa-pulse'}).appendTo($block);
|
|
||||||
var $textarea = $('<textarea>').val(APP.lm.proxy.description || '');
|
|
||||||
$block.append($textarea);
|
|
||||||
var editor = APP.editor = CodeMirror.fromTextArea($textarea[0], {
|
|
||||||
lineNumbers: true,
|
|
||||||
lineWrapping: true,
|
|
||||||
styleActiveLine : true,
|
|
||||||
mode: "markdown",
|
|
||||||
});
|
|
||||||
|
|
||||||
var onLocal = function () {
|
|
||||||
$ok.hide();
|
|
||||||
$spinner.show();
|
|
||||||
var val = editor.getValue();
|
|
||||||
APP.lm.proxy.description = val;
|
|
||||||
Cryptpad.whenRealtimeSyncs(APP.lm.realtime, function () {
|
|
||||||
$ok.show();
|
|
||||||
$spinner.hide();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
editor.on('change', onLocal);
|
|
||||||
};
|
|
||||||
|
|
||||||
var addPublicKey = function ($container) {
|
|
||||||
var $block = $('<div>', {id: PUBKEY_ID});
|
|
||||||
$container.append($block);
|
|
||||||
};
|
|
||||||
|
|
||||||
var createLeftside = function () {
|
|
||||||
var $categories = $('<div>', {'class': 'categories'}).appendTo(APP.$leftside);
|
|
||||||
APP.$usage = $('<div>', {'class': 'usage'}).appendTo(APP.$leftside);
|
|
||||||
|
|
||||||
var $category = $('<div>', {'class': 'category'}).appendTo($categories);
|
|
||||||
$category.append($('<span>', {'class': 'fa fa-user'}));
|
|
||||||
$category.addClass('active');
|
|
||||||
$category.append(Messages.profileButton);
|
|
||||||
};
|
|
||||||
|
|
||||||
var createToolbar = function () {
|
|
||||||
var displayed = ['useradmin', 'newpad', 'limit', 'upgrade', 'pageTitle'];
|
|
||||||
var configTb = {
|
|
||||||
displayed: displayed,
|
|
||||||
ifrw: window,
|
|
||||||
common: Cryptpad,
|
|
||||||
$container: APP.$toolbar,
|
|
||||||
pageTitle: Messages.profileButton
|
|
||||||
};
|
|
||||||
var toolbar = APP.toolbar = Toolbar.create(configTb);
|
|
||||||
toolbar.$rightside.html(''); // Remove the drawer if we don't use it to hide the toolbar
|
|
||||||
};
|
|
||||||
|
|
||||||
var onReady = function () {
|
|
||||||
APP.$container.find('#'+CREATE_ID).remove();
|
|
||||||
|
|
||||||
var obj = APP.lm && APP.lm.proxy;
|
|
||||||
if (!APP.readOnly) {
|
|
||||||
var pubKeys = Cryptpad.getPublicKeys();
|
|
||||||
if (pubKeys && pubKeys.curve) {
|
|
||||||
obj.curveKey = pubKeys.curve;
|
|
||||||
obj.edKey = pubKeys.ed;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!APP.initialized) {
|
|
||||||
var $header = $('<div>', {id: HEADER_ID}).appendTo(APP.$rightside);
|
|
||||||
addAvatar($header);
|
|
||||||
var $rightside = $('<div>', {id: HEADER_RIGHT_ID}).appendTo($header);
|
|
||||||
addDisplayName($rightside);
|
|
||||||
addLink($rightside);
|
|
||||||
addDescription(APP.$rightside);
|
|
||||||
addViewButton(APP.$rightside); //$rightside);
|
|
||||||
addPublicKey(APP.$rightside);
|
|
||||||
APP.initialized = true;
|
|
||||||
createLeftside();
|
|
||||||
}
|
|
||||||
|
|
||||||
Cryptpad.removeLoadingScreen();
|
|
||||||
};
|
|
||||||
|
|
||||||
var onInit = function () {
|
|
||||||
|
|
||||||
};
|
|
||||||
var onDisconnect = function () {};
|
|
||||||
var onChange = function () {};
|
|
||||||
|
|
||||||
var andThen = function (profileHash) {
|
|
||||||
var secret = Cryptpad.getSecrets('profile', profileHash);
|
|
||||||
var readOnly = APP.readOnly = secret.keys && !secret.keys.editKeyStr;
|
|
||||||
var listmapConfig = {
|
|
||||||
data: {},
|
|
||||||
websocketURL: Cryptpad.getWebsocketURL(),
|
|
||||||
channel: secret.channel,
|
|
||||||
readOnly: readOnly,
|
|
||||||
validateKey: secret.keys.validateKey || undefined,
|
|
||||||
crypto: Crypto.createEncryptor(secret.keys),
|
|
||||||
userName: 'profile',
|
|
||||||
logLevel: 1,
|
|
||||||
};
|
|
||||||
var lm = APP.lm = Listmap.create(listmapConfig);
|
|
||||||
lm.proxy.on('create', onInit)
|
|
||||||
.on('ready', onReady)
|
|
||||||
.on('disconnect', onDisconnect)
|
|
||||||
.on('change', [], onChange);
|
|
||||||
};
|
|
||||||
|
|
||||||
var getOrCreateProfile = function () {
|
|
||||||
var obj = Cryptpad.getStore().getProxy().proxy;
|
|
||||||
if (obj.profile && obj.profile.view && obj.profile.edit) {
|
|
||||||
return void andThen(obj.profile.edit);
|
|
||||||
}
|
|
||||||
// If the user doesn't have a public profile, ask them if they want to create one
|
|
||||||
var todo = function () {
|
|
||||||
var secret = Cryptpad.getSecrets();
|
|
||||||
obj.profile = {};
|
|
||||||
var channel = Cryptpad.createChannelId();
|
|
||||||
Cryptpad.pinPads([channel], function (e) {
|
|
||||||
if (e) {
|
|
||||||
if (e === 'E_OVER_LIMIT') {
|
|
||||||
Cryptpad.alert(Messages.pinLimitNotPinned, null, true);
|
|
||||||
}
|
|
||||||
return void Cryptpad.log(Messages._getKey('profile_error', [e]));
|
|
||||||
}
|
|
||||||
obj.profile.edit = Cryptpad.getEditHashFromKeys(channel, secret.keys);
|
|
||||||
obj.profile.view = Cryptpad.getViewHashFromKeys(channel, secret.keys);
|
|
||||||
andThen(obj.profile.edit);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
Cryptpad.removeLoadingScreen();
|
|
||||||
|
|
||||||
if (!Cryptpad.isLoggedIn()) {
|
|
||||||
var $p = $('<p>', {id: CREATE_ID}).append(Messages.profile_register);
|
|
||||||
var $a = $('<a>', {
|
|
||||||
href: '/register/'
|
|
||||||
});
|
|
||||||
$('<button>', {
|
|
||||||
'class': 'btn btn-success',
|
|
||||||
}).text(Messages.login_register).appendTo($a);
|
|
||||||
$p.append($('<br>')).append($a);
|
|
||||||
APP.$rightside.append($p);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// make an empty profile for the user on their first visit
|
|
||||||
todo();
|
|
||||||
};
|
|
||||||
|
|
||||||
var onCryptpadReady = function () {
|
|
||||||
APP.$leftside = $('<div>', {id: 'leftSide'}).appendTo(APP.$container);
|
|
||||||
APP.$rightside = $('<div>', {id: 'rightSide'}).appendTo(APP.$container);
|
|
||||||
|
|
||||||
createToolbar();
|
|
||||||
|
|
||||||
if (window.location.hash) {
|
|
||||||
return void andThen(window.location.hash.slice(1));
|
|
||||||
}
|
|
||||||
getOrCreateProfile();
|
|
||||||
};
|
|
||||||
|
|
||||||
$(function () {
|
|
||||||
$(window).click(function () {
|
|
||||||
$('.cp-dropdown-content').hide();
|
|
||||||
});
|
|
||||||
|
|
||||||
APP.$container = $('#container');
|
|
||||||
APP.$toolbar = $('#toolbar');
|
|
||||||
|
|
||||||
Cryptpad.ready(function () {
|
|
||||||
Cryptpad.reportAppUsage();
|
|
||||||
onCryptpadReady();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
@ -1,143 +0,0 @@
|
|||||||
@import '/customize/src/less/variables.less';
|
|
||||||
@import '/customize/src/less/mixins.less';
|
|
||||||
@import '/customize/src/less/sidebar-layout.less';
|
|
||||||
|
|
||||||
.cp {
|
|
||||||
#header {
|
|
||||||
display: flex;
|
|
||||||
#rightside {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#avatar {
|
|
||||||
width: 300px;
|
|
||||||
//height: 350px;
|
|
||||||
margin: 10px;
|
|
||||||
margin-right: 20px;
|
|
||||||
text-align: center;
|
|
||||||
&> span {
|
|
||||||
display: inline-block;
|
|
||||||
text-align: center;
|
|
||||||
height: 300px;
|
|
||||||
width: 300px;
|
|
||||||
border: 1px solid black;
|
|
||||||
border-radius: 4px;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
.delete {
|
|
||||||
right: 0;
|
|
||||||
position: absolute;
|
|
||||||
opacity: 0.7;
|
|
||||||
&:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
media-tag {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
img {
|
|
||||||
min-width: 100%;
|
|
||||||
min-height: 100%;
|
|
||||||
max-width: none;
|
|
||||||
max-height: none;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
height: 40px;
|
|
||||||
margin: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#displayName, #link {
|
|
||||||
width: 100%;
|
|
||||||
height: 40px;
|
|
||||||
margin: 10px 0;
|
|
||||||
input {
|
|
||||||
width: 100%;
|
|
||||||
font-size: 20px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding-right: 30px;
|
|
||||||
}
|
|
||||||
input:focus ~ .edit {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.edit {
|
|
||||||
position: absolute;
|
|
||||||
margin-left: -25px;
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
.temp {
|
|
||||||
font-weight: 400;
|
|
||||||
font-family: sans-serif;
|
|
||||||
}
|
|
||||||
.displayName {
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 30px;
|
|
||||||
}
|
|
||||||
.link {
|
|
||||||
font-size: 25px;
|
|
||||||
}
|
|
||||||
.displayName, .link {
|
|
||||||
line-height: 40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// I tried using flexbox but messed with how the pencil icon was displayed
|
|
||||||
#inviteButton {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
#viewProfileButton {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
#description {
|
|
||||||
position: relative;
|
|
||||||
font-size: 16px;
|
|
||||||
border: 1px solid #DDD;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
.rendered {
|
|
||||||
padding: 0 15px;
|
|
||||||
}
|
|
||||||
.ok, .spin {
|
|
||||||
position: absolute;
|
|
||||||
top: 2px;
|
|
||||||
right: 2px;
|
|
||||||
display: none;
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
textarea {
|
|
||||||
width: 100%;
|
|
||||||
height: 300px;
|
|
||||||
}
|
|
||||||
.CodeMirror {
|
|
||||||
border: 1px solid #DDD;
|
|
||||||
font-family: monospace;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: initial;
|
|
||||||
pre {
|
|
||||||
margin: 0;
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
line-height: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#createProfile {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,141 +0,0 @@
|
|||||||
hr {
|
|
||||||
margin: 20px 0;
|
|
||||||
border: 0;
|
|
||||||
border-top: 1px dashed #c5c5c5;
|
|
||||||
border-bottom: 1px dashed #f7f7f7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.learn a {
|
|
||||||
font-weight: normal;
|
|
||||||
text-decoration: none;
|
|
||||||
color: #b83f45;
|
|
||||||
}
|
|
||||||
|
|
||||||
.learn a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
color: #787e7e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.learn h3,
|
|
||||||
.learn h4,
|
|
||||||
.learn h5 {
|
|
||||||
margin: 10px 0;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 1.2;
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.learn h3 {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.learn h4 {
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.learn h5 {
|
|
||||||
margin-bottom: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.learn ul {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0 0 30px 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.learn li {
|
|
||||||
line-height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.learn p {
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 300;
|
|
||||||
line-height: 1.3;
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#issue-count {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.quote {
|
|
||||||
border: none;
|
|
||||||
margin: 20px 0 60px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.quote p {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.quote p:before {
|
|
||||||
content: '“';
|
|
||||||
font-size: 50px;
|
|
||||||
opacity: .15;
|
|
||||||
position: absolute;
|
|
||||||
top: -20px;
|
|
||||||
left: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.quote p:after {
|
|
||||||
content: '”';
|
|
||||||
font-size: 50px;
|
|
||||||
opacity: .15;
|
|
||||||
position: absolute;
|
|
||||||
bottom: -42px;
|
|
||||||
right: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.quote footer {
|
|
||||||
position: absolute;
|
|
||||||
bottom: -40px;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.quote footer img {
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.quote footer a {
|
|
||||||
margin-left: 5px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.speech-bubble {
|
|
||||||
position: relative;
|
|
||||||
padding: 10px;
|
|
||||||
background: rgba(0, 0, 0, .04);
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.speech-bubble:after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
right: 30px;
|
|
||||||
border: 13px solid transparent;
|
|
||||||
border-top-color: rgba(0, 0, 0, .04);
|
|
||||||
}
|
|
||||||
|
|
||||||
.learn-bar > .learn {
|
|
||||||
position: absolute;
|
|
||||||
width: 272px;
|
|
||||||
top: 8px;
|
|
||||||
left: -300px;
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: 5px;
|
|
||||||
background-color: rgba(255, 255, 255, .6);
|
|
||||||
transition-property: left;
|
|
||||||
transition-duration: 500ms;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 899px) {
|
|
||||||
.learn-bar {
|
|
||||||
width: auto;
|
|
||||||
padding-left: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.learn-bar > .learn {
|
|
||||||
left: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,249 +0,0 @@
|
|||||||
/* global _ */
|
|
||||||
(function () {
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
/* jshint ignore:start */
|
|
||||||
// Underscore's Template Module
|
|
||||||
// Courtesy of underscorejs.org
|
|
||||||
var _ = (function (_) {
|
|
||||||
_.defaults = function (object) {
|
|
||||||
if (!object) {
|
|
||||||
return object;
|
|
||||||
}
|
|
||||||
for (var argsIndex = 1, argsLength = arguments.length; argsIndex < argsLength; argsIndex++) {
|
|
||||||
var iterable = arguments[argsIndex];
|
|
||||||
if (iterable) {
|
|
||||||
for (var key in iterable) {
|
|
||||||
if (object[key] == null) {
|
|
||||||
object[key] = iterable[key];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return object;
|
|
||||||
}
|
|
||||||
|
|
||||||
// By default, Underscore uses ERB-style template delimiters, change the
|
|
||||||
// following template settings to use alternative delimiters.
|
|
||||||
_.templateSettings = {
|
|
||||||
evaluate : /<%([\s\S]+?)%>/g,
|
|
||||||
interpolate : /<%=([\s\S]+?)%>/g,
|
|
||||||
escape : /<%-([\s\S]+?)%>/g
|
|
||||||
};
|
|
||||||
|
|
||||||
// When customizing `templateSettings`, if you don't want to define an
|
|
||||||
// interpolation, evaluation or escaping regex, we need one that is
|
|
||||||
// guaranteed not to match.
|
|
||||||
var noMatch = /(.)^/;
|
|
||||||
|
|
||||||
// Certain characters need to be escaped so that they can be put into a
|
|
||||||
// string literal.
|
|
||||||
var escapes = {
|
|
||||||
"'": "'",
|
|
||||||
'\\': '\\',
|
|
||||||
'\r': 'r',
|
|
||||||
'\n': 'n',
|
|
||||||
'\t': 't',
|
|
||||||
'\u2028': 'u2028',
|
|
||||||
'\u2029': 'u2029'
|
|
||||||
};
|
|
||||||
|
|
||||||
var escaper = /\\|'|\r|\n|\t|\u2028|\u2029/g;
|
|
||||||
|
|
||||||
// JavaScript micro-templating, similar to John Resig's implementation.
|
|
||||||
// Underscore templating handles arbitrary delimiters, preserves whitespace,
|
|
||||||
// and correctly escapes quotes within interpolated code.
|
|
||||||
_.template = function(text, data, settings) {
|
|
||||||
var render;
|
|
||||||
settings = _.defaults({}, settings, _.templateSettings);
|
|
||||||
|
|
||||||
// Combine delimiters into one regular expression via alternation.
|
|
||||||
var matcher = new RegExp([
|
|
||||||
(settings.escape || noMatch).source,
|
|
||||||
(settings.interpolate || noMatch).source,
|
|
||||||
(settings.evaluate || noMatch).source
|
|
||||||
].join('|') + '|$', 'g');
|
|
||||||
|
|
||||||
// Compile the template source, escaping string literals appropriately.
|
|
||||||
var index = 0;
|
|
||||||
var source = "__p+='";
|
|
||||||
text.replace(matcher, function(match, escape, interpolate, evaluate, offset) {
|
|
||||||
source += text.slice(index, offset)
|
|
||||||
.replace(escaper, function(match) { return '\\' + escapes[match]; });
|
|
||||||
|
|
||||||
if (escape) {
|
|
||||||
source += "'+\n((__t=(" + escape + "))==null?'':_.escape(__t))+\n'";
|
|
||||||
}
|
|
||||||
if (interpolate) {
|
|
||||||
source += "'+\n((__t=(" + interpolate + "))==null?'':__t)+\n'";
|
|
||||||
}
|
|
||||||
if (evaluate) {
|
|
||||||
source += "';\n" + evaluate + "\n__p+='";
|
|
||||||
}
|
|
||||||
index = offset + match.length;
|
|
||||||
return match;
|
|
||||||
});
|
|
||||||
source += "';\n";
|
|
||||||
|
|
||||||
// If a variable is not specified, place data values in local scope.
|
|
||||||
if (!settings.variable) source = 'with(obj||{}){\n' + source + '}\n';
|
|
||||||
|
|
||||||
source = "var __t,__p='',__j=Array.prototype.join," +
|
|
||||||
"print=function(){__p+=__j.call(arguments,'');};\n" +
|
|
||||||
source + "return __p;\n";
|
|
||||||
|
|
||||||
try {
|
|
||||||
render = new Function(settings.variable || 'obj', '_', source);
|
|
||||||
} catch (e) {
|
|
||||||
e.source = source;
|
|
||||||
throw e;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (data) return render(data, _);
|
|
||||||
var template = function(data) {
|
|
||||||
return render.call(this, data, _);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Provide the compiled function source as a convenience for precompilation.
|
|
||||||
template.source = 'function(' + (settings.variable || 'obj') + '){\n' + source + '}';
|
|
||||||
|
|
||||||
return template;
|
|
||||||
};
|
|
||||||
|
|
||||||
return _;
|
|
||||||
})({});
|
|
||||||
|
|
||||||
if (location.hostname === 'todomvc.com') {
|
|
||||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
||||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
||||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
||||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
|
||||||
ga('create', 'UA-31081062-1', 'auto');
|
|
||||||
ga('send', 'pageview');
|
|
||||||
}
|
|
||||||
/* jshint ignore:end */
|
|
||||||
|
|
||||||
function redirect() {
|
|
||||||
if (location.hostname === 'tastejs.github.io') {
|
|
||||||
location.href = location.href.replace('tastejs.github.io/todomvc', 'todomvc.com');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function findRoot() {
|
|
||||||
var base = location.href.indexOf('examples/');
|
|
||||||
return location.href.substr(0, base);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getFile(file, callback) {
|
|
||||||
if (!location.host) {
|
|
||||||
return console.info('Miss the info bar? Run TodoMVC from a server to avoid a cross-origin error.');
|
|
||||||
}
|
|
||||||
|
|
||||||
var xhr = new XMLHttpRequest();
|
|
||||||
|
|
||||||
xhr.open('GET', findRoot() + file, true);
|
|
||||||
xhr.send();
|
|
||||||
|
|
||||||
xhr.onload = function () {
|
|
||||||
if (xhr.status === 200 && callback) {
|
|
||||||
callback(xhr.responseText);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function Learn(learnJSON, config) {
|
|
||||||
if (!(this instanceof Learn)) {
|
|
||||||
return new Learn(learnJSON, config);
|
|
||||||
}
|
|
||||||
|
|
||||||
var template, framework;
|
|
||||||
|
|
||||||
if (typeof learnJSON !== 'object') {
|
|
||||||
try {
|
|
||||||
learnJSON = JSON.parse(learnJSON);
|
|
||||||
} catch (e) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (config) {
|
|
||||||
template = config.template;
|
|
||||||
framework = config.framework;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!template && learnJSON.templates) {
|
|
||||||
template = learnJSON.templates.todomvc;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!framework && document.querySelector('[data-framework]')) {
|
|
||||||
framework = document.querySelector('[data-framework]').dataset.framework;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.template = template;
|
|
||||||
|
|
||||||
if (learnJSON.backend) {
|
|
||||||
this.frameworkJSON = learnJSON.backend;
|
|
||||||
this.frameworkJSON.issueLabel = framework;
|
|
||||||
this.append({
|
|
||||||
backend: true
|
|
||||||
});
|
|
||||||
} else if (learnJSON[framework]) {
|
|
||||||
this.frameworkJSON = learnJSON[framework];
|
|
||||||
this.frameworkJSON.issueLabel = framework;
|
|
||||||
this.append();
|
|
||||||
}
|
|
||||||
|
|
||||||
this.fetchIssueCount();
|
|
||||||
}
|
|
||||||
|
|
||||||
Learn.prototype.append = function (opts) {
|
|
||||||
var aside = document.createElement('aside');
|
|
||||||
aside.innerHTML = _.template(this.template, this.frameworkJSON);
|
|
||||||
aside.className = 'learn';
|
|
||||||
|
|
||||||
if (opts && opts.backend) {
|
|
||||||
// Remove demo link
|
|
||||||
var sourceLinks = aside.querySelector('.source-links');
|
|
||||||
var heading = sourceLinks.firstElementChild;
|
|
||||||
var sourceLink = sourceLinks.lastElementChild;
|
|
||||||
// Correct link path
|
|
||||||
var href = sourceLink.getAttribute('href');
|
|
||||||
sourceLink.setAttribute('href', href.substr(href.lastIndexOf('http')));
|
|
||||||
sourceLinks.innerHTML = heading.outerHTML + sourceLink.outerHTML;
|
|
||||||
} else {
|
|
||||||
// Localize demo links
|
|
||||||
var demoLinks = aside.querySelectorAll('.demo-link');
|
|
||||||
Array.prototype.forEach.call(demoLinks, function (demoLink) {
|
|
||||||
if (demoLink.getAttribute('href').substr(0, 4) !== 'http') {
|
|
||||||
demoLink.setAttribute('href', findRoot() + demoLink.getAttribute('href'));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
document.body.className = (document.body.className + ' learn-bar').trim();
|
|
||||||
document.body.insertAdjacentHTML('afterBegin', aside.outerHTML);
|
|
||||||
};
|
|
||||||
|
|
||||||
Learn.prototype.fetchIssueCount = function () {
|
|
||||||
var issueLink = document.getElementById('issue-count-link');
|
|
||||||
if (issueLink) {
|
|
||||||
var url = issueLink.href.replace('https://github.com', 'https://api.github.com/repos');
|
|
||||||
var xhr = new XMLHttpRequest();
|
|
||||||
xhr.open('GET', url, true);
|
|
||||||
xhr.onload = function (e) {
|
|
||||||
var parsedResponse = JSON.parse(e.target.responseText);
|
|
||||||
if (parsedResponse instanceof Array) {
|
|
||||||
var count = parsedResponse.length;
|
|
||||||
if (count !== 0) {
|
|
||||||
issueLink.innerHTML = 'This app has ' + count + ' open issues';
|
|
||||||
document.getElementById('issue-count').style.display = 'inline';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
xhr.send();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
redirect();
|
|
||||||
getFile('learn.json', Learn);
|
|
||||||
})();
|
|
||||||
@ -1,49 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="en" data-framework="javascript">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Crypt Todo</title>
|
|
||||||
<link rel="stylesheet" href="assets/todomvc-common/base.css">
|
|
||||||
<link rel="stylesheet" href="assets/todomvc-app-css/index.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<section class="todoapp">
|
|
||||||
<header class="header">
|
|
||||||
<h1>todos</h1>
|
|
||||||
<input class="new-todo" placeholder="What needs to be done?" autofocus>
|
|
||||||
</header>
|
|
||||||
<section class="main">
|
|
||||||
<input class="toggle-all" type="checkbox">
|
|
||||||
<label for="toggle-all">Mark all as complete</label>
|
|
||||||
<ul class="todo-list"></ul>
|
|
||||||
</section>
|
|
||||||
<footer class="footer">
|
|
||||||
<span class="todo-count"></span>
|
|
||||||
<ul class="filters">
|
|
||||||
<li>
|
|
||||||
<a href="#/" class="selected">All</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#/active">Active</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#/completed">Completed</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<button class="clear-completed">Clear completed</button>
|
|
||||||
</footer>
|
|
||||||
</section>
|
|
||||||
<footer class="info">
|
|
||||||
|
|
||||||
</footer>
|
|
||||||
<script src="assets/todomvc-common/base.js"></script>
|
|
||||||
<script src="js/helpers.js"></script>
|
|
||||||
<script src="js/store.js"></script>
|
|
||||||
<script src="js/model.js"></script>
|
|
||||||
<script src="js/template.js"></script>
|
|
||||||
<script src="js/view.js"></script>
|
|
||||||
<script src="js/controller.js"></script>
|
|
||||||
<script src="js/app.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
/*global app, $on */
|
|
||||||
(function () {
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Sets up a brand new Todo list.
|
|
||||||
*
|
|
||||||
* @param {string} name The name of your new to do list.
|
|
||||||
*/
|
|
||||||
function Todo(name) {
|
|
||||||
this.storage = new app.Store(name);
|
|
||||||
this.model = new app.Model(this.storage);
|
|
||||||
this.template = new app.Template();
|
|
||||||
this.view = new app.View(this.template);
|
|
||||||
this.controller = new app.Controller(this.model, this.view);
|
|
||||||
}
|
|
||||||
|
|
||||||
var todo = new Todo('todos-vanillajs');
|
|
||||||
|
|
||||||
function setView() {
|
|
||||||
todo.controller.setView(document.location.hash);
|
|
||||||
}
|
|
||||||
$on(window, 'load', setView);
|
|
||||||
$on(window, 'hashchange', setView);
|
|
||||||
})();
|
|
||||||
@ -1,270 +0,0 @@
|
|||||||
(function (window) {
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Takes a model and view and acts as the controller between them
|
|
||||||
*
|
|
||||||
* @constructor
|
|
||||||
* @param {object} model The model instance
|
|
||||||
* @param {object} view The view instance
|
|
||||||
*/
|
|
||||||
function Controller(model, view) {
|
|
||||||
var self = this;
|
|
||||||
self.model = model;
|
|
||||||
self.view = view;
|
|
||||||
|
|
||||||
self.view.bind('newTodo', function (title) {
|
|
||||||
self.addItem(title);
|
|
||||||
});
|
|
||||||
|
|
||||||
self.view.bind('itemEdit', function (item) {
|
|
||||||
self.editItem(item.id);
|
|
||||||
});
|
|
||||||
|
|
||||||
self.view.bind('itemEditDone', function (item) {
|
|
||||||
self.editItemSave(item.id, item.title);
|
|
||||||
});
|
|
||||||
|
|
||||||
self.view.bind('itemEditCancel', function (item) {
|
|
||||||
self.editItemCancel(item.id);
|
|
||||||
});
|
|
||||||
|
|
||||||
self.view.bind('itemRemove', function (item) {
|
|
||||||
self.removeItem(item.id);
|
|
||||||
});
|
|
||||||
|
|
||||||
self.view.bind('itemToggle', function (item) {
|
|
||||||
self.toggleComplete(item.id, item.completed);
|
|
||||||
});
|
|
||||||
|
|
||||||
self.view.bind('removeCompleted', function () {
|
|
||||||
self.removeCompletedItems();
|
|
||||||
});
|
|
||||||
|
|
||||||
self.view.bind('toggleAll', function (status) {
|
|
||||||
self.toggleAll(status.completed);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Loads and initialises the view
|
|
||||||
*
|
|
||||||
* @param {string} '' | 'active' | 'completed'
|
|
||||||
*/
|
|
||||||
Controller.prototype.setView = function (locationHash) {
|
|
||||||
var route = locationHash.split('/')[1];
|
|
||||||
var page = route || '';
|
|
||||||
this._updateFilterState(page);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* An event to fire on load. Will get all items and display them in the
|
|
||||||
* todo-list
|
|
||||||
*/
|
|
||||||
Controller.prototype.showAll = function () {
|
|
||||||
var self = this;
|
|
||||||
self.model.read(function (data) {
|
|
||||||
self.view.render('showEntries', data);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Renders all active tasks
|
|
||||||
*/
|
|
||||||
Controller.prototype.showActive = function () {
|
|
||||||
var self = this;
|
|
||||||
self.model.read({ completed: false }, function (data) {
|
|
||||||
self.view.render('showEntries', data);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Renders all completed tasks
|
|
||||||
*/
|
|
||||||
Controller.prototype.showCompleted = function () {
|
|
||||||
var self = this;
|
|
||||||
self.model.read({ completed: true }, function (data) {
|
|
||||||
self.view.render('showEntries', data);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* An event to fire whenever you want to add an item. Simply pass in the event
|
|
||||||
* object and it'll handle the DOM insertion and saving of the new item.
|
|
||||||
*/
|
|
||||||
Controller.prototype.addItem = function (title) {
|
|
||||||
var self = this;
|
|
||||||
|
|
||||||
if (title.trim() === '') {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
self.model.create(title, function () {
|
|
||||||
self.view.render('clearNewTodo');
|
|
||||||
self._filter(true);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Triggers the item editing mode.
|
|
||||||
*/
|
|
||||||
Controller.prototype.editItem = function (id) {
|
|
||||||
var self = this;
|
|
||||||
self.model.read(id, function (data) {
|
|
||||||
self.view.render('editItem', {id: id, title: data[0].title});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Finishes the item editing mode successfully.
|
|
||||||
*/
|
|
||||||
Controller.prototype.editItemSave = function (id, title) {
|
|
||||||
var self = this;
|
|
||||||
title = title.trim();
|
|
||||||
|
|
||||||
if (title.length !== 0) {
|
|
||||||
self.model.update(id, {title: title}, function () {
|
|
||||||
self.view.render('editItemDone', {id: id, title: title});
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
self.removeItem(id);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Cancels the item editing mode.
|
|
||||||
*/
|
|
||||||
Controller.prototype.editItemCancel = function (id) {
|
|
||||||
var self = this;
|
|
||||||
self.model.read(id, function (data) {
|
|
||||||
self.view.render('editItemDone', {id: id, title: data[0].title});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* By giving it an ID it'll find the DOM element matching that ID,
|
|
||||||
* remove it from the DOM and also remove it from storage.
|
|
||||||
*
|
|
||||||
* @param {number} id The ID of the item to remove from the DOM and
|
|
||||||
* storage
|
|
||||||
*/
|
|
||||||
Controller.prototype.removeItem = function (id) {
|
|
||||||
var self = this;
|
|
||||||
self.model.remove(id, function () {
|
|
||||||
self.view.render('removeItem', id);
|
|
||||||
});
|
|
||||||
|
|
||||||
self._filter();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Will remove all completed items from the DOM and storage.
|
|
||||||
*/
|
|
||||||
Controller.prototype.removeCompletedItems = function () {
|
|
||||||
var self = this;
|
|
||||||
self.model.read({ completed: true }, function (data) {
|
|
||||||
data.forEach(function (item) {
|
|
||||||
self.removeItem(item.id);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
self._filter();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Give it an ID of a model and a checkbox and it will update the item
|
|
||||||
* in storage based on the checkbox's state.
|
|
||||||
*
|
|
||||||
* @param {number} id The ID of the element to complete or uncomplete
|
|
||||||
* @param {object} checkbox The checkbox to check the state of complete
|
|
||||||
* or not
|
|
||||||
* @param {boolean|undefined} silent Prevent re-filtering the todo items
|
|
||||||
*/
|
|
||||||
Controller.prototype.toggleComplete = function (id, completed, silent) {
|
|
||||||
var self = this;
|
|
||||||
self.model.update(id, { completed: completed }, function () {
|
|
||||||
self.view.render('elementComplete', {
|
|
||||||
id: id,
|
|
||||||
completed: completed
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!silent) {
|
|
||||||
self._filter();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Will toggle ALL checkboxes' on/off state and completeness of models.
|
|
||||||
* Just pass in the event object.
|
|
||||||
*/
|
|
||||||
Controller.prototype.toggleAll = function (completed) {
|
|
||||||
var self = this;
|
|
||||||
self.model.read({ completed: !completed }, function (data) {
|
|
||||||
data.forEach(function (item) {
|
|
||||||
self.toggleComplete(item.id, completed, true);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
self._filter();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Updates the pieces of the page which change depending on the remaining
|
|
||||||
* number of todos.
|
|
||||||
*/
|
|
||||||
Controller.prototype._updateCount = function () {
|
|
||||||
var self = this;
|
|
||||||
self.model.getCount(function (todos) {
|
|
||||||
self.view.render('updateElementCount', todos.active);
|
|
||||||
self.view.render('clearCompletedButton', {
|
|
||||||
completed: todos.completed,
|
|
||||||
visible: todos.completed > 0
|
|
||||||
});
|
|
||||||
|
|
||||||
self.view.render('toggleAll', {checked: todos.completed === todos.total});
|
|
||||||
self.view.render('contentBlockVisibility', {visible: todos.total > 0});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Re-filters the todo items, based on the active route.
|
|
||||||
* @param {boolean|undefined} force forces a re-painting of todo items.
|
|
||||||
*/
|
|
||||||
Controller.prototype._filter = function (force) {
|
|
||||||
var activeRoute = this._activeRoute.charAt(0).toUpperCase() + this._activeRoute.substr(1);
|
|
||||||
|
|
||||||
// Update the elements on the page, which change with each completed todo
|
|
||||||
this._updateCount();
|
|
||||||
|
|
||||||
// If the last active route isn't "All", or we're switching routes, we
|
|
||||||
// re-create the todo item elements, calling:
|
|
||||||
// this.show[All|Active|Completed]();
|
|
||||||
if (force || this._lastActiveRoute !== 'All' || this._lastActiveRoute !== activeRoute) {
|
|
||||||
this['show' + activeRoute]();
|
|
||||||
}
|
|
||||||
|
|
||||||
this._lastActiveRoute = activeRoute;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Simply updates the filter nav's selected states
|
|
||||||
*/
|
|
||||||
Controller.prototype._updateFilterState = function (currentPage) {
|
|
||||||
// Store a reference to the active route, allowing us to re-filter todo
|
|
||||||
// items as they are marked complete or incomplete.
|
|
||||||
this._activeRoute = currentPage;
|
|
||||||
|
|
||||||
if (currentPage === '') {
|
|
||||||
this._activeRoute = 'All';
|
|
||||||
}
|
|
||||||
|
|
||||||
this._filter();
|
|
||||||
|
|
||||||
this.view.render('setFilter', currentPage);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Export to window
|
|
||||||
window.app = window.app || {};
|
|
||||||
window.app.Controller = Controller;
|
|
||||||
})(window);
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
/*global NodeList */
|
|
||||||
(function (window) {
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
// Get element(s) by CSS selector:
|
|
||||||
window.qs = function (selector, scope) {
|
|
||||||
return (scope || document).querySelector(selector);
|
|
||||||
};
|
|
||||||
window.qsa = function (selector, scope) {
|
|
||||||
return (scope || document).querySelectorAll(selector);
|
|
||||||
};
|
|
||||||
|
|
||||||
// addEventListener wrapper:
|
|
||||||
window.$on = function (target, type, callback, useCapture) {
|
|
||||||
target.addEventListener(type, callback, !!useCapture);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Attach a handler to event for all elements that match the selector,
|
|
||||||
// now or in the future, based on a root element
|
|
||||||
window.$delegate = function (target, selector, type, handler) {
|
|
||||||
function dispatchEvent(event) {
|
|
||||||
var targetElement = event.target;
|
|
||||||
var potentialElements = window.qsa(selector, target);
|
|
||||||
var hasMatch = Array.prototype.indexOf.call(potentialElements, targetElement) >= 0;
|
|
||||||
|
|
||||||
if (hasMatch) {
|
|
||||||
handler.call(targetElement, event);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// https://developer.mozilla.org/en-US/docs/Web/Events/blur
|
|
||||||
var useCapture = type === 'blur' || type === 'focus';
|
|
||||||
|
|
||||||
window.$on(target, type, dispatchEvent, useCapture);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Find the element's parent with the given tag name:
|
|
||||||
// $parent(qs('a'), 'div');
|
|
||||||
window.$parent = function (element, tagName) {
|
|
||||||
if (!element.parentNode) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (element.parentNode.tagName.toLowerCase() === tagName.toLowerCase()) {
|
|
||||||
return element.parentNode;
|
|
||||||
}
|
|
||||||
return window.$parent(element.parentNode, tagName);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Allow for looping on nodes by chaining:
|
|
||||||
// qsa('.foo').forEach(function () {})
|
|
||||||
NodeList.prototype.forEach = Array.prototype.forEach;
|
|
||||||
})(window);
|
|
||||||
@ -1,141 +0,0 @@
|
|||||||
/*jshint eqeqeq:false */
|
|
||||||
(function (window) {
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Creates a new client side storage object and will create an empty
|
|
||||||
* collection if no collection already exists.
|
|
||||||
*
|
|
||||||
* @param {string} name The name of our DB we want to use
|
|
||||||
* @param {function} callback Our fake DB uses callbacks because in
|
|
||||||
* real life you probably would be making AJAX calls
|
|
||||||
*/
|
|
||||||
function Store(name, callback) {
|
|
||||||
callback = callback || function () {};
|
|
||||||
|
|
||||||
this._dbName = name;
|
|
||||||
|
|
||||||
if (!localStorage[name]) {
|
|
||||||
var data = {
|
|
||||||
todos: []
|
|
||||||
};
|
|
||||||
|
|
||||||
localStorage[name] = JSON.stringify(data);
|
|
||||||
}
|
|
||||||
|
|
||||||
callback.call(this, JSON.parse(localStorage[name]));
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Finds items based on a query given as a JS object
|
|
||||||
*
|
|
||||||
* @param {object} query The query to match against (i.e. {foo: 'bar'})
|
|
||||||
* @param {function} callback The callback to fire when the query has
|
|
||||||
* completed running
|
|
||||||
*
|
|
||||||
* @example
|
|
||||||
* db.find({foo: 'bar', hello: 'world'}, function (data) {
|
|
||||||
* // data will return any items that have foo: bar and
|
|
||||||
* // hello: world in their properties
|
|
||||||
* });
|
|
||||||
*/
|
|
||||||
Store.prototype.find = function (query, callback) {
|
|
||||||
if (!callback) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var todos = JSON.parse(localStorage[this._dbName]).todos;
|
|
||||||
|
|
||||||
callback.call(this, todos.filter(function (todo) {
|
|
||||||
for (var q in query) {
|
|
||||||
if (query[q] !== todo[q]) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
}));
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Will retrieve all data from the collection
|
|
||||||
*
|
|
||||||
* @param {function} callback The callback to fire upon retrieving data
|
|
||||||
*/
|
|
||||||
Store.prototype.findAll = function (callback) {
|
|
||||||
callback = callback || function () {};
|
|
||||||
callback.call(this, JSON.parse(localStorage[this._dbName]).todos);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Will save the given data to the DB. If no item exists it will create a new
|
|
||||||
* item, otherwise it'll simply update an existing item's properties
|
|
||||||
*
|
|
||||||
* @param {object} updateData The data to save back into the DB
|
|
||||||
* @param {function} callback The callback to fire after saving
|
|
||||||
* @param {number} id An optional param to enter an ID of an item to update
|
|
||||||
*/
|
|
||||||
Store.prototype.save = function (updateData, callback, id) {
|
|
||||||
var data = JSON.parse(localStorage[this._dbName]);
|
|
||||||
var todos = data.todos;
|
|
||||||
|
|
||||||
callback = callback || function () {};
|
|
||||||
|
|
||||||
// If an ID was actually given, find the item and update each property
|
|
||||||
if (id) {
|
|
||||||
for (var i = 0; i < todos.length; i++) {
|
|
||||||
if (todos[i].id === id) {
|
|
||||||
for (var key in updateData) {
|
|
||||||
todos[i][key] = updateData[key];
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
localStorage[this._dbName] = JSON.stringify(data);
|
|
||||||
callback.call(this, todos);
|
|
||||||
} else {
|
|
||||||
// Generate an ID
|
|
||||||
updateData.id = new Date().getTime();
|
|
||||||
|
|
||||||
todos.push(updateData);
|
|
||||||
localStorage[this._dbName] = JSON.stringify(data);
|
|
||||||
callback.call(this, [updateData]);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Will remove an item from the Store based on its ID
|
|
||||||
*
|
|
||||||
* @param {number} id The ID of the item you want to remove
|
|
||||||
* @param {function} callback The callback to fire after saving
|
|
||||||
*/
|
|
||||||
Store.prototype.remove = function (id, callback) {
|
|
||||||
var data = JSON.parse(localStorage[this._dbName]);
|
|
||||||
var todos = data.todos;
|
|
||||||
|
|
||||||
for (var i = 0; i < todos.length; i++) {
|
|
||||||
if (todos[i].id == id) {
|
|
||||||
todos.splice(i, 1);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
localStorage[this._dbName] = JSON.stringify(data);
|
|
||||||
callback.call(this, todos);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Will drop all storage and start fresh
|
|
||||||
*
|
|
||||||
* @param {function} callback The callback to fire after dropping the data
|
|
||||||
*/
|
|
||||||
Store.prototype.drop = function (callback) {
|
|
||||||
var data = {todos: []};
|
|
||||||
localStorage[this._dbName] = JSON.stringify(data);
|
|
||||||
callback.call(this, data.todos);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Export to window
|
|
||||||
window.app = window.app || {};
|
|
||||||
window.app.Store = Store;
|
|
||||||
})(window);
|
|
||||||
@ -1,114 +0,0 @@
|
|||||||
/*jshint laxbreak:true */
|
|
||||||
(function (window) {
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
var htmlEscapes = {
|
|
||||||
'&': '&',
|
|
||||||
'<': '<',
|
|
||||||
'>': '>',
|
|
||||||
'"': '"',
|
|
||||||
'\'': ''',
|
|
||||||
'`': '`'
|
|
||||||
};
|
|
||||||
|
|
||||||
var escapeHtmlChar = function (chr) {
|
|
||||||
return htmlEscapes[chr];
|
|
||||||
};
|
|
||||||
|
|
||||||
var reUnescapedHtml = /[&<>"'`]/g;
|
|
||||||
var reHasUnescapedHtml = new RegExp(reUnescapedHtml.source);
|
|
||||||
|
|
||||||
var escape = function (string) {
|
|
||||||
return (string && reHasUnescapedHtml.test(string))
|
|
||||||
? string.replace(reUnescapedHtml, escapeHtmlChar)
|
|
||||||
: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Sets up defaults for all the Template methods such as a default template
|
|
||||||
*
|
|
||||||
* @constructor
|
|
||||||
*/
|
|
||||||
function Template() {
|
|
||||||
this.defaultTemplate
|
|
||||||
= '<li data-id="{{id}}" class="{{completed}}">'
|
|
||||||
+ '<div class="view">'
|
|
||||||
+ '<input class="toggle" type="checkbox" {{checked}}>'
|
|
||||||
+ '<label>{{title}}</label>'
|
|
||||||
+ '<button class="destroy"></button>'
|
|
||||||
+ '</div>'
|
|
||||||
+ '</li>';
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Creates an <li> HTML string and returns it for placement in your app.
|
|
||||||
*
|
|
||||||
* NOTE: In real life you should be using a templating engine such as Mustache
|
|
||||||
* or Handlebars, however, this is a vanilla JS example.
|
|
||||||
*
|
|
||||||
* @param {object} data The object containing keys you want to find in the
|
|
||||||
* template to replace.
|
|
||||||
* @returns {string} HTML String of an <li> element
|
|
||||||
*
|
|
||||||
* @example
|
|
||||||
* view.show({
|
|
||||||
* id: 1,
|
|
||||||
* title: "Hello World",
|
|
||||||
* completed: 0,
|
|
||||||
* });
|
|
||||||
*/
|
|
||||||
Template.prototype.show = function (data) {
|
|
||||||
var i = 0, l = data.length;
|
|
||||||
var view = '';
|
|
||||||
|
|
||||||
for (; i < l; i++) {
|
|
||||||
var template = this.defaultTemplate;
|
|
||||||
var completed = '';
|
|
||||||
var checked = '';
|
|
||||||
|
|
||||||
if (data[i].completed) {
|
|
||||||
completed = 'completed';
|
|
||||||
checked = 'checked';
|
|
||||||
}
|
|
||||||
|
|
||||||
template = template.replace('{{id}}', data[i].id);
|
|
||||||
template = template.replace('{{title}}', escape(data[i].title));
|
|
||||||
template = template.replace('{{completed}}', completed);
|
|
||||||
template = template.replace('{{checked}}', checked);
|
|
||||||
|
|
||||||
view = view + template;
|
|
||||||
}
|
|
||||||
|
|
||||||
return view;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Displays a counter of how many to dos are left to complete
|
|
||||||
*
|
|
||||||
* @param {number} activeTodos The number of active todos.
|
|
||||||
* @returns {string} String containing the count
|
|
||||||
*/
|
|
||||||
Template.prototype.itemCounter = function (activeTodos) {
|
|
||||||
var plural = activeTodos === 1 ? '' : 's';
|
|
||||||
|
|
||||||
return '<strong>' + activeTodos + '</strong> item' + plural + ' left';
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Updates the text within the "Clear completed" button
|
|
||||||
*
|
|
||||||
* @param {[type]} completedTodos The number of completed todos.
|
|
||||||
* @returns {string} String containing the count
|
|
||||||
*/
|
|
||||||
Template.prototype.clearCompletedButton = function (completedTodos) {
|
|
||||||
if (completedTodos > 0) {
|
|
||||||
return 'Clear completed';
|
|
||||||
} else {
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Export to window
|
|
||||||
window.app = window.app || {};
|
|
||||||
window.app.Template = Template;
|
|
||||||
})(window);
|
|
||||||
@ -1,219 +0,0 @@
|
|||||||
/*global qs, qsa, $on, $parent, $delegate */
|
|
||||||
|
|
||||||
(function (window) {
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* View that abstracts away the browser's DOM completely.
|
|
||||||
* It has two simple entry points:
|
|
||||||
*
|
|
||||||
* - bind(eventName, handler)
|
|
||||||
* Takes a todo application event and registers the handler
|
|
||||||
* - render(command, parameterObject)
|
|
||||||
* Renders the given command with the options
|
|
||||||
*/
|
|
||||||
function View(template) {
|
|
||||||
this.template = template;
|
|
||||||
|
|
||||||
this.ENTER_KEY = 13;
|
|
||||||
this.ESCAPE_KEY = 27;
|
|
||||||
|
|
||||||
this.$todoList = qs('.todo-list');
|
|
||||||
this.$todoItemCounter = qs('.todo-count');
|
|
||||||
this.$clearCompleted = qs('.clear-completed');
|
|
||||||
this.$main = qs('.main');
|
|
||||||
this.$footer = qs('.footer');
|
|
||||||
this.$toggleAll = qs('.toggle-all');
|
|
||||||
this.$newTodo = qs('.new-todo');
|
|
||||||
}
|
|
||||||
|
|
||||||
View.prototype._removeItem = function (id) {
|
|
||||||
var elem = qs('[data-id="' + id + '"]');
|
|
||||||
|
|
||||||
if (elem) {
|
|
||||||
this.$todoList.removeChild(elem);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
View.prototype._clearCompletedButton = function (completedCount, visible) {
|
|
||||||
this.$clearCompleted.innerHTML = this.template.clearCompletedButton(completedCount);
|
|
||||||
this.$clearCompleted.style.display = visible ? 'block' : 'none';
|
|
||||||
};
|
|
||||||
|
|
||||||
View.prototype._setFilter = function (currentPage) {
|
|
||||||
qs('.filters .selected').className = '';
|
|
||||||
qs('.filters [href="#/' + currentPage + '"]').className = 'selected';
|
|
||||||
};
|
|
||||||
|
|
||||||
View.prototype._elementComplete = function (id, completed) {
|
|
||||||
var listItem = qs('[data-id="' + id + '"]');
|
|
||||||
|
|
||||||
if (!listItem) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
listItem.className = completed ? 'completed' : '';
|
|
||||||
|
|
||||||
// In case it was toggled from an event and not by clicking the checkbox
|
|
||||||
qs('input', listItem).checked = completed;
|
|
||||||
};
|
|
||||||
|
|
||||||
View.prototype._editItem = function (id, title) {
|
|
||||||
var listItem = qs('[data-id="' + id + '"]');
|
|
||||||
|
|
||||||
if (!listItem) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
listItem.className = listItem.className + ' editing';
|
|
||||||
|
|
||||||
var input = document.createElement('input');
|
|
||||||
input.className = 'edit';
|
|
||||||
|
|
||||||
listItem.appendChild(input);
|
|
||||||
input.focus();
|
|
||||||
input.value = title;
|
|
||||||
};
|
|
||||||
|
|
||||||
View.prototype._editItemDone = function (id, title) {
|
|
||||||
var listItem = qs('[data-id="' + id + '"]');
|
|
||||||
|
|
||||||
if (!listItem) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var input = qs('input.edit', listItem);
|
|
||||||
listItem.removeChild(input);
|
|
||||||
|
|
||||||
listItem.className = listItem.className.replace('editing', '');
|
|
||||||
|
|
||||||
qsa('label', listItem).forEach(function (label) {
|
|
||||||
label.textContent = title;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
View.prototype.render = function (viewCmd, parameter) {
|
|
||||||
var self = this;
|
|
||||||
var viewCommands = {
|
|
||||||
showEntries: function () {
|
|
||||||
self.$todoList.innerHTML = self.template.show(parameter);
|
|
||||||
},
|
|
||||||
removeItem: function () {
|
|
||||||
self._removeItem(parameter);
|
|
||||||
},
|
|
||||||
updateElementCount: function () {
|
|
||||||
self.$todoItemCounter.innerHTML = self.template.itemCounter(parameter);
|
|
||||||
},
|
|
||||||
clearCompletedButton: function () {
|
|
||||||
self._clearCompletedButton(parameter.completed, parameter.visible);
|
|
||||||
},
|
|
||||||
contentBlockVisibility: function () {
|
|
||||||
self.$main.style.display = self.$footer.style.display = parameter.visible ? 'block' : 'none';
|
|
||||||
},
|
|
||||||
toggleAll: function () {
|
|
||||||
self.$toggleAll.checked = parameter.checked;
|
|
||||||
},
|
|
||||||
setFilter: function () {
|
|
||||||
self._setFilter(parameter);
|
|
||||||
},
|
|
||||||
clearNewTodo: function () {
|
|
||||||
self.$newTodo.value = '';
|
|
||||||
},
|
|
||||||
elementComplete: function () {
|
|
||||||
self._elementComplete(parameter.id, parameter.completed);
|
|
||||||
},
|
|
||||||
editItem: function () {
|
|
||||||
self._editItem(parameter.id, parameter.title);
|
|
||||||
},
|
|
||||||
editItemDone: function () {
|
|
||||||
self._editItemDone(parameter.id, parameter.title);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
viewCommands[viewCmd]();
|
|
||||||
};
|
|
||||||
|
|
||||||
View.prototype._itemId = function (element) {
|
|
||||||
var li = $parent(element, 'li');
|
|
||||||
return parseInt(li.dataset.id, 10);
|
|
||||||
};
|
|
||||||
|
|
||||||
View.prototype._bindItemEditDone = function (handler) {
|
|
||||||
var self = this;
|
|
||||||
$delegate(self.$todoList, 'li .edit', 'blur', function () {
|
|
||||||
if (!this.dataset.iscanceled) {
|
|
||||||
handler({
|
|
||||||
id: self._itemId(this),
|
|
||||||
title: this.value
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$delegate(self.$todoList, 'li .edit', 'keypress', function (event) {
|
|
||||||
if (event.keyCode === self.ENTER_KEY) {
|
|
||||||
// Remove the cursor from the input when you hit enter just like if it
|
|
||||||
// were a real form
|
|
||||||
this.blur();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
View.prototype._bindItemEditCancel = function (handler) {
|
|
||||||
var self = this;
|
|
||||||
$delegate(self.$todoList, 'li .edit', 'keyup', function (event) {
|
|
||||||
if (event.keyCode === self.ESCAPE_KEY) {
|
|
||||||
this.dataset.iscanceled = true;
|
|
||||||
this.blur();
|
|
||||||
|
|
||||||
handler({id: self._itemId(this)});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
View.prototype.bind = function (event, handler) {
|
|
||||||
var self = this;
|
|
||||||
if (event === 'newTodo') {
|
|
||||||
$on(self.$newTodo, 'change', function () {
|
|
||||||
handler(self.$newTodo.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
} else if (event === 'removeCompleted') {
|
|
||||||
$on(self.$clearCompleted, 'click', function () {
|
|
||||||
handler();
|
|
||||||
});
|
|
||||||
|
|
||||||
} else if (event === 'toggleAll') {
|
|
||||||
$on(self.$toggleAll, 'click', function () {
|
|
||||||
handler({completed: this.checked});
|
|
||||||
});
|
|
||||||
|
|
||||||
} else if (event === 'itemEdit') {
|
|
||||||
$delegate(self.$todoList, 'li label', 'dblclick', function () {
|
|
||||||
handler({id: self._itemId(this)});
|
|
||||||
});
|
|
||||||
|
|
||||||
} else if (event === 'itemRemove') {
|
|
||||||
$delegate(self.$todoList, '.destroy', 'click', function () {
|
|
||||||
handler({id: self._itemId(this)});
|
|
||||||
});
|
|
||||||
|
|
||||||
} else if (event === 'itemToggle') {
|
|
||||||
$delegate(self.$todoList, '.toggle', 'click', function () {
|
|
||||||
handler({
|
|
||||||
id: self._itemId(this),
|
|
||||||
completed: this.checked
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
} else if (event === 'itemEditDone') {
|
|
||||||
self._bindItemEditDone(handler);
|
|
||||||
|
|
||||||
} else if (event === 'itemEditCancel') {
|
|
||||||
self._bindItemEditCancel(handler);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Export to window
|
|
||||||
window.app = window.app || {};
|
|
||||||
window.app.View = View;
|
|
||||||
}(window));
|
|
||||||
@ -1,30 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html class="cp pad">
|
|
||||||
<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">
|
|
||||||
<script async data-bootload="/customize/template.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;
|
|
||||||
}
|
|
||||||
#pad-iframe {
|
|
||||||
position:fixed;
|
|
||||||
top:0px;
|
|
||||||
left:0px;
|
|
||||||
bottom:0px;
|
|
||||||
right:0px;
|
|
||||||
width:100%;
|
|
||||||
height:100%;
|
|
||||||
border:none;
|
|
||||||
margin:0;
|
|
||||||
padding:0;
|
|
||||||
overflow:hidden;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<iframe id="pad-iframe"></iframe><script src="/common/noscriptfix.js"></script>
|
|
||||||
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
|
|
||||||
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
|
|
||||||
<script async data-bootload="/todo/inner.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
|
|
||||||
<style>.loading-hidden, .loading-hidden * {display: none !important;}</style>
|
|
||||||
</head>
|
|
||||||
<body class="loading-hidden">
|
|
||||||
<div id="toolbar" class="toolbar-container"></div>
|
|
||||||
<div id="container">
|
|
||||||
<div class="cp-create-form">
|
|
||||||
<input type="text" id="newTodoName" data-localization-placeholder="todo_newTodoNamePlaceholder" />
|
|
||||||
<button class="btn btn-success fa fa-plus" data-localization-title="todo_newTodoNameTitle"></button>
|
|
||||||
</div>
|
|
||||||
<div id="tasksList"></div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
define([
|
|
||||||
'jquery',
|
|
||||||
'less!/bower_components/components-font-awesome/css/font-awesome.min.css',
|
|
||||||
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
|
|
||||||
'less!/todo/todo.less',
|
|
||||||
//'less!/customize/src/less/cryptpad.less',
|
|
||||||
'less!/customize/src/less/toolbar.less',
|
|
||||||
], function ($) {
|
|
||||||
$('.loading-hidden').removeClass('loading-hidden');
|
|
||||||
// dirty hack to get rid the flash of the lock background
|
|
||||||
/*
|
|
||||||
setTimeout(function () {
|
|
||||||
$('#app').addClass('ready');
|
|
||||||
}, 100);*/
|
|
||||||
});
|
|
||||||
@ -1,229 +0,0 @@
|
|||||||
define([
|
|
||||||
'jquery',
|
|
||||||
'/bower_components/chainpad-crypto/crypto.js',
|
|
||||||
'/bower_components/chainpad-listmap/chainpad-listmap.js',
|
|
||||||
'/common/toolbar2.js',
|
|
||||||
'/common/cryptpad-common.js',
|
|
||||||
'/todo/todo.js',
|
|
||||||
|
|
||||||
//'/common/media-tag.js',
|
|
||||||
//'/bower_components/file-saver/FileSaver.min.js',
|
|
||||||
|
|
||||||
'less!/bower_components/components-font-awesome/css/font-awesome.min.css',
|
|
||||||
'less!/customize/src/less/cryptpad.less',
|
|
||||||
], function ($, Crypto, Listmap, Toolbar, Cryptpad, Todo) {
|
|
||||||
var Messages = Cryptpad.Messages;
|
|
||||||
|
|
||||||
var APP = window.APP = {};
|
|
||||||
$(function () {
|
|
||||||
|
|
||||||
var $iframe = $('#pad-iframe').contents();
|
|
||||||
var $body = $iframe.find('body');
|
|
||||||
var ifrw = $('#pad-iframe')[0].contentWindow;
|
|
||||||
var $list = $iframe.find('#tasksList');
|
|
||||||
|
|
||||||
var removeTips = function () {
|
|
||||||
Cryptpad.clearTooltips();
|
|
||||||
};
|
|
||||||
|
|
||||||
var onReady = function () {
|
|
||||||
|
|
||||||
var todo = Todo.init(APP.lm.proxy, Cryptpad);
|
|
||||||
|
|
||||||
var deleteTask = function(id) {
|
|
||||||
todo.remove(id);
|
|
||||||
|
|
||||||
var $els = $list.find('.cp-task').filter(function (i, el) {
|
|
||||||
return $(el).data('id') === id;
|
|
||||||
});
|
|
||||||
$els.fadeOut(null, function () {
|
|
||||||
$els.remove();
|
|
||||||
removeTips();
|
|
||||||
});
|
|
||||||
//APP.display();
|
|
||||||
};
|
|
||||||
|
|
||||||
// TODO make this actually work, and scroll to bottom...
|
|
||||||
var scrollTo = function (t) {
|
|
||||||
var $list = $iframe.find('#tasksList');
|
|
||||||
|
|
||||||
$list.animate({
|
|
||||||
scrollTop: t,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
scrollTo = scrollTo;
|
|
||||||
|
|
||||||
var makeCheckbox = function (id, cb) {
|
|
||||||
var entry = APP.lm.proxy.data[id];
|
|
||||||
var checked = entry.state === 1? 'cp-task-checkbox-checked fa-check-square-o': 'cp-task-checkbox-unchecked fa-square-o';
|
|
||||||
|
|
||||||
var title = entry.state === 1?
|
|
||||||
Messages.todo_markAsIncompleteTitle:
|
|
||||||
Messages.todo_markAsCompleteTitle;
|
|
||||||
title = title;
|
|
||||||
|
|
||||||
removeTips();
|
|
||||||
return $('<span>', {
|
|
||||||
'class': 'cp-task-checkbox fa ' + checked,
|
|
||||||
//title: title,
|
|
||||||
}).on('click', function () {
|
|
||||||
entry.state = (entry.state + 1) % 2;
|
|
||||||
if (typeof(cb) === 'function') {
|
|
||||||
cb(entry.state);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
var addTaskUI = function (el, animate) {
|
|
||||||
var $taskDiv = $('<div>', {
|
|
||||||
'class': 'cp-task'
|
|
||||||
});
|
|
||||||
if (animate) {
|
|
||||||
$taskDiv.prependTo($list);
|
|
||||||
} else {
|
|
||||||
$taskDiv.appendTo($list);
|
|
||||||
}
|
|
||||||
$taskDiv.data('id', el);
|
|
||||||
|
|
||||||
makeCheckbox(el, function (/*state*/) {
|
|
||||||
APP.display();
|
|
||||||
})
|
|
||||||
.appendTo($taskDiv);
|
|
||||||
|
|
||||||
var entry = APP.lm.proxy.data[el];
|
|
||||||
|
|
||||||
if (entry.state) {
|
|
||||||
$taskDiv.addClass('cp-task-complete');
|
|
||||||
}
|
|
||||||
|
|
||||||
$('<span>', { 'class': 'cp-task-text' })
|
|
||||||
.text(entry.task)
|
|
||||||
.appendTo($taskDiv);
|
|
||||||
/*$('<span>', { 'class': 'cp-task-date' })
|
|
||||||
.text(new Date(entry.ctime).toLocaleString())
|
|
||||||
.appendTo($taskDiv);*/
|
|
||||||
$('<button>', {
|
|
||||||
'class': 'fa fa-times cp-task-remove btn btn-danger',
|
|
||||||
title: Messages.todo_removeTaskTitle,
|
|
||||||
}).appendTo($taskDiv).on('click', function() {
|
|
||||||
deleteTask(el);
|
|
||||||
});
|
|
||||||
|
|
||||||
if (animate) {
|
|
||||||
$taskDiv.hide();
|
|
||||||
window.setTimeout(function () {
|
|
||||||
// ???
|
|
||||||
$taskDiv.fadeIn();
|
|
||||||
}, 0);
|
|
||||||
}
|
|
||||||
removeTips();
|
|
||||||
};
|
|
||||||
var display = APP.display = function () {
|
|
||||||
$list.empty();
|
|
||||||
removeTips();
|
|
||||||
APP.lm.proxy.order.forEach(function (el) {
|
|
||||||
addTaskUI(el);
|
|
||||||
});
|
|
||||||
//scrollTo('300px');
|
|
||||||
};
|
|
||||||
|
|
||||||
var addTask = function () {
|
|
||||||
var $input = $iframe.find('#newTodoName');
|
|
||||||
// if the input is empty after removing leading and trailing spaces
|
|
||||||
// don't create a new entry
|
|
||||||
if (!$input.val().trim()) { return; }
|
|
||||||
|
|
||||||
var obj = {
|
|
||||||
"state": 0,
|
|
||||||
"task": $input.val(),
|
|
||||||
"ctime": +new Date(),
|
|
||||||
"mtime": +new Date()
|
|
||||||
};
|
|
||||||
|
|
||||||
var id = Cryptpad.createChannelId();
|
|
||||||
todo.add(id, obj);
|
|
||||||
|
|
||||||
$input.val("");
|
|
||||||
addTaskUI(id, true);
|
|
||||||
//display();
|
|
||||||
};
|
|
||||||
|
|
||||||
var $formSubmit = $iframe.find('.cp-create-form button').on('click', addTask);
|
|
||||||
$iframe.find('#newTodoName').on('keypress', function (e) {
|
|
||||||
switch (e.which) {
|
|
||||||
case 13:
|
|
||||||
$formSubmit.click();
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
console.log(e.which);
|
|
||||||
}
|
|
||||||
}).focus();
|
|
||||||
|
|
||||||
var editTask = function () {
|
|
||||||
|
|
||||||
};
|
|
||||||
editTask = editTask;
|
|
||||||
|
|
||||||
display();
|
|
||||||
Cryptpad.removeLoadingScreen();
|
|
||||||
};
|
|
||||||
|
|
||||||
var onInit = function () {
|
|
||||||
Cryptpad.addLoadingScreen();
|
|
||||||
|
|
||||||
$body.on('dragover', function (e) { e.preventDefault(); });
|
|
||||||
$body.on('drop', function (e) { e.preventDefault(); });
|
|
||||||
|
|
||||||
var Title;
|
|
||||||
var $bar = $iframe.find('.toolbar-container');
|
|
||||||
|
|
||||||
Title = Cryptpad.createTitle({}, function(){}, Cryptpad);
|
|
||||||
|
|
||||||
var configTb = {
|
|
||||||
displayed: ['useradmin', 'newpad', 'limit', 'upgrade', 'pageTitle'],
|
|
||||||
ifrw: ifrw,
|
|
||||||
common: Cryptpad,
|
|
||||||
//hideDisplayName: true,
|
|
||||||
$container: $bar,
|
|
||||||
pageTitle: Messages.todo_title
|
|
||||||
};
|
|
||||||
|
|
||||||
APP.toolbar = Toolbar.create(configTb);
|
|
||||||
APP.toolbar.$rightside.html(''); // Remove the drawer if we don't use it to hide the toolbar
|
|
||||||
};
|
|
||||||
|
|
||||||
var createTodo = function() {
|
|
||||||
var obj = Cryptpad.getProxy();
|
|
||||||
var hash = Cryptpad.createRandomHash();
|
|
||||||
|
|
||||||
if(obj.todo) {
|
|
||||||
hash = obj.todo;
|
|
||||||
} else {
|
|
||||||
obj.todo = hash;
|
|
||||||
}
|
|
||||||
|
|
||||||
var secret = Cryptpad.getSecrets('todo', hash);
|
|
||||||
|
|
||||||
var listmapConfig = {
|
|
||||||
data: {},
|
|
||||||
websocketURL: Cryptpad.getWebsocketURL(),
|
|
||||||
channel: secret.channel,
|
|
||||||
validateKey: secret.keys.validateKey || undefined,
|
|
||||||
crypto: Crypto.createEncryptor(secret.keys),
|
|
||||||
userName: 'todo',
|
|
||||||
logLevel: 1,
|
|
||||||
};
|
|
||||||
|
|
||||||
var lm = APP.lm = Listmap.create(listmapConfig);
|
|
||||||
|
|
||||||
lm.proxy.on('create', onInit)
|
|
||||||
.on('ready', onReady);
|
|
||||||
};
|
|
||||||
|
|
||||||
Cryptpad.ready(function () {
|
|
||||||
createTodo();
|
|
||||||
Cryptpad.reportAppUsage();
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1,83 +0,0 @@
|
|||||||
define([
|
|
||||||
|
|
||||||
], function () {
|
|
||||||
var Todo = {};
|
|
||||||
var Cryptpad;
|
|
||||||
|
|
||||||
/* data model
|
|
||||||
{
|
|
||||||
"order": [
|
|
||||||
"123456789abcdef0",
|
|
||||||
"23456789abcdef01",
|
|
||||||
"0123456789abcedf"
|
|
||||||
],
|
|
||||||
"data": {
|
|
||||||
"0123456789abcedf": {
|
|
||||||
"state": 0, // used to sort completed elements
|
|
||||||
"task": "pewpewpew",
|
|
||||||
"ctime": +new Date(), // used to display chronologically
|
|
||||||
"mtime": +new Date(), // used to display recent actions
|
|
||||||
// "deadline": +new Date() + 1000 * 60 * 60 * 24 * 7
|
|
||||||
},
|
|
||||||
"123456789abcdef0": {},
|
|
||||||
"23456789abcdef01": {}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
var val = function (proxy, id, k, v) {
|
|
||||||
var el = proxy.data[id];
|
|
||||||
if (!el) {
|
|
||||||
throw new Error('expected an element');
|
|
||||||
}
|
|
||||||
if (typeof(v) === 'function') { el[k] = v(el[k]); }
|
|
||||||
else { el[k] = v; }
|
|
||||||
return el[k];
|
|
||||||
};
|
|
||||||
|
|
||||||
var initialize = function (proxy) {
|
|
||||||
// run migration
|
|
||||||
if (typeof(proxy.data) !== 'object') { proxy.data = {}; }
|
|
||||||
if (!Array.isArray(proxy.order)) { proxy.order = []; }
|
|
||||||
if (typeof(proxy.type) !== 'string') { proxy.type = 'todo'; }
|
|
||||||
};
|
|
||||||
|
|
||||||
/* add (id, obj) push id to order, add object to data */
|
|
||||||
var add = function (proxy, id, obj) {
|
|
||||||
if (!Array.isArray(proxy.order)) {
|
|
||||||
throw new Error('expected an array');
|
|
||||||
}
|
|
||||||
proxy.order.unshift(id);
|
|
||||||
proxy.data[id] = obj;
|
|
||||||
};
|
|
||||||
|
|
||||||
/* delete (id) remove id from order, delete id from data */
|
|
||||||
var remove = function (proxy, id) {
|
|
||||||
if (Array.isArray(proxy.order)) {
|
|
||||||
var i = proxy.order.indexOf(id);
|
|
||||||
proxy.order.splice(i, 1);
|
|
||||||
}
|
|
||||||
if (proxy.data[id]) { delete proxy.data[id]; }
|
|
||||||
};
|
|
||||||
|
|
||||||
Todo.init = function (proxy, common) {
|
|
||||||
Cryptpad = common;
|
|
||||||
|
|
||||||
var api = {};
|
|
||||||
initialize(proxy);
|
|
||||||
|
|
||||||
api.val = function (id, k, v) {
|
|
||||||
return val(proxy, id, k, v);
|
|
||||||
};
|
|
||||||
api.add = function (id, obj) {
|
|
||||||
return add(proxy, id, obj);
|
|
||||||
};
|
|
||||||
api.remove = function (id) {
|
|
||||||
return remove(proxy, id);
|
|
||||||
};
|
|
||||||
|
|
||||||
return api;
|
|
||||||
};
|
|
||||||
|
|
||||||
return Todo;
|
|
||||||
});
|
|
||||||
@ -1,121 +0,0 @@
|
|||||||
@import "/customize/src/less/variables.less";
|
|
||||||
@import "/customize/src/less/mixins.less";
|
|
||||||
|
|
||||||
@button-border: 2px;
|
|
||||||
|
|
||||||
html, body {
|
|
||||||
margin: 0px;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#toolbar {
|
|
||||||
display: flex; // We need this to remove a 3px border at the bottom of the toolbar
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column;
|
|
||||||
}
|
|
||||||
#app {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.cryptpad-toolbar {
|
|
||||||
padding: 0px;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
#container {
|
|
||||||
display: flex;
|
|
||||||
flex: 1;
|
|
||||||
flex-flow: column;
|
|
||||||
padding: 20px;
|
|
||||||
align-items: center;
|
|
||||||
background-color: lighten(@toolbar-todo-bg, 15%);
|
|
||||||
min-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@spacing: 15px;
|
|
||||||
|
|
||||||
#tasksList {
|
|
||||||
flex: 1;
|
|
||||||
min-height: 0;
|
|
||||||
overflow-y: auto;
|
|
||||||
min-width: 40%;
|
|
||||||
max-width: 90%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cp-create-form {
|
|
||||||
margin: @spacing;
|
|
||||||
min-width: 40%;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
#newTodoName {
|
|
||||||
flex: 1;
|
|
||||||
margin-right: 15px;
|
|
||||||
border-radius: 0;
|
|
||||||
border: 0;
|
|
||||||
background-color: darken(@toolbar-todo-bg, 10%);
|
|
||||||
color: #fff;
|
|
||||||
padding: 5px 10px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 0;
|
|
||||||
background-color: darken(@toolbar-todo-bg, 20%);
|
|
||||||
border:0;
|
|
||||||
&:hover {
|
|
||||||
background-color: darken(@toolbar-todo-bg, 25%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.cp-task {
|
|
||||||
border: 1px solid black;
|
|
||||||
padding: @spacing;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
background-color: white;
|
|
||||||
|
|
||||||
&.cp-task-complete {
|
|
||||||
background-color: #f0f0f0;
|
|
||||||
color: #777;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cp-task-text {
|
|
||||||
margin: @spacing;
|
|
||||||
flex: 1;
|
|
||||||
word-wrap: break-word;
|
|
||||||
min-width: 0;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.cp-task-date {
|
|
||||||
margin: @spacing;
|
|
||||||
}
|
|
||||||
.cp-task-remove {
|
|
||||||
margin: @spacing;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.cp-task-checkbox {
|
|
||||||
font-size: 45px;
|
|
||||||
width: 45px;
|
|
||||||
cursor: pointer;
|
|
||||||
&:hover {
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.cp-task-checkbox-checked {
|
|
||||||
|
|
||||||
}
|
|
||||||
.cp-task-checkbox-unchecked {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
border-radius: 0;
|
|
||||||
border:0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
define(function () {
|
|
||||||
var padZero = function (str, len) {
|
|
||||||
len = len || 2;
|
|
||||||
var zeros = new Array(len).join('0');
|
|
||||||
return (zeros + str).slice(-len);
|
|
||||||
};
|
|
||||||
var invertColor = function (hex) {
|
|
||||||
if (hex.indexOf('#') === 0) {
|
|
||||||
hex = hex.slice(1);
|
|
||||||
}
|
|
||||||
// convert 3-digit hex to 6-digits.
|
|
||||||
if (hex.length === 3) {
|
|
||||||
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
|
|
||||||
}
|
|
||||||
if (hex.length !== 6) {
|
|
||||||
console.error(hex);
|
|
||||||
throw new Error('Invalid HEX color.');
|
|
||||||
}
|
|
||||||
// invert color components
|
|
||||||
var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),
|
|
||||||
g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),
|
|
||||||
b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16);
|
|
||||||
// pad each with zeros and return
|
|
||||||
return '#' + padZero(r) + padZero(g) + padZero(b);
|
|
||||||
};
|
|
||||||
var rgb2hex = function (rgb) {
|
|
||||||
if (rgb.indexOf('#') === 0) { return rgb; }
|
|
||||||
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
|
|
||||||
var hex = function (x) {
|
|
||||||
return ("0" + parseInt(x).toString(16)).slice(-2);
|
|
||||||
};
|
|
||||||
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
|
|
||||||
};
|
|
||||||
var hex2rgba = function (hex, opacity) {
|
|
||||||
if (hex.indexOf('#') === 0) {
|
|
||||||
hex = hex.slice(1);
|
|
||||||
}
|
|
||||||
if (hex.length === 3) {
|
|
||||||
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
|
|
||||||
}
|
|
||||||
if (!opacity) { opacity = 1; }
|
|
||||||
var r = parseInt(hex.slice(0,2), 16);
|
|
||||||
var g = parseInt(hex.slice(2,4), 16);
|
|
||||||
var b = parseInt(hex.slice(4,6), 16);
|
|
||||||
return 'rgba('+r+', '+g+', '+b+', '+opacity+')';
|
|
||||||
};
|
|
||||||
return {
|
|
||||||
invert: invertColor,
|
|
||||||
rgb2hex: rgb2hex,
|
|
||||||
hex2rgba: hex2rgba
|
|
||||||
};
|
|
||||||
});
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html class="cp">
|
|
||||||
<head>
|
|
||||||
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
||||||
<script async data-bootload="/customize/template.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
@ -1,511 +0,0 @@
|
|||||||
define([
|
|
||||||
'jquery',
|
|
||||||
'/api/config',
|
|
||||||
'/bower_components/chainpad-netflux/chainpad-netflux.js',
|
|
||||||
'/bower_components/chainpad-crypto/crypto.js',
|
|
||||||
'/common/toolbar2.js',
|
|
||||||
'/bower_components/textpatcher/TextPatcher.amd.js',
|
|
||||||
'json.sortify',
|
|
||||||
'/bower_components/chainpad-json-validator/json-ot.js',
|
|
||||||
'/common/cryptpad-common.js',
|
|
||||||
'/common/cryptget.js',
|
|
||||||
'/whiteboard/colors.js',
|
|
||||||
'/customize/application_config.js',
|
|
||||||
'/common/common-thumbnail.js',
|
|
||||||
'/bower_components/secure-fabric.js/dist/fabric.min.js',
|
|
||||||
'/bower_components/file-saver/FileSaver.min.js',
|
|
||||||
|
|
||||||
'less!/bower_components/components-font-awesome/css/font-awesome.min.css',
|
|
||||||
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
|
|
||||||
'less!/customize/src/less/cryptpad.less',
|
|
||||||
'less!/whiteboard/whiteboard.less',
|
|
||||||
'less!/customize/src/less/toolbar.less',
|
|
||||||
], function ($, Config, Realtime, Crypto, Toolbar, TextPatcher, JSONSortify, JsonOT, Cryptpad, Cryptget, Colors, AppConfig, Thumb) {
|
|
||||||
var saveAs = window.saveAs;
|
|
||||||
var Messages = Cryptpad.Messages;
|
|
||||||
|
|
||||||
var module = window.APP = { $:$ };
|
|
||||||
var Fabric = module.Fabric = window.fabric;
|
|
||||||
|
|
||||||
$(function () {
|
|
||||||
Cryptpad.addLoadingScreen();
|
|
||||||
var onConnectError = function () {
|
|
||||||
Cryptpad.errorLoadingScreen(Messages.websocketError);
|
|
||||||
};
|
|
||||||
var toolbar;
|
|
||||||
|
|
||||||
var secret = Cryptpad.getSecrets();
|
|
||||||
var readOnly = secret.keys && !secret.keys.editKeyStr;
|
|
||||||
if (!secret.keys) {
|
|
||||||
secret.keys = secret.key;
|
|
||||||
}
|
|
||||||
|
|
||||||
var andThen = function () {
|
|
||||||
/* Initialize Fabric */
|
|
||||||
var canvas = module.canvas = new Fabric.Canvas('canvas');
|
|
||||||
var $canvas = $('canvas');
|
|
||||||
var $controls = $('#controls');
|
|
||||||
var $canvasContainer = $('canvas').parents('.canvas-container');
|
|
||||||
var $pickers = $('#pickers');
|
|
||||||
var $colors = $('#colors');
|
|
||||||
var $cursors = $('#cursors');
|
|
||||||
var $deleteButton = $('#delete');
|
|
||||||
|
|
||||||
var brush = {
|
|
||||||
color: '#000000',
|
|
||||||
opacity: 1
|
|
||||||
};
|
|
||||||
|
|
||||||
var $toggle = $('#toggleDraw');
|
|
||||||
var $width = $('#width');
|
|
||||||
var $widthLabel = $('label[for="width"]');
|
|
||||||
var $opacity = $('#opacity');
|
|
||||||
var $opacityLabel = $('label[for="opacity"]');
|
|
||||||
window.canvas = canvas;
|
|
||||||
var createCursor = function () {
|
|
||||||
var w = canvas.freeDrawingBrush.width;
|
|
||||||
var c = canvas.freeDrawingBrush.color;
|
|
||||||
var size = w > 30 ? w+2 : w+32;
|
|
||||||
$cursors.html('<canvas width="'+size+'" height="'+size+'"></canvas>');
|
|
||||||
var $ccanvas = $cursors.find('canvas');
|
|
||||||
var ccanvas = $ccanvas[0];
|
|
||||||
|
|
||||||
var ctx = ccanvas.getContext('2d');
|
|
||||||
var centerX = size / 2;
|
|
||||||
var centerY = size / 2;
|
|
||||||
var radius = w/2;
|
|
||||||
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
|
|
||||||
ctx.fillStyle = c;
|
|
||||||
ctx.fill();
|
|
||||||
ctx.lineWidth = 1;
|
|
||||||
ctx.strokeStyle = brush.color;
|
|
||||||
ctx.stroke();
|
|
||||||
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.moveTo(size/2, 0); ctx.lineTo(size/2, 10);
|
|
||||||
ctx.moveTo(size/2, size); ctx.lineTo(size/2, size-10);
|
|
||||||
ctx.moveTo(0, size/2); ctx.lineTo(10, size/2);
|
|
||||||
ctx.moveTo(size, size/2); ctx.lineTo(size-10, size/2);
|
|
||||||
ctx.strokeStyle = '#000000';
|
|
||||||
ctx.stroke();
|
|
||||||
|
|
||||||
var img = ccanvas.toDataURL("image/png");
|
|
||||||
$controls.find('.selected > img').attr('src', img);
|
|
||||||
canvas.freeDrawingCursor = 'url('+img+') '+size/2+' '+size/2+', crosshair';
|
|
||||||
};
|
|
||||||
|
|
||||||
var updateBrushWidth = function () {
|
|
||||||
var val = $width.val();
|
|
||||||
canvas.freeDrawingBrush.width = Number(val);
|
|
||||||
$widthLabel.text(Cryptpad.Messages._getKey("canvas_widthLabel", [val]));
|
|
||||||
$('#width-val').text(val + 'px');
|
|
||||||
createCursor();
|
|
||||||
};
|
|
||||||
updateBrushWidth();
|
|
||||||
|
|
||||||
$width.on('change', updateBrushWidth);
|
|
||||||
|
|
||||||
var updateBrushOpacity = function () {
|
|
||||||
var val = $opacity.val();
|
|
||||||
brush.opacity = Number(val);
|
|
||||||
canvas.freeDrawingBrush.color = Colors.hex2rgba(brush.color, brush.opacity);
|
|
||||||
$opacityLabel.text(Cryptpad.Messages._getKey("canvas_opacityLabel", [val]));
|
|
||||||
$('#opacity-val').text((Number(val) * 100) + '%');
|
|
||||||
createCursor();
|
|
||||||
};
|
|
||||||
updateBrushOpacity();
|
|
||||||
|
|
||||||
$opacity.on('change', updateBrushOpacity);
|
|
||||||
|
|
||||||
var pickColor = function (current, cb) {
|
|
||||||
var $picker = $('<input>', {
|
|
||||||
type: 'color',
|
|
||||||
value: '#FFFFFF',
|
|
||||||
})
|
|
||||||
// TODO confirm that this is safe to remove
|
|
||||||
//.css({ visibility: 'hidden' })
|
|
||||||
.on('change', function () {
|
|
||||||
var color = this.value;
|
|
||||||
cb(color);
|
|
||||||
}).appendTo($pickers);
|
|
||||||
setTimeout(function () {
|
|
||||||
$picker.val(current);
|
|
||||||
$picker.click();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
var setColor = function (c) {
|
|
||||||
c = Colors.rgb2hex(c);
|
|
||||||
brush.color = c;
|
|
||||||
canvas.freeDrawingBrush.color = Colors.hex2rgba(brush.color, brush.opacity);
|
|
||||||
module.$color.css({
|
|
||||||
'color': c,
|
|
||||||
});
|
|
||||||
createCursor();
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
var palette = AppConfig.whiteboardPalette || [
|
|
||||||
'red', 'blue', 'green', 'white', 'black', 'purple',
|
|
||||||
'gray', 'beige', 'brown', 'cyan', 'darkcyan', 'gold', 'yellow', 'pink'
|
|
||||||
];
|
|
||||||
|
|
||||||
$('.palette-color').on('click', function () {
|
|
||||||
var color = $(this).css('background-color');
|
|
||||||
setColor(color);
|
|
||||||
});
|
|
||||||
|
|
||||||
module.draw = true;
|
|
||||||
var toggleDrawMode = function () {
|
|
||||||
module.draw = !module.draw;
|
|
||||||
canvas.isDrawingMode = module.draw;
|
|
||||||
$toggle.text(module.draw ? Messages.canvas_disable : Messages.canvas_enable);
|
|
||||||
if (module.draw) { $deleteButton.hide(); }
|
|
||||||
else { $deleteButton.show(); }
|
|
||||||
};
|
|
||||||
$toggle.click(toggleDrawMode);
|
|
||||||
|
|
||||||
var deleteSelection = function () {
|
|
||||||
if (canvas.getActiveObject()) {
|
|
||||||
canvas.getActiveObject().remove();
|
|
||||||
}
|
|
||||||
if (canvas.getActiveGroup()) {
|
|
||||||
canvas.getActiveGroup()._objects.forEach(function (el) {
|
|
||||||
el.remove();
|
|
||||||
});
|
|
||||||
canvas.discardActiveGroup();
|
|
||||||
}
|
|
||||||
canvas.renderAll();
|
|
||||||
module.onLocal();
|
|
||||||
};
|
|
||||||
$deleteButton.click(deleteSelection);
|
|
||||||
$(window).on('keyup', function (e) {
|
|
||||||
if (e.which === 46) { deleteSelection (); }
|
|
||||||
});
|
|
||||||
|
|
||||||
var setEditable = function (bool) {
|
|
||||||
if (readOnly && bool) { return; }
|
|
||||||
if (bool) { $controls.css('display', 'flex'); }
|
|
||||||
else { $controls.hide(); }
|
|
||||||
|
|
||||||
canvas.isDrawingMode = bool ? module.draw : false;
|
|
||||||
if (!bool) {
|
|
||||||
canvas.deactivateAll();
|
|
||||||
canvas.renderAll();
|
|
||||||
}
|
|
||||||
canvas.forEachObject(function (object) {
|
|
||||||
object.selectable = bool;
|
|
||||||
});
|
|
||||||
$canvasContainer.find('canvas').css('border-color', bool? 'black': 'red');
|
|
||||||
};
|
|
||||||
|
|
||||||
var saveImage = module.saveImage = function () {
|
|
||||||
var defaultName = "pretty-picture.png";
|
|
||||||
Cryptpad.prompt(Messages.exportPrompt, defaultName, function (filename) {
|
|
||||||
if (!(typeof(filename) === 'string' && filename)) { return; }
|
|
||||||
$canvas[0].toBlob(function (blob) {
|
|
||||||
saveAs(blob, filename);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
module.FM = Cryptpad.createFileManager({});
|
|
||||||
module.upload = function (title) {
|
|
||||||
var canvas = $canvas[0];
|
|
||||||
var finish = function (thumb) {
|
|
||||||
canvas.toBlob(function (blob) {
|
|
||||||
blob.name = title;
|
|
||||||
module.FM.handleFile(blob, void 0, thumb);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
Thumb.fromCanvas(canvas, function (e, blob) {
|
|
||||||
// carry on even if you can't get a thumbnail
|
|
||||||
if (e) { console.error(e); }
|
|
||||||
finish(blob);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
var initializing = true;
|
|
||||||
|
|
||||||
var $bar = $('#toolbar');
|
|
||||||
|
|
||||||
var Title;
|
|
||||||
var UserList;
|
|
||||||
var Metadata;
|
|
||||||
|
|
||||||
var config = module.config = {
|
|
||||||
initialState: '{}',
|
|
||||||
websocketURL: Cryptpad.getWebsocketURL(),
|
|
||||||
validateKey: secret.keys.validateKey,
|
|
||||||
readOnly: readOnly,
|
|
||||||
channel: secret.channel,
|
|
||||||
crypto: Crypto.createEncryptor(secret.keys),
|
|
||||||
transformFunction: JsonOT.transform,
|
|
||||||
};
|
|
||||||
|
|
||||||
var addColorToPalette = function (color, i) {
|
|
||||||
if (readOnly) { return; }
|
|
||||||
var $color = $('<span>', {
|
|
||||||
'class': 'palette-color',
|
|
||||||
})
|
|
||||||
.css({
|
|
||||||
'background-color': color,
|
|
||||||
})
|
|
||||||
.click(function () {
|
|
||||||
var c = Colors.rgb2hex($color.css('background-color'));
|
|
||||||
setColor(c);
|
|
||||||
})
|
|
||||||
.on('dblclick', function (e) {
|
|
||||||
e.preventDefault();
|
|
||||||
pickColor(Colors.rgb2hex($color.css('background-color')), function (c) {
|
|
||||||
$color.css({
|
|
||||||
'background-color': c,
|
|
||||||
});
|
|
||||||
palette.splice(i, 1, c);
|
|
||||||
config.onLocal();
|
|
||||||
setColor(c);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
$colors.append($color);
|
|
||||||
};
|
|
||||||
|
|
||||||
var metadataCfg = {};
|
|
||||||
var updatePalette = metadataCfg.updatePalette = function (newPalette) {
|
|
||||||
palette = newPalette;
|
|
||||||
$colors.html('<div class="hidden"> </div>');
|
|
||||||
palette.forEach(addColorToPalette);
|
|
||||||
};
|
|
||||||
updatePalette(palette);
|
|
||||||
|
|
||||||
var makeColorButton = function ($container) {
|
|
||||||
var $testColor = $('<input>', { type: 'color', value: '!' });
|
|
||||||
|
|
||||||
// if colors aren't supported, bail out
|
|
||||||
if ($testColor.attr('type') !== 'color' ||
|
|
||||||
$testColor.val() === '!') {
|
|
||||||
console.log("Colors aren't supported. Aborting");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var $color = module.$color = $('<button>', {
|
|
||||||
id: "color-picker",
|
|
||||||
title: Messages.canvas_chooseColor,
|
|
||||||
'class': "fa fa-square rightside-button",
|
|
||||||
})
|
|
||||||
.on('click', function () {
|
|
||||||
pickColor($color.css('background-color'), function (color) {
|
|
||||||
setColor(color);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
setColor('#000');
|
|
||||||
|
|
||||||
$container.append($color);
|
|
||||||
|
|
||||||
return $color;
|
|
||||||
};
|
|
||||||
|
|
||||||
config.onInit = function (info) {
|
|
||||||
UserList = Cryptpad.createUserList(info, config.onLocal, Cryptget, Cryptpad);
|
|
||||||
|
|
||||||
Title = Cryptpad.createTitle({}, config.onLocal, Cryptpad);
|
|
||||||
|
|
||||||
Metadata = Cryptpad.createMetadata(UserList, Title, metadataCfg, Cryptpad);
|
|
||||||
|
|
||||||
var configTb = {
|
|
||||||
displayed: ['title', 'useradmin', 'spinner', 'lag', 'state', 'share', 'userlist', 'newpad', 'limit', 'upgrade'],
|
|
||||||
userList: UserList.getToolbarConfig(),
|
|
||||||
share: {
|
|
||||||
secret: secret,
|
|
||||||
channel: info.channel
|
|
||||||
},
|
|
||||||
title: Title.getTitleConfig(),
|
|
||||||
common: Cryptpad,
|
|
||||||
readOnly: readOnly,
|
|
||||||
ifrw: window,
|
|
||||||
realtime: info.realtime,
|
|
||||||
network: info.network,
|
|
||||||
$container: $bar,
|
|
||||||
$contentContainer: $('#canvas-area')
|
|
||||||
};
|
|
||||||
|
|
||||||
toolbar = module.toolbar = Toolbar.create(configTb);
|
|
||||||
|
|
||||||
Title.setToolbar(toolbar);
|
|
||||||
|
|
||||||
var $rightside = toolbar.$rightside;
|
|
||||||
|
|
||||||
/* 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 $export = Cryptpad.createButton('export', true, {}, saveImage);
|
|
||||||
$rightside.append($export);
|
|
||||||
|
|
||||||
Cryptpad.createButton('savetodrive', true, {}, function () {})
|
|
||||||
.click(function () {
|
|
||||||
Cryptpad.prompt(Messages.exportPrompt, document.title + '.png',
|
|
||||||
function (name) {
|
|
||||||
if (name === null || !name.trim()) { return; }
|
|
||||||
module.upload(name);
|
|
||||||
});
|
|
||||||
}).appendTo($rightside);
|
|
||||||
|
|
||||||
var $forget = Cryptpad.createButton('forget', true, {}, function (err) {
|
|
||||||
if (err) { return; }
|
|
||||||
setEditable(false);
|
|
||||||
toolbar.failed();
|
|
||||||
});
|
|
||||||
$rightside.append($forget);
|
|
||||||
|
|
||||||
var editHash;
|
|
||||||
|
|
||||||
if (!readOnly) {
|
|
||||||
editHash = Cryptpad.getEditHashFromKeys(info.channel, secret.keys);
|
|
||||||
makeColorButton($rightside);
|
|
||||||
}
|
|
||||||
if (!readOnly) { Cryptpad.replaceHash(editHash); }
|
|
||||||
};
|
|
||||||
|
|
||||||
// used for debugging, feel free to remove
|
|
||||||
var Catch = function (f) {
|
|
||||||
return function () {
|
|
||||||
try {
|
|
||||||
f();
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
var onRemote = config.onRemote = Catch(function () {
|
|
||||||
if (initializing) { return; }
|
|
||||||
var userDoc = module.realtime.getUserDoc();
|
|
||||||
|
|
||||||
Metadata.update(userDoc);
|
|
||||||
var json = JSON.parse(userDoc);
|
|
||||||
var remoteDoc = json.content;
|
|
||||||
|
|
||||||
// TODO update palette if it has changed
|
|
||||||
|
|
||||||
canvas.loadFromJSON(remoteDoc);
|
|
||||||
canvas.renderAll();
|
|
||||||
|
|
||||||
var content = canvas.toDatalessJSON();
|
|
||||||
if (content !== remoteDoc) { Cryptpad.notify(); }
|
|
||||||
if (readOnly) { setEditable(false); }
|
|
||||||
});
|
|
||||||
setEditable(false);
|
|
||||||
|
|
||||||
var stringifyInner = function (textValue) {
|
|
||||||
var obj = {
|
|
||||||
content: textValue,
|
|
||||||
metadata: {
|
|
||||||
users: UserList.userData,
|
|
||||||
palette: palette,
|
|
||||||
defaultTitle: Title.defaultTitle,
|
|
||||||
type: 'whiteboard',
|
|
||||||
}
|
|
||||||
};
|
|
||||||
if (!initializing) {
|
|
||||||
obj.metadata.title = Title.title;
|
|
||||||
}
|
|
||||||
// stringify the json and send it into chainpad
|
|
||||||
return JSONSortify(obj);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
var onLocal = module.onLocal = config.onLocal = Catch(function () {
|
|
||||||
if (initializing) { return; }
|
|
||||||
if (readOnly) { return; }
|
|
||||||
|
|
||||||
var content = stringifyInner(canvas.toDatalessJSON());
|
|
||||||
|
|
||||||
module.patchText(content);
|
|
||||||
});
|
|
||||||
|
|
||||||
config.onReady = function (info) {
|
|
||||||
var realtime = module.realtime = info.realtime;
|
|
||||||
module.patchText = TextPatcher.create({
|
|
||||||
realtime: realtime
|
|
||||||
});
|
|
||||||
|
|
||||||
var isNew = false;
|
|
||||||
var userDoc = module.realtime.getUserDoc();
|
|
||||||
if (userDoc === "" || userDoc === "{}") { isNew = true; }
|
|
||||||
else {
|
|
||||||
var hjson = JSON.parse(userDoc);
|
|
||||||
if (typeof(hjson) !== 'object' || Array.isArray(hjson) ||
|
|
||||||
(typeof(hjson.type) !== 'undefined' && hjson.type !== 'whiteboard')) {
|
|
||||||
Cryptpad.errorLoadingScreen(Messages.typeError);
|
|
||||||
throw new Error(Messages.typeError);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Cryptpad.removeLoadingScreen();
|
|
||||||
setEditable(true);
|
|
||||||
initializing = false;
|
|
||||||
onRemote();
|
|
||||||
|
|
||||||
/* TODO: restore palette from metadata.palette */
|
|
||||||
|
|
||||||
if (readOnly) { return; }
|
|
||||||
UserList.getLastName(toolbar.$userNameButton, isNew);
|
|
||||||
};
|
|
||||||
|
|
||||||
config.onAbort = function () {
|
|
||||||
setEditable(false);
|
|
||||||
toolbar.failed();
|
|
||||||
Cryptpad.alert(Messages.common_connectionLost, undefined, true);
|
|
||||||
};
|
|
||||||
|
|
||||||
// TODO onConnectionStateChange
|
|
||||||
config.onConnectionChange = function (info) {
|
|
||||||
setEditable(info.state);
|
|
||||||
toolbar.failed();
|
|
||||||
if (info.state) {
|
|
||||||
initializing = true;
|
|
||||||
toolbar.reconnecting(info.myId);
|
|
||||||
Cryptpad.findOKButton().click();
|
|
||||||
} else {
|
|
||||||
Cryptpad.alert(Messages.common_connectionLost, undefined, true);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
module.rt = Realtime.start(config);
|
|
||||||
|
|
||||||
canvas.on('mouse:up', onLocal);
|
|
||||||
|
|
||||||
$('#clear').on('click', function () {
|
|
||||||
canvas.clear();
|
|
||||||
onLocal();
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#save').on('click', function () {
|
|
||||||
saveImage();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
Cryptpad.ready(function () {
|
|
||||||
andThen();
|
|
||||||
Cryptpad.reportAppUsage();
|
|
||||||
});
|
|
||||||
Cryptpad.onError(function (info) {
|
|
||||||
if (info) {
|
|
||||||
onConnectError();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1,135 +0,0 @@
|
|||||||
.middle () {
|
|
||||||
position: relative;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
html, body{
|
|
||||||
padding: 0px;
|
|
||||||
margin: 0px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column;
|
|
||||||
height: 100%;
|
|
||||||
background: url('/customize/bg3.jpg') no-repeat center center;
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
// created in the html
|
|
||||||
#canvas-area {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
// created by fabricjs. styled so defaults don't break anything
|
|
||||||
.canvas-container {
|
|
||||||
margin: auto;
|
|
||||||
background: white;
|
|
||||||
& > canvas {
|
|
||||||
border: 1px solid black;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// contains user tools
|
|
||||||
#controls {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
position: relative;
|
|
||||||
border-top: 1px solid black;
|
|
||||||
background: white;
|
|
||||||
|
|
||||||
padding: 1em;
|
|
||||||
|
|
||||||
& > * + * {
|
|
||||||
margin: 0;
|
|
||||||
margin-left: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#width, #opacity {
|
|
||||||
.middle;
|
|
||||||
}
|
|
||||||
#clear, #delete, #toggleDraw {
|
|
||||||
display: inline;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.selected {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 9001;
|
|
||||||
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.range-group {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
input[type="range"] {
|
|
||||||
background-color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > span {
|
|
||||||
cursor: default;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.range-group:first-of-type {
|
|
||||||
margin-left: 2em;
|
|
||||||
}
|
|
||||||
.range-group:last-of-type {
|
|
||||||
margin-right: 1em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Colors */
|
|
||||||
#colors {
|
|
||||||
.middle;
|
|
||||||
z-index: 100;
|
|
||||||
background: white;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
padding: 1em;
|
|
||||||
|
|
||||||
span.palette-color {
|
|
||||||
height: 4vw;
|
|
||||||
width: 4vw;
|
|
||||||
display: block;
|
|
||||||
margin: 5px;
|
|
||||||
border: 1px solid black;
|
|
||||||
vertical-align: top;
|
|
||||||
border-radius: 50%;
|
|
||||||
transition: transform 0.1s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
transform: scale(1.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// used in the toolbar if supported
|
|
||||||
#color-picker {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
// input[type=color] must exist in the dom to work correctly
|
|
||||||
// styled so that they don't break layouts
|
|
||||||
|
|
||||||
#pickers {
|
|
||||||
visibility: hidden;
|
|
||||||
position: absolute;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
z-index: -5;
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue