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

Reorganize code, and fix the notes whithin the modal..

Browse Source
This commit is contained in:
Matias De lellis
2020-06-05 17:54:44 -03:00
parent c70c87a20d
commit 4e531856f5
3 changed files with 126 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
css/style.scss
View File

@@ -87,10 +87,10 @@
} }
#div-content .note-title { #div-content .note-title {
margin-right: 52px;
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
@@ -149,7 +149,7 @@
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.2);
} }
.ciclle-toolbar:hover { .circle-toolbar:hover {
color: #ccc; color: #ccc;
text-decoration:none; text-decoration:none;
background:#333; background:#333;
@@ -216,7 +216,7 @@ div[contenteditable="true"] {
} }
#title-editable { #title-editable {
width: 100%; width: 90%;
background: none; background: none;
color: unset; color: unset;
border: none; border: none;

195
js/script.js
View File

@@ -139,9 +139,11 @@ Notes.prototype = {
}, },
updateActive: function (title, content, pinned, tags, color) { updateActive: function (title, content, pinned, tags, color) {
var note = this.getActive(); var note = this.getActive();
note.title = title; note.title = title;
note.content = content; note.content = content;
note.pinned = pinned; note.pinned = pinned ? 1 : 0;
note.ispinned = pinned;
note.tags = tags; note.tags = tags;
note.color = color; note.color = color;
@@ -194,36 +196,51 @@ View.prototype = {
}, },
editNote: function (id) { editNote: function (id) {
var self = this; var self = this;
var modal = $('#modal-note-div');
// Get selected note elements
var note = $('.notes-grid [data-id=' + id + ']').parent();
var title = note.find(".note-title").html();
var content = note.find(".note-content").html();
var pinned = note.find(".icon-pinned").length > 0;
var tags = note.find(".note-tags").html();
var color = note.children().css("background-color");
// Get modal elements
var modaltitle = $('#modal-note-div #title-editable'); var modaltitle = $('#modal-note-div #title-editable');
var modalcontent = $('#modal-note-div #content-editable'); var modalcontent = $('#modal-note-div #content-editable');
var pinicon = $('#modal-note-div .icon-header-note');
var modaltags = $('#modal-note-div .note-tags'); var modaltags = $('#modal-note-div .note-tags');
var modalnote = $("#modal-note-div .quicknote"); var modalnote = $("#modal-note-div .quicknote");
var note = $('.notes-grid [data-id=' + id + ']').parent(); var modalid = modalnote.data('id');
if (id == modalid)
return;
var title = note.find(".note-title").html(); // Sync color
var content = note.find(".note-content").html(); var colors = modalnote[0].getElementsByClassName("circle-toolbar");
var tags = note.find(".note-tags").html();
var color = note.children().css("background-color");
var colors = modal[0].getElementsByClassName("circle-toolbar");
$.each(colors, function(i, c) { $.each(colors, function(i, c) {
if(color == c.style.backgroundColor) { if(color == c.style.backgroundColor) {
c.className += " icon-checkmark"; c.className += " icon-checkmark";
} }
}); });
var modalid = modalnote.data('id'); // Sync pin icon
if (pinned) {
if (id == modalid) pinicon.removeClass("icon-pin");
return; pinicon.addClass("icon-pinned");
} else {
pinicon.removeClass("icon-pinned");
pinicon.addClass("icon-pin");
}
// Sync main content
modalnote.data('id', id); modalnote.data('id', id);
modaltitle.html(title); modaltitle.html(title);
modalcontent.html(content); modalcontent.html(content);
modaltags.html(tags); modaltags.html(tags);
modalnote.css("background-color", color); modalnote.css("background-color", color);
// Create medium div editor.
var autolist = new AutoList(); var autolist = new AutoList();
var editor = new MediumEditor(modalcontent, { var editor = new MediumEditor(modalcontent, {
targetBlank: true, targetBlank: true,
@@ -295,6 +312,7 @@ View.prototype = {
/* Animate to center */ /* Animate to center */
var modal = $('#modal-note-div');
modal.removeClass("hide-modal-note"); modal.removeClass("hide-modal-note");
modal.addClass("show-modal-note"); modal.addClass("show-modal-note");
@@ -328,6 +346,7 @@ View.prototype = {
var title = $('#modal-note-div #title-editable').html().trim(); var title = $('#modal-note-div #title-editable').html().trim();
var content = $('#modal-note-div #content-editable').html().trim(); var content = $('#modal-note-div #content-editable').html().trim();
var pinned = $('#modal-note-div').find(".icon-pinned").length > 0;
var color = this.colorToHex($("#modal-note-div .quicknote").css("background-color")); var color = this.colorToHex($("#modal-note-div .quicknote").css("background-color"));
var tags = $("#modal-note-div .slim-tag").toArray().map(function (value) { var tags = $("#modal-note-div .slim-tag").toArray().map(function (value) {
return { return {
@@ -350,7 +369,7 @@ View.prototype = {
*/ */
var self = this; var self = this;
this._notes.updateId(id, title, content, false, tags, color).done(function () { this._notes.updateId(id, title, content, pinned, tags, color).done(function () {
var modal = $('#modal-note-div'); var modal = $('#modal-note-div');
var modalnote = $("#modal-note-div .quicknote"); var modalnote = $("#modal-note-div .quicknote");
var modaltitle = $('#modal-note-div #title-editable'); var modaltitle = $('#modal-note-div #title-editable');
@@ -370,11 +389,11 @@ View.prototype = {
self._editor.destroy(); self._editor.destroy();
self._changed = false; self._changed = false;
// TODO: Update grid note instead of redraw everything
self.render(); self.render();
}).fail(function () { }).fail(function () {
alert('DOh!. Could not update note!.'); alert('DOh!. Could not update note!.');
}); });
}, },
cancelEdit: function () { cancelEdit: function () {
var self = this; var self = this;
@@ -463,15 +482,15 @@ View.prototype = {
var modalnote = $("#modal-note-div .quicknote"); var modalnote = $("#modal-note-div .quicknote");
// Show delete icon on hover. // Show delete icon on hover.
$("#app-content").on("mouseenter", ".quicknote", function() { $("#notes-grid-div").on("mouseenter", ".quicknote", function() {
$(this).find(".icon-header-note").addClass( "show-header-icon"); $(this).find(".icon-header-note").addClass( "show-header-icon");
}); });
$("#app-content").on("mouseleave", ".quicknote", function() { $("#notes-grid-div").on("mouseleave", ".quicknote", function() {
$(this).find(".icon-header-note").removeClass("show-header-icon"); $(this).find(".icon-header-note").removeClass("show-header-icon");
}); });
// Open notes when clicking them. // Open notes when clicking them.
$("#app-content").on("click", ".quicknote", function (event) { $("#notes-grid-div").on("click", ".quicknote", function (event) {
event.stopPropagation(); event.stopPropagation();
if($(this).hasClass('shared')) return; //shares don't allow editing if($(this).hasClass('shared')) return; //shares don't allow editing
@@ -485,57 +504,12 @@ View.prototype = {
}); });
// Doesn't show modal dialog when opening link // Doesn't show modal dialog when opening link
$("#app-content").on("click", ".note-grid-item a", function (event) { $("#notes-grid-div").on("click", ".note-grid-item a", function (event) {
event.stopPropagation(); event.stopPropagation();
}); });
// Cancel when click outside the modal.
$('#app-content').on('click', '.modal-note-background', function (event) {
event.stopPropagation();
if (!self._changed) {
self.cancelEdit();
return;
}
OC.dialogs.confirm(
t('facerecognition', 'Do you want to discard the changes?'),
t('facerecognition', 'Unsaved changes'),
function(result) {
if (result) {
self.cancelEdit();
}
},
true
);
});
// Handle hotkeys $('#notes-grid-div').on('click', '.slim-tag', function (event) {
$(document).off("keyup"); // FIXME: This prevent exponential calls of save note.
$(document).on("keyup", function(event) {
if (event.keyCode == 27) {
event.stopPropagation();
if (!self._changed) {
self.cancelEdit();
return;
}
OC.dialogs.confirm(
t('facerecognition', 'Do you want to discard the changes?'),
t('facerecognition', 'Unsaved changes'),
function(result) {
if (result) {
self.cancelEdit();
}
},
true
);
}
else if (event.keyCode == 13 && event.altKey) {
event.preventDefault();
event.stopPropagation();
self.saveNote();
}
});
$('#app-content').on('click', '.slim-tag', function (event) {
event.stopPropagation(); event.stopPropagation();
var tagId = parseInt($(this).attr('tag-id'), 10); var tagId = parseInt($(this).attr('tag-id'), 10);
$('.notes-grid').isotope({ filter: function() { $('.notes-grid').isotope({ filter: function() {
@@ -555,7 +529,7 @@ View.prototype = {
// Remove note icon // Remove note icon
var self = this; var self = this;
$('#app-content').on("click", ".icon-delete-note", function (event) { $('#notes-grid-div').on("click", ".icon-delete-note", function (event) {
event.stopPropagation(); event.stopPropagation();
var note = $(this).parent().parent(); var note = $(this).parent().parent();
@@ -585,7 +559,7 @@ View.prototype = {
); );
}); });
$('#app-content').on("click", ".icon-pin", function (event) { $('#notes-grid-div').on("click", ".icon-pin", function (event) {
event.stopPropagation(); event.stopPropagation();
var icon = $(this); var icon = $(this);
@@ -604,7 +578,7 @@ View.prototype = {
}); });
}); });
$('#app-content').on("click", ".icon-pinned", function (event) { $('#notes-grid-div').on("click", ".icon-pinned", function (event) {
event.stopPropagation(); event.stopPropagation();
var icon = $(this); var icon = $(this);
@@ -619,7 +593,7 @@ View.prototype = {
icon.attr('title', t('quicknotes', 'Pin note')); icon.attr('title', t('quicknotes', 'Pin note'));
$('.notes-grid').isotope('updateSortData').isotope(); $('.notes-grid').isotope('updateSortData').isotope();
}).fail(function () { }).fail(function () {
alert('Could not unpin'); alert('Could not unpin note');
}); });
}); });
@@ -627,17 +601,73 @@ View.prototype = {
* Modal actions. * Modal actions.
*/ */
// Handle colors. // Cancel when click outside the modal.
$('#modal-note-div .circle-toolbar').click(function (event) { $('#div-content').on('click', '.modal-note-background', function (event) {
event.stopPropagation();
if (!self._changed) {
self.cancelEdit();
return;
}
OC.dialogs.confirm(
t('facerecognition', 'Do you want to discard the changes?'),
t('facerecognition', 'Unsaved changes'),
function(result) {
if (result) {
self.cancelEdit();
}
},
true
);
});
// But handles the click until the modal
$('#div-content').on('click', '.modal-content', function (event) {
event.stopPropagation();
});
// Handle hotkeys
$(document).off("keyup"); // FIXME: This prevent exponential calls of save note.
$(document).on("keyup", function(event) {
if (event.keyCode == 27) {
event.stopPropagation();
if (!self._changed) {
self.cancelEdit();
return;
}
OC.dialogs.confirm(
t('facerecognition', 'Do you want to discard the changes?'),
t('facerecognition', 'Unsaved changes'),
function(result) {
if (result) {
self.cancelEdit();
}
},
true
);
}
else if (event.keyCode == 13 && event.altKey) {
event.preventDefault();
event.stopPropagation();
self.saveNote();
}
});
// Pin note in modal
$('#modal-note-div').on("click", ".icon-pin", function (event) {
event.stopPropagation(); event.stopPropagation();
var oldColorTool = $('#modal-note-div .circle-toolbar.icon-checkmark'); $(this).removeClass("icon-pin");
$.each(oldColorTool, function(i, oct) { $(this).addClass("icon-pinned");
$(oct).removeClass('icon-checkmark'); $(this).attr('title', t('quicknotes', 'Unpin note'));
}); });
$(this).addClass('icon-checkmark');
var color = $(this).css("background-color"); // Unpin note in modal
modalnote.css("background-color", color); $('#modal-note-div').on("click", ".icon-pinned", function (event) {
event.stopPropagation();
$(this).removeClass("icon-pinned");
$(this).addClass("icon-pin");
$(this).attr('title', t('quicknotes', 'Pin note'));
}); });
// handle share editing notes. // handle share editing notes.
@@ -714,6 +744,19 @@ View.prototype = {
}); });
}); });
// Handle colors.
$('#modal-note-div .circle-toolbar').click(function (event) {
event.stopPropagation();
var oldColorTool = $('#modal-note-div .circle-toolbar.icon-checkmark');
$.each(oldColorTool, function(i, oct) {
$(oct).removeClass('icon-checkmark');
});
$(this).addClass('icon-checkmark');
var color = $(this).css("background-color");
modalnote.css("background-color", color);
});
// handle tags button. // handle tags button.
$('#modal-note-div #tag-button').click(function (event) { $('#modal-note-div #tag-button').click(function (event) {
event.stopPropagation(); event.stopPropagation();

5
js/templates/notes.handlebars
View File

@@ -1,8 +1,8 @@
{{#if notes}} {{#if notes}}
<div class="notes-grid"> <div id="notes-grid-div" class="notes-grid">
{{#each notes}} {{#each notes}}
<div class="note-grid-item"> <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 }}" > <div class="quicknote noselect {{#if isshared}}shared{{/if}} {{#if sharedwith}}shareowner{{/if}}" style="background-color: {{color}}" data-id="{{ id }}" data-timestamp="{{ timestamp }}" >
{{#if isshared}} {{#if isshared}}
<div> <div>
<div class='icon-share shared-title' title="Shared by {{ userid }}"></div> <div class='icon-share shared-title' title="Shared by {{ userid }}"></div>
@@ -49,6 +49,7 @@
<div class="modal-content"> <div class="modal-content">
<div class="quicknote note-active" style="background-color: #F7EB96" data-id="-1"> <div class="quicknote note-active" style="background-color: #F7EB96" data-id="-1">
<div> <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 contenteditable="true" id='title-editable' class='note-title'></div>
</div> </div>
<div contenteditable="true" id='content-editable' class='note-content'></div> <div contenteditable="true" id='content-editable' class='note-content'></div>