Move Isotope to more vanilla js.. and disable color picker..

This commit is contained in:
Matias De lellis
2022-04-30 11:08:35 -03:00
parent b106299eab
commit 4012932eb5
2 changed files with 67 additions and 52 deletions

View File

@@ -187,15 +187,18 @@ var View = function (notes) {
this._notes = notes; this._notes = notes;
this._editor = undefined; this._editor = undefined;
this._isotope = undefined;
this._changed = false; this._changed = false;
}; };
View.prototype = { View.prototype = {
showAll: function () { showAll: function () {
$('.notes-grid').isotope({ filter: '*'}); this._isotope.arrange({ filter: '*'});
setFilterUrl();
}, },
updateSort: function() { updateSort: function() {
$('.notes-grid').isotope('updateSortData').isotope(); this._isotope.updateSortData();
this._isotope.layout();
}, },
editNote: function (id) { editNote: function (id) {
// Get selected note and sync content // Get selected note and sync content
@@ -278,7 +281,8 @@ View.prototype = {
lozad('.attach-preview').observe(); lozad('.attach-preview').observe();
// Init masonty grid to notes. // Init masonty grid to notes.
$('.notes-grid').isotope({ if (this._notes.isLoaded() && this._notes.length() > 0) {
this._isotope = new Isotope(document.querySelector('.notes-grid'), {
itemSelector: '.note-grid-item', itemSelector: '.note-grid-item',
layoutMode: 'masonry', layoutMode: 'masonry',
masonry: { masonry: {
@@ -294,6 +298,7 @@ View.prototype = {
} }
} }
}); });
}
// Save instance of View // Save instance of View
var self = this; var self = this;
@@ -343,8 +348,8 @@ View.prototype = {
if (!note.is_shared) { if (!note.is_shared) {
self._notes.remove(note).done(function () { self._notes.remove(note).done(function () {
if (self._notes.length() > 0) { if (self._notes.length() > 0) {
$(".notes-grid").isotope('remove', gridnote.parent()) self._isotope.remove(gridnote.parent())
.isotope('layout'); self._isotope.layout();
self.showAll(); self.showAll();
self.renderNavigation(); self.renderNavigation();
} else { } else {
@@ -356,8 +361,8 @@ View.prototype = {
} else { } else {
self._notes.forgetShare(note).done(function () { self._notes.forgetShare(note).done(function () {
if (self._notes.length() > 0) { if (self._notes.length() > 0) {
$(".notes-grid").isotope('remove', gridnote.parent()) self._isotope.remove(gridnote.parent())
.isotope('layout'); selg._isotope.layout();
self.showAll(); self.showAll();
self.renderNavigation(); self.renderNavigation();
} else { } else {
@@ -390,7 +395,8 @@ View.prototype = {
icon.removeClass("icon-pin"); icon.removeClass("icon-pin");
icon.addClass("icon-pinned"); icon.addClass("icon-pinned");
icon.attr('title', t('quicknotes', 'Unpin note')); icon.attr('title', t('quicknotes', 'Unpin note'));
$('.notes-grid').isotope('updateSortData').isotope(); self._isotope.updateSortData();
self._isotope.arrange();
}).fail(function () { }).fail(function () {
alert('Could not pin note'); alert('Could not pin note');
}); });
@@ -406,14 +412,14 @@ View.prototype = {
var note = self._notes.read(id); var note = self._notes.read(id);
note.isPinned = false; note.isPinned = false;
self._notes.update(note).done(function () { self._notes.update(note).done(function () {
icon.removeClass("fixed-header-icon"); icon.removeClass("fixed-header-icon");
icon.addClass("hide-header-icon"); icon.addClass("hide-header-icon");
icon.removeClass("icon-pinned"); icon.removeClass("icon-pinned");
icon.addClass("icon-pin"); icon.addClass("icon-pin");
icon.attr('title', t('quicknotes', 'Pin note')); icon.attr('title', t('quicknotes', 'Pin note'));
$('.notes-grid').isotope('updateSortData').isotope(); self._isotope.updateSortData();
self._isotope.arrange();
}).fail(function () { }).fail(function () {
alert('Could not unpin note'); alert('Could not unpin note');
}); });
@@ -593,9 +599,9 @@ View.prototype = {
self._notes.create(fakenote).done(function(note) { self._notes.create(fakenote).done(function(note) {
if (self._notes.length() > 1) { if (self._notes.length() > 1) {
var $notehtml = $(Handlebars.templates['note-item'](note)); var $notehtml = $(Handlebars.templates['note-item'](note));
$(".notes-grid").prepend($notehtml) $('.notes-grid').prepend($notehtml);
.isotope('prepended', $notehtml) self._isotope.prepended($notehtml);
.isotope('layout'); self._isotope.layout();
self.showAll(); self.showAll();
self.updateSort(); self.updateSort();
self.renderNavigation(); self.renderNavigation();
@@ -613,7 +619,7 @@ View.prototype = {
event.preventDefault(); event.preventDefault();
self._cleanNavigation(); self._cleanNavigation();
$(this).addClass("active"); $(this).addClass("active");
$('.notes-grid').isotope({ filter: '*'}); self._isotope.arrange({ filter: '*'});
setFilterUrl(); setFilterUrl();
}); });
@@ -628,9 +634,11 @@ View.prototype = {
event.stopPropagation(); event.stopPropagation();
self._cleanNavigation(); self._cleanNavigation();
$(this).addClass("active"); $(this).addClass("active");
$('.notes-grid').isotope({ filter: function() { self._isotope.arrange({
return $(this).children().hasClass('shared'); filter: function(elem) {
} }); return elem.querySelector('.shared') != null;
}
});
setFilterUrl(); setFilterUrl();
}); });
@@ -639,9 +647,11 @@ View.prototype = {
event.stopPropagation(); event.stopPropagation();
self._cleanNavigation(); self._cleanNavigation();
$(this).addClass("active"); $(this).addClass("active");
$('.notes-grid').isotope({ filter: function() { self._isotope.arrange({
return $(this).children().hasClass('shareowner'); filter: function(elem) {
} }); return elem.querySelector('.shareowner') != null;
}
});
setFilterUrl(); setFilterUrl();
}); });
@@ -817,7 +827,8 @@ View.prototype = {
if (color === undefined) if (color === undefined)
return this._colorToHex($("#modal-note-div .quicknote").css("background-color")); return this._colorToHex($("#modal-note-div .quicknote").css("background-color"));
else { else {
$("#color-button").colorPick({ $("#modal-note-div .quicknote").css("background-color", color);
/*$("#color-button").colorPick({
'initialColor': color, 'initialColor': color,
'paletteLabel': t('quicknotes', 'Colors'), 'paletteLabel': t('quicknotes', 'Colors'),
'palette': ['#F7EB96', '#88B7E3', '#C1ECB0', '#BFA6E9', '#DAF188', '#FF96AC', '#FCF66F', '#F2F1EF', '#C1D756', '#CECECE'], 'palette': ['#F7EB96', '#88B7E3', '#C1ECB0', '#BFA6E9', '#DAF188', '#FF96AC', '#FCF66F', '#F2F1EF', '#C1D756', '#CECECE'],
@@ -826,7 +837,7 @@ View.prototype = {
'onColorSelected': function() { 'onColorSelected': function() {
$("#modal-note-div .quicknote").css("background-color", this.color); $("#modal-note-div .quicknote").css("background-color", this.color);
} }
}); });*/
} }
}, },
_editableShares: function(shared_with) { _editableShares: function(shared_with) {
@@ -914,15 +925,19 @@ View.prototype = {
{ name: 'removeFormat', aria: t('quicknotes', 'Clean format') } { name: 'removeFormat', aria: t('quicknotes', 'Clean format') }
] ]
}, },
placeholder: {
text: 'Create a note…',
hideOnClick: false
},
autoLink: true, autoLink: true,
targetBlank: true, targetBlank: true,
paste: { paste: {
forcePlainText: false, forcePlainText: true
cleanPastedHTML: false
}, },
extensions: { extensions: {
'autolist': new AutoList() 'autolist': new AutoList()
} },
imageDragging: false
}); });
var self = this; var self = this;
@@ -1028,19 +1043,19 @@ View.prototype = {
); );
}, },
_filterNote: function (noteId) { _filterNote: function (noteId) {
$('.notes-grid').isotope({ this._isotope.arrange({
filter: function() { filter: function(elem) {
return noteId == parseInt($(this).children().data('id'), 10); return noteId == elem.firstElementChild.getAttribute('data-id');
} }
}); });
}, },
_filterTag: function (tagId) { _filterTag: function (tagId) {
$('.notes-grid').isotope({ this._isotope.arrange({
filter: function() { filter: function(elem) {
var match = false; var match = false;
$(this).find(".slim-tag").siblings().addBack().each(function() { var tags = elem.querySelectorAll('.slim-tag');
var id = parseInt($(this).attr('tag-id'), 10); tags.forEach (function(tagItem) {
if (tagId == id) if (tagId == tagItem.getAttribute('tag-id'))
match = true; match = true;
}); });
return match; return match;
@@ -1048,9 +1063,9 @@ View.prototype = {
}); });
}, },
_filterColor: function (color) { _filterColor: function (color) {
$('.notes-grid').isotope({ this._isotope.arrange({
filter: function() { filter: function(elem) {
return color == $(this).children().css("background-color"); return color == elem.firstElementChild.style["background-color"];
} }
}); });
}, },

View File

@@ -6,8 +6,8 @@ vendor_script('quicknotes', 'medium-editor');
vendor_style('quicknotes', 'medium-editor'); vendor_style('quicknotes', 'medium-editor');
vendor_script('quicknotes', 'autolist'); vendor_script('quicknotes', 'autolist');
vendor_script('quicknotes', 'lozad'); vendor_script('quicknotes', 'lozad');
vendor_script('quicknotes', 'colorPick'); //vendor_script('quicknotes', 'colorPick');
vendor_style('quicknotes', 'colorPick'); //vendor_style('quicknotes', 'colorPick');
script('quicknotes', 'qn-dialogs'); script('quicknotes', 'qn-dialogs');
script('quicknotes', 'script'); script('quicknotes', 'script');
style('quicknotes', 'style'); style('quicknotes', 'style');