web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

move buttons out of form

Browse Source
This commit is contained in:
ansuz 2016-11-25 12:02:37 +01:00
parent eb50177201
commit e5ff7020fb
3 changed files with 119 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
www/poll/test/index.html
View File

@ -4,6 +4,7 @@
<meta content="text/html; charset=utf-8" http-equiv="content-type"/> <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title data-localization="poll_title">Zero Knowledge Date Picker</title> <title data-localization="poll_title">Zero Knowledge Date Picker</title>
<link rel="stylesheet" href="/customize/main.css" />
<script data-main="main" src="/bower_components/requirejs/require.js"></script> <script data-main="main" src="/bower_components/requirejs/require.js"></script>
<script> require.config({ waitSeconds: 60, }); </script> <script> require.config({ waitSeconds: 60, }); </script>
<style> <style>
@ -12,39 +13,49 @@
height: 100%; height: 100%;
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
border: 0px;
maargin-top: 1.25em;
} }
.realtime { .realtime {
border: 1px solid black;
display: block; display: block;
overflow: auto; overflow: auto;
margin: auto;
max-height: 100%; max-height: 100%;
max-width: 100%; max-width: 100%;
} }
.realtime input[type="text"] { .realtime input[type="text"] {
width: 5em;
height: 1em; height: 1em;
margin: 0px; margin: 0px;
} }
.text-cell input[type="text"] {
table, table * { width: 400px;
border: 1px solid red;
padding: 15px;
} }
table thead tr td { /*input#title, textarea { wiidth: 50px; }*/
boorder-bottom: 5px solid black;
input[type="text"][disabled], textarea[disabled] {
background-color: transparent;
font: white;
border: 0px;
} }
td label {
border: .5px solid black;
}
</style> </style>
</head> </head>
<body> <body>
<div class="realtime">
<button id="create-user">create user</button> <button id="create-option">create option</button>
<button id="create-option">create option</button> <button id="create-user">create user</button>
</div> <button id="publish" style="display: none;">publish poll</button>
<form class="realtime">
<br />
<input type="text" id="title"><br />
<textarea rows=5 cols=50></textarea><br />
</form>

45
www/poll/test/main.js
View File

@ -21,6 +21,7 @@ define([
//$bar: $('#toolbar').css({ border: '1px solid white', background: 'grey', 'margin-bottom': '1vh', }), //$bar: $('#toolbar').css({ border: '1px solid white', background: 'grey', 'margin-bottom': '1vh', }),
}; };
/* Any time the realtime object changes, call this function */
var change = function (o, n, path) { var change = function (o, n, path) {
if (path && path.join) { if (path && path.join) {
console.log("Change from [%s] to [%s] at [%s]", console.log("Change from [%s] to [%s] at [%s]",
@ -45,6 +46,7 @@ define([
return input.getAttribute && input.getAttribute('data-rt-id'); return input.getAttribute && input.getAttribute('data-rt-id');
}; };
/* Called whenever an event is fired on an input element */
var handleInput = function (input) { var handleInput = function (input) {
var type = input.type.toLowerCase(); var type = input.type.toLowerCase();
var id = getRealtimeId(input); var id = getRealtimeId(input);
@ -64,6 +66,7 @@ define([
} }
}; };
/* Called whenever an event is fired on a span */
var handleSpan = function (span) { var handleSpan = function (span) {
var id = span.getAttribute('data-rt-id'); var id = span.getAttribute('data-rt-id');
var type = Render.typeofId(id); var type = Render.typeofId(id);
@ -75,6 +78,10 @@ define([
Render.removeColumn(APP.proxy, id, function () { Render.removeColumn(APP.proxy, id, function () {
change(); change();
}); });
} else if (type === 'cell') {
change();
} else {
console.log("UNHANDLED");
} }
}; };
@ -91,6 +98,7 @@ define([
handleInput(target); handleInput(target);
break; break;
case 'SPAN': case 'SPAN':
case 'LABEL':
handleSpan(target); handleSpan(target);
break; break;
case undefined: case undefined:
@ -102,6 +110,9 @@ define([
} }
}; };
/*
Make sure that the realtime data structure has all the required fields
*/
var prepareProxy = function (proxy, schema) { var prepareProxy = function (proxy, schema) {
if (proxy && proxy.version === 1) { return; } if (proxy && proxy.version === 1) { return; }
console.log("Configuring proxy schema..."); console.log("Configuring proxy schema...");
@ -111,8 +122,22 @@ define([
proxy.version = 1; proxy.version = 1;
}; };
var ready = function (info) { /*
*/
var publish = APP.publish = function (bool) {
if (!APP.ready || APP.proxy.published) { return; }
APP.proxy.published = true;
APP.$publish.hide();
['textarea', '#title'].forEach(function (sel) {
$(sel).attr('disabled', bool);
});
};
var ready = function (info, userid) {
console.log("READY"); console.log("READY");
console.log('userid: %s', userid);
var proxy = APP.proxy; var proxy = APP.proxy;
@ -141,6 +166,14 @@ define([
.on('change', [], change) .on('change', [], change)
.on('remove', [], change); .on('remove', [], change);
if (!proxy.published) {
var $publish = APP.$publish = $('#publish')
.show()
.click(function () {
publish(true);
});
}
APP.ready = true; APP.ready = true;
}; };
@ -180,7 +213,15 @@ define([
APP.proxy = rt.proxy; APP.proxy = rt.proxy;
rt.proxy rt.proxy
.on('create', create) .on('create', create)
.on('ready', ready) .on('ready', function (info) {
Cryptpad.getPadAttribute('userid', function (e, userid) {
if (e) { console.error(e); }
if (userid === null) { userid = Render.coluid(); }
Cryptpad.setPadAttribute('userid', userid, function (e) {
ready(info, userid);
});
});
})
.on('disconnect', disconnect); .on('disconnect', disconnect);
}); });
}); });

48
www/poll/test/render.js
View File

@ -222,7 +222,10 @@ by maintaining indexes in rowsOrder and colsOrder
}; };
var makeRemoveElement = Render.makeRemoveElement = function (id) { var makeRemoveElement = Render.makeRemoveElement = function (id) {
return ['SPAN', { 'data-rt-id': id, }, ['x']]; return ['SPAN', {
'data-rt-id': id,
class: 'remove',
}, ['✖']];
}; };
var makeHeadingCell = Render.makeHeadingCell = function (cell) { var makeHeadingCell = Render.makeHeadingCell = function (cell) {
@ -236,16 +239,45 @@ by maintaining indexes in rowsOrder and colsOrder
return ['TD', cell, []]; 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';
if (cell.checked) {
labelClass += ' yes';
}
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) { var makeBodyCell = Render.makeBodyCell = function (cell) {
if (cell.type === 'text') { if (cell.type === 'text') {
return ['TD', {}, [ return ['TD', {}, [
['DIV', {class: 'text-cell'}, [
['INPUT', cell, []], ['INPUT', cell, []],
makeRemoveElement(cell['data-rt-id']) makeRemoveElement(cell['data-rt-id'])
]]
]]; ]];
} }
if (cell.type === 'checkbox') { if (cell.type === 'checkbox') {
return ['TD', {}, [ ['INPUT', cell, []] ]]; return makeCheckbox(cell);
} }
return ['TD', cell, []]; return ['TD', cell, []];
}; };
@ -258,7 +290,7 @@ by maintaining indexes in rowsOrder and colsOrder
if (!matrix || !matrix.length) { return; } if (!matrix || !matrix.length) { return; }
var head = ['THEAD', {}, [ ['TR', {}, matrix[0].map(makeHeadingCell)] ]]; var head = ['THEAD', {}, [ ['TR', {}, matrix[0].map(makeHeadingCell)] ]];
var body = ['TBODY', {}, matrix.slice(1).map(makeBodyRow)]; var body = ['TBODY', {}, matrix.slice(1).map(makeBodyRow)];
return ['TABLE', {}, [head, body]]; return ['TABLE', {id:'table'}, [head, body]];
}; };
var asHTML = Render.asHTML = function (obj) { var asHTML = Render.asHTML = function (obj) {
@ -278,12 +310,15 @@ by maintaining indexes in rowsOrder and colsOrder
var preserveCursor = Render.preserveCursor = function (info) { var preserveCursor = Render.preserveCursor = function (info) {
if (['modifyValue', 'modifyAttribute'].indexOf(info.diff.action) !== -1) { if (['modifyValue', 'modifyAttribute'].indexOf(info.diff.action) !== -1) {
var element = info.node; var element = info.node;
if (typeof(element.selectionStart) !== 'number') { return; }
var o = info.oldValue || ''; var o = info.oldValue || '';
var n = info.newValue || ''; var n = info.newValue || '';
var op = TextPatcher.diff(o, n); var op = TextPatcher.diff(o, n);
info.selection = ['selectionStart', 'selectionEnd'].map(function (attr) { info.selection = ['selectionStart', 'selectionEnd'].map(function (attr) {
var before = info.node[attr]; var before = element[attr];
var after = TextPatcher.transformCursor(element[attr], op); var after = TextPatcher.transformCursor(element[attr], op);
return after; return after;
}); });
@ -291,10 +326,15 @@ by maintaining indexes in rowsOrder and colsOrder
}; };
var recoverCursor = Render.recoverCursor = function (info) { var recoverCursor = Render.recoverCursor = function (info) {
try {
if (info.selection && info.node) { if (info.selection && info.node) {
info.node.selectionStart = info.selection[0]; info.node.selectionStart = info.selection[0];
info.node.selectionEnd = info.selection[1]; info.node.selectionEnd = info.selection[1];
} }
} catch (err) {
//console.log(info.node);
//console.error(err);
}
}; };
var diffOptions = { var diffOptions = {