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

Notes

Browse Source
This commit is contained in:
Franzz
2019-09-05 22:55:40 +02:00
parent d8ac086b17
commit 1407e9b77a
12 changed files with 210 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
scripts/catc.js
View File

@@ -277,46 +277,28 @@ function CATC(asGlobals)
};
}
//Date format
const Inline = Quill.import('blots/inline');
class ThoughtDate extends Inline {
static create(value) {
let node = super.create();
node.setAttribute('class', 'edi_header');
return node;
}
}
ThoughtDate.blotName = 'thought_date';
ThoughtDate.tagName = 'div';
Quill.register(ThoughtDate);
class Editor {
constructor(sContainerId, bReadOnly) {
constructor(sEditorId, bReadOnly) {
this.id = 0;
this.page = 0;
this.keystrokes = 0;
this.line = false;
this.readOnly = bReadOnly || false;
this.sCursorPos = '';
//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.$Editor = $(sEditorId);
this.onKeyStroke = function(e){};
this.oQuill = new Quill('#'+sEditorId, {
theme: 'bubble',
placeholder: 'What\'s on your mind?',
readOnly: bReadOnly,
this.oQuill = new Quill(sEditorId, {
theme: 'snow',
placeholder: 'Notes',
readOnly: bReadOnly/*,
modules: {
toolbar: [['bold', 'italic', 'underline'], [{ 'list': 'ordered'}, { 'list': 'bullet' }], ['clean']]
}
}*/
});
this._initEvents();
@@ -326,173 +308,28 @@ class Editor {
_initEvents() {
//Key strokes
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();
else this.onKeyStroke(e);
if($.inArray(e.which, [13, 37, 38, 39, 40]) == -1) this.onKeyStroke(e);
});
//On text modification
this.oQuill.on('text-change', (delta, oldDelta, sSource) => {this._onChange(delta, oldDelta, sSource);});
//Mouse wheel events
$(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.oQuill.on('text-change', (delta, oldDelta, sSource) => {this._incKeyStrokes();});
}
_postInit(iPage) {
iPage = iPage || 0;
this._setPageHeight();
this.moveToPage(iPage);
if(!this.readOnly) this.oQuill.focus();
}
setHeader(sHeader) {
this.$Editor.find('.edi_header').remove();
if(this.readOnly) {
this.oQuill.insertText(0, sHeader+"\n");
this.oQuill.formatText(0, sHeader.length, 'thought_date', true);
}
}
open(iThoughtId) {
open(iCourseId) {
Tools.ajax(
'load',
'get_note',
(asData) => {
this.id = asData.id;
this.oQuill.setContents(asData.ops);
this.setHeader('Thoughts on '+asData.created_f);
this._postInit();
},
{id: iThoughtId}
{id: iCourseId}
);
}
_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;
}
_onChange(delta, oldDelta, sSource, e) {
if(sSource == 'user')
{
var range = this.oQuill.getSelection();
if(range)
{
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) this.sCursorPos = 'last';
if(this.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) this.sCursorPos = 'first';
if(this.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) this.sCursorPos = 'first';
oSelBound = this.oQuill.getBounds(Math.max(0, range.index - 1), range.length);
break;
case 39: //Right
if(bReset && bSelection) this.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 || this.sCursorPos == 'first') ||
oSelBound.bottom < oEditorCurBound.top && (!bSelection || this.sCursorPos == 'last')) {
sNewPage--;
}
else if(oSelBound.bottom > oEditorCurBound.bottom && (!bSelection || this.sCursorPos == 'last') ||
oSelBound.top > oEditorCurBound.bottom && (!bSelection || this.sCursorPos == 'first')) {
sNewPage++;
}
this.moveToPage(sNewPage);
}
}
}
moveToPage(iNewPage) {
var iContentHeight = this.$Editor.height();
var iLastPage = Math.floor(iContentHeight / this.pageHeight);
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;