Minz/quicknotes
1
0
Fork 0
mirror of https://github.com/JanGross/quicknotes.git synced 2025-11-30 23:37:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

Move to precompiled handlebars templates.

Browse Source 
In Nextcloud 15 the default Content Security Policy disallows unsafe
eval expressions, so Handlebars templates can no longer be compiled at
runtime.

Fix issue #18
This commit is contained in:
Matias De lellis
2019-02-12 12:29:11 -03:00
parent d1d1f1a2f6
commit 6bac24030d
10 changed files with 105 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
js/script.js
View File

@@ -290,10 +290,12 @@ 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()});
var html = Handlebars.templates['notes']({
notes: this._notes.getAll(),
cancelTxt: t('quicknotes', 'Cancel'),
saveTxt: t('quicknotes', 'Save'),
emptyTxt: t('quicknotes', 'Nothing here. Take your quick notes.'),
});
$('#div-content').html(html);
// Init masonty grid to notes.
@@ -510,9 +512,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);

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>

82
js/templates/notes.handlebars Normal file
View File

@@ -0,0 +1,82 @@
{{#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">
<div>
<div contenteditable="true" id='title-editable' class='note-title'></div>
</div>
<div contenteditable="true" id='content-editable' class='note-content'></div>
<div class="note-options">
<!--
<select class="note-share-select" name="users[]" multiple="multiple"></select>
-->
<div class="note-toolbar">
<a href="#" class="circle-toolbar" style="background-color: #F7EB96"></a>
<a href="#" class="circle-toolbar" style="background-color: #88B7E3"></a>
<a href="#" class="circle-toolbar" style="background-color: #C1ECB0"></a>
<a href="#" class="circle-toolbar" style="background-color: #BFA6E9"></a>
<a href="#" class="circle-toolbar" style="background-color: #DAF188"></a>
<a href="#" class="circle-toolbar" style="background-color: #FF96AC"></a>
<a href="#" class="circle-toolbar" style="background-color: #FCF66F"></a>
<a href="#" class="circle-toolbar" style="background-color: #F2F1EF"></a>
<a href="#" class="circle-toolbar" style="background-color: #C1D756"></a>
<a href="#" class="circle-toolbar" style="background-color: #CECECE"></a>
</div>
<div class="save-button">
<!--
<button id='share-button'><?php p($l->t('Share'));?></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}}
<div class="emptycontent">
<div class="icon-folder"></div>
{{ emptyMsg }}
</div>
{{/if}}