blitzwing/cryptpad
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

detect whether you are new to a page

Browse source 
prompt for your name and create a column for your username
prompt before deleting columns as well
style a few elements differently
This commit is contained in:
ansuz 2016-08-17 18:36:13 +02:00
parent e2b162bf6d
commit 76bfb6ab35
4 changed files with 121 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
customize.dist/main.css
View file

@ -302,24 +302,27 @@ form.realtime table tr td.checkbox-cell div.checkbox-contain {
height: 100%;
width: 100%;
}
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"] {
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.mine) {
display: none;
}
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"] ~ label {
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.mine) ~ .cover {
font-weight: bold;
background-color: #FF0073;
color: #302B28;
display: block;
}
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"] ~ label:after {
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.mine) ~ .cover:after {
content: "✖";
}
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"] ~ label.yes {
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.mine) ~ .cover.yes {
background-color: #46E981;
}
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"] ~ label.yes:after {
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.mine) ~ .cover.yes:after {
content: "✔";
}
form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.mine) ~ .cover.mine {
display: none;
}
form.realtime table input[type="text"] {
height: 100%;
width: 90%;
@ -333,7 +336,6 @@ form.realtime table tfoot tr td {
z-index: 4000;
cursor: pointer;
}
form.realtime #adduser,
form.realtime #addoption {
color: #46E981;
border: 1px solid #46E981;
@ -341,6 +343,7 @@ form.realtime #addoption {
}
form.realtime #adduser {
border-top-left-radius: 5px;
padding: 15px;
}
form.realtime #addoption {
border-bottom-left-radius: 5px;

40
customize.dist/src/cryptpad.less
View file

@ -373,19 +373,29 @@ form.realtime {
input {
&[type="checkbox"] {
display: none;
~ label {
display: block;
font-weight: bold;
&.mine {
// idk
}
background-color: @cp-red;
color: @base;
&:after { content: "✖"; }
&:not(.mine) {
display: none;
display: block;
&.yes {
background-color: @cp-green;
&:after { content: "✔"; }
~ .cover {
display: block;
font-weight: bold;
background-color: @cp-red;
color: @base;
&:after { content: "✖"; }
display: block;
&.yes {
background-color: @cp-green;
&:after { content: "✔"; }
}
&.mine {
display: none;
}
}
}
}
@ -431,14 +441,18 @@ form.realtime {
}
}
#adduser,
//#adduser,
#addoption {
color: @cp-green;
border: 1px solid @cp-green;
padding: 15px;
}
#adduser { .top-left; }
#adduser {
.top-left;
//border: 1px solid grey;
padding: 15px;
}
#addoption { .bottom-left; }
}

2
www/poll/index.html
View file

@ -62,7 +62,7 @@
<thead>
<tr>
<td>
<div id="adduser" class="clickable" title="click to add a user">+ Users</div>
<div id="adduser"></div>
</td>
</tr>
</thead>

107
www/poll/main.js
View file

@ -70,12 +70,6 @@ define([
};
};
var find = function (map, path) {
return (map && path.reduce(function (p, n) {
return typeof p[n] !== 'undefined' && p[n];
}, map)) || undefined;
};
var Input = function (opt) { return $('<input>', opt); };
var Checkbox = function (id) {
var p = parseXY(id);
@ -86,8 +80,9 @@ define([
'class': 'checkbox-contain',
});
var $label = $('<label>', {
var $cover = $('<span>', {
'for': id,
'class': 'cover'
});
var $check = Input({
@ -98,15 +93,21 @@ define([
console.log("(%s, %s) => %s", p.x, p.y, $check[0].checked);
var checked = proxy.table.cells[id] = $check[0].checked? 1: 0;
if (checked) {
$label.addClass('yes');
$cover.addClass('yes');
}
else {
$label.removeClass('yes');
$cover.removeClass('yes');
}
});
if (p.x === module.userId) {
$check.addClass('mine');
} else {
console.log(module.userId, p.x);
}
$div.append($check);
$check.after($label);
$check.after($cover);
return $div; //$check;
};
@ -116,7 +117,13 @@ define([
var setEditable = function (bool) {
module.isEditable = bool;
$('input, textarea').attr('disabled', !bool);
items.forEach(function ($item) {
$item.attr('disabled', !bool);
});
$('input[id^="y"]').each(function (i, e) {
$(this).attr('disabled', !bool);
});
};
var coluid = Uid('x');
@ -181,6 +188,7 @@ define([
id: id,
type: 'text',
placeholder: 'your name',
disabled: true,
}).on('keyup change', function () {
proxy.table.cols[id] = $user.val() || "";
});
@ -193,8 +201,12 @@ define([
'class': 'remove',
'title': 'remove column', // TODO translate
}).text('✖').click(function () {
removeColumn(proxy, id);
table.removeColumn(id);
Cryptpad.confirm("Are you sure you'd like to remove this user?", // TODO translate
function (yes) {
if (!yes) { return; }
removeColumn(proxy, id);
table.removeColumn(id);
});
}));
proxy.table.cols[id] = value || "";
@ -243,11 +255,22 @@ define([
return $option;
};
/*
$('#adduser').click(function () {
if (!module.isEditable) { return; }
var id = coluid();
makeUser(module.rt.proxy, id).focus();
});
*/
var makeUserEditable = module.makeUserEditable = function (id, bool) {
var $name = $('input[type="text"][id="' + id + '"]').attr('disabled', !bool);
var $sel = $('input[id^="' + id + '"]')
[bool?'addClass':'removeClass']('mine');
return $sel;
};
$('#addoption').click(function () {
if (!module.isEditable) { return; }
@ -348,7 +371,7 @@ define([
}
var checked = box.checked = proxy.table.cells[uid] ? true : false;
if (checked) {
$(box).parent().find('label').addClass('yes');
$(box).parent().find('.cover').addClass('yes');
}
});
@ -445,10 +468,10 @@ define([
if (!$parent.length) { console.log("couldn't find parent element of checkbox"); return; }
if (checked) {
$parent.find('label').addClass('yes');
$parent.find('.cover').addClass('yes');
//$(el).parent().
} else {
$parent.find('label').removeClass('yes');
$parent.find('.cover').removeClass('yes');
}
break;
default:
@ -643,14 +666,52 @@ define([
// TODO prompt them with questions to set up their poll...
}
/* TODO
even if the user isn't the first, check their storage to see if
they've visited before and if they 'own' a column in the table.
if they do, make it editable and suggest that they fill it in.
Cryptpad.getPadAttribute('column', function (err, column) {
if (err) {
console.log("unable to retrieve column");
return;
}
if they have not visited, make a column for them.
don't propogate changes from this column until they make changes
*/
module.userId = column;
var promptForName = function () {
// HERE
Cryptpad.prompt("What is your name?", "", function (name, ev) {
if (name === null) {
name = '';
}
if (!module.isEditable) { return; }
var id = module.userId = coluid();
Cryptpad.setPadAttribute('column', id, function (err) {
if (err) {
console.error("Couldn't remember your column id");
return;
}
console.log(id);
makeUser(module.rt.proxy, id, name).focus().val(name);
makeUserEditable(id, true);
});
});
};
if (column === null) {
//console.log("Looks like you're new to this poll, why don't you make a column");
promptForName();
return;
}
// column might be defined, but that column might have been deleted...
if (proxy.table.colsOrder.indexOf(column) === -1) {
promptForName();
return;
}
// if column is defined, then you can just make that column editable
makeUserEditable(column, true);
});
};
var config = {