Minz/quicknotes
1
0
Fork 0
mirror of https://github.com/JanGross/quicknotes.git synced 2025-12-01 15:47:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #19 from matiasdelellis/NC15

Browse Source 
Move to precompiled handlebars templates. and a lot of fixes..
This commit is contained in:
matiasdelellis
2019-02-12 21:12:08 -03:00
committed by GitHub
parent d1d1f1a2f6 0b28bc4d13
commit 288ddb0a98
11 changed files with 228 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored Normal file
View File

@@ -0,0 +1,3 @@
build
js/templates.js
vendor

3
Makefile
View File

@@ -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)

2
appinfo/info.xml
View File

@@ -17,6 +17,6 @@
<screenshot small-thumbnail="https://user-images.githubusercontent.com/733715/38871311-dac5a80a-4226-11e8-961d-63b276380b6b.png">https://user-images.githubusercontent.com/733715/38871311-dac5a80a-4226-11e8-961d-63b276380b6b.png</screenshot>
<screenshot>https://user-images.githubusercontent.com/733715/38871255-b07a7d5a-4226-11e8-8403-650cbea50be0.png</screenshot>
<dependencies>
<nextcloud min-version="14" max-version="14" />
<nextcloud min-version="14" max-version="15"/>
</dependencies>
</info>

146
js/script.js
View File

@@ -5,7 +5,7 @@
* later. See the COPYING file.
*
* @author Matias De lellis <mati86dl@gmail.com>
* @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")) {
$('#app-content').on('click', '.modal-note-background', function (event) {
event.stopPropagation();
return;
}
self.cancelEdit();
});
@@ -355,12 +361,17 @@ 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);
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())
@@ -373,6 +384,10 @@ View.prototype = {
}).fail(function () {
alert('Could not delete note, not found');
});
}
},
true
);
});
/*
@@ -468,6 +483,7 @@ View.prototype = {
// handle cancel editing notes.
$('#modal-note-div #cancel-button').click(function (event) {
event.stopPropagation();
self.cancelEdit();
});
@@ -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 = $("<div class=\"note-grid-item\">" +
" <div class=\"quicknote noselect\" style=\"background-color: " + note.color + "\" data-id=\"" + note.id + "\">" +
" <div>" +
" <div class=\"icon-delete hide-delete-icon icon-delete-note\" title=\"Delete\"></div>" +
" <div class=\"note-title\">" + note.title + "</div>" +
" </div>" +
" <div class=\"note-content\">" + note.content + "</div>" +
" </div>" +
"</div>");
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() {
function search (query) {
if (query) {
query = query.toLowerCase();
$('.notes-grid').isotope({ filter: function() {
$('.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;
}
};
new OCA.Search(search, function() {
search('');
});
SearchProxy.setFilter(filter);
OC.Plugins.register('OCA.Search', SearchProxy);
/*
* 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 () {

33
js/templates/navigation.handlebars Normal file
View File

@@ -0,0 +1,33 @@
<div id="new-note-fixed">
<div>
<button type="button" id="new-note" class="icon-add">{{newNoteTxt}}</button>
</div>
</div>
<li id="all-notes">
<a href="#" class="icon-home svg">
{{allNotesTxt}}
</a>
</li>
<li id="colors-folder" class="collapsible open">
<button class="collapse"></button>
<a href="#" class="icon-search svg">{{colorsTxt}}</a>
<ul>
<li style="display: flex; justify-content: center;">
<button class="circle-toolbar icon-checkmark any-color"></button>
{{#each colors}}
<button class="circle-toolbar" style="background-color: {{color}} "></button>
{{/each}}
</li>
</ul>
</li>
<li id="notes-folder" class="collapsible open">
<button class="collapse"></button>
<a href="#" class="icon-folder svg">{{notesTxt}}</a>
<ul>
{{#each notes}}
<li class="note with-menu {{#if active}}active{{/if}}" data-id="{{ id }}">
<a href="#">{{{ title }}}</a>
</li>
{{/each}}
</ul>
</li>

30
js/templates/note-item.handlebars Normal file
View File

@@ -0,0 +1,30 @@
<div class="note-grid-item">
<div class="quicknote noselect {{#if active}}note-active{{/if}} {{#if isshared}}shared{{/if}} {{#if sharedwith}}shareowner{{/if}}" style="background-color: {{color}}" data-id="{{ id }}" data-timestamp="{{ timestamp }}" >
{{#if isshared}}
<div>
<div class='icon-share shared-title' title="Shared by {{ userid }}"></div>
<div class='note-title'>
{{{ title }}}
</div>
</div>
<div id='content' class='note-content'>
{{{ content }}}
</div>
{{else}}
<div>
<div class="icon-delete hide-delete-icon icon-delete-note" title="Delete"></div>
<!--
{{#if sharedwith}}
<div class='icon-share shared-title-owner' title="Shared with {{ sharedwith }}"></div>
{{/if}}
-->
<div class='note-title'>
{{{ title }}}
</div>
</div>
<div class='note-content'>
{{{ content }}}
</div>
{{/if}}
</div>
</div>

61
templates/part.note-modal-editable.php → js/templates/notes.handlebars
View File

@@ -1,3 +1,38 @@
{{#if notes}}
<div class="notes-grid">
{{#each notes}}
<div class="note-grid-item">
<div class="quicknote noselect {{#if active}}note-active{{/if}} {{#if isshared}}shared{{/if}} {{#if sharedwith}}shareowner{{/if}}" style="background-color: {{color}}" data-id="{{ id }}" data-timestamp="{{ timestamp }}" >
{{#if isshared}}
<div>
<div class='icon-share shared-title' title="Shared by {{ userid }}"></div>
<div class='note-title'>
{{{ title }}}
</div>
</div>
<div id='content' class='note-content'>
{{{ content }}}
</div>
{{else}}
<div>
<div class="icon-delete hide-delete-icon icon-delete-note" title="Delete"></div>
<!--
{{#if sharedwith}}
<div class='icon-share shared-title-owner' title="Shared with {{ sharedwith }}"></div>
{{/if}}
-->
<div class='note-title'>
{{{ title }}}
</div>
</div>
<div class='note-content'>
{{{ content }}}
</div>
{{/if}}
</div>
</div>
{{/each}}
</div>
<div id="modal-note-div" class="hide-modal-note modal-note-background">
<div class="modal-content">
<div class="quicknote note-active" style="background-color: #F7EB96" data-id="-1">
@@ -25,11 +60,33 @@
<!--
<button id='share-button'><?php p($l->t('Share'));?></button>
-->
<button id='cancel-button'><?php p($l->t('Cancel')); ?></button>
<button id='save-button'><?php p($l->t('Save')); ?></button>
<button id='cancel-button'>
{{ cancelTxt }}
</button>
<button id='save-button'>
{{ saveTxt }}
</button>
</div>
<div style="clear: both;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
{{else if loaded}}
<div class="emptycontent">
<div class="icon-edit svg"></div>
<h2>
{{ emptyMsg }}
</h2>
</div>
{{else}}
<div class="emptycontent">
<div class="icon-edit svg"></div>
<h2>
{{loadingMsg}}
</h2>
<img class="loadingimport" src="{{loadingIcon}}"/>
</div>
{{/if}}

1
templates/main.php
View File

@@ -1,5 +1,6 @@
<?php
vendor_script('quicknotes', 'handlebars');
script('quicknotes', 'templates');
vendor_script('quicknotes', 'isotope.pkgd');
vendor_script('quicknotes', 'medium-editor');
vendor_style('quicknotes', 'medium-editor');

15
templates/part.content.php
View File

@@ -1,16 +1 @@
<script id="content-tpl" type="text/x-handlebars-template">
{{#if notes}}
<div class="notes-grid">
{{#each notes}}
<?php print_unescaped($this->inc('part.note')); ?>
{{/each}}
</div>
<?php print_unescaped($this->inc('part.note-modal-editable')); ?>
{{else}}
<div class="emptycontent">
<div class="icon-folder"></div>
<?php p($l->t('Nothing here. Take your quick notes.')); ?>
</div>
{{/if}}
</script>
<div id="div-content"></div>

49
templates/part.navigation.php
View File

@@ -1,50 +1 @@
<!-- translation strings -->
<div style="display:none" id="new-note-string"><?php p($l->t('New note')); ?></div>
<script id="navigation-tpl" type="text/x-handlebars-template">
<div id="new-note-fixed">
<div><button type="button" id="new-note" class="icon-add"><?php p($l->t('New note'));?></button></div>
</div>
<li id="all-notes"><a href="#" class="icon-home svg"><?php p($l->t('All notes')); ?></a></li>
<!--
<li id="shared-with-you"><a href="#" class="icon-share svg"><?php p($l->t('Shared with you')); ?></a></li>
<li id="shared-by-you"><a href="#" class="icon-share svg"><?php p($l->t('Shared with others')); ?></a></li>
-->
<li id="colors-folder" class="collapsible open">
<button class="collapse"></button>
<a href="#" class="icon-search svg"><?php p($l->t('Colors')); ?></a>
<ul>
<li style="display: flex; justify-content: center;">
<button class="circle-toolbar icon-checkmark any-color"></button>
{{#each colors}}
<button class="circle-toolbar" style="background-color: {{color}} "></button>
{{/each}}
</li>
</ul>
</li>
<li id="notes-folder" class="collapsible open">
<button class="collapse"></button>
<a href="#" class="icon-folder svg"><?php p($l->t('Notes')); ?></a>
<ul>
{{#each notes}}
<li class="note with-menu {{#if active}}active{{/if}}" data-id="{{ id }}">
<a href="#">{{{ title }}}</a>
<!--
<div class="app-navigation-entry-utils">
<ul>
<li class="app-navigation-entry-utils-menu-button svg"><button></button></li>
</ul>
</div>
<div class="app-navigation-entry-menu">
<ul>
<li><button class="delete icon-delete svg" title="delete"></button></li>
</ul>
</div>
-->
</li>
{{/each}}
</ul>
</li>
</script>
<ul class="with-icon"></ul>

22
templates/part.note.php
View File

@@ -1,22 +0,0 @@
<div class="note-grid-item">
<div class="quicknote noselect {{#if active}}note-active{{/if}} {{#if isshared}}shared{{/if}} {{#if sharedwith}}shareowner{{/if}}" style="background-color: {{color}}" data-id="{{ id }}" data-timestamp="{{ timestamp }}" >
{{#if isshared}}
<div>
<div class='icon-share shared-title' title="Shared by {{ userid }}"></div>
<div class='note-title'>{{{ title }}}</div>
</div>
<div id='content' class='note-content'>{{{ content }}}</div>
{{else}}
<div>
<div class="icon-delete hide-delete-icon icon-delete-note" title="Delete"></div>
<!--
{{#if sharedwith}}
<div class='icon-share shared-title-owner' title="Shared with {{ sharedwith }}"></div>
{{/if}}
-->
<div class='note-title'>{{{ title }}}</div>
</div>
<div class='note-content'>{{{ content }}}</div>
{{/if}}
</div>
</div>