Use codemirror for description in poll

pull/1/head
yflory 7 years ago
parent 707d3b3e94
commit 68bda92291

@ -646,12 +646,13 @@ define([
]), ]),
h('div.cp-app-poll-realtime', [ h('div.cp-app-poll-realtime', [
h('br'), h('br'),
h('center', [ h('div', [
h('textarea#cp-app-poll-description', { h('textarea#cp-app-poll-description', {
rows: "5", rows: "5",
cols: "50", cols: "50",
disabled: true disabled: true
}), }),
h('div#cp-app-poll-description-published'),
h('br') h('br')
]), ]),
h('div#cp-app-poll-table-container', [ h('div#cp-app-poll-table-container', [

@ -68,7 +68,6 @@ define(['json.sortify'], function (Sortify) {
}; };
var change = function (lazy) { var change = function (lazy) {
dirty = true; dirty = true;
console.error('METADATA CHANGE CALLED');
setTimeout(function () { setTimeout(function () {
checkUpdate(lazy); checkUpdate(lazy);
}); });

@ -9,6 +9,58 @@ define([
var saveAs = window.saveAs; var saveAs = window.saveAs;
var module = {}; var module = {};
var cursorToPos = function(cursor, oldText) {
var cLine = cursor.line;
var cCh = cursor.ch;
var pos = 0;
var textLines = oldText.split("\n");
for (var line = 0; line <= cLine; line++) {
if(line < cLine) {
pos += textLines[line].length+1;
}
else if(line === cLine) {
pos += cCh;
}
}
return pos;
};
var posToCursor = function(position, newText) {
var cursor = {
line: 0,
ch: 0
};
var textLines = newText.substr(0, position).split("\n");
cursor.line = textLines.length - 1;
cursor.ch = textLines[cursor.line].length;
return cursor;
};
module.setValueAndCursor = function (editor, oldDoc, remoteDoc, TextPatcher) {
var scroll = editor.getScrollInfo();
//get old cursor here
var oldCursor = {};
oldCursor.selectionStart = cursorToPos(editor.getCursor('from'), oldDoc);
oldCursor.selectionEnd = cursorToPos(editor.getCursor('to'), oldDoc);
editor.setValue(remoteDoc);
editor.save();
var op = TextPatcher.diff(oldDoc, remoteDoc);
var selects = ['selectionStart', 'selectionEnd'].map(function (attr) {
return TextPatcher.transformCursor(oldCursor[attr], op);
});
if(selects[0] === selects[1]) {
editor.setCursor(posToCursor(selects[0], remoteDoc));
}
else {
editor.setSelection(posToCursor(selects[0], remoteDoc), posToCursor(selects[1], remoteDoc));
}
editor.scrollTo(scroll.left, scroll.top);
};
module.create = function (Common, defaultMode, CMeditor) { module.create = function (Common, defaultMode, CMeditor) {
var exp = {}; var exp = {};
var Messages = Cryptpad.Messages; var Messages = Cryptpad.Messages;
@ -253,56 +305,8 @@ define([
onLocal(); onLocal();
}; };
var cursorToPos = function(cursor, oldText) {
var cLine = cursor.line;
var cCh = cursor.ch;
var pos = 0;
var textLines = oldText.split("\n");
for (var line = 0; line <= cLine; line++) {
if(line < cLine) {
pos += textLines[line].length+1;
}
else if(line === cLine) {
pos += cCh;
}
}
return pos;
};
var posToCursor = function(position, newText) {
var cursor = {
line: 0,
ch: 0
};
var textLines = newText.substr(0, position).split("\n");
cursor.line = textLines.length - 1;
cursor.ch = textLines[cursor.line].length;
return cursor;
};
exp.setValueAndCursor = function (oldDoc, remoteDoc, TextPatcher) { exp.setValueAndCursor = function (oldDoc, remoteDoc, TextPatcher) {
var scroll = editor.getScrollInfo(); return module.setValueAndCursor(editor, oldDoc, remoteDoc, TextPatcher);
//get old cursor here
var oldCursor = {};
oldCursor.selectionStart = cursorToPos(editor.getCursor('from'), oldDoc);
oldCursor.selectionEnd = cursorToPos(editor.getCursor('to'), oldDoc);
editor.setValue(remoteDoc);
editor.save();
var op = TextPatcher.diff(oldDoc, remoteDoc);
var selects = ['selectionStart', 'selectionEnd'].map(function (attr) {
return TextPatcher.transformCursor(oldCursor[attr], op);
});
if(selects[0] === selects[1]) {
editor.setCursor(posToCursor(selects[0], remoteDoc));
}
else {
editor.setSelection(posToCursor(selects[0], remoteDoc), posToCursor(selects[1], remoteDoc));
}
editor.scrollTo(scroll.left, scroll.top);
}; };
return exp; return exp;

@ -41,7 +41,6 @@ define(['jquery'], function ($) {
}; };
metadataMgr.onChange(function () { metadataMgr.onChange(function () {
console.error('METADATA CHANGE');
var md = metadataMgr.getMetadata(); var md = metadataMgr.getMetadata();
if ($title) { if ($title) {
$title.find('span.cp-toolbar-title-value').text(md.title || md.defaultTitle); $title.find('span.cp-toolbar-title-value').text(md.title || md.defaultTitle);

@ -21,6 +21,8 @@
@poll-td-bg: @poll-th-bg; @poll-td-bg: @poll-th-bg;
@poll-td-fg: @poll-th-fg; @poll-td-fg: @poll-th-fg;
@poll-help-bg: #bbffbb; // lightgreen
@poll-uncommitted-cell: #eee; @poll-uncommitted-cell: #eee;
@poll-uncommitted-bg: #ddd; //lighten(@poll-th-bg, 50%); @poll-uncommitted-bg: #ddd; //lighten(@poll-th-bg, 50%);
@poll-uncommitted-text: black; @poll-uncommitted-text: black;
@ -116,29 +118,48 @@ table#cp-app-poll-table {
display: inline-block; display: inline-block;
} }
#cp-app-poll-description { #cp-app-poll-description {
&~ .CodeMirror {
margin: auto;
min-width: 80%;
width: 80%;
min-height: 200px;
border: 1px solid black;
}
}
#cp-app-poll-description-published {
display: none;
padding: 15px; padding: 15px;
margin: auto; margin: auto;
min-width: 80%; min-width: 80%;
width: 80%; width: 80%;
min-height: 7em; min-height: 7em;
font: @colortheme_app-font;
//font-size: 20px;
/*font-weight: bold;*/
border: 1px solid black;
}
#cp-app-poll-description[disabled] {
resize: none;
color: #000; color: #000;
border: 1px solid transparent; border: 1px solid transparent;
background-color: #eeeeee; background-color: #eeeeee;
font: @colortheme_app-font; font: @colortheme_app-font;
text-align: left;
}
.cp-app-poll-published {
#cp-app-poll-description {
display: none;
&~ .CodeMirror {
display: none;
}
}
#cp-app-poll-description-published {
display: block;
&:empty {
display: none;
}
}
} }
#cp-app-poll-help { #cp-app-poll-help {
width: 80%; width: 100%;
margin: auto; margin: auto;
padding: 20px 10%;
background: @poll-help-bg;
} }
// from cryptpad.less // from cryptpad.less

@ -12,6 +12,12 @@ define([
'/common/sframe-chainpad-listmap.js', '/common/sframe-chainpad-listmap.js',
'/customize/pages.js', '/customize/pages.js',
'/poll/render.js', '/poll/render.js',
'/common/diffMarked.js',
'/common/sframe-common-codemirror.js',
'cm/lib/codemirror',
'cm/mode/markdown/markdown',
'css!cm/lib/codemirror.css',
'/bower_components/file-saver/FileSaver.min.js', '/bower_components/file-saver/FileSaver.min.js',
@ -31,7 +37,10 @@ define([
AppConfig, AppConfig,
Listmap, Listmap,
Pages, Pages,
Renderer) Renderer,
DiffMd,
SframeCM,
CMeditor)
{ {
var Messages = Cryptpad.Messages; var Messages = Cryptpad.Messages;
var saveAs = window.saveAs; var saveAs = window.saveAs;
@ -138,7 +147,7 @@ define([
Set the user id (user column) in the pad attributes Set the user id (user column) in the pad attributes
*/ */
var setUserId = function (id, cb) { var setUserId = function (id, cb) {
cb =cb || $.noop; cb = cb || $.noop;
APP.userid = id; APP.userid = id;
common.setPadAttribute('userid', id, function (e) { common.setPadAttribute('userid', id, function (e) {
if (e) { if (e) {
@ -213,6 +222,7 @@ define([
var styleUserColumn = function () { var styleUserColumn = function () {
var userid = APP.userid; var userid = APP.userid;
if (!userid) { return; }
// Enable input for the userid column // Enable input for the userid column
$('input[disabled="disabled"][data-rt-id^="' + userid + '"]').removeAttr('disabled') $('input[disabled="disabled"][data-rt-id^="' + userid + '"]').removeAttr('disabled')
@ -538,6 +548,7 @@ define([
/* Called whenever an event is fired on a span */ /* Called whenever an event is fired on a span */
var handleSpan = function (span) { var handleSpan = function (span) {
if (!span) { return; }
var id = span.getAttribute('data-rt-id'); var id = span.getAttribute('data-rt-id');
var type = Render.typeofId(id); var type = Render.typeofId(id);
var isRemove = span.className && span.className.split(' ') var isRemove = span.className && span.className.split(' ')
@ -570,6 +581,7 @@ define([
if (!res) { return; } if (!res) { return; }
Render.removeColumn(APP.proxy, id, function () { Render.removeColumn(APP.proxy, id, function () {
change(); change();
if (id === APP.userid) { setUserId(''); }
}); });
}); });
} else if (isBookmark) { } else if (isBookmark) {
@ -674,9 +686,9 @@ define([
bool = true; bool = true;
} }
setTablePublished(bool); setTablePublished(bool);
['textarea'].forEach(function (sel) { /*['textarea'].forEach(function (sel) {
$(sel).attr('disabled', bool); $(sel).attr('disabled', bool);
}); });*/
updatePublishButton(); updatePublishButton();
}; };
@ -722,23 +734,19 @@ define([
} }
}; };
var updatePublishedDescription = function () {
var v = APP.editor.getValue();
DiffMd.apply(DiffMd.render(v || Messages.poll_descriptionHint), APP.$descriptionPublished);
};
var updateDescription = function (old, n) { var updateDescription = function (old, n) {
var o = APP.$description.val(); var o = APP.$description.val();
var op = TextPatcher.diff(o, n || ''); SframeCM.setValueAndCursor(APP.editor, o, n, TextPatcher);
var el = APP.$description[0]; updatePublishedDescription();
var selects = ['selectionStart', 'selectionEnd'].map(function (attr) {
return TextPatcher.transformCursor(el[attr], op);
});
APP.$description.val(n);
if (op) {
el.selectionStart = selects[0];
el.selectionEnd = selects[1];
}
common.notify(); common.notify();
}; };
var updateLocalDescription = function (n) { var updateLocalDescription = function (n) {
APP.proxy.description = n; APP.proxy.description = n;
updatePublishedDescription();
}; };
var onReady = function (info, userid) { var onReady = function (info, userid) {
@ -847,6 +855,7 @@ define([
APP.$createCol = $('#cp-app-poll-create-user').click(function () { APP.$createCol = $('#cp-app-poll-create-user').click(function () {
var uncommittedCopy = { content: getUncommitted('col') }; var uncommittedCopy = { content: getUncommitted('col') };
var id = uncommittedCopy.content.colsOrder[0]; var id = uncommittedCopy.content.colsOrder[0];
if (!APP.userid) { setUserId(id); }
mergeUncommitted(proxy, uncommittedCopy, true); mergeUncommitted(proxy, uncommittedCopy, true);
change(null, null, null, null, function() { change(null, null, null, null, function() {
handleSpan($('.cp-app-poll-table-lock[data-rt-id="' + id + '"]')[0]); handleSpan($('.cp-app-poll-table-lock[data-rt-id="' + id + '"]')[0]);
@ -861,21 +870,11 @@ define([
}); });
}); });
if (!APP.readOnly) {
setUserId(userid);
}
// Description // Description
var resize = function () { APP.editor.on('change', function () {
var lineCount = APP.$description.val().split('\n').length; var val = APP.editor.getValue();
APP.$description.css('height', lineCount + 'rem');
};
APP.$description.on('change keyup', function () {
var val = APP.$description.val();
updateLocalDescription(val); updateLocalDescription(val);
resize();
}); });
resize();
$('#cp-app-poll-table-scroll').html('').prepend($table); $('#cp-app-poll-table-scroll').html('').prepend($table);
updateDisplayedTable(); updateDisplayedTable();
@ -1031,9 +1030,18 @@ define([
APP.$body = $('body'); APP.$body = $('body');
APP.$bar = $('#cp-toolbar'); APP.$bar = $('#cp-toolbar');
APP.$content = $('#cp-app-poll-content'); APP.$content = $('#cp-app-poll-content');
APP.$descriptionPublished = $('#cp-app-poll-description-published');
APP.$description = $('#cp-app-poll-description') APP.$description = $('#cp-app-poll-description')
.attr('placeholder', Messages.poll_descriptionHint || 'description'); .attr('placeholder', Messages.poll_descriptionHint || 'description');
APP.editor = CMeditor.fromTextArea(APP.$description[0], {
lineNumbers: true,
lineWrapping: true,
styleActiveLine : true,
mode: "markdown",
});
var listmapConfig = { var listmapConfig = {
data: {}, data: {},
common: common, common: common,

Loading…
Cancel
Save