franzz/mythoughts
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

merging read and write quill engine

Browse Source
This commit is contained in:
Franzz
2018-11-22 21:22:41 +01:00
parent bcdcf0d2f0
commit 3a53121fe2
12 changed files with 368 additions and 341 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
scripts/common.js
View File

@@ -74,13 +74,7 @@ var Tools = {
.slideDown('fast')
.delay(5000)
.slideUp('fast', function(){$(this).remove();});
},
quill2Html: function(asDelta) {
var tempCont = document.createElement("div");
(new Quill(tempCont)).setContents(asDelta);
return tempCont.getElementsByClassName("ql-editor")[0].innerHTML;
}
}
};
function emptyBox(element, text)

219
scripts/mythoughts.js
View File

@@ -288,4 +288,223 @@ function MyThoughts(asGlobals)
asVarName.unshift('tmp');
return self.vars(asVarName, oValue);
};
}
class Editor {
constructor(sContainerId, bReadOnly) {
this.id = 0;
this.page = 0;
this.keystrokes = 0;
this.line = false;
this.readOnly = bReadOnly || false;
//DOM Elements
var sEditorId = 'edi'+Math.floor(Math.random() * 1000);
this.$Container = $(sContainerId).addClass('editor').append(self.consts.pages['editor']);
this.$Header = this.$Container.find('.edi_header');
this.$EditorBox = this.$Container.find('.edi_container');
this.$Editor = this.$Container.find('.edi_table').attr('id', sEditorId);
this.$PrevBtn = $('.prev');
this.$NextBtn = $('.next');
this.onKeyStroke = function(){};
this.oQuill = new Quill('#'+sEditorId, {
theme: 'bubble',
placeholder: 'What\'s on your mind?',
readOnly: bReadOnly,
modules: {
toolbar: [['bold', 'italic', 'underline'], [{ 'list': 'ordered'}, { 'list': 'bullet' }], ['clean']]
}
});
//Key strokes & mouse Events
this.$Editor.keydown((e) => {
if($.inArray(e.which, [13, 37, 38, 39, 40]) != -1) this._onChange('', '', 'user', e);
else if(e.which==33) this.$PrevBtn.click();
else if(e.which==34) this.$NextBtn.click();
});
this.oQuill.on('text-change', (delta, oldDelta, sSource) => {this._onChange(delta, oldDelta, sSource);});
$(window).mousewheel((turn, iDelta) => {
var iNewPage = this.page + ((iDelta > 0)?-1:1);
this.moveToPage(iNewPage);
return false;
});
//Page buttons
this.$PrevBtn.click(() => {this.moveToPage(this.page - 1);});
this.$NextBtn.click(() => {this.moveToPage(this.page + 1);});
this._postInit();
}
setHeader(sHeader) {
this.$Header
.toggle(this.readOnly)
.text(sHeader);
}
open(iThoughtId) {
Tools.ajax(
'load',
(asData) => {
this.id = asData.id;
this.setHeader('Thoughts on '+asData.created_f);
this.oQuill.setContents(asData.ops);
this._postInit();
},
{id: iThoughtId}
);
}
_setPageHeight() {
var iHeight = this.$EditorBox.height();
var iLineHeight = parseInt(this.$Editor.find('p').css('line-height'));
var iMaxHeight = Math.floor(iHeight / iLineHeight) * iLineHeight;
this.$EditorBox.height(iMaxHeight+'px');
this.lineHeight = iLineHeight;
this.pageHeight = iMaxHeight;
}
_postInit(iPage) {
iPage = iPage || 0;
this._setPageHeight();
this.moveToPage(iPage);
if(!this.readOnly) this.oQuill.focus();
}
_onChange(delta, oldDelta, sSource, e) {
if(sSource == 'user')
{
var range = this.oQuill.getSelection();
if(range)
{
//sCursorPos = '';
var bSelection = (typeof e != 'undefined')?e.shiftKey:false;
var oSelBound = this.oQuill.getBounds(range.index, range.length);
var oEditorCurBound = { top: this.pageHeight * this.page,
bottom: this.pageHeight * (this.page + 1)};
//console.log('oEditorCurBound: top='+oEditorCurBound.top+' bottom='+oEditorCurBound.bottom);
//console.log('---------------------');
//console.log('range.length = '+range.length);
//console.log('oSelBound: top='+oSelBound.top+' bottom='+oSelBound.bottom);
//Detecting new selection & saving original line
if(!this.line && bSelection) this.line = $.extend({}, oSelBound);
else if(!bSelection) this.line = false;
//Detecting navigating back to original line
var bReset = (this.line && this.line.top == oSelBound.top && this.line.bottom == oSelBound.bottom);
//Anticipating arrows (downside of using keydown event)
if(e)
{
switch(e.which)
{
case 13: //Enter
case 40: //Down
if(bSelection) {
if(bReset) sCursorPos = 'last';
if(sCursorPos == 'last') { //Downwards selection, expanding
oSelBound.bottom += this.lineHeight;
}
else { //Upwards selection, reducing
oSelBound.top += this.lineHeight;
}
}
else oSelBound.bottom += this.lineHeight;
break;
case 38: //Up
if(bSelection) {
if(bReset) sCursorPos = 'first';
if(sCursorPos == 'last') { //Downwards selection, reducing
oSelBound.bottom -= this.lineHeight;
}
else { //Upwards selection, expanding
oSelBound.top -= this.lineHeight;
}
}
else oSelBound.top = Math.max(0, oSelBound.top - this.lineHeight);
break;
case 37: //Left
if(bReset && bSelection) sCursorPos = 'first';
oSelBound = this.oQuill.getBounds(Math.max(0, range.index - 1), range.length);
break;
case 39: //Right
if(bReset && bSelection) sCursorPos = 'last';
oSelBound = this.oQuill.getBounds(range.index + 1, range.length);
break;
}
}
else this._incKeyStrokes();
//console.log('oSelBound: top='+oSelBound.top+' bottom='+oSelBound.bottom);
var sNewPage = this.page;
if( oSelBound.top < oEditorCurBound.top && (!bSelection || sCursorPos == 'first') ||
oSelBound.bottom < oEditorCurBound.top && (!bSelection || sCursorPos == 'last')) {
sNewPage--;
}
else if(oSelBound.bottom > oEditorCurBound.bottom && (!bSelection || sCursorPos == 'last') ||
oSelBound.top > oEditorCurBound.bottom && (!bSelection || sCursorPos == 'first')) {
sNewPage++;
}
this.moveToPage(sNewPage);
}
}
}
moveToPage(iNewPage) {
var iContentHeight = this.$Editor.height();
var iLastPage = Math.floor(iContentHeight / this.pageHeight);
console.log(iLastPage);
if(iNewPage == 'last') iNewPage = iLastPage;
if(iNewPage >= 0 && iNewPage <= iLastPage)
{
if(iNewPage != this.page)
{
var iOldPage = this.page;
this.page = iNewPage;
//Page Position
var iOffset = this.page * this.pageHeight * -1;
this.$Editor.css('top', iOffset);
}
//Page Number
//$('.curr').text(self.vars('quill_page') + 1);
//Detect First/Last Page
this.$PrevBtn.toggleClass('visible', this.page != 0);
this.$NextBtn.toggleClass('visible', this.page != iLastPage);
}
}
_incKeyStrokes() {
this.keystrokes += + 1;
this.onKeyStroke();
}
getContent() {
return this.oQuill.getContents().ops;
}
isEmpty() {
const rEmpty = /^(<p>(<br>|<br\/>|<br\s\/>|\s+|)<\/p>|)$/gm;
return rEmpty.test(this.oQuill.getText().trim());
}
quill2Html(asDelta) {
var tempCont = document.createElement('div');
(new Quill(tempCont)).setContents(asDelta);
return tempCont.getElementsByClassName('ql-editor')[0].innerHTML;
}
}