diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..804a1a6 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +build +js/templates.js +vendor \ No newline at end of file diff --git a/Makefile b/Makefile index 3db1d2c..4769878 100644 --- a/Makefile +++ b/Makefile @@ -72,6 +72,9 @@ depsmin: wget https://github.com/varun-raj/medium-editor-autolist/raw/master/dist/autolist.min.js mv autolist.min.js vendor/autolist.js +js-templates: + handlebars js/templates -f js/templates.js + clean: rm -rf $(build_dir) diff --git a/appinfo/info.xml b/appinfo/info.xml index 44365d6..71d855d 100644 --- a/appinfo/info.xml +++ b/appinfo/info.xml @@ -17,6 +17,6 @@ https://user-images.githubusercontent.com/733715/38871311-dac5a80a-4226-11e8-961d-63b276380b6b.png https://user-images.githubusercontent.com/733715/38871255-b07a7d5a-4226-11e8-8403-650cbea50be0.png - + diff --git a/js/script.js b/js/script.js index 219a5c4..326a164 100644 --- a/js/script.js +++ b/js/script.js @@ -5,7 +5,7 @@ * later. See the COPYING file. * * @author Matias De lellis - * @copyright Matias De lellis 2016-2018 + * @copyright Matias De lellis 2016-2019 */ (function (OC, window, $, undefined) { @@ -13,15 +13,12 @@ $(document).ready(function () { -var translations = { - newNote: $('#new-note-string').text() -}; - // this notes object holds all our notes var Notes = function (baseUrl) { this._baseUrl = baseUrl; this._notes = []; this._activeNote = undefined; + this._loaded = false; }; Notes.prototype = { @@ -119,12 +116,16 @@ Notes.prototype = { $.get(this._baseUrl).done(function (notes) { self._activeNote = undefined; self._notes = notes.reverse(); + self._loaded = true; deferred.resolve(); }).fail(function () { deferred.reject(); }); return deferred.promise(); }, + isLoaded: function () { + return this._loaded; + }, updateActive: function (title, content, color) { var note = this.getActive(); note.title = title; @@ -290,10 +291,19 @@ View.prototype = { return digits[1] + '#' + rgb.toString(16).toUpperCase(); }, renderContent: function () { - var source = $('#content-tpl').html(); - var template = Handlebars.compile(source); - var html = template({notes: this._notes.getAll()}); + // Remove all event handlers to prevent double events. + $("#app-content").off(); + var html = Handlebars.templates['notes']({ + loaded: this._notes.isLoaded(), + notes: this._notes.getAll(), + cancelTxt: t('quicknotes', 'Cancel'), + saveTxt: t('quicknotes', 'Save'), + loadingMsg: t('quicknotes', 'Looking for your notes'), + loadingIcon: OC.imagePath('core', 'loading.gif'), + emptyMsg: t('quicknotes', 'Nothing here. Take your first quick notes'), + emptyIcon: OC.imagePath('quicknotes', 'app'), + }); $('#div-content').html(html); // Init masonty grid to notes. @@ -323,7 +333,7 @@ View.prototype = { // Open notes when clicking them. $("#app-content").on("click", ".quicknote", function (event) { - event.stopPropagation(); // Not work so need fix on next binding.. + event.stopPropagation(); if($(this).hasClass('shared')) return; //shares don't allow editing var modalnote = $("#modal-note-editable .quicknote"); @@ -336,12 +346,8 @@ View.prototype = { }); // Cancel when click outside the modal. - $(".modal-note-background").click(function (event) { - /* stopPropagation() not work with .on() binings. */ - if (!$(event.target).is(".modal-note-background")) { - event.stopPropagation(); - return; - } + $('#app-content').on('click', '.modal-note-background', function (event) { + event.stopPropagation(); self.cancelEdit(); }); @@ -355,24 +361,33 @@ View.prototype = { // Remove note icon var self = this; $('#app-content').on("click", ".icon-delete-note", function (event) { + event.stopPropagation(); + var note = $(this).parent().parent(); var id = parseInt(note.data('id'), 10); - event.stopPropagation(); - self._notes.load(id); - self._notes.removeActive().done(function () { - if (self._notes.length() > 0) { - $(".notes-grid").isotope('remove', note.parent()) - .isotope('layout'); - self.showAll(); - self.renderNavigation(); - } else { - self.render(); - } - }).fail(function () { - alert('Could not delete note, not found'); - }); + OC.dialogs.confirm( + t('quicknotes', 'Are you sure you want to delete the note?'), + t('quicknotes', 'Delete note'), + function(result) { + if (result) { + self._notes.removeActive().done(function () { + if (self._notes.length() > 0) { + $(".notes-grid").isotope('remove', note.parent()) + .isotope('layout'); + self.showAll(); + self.renderNavigation(); + } else { + self.render(); + } + }).fail(function () { + alert('Could not delete note, not found'); + }); + } + }, + true + ); }); /* @@ -468,7 +483,8 @@ View.prototype = { // handle cancel editing notes. $('#modal-note-div #cancel-button').click(function (event) { - self.cancelEdit(); + event.stopPropagation(); + self.cancelEdit(); }); // Handle save note @@ -510,9 +526,14 @@ View.prototype = { }); }, renderNavigation: function () { - var source = $('#navigation-tpl').html(); - var template = Handlebars.compile(source); - var html = template({colors: this._notes.getColors(), notes: this._notes.getAll()}); + var html = Handlebars.templates['navigation']({ + colors: this._notes.getColors(), + notes: this._notes.getAll(), + newNoteTxt: t('quicknotes', 'New note'), + allNotesTxt: t('quicknotes', 'All notes'), + colorsTxt: t('quicknotes', 'Colors'), + notesTxt: t('quicknotes', 'Notes'), + }); $('#app-navigation ul').html(html); @@ -544,26 +565,25 @@ View.prototype = { var self = this; $('#new-note').click(function () { var note = { - title: translations.newNote, + title: t('quicknotes', 'New note'), content: '', color: '#F7EB96' }; - self._notes.create(note).done(function() { if (self._notes.length() > 1) { note = self._notes.getActive(); - var $notehtml = $("
" + - "
" + - "
" + - "
" + - "
" + note.title + "
" + - "
" + - "
" + note.content + "
" + - "
" + - "
"); - $(".notes-grid").prepend( $notehtml ) + var $notehtml = $(Handlebars.templates['note-item']({ + color: note.color, + id: note.id, + title: note.title, + content: note.content, + timestamp: note.timestamp, + })); + + $(".notes-grid").prepend($notehtml) + .isotope('prepended', $notehtml) .isotope({ filter: '*'}) - .isotope( 'prepended', $notehtml); + .isotope('layout'); self._notes.unsetActive(); self.renderNavigation(); } else { @@ -579,28 +599,14 @@ View.prototype = { $(this).toggleClass("open"); }); + $('#colors-folder > ul').click(function (event) { + event.stopPropagation(); + }); + $('#notes-folder').click(function () { $(this).toggleClass("open"); }); - // show app menu - $('#app-navigation .app-navigation-entry-utils-menu-button').click(function () { - var entry = $(this).closest('.note'); - entry.find('.app-navigation-entry-menu').toggleClass('open'); - }); - - // delete a note - $('#app-navigation .note .delete').click(function () { - var entry = $(this).closest('.note'); - entry.find('.app-navigation-entry-menu').removeClass('open'); - - self._notes.removeActive().done(function () { - self.render(); - }).fail(function () { - alert('Could not delete note, not found'); - }); - }); - // show a note $('#app-navigation .note > a').click(function (event) { event.stopPropagation(); @@ -639,44 +645,46 @@ View.prototype = { } }; -var timeoutID = null; -function filter (query) { - window.clearTimeout(timeoutID); - timeoutID = window.setTimeout(function() { - if (query) { - query = query.toLowerCase(); - $('.notes-grid').isotope({ filter: function() { +function search (query) { + if (query) { + query = query.toLowerCase(); + $('.notes-grid').isotope({ + filter: function() { var title = $(this).find(".note-title").html().toLowerCase(); if (title.search(query) >= 0) return true; + var content = $(this).find(".note-content").html().toLowerCase(); if (content.search(query) >= 0) return true; - return false; - }}); - } else { - $('.notes-grid').isotope({ filter: '*'}); - } - }, 500); -}; -var SearchProxy = { - attach: function(search) { - search.setFilter('quicknotes', this.filterProxy); - }, - filterProxy: function(query) { - filter(query); - }, - setFilter: function(newFilter) { - filter = newFilter; + return false; + } + }); + } else { + $('.notes-grid').isotope({ filter: '*'}); } }; -SearchProxy.setFilter(filter); -OC.Plugins.register('OCA.Search', SearchProxy); +new OCA.Search(search, function() { + search(''); +}); + +/* + * Create modules + */ var notes = new Notes(OC.generateUrl('/apps/quicknotes/notes')); var view = new View(notes); + +/* + * Render loading view + */ +view.renderContent(); + +/* + * Loading notes and render view. + */ notes.loadAll().done(function () { view.render(); }).fail(function () { diff --git a/js/templates/navigation.handlebars b/js/templates/navigation.handlebars new file mode 100644 index 0000000..e358d66 --- /dev/null +++ b/js/templates/navigation.handlebars @@ -0,0 +1,33 @@ +
+
+ +
+
+
  • + + {{allNotesTxt}} + +
    • +
  • + + {{colorsTxt}} + +
    • +
  • + + {{notesTxt}} + +
    • diff --git a/js/templates/note-item.handlebars b/js/templates/note-item.handlebars new file mode 100644 index 0000000..4d775fc --- /dev/null +++ b/js/templates/note-item.handlebars @@ -0,0 +1,30 @@ +
    +
    + {{#if isshared}} +
    +
    +
    + {{{ title }}} +
    +
    +
    + {{{ content }}} +
    + {{else}} +
    +
    + +
    + {{{ title }}} +
    +
    +
    + {{{ content }}} +
    + {{/if}} +
    +
    \ No newline at end of file diff --git a/templates/part.note-modal-editable.php b/js/templates/notes.handlebars similarity index 50% rename from templates/part.note-modal-editable.php rename to js/templates/notes.handlebars index 9d51dff..4111642 100644 --- a/templates/part.note-modal-editable.php +++ b/js/templates/notes.handlebars @@ -1,3 +1,38 @@ +{{#if notes}} +
    + {{#each notes}} +
    +
    + {{#if isshared}} +
    +
    +
    + {{{ title }}} +
    +
    +
    + {{{ content }}} +
    + {{else}} +
    +
    + +
    + {{{ title }}} +
    +
    +
    + {{{ content }}} +
    + {{/if}} +
    +
    + {{/each}} +
    -
    +{{else if loaded}} +
    +
    +

    + {{ emptyMsg }} +

    +
    +{{else}} +
    +
    +

    + {{loadingMsg}} +

    + +
    +{{/if}} diff --git a/templates/main.php b/templates/main.php index 7c35751..8a9780b 100644 --- a/templates/main.php +++ b/templates/main.php @@ -1,5 +1,6 @@ - {{#if notes}} -
    - {{#each notes}} - inc('part.note')); ?> - {{/each}} -
    - inc('part.note-modal-editable')); ?> - {{else}} -
    -
    - t('Nothing here. Take your quick notes.')); ?> -
    - {{/if}} -
    diff --git a/templates/part.navigation.php b/templates/part.navigation.php index 7034eb1..3052017 100644 --- a/templates/part.navigation.php +++ b/templates/part.navigation.php @@ -1,50 +1 @@ - - - - - \ No newline at end of file diff --git a/templates/part.note.php b/templates/part.note.php deleted file mode 100644 index bae5767..0000000 --- a/templates/part.note.php +++ /dev/null @@ -1,22 +0,0 @@ -
    -
    - {{#if isshared}} -
    -
    -
    {{{ title }}}
    -
    -
    {{{ content }}}
    - {{else}} -
    -
    - -
    {{{ title }}}
    -
    -
    {{{ content }}}
    - {{/if}} -
    -