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

fix autosave

Browse Source
This commit is contained in:
Franzz
2018-06-17 22:18:07 +02:00
parent 6ee27fda3d
commit d09f0fd49f
11 changed files with 203 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
masks/index.html
View File

@@ -6,6 +6,7 @@
<link href="style/mythoughts.css" rel="stylesheet" type="text/css" /> <link href="style/mythoughts.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/jquery.min.js"></script> <script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/bootstrap.bundle.min.js"></script> <script type="text/javascript" src="scripts/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="scripts/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="scripts/quill.min.js"></script> <script type="text/javascript" src="scripts/quill.min.js"></script>
<script type="text/javascript" src="scripts/functions.js"></script> <script type="text/javascript" src="scripts/functions.js"></script>
<script type="text/javascript" src="scripts/mythoughts.js"></script> <script type="text/javascript" src="scripts/mythoughts.js"></script>

146
masks/write.html
View File

@@ -1,15 +1,15 @@
<div id="write"> <div id="write">
<div id="write_feedback"></div> <div id="write_feedback"></div>
<div id="nav">
<a class="fal fa-prev"></a>
<span class="page_nb">1</span>
<A class="fal fa-next"></a>
</div>
<div id="editor_container"> <div id="editor_container">
<div id="editor_content"> <div id="editor_content">
<div id="editor" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></div> <div id="editor" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></div>
</div> </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>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
oMyThoughts.pageInit = function(asHash, bFirstPage) oMyThoughts.pageInit = function(asHash, bFirstPage)
@@ -18,6 +18,7 @@
self.vars('default_text', "\n"); self.vars('default_text', "\n");
self.vars('page', 0); self.vars('page', 0);
self.vars('keystrokes', 0); self.vars('keystrokes', 0);
self.vars('saving', false);
//DOM //DOM
self.vars('editor', $('#editor_content')); self.vars('editor', $('#editor_content'));
@@ -30,32 +31,23 @@
toolbar: [['bold', 'italic', 'underline'], [{ 'list': 'ordered'}, { 'list': 'bullet' }], ['clean']] toolbar: [['bold', 'italic', 'underline'], [{ 'list': 'ordered'}, { 'list': 'bullet' }], ['clean']]
} }
}); });
/*oQuill.setContents([
{insert: "So, I'm there, wondering about myself and my future - such a luxury by the way - when suddenly, someone approaches. mid-40s i'd say, elegant cold women, the kind you've learned not to talk to, to eventually avoid feeling repressed, or bad for yourself, or both."},
{insert: '\n'},
{insert: "Anyhow, it would seem that in this particular situation, the choice wasn't given to me to decide whether or not to talk to that precise women. She seats down next to me and engage a conversation. 'How is it you're here today?' I'm already regretting not having gone away when i still had the chance."},
{insert: '\n'},
{insert: "'Hello to you too' I say, still willing to show some manhood, even though I already know this women crushes manhood by pairs as a breakfast ritual."},
{insert: '\n'},
{insert: "In-extremist, I manage to babble some excuses about a rigorous lunch break time and leave the premises."},
{insert: '\n'},
{insert: "So, I'm there, wondering about myself and my future - such a luxury by the way - when suddenly, someone approaches. mid-40s i'd say, elegant cold women, the kind you've learned not to talk to, to eventually avoid feeling repressed, or bad for yourself, or both."},
{insert: '\n'},
{insert: "Anyhow, it would seem that in this particular situation, the choice wasn't given to me to decide whether or not to talk to that precise women. She seats down next to me and engage a conversation. 'How is it you're here today?' I'm already regretting not having gone away when i still had the chance."},
{insert: '\n'},
{insert: "'Hello to you too' I say, still willing to show some manhood, even though I already know this women crushes manhood by pairs as a breakfast ritual."},
{insert: '\n'},
{insert: "In-extremist, I manage to babble some excuses about a rigorous lunch break time and leave the premises."}
]);*/
setLastContent(); //Add last thought
setPageHeight(); setLastContent(oQuill, function(){
setPageHeight();
moveToPage(self.vars('page'));
});
//Key strokes Events //Key strokes & mouse Events
$('#editor').keydown(function(e){ $('#editor').keydown(function(e){
if($.inArray(e.which, [13, 37, 38, 39, 40]) != -1) onChange('', '', 'user', e); if($.inArray(e.which, [13, 37, 38, 39, 40]) != -1) onChange('', '', 'user', e);
}); });
oQuill.on('text-change', onChange); oQuill.on('text-change', onChange);
$(window).mousewheel(function(turn, iDelta) {
var iNewPage = self.vars('page') + ((iDelta > 0)?-1:1);
moveToPage(iNewPage);
return false;
});
//Page buttons //Page buttons
$('.fa-prev').click(function(){moveToPage(self.vars('page')-1);}); $('.fa-prev').click(function(){moveToPage(self.vars('page')-1);});
@@ -63,7 +55,6 @@
//Init //Init
oQuill.focus(); oQuill.focus();
moveToPage(self.vars('page'));
}; };
oMyThoughts.onFeedback = function(sType, sMsg) oMyThoughts.onFeedback = function(sType, sMsg)
@@ -87,16 +78,18 @@
function setPageHeight() function setPageHeight()
{ {
var $Page = $('#editor_container').css('height', 'calc(100% - 4em)'); var $Page = $('#editor_container');
var iHeight = $Page.height(); var iHeight = $Page.height();
var iLineHeight = parseInt($('#editor_container p').css('line-height')); var iLineHeight = parseInt($('#editor_container p').css('line-height'));
var iMaxHeight = Math.floor(iHeight / iLineHeight) * iLineHeight; var iMaxHeight = Math.floor(iHeight / iLineHeight) * iLineHeight;
$Page.height(iMaxHeight); $Page.height(iMaxHeight+'px');
self.vars('line-height', iLineHeight); self.vars('line-height', iLineHeight);
self.vars('page_height', iMaxHeight); self.vars('page-height', iMaxHeight);
} }
function setLastContent(oQuill) function setLastContent(oQuill, fCallback)
{ {
getInfo getInfo
( (
@@ -104,8 +97,8 @@
function(sDesc, asData) function(sDesc, asData)
{ {
self.vars('id', asData.id); self.vars('id', asData.id);
oQuill.setContents(asData.ops); oQuill.setContents(asData.ops);
if(typeof fCallback == 'function') fCallback();
}, },
{id: 'last'} {id: 'last'}
); );
@@ -119,8 +112,8 @@
if(range) if(range)
{ {
var oSelBound = oQuill.getBounds(range.index, range.length); var oSelBound = oQuill.getBounds(range.index, range.length);
var oEditorCurBound = { top: self.vars('page_height') * self.vars('page'), var oEditorCurBound = { top: self.vars('page-height') * self.vars('page'),
bottom: self.vars('page_height') * (self.vars('page') + 1)}; bottom: self.vars('page-height') * (self.vars('page') + 1)};
//Anticipating arrows //Anticipating arrows
if(e) if(e)
@@ -161,25 +154,30 @@
function moveToPage(iNewPage) function moveToPage(iNewPage)
{ {
if(iNewPage!=self.vars('page')) var iContentHeight = self.vars('editor').height();
var iLastPage = Math.floor(iContentHeight / self.vars('page-height'));
//console.log(iNewPage);
if(iNewPage >= 0 && iNewPage <= iLastPage)
{ {
var iOldPage = self.vars('page'); if(iNewPage!=self.vars('page'))
self.vars('page', iNewPage); {
var iOldPage = self.vars('page');
self.vars('page', iNewPage);
//Page Position
var iOffset = self.vars('page') * self.vars('page-height') * -1;
self.vars('editor').css('top', iOffset);
}
//Page Number //Page Number
$('.page_nb').text(self.vars('page') + 1); $('.page_nb').text(self.vars('page') + 1);
//Page Position //Detect First/Last Page
var iOffset = self.vars('page') * self.vars('page_height') * -1; $('.fa-prev').toggle(self.vars('page')!=0);
self.vars('editor').css('top', iOffset); $('.fa-next').toggle(self.vars('page')!=iLastPage);
} }
//Detect First Page
$('.fa-prev').fadeTo('fast', (self.vars('page')==0)?0:1);
//Detect last page
var bLastPage = (self.vars('editor').height() < self.vars('page_height') * (self.vars('page') + 1));
$('.fa-next').fadeTo('fast', bLastPage?0:1);
} }
function incKeyStrokes() function incKeyStrokes()
@@ -190,28 +188,40 @@
function save() function save()
{ {
var sContent = oQuill.getContents().ops; if(typeof oSaveTimer != 'undefined') clearTimeout(oSaveTimer);
if(sContent[0] != self.vars('default_text'))
{ if(!self.vars('saving') && self.vars('keystrokes') != self.vars('lastKeystrokes')) {
oMyThoughts.onFeedback('info', 'Saving...'); self.vars('saving', true);
getInfo
( var iCurrentKeystrokes = self.vars('keystrokes');
'update', var sContent = oQuill.getContents().ops;
function(sDesc, asData) if(sContent[0] != self.vars('default_text'))
{ {
self.vars('id', asData.id); oMyThoughts.onFeedback('info', 'Saving...');
oMyThoughts.onFeedback('notice', 'Saved ('+asData.led.substr(11, 5)+')'); getInfo
}, (
{ 'update',
id: self.vars('id'), function(sDesc, asData)
content: sContent {
}, self.vars('id', asData.id);
function(sError) oMyThoughts.feedback('notice', 'Saved ('+asData.led.substr(11, 5)+')');
{ self.vars('saving', false);
oMyThoughts.onFeedback('error', 'Not saved! An error occured: '+sError); self.vars('lastKeystrokes', iCurrentKeystrokes);
}, oSaveTimer = setTimeout(save, 1000*10);
'POST' },
); {
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'
);
}
} }
} }
</script> </script>

8
scripts/jquery.mousewheel.min.js vendored Normal file
View File

@@ -0,0 +1,8 @@
/*!
* jQuery Mousewheel 3.1.13
*
* Copyright 2015 jQuery Foundation and other contributors
* Released under the MIT license.
* http://jquery.org/license
*/
!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a:a(jQuery)}(function(a){function b(b){var g=b||window.event,h=i.call(arguments,1),j=0,l=0,m=0,n=0,o=0,p=0;if(b=a.event.fix(g),b.type="mousewheel","detail"in g&&(m=-1*g.detail),"wheelDelta"in g&&(m=g.wheelDelta),"wheelDeltaY"in g&&(m=g.wheelDeltaY),"wheelDeltaX"in g&&(l=-1*g.wheelDeltaX),"axis"in g&&g.axis===g.HORIZONTAL_AXIS&&(l=-1*m,m=0),j=0===m?l:m,"deltaY"in g&&(m=-1*g.deltaY,j=m),"deltaX"in g&&(l=g.deltaX,0===m&&(j=-1*l)),0!==m||0!==l){if(1===g.deltaMode){var q=a.data(this,"mousewheel-line-height");j*=q,m*=q,l*=q}else if(2===g.deltaMode){var r=a.data(this,"mousewheel-page-height");j*=r,m*=r,l*=r}if(n=Math.max(Math.abs(m),Math.abs(l)),(!f||f>n)&&(f=n,d(g,n)&&(f/=40)),d(g,n)&&(j/=40,l/=40,m/=40),j=Math[j>=1?"floor":"ceil"](j/f),l=Math[l>=1?"floor":"ceil"](l/f),m=Math[m>=1?"floor":"ceil"](m/f),k.settings.normalizeOffset&&this.getBoundingClientRect){var s=this.getBoundingClientRect();o=b.clientX-s.left,p=b.clientY-s.top}return b.deltaX=l,b.deltaY=m,b.deltaFactor=f,b.offsetX=o,b.offsetY=p,b.deltaMode=0,h.unshift(b,j,l,m),e&&clearTimeout(e),e=setTimeout(c,200),(a.event.dispatch||a.event.handle).apply(this,h)}}function c(){f=null}function d(a,b){return k.settings.adjustOldDeltas&&"mousewheel"===a.type&&b%120===0}var e,f,g=["wheel","mousewheel","DOMMouseScroll","MozMousePixelScroll"],h="onwheel"in document||document.documentMode>=9?["wheel"]:["mousewheel","DomMouseScroll","MozMousePixelScroll"],i=Array.prototype.slice;if(a.event.fixHooks)for(var j=g.length;j;)a.event.fixHooks[g[--j]]=a.event.mouseHooks;var k=a.event.special.mousewheel={version:"3.1.12",setup:function(){if(this.addEventListener)for(var c=h.length;c;)this.addEventListener(h[--c],b,!1);else this.onmousewheel=b;a.data(this,"mousewheel-line-height",k.getLineHeight(this)),a.data(this,"mousewheel-page-height",k.getPageHeight(this))},teardown:function(){if(this.removeEventListener)for(var c=h.length;c;)this.removeEventListener(h[--c],b,!1);else this.onmousewheel=null;a.removeData(this,"mousewheel-line-height"),a.removeData(this,"mousewheel-page-height")},getLineHeight:function(b){var c=a(b),d=c["offsetParent"in a.fn?"offsetParent":"parent"]();return d.length||(d=a("body")),parseInt(d.css("fontSize"),10)||parseInt(c.css("fontSize"),10)||16},getPageHeight:function(b){return a(b).height()},settings:{adjustOldDeltas:!0,normalizeOffset:!0}};a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})});

10
scripts/mythoughts.js
View File

@@ -80,6 +80,10 @@ function MyThoughts(asGlobals)
self.onFeedback = function(sType, sMsg){Tools.feedback(sType, sMsg, self.elem.$Container);}; self.onFeedback = function(sType, sMsg){Tools.feedback(sType, sMsg, self.elem.$Container);};
}; };
this.feedback = function(sType, sMsg) {
self.onFeedback(sType, sMsg);
};
/* Hash Handling */ /* Hash Handling */
this.getHash = function() this.getHash = function()
@@ -130,9 +134,6 @@ function MyThoughts(asGlobals)
/* Page Switching */ /* Page Switching */
this.loadHome = function(asData) { this.loadHome = function(asData) {
console.log(asData);
self.vars('log_in', asData.log_in); self.vars('log_in', asData.log_in);
self.vars('id', asData.id); self.vars('id', asData.id);
@@ -218,10 +219,9 @@ function MyThoughts(asGlobals)
//Page Bootstrap //Page Bootstrap
self.elem.$Main.removeClass('no_frame'); self.elem.$Main.removeClass('no_frame');
self.pageInit(asHash, bFirstPage);
//Show main //Show main
$FadeInElem.fadeTo('fast', 1, function(){}); $FadeInElem.fadeTo('fast', 1, function(){self.pageInit(asHash, bFirstPage);});
}; };
/* Variables Handling */ /* Variables Handling */

6
style/_bootstrap.scss
View File

@@ -2,15 +2,15 @@ $gray-100: lighten($col_main_1, 80%); //
$gray-200: lighten($col_main_1, 65%); // $gray-200: lighten($col_main_1, 65%); //
$gray-300: lighten($col_main_1, 50%); // $gray-300: lighten($col_main_1, 50%); //
$gray-400: lighten($col_main_1, 35%); //#c09b71 $gray-400: lighten($col_main_1, 35%); //#c09b71
$gray-500: lighten($col_main_1, 20%); // $gray-500: lighten($col_main_1, 20%); //#9f7546
$gray-600: lighten($col_main_1, 10%); // $gray-600: lighten($col_main_1, 10%); //
$gray-700: $col_main_1; $gray-700: $col_main_1;
$gray-800: darken($col_main_1, 10%); // $gray-800: darken($col_main_1, 10%); //
$gray-900: darken($col_main_1, 20%); // $gray-900: darken($col_main_1, 20%); //
$theme-colors: ( $theme-colors: (
"primary": $col_main_1, //Irish Coffee "primary": $col_main_1,
"secondary": #355078, "secondary": $col_main_2,
"grey-400": $gray-400 "grey-400": $gray-400
); );

30
style/_template.scss
View File

@@ -6,13 +6,13 @@ body {
font-size:1em; font-size:1em;
background-color:#e2ccb2; background-color:#e2ccb2;
margin:0; margin:0;
color:#584127; color:$col_main_1;
} }
/* Typography */ /* Typography */
a:visited, a { a:visited, a {
color:#584127; color:$col_main_1;
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
} }
@@ -57,7 +57,7 @@ a.button {
font-size: 1.1em; font-size: 1.1em;
text-align:center; text-align:center;
background: url("../images/minicloud.png") 0 0 no-repeat; background: url("../images/minicloud.png") 0 0 no-repeat;
color: $col_main_2; color: $gray-600;
} }
a.button:hover { a.button:hover {
color:white; color:white;
@@ -116,14 +116,14 @@ a.button:active {
margin-top:1em; margin-top:1em;
position: absolute; position: absolute;
top:203px; top:203px;
bottom:2em; bottom: 2rem;
right:0; right:0;
left:0; left:0;
border-radius: 0.5em; border-radius: 0.5em;
padding: 1em; padding: 1em;
&:not(.no_frame) { &:not(.no_frame) {
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); @extend .shadow;
} }
} }
@@ -229,13 +229,19 @@ fieldset p {
footer { footer {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
text-align:center; text-align: center;
color: $gray-400; color: $gray-400;
font-size:0.9em; font-size: 0.9em;
width:100%; width: 100%;
height:2em; height: 2rem;
}
footer a { span {
color: $gray-500; transform: translateY(-50%);
position: relative;
top: 50%;
a {
color: $gray-500;
}
}
} }

6
style/_variables.scss
View File

@@ -7,9 +7,7 @@ blue lines : #2DCDFF
red lines : #EC3B45 red lines : #EC3B45
*/ */
$col_main_1: #584127; $col_main_1: #584127; //Primary
$col_main_2: #735533; $col_main_2: #355078; //Complementary to Primary
$col_main_3: #ede0d0;
$col_main_4: #f7f2eb;
$font_para: 'Quicksand'; $font_para: 'Quicksand';

143
style/_write.scss
View File

@@ -1,10 +1,12 @@
#write { #write {
position: relative;
height:100%; height:100%;
#editor_container { /* Write - Editor */
height: calc(100% - 4em); #editor_container {
height: calc(100% - 2em);
overflow: hidden; overflow: hidden;
position: relative; position: relative;
@@ -14,100 +16,67 @@
position: relative; position: relative;
.ql-container { .ql-container {
font-family: 'Indie Flower', cursive; font-family: $font_para;
font-size: 16px; font-size: 14px;
padding:0; padding:0;
.ql-editor { .ql-editor {
padding:0; padding:0;
} }
} }
}
.shade { #editor {
position: absolute; div {
width: 100%; margin:0;
background:red; }
&.top { p {
top:0; text-indent: 1.5em;
} margin: 0;
padding: 0;
&.bottom { text-align: justify;
bottom:0; line-height: 1.5em;
} }
&.bottomplus {
top:100%;
height:2em;
} }
} }
} }
}
/* Write - Navbar */
#nav {
position:absolute;
/* Write - Editor */ bottom:0;
right:0;
#write #editor div { left:0;
margin:0; text-align: center;
}
.nav-elem {
#write #editor p { color: $gray-500;
text-indent: 1.5em; width: 1.25em;
margin: 0; display: inline-block;
padding: 0; text-align: center;
text-align: justify; }
line-height: 1.5em;
} .fa-prev, .fa-next {
cursor: pointer;
/* Write - Toolbar */ display: none;
#write #nav { &:hover {
position:absolute; color: $gray-700;
bottom:0; }
right:0; }
left:0; }
text-align: center;
} /* Write - Feedback */
#write .fa-prev, #write .page_nb, #write .fa-next { #write_feedback {
color:#997E60; position:absolute;
font-size:1.5em; top: -2.5rem;
margin:0 0 0.5em 0; right: -1rem;
cursor:pointer; font-size: 0.8em;
}
#write .page_nb { .notice {
font-size: 1em; color: $gray-400;
vertical-align:0.25em; }
cursor: default; }
padding-left:0.5em;
padding-right:0.5em;
}
#write .fa-prev:hover, #write .fa-next:hover {
color:#584127;
}
#write .fa-prev.disabled, #write .fa-next.disabled,
#write .fa-prev.disabled:hover, #write .fa-next.disabled:hover {
color:#EDE0D0;
}
/* Write - Placeholder */
#write .jqte_placeholder_text {
top:1em;
left:0;
text-indent: 1.5em;
}
#write .jqte_focused .jqte_placeholder_text {
display:none;
}
/* Write - Feedback */
#write_feedback {
position:absolute;
top: -1.5em;
right:0.5em;
} }

6
style/mythoughts.css
View File

File diff suppressed because one or more lines are too long

4
style/mythoughts.css.map
View File

File diff suppressed because one or more lines are too long

2
style/mythoughts.scss
View File

@@ -5,7 +5,7 @@
/* Fonts */ /* Fonts */
@import 'font-awesome'; @import 'font-awesome';
@import url('https://fonts.googleapis.com/css?family=Nunito|Quicksand|Fira+Sans'); @import url('https://fonts.googleapis.com/css?family=Nunito|Quicksand|Fira+Sans|Montserrat');
/* Plugins */ /* Plugins */