Add color picker, improve refresh behavior

www/js/NotePostNotes.class.js

@@ -116,6 +116,8 @@ class NotePostNotes extends Notes {
       }
     });
   }
+
+  
   /**
    * Sync notes with the NotePost server, resolving conflicts in the process.
    *
@@ -123,8 +125,6 @@ class NotePostNotes extends Notes {
    * @param {function} error
    * @returns {undefined}
    */
-
-
   sync(success, error) {
     super.sync();
     var self = this;

www/js/Notes.class.js

@@ -112,8 +112,7 @@ class Notes {
 
     if (typeof note.html !== 'string') {
       note.html = marked(note.content);
-    } // Save
+    }
-
 
     return note;
   }

www/js/home.js

@@ -6,8 +6,42 @@
 
 
 $(".view-main").on("ptr:refresh", ".ptr-content", function () {
+    loadCards(function () {
+        app.ptr.done();
+    });
+});
+
+function loadCards(callback) {
+    // Do it twice as a workaround for the stupid sync issue
+    NOTES.sync(function () {
+        NOTES.sync(function (notes) {
+            for (i in window.shuffleInstance.items) {
+                window.shuffleInstance.remove(window.shuffleInstance.items[i]);
+            }
+            $(".notecard-col").remove();
+            for (n in notes) {
+                var note = notes[n];
+                $("#notecards-bin").append('<div class="col-100 tablet-50 desktop-33 notecard-col" id="notecard-col-' + note.noteid + '">'
+                        + '<div class="card notecard" id="notecard-' + note.noteid + '" data-id="' + note.noteid + '" data-bg="' + note.color + '" data-fg="' + note.textcolor + '" style="background-color: #' + note.color + '; color: #' + note.textcolor + ';">'
+                        + '<div class="menubtn">'
+                        + '<i class="material-icons">more_vert</i>'
+                        + '</div>'
+                        + '<div class="card-content card-content-padding">' + note.html + '</div>'
+                        + '</div>'
+                        + '</div>');
+            }
+            var noteElements = document.getElementsByClassName("notecard-col");
+            window.shuffleInstance.add(noteElements);
+            if (typeof callback == 'function') {
+                callback();
+            }
+        }, function () {
             restartApplication();
         });
+    }, function () {
+        restartApplication();
+    });
+}
 
 function editNote(id) {
     var note = NOTES.get(id);
@@ -32,16 +66,29 @@ function makeList(id) {
 function deleteNote(id) {
     app.dialog.confirm('Are you sure?', 'Delete Note', function () {
         NOTES.del(id, function () {
-            app.ptr.refresh();
+            window.shuffleInstance.remove(document.getElementById("notecard-" + id));
         });
     });
 }
 
+function colorNote(id) {
+    $("#colorpicker").data("noteid", id);
+    var colorpicker = app.popup.create({
+        el: $("#colorpicker")
+    });
+    colorpicker.open();
+}
+
 $("#app").on("click", ".edit-note-btn", function () {
     editNote($(this).data("note"));
     app.popover.close();
 });
 
+$("#app").on("click", ".color-note-btn", function () {
+    colorNote($(this).data("note"));
+    app.popover.close();
+});
+
 $("#app").on("click", ".favorite-note-btn", function () {
     favoriteNote($(this).data("note"));
     app.popover.close();
@@ -57,6 +104,23 @@ $("#app").on("click", ".delete-note-btn", function () {
     app.popover.close();
 });
 
+$("#app").on("click", "#colorpicker .colorpicker-color", function () {
+    var color = $(this).data("color");
+    var noteid = $("#colorpicker").data("noteid");
+    var note = NOTES.get(noteid);
+    app.popup.close();
+    note.color = color;
+    // Set them to null, they'll be fixed in fix()
+    note.modified = null;
+    note.textcolor = null;
+    note2 = NOTES.fix(note);
+    NOTES.set(note2);
+    $("#notecard-" + noteid).data("bg", note2.color);
+    $("#notecard-" + noteid).data("fg", note2.textcolor);
+    $("#notecard-" + noteid).css("background-color", "#" + note2.color);
+    $("#notecard-" + noteid).css("color", "#" + note2.textcolor);
+});
+
 function openNoteActionMenu(notecard) {
     var noteid = notecard.data("id");
     if (window.innerWidth < 768) {
@@ -70,6 +134,14 @@ function openNoteActionMenu(notecard) {
                         editNote(noteid);
                     }
                 },
+                {
+                    text: "Color",
+                    icon: '<i class="fas fa-palette fa-fw"></i>',
+                    onClick: function () {
+                        colorNote(noteid);
+                    }
+                },
+
 //                {
 //                    text: "Favorite",
 //                    icon: '<i class="fas fa-star fa-fw"></i>',
@@ -104,6 +176,7 @@ function openNoteActionMenu(notecard) {
                     '<div class="list">' +
                     '<ul>' +
                     '<li><a class="list-button item-link edit-note-btn" data-note="' + noteid + '"><i class="fas fa-edit fa-fw"></i> Edit</a></li>' +
+                    '<li><a class="list-button item-link color-note-btn" data-note="' + noteid + '"><i class="fas fa-palette fa-fw"></i> Color</a></li>' +
                     '<li><a class="list-button item-link favorite-note-btn" data-note="' + noteid + '"><i class="fas fa-star fa-fw"></i> Favorite</a></li>' +
                     '<li><a class="list-button item-link listify-note-btn" data-note="' + noteid + '"><i class="fas fa-tasks fa-fw"></i> Make a List</a></li>' +
                     '<li><a class="list-button item-link delete-note-btn" data-note="' + noteid + '"><i class="fas fa-trash fa-fw"></i> Delete</a></li>' +

www/pages/home.html

@@ -28,6 +28,8 @@
         </div>
 
         <div class="row notecards-row" id="notecards-bin">
+            <div class="col-100 tablet-50 desktop-33" style="visibility: hidden;" id="notecard-col-sizer">
+            </div>
             {{#if offline}}
             <div class="col-100 tablet-50 desktop-33 notecard-col">
                 <div class="card">
@@ -39,7 +41,7 @@
             </div>
             {{/if}}
             {{#each notecards}}
-            <div class="col-100 tablet-50 desktop-33 notecard-col">
+            <div class="col-100 tablet-50 desktop-33 notecard-col" id="notecard-col-{{noteid}}">
                 <div class="card notecard" id="notecard-{{noteid}}" data-id="{{noteid}}" data-bg="{{color}}" data-fg="{{textcolor}}" style="background-color: #{{color}}; color: #{{textcolor}};">
                     <div class="menubtn">
                         <i class="material-icons">more_vert</i>
@@ -61,10 +63,37 @@
         </a>
     </div>
 
+    <div class="popup" id="colorpicker">
+        <div class="navbar">
+            <div class="navbar-inner">
+                <div class="title">Set Color</div>
+
+                <div class="right">
+                    <a href="#" class="link icon-only popup-close">
+                        <i class="material-icons">close</i>
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        <div class="block">
+            <div style="display: flex; justify-content: center; flex-wrap: wrap;">
+                {{#each colors}}
+                <div class="card colorpicker-color" style="background-color: #{{this}}; height: 3em; width: 3em; cursor: pointer;" data-color="{{this}}">
+                    &nbsp;
+                </div>
+                {{/each}}
+            </div>
+        </div>
+    </div>
+
     <script>
         window.shuffleInstance = new window.Shuffle(document.getElementById('notecards-bin'), {
-            itemSelector: '.notecard-col'
+            itemSelector: '.notecard-col',
+            sizer: '#notecard-col-sizer'
         });
+
+        loadCards();
     </script>
 
 </div>

www/routes.js

@@ -16,7 +16,38 @@ var routes = [
             };
             var context = {
                 showrefreshbtn: (platform_type != "cordova"),
-                offline: OFFLINE
+                offline: OFFLINE,
+                colors: [
+                    // Pastel colors
+                    "EF9A9A", // red
+                    "FFCC80", // orange
+                    "FFF59D", // yellow
+                    "E6EE9C", // lime
+                    "A5D6A7", // green
+                    "80CBC4", // teal
+                    "81D4FA", // light blue
+                    "90CAF9", // blue
+                    "B39DDB", // purple
+                    "F48FB1", // pink
+                    // Bright colors
+                    "F44336", // red
+                    "FF9800", // orange
+                    "FFEB3B", // yellow
+                    "8BC34A", // light green
+                    "4CAF50", // green
+                    "009688", // teal
+                    "03A9F4", // light blue
+                    "2196F3", // blue
+                    "673AB7", // purple
+                    "E91E63", // pink
+                    // Other colors
+                    "FFFFFF", // white
+                    "E0E0E0", // pastel gray
+                    "9E9E9E", // gray
+                    "BCAAA4", // pastel brown
+                    "795548", // brown
+                    "000000" // black
+                ]
             };
             NOTES.sync(function (notes) {
                 context["notecards"] = notes;