mirror of
https://github.com/JanGross/quicknotes.git
synced 2025-11-30 23:37:16 +01:00
Attachments... .
This commit is contained in:
Matias De lellis
73
js/script.js
73
js/script.js
@@ -165,6 +165,7 @@ View.prototype = {
|
||||
this._editablePinned(note.ispinned);
|
||||
this._editableColor(note.color);
|
||||
this._editableTags(note.tags);
|
||||
this._editableAttachts(note.attachts);
|
||||
|
||||
// Create medium div editor.
|
||||
this._initEditor();
|
||||
@@ -178,6 +179,7 @@ View.prototype = {
|
||||
id: this._editableId(),
|
||||
title: this._editableTitle(),
|
||||
content: this._editableContent(),
|
||||
attachts: this._editableAttachts(),
|
||||
color: this._editableColor(),
|
||||
pinned: this._editablePinned(),
|
||||
tags: this._editableTags()
|
||||
@@ -188,6 +190,9 @@ View.prototype = {
|
||||
var noteHtml = $(Handlebars.templates['note-item'](note)).children();
|
||||
$('.notes-grid [data-id=' + note.id + ']').replaceWith(noteHtml);
|
||||
|
||||
self._resizeAttachtsGrid();
|
||||
lozad('.attach-preview').observe();
|
||||
|
||||
// Hide modal editor and reset it.
|
||||
self._hideEditor(note.id);
|
||||
self._destroyEditor();
|
||||
@@ -221,8 +226,13 @@ View.prototype = {
|
||||
emptyMsg: t('quicknotes', 'Nothing here. Take your first quick notes'),
|
||||
emptyIcon: OC.imagePath('quicknotes', 'app'),
|
||||
});
|
||||
|
||||
$('#div-content').html(html);
|
||||
|
||||
// TODO: Move within handlebars template
|
||||
this._resizeAttachtsGrid();
|
||||
lozad('.attach-preview').observe();
|
||||
|
||||
// Init masonty grid to notes.
|
||||
$('.notes-grid').isotope({
|
||||
itemSelector: '.note-grid-item',
|
||||
@@ -285,7 +295,7 @@ View.prototype = {
|
||||
$('#notes-grid-div').on("click", ".icon-delete-note", function (event) {
|
||||
event.stopPropagation();
|
||||
|
||||
var gridnote = $(this).parent().parent();
|
||||
var gridnote = $(this).parent().parent().parent();
|
||||
var id = parseInt(gridnote.data('id'), 10);
|
||||
|
||||
var note = self._notes.read(id);
|
||||
@@ -317,7 +327,7 @@ View.prototype = {
|
||||
event.stopPropagation();
|
||||
|
||||
var icon = $(this);
|
||||
var gridNote = icon.parent().parent();
|
||||
var gridNote = icon.parent().parent().parent();
|
||||
var id = parseInt(gridNote.data('id'), 10);
|
||||
|
||||
var note = self._notes.read(id);
|
||||
@@ -340,7 +350,7 @@ View.prototype = {
|
||||
event.stopPropagation();
|
||||
|
||||
var icon = $(this);
|
||||
var gridNote = icon.parent().parent();
|
||||
var gridNote = icon.parent().parent().parent();
|
||||
var id = parseInt(gridNote.data('id'), 10);
|
||||
|
||||
var note = self._notes.read(id);
|
||||
@@ -437,6 +447,26 @@ View.prototype = {
|
||||
$('#modal-note-div #tag-button').trigger( "click");
|
||||
});
|
||||
|
||||
// handle attach button.
|
||||
$('#modal-note-div #attach-button').click(function (event) {
|
||||
event.stopPropagation();
|
||||
OC.dialogs.filepicker(t('quicknotes', 'Select file to attach'), function(datapath, returntype) {
|
||||
OC.Files.getClient().getFileInfo(datapath).then((status, fileInfo) => {
|
||||
var attach = {
|
||||
file_id: fileInfo.id,
|
||||
preview_url: OC.generateUrl('core') + '/preview.png?file=' + encodeURI(datapath) + '&x=512&y=512'
|
||||
};
|
||||
|
||||
var attachts = self._editableAttachts();
|
||||
attachts.push(attach);
|
||||
|
||||
self._editableAttachts(attachts);
|
||||
}).fail(() => {
|
||||
console.log("ERRORRR");
|
||||
});
|
||||
}, false, '*', true, OC.dialogs.FILEPICKER_TYPE_CHOOSE)
|
||||
});
|
||||
|
||||
// handle tags button.
|
||||
$('#modal-note-div #tag-button').click(function (event) {
|
||||
event.stopPropagation();
|
||||
@@ -680,6 +710,43 @@ View.prototype = {
|
||||
$("#modal-note-div .note-tags").replaceWith(html);
|
||||
}
|
||||
},
|
||||
_editableAttachts: function(attachts) {
|
||||
if (attachts === undefined) {
|
||||
return $("#modal-note-div .note-attach").toArray().map(function (value) {
|
||||
return {
|
||||
file_id: value.getAttribute('attach-file-id'),
|
||||
preview_url: value.getAttribute('data-background-image')
|
||||
};
|
||||
});
|
||||
} else {
|
||||
var html = Handlebars.templates['attachts']({ attachts: attachts});
|
||||
$("#modal-note-div .note-attachts").replaceWith(html);
|
||||
|
||||
lozad('.attach-preview').observe();
|
||||
|
||||
var sAttachts = $('#modal-note-div .note-attach-grid');
|
||||
sAttachts.parent().css('height', (500/sAttachts.length) + 'px');
|
||||
sAttachts.first().children().css('border-top-left-radius', '8px');
|
||||
sAttachts.each(function(index) {
|
||||
$(this).css('width', (100/sAttachts.length) + '%');
|
||||
$(this).css('left', (100/sAttachts.length)*index + '%');
|
||||
});
|
||||
sAttachts.last().children().css('border-top-right-radius', '8px');
|
||||
}
|
||||
},
|
||||
_resizeAttachtsGrid: function() {
|
||||
var attachtsgrids = $('#notes-grid-div .note-attachts');
|
||||
attachtsgrids.each(function() {
|
||||
var sAttachts = $(this).children('.note-attach-grid');
|
||||
sAttachts.parent().css('height', (250/sAttachts.length) + 'px');
|
||||
sAttachts.first().children().css('border-top-left-radius', '8px');
|
||||
sAttachts.each(function(index) {
|
||||
$(this).css('width', (100/sAttachts.length) + '%');
|
||||
$(this).css('left', (100/sAttachts.length)*index + '%');
|
||||
});
|
||||
sAttachts.last().children().css('border-top-right-radius', '8px');
|
||||
});
|
||||
},
|
||||
_initEditor: function() {
|
||||
var modalcontent = $('#modal-note-div #content-editable');
|
||||
var editor = new MediumEditor(modalcontent, {
|
||||
|
||||
7
js/templates/attachts.handlebars
Normal file
7
js/templates/attachts.handlebars
Normal file
@@ -0,0 +1,7 @@
|
||||
<div class='note-attachts'>
|
||||
{{#each attachts}}
|
||||
<div class='note-attach-grid'>
|
||||
<div class="attach-preview note-attach" attach-file-id="{{file_id}}" data-background-image="{{preview_url}}"/>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
@@ -11,30 +11,41 @@
|
||||
{{{ content }}}
|
||||
</div>
|
||||
{{else}}
|
||||
<div>
|
||||
{{#if ispinned}}
|
||||
<div class="icon-header-note icon-pinned fixed-header-icon" title="{{t "quicknotes" "Unpin note"}}"></div>
|
||||
{{else}}
|
||||
<div class="icon-header-note icon-pin hide-header-icon" title="{{t "quicknotes" "Pin note"}}"></div>
|
||||
{{/if}}
|
||||
<div class="icon-header-note icon-delete hide-header-icon icon-delete-note" title="{{t "quicknotes" "Delete note"}}"></div>
|
||||
<!--
|
||||
{{#if sharedwith}}
|
||||
<div class='icon-share shared-title-owner' title="Shared with {{ sharedwith }}"></div>
|
||||
{{/if}}
|
||||
-->
|
||||
<div class='note-title'>
|
||||
{{{ title }}}
|
||||
<div class='note-header'>
|
||||
<div class='note-attachts'>
|
||||
{{#each attachts}}
|
||||
<div class='note-attach-grid'>
|
||||
<div class="attach-preview note-attach" attach-file-id="{{file_id}}" data-background-image="{{preview_url}}"/>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
<div class='note-content'>
|
||||
{{{ content }}}
|
||||
</div>
|
||||
<div class='note-tags'>
|
||||
{{#each tags}}
|
||||
<div class="icon-tag slim-tag" tag-id="{{ id }}">{{{ name }}}</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class='note-body'>
|
||||
<div>
|
||||
{{#if ispinned}}
|
||||
<div class="icon-header-note icon-pinned fixed-header-icon" title="{{t "quicknotes" "Unpin note"}}"></div>
|
||||
{{else}}
|
||||
<div class="icon-header-note icon-pin hide-header-icon" title="{{t "quicknotes" "Pin note"}}"></div>
|
||||
{{/if}}
|
||||
<div class="icon-header-note icon-delete hide-header-icon icon-delete-note" title="{{t "quicknotes" "Delete note"}}"></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>
|
||||
<div class='note-tags'>
|
||||
{{#each tags}}
|
||||
<div class="icon-tag slim-tag" tag-id="{{ id }}">{{{ name }}}</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
@@ -14,31 +14,42 @@
|
||||
{{{ content }}}
|
||||
</div>
|
||||
{{else}}
|
||||
<div>
|
||||
{{#if ispinned}}
|
||||
<div class="icon-header-note icon-pinned fixed-header-icon" title="{{t "quicknotes" "Unpin note"}}"></div>
|
||||
{{else}}
|
||||
<div class="icon-header-note icon-pin hide-header-icon" title="{{t "quicknotes" "Pin note"}}"></div>
|
||||
{{/if}}
|
||||
<div class="icon-header-note icon-delete hide-header-icon icon-delete-note" title="{{t "quicknotes" "Delete note"}}"></div>
|
||||
<!--
|
||||
{{#if sharedwith}}
|
||||
<div class='icon-share shared-title-owner' title="Shared with {{ sharedwith }}"></div>
|
||||
{{/if}}
|
||||
-->
|
||||
<div class='note-title'>
|
||||
{{{ title }}}
|
||||
<div class='note-header'>
|
||||
<div class='note-attachts'>
|
||||
{{#each attachts}}
|
||||
<div class='note-attach-grid'>
|
||||
<div class="attach-preview note-attach" attach-file-id="{{file_id}}" data-background-image="{{preview_url}}"/>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
<div class='note-content'>
|
||||
{{{ content }}}
|
||||
</div>
|
||||
<div class='note-tags'>
|
||||
{{#each tags}}
|
||||
<div class='icon-tag slim-tag' tag-id="{{ id }}">
|
||||
{{{ name }}}
|
||||
<div class='note-body'>
|
||||
<div>
|
||||
{{#if ispinned}}
|
||||
<div class="icon-header-note icon-pinned fixed-header-icon" title="{{t "quicknotes" "Unpin note"}}"></div>
|
||||
{{else}}
|
||||
<div class="icon-header-note icon-pin hide-header-icon" title="{{t "quicknotes" "Pin note"}}"></div>
|
||||
{{/if}}
|
||||
<div class="icon-header-note icon-delete hide-header-icon icon-delete-note" title="{{t "quicknotes" "Delete note"}}"></div>
|
||||
<!--
|
||||
{{#if sharedwith}}
|
||||
<div class='icon-share shared-title-owner' title="Shared with {{ sharedwith }}"></div>
|
||||
{{/if}}
|
||||
-->
|
||||
<div class='note-title'>
|
||||
{{{ title }}}
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class='note-content'>
|
||||
{{{ content }}}
|
||||
</div>
|
||||
<div class='note-tags'>
|
||||
{{#each tags}}
|
||||
<div class='icon-tag slim-tag' tag-id="{{ id }}">
|
||||
{{{ name }}}
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
@@ -48,17 +59,22 @@
|
||||
<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 class="icon-header-note icon-pin fixed-header-icon" title="{{t "quicknotes" "Pin note"}}"></div>
|
||||
<div contenteditable="true" id='title-editable' class='note-title'></div>
|
||||
<div class='note-header'>
|
||||
<div class='note-attachts'></div>
|
||||
</div>
|
||||
<div class='note-body'>
|
||||
<div>
|
||||
<div class="icon-header-note icon-pin fixed-header-icon" title="{{t "quicknotes" "Pin note"}}"></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-tags'></div>
|
||||
</div>
|
||||
<div contenteditable="true" id='content-editable' class='note-content'></div>
|
||||
<div class='note-tags'></div>
|
||||
<div class="note-options">
|
||||
<!--
|
||||
<select class="note-share-select" name="users[]" multiple="multiple"></select>
|
||||
-->
|
||||
<div class="note-toolbar">
|
||||
<div class="colors-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>
|
||||
@@ -70,12 +86,15 @@
|
||||
<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">
|
||||
<div class="buttons-toolbar">
|
||||
<!--
|
||||
<button id='share-button'><?php p($l->t('Share'));?></button>
|
||||
-->
|
||||
<button id='tag-button'>
|
||||
{{ tagTxt }}
|
||||
<button id='attach-button' class='round-tool-button'>
|
||||
<div class="icon-picture" title="{{t "quicknotes" "Add image"}}"></div>
|
||||
</button>
|
||||
<button id='tag-button' class='round-tool-button'>
|
||||
<div class="icon-tag" title="{{t "quicknotes" "Tags"}}"></div>
|
||||
</button>
|
||||
<button id='cancel-button'>
|
||||
{{ cancelTxt }}
|
||||
|
||||
Reference in New Issue
Block a user