summaryrefslogtreecommitdiff
path: root/public
diff options
context:
space:
mode:
authorAaron Parecki <aaron@parecki.com>2015-05-10 15:09:07 +0200
committerAaron Parecki <aaron@parecki.com>2015-05-10 15:09:07 +0200
commit3dc97d7478781550aa1a878120082a871988f02e (patch)
tree4eb36a780f734c6f416965fd5aadb93ab3c21180 /public
parentb92daf96f5ae40abaadc3f41e448fcc75824334b (diff)
autosave new posts in localstorage
Diffstat (limited to 'public')
-rw-r--r--public/editor/editor.js46
-rw-r--r--public/editor/quill-logo-36.pngbin0 -> 1730 bytes
-rw-r--r--public/editor/style.css34
3 files changed, 79 insertions, 1 deletions
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 0000000..90aebc4
--- /dev/null
+++ b/public/editor/quill-logo-36.png
Binary files differ
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 {