From 3dc97d7478781550aa1a878120082a871988f02e Mon Sep 17 00:00:00 2001 From: Aaron Parecki Date: Sun, 10 May 2015 15:09:07 +0200 Subject: [PATCH] autosave new posts in localstorage --- public/editor/editor.js | 46 +++++++++++++++++++++++++++++++- public/editor/quill-logo-36.png | Bin 0 -> 1730 bytes public/editor/style.css | 34 +++++++++++++++++++++++ views/editor.php | 13 ++++++++- views/partials/appcache.php | 1 + 5 files changed, 92 insertions(+), 2 deletions(-) create mode 100644 public/editor/quill-logo-36.png diff --git a/public/editor/editor.js b/public/editor/editor.js index 2c4972f..2d99674 100644 --- a/public/editor/editor.js +++ b/public/editor/editor.js @@ -1,5 +1,5 @@ var editor = new MediumEditor('.editable', { - buttons: ['bold', 'italic', 'header1', 'header2', 'quote', 'unorderedlist', 'pre'], + buttons: ['bold', 'italic', 'anchor', 'header1', 'header2', 'quote', 'unorderedlist', 'pre'], paste: { // This example includes the default options for paste, if nothing is passed this is what it used forcePlainText: false, @@ -30,3 +30,47 @@ $(function () { $('.placeholder').removeClass('placeholder'); }); }); + +/* ************************************************ */ +/* autosave loop */ +var autosaveTimeout = false; +function contentChanged() { + clearTimeout(autosaveTimeout); + $("#draft-status").text("Draft"); + autosaveTimeout = setTimeout(doAutoSave, 1000); +} +function doAutoSave() { + autosaveTimeout = false; + var savedData = { + title: $("#post-name").val(), + body: editor.serialize().content.value + } + localforage.setItem('currentdraft', savedData).then(function(){ + $("#draft-status").text("Saved"); + }); +} +$(function(){ + // Restore draft if present + localforage.getItem('currentdraft', function(err,val){ + if(val && val.body) { + $("#post-name").val(val.title); + $("#content").html(val.body); + $("#draft-status").text("Restored"); + } + }); +}); +/* ************************************************ */ + + +// Not sure why this isn't working +// editor.subscribe('editableInput', function(ev, editable) { +// console.log("stuff changed"); +// }); + +// This one works okay tho, but misses changes from the image uploader +editor.on(document.getElementById('content'), 'input', function(){ + contentChanged(); +}); +$(function(){ + $('#post-name').on('keyup', contentChanged); +}); diff --git a/public/editor/quill-logo-36.png b/public/editor/quill-logo-36.png new file mode 100644 index 0000000000000000000000000000000000000000..90aebc4557c83bbcdb76b91cb5fd4a527d23b342 GIT binary patch literal 1730 zcmbVNc~BEq9FA2H4M7)8(`6-B^vEKqE1yWz0?!?82n+1>ZvZ@=&R9q;#M z3)FGZuJgR+(P%VRWsE{YjsDc*=j=qizih%rsbLWjnMfpHsYDixBQ%)-(;y&* z0vk4OYDZSmXfsWyHjzkFt&!+4GaGhb*reG?v1zoG;iMJTry&HOLyV|J%6NMEECWCd zQpS3|ileg15fd7djUx%!aaw(LnqF*RgognuNeLxjMhF-n&FL1Kgp@KSbS2c>VFnq% z1cXSFGA4scRH*?uh9dx<9m>*kAP5i$*bt8|5J1ZTE(hX*9O@RZAfALTkZ^^-)Wx8@ z;f7R+MiDjTi&{w;CW5d^KrkySi=7q9#&9DDiN#`v2A9jC5G>nf3jvcXi;X$0pg?ST z9JLZCW&s?Eunx;0qzo$3$rQ|1mFl&y#Wqzas$?JuTS17;0nKJdUK3~=p+Wu$ zib5Vo$mIw`5G3MqWip{WLMG!y2_qrVw8opb3I|Rg7e_|Q4rnTR0@$IQS)g(c`4BH)PsEAvUN;r~<(q=Eq*?eVX6nKn^9=$O84eroah z_#hVQ%;41Fxc8asT^jA3XG(=kOLm{zo1CwT_dI_yvoM|nDmI0L<`(tu(Oukjd&j1r zf`Zc93wF*qQgk6Oc0os3zM_ADa!J{;=STXlyxLRb@c`(&)q@>;aqwD+xh7}yzRQQN zQscH%mgO3F;e;1y%W!S8aFMzF$2@+85%I z=Vql{YF>@>9Ag~RIM?+=D2)3;N<8V0Q_?zX-RH}{{Y^XEEJnBPNp6cxq&MZgVOVGY2*@AP%-qUIwZufEb01X4Mu0Xo?r)_;} zhHD?U*RJmXuaEB zMu03{T_4=zy0HI5P?l5kTy(}2Ryp&%y7Y>wq~`3k!qF3$H6T-XP4bPlO;a0k?q-gC z!!yPiV1>54Bp~l-Z;QTt0OWZ41`LgDk2BAvCn03D?S7DpUB9cX;G!(AOzHucc%KU^ zS-DGV%Tx3bAE;~dhGzbJmOj=Yk)g8jqD99mZw&1Bg?=b7cC6T#dg2q`q2L$QJtw2z zZ)GYU?ha@#?u5Fb!cz(BBeKT-n3dTqzUe3RU((su^*kl`ar7^BLek{bxI<-KXK}K4 zFEu8&G{m&7@o(cEK$!l#gwm5uM~674r1ez`ueYrlmB#zwN%X75z3yFu%&0@_gokVT zo;3yP9<+WTvils0yAwEWy*lufm-|uM(BXVAk*;m^+~>Z&NLX>cJtoPUBM)h>a19%# z->ocvc_iTbV!!bELlrr-i^Gop1;?ei4c;1aO>us{vFrf+1oCGtS)EzmJzjca9e=J@ zY@;S{Fw)-s^}Ts`zgOu6^1GCW_D2o<`DdOOataG~=l*VLEV^GK`*@Zo&5#ycv&_es Q>-eiEBjXg+5g*zA1}nap7ytkO literal 0 HcmV?d00001 diff --git a/public/editor/style.css b/public/editor/style.css index bec46db..8b91825 100644 --- a/public/editor/style.css +++ b/public/editor/style.css @@ -22,6 +22,38 @@ h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; } img { border: 0; } +/* ************************************** */ +/* Toolbar */ + +.toolbar { + padding: 13px; + border-bottom: 1px #eee solid; + background-color: rgba(255,255,255,0.97); + position: fixed; + top: 0; + width: 100%; + z-index: 1000; +} +.toolbar-left { + float: left; +} +.toolbar-right { + float: right; +} +.toolbar-left .item { + margin-right: 8px; + display: inline-block; +} +#draft-status { + font-size: 18px; + color: #aaa; +} +.toolbar .clear { + clear: both; +} + + +/* ************************************** */ /* Editor CSS */ body { @@ -39,6 +71,8 @@ body, input { .container { width: 960px; margin: 0 auto; + margin-top: 63px; + z-index: 0; } #post-name { diff --git a/views/editor.php b/views/editor.php index fc4fcc6..8bef0e5 100644 --- a/views/editor.php +++ b/views/editor.php @@ -41,9 +41,20 @@ +
+
+ + Draft +
+
+ +
+
+
+
-

Tell your story...

+

Write something nice...

diff --git a/views/partials/appcache.php b/views/partials/appcache.php index 546685f..0bc21a6 100644 --- a/views/partials/appcache.php +++ b/views/partials/appcache.php @@ -17,6 +17,7 @@ CACHE MANIFEST /editor/medium-editor/js/medium-editor.min.js /editor/medium-editor/js/medium-editor-insert-plugin.min.js /editor/localforage/localforage.js +/editor/quill-logo-36.png NETWORK: *