Merge pull request #83 from matiasdelellis/nc24

Enable NC24 and update tests..
2025-12-01 07:37:18 +01:00 · 2022-05-07 09:44:54 -03:00
parent d245ce8dc0 a92e10573d
commit c0fae81e7e
15 changed files with 367 additions and 133 deletions
--- a/.github/workflows/lint.yml
+++ b/.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
--- a/.github/workflows/static-analysis.yml
+++ b/.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
--- a/CHANGELOG.md
+++ b/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.
--- a/4
+++ b/4
@@ -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
--- a/appinfo/info.xml
+++ b/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>
--- a/composer.json
+++ b/composer.json
@@ -1,8 +1,8 @@
 {
    "require-dev": {
        "psalm/phar": "^4.10",
-        "christophwurst/nextcloud": "^21.0",
-        "psr/container": "^2.0"
+        "christophwurst/nextcloud": "^22.0",
+        "psr/container": "^1.0"
    },
    "scripts": {
        "lint": "find . -name \\*.php -not -path './vendor/*' -print0 | xargs -0 -n1 php -l",
--- a/css/qn-colorpick.scss
+++ b/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);
+}
--- a/css/style.scss
+++ b/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;
-}
--- a/js/qn-colorpick.js
+++ b/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);
+        }
+    };
+}
--- a/js/script.js
+++ b/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,7 +282,8 @@ View.prototype = {
        lozad('.attach-preview').observe();

        // Init masonty grid to notes.
-        $('.notes-grid').isotope({
+        if (this._notes.isLoaded() && this._notes.length() > 0) {
+            this._isotope = new Isotope(document.querySelector('.notes-grid'), {
                itemSelector: '.note-grid-item',
                layoutMode: 'masonry',
                masonry: {
@@ -295,6 +300,11 @@ View.prototype = {
                }
            });

+            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())
-                                                    .isotope('layout');
+                                    self._isotope.remove(gridnote.parent())
+                                    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())
-                                                    .isotope('layout');
+                                    self._isotope.remove(gridnote.parent())
+                                    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 .icon-toggle-background').click(function (event) {
-            $(this).parent().click();
+        $('#modal-note-div').on("click", "#color-button", function (event) {
+            event.stopPropagation();
+            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)
-                                    .isotope('prepended', $notehtml)
-                                    .isotope('layout');
+                    $('.notes-grid').prepend($notehtml);
+                    self._isotope.prepended($notehtml);
+                    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() {
-                return $(this).children().hasClass('shared');
-            } });
+            self._isotope.arrange({
+                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() {
-                return $(this).children().hasClass('shareowner');
-            } });
+            self._isotope.arrange({
+                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({
-                'initialColor': 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);
-                }
-            });
+            $("#modal-note-div .quicknote").css("background-color", color);
+            this._colorPick.select(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,
-                cleanPastedHTML: false
+                forcePlainText: true
            },
            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({
-            filter: function() {
-                return noteId == parseInt($(this).children().data('id'), 10);
+        this._isotope.arrange({
+            filter: function(elem) {
+                return noteId == elem.firstElementChild.getAttribute('data-id');
            }
        });
    },
    _filterTag: function (tagId) {
-        $('.notes-grid').isotope({
-            filter: function() {
+        this._isotope.arrange({
+            filter: function(elem) {
                var match = false;
-                $(this).find(".slim-tag").siblings().addBack().each(function() {
-                    var id = parseInt($(this).attr('tag-id'), 10);
-                    if (tagId == id)
+                var tags = elem.querySelectorAll('.slim-tag');
+                tags.forEach (function(tagItem) {
+                    if (tagId == tagItem.getAttribute('tag-id'))
                        match = true;
                });
                return match;
@@ -1048,9 +1059,9 @@ View.prototype = {
        });
    },
    _filterColor: function (color) {
-        $('.notes-grid').isotope({
-            filter: function() {
-                return color == $(this).children().css("background-color");
+        this._isotope.arrange({
+            filter: function(elem) {
+                return color == elem.firstElementChild.style["background-color"];
            }
        });
    },
--- a/js/templates/attachts.handlebars
+++ b/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}}
--- a/js/templates/note-item.handlebars
+++ b/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>
--- a/js/templates/notes.handlebars
+++ b/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}}
--- a/package-lock.json
+++ b/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",
-      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.5.1.tgz",
-      "integrity": "sha512-C29UoFzHe9yM61lOsIlCE5/mQVGrnIOrOq7maQl76L7tYPCgC1og0Ajt6uWnX4ZTxBPnjw+CUvawphwCfJgUnA==",
+      "version": "4.7.7",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.7.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
-      "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8="
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
-      "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc="
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
+      "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus="
    }
  }
 }
--- a/templates/main.php
+++ b/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">