Merge pull request #83 from matiasdelellis/nc24

Enable NC24 and update tests..

.github/workflows/lint.yml

@@ -24,7 +24,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        php-versions: ['7.3', '7.4', '8.0']
+        php-versions: ['7.3', '7.4', '8.0', '8.1']
     name: php${{ matrix.php-versions }} lint
     steps:
       - name: Checkout

.github/workflows/static-analysis.yml

@@ -11,7 +11,7 @@ jobs:
       runs-on: ubuntu-latest
       strategy:
           matrix:
-              ocp-version: [ 'v21.0.0' ]
+              ocp-version: [ 'dev-stable24' ]
       name: Nextcloud ${{ matrix.ocp-version }}
       steps:
           - name: Checkout

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [0.7.6] 2022-05-07
+- Enable NC24.
+- Removes lot use of jQuery, that inexplicably failing in NC24. Issue #84
+
 ## [0.7.3] 2021-12-03
 - Add where to translate into README. PR #71
 - Add lint and static-analysis using github workflows.

Makefile

@@ -65,8 +65,6 @@ deps:
 	cp node_modules/medium-editor/dist/css/medium-editor.css vendor/
 	cp node_modules/medium-editor-autolist/dist/autolist.js vendor/
 	cp node_modules/lozad/dist/lozad.js vendor/
-	wget https://raw.githubusercontent.com/philzet/ColorPick.js/master/src/colorPick.js -O vendor/colorPick.js
-	wget https://raw.githubusercontent.com/philzet/ColorPick.js/master/src/colorPick.css -O vendor/colorPick.css
 
 depsmin:
 	mkdir -p vendor
@@ -78,8 +76,6 @@ depsmin:
 	cp node_modules/medium-editor/dist/css/medium-editor.min.css vendor/medium-editor.css
 	cp node_modules/medium-editor-autolist/dist/autolist.min.js vendor/autolist.js
 	cp node_modules/lozad/dist/lozad.min.js vendor/lozad.js
-	wget https://raw.githubusercontent.com/philzet/ColorPick.js/master/src/colorPick.js -O vendor/colorPick.js
-	wget https://raw.githubusercontent.com/philzet/ColorPick.js/master/src/colorPick.css -O vendor/colorPick.css
 
 js-templates:
 	node_modules/handlebars/bin/handlebars js/templates -f js/templates.js

appinfo/info.xml

@@ -5,7 +5,7 @@
     <name>Quick notes</name>
     <summary>Quick notes with a basic rich text</summary>
     <description>Quick notes with a basic rich text</description>
-    <version>0.7.3</version>
+    <version>0.7.6</version>
     <licence>agpl</licence>
     <author>Matias De lellis</author>
     <namespace>QuickNotes</namespace>
@@ -20,6 +20,6 @@
     <screenshot>https://raw.githubusercontent.com/matiasdelellis/quicknotes/master/doc/quicknotes-attachments.jpeg</screenshot>
     <screenshot>https://raw.githubusercontent.com/matiasdelellis/quicknotes/master/doc/quicknotes-shared-note.jpeg</screenshot>
     <dependencies>
-        <nextcloud min-version="21" max-version="23"/>
+        <nextcloud min-version="24" max-version="24"/>
     </dependencies>
 </info>

composer.json

@@ -1,8 +1,8 @@
 {
     "require-dev": {
         "psalm/phar": "^4.10",
-        "christophwurst/nextcloud": "^21.0",
+        "christophwurst/nextcloud": "^22.0",
-        "psr/container": "^2.0"
+        "psr/container": "^1.0"
     },
     "scripts": {
         "lint": "find . -name \\*.php -not -path './vendor/*' -print0 | xargs -0 -n1 php -l",

css/qn-colorpick.scss

@@ -0,0 +1,32 @@
+.colorPickWrapper {
+    position: relative;
+    width: 0;
+    height: 0;
+}
+
+#colorPick {
+  background: #fff;
+  -webkit-backdrop-filter: blur(15px);
+  position: absolute;
+  border-radius: 8px;
+  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
+  padding: 10px;
+  width: auto;
+  box-sizing: content-box;
+  z-index: 2500;
+  display: flex;
+}
+
+.colorPickButton {
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  margin: 0px 3px;
+  cursor: pointer;
+  display: inline-block;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.colorPickButton:hover {
+  transform: scale(1.1);
+}

css/style.scss

@@ -361,19 +361,3 @@ div.select2-container {
     padding: 0px !important;
     border-radius: 50%;
 }
-
-/* Color Picker */
-
-#colorPick {
-    border-radius: 8px;
-    padding: 12px;
-    background-color: var(--color-background-dark);
-    opacity: 1.0 !important;
-    z-index: 2500;
-}
-
-#colorPick span {
-    color: var(--color-main-text);
-    font-size: 13px;
-    text-transform: initial;
-}

js/qn-colorpick.js

@@ -0,0 +1,64 @@
+function QnColorPick(parentSelector, onSelectColor) {
+
+    this._parentSelector = parentSelector;
+    this._onSelectColor = onSelectColor;
+
+    this._color = undefined;
+
+    this._template = '' +
+        '<div id="colorPickWrapper" class="colorPickWrapper">' +
+            '<div id="colorPick">' +
+                '<div class="colorPickButton" hexvalue="#F7EB96" style="background-color:#F7EB96"></div>' +
+                '<div class="colorPickButton" hexvalue="#88B7E3" style="background-color:#88B7E3"></div>' +
+                '<div class="colorPickButton" hexvalue="#C1ECB0" style="background-color:#C1ECB0"></div>' +
+                '<div class="colorPickButton" hexvalue="#BFA6E9" style="background-color:#BFA6E9"></div>' +
+                '<div class="colorPickButton" hexvalue="#DAF188" style="background-color:#DAF188"></div>' +
+                '<div class="colorPickButton" hexvalue="#FF96AC" style="background-color:#FF96AC"></div>' +
+                '<div class="colorPickButton" hexvalue="#FCF66F" style="background-color:#FCF66F"></div>' +
+                '<div class="colorPickButton" hexvalue="#F2F1EF" style="background-color:#F2F1EF"></div>' +
+                '<div class="colorPickButton" hexvalue="#C1D756" style="background-color:#C1D756"></div>' +
+                '<div class="colorPickButton" hexvalue="#CECECE" style="background-color:#CECECE"></div>' +
+            '</div>' +
+       '</div>';
+
+    this.select = function (hexcolor) {
+        this._color = hexcolor;
+    }
+
+    this.close = function () {
+        var picker = document.getElementById("colorPickWrapper");
+        picker.remove();
+    }
+
+    this.show = function (hexcolor) {
+        var self = this;
+
+        var parent = document.querySelector(this._parentSelector);
+        parent.innerHTML += this._template;
+
+        var colors = document.querySelectorAll(".colorPickButton");
+        colors.forEach (function(color) {
+            if (hexcolor == color.getAttribute("hexvalue")) {
+                color.classList.add("icon-checkmark");
+            }
+            color.addEventListener("click", function () {
+                self._color = color.getAttribute("hexvalue");
+                self._onSelectColor(self._color);
+                self.close ();
+            });
+        });
+    }
+
+    this.isVisible = function () {
+        var picker = document.getElementById("colorPickWrapper");
+        return picker != null;
+    };
+
+    this.toggle = function () {
+        if (this.isVisible()) {
+            this.close();
+        } else {
+            this.show(this._color);
+        }
+    };
+}

js/script.js

@@ -187,15 +187,19 @@ var View = function (notes) {
     this._notes = notes;
 
     this._editor = undefined;
+    this._isotope = undefined;
+    this._colorPick = undefined;
     this._changed = false;
 };
 
 View.prototype = {
     showAll: function () {
-        $('.notes-grid').isotope({ filter: '*'});
+        this._isotope.arrange({ filter: '*'});
+        setFilterUrl();
     },
     updateSort: function() {
-        $('.notes-grid').isotope('updateSortData').isotope();
+        this._isotope.updateSortData();
+        this._isotope.layout();
     },
     editNote: function (id) {
         // Get selected note and sync content
@@ -278,22 +282,28 @@ View.prototype = {
         lozad('.attach-preview').observe();
 
         // Init masonty grid to notes.
-        $('.notes-grid').isotope({
+        if (this._notes.isLoaded() && this._notes.length() > 0) {
-            itemSelector: '.note-grid-item',
+            this._isotope = new Isotope(document.querySelector('.notes-grid'), {
-            layoutMode: 'masonry',
+                itemSelector: '.note-grid-item',
-            masonry: {
+                layoutMode: 'masonry',
-                isFitWidth: true,
+                masonry: {
-                fitWidth: true,
+                    isFitWidth: true,
-                gutter: 14,
+                    fitWidth: true,
-            },
+                    gutter: 14,
-            sortBy: 'pinnedNote',
+                },
-            getSortData: {
+                sortBy: 'pinnedNote',
-                pinnedNote: function(itemElem) {
+                getSortData: {
-                    var $item = $(itemElem);
+                    pinnedNote: function(itemElem) {
-                    return $item.find('.icon-pinned').hasClass('fixed-header-icon') ? -1 : $item.index();
+                        var $item = $(itemElem);
+                        return $item.find('.icon-pinned').hasClass('fixed-header-icon') ? -1 : $item.index();
+                    }
                 }
-            }
+            });
-        });
+
+            this._colorPick = new QnColorPick(".modal-content", function (color) {
+                $("#modal-note-div .quicknote").css("background-color", color);
+            });
+        }
 
         // Save instance of View
         var self = this;
@@ -309,7 +319,7 @@ View.prototype = {
         // Open notes when clicking them.
         $("#notes-grid-div").on("click", ".quicknote", function (event) {
             event.stopPropagation();
-            var id = parseInt($(this).data('id'), 10);
+            var id = parseInt($(this).attr('data-id'), 10);
             self.editNote(id);
         });
 
@@ -332,7 +342,7 @@ View.prototype = {
             event.stopPropagation();
 
             var gridnote = $(this).parent().parent().parent();
-            var id = parseInt(gridnote.data('id'), 10);
+            var id = parseInt(gridnote.attr('data-id'), 10);
 
             var note = self._notes.read(id);
             OC.dialogs.confirm(
@@ -343,8 +353,8 @@ View.prototype = {
                         if (!note.is_shared) {
                             self._notes.remove(note).done(function () {
                                 if (self._notes.length() > 0) {
-                                     $(".notes-grid").isotope('remove', gridnote.parent())
+                                    self._isotope.remove(gridnote.parent())
-                                                    .isotope('layout');
+                                    self._isotope.layout();
                                     self.showAll();
                                     self.renderNavigation();
                                 } else {
@@ -356,8 +366,8 @@ View.prototype = {
                         } else {
                             self._notes.forgetShare(note).done(function () {
                                 if (self._notes.length() > 0) {
-                                     $(".notes-grid").isotope('remove', gridnote.parent())
+                                    self._isotope.remove(gridnote.parent())
-                                                    .isotope('layout');
+                                    selg._isotope.layout();
                                     self.showAll();
                                     self.renderNavigation();
                                 } else {
@@ -379,7 +389,7 @@ View.prototype = {
 
             var icon =  $(this);
             var gridNote = icon.parent().parent().parent();
-            var id = parseInt(gridNote.data('id'), 10);
+            var id = parseInt(gridNote.attr('data-id'), 10);
 
             var note = self._notes.read(id);
             note.isPinned = true;
@@ -390,7 +400,8 @@ View.prototype = {
                 icon.removeClass("icon-pin");
                 icon.addClass("icon-pinned");
                 icon.attr('title', t('quicknotes', 'Unpin note'));
-                $('.notes-grid').isotope('updateSortData').isotope();
+                self._isotope.updateSortData();
+                self._isotope.arrange();
             }).fail(function () {
                 alert('Could not pin note');
             });
@@ -402,18 +413,18 @@ View.prototype = {
 
             var icon =  $(this);
             var gridNote = icon.parent().parent().parent();
-            var id = parseInt(gridNote.data('id'), 10);
+            var id = parseInt(gridNote.attr('data-id'), 10);
 
             var note = self._notes.read(id);
             note.isPinned = false;
-
             self._notes.update(note).done(function () {
                 icon.removeClass("fixed-header-icon");
                 icon.addClass("hide-header-icon");
                 icon.removeClass("icon-pinned");
                 icon.addClass("icon-pin");
                 icon.attr('title', t('quicknotes', 'Pin note'));
-                $('.notes-grid').isotope('updateSortData').isotope();
+                self._isotope.updateSortData();
+                self._isotope.arrange();
             }).fail(function () {
                 alert('Could not unpin note');
             });
@@ -425,6 +436,10 @@ View.prototype = {
         // Cancel when click outside the modal.
         $('#div-content').on('click', '.modal-note-background', function (event) {
             event.stopPropagation();
+            if (self._colorPick.isVisible()) {
+                self._colorPick.close();
+                return;
+            }
             if (!self._changed) {
                 self.cancelEdit();
                 return;
@@ -493,13 +508,13 @@ View.prototype = {
         });
 
         // Handle tags on modal
-        $('#modal-note-div').on('click', '.slim-tag', function (event) {
+        $('#modal-note-div').on("click", ".slim-tag", function (event) {
             event.stopPropagation();
             $('#modal-note-div #tag-button').trigger( "click");
         });
 
         // handle tags button.
-        $('#modal-note-div #share-button').click(function (event) {
+        $('#modal-note-div').on("click", "#share-button", function (event) {
             event.stopPropagation();
             QnDialogs.shares(
                 self._notes.getUsersSharing(),
@@ -512,13 +527,13 @@ View.prototype = {
             );
         });
 
-        // FIXME: Hack to sent click event to colorPicker.
+        $('#modal-note-div').on("click", "#color-button", function (event) {
-        $('#modal-note-div .icon-toggle-background').click(function (event) {
+            event.stopPropagation();
-            $(this).parent().click();
+            self._colorPick.toggle();
         });
 
         // handle attach button.
-        $('#modal-note-div #attach-button').click(function (event) {
+        $('#modal-note-div').on("click", "#attach-button", function (event) {
             event.stopPropagation();
             OC.dialogs.filepicker(t('quicknotes', 'Select file to attach'), function(datapath, returntype) {
                 OC.Files.getClient().getFileInfo(datapath).then((status, fileInfo) => {
@@ -536,7 +551,7 @@ View.prototype = {
         });
 
         // handle tags button.
-        $('#modal-note-div #tag-button').click(function (event) {
+        $('#modal-note-div').on("click", "#tag-button", function (event) {
             event.stopPropagation();
             var noteTags = self._editableTags();
             QnDialogs.tags(
@@ -551,19 +566,19 @@ View.prototype = {
         });
 
         // handle cancel editing notes.
-        $('#modal-note-div #close-button').click(function (event) {
+        $('#modal-note-div').on("click", "#close-button", function (event) {
             event.stopPropagation();
             self.cancelEdit();
         });
 
         // handle cancel editing notes.
-        $('#modal-note-div #cancel-button').click(function (event) {
+        $('#modal-note-div').on("click", "#cancel-button", function (event) {
             event.stopPropagation();
             self.cancelEdit();
         });
 
         // Handle save note
-        $('#modal-note-div #save-button').click(function (event) {
+        $('#modal-note-div').on("click", "#save-button", function (event) {
             event.stopPropagation();
             self.saveNote();
         });
@@ -593,9 +608,9 @@ View.prototype = {
             self._notes.create(fakenote).done(function(note) {
                 if (self._notes.length() > 1) {
                     var $notehtml = $(Handlebars.templates['note-item'](note));
-                    $(".notes-grid").prepend($notehtml)
+                    $('.notes-grid').prepend($notehtml);
-                                    .isotope('prepended', $notehtml)
+                    self._isotope.prepended($notehtml);
-                                    .isotope('layout');
+                    self._isotope.layout();
                     self.showAll();
                     self.updateSort();
                     self.renderNavigation();
@@ -613,7 +628,7 @@ View.prototype = {
             event.preventDefault();
             self._cleanNavigation();
             $(this).addClass("active");
-            $('.notes-grid').isotope({ filter: '*'});
+            self._isotope.arrange({ filter: '*'});
             setFilterUrl();
         });
 
@@ -628,9 +643,11 @@ View.prototype = {
             event.stopPropagation();
             self._cleanNavigation();
             $(this).addClass("active");
-            $('.notes-grid').isotope({ filter: function() {
+            self._isotope.arrange({
-                return $(this).children().hasClass('shared');
+                filter: function(elem) {
-            } });
+                    return elem.querySelector('.shared') != null;
+                }
+            });
             setFilterUrl();
         });
 
@@ -639,9 +656,11 @@ View.prototype = {
             event.stopPropagation();
             self._cleanNavigation();
             $(this).addClass("active");
-            $('.notes-grid').isotope({ filter: function() {
+            self._isotope.arrange({
-                return $(this).children().hasClass('shareowner');
+                filter: function(elem) {
-            } });
+                    return elem.querySelector('.shareowner') != null;
+                }
+            });
             setFilterUrl();
         });
 
@@ -781,9 +800,9 @@ View.prototype = {
     },
     _editableId: function(id) {
         if (id === undefined)
-            return $("#modal-note-div .quicknote").data('id');
+            return $("#modal-note-div .quicknote").attr('data-id');
         else
-            $("#modal-note-div .quicknote").data('id', id);
+            $("#modal-note-div .quicknote").attr('data-id', id);
     },
     _editableTitle: function(title) {
         if (title === undefined)
@@ -817,16 +836,8 @@ View.prototype = {
         if (color === undefined)
             return this._colorToHex($("#modal-note-div .quicknote").css("background-color"));
         else {
-            $("#color-button").colorPick({
+            $("#modal-note-div .quicknote").css("background-color", color);
-                'initialColor': color,
+            this._colorPick.select(color);
-                'paletteLabel': t('quicknotes', 'Colors'),
-                'palette': ['#F7EB96', '#88B7E3', '#C1ECB0', '#BFA6E9', '#DAF188', '#FF96AC', '#FCF66F', '#F2F1EF', '#C1D756', '#CECECE'],
-                'allowRecent': false,
-                'allowCustomColor': false,
-                'onColorSelected': function() {
-                    $("#modal-note-div .quicknote").css("background-color", this.color);
-                }
-            });
         }
     },
     _editableShares: function(shared_with) {
@@ -914,15 +925,19 @@ View.prototype = {
                     { name: 'removeFormat', aria: t('quicknotes', 'Clean format') }
                ]
             },
+            placeholder: {
+                text: 'Create a note…',
+                hideOnClick: false
+            },
             autoLink: true,
             targetBlank: true,
             paste: {
-                forcePlainText: false,
+                forcePlainText: true
-                cleanPastedHTML: false
             },
             extensions: {
                 'autolist': new AutoList()
-            }
+            },
+            imageDragging: false
         });
 
         var self = this;
@@ -944,10 +959,6 @@ View.prototype = {
         this._editableContent('');
         this._editablePinned(false);
         this._editableTags([]);
-
-        $.each($("#modal-note-div .circle-toolbar"), function(i, colortool) {
-            $(colortool).removeClass('icon-checkmark');
-        });
     },
     _showEditor: function(id) {
         var note = $('.notes-grid [data-id=' + id + ']').parent();
@@ -1028,19 +1039,19 @@ View.prototype = {
         );
     },
     _filterNote: function (noteId) {
-        $('.notes-grid').isotope({
+        this._isotope.arrange({
-            filter: function() {
+            filter: function(elem) {
-                return noteId == parseInt($(this).children().data('id'), 10);
+                return noteId == elem.firstElementChild.getAttribute('data-id');
             }
         });
     },
     _filterTag: function (tagId) {
-        $('.notes-grid').isotope({
+        this._isotope.arrange({
-            filter: function() {
+            filter: function(elem) {
                 var match = false;
-                $(this).find(".slim-tag").siblings().addBack().each(function() {
+                var tags = elem.querySelectorAll('.slim-tag');
-                    var id = parseInt($(this).attr('tag-id'), 10);
+                tags.forEach (function(tagItem) {
-                    if (tagId == id)
+                    if (tagId == tagItem.getAttribute('tag-id'))
                         match = true;
                 });
                 return match;
@@ -1048,9 +1059,9 @@ View.prototype = {
         });
     },
     _filterColor: function (color) {
-        $('.notes-grid').isotope({
+        this._isotope.arrange({
-            filter: function() {
+            filter: function(elem) {
-                return color == $(this).children().css("background-color");
+                return color == elem.firstElementChild.style["background-color"];
             }
         });
     },

js/templates/attachts.handlebars

@@ -2,10 +2,10 @@
 	{{#each attachments}}
 		<div class='note-attach-grid'>
 			<a target="_blank" href="{{redirect_url}}">
-				<div class="attach-preview note-attach" attach-file-id="{{file_id}}" data-background-image="{{preview_url}}"/>
+				<div class="attach-preview note-attach" attach-file-id="{{file_id}}" data-background-image="{{preview_url}}"></div>
 			</a>
 			{{#if ../can_delete}}
-				<div class="attach-remove icon-delete" title="{{t "quicknotes" "Delete attachment"}}"/>
+				<div class="attach-remove icon-delete" title="{{t "quicknotes" "Delete attachment"}}"></div>
 			{{/if}}
 		</div>
 	{{/each}}

js/templates/note-item.handlebars

@@ -4,7 +4,7 @@
 			<div class='note-attachts'>
 				{{#each attachments}}
 					<div class='note-attach-grid'>
-						<div class="attach-preview note-attach" attach-file-id="{{file_id}}" data-background-image="{{preview_url}}"/>
+						<div class="attach-preview note-attach" attach-file-id="{{file_id}}" data-background-image="{{preview_url}}"></div>
 					</div>
 				{{/each}}
 			</div>

js/templates/notes.handlebars

@@ -7,7 +7,7 @@
 				<div class='note-attachts'>
 					{{#each attachments}}
 						<div class='note-attach-grid'>
-							<div class="attach-preview note-attach" attach-file-id="{{file_id}}" data-background-image="{{preview_url}}"/>
+							<div class="attach-preview note-attach" attach-file-id="{{file_id}}" data-background-image="{{preview_url}}"></div>
 						</div>
 					{{/each}}
 				</div>
@@ -114,6 +114,6 @@
 	<h2>
 		{{loadingMsg}}
 	</h2>
-	<img class="loadingimport" src="{{loadingIcon}}"/>
+	<img class="loadingimport" src="{{loadingIcon}}" />
 </div>
 {{/if}}

package-lock.json

@@ -1,8 +1,159 @@
 {
   "name": "quicknotes",
   "version": "0.1.9",
-  "lockfileVersion": 1,
+  "lockfileVersion": 2,
   "requires": true,
+  "packages": {
+    "": {
+      "name": "quicknotes",
+      "version": "0.1.9",
+      "license": "AGPL-3.0-or-later",
+      "dependencies": {
+        "handlebars": "^4.5.1",
+        "isotope-layout": "^3.0.6",
+        "lozad": "^1.15.0",
+        "medium-editor": "^5.23.3",
+        "medium-editor-autolist": "^1.0.1"
+      }
+    },
+    "node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "optional": true
+    },
+    "node_modules/desandro-matches-selector": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/desandro-matches-selector/-/desandro-matches-selector-2.0.2.tgz",
+      "integrity": "sha1-cXvu1NwT59jzdi9wem1YpndCGOE="
+    },
+    "node_modules/ev-emitter": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ev-emitter/-/ev-emitter-1.1.1.tgz",
+      "integrity": "sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q=="
+    },
+    "node_modules/fizzy-ui-utils": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/fizzy-ui-utils/-/fizzy-ui-utils-2.0.7.tgz",
+      "integrity": "sha512-CZXDVXQ1If3/r8s0T+v+qVeMshhfcuq0rqIFgJnrtd+Bu8GmDmqMjntjUePypVtjHXKJ6V4sw9zeyox34n9aCg==",
+      "dependencies": {
+        "desandro-matches-selector": "^2.0.0"
+      }
+    },
+    "node_modules/get-size": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/get-size/-/get-size-2.0.3.tgz",
+      "integrity": "sha512-lXNzT/h/dTjTxRbm9BXb+SGxxzkm97h/PCIKtlN/CBCxxmkkIVV21udumMS93MuVTDX583gqc94v3RjuHmI+2Q=="
+    },
+    "node_modules/handlebars": {
+      "version": "4.7.7",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.7.tgz",
+      "integrity": "sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==",
+      "dependencies": {
+        "minimist": "^1.2.5",
+        "neo-async": "^2.6.0",
+        "source-map": "^0.6.1",
+        "wordwrap": "^1.0.0"
+      },
+      "bin": {
+        "handlebars": "bin/handlebars"
+      },
+      "engines": {
+        "node": ">=0.4.7"
+      },
+      "optionalDependencies": {
+        "uglify-js": "^3.1.4"
+      }
+    },
+    "node_modules/isotope-layout": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/isotope-layout/-/isotope-layout-3.0.6.tgz",
+      "integrity": "sha512-z2ZKablhocXhoNyWwzJPFd7u7FWbYbVJA51Nvsqsod8jH2ExGc1SwDsSWKE54e3PhXzqf2yZPhFSq/c2MR1arw==",
+      "dependencies": {
+        "desandro-matches-selector": "^2.0.0",
+        "fizzy-ui-utils": "^2.0.4",
+        "get-size": "^2.0.0",
+        "masonry-layout": "^4.1.0",
+        "outlayer": "^2.1.0"
+      }
+    },
+    "node_modules/lozad": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/lozad/-/lozad-1.15.0.tgz",
+      "integrity": "sha512-P60iyIiud4XSH5SXxrgPCXoebEaT6SYAvRBgeMBZPYmWVRSfOhQks8ZmyZ/WFgDgwvrHnWffXw9HMg8G0gvt0w=="
+    },
+    "node_modules/masonry-layout": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/masonry-layout/-/masonry-layout-4.2.2.tgz",
+      "integrity": "sha512-iGtAlrpHNyxaR19CvKC3npnEcAwszXoyJiI8ARV2ePi7fmYhIud25MHK8Zx4P0LCC4d3TNO9+rFa1KoK1OEOaA==",
+      "dependencies": {
+        "get-size": "^2.0.2",
+        "outlayer": "^2.1.0"
+      }
+    },
+    "node_modules/medium-editor": {
+      "version": "5.23.3",
+      "resolved": "https://registry.npmjs.org/medium-editor/-/medium-editor-5.23.3.tgz",
+      "integrity": "sha512-he9/TdjX8f8MGdXGfCs8AllrYnqXJJvjNkDKmPg3aPW/uoIrlRqtkFthrwvmd+u4QyzEiadhCCM0EwTiRdUCJw=="
+    },
+    "node_modules/medium-editor-autolist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/medium-editor-autolist/-/medium-editor-autolist-1.0.1.tgz",
+      "integrity": "sha1-K+QPb3To9LX6fosnTj9QXCrqfN0=",
+      "dependencies": {
+        "medium-editor": "^5.23.0"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
+    },
+    "node_modules/neo-async": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.1.tgz",
+      "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw=="
+    },
+    "node_modules/outlayer": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/outlayer/-/outlayer-2.1.1.tgz",
+      "integrity": "sha1-KYY7beEOpdrf/8rfoNcokHOH6aI=",
+      "dependencies": {
+        "ev-emitter": "^1.0.0",
+        "fizzy-ui-utils": "^2.0.0",
+        "get-size": "^2.0.2"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/uglify-js": {
+      "version": "3.6.7",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.6.7.tgz",
+      "integrity": "sha512-4sXQDzmdnoXiO+xvmTzQsfIiwrjUCSA95rSP4SEd8tDb51W2TiDOlL76Hl+Kw0Ie42PSItCW8/t6pBNCF2R48A==",
+      "optional": true,
+      "dependencies": {
+        "commander": "~2.20.3",
+        "source-map": "~0.6.1"
+      },
+      "bin": {
+        "uglifyjs": "bin/uglifyjs"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/wordwrap": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
+      "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus="
+    }
+  },
   "dependencies": {
     "commander": {
       "version": "2.20.3",
@@ -34,14 +185,15 @@
       "integrity": "sha512-lXNzT/h/dTjTxRbm9BXb+SGxxzkm97h/PCIKtlN/CBCxxmkkIVV21udumMS93MuVTDX583gqc94v3RjuHmI+2Q=="
     },
     "handlebars": {
-      "version": "4.5.1",
+      "version": "4.7.7",
-      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.7.tgz",
-      "integrity": "sha512-C29UoFzHe9yM61lOsIlCE5/mQVGrnIOrOq7maQl76L7tYPCgC1og0Ajt6uWnX4ZTxBPnjw+CUvawphwCfJgUnA==",
+      "integrity": "sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==",
       "requires": {
+        "minimist": "^1.2.5",
         "neo-async": "^2.6.0",
-        "optimist": "^0.6.1",
         "source-map": "^0.6.1",
-        "uglify-js": "^3.1.4"
+        "uglify-js": "^3.1.4",
+        "wordwrap": "^1.0.0"
       }
     },
     "isotope-layout": {
@@ -84,24 +236,15 @@
       }
     },
     "minimist": {
-      "version": "0.0.10",
+      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
-      "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8="
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
     },
     "neo-async": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.1.tgz",
       "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw=="
     },
-    "optimist": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
-      "integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=",
-      "requires": {
-        "minimist": "~0.0.1",
-        "wordwrap": "~0.0.2"
-      }
-    },
     "outlayer": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/outlayer/-/outlayer-2.1.1.tgz",
@@ -128,9 +271,9 @@
       }
     },
     "wordwrap": {
-      "version": "0.0.3",
+      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
-      "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc="
+      "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus="
     }
   }
 }

templates/main.php

@@ -6,12 +6,12 @@ vendor_script('quicknotes', 'medium-editor');
 vendor_style('quicknotes', 'medium-editor');
 vendor_script('quicknotes', 'autolist');
 vendor_script('quicknotes', 'lozad');
-vendor_script('quicknotes', 'colorPick');
-vendor_style('quicknotes', 'colorPick');
 script('quicknotes', 'qn-dialogs');
+script('quicknotes', 'qn-colorpick');
 script('quicknotes', 'script');
 style('quicknotes', 'style');
 style('quicknotes', 'medium');
+style('quicknotes', 'qn-colorpick');
 ?>
 
 	<div id="app-navigation">