mirror of https://github.com/xwiki-labs/cryptpad
Comments in polls
This commit is contained in:
parent
846b1a9fb3
commit
26dfc65c25
|
@ -664,6 +664,19 @@ define([
|
|||
h('button#cp-app-poll-create-option.btn.btn-secondary', {
|
||||
title: Msg.poll_create_option
|
||||
}, h('span.fa.fa-plus')),
|
||||
]),
|
||||
h('div#cp-app-poll-comments', [
|
||||
h('h2#cp-app-poll-comments-add-title', "TODO: add comment"),
|
||||
h('div#cp-app-poll-comments-add', [
|
||||
h('input.cp-app-poll-comments-add-name', {
|
||||
type: 'text'
|
||||
}),
|
||||
h('textarea.cp-app-poll-comments-add-msg'),
|
||||
h('button.cp-app-poll-comments-add-submit', "TODO: SUBMIT"),
|
||||
h('button.cp-app-poll-comments-add-cancel', "TODO: CANCEL")
|
||||
]),
|
||||
h('h2#cp-app-poll-comments-list-title', "TODO: comments"),
|
||||
h('div#cp-app-poll-comments-list')
|
||||
])
|
||||
])
|
||||
])
|
||||
|
|
|
@ -228,7 +228,7 @@ define([
|
|||
$span.append($rightCol);
|
||||
} else {
|
||||
Common.displayAvatar($span, data.avatar, name, function ($img) {
|
||||
if (data.avatar && $img) {
|
||||
if (data.avatar && $img.length) {
|
||||
avatars[data.avatar] = $img[0].outerHTML;
|
||||
}
|
||||
$span.append($rightCol);
|
||||
|
|
|
@ -5,6 +5,7 @@
|
|||
@import (once) '../../customize/src/less2/include/alertify.less';
|
||||
@import (once) '../../customize/src/less2/include/tokenfield.less';
|
||||
@import (once) '../../customize/src/less2/include/tools.less';
|
||||
@import (once) '../../customize/src/less2/include/avatar.less';
|
||||
|
||||
.toolbar_main();
|
||||
.fileupload_main();
|
||||
|
@ -487,6 +488,65 @@ div.cp-app-poll-realtime {
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
#cp-app-poll-comments {
|
||||
width: 50%;
|
||||
margin: 20px auto;
|
||||
min-width: 400px;
|
||||
#cp-app-poll-comments-add {
|
||||
input, textarea {
|
||||
border: 1px solid black;
|
||||
width: 90%;
|
||||
margin: 5px 5%;
|
||||
}
|
||||
input {
|
||||
padding: 5px;
|
||||
height: 26px;
|
||||
&[disabled] {
|
||||
background: #eee;
|
||||
}
|
||||
}
|
||||
textarea {
|
||||
padding: 5px;
|
||||
height: 8em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
text-align: center;
|
||||
}
|
||||
#cp-app-poll-comments-list {
|
||||
.cp-app-poll-comments-list-el {
|
||||
width: 90%;
|
||||
margin: 5px 5%;
|
||||
}
|
||||
.cp-app-poll-comments-list-msg {
|
||||
display: flex;
|
||||
background: #eee;
|
||||
padding: 5px 10px;
|
||||
.cp-app-poll-comments-list-msg-text {
|
||||
flex: 1;
|
||||
white-space: pre;
|
||||
}
|
||||
.cp-app-poll-comments-list-msg-actions {
|
||||
button {
|
||||
border-radius: 0;
|
||||
width: 25px;
|
||||
padding: 0;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cp-app-poll-comments-list-data {
|
||||
background: #ddd;
|
||||
padding: 5px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.cp-app-poll-comments-list-data-name {
|
||||
margin-left: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
.cp-app-poll-comments-list-data-avatar { .avatar_main(30px); }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
|
|
|
@ -743,7 +743,6 @@ define([
|
|||
};
|
||||
var updateDescription = function (old, n) {
|
||||
var o = APP.editor.getValue();
|
||||
console.error(n);
|
||||
SframeCM.setValueAndCursor(APP.editor, o, n, TextPatcher);
|
||||
updatePublishedDescription();
|
||||
common.notify();
|
||||
|
@ -753,6 +752,119 @@ define([
|
|||
updatePublishedDescription();
|
||||
};
|
||||
|
||||
var getCommentId = Render.Uid('c');
|
||||
var removeComment = function (uid) {
|
||||
var idx;
|
||||
APP.proxy.comments.some(function (c, i) {
|
||||
if (c.uid === uid) {
|
||||
console.log('found');
|
||||
idx = i;
|
||||
return true;
|
||||
}
|
||||
});
|
||||
if (idx) {
|
||||
APP.proxy.comments.splice(idx, 1);
|
||||
}
|
||||
APP.updateComments();
|
||||
};
|
||||
/*var editComment = function (id) {
|
||||
// TODO
|
||||
};*/
|
||||
var avatars = {};
|
||||
var updateComments = APP.updateComments = function () {
|
||||
if (!APP.proxy.comments) { APP.proxy.comments = []; }
|
||||
|
||||
var profile;
|
||||
if (common.isLoggedIn()) {
|
||||
profile = metadataMgr.getUserData().profile;
|
||||
}
|
||||
|
||||
var $comments = APP.$comments.html('');
|
||||
var comments = APP.proxy.comments;
|
||||
comments.forEach(function (c) {
|
||||
var $c = $('<div>', {
|
||||
'class': 'cp-app-poll-comments-list-el'
|
||||
}).prependTo($comments);
|
||||
// Metadata
|
||||
var $data = $('<div>', { 'class': 'cp-app-poll-comments-list-data' }).appendTo($c);
|
||||
var $avatar = $('<span>', {
|
||||
'class': 'cp-app-poll-comments-list-data-avatar cp-avatar'
|
||||
}).appendTo($data);
|
||||
if (c.avatar && avatars[c.avatar]) {
|
||||
$avatar.append(avatars[c.avatar]);
|
||||
} else {
|
||||
common.displayAvatar($avatar, c.avatar, c.name, function ($img) {
|
||||
if (c.avatar && $img.length) { avatars[c.avatar] = $img[0].outerHTML; }
|
||||
});
|
||||
}
|
||||
if (c.profile) {
|
||||
$('<a>', {
|
||||
'href': APP.origin + '/profile/#' + c.profile,
|
||||
'target': '_blank',
|
||||
'class': 'cp-app-poll-comments-list-data-name'
|
||||
}).appendTo($data).text(c.name);
|
||||
} else {
|
||||
$('<span>', {
|
||||
'class': 'cp-app-poll-comments-list-data-name'
|
||||
}).appendTo($data).text(c.name);
|
||||
}
|
||||
$('<span>', {
|
||||
'class': 'cp-app-poll-comments-list-data-time'
|
||||
}).appendTo($data).text(new Date(c.time).toLocaleString());
|
||||
|
||||
// Message
|
||||
var $msg = $('<div>', { 'class': 'cp-app-poll-comments-list-msg' }).appendTo($c);
|
||||
$('<div>', {
|
||||
'class': 'cp-app-poll-comments-list-msg-text'
|
||||
}).appendTo($msg).text(c.msg);
|
||||
var $actions = $('<div>', {
|
||||
'class': 'cp-app-poll-comments-list-msg-actions'
|
||||
}).appendTo($msg);
|
||||
|
||||
// Actions
|
||||
if (!c.profile || c.profile === profile) {
|
||||
$('<button>', {
|
||||
'class': 'fa fa-times',
|
||||
'title': 'TODO: remove comment',
|
||||
'data-rt-id': c.uid
|
||||
}).appendTo($actions).click(function () { removeComment(c.uid); });
|
||||
/*$('<button>', {
|
||||
'class': 'fa fa-pencil',
|
||||
'title': 'TODO: edit comment',
|
||||
'data-rt-id': c.uid
|
||||
}).appendTo($actions).click(editComment);*/
|
||||
}
|
||||
});
|
||||
common.notify();
|
||||
};
|
||||
var resetComment = function () {
|
||||
APP.$addComment.find('.cp-app-poll-comments-add-name').val('');
|
||||
APP.$addComment.find('.cp-app-poll-comments-add-msg').val('');
|
||||
};
|
||||
var addComment = function () {
|
||||
if (!APP.proxy.comments) { APP.proxy.comments = []; }
|
||||
var name = APP.$addComment.find('.cp-app-poll-comments-add-name').val();
|
||||
var msg = APP.$addComment.find('.cp-app-poll-comments-add-msg').val();
|
||||
var time = +new Date();
|
||||
|
||||
var profile, avatar;
|
||||
if (common.isLoggedIn()) {
|
||||
profile = metadataMgr.getUserData().profile;
|
||||
avatar = metadataMgr.getUserData().avatar;
|
||||
}
|
||||
|
||||
APP.proxy.comments.push({
|
||||
msg: msg,
|
||||
name: name,
|
||||
time: time,
|
||||
uid: getCommentId(),
|
||||
profile: profile,
|
||||
avatar: avatar
|
||||
});
|
||||
resetComment();
|
||||
updateComments();
|
||||
};
|
||||
|
||||
var checkDeletedCells = function () {
|
||||
// faster than forEach?
|
||||
var c;
|
||||
|
@ -893,11 +1005,20 @@ define([
|
|||
var val = APP.editor.getValue();
|
||||
updateLocalDescription(val);
|
||||
});
|
||||
APP.$addComment.find('.cp-app-poll-comments-add-submit').click(addComment);
|
||||
APP.$addComment.find('.cp-app-poll-comments-add-cancel').click(resetComment);
|
||||
|
||||
$('#cp-app-poll-table-scroll').html('').prepend($table);
|
||||
updateDisplayedTable();
|
||||
updateDescription(null, APP.proxy.description || '');
|
||||
|
||||
// Initialize author name for comments.
|
||||
// Disable name modification for logged in users
|
||||
var $cName = APP.$addComment.find('.cp-app-poll-comments-add-name')
|
||||
.val(metadataMgr.getUserData().name || '');
|
||||
if (common.isLoggedIn()) { $cName.attr('disabled', 'disabled'); }
|
||||
updateComments();
|
||||
|
||||
$table
|
||||
.click(handleClick)
|
||||
.on('keyup', function (e) { handleClick(e, true); });
|
||||
|
@ -913,6 +1034,7 @@ define([
|
|||
})
|
||||
.on('change', ['content'], change)
|
||||
.on('change', ['description'], updateDescription)
|
||||
.on('change', ['comments'], updateComments)
|
||||
.on('remove', [], change);
|
||||
|
||||
// If the user's column is not committed, add his username
|
||||
|
@ -1070,12 +1192,15 @@ define([
|
|||
APP.loggedIn = common.isLoggedIn();
|
||||
APP.SFCommon = common;
|
||||
|
||||
APP.origin = common.getMetadataMgr().getPrivateData().origin;
|
||||
|
||||
APP.$body = $('body');
|
||||
APP.$bar = $('#cp-toolbar');
|
||||
APP.$content = $('#cp-app-poll-content');
|
||||
APP.$descriptionPublished = $('#cp-app-poll-description-published');
|
||||
APP.$description = $('#cp-app-poll-description');
|
||||
//.attr('placeholder', Messages.poll_descriptionHint || 'description');
|
||||
APP.$comments = $('#cp-app-poll-comments-list');
|
||||
APP.$addComment = $('#cp-app-poll-comments-add');
|
||||
|
||||
APP.editor = CMeditor.fromTextArea(APP.$description[0], {
|
||||
lineNumbers: true,
|
||||
|
@ -1092,7 +1217,8 @@ define([
|
|||
};
|
||||
|
||||
if (APP.readOnly) {
|
||||
$('#cp-app-poll-create-user, #cp-app-poll-create-option').remove();
|
||||
$('#cp-app-poll-create-user, #cp-app-poll-create-option, #cp-app-poll-comments-add')
|
||||
.remove();
|
||||
}
|
||||
|
||||
var rt = APP.rt = Listmap.create(listmapConfig);
|
||||
|
|
|
@ -9,9 +9,10 @@ define([
|
|||
var Example = {
|
||||
metadata: {
|
||||
title: '',
|
||||
description: '',
|
||||
userData: {}
|
||||
},
|
||||
description: '',
|
||||
comments: [],
|
||||
content: {
|
||||
/* TODO
|
||||
|
||||
|
|
Loading…
Reference in New Issue