adding read page and side calendar

This commit is contained in:
2018-11-18 15:52:22 +01:00
parent d3c3f8141b
commit bcdcf0d2f0
20 changed files with 386 additions and 247 deletions

View File

@@ -2,13 +2,14 @@
<div id="write_feedback"></div>
<div id="editor_container">
<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"><a class="fal fa-fw fa-prev"></a></div>
<div class="nav-elem"><span class="page_nb"></span></div>
<div class="nav-elem"><a class="fal fa-fw fa-next"></a></div>
<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>
<script type="text/javascript">
@@ -16,7 +17,7 @@
{
self.vars('id', 0);
self.vars('default_text', "\n");
self.vars('page', 0);
self.vars('quill_page', 0);
self.vars('keystrokes', 0);
self.vars('saving', false);
@@ -26,6 +27,7 @@
//Quill Engine
oQuill = new Quill('#editor', {
theme: 'bubble',
placeholder: 'What\'s on your mind?',
modules:
{
toolbar: [['bold', 'italic', 'underline'], [{ 'list': 'ordered'}, { 'list': 'bullet' }], ['clean']]
@@ -41,19 +43,19 @@
//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) $('.fa-prev').click();
else if(e.which==34) $('.fa-next').click();
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('page') + ((iDelta > 0)?-1:1);
var iNewPage = self.vars('quill_page') + ((iDelta > 0)?-1:1);
moveToPage(iNewPage);
return false;
});
//Page buttons
$('.fa-prev').click(function(){moveToPage(self.vars('page')-1);});
$('.fa-next').click(function(){moveToPage(self.vars('page')+1);});
$('.prev').click(function(){moveToPage(self.vars('quill_page')-1);});
$('.next').click(function(){moveToPage(self.vars('quill_page')+1);});
//Init
oQuill.focus();
@@ -82,7 +84,7 @@
var $Page = $('#editor_container');
var iHeight = $Page.height();
var iLineHeight = parseInt($('#editor_container p').css('line-height'));
var iLineHeight = parseInt($('#editor p').css('line-height'));
var iMaxHeight = Math.floor(iHeight / iLineHeight) * iLineHeight;
$Page.height(iMaxHeight+'px');
@@ -97,10 +99,22 @@
'load',
function(sDesc, asData)
{
self.vars('id', asData.id);
oQuill.setContents(asData.ops);
//$('#context').append($('#editor .ql-editor').html());
//oQuill.setContents([]);
if(asData.ops.length != 1 || asData.ops[0].insert != '' && false) {
var $Date = $('<p>', {'class':'entry_date'}).text(asData.created_f);
var $Sep = $('<div>', {'class':'entry_sep'})
.text('~')
.click(function(){oQuill.focus();});
oQuill.setContents(asData.ops);
$('#context')
.append($('#editor .ql-editor').html())
.append($Date)
.append($Sep);
oQuill.setContents([]);
}
else oQuill.focus();
if(typeof fCallback == 'function') fCallback();
},
{id: 'last'}
@@ -118,8 +132,8 @@
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('page'),
bottom: self.vars('page-height') * (self.vars('page') + 1)};
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('---------------------');
@@ -177,7 +191,7 @@
//console.log('oSelBound: top='+oSelBound.top+' bottom='+oSelBound.bottom);
var sNewPage = self.vars('page');
var sNewPage = self.vars('quill_page');
if( oSelBound.top < oEditorCurBound.top && (!bSelection || sCursorPos == 'first') ||
oSelBound.bottom < oEditorCurBound.top && (!bSelection || sCursorPos == 'last')) {
sNewPage--;
@@ -200,22 +214,22 @@
if(iNewPage >= 0 && iNewPage <= iLastPage)
{
if(iNewPage!=self.vars('page'))
if(iNewPage!=self.vars('quill_page'))
{
var iOldPage = self.vars('page');
self.vars('page', iNewPage);
var iOldPage = self.vars('quill_page');
self.vars('quill_page', iNewPage);
//Page Position
var iOffset = self.vars('page') * self.vars('page-height') * -1;
var iOffset = self.vars('quill_page') * self.vars('page-height') * -1;
self.vars('editor').css('top', iOffset);
}
//Page Number
$('.page_nb').text(self.vars('page') + 1);
//$('.curr').text(self.vars('quill_page') + 1);
//Detect First/Last Page
$('.fa-prev').toggle(self.vars('page')!=0);
$('.fa-next').toggle(self.vars('page')!=iLastPage);
$('.prev').toggleClass('visible', self.vars('quill_page')!=0);
$('.next').toggleClass('visible', self.vars('quill_page')!=iLastPage);
}
}
@@ -237,13 +251,14 @@
else {
self.vars('saving', true);
var sContent = oQuill.getContents().ops;
if(sContent[0] != self.vars('default_text')) {
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', 'Saved ('+asData.led.substr(11, 5)+')');
oMyThoughts.feedback('notice', 'Thought saved ('+asData.led.substr(11, 5)+')');
self.vars('saving', false);
},
{
@@ -265,4 +280,9 @@
}
return true;
}
function isQuillEmpty() {
const rEmpty = /^(<p>(<br>|<br\/>|<br\s\/>|\s+|)<\/p>|)$/gm;
return rEmpty.test(oQuill.getText().trim());
}
</script>