merging read and write quill engine
This commit is contained in:
@@ -141,7 +141,7 @@ class MyThoughts extends Main
|
|||||||
);
|
);
|
||||||
|
|
||||||
//Pages
|
//Pages
|
||||||
$asPages = array('logon', 'logoff', 'write', 'read', 'settings', 'template');
|
$asPages = array('logon', 'logoff', 'write', 'read', 'settings', 'template', 'editor');
|
||||||
foreach($asPages as $sPage) $asGlobalVars['consts']['pages'][$sPage] = $this->getPageContent($sPage);
|
foreach($asPages as $sPage) $asGlobalVars['consts']['pages'][$sPage] = $this->getPageContent($sPage);
|
||||||
|
|
||||||
//Main Page
|
//Main Page
|
||||||
|
|||||||
11
masks/editor.html
Normal file
11
masks/editor.html
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
<div class="edi_header"></div>
|
||||||
|
<div class="edi_container">
|
||||||
|
<div class="edi_content">
|
||||||
|
<div class="edi_table" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="edi_nav">
|
||||||
|
<div class="nav-elem prev"><a class="fal fa-fw fa-prev"></a></div>
|
||||||
|
<div class="nav-elem curr"></div>
|
||||||
|
<div class="nav-elem next"><a class="fal fa-fw fa-next"></a></div>
|
||||||
|
</div>
|
||||||
@@ -1,19 +1,8 @@
|
|||||||
<div id="read">
|
<div id="read"></div>
|
||||||
<div class="header date"></div>
|
|
||||||
<div class="body"></div>
|
|
||||||
</div>
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
oMyThoughts.pageInit = function(asHash, bFirstPage)
|
oMyThoughts.pageInit = function(asHash, bFirstPage) {
|
||||||
{
|
oEditor = new Editor('#read', true);
|
||||||
Tools.ajax(
|
oEditor.open(asHash.items[0]);
|
||||||
'load',
|
|
||||||
function(asData){
|
|
||||||
var $Read = $('#read');
|
|
||||||
$Read.find('.header').append('Thoughts on '+asData.created_f);
|
|
||||||
$Read.find('.body').html(Tools.quill2Html(asData.ops));
|
|
||||||
},
|
|
||||||
{id: asHash.items[0]},
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
oMyThoughts.onSamePageMove = function(asHash) {
|
oMyThoughts.onSamePageMove = function(asHash) {
|
||||||
|
|||||||
279
masks/write.html
279
masks/write.html
@@ -1,69 +1,22 @@
|
|||||||
<div id="write">
|
<div id="write">
|
||||||
<div id="write_feedback"></div>
|
<div id="write_feedback"></div>
|
||||||
<div id="editor_container">
|
<div id="edi_write"></div>
|
||||||
<div id="editor_content">
|
|
||||||
<div id="context"></div>
|
|
||||||
<div id="editor" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="nav">
|
|
||||||
<div class="nav-elem prev"><a class="fal fa-fw fa-prev"></a></div>
|
|
||||||
<div class="nav-elem curr"></div>
|
|
||||||
<div class="nav-elem next"><a class="fal fa-fw fa-next"></a></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
oMyThoughts.pageInit = function(asHash, bFirstPage)
|
oMyThoughts.pageInit = function(asHash, bFirstPage)
|
||||||
{
|
{
|
||||||
self.vars('id', 0);
|
self.tmp('default_text', "\n");
|
||||||
self.vars('default_text', "\n");
|
self.tmp('keystrokes', 0);
|
||||||
self.vars('quill_page', 0);
|
self.tmp('saving', false);
|
||||||
self.vars('keystrokes', 0);
|
|
||||||
self.vars('saving', false);
|
|
||||||
|
|
||||||
//DOM
|
oEditor = new Editor('#edi_write');
|
||||||
self.vars('editor', $('#editor_content'));
|
oEditor.onKeyStroke = save;
|
||||||
|
oEditor.moveToPage('last');
|
||||||
//Quill Engine
|
|
||||||
oQuill = new Quill('#editor', {
|
|
||||||
theme: 'bubble',
|
|
||||||
placeholder: 'What\'s on your mind?',
|
|
||||||
modules:
|
|
||||||
{
|
|
||||||
toolbar: [['bold', 'italic', 'underline'], [{ 'list': 'ordered'}, { 'list': 'bullet' }], ['clean']]
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
//Add last thought
|
|
||||||
setLastContent(oQuill, function(){
|
|
||||||
setPageHeight();
|
|
||||||
moveToPage('last');
|
|
||||||
});
|
|
||||||
|
|
||||||
//Key strokes & mouse Events
|
|
||||||
$('#editor').keydown(function(e){
|
|
||||||
if($.inArray(e.which, [13, 37, 38, 39, 40]) != -1) onChange('', '', 'user', e);
|
|
||||||
else if(e.which==33) $('.prev').click();
|
|
||||||
else if(e.which==34) $('.next').click();
|
|
||||||
});
|
|
||||||
oQuill.on('text-change', onChange);
|
|
||||||
$(window).mousewheel(function(turn, iDelta) {
|
|
||||||
var iNewPage = self.vars('quill_page') + ((iDelta > 0)?-1:1);
|
|
||||||
moveToPage(iNewPage);
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
|
|
||||||
//Page buttons
|
|
||||||
$('.prev').click(function(){moveToPage(self.vars('quill_page')-1);});
|
|
||||||
$('.next').click(function(){moveToPage(self.vars('quill_page')+1);});
|
|
||||||
|
|
||||||
//Init
|
|
||||||
oQuill.focus();
|
|
||||||
};
|
};
|
||||||
|
|
||||||
oMyThoughts.onFeedback = function(sType, sMsg)
|
oMyThoughts.onFeedback = function(sType, sMsg)
|
||||||
{
|
{
|
||||||
var $Feedback = $('#write_feedback');
|
var $Feedback = $('#edi_feedback');
|
||||||
$Feedback
|
$Feedback
|
||||||
.stop()
|
.stop()
|
||||||
.fadeOut($Feedback.is(':empty')?0:'fast', function(){
|
.fadeOut($Feedback.is(':empty')?0:'fast', function(){
|
||||||
@@ -79,20 +32,49 @@
|
|||||||
return save(true);
|
return save(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
function setPageHeight()
|
function save(bForce)
|
||||||
{
|
{
|
||||||
var $Page = $('#editor_container');
|
if(typeof oSaveTimer != 'undefined') clearTimeout(oSaveTimer);
|
||||||
var iHeight = $Page.height();
|
var bSave = (oEditor.keystrokes % 20 == 0 || bForce);
|
||||||
|
|
||||||
var iLineHeight = parseInt($('#editor p').css('line-height'));
|
if(bSave) {
|
||||||
var iMaxHeight = Math.floor(iHeight / iLineHeight) * iLineHeight;
|
if(self.tmp('saving')) {
|
||||||
$Page.height(iMaxHeight+'px');
|
oSaveTimer = setTimeout(function(){save(true);}, 500);
|
||||||
|
}
|
||||||
self.vars('line-height', iLineHeight);
|
else {
|
||||||
self.vars('page-height', iMaxHeight);
|
self.tmp('saving', true);
|
||||||
|
var sContent = oEditor.getContent();
|
||||||
|
if(!oEditor.isEmpty() || oEditor.id != 0) {
|
||||||
|
oMyThoughts.onFeedback('info', 'Saving...');
|
||||||
|
getInfo(
|
||||||
|
'update',
|
||||||
|
function(sDesc, asData) {
|
||||||
|
if(oEditor.id == 0) oMyThoughts.updateSideMenu();
|
||||||
|
oEditor.id = asData.id;
|
||||||
|
oMyThoughts.feedback('notice', 'Thought saved ('+asData.led.substr(11, 5)+')');
|
||||||
|
self.tmp('saving', false);
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: oEditor.id,
|
||||||
|
content: sContent
|
||||||
|
},
|
||||||
|
function(sError) {
|
||||||
|
oMyThoughts.feedback('error', 'Not saved! An error occured: '+sError);
|
||||||
|
self.tmp('saving', false);
|
||||||
|
oSaveTimer = setTimeout(save, 1000);
|
||||||
|
},
|
||||||
|
'POST'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
oSaveTimer = setTimeout(function(){save(true);}, 1000*10);
|
||||||
|
}
|
||||||
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
function setLastContent(oQuill, fCallback)
|
/*function setLastContent(oQuill, fCallback)
|
||||||
{
|
{
|
||||||
getInfo
|
getInfo
|
||||||
(
|
(
|
||||||
@@ -119,170 +101,5 @@
|
|||||||
},
|
},
|
||||||
{id: 'last'}
|
{id: 'last'}
|
||||||
);
|
);
|
||||||
}
|
}*/
|
||||||
|
|
||||||
function onChange(delta, oldDelta, sSource, e)
|
|
||||||
{
|
|
||||||
if(sSource == 'user')
|
|
||||||
{
|
|
||||||
var range = oQuill.getSelection();
|
|
||||||
if(range)
|
|
||||||
{
|
|
||||||
//sCursorPos = '';
|
|
||||||
var bSelection = (typeof e != 'undefined')?e.shiftKey:false;
|
|
||||||
var oSelBound = oQuill.getBounds(range.index, range.length);
|
|
||||||
|
|
||||||
var oEditorCurBound = { top: self.vars('page-height') * self.vars('quill_page'),
|
|
||||||
bottom: self.vars('page-height') * (self.vars('quill_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(!self.tmp('line') && bSelection) self.tmp('line', $.extend({}, oSelBound));
|
|
||||||
else if(!bSelection) self.tmp('line', false);
|
|
||||||
|
|
||||||
//Detecting navigating back to original line
|
|
||||||
var bReset = (self.tmp('line') && self.tmp('line').top == oSelBound.top && self.tmp('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 += self.vars('line-height');
|
|
||||||
}
|
|
||||||
else { //Upwards selection, reducing
|
|
||||||
oSelBound.top += self.vars('line-height');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else oSelBound.bottom += self.vars('line-height');
|
|
||||||
break;
|
|
||||||
case 38: //Up
|
|
||||||
if(bSelection) {
|
|
||||||
if(bReset) sCursorPos = 'first';
|
|
||||||
if(sCursorPos == 'last') { //Downwards selection, reducing
|
|
||||||
oSelBound.bottom -= self.vars('line-height');
|
|
||||||
}
|
|
||||||
else { //Upwards selection, expanding
|
|
||||||
oSelBound.top -= self.vars('line-height');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else oSelBound.top = Math.max(0, oSelBound.top - self.vars('line-height'));
|
|
||||||
break;
|
|
||||||
case 37: //Left
|
|
||||||
if(bReset && bSelection) sCursorPos = 'first';
|
|
||||||
oSelBound = oQuill.getBounds(Math.max(0, range.index - 1), range.length);
|
|
||||||
break;
|
|
||||||
case 39: //Right
|
|
||||||
if(bReset && bSelection) sCursorPos = 'last';
|
|
||||||
oSelBound = oQuill.getBounds(range.index + 1, range.length);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else incKeyStrokes();
|
|
||||||
|
|
||||||
//console.log('oSelBound: top='+oSelBound.top+' bottom='+oSelBound.bottom);
|
|
||||||
|
|
||||||
var sNewPage = self.vars('quill_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++;
|
|
||||||
}
|
|
||||||
moveToPage(sNewPage);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function moveToPage(iNewPage)
|
|
||||||
{
|
|
||||||
var iContentHeight = self.vars('editor').height();
|
|
||||||
var iLastPage = Math.floor(iContentHeight / self.vars('page-height'));
|
|
||||||
|
|
||||||
if(iNewPage=='last') iNewPage = iLastPage;
|
|
||||||
|
|
||||||
if(iNewPage >= 0 && iNewPage <= iLastPage)
|
|
||||||
{
|
|
||||||
if(iNewPage!=self.vars('quill_page'))
|
|
||||||
{
|
|
||||||
var iOldPage = self.vars('quill_page');
|
|
||||||
self.vars('quill_page', iNewPage);
|
|
||||||
|
|
||||||
//Page Position
|
|
||||||
var iOffset = self.vars('quill_page') * self.vars('page-height') * -1;
|
|
||||||
self.vars('editor').css('top', iOffset);
|
|
||||||
}
|
|
||||||
|
|
||||||
//Page Number
|
|
||||||
//$('.curr').text(self.vars('quill_page') + 1);
|
|
||||||
|
|
||||||
//Detect First/Last Page
|
|
||||||
$('.prev').toggleClass('visible', self.vars('quill_page')!=0);
|
|
||||||
$('.next').toggleClass('visible', self.vars('quill_page')!=iLastPage);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function incKeyStrokes()
|
|
||||||
{
|
|
||||||
self.vars('keystrokes', self.vars('keystrokes') + 1);
|
|
||||||
save();
|
|
||||||
}
|
|
||||||
|
|
||||||
function save(bForce)
|
|
||||||
{
|
|
||||||
if(typeof oSaveTimer != 'undefined') clearTimeout(oSaveTimer);
|
|
||||||
var bSave = (self.vars('keystrokes') % 20 == 0 || bForce);
|
|
||||||
|
|
||||||
if(bSave) {
|
|
||||||
if(self.vars('saving')) {
|
|
||||||
oSaveTimer = setTimeout(function(){save(true);}, 500);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
self.vars('saving', true);
|
|
||||||
var sContent = oQuill.getContents().ops;
|
|
||||||
if(!isQuillEmpty() || self.vars('id') != 0) {
|
|
||||||
oMyThoughts.onFeedback('info', 'Saving...');
|
|
||||||
getInfo(
|
|
||||||
'update',
|
|
||||||
function(sDesc, asData) {
|
|
||||||
if(self.vars('id') == 0) oMyThoughts.updateSideMenu();
|
|
||||||
self.vars('id', asData.id);
|
|
||||||
oMyThoughts.feedback('notice', 'Thought saved ('+asData.led.substr(11, 5)+')');
|
|
||||||
self.vars('saving', false);
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: self.vars('id'),
|
|
||||||
content: sContent
|
|
||||||
},
|
|
||||||
function(sError) {
|
|
||||||
oMyThoughts.feedback('error', 'Not saved! An error occured: '+sError);
|
|
||||||
self.vars('saving', false);
|
|
||||||
oSaveTimer = setTimeout(save, 1000);
|
|
||||||
},
|
|
||||||
'POST'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
oSaveTimer = setTimeout(function(){save(true);}, 1000*10);
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
function isQuillEmpty() {
|
|
||||||
const rEmpty = /^(<p>(<br>|<br\/>|<br\s\/>|\s+|)<\/p>|)$/gm;
|
|
||||||
return rEmpty.test(oQuill.getText().trim());
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
@@ -74,13 +74,7 @@ var Tools = {
|
|||||||
.slideDown('fast')
|
.slideDown('fast')
|
||||||
.delay(5000)
|
.delay(5000)
|
||||||
.slideUp('fast', function(){$(this).remove();});
|
.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)
|
function emptyBox(element, text)
|
||||||
|
|||||||
@@ -288,4 +288,223 @@ function MyThoughts(asGlobals)
|
|||||||
asVarName.unshift('tmp');
|
asVarName.unshift('tmp');
|
||||||
return self.vars(asVarName, oValue);
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -3,4 +3,78 @@
|
|||||||
.ql-editor.ql-blank::before {
|
.ql-editor.ql-blank::before {
|
||||||
left: 1.5em;
|
left: 1.5em;
|
||||||
color: $gray-400;
|
color: $gray-400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor {
|
||||||
|
position: relative;
|
||||||
|
height:100%;
|
||||||
|
|
||||||
|
.edi_header {
|
||||||
|
color: $gray-500;
|
||||||
|
font-size: 0.8em;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edi_container {
|
||||||
|
height: calc(100% - 4em); /* 2 * 2em*/
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.edi_content {
|
||||||
|
|
||||||
|
height:auto;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.ql-container {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ql-editor {
|
||||||
|
padding: 0;
|
||||||
|
font-family: $font_para;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
div {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
text-indent: 1.5em;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
text-align: justify;
|
||||||
|
line-height: 1.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Write - Navbar */
|
||||||
|
|
||||||
|
.edi_nav {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
.nav-elem {
|
||||||
|
color: $gray-500;
|
||||||
|
display: inline-block;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 1.25em;
|
||||||
|
font-size: 1.25em;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $gray-700;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.prev, &.curr, &.next {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.next {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -1,5 +1,4 @@
|
|||||||
#read {
|
#read {
|
||||||
@extend .thought;
|
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -166,31 +166,6 @@ a.button:active {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Thought */
|
|
||||||
|
|
||||||
.thought {
|
|
||||||
padding: 0;
|
|
||||||
font-family: $font_para;
|
|
||||||
font-size: 14px;
|
|
||||||
|
|
||||||
div {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
text-indent: 1.5em;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
text-align: justify;
|
|
||||||
line-height: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date {
|
|
||||||
color: $gray-500;
|
|
||||||
font-size: 0.8em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Settings */
|
/* Settings */
|
||||||
|
|
||||||
#settings table tr td {
|
#settings table tr td {
|
||||||
|
|||||||
@@ -3,67 +3,16 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
height:100%;
|
height:100%;
|
||||||
|
|
||||||
/* Write - Editor */
|
#context {
|
||||||
|
.entry_date {
|
||||||
#editor_container {
|
text-align: right;
|
||||||
height: calc(100% - 2em);
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
#editor_content {
|
|
||||||
|
|
||||||
height:auto;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.ql-container {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ql-editor, #context {
|
|
||||||
@extend .thought;
|
|
||||||
}
|
|
||||||
|
|
||||||
#context {
|
|
||||||
.entry_date {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.entry_sep {
|
|
||||||
font-size: 1.5em;
|
|
||||||
text-align: center;
|
|
||||||
letter-spacing: 0.3em;
|
|
||||||
padding: 1em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
/* Write - Navbar */
|
|
||||||
|
|
||||||
#nav {
|
.entry_sep {
|
||||||
position: absolute;
|
font-size: 1.5em;
|
||||||
bottom: 0;
|
text-align: center;
|
||||||
right: 0;
|
letter-spacing: 0.3em;
|
||||||
left: 0;
|
padding: 1em;
|
||||||
|
|
||||||
.nav-elem {
|
|
||||||
color: $gray-500;
|
|
||||||
display: inline-block;
|
|
||||||
cursor: pointer;
|
|
||||||
width: 1.25em;
|
|
||||||
font-size: 1.25em;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $gray-700;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.prev, &.curr, &.next {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.next {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user