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('br'),
h('center', [
h('div', [
h('textarea#cp-app-poll-description', {
rows: "5",
cols: "50",
disabled: true
}),
h('div#cp-app-poll-description-published'),
h('br')
]),
h('div#cp-app-poll-table-container', [

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

@ -9,6 +9,58 @@ define([
var saveAs = window.saveAs;
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) {
var exp = {};
var Messages = Cryptpad.Messages;
@ -253,56 +305,8 @@ define([
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) {
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);
return module.setValueAndCursor(editor, oldDoc, remoteDoc, TextPatcher);
};
return exp;

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

@ -21,6 +21,8 @@
@poll-td-bg: @poll-th-bg;
@poll-td-fg: @poll-th-fg;
@poll-help-bg: #bbffbb; // lightgreen
@poll-uncommitted-cell: #eee;
@poll-uncommitted-bg: #ddd; //lighten(@poll-th-bg, 50%);
@poll-uncommitted-text: black;
@ -116,29 +118,48 @@ table#cp-app-poll-table {
display: inline-block;
}
#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;
margin: auto;
min-width: 80%;
width: 80%;
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;
border: 1px solid transparent;
background-color: #eeeeee;
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 {
width: 80%;
width: 100%;
margin: auto;
padding: 20px 10%;
background: @poll-help-bg;
}
// from cryptpad.less

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

Loading…
Cancel
Save