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

Discard the use of philzet/ColorPick.js and reimplement in vanilla js

Browse Source 
I still don't understand what changed on Nextcloud 24, but in the main
script jQuery works great and in the libraries just fails.. 🤔
This commit is contained in:
Matias De lellis
2022-05-03 22:46:59 -03:00
parent 0a631d778f
commit 01110defbc
6 changed files with 125 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
Makefile
View File

@@ -65,8 +65,6 @@ deps:
cp node_modules/medium-editor/dist/css/medium-editor.css vendor/
cp node_modules/medium-editor-autolist/dist/autolist.js vendor/
cp node_modules/lozad/dist/lozad.js vendor/
wget https://raw.githubusercontent.com/philzet/ColorPick.js/master/src/colorPick.js -O vendor/colorPick.js
wget https://raw.githubusercontent.com/philzet/ColorPick.js/master/src/colorPick.css -O vendor/colorPick.css
depsmin:
mkdir -p vendor
@@ -78,8 +76,6 @@ depsmin:
cp node_modules/medium-editor/dist/css/medium-editor.min.css vendor/medium-editor.css
cp node_modules/medium-editor-autolist/dist/autolist.min.js vendor/autolist.js
cp node_modules/lozad/dist/lozad.min.js vendor/lozad.js
wget https://raw.githubusercontent.com/philzet/ColorPick.js/master/src/colorPick.js -O vendor/colorPick.js
wget https://raw.githubusercontent.com/philzet/ColorPick.js/master/src/colorPick.css -O vendor/colorPick.css
js-templates:
node_modules/handlebars/bin/handlebars js/templates -f js/templates.js

32
css/qn-colorpick.scss Normal file
View File

@@ -0,0 +1,32 @@
.colorPickWrapper {
position: relative;
width: 0;
height: 0;
}
#colorPick {
background: #fff;
-webkit-backdrop-filter: blur(15px);
position: absolute;
border-radius: 8px;
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
padding: 10px;
width: auto;
box-sizing: content-box;
z-index: 2500;
display: flex;
}
.colorPickButton {
border-radius: 50%;
width: 24px;
height: 24px;
margin: 0px 3px;
cursor: pointer;
display: inline-block;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.colorPickButton:hover {
transform: scale(1.1);
}

18
css/style.scss
View File

@@ -360,20 +360,4 @@ div.select2-container {
height: 32px;
padding: 0px !important;
border-radius: 50%;
}
/* Color Picker */
#colorPick {
border-radius: 8px;
padding: 12px;
background-color: var(--color-background-dark);
opacity: 1.0 !important;
z-index: 2500;
}
#colorPick span {
color: var(--color-main-text);
font-size: 13px;
text-transform: initial;
}
}

64
js/qn-colorpick.js Normal file
View File

@@ -0,0 +1,64 @@
function QnColorPick(parentSelector, onSelectColor) {
this._parentSelector = parentSelector;
this._onSelectColor = onSelectColor;
this._color = undefined;
this._template = '' +
'<div id="colorPickWrapper" class="colorPickWrapper">' +
'<div id="colorPick">' +
'<div class="colorPickButton" hexvalue="#F7EB96" style="background-color:#F7EB96"></div>' +
'<div class="colorPickButton" hexvalue="#88B7E3" style="background-color:#88B7E3"></div>' +
'<div class="colorPickButton" hexvalue="#C1ECB0" style="background-color:#C1ECB0"></div>' +
'<div class="colorPickButton" hexvalue="#BFA6E9" style="background-color:#BFA6E9"></div>' +
'<div class="colorPickButton" hexvalue="#DAF188" style="background-color:#DAF188"></div>' +
'<div class="colorPickButton" hexvalue="#FF96AC" style="background-color:#FF96AC"></div>' +
'<div class="colorPickButton" hexvalue="#FCF66F" style="background-color:#FCF66F"></div>' +
'<div class="colorPickButton" hexvalue="#F2F1EF" style="background-color:#F2F1EF"></div>' +
'<div class="colorPickButton" hexvalue="#C1D756" style="background-color:#C1D756"></div>' +
'<div class="colorPickButton" hexvalue="#CECECE" style="background-color:#CECECE"></div>' +
'</div>' +
'</div>';
this.select = function (hexcolor) {
this._color = hexcolor;
}
this.close = function () {
var picker = document.getElementById("colorPickWrapper");
picker.remove();
}
this.show = function (hexcolor) {
var self = this;
var parent = document.querySelector(this._parentSelector);
parent.innerHTML += this._template;
var colors = document.querySelectorAll(".colorPickButton");
colors.forEach (function(color) {
if (hexcolor == color.getAttribute("hexvalue")) {
color.classList.add("icon-checkmark");
}
color.addEventListener("click", function () {
self._color = color.getAttribute("hexvalue");
self._onSelectColor(self._color);
self.close ();
});
});
}
this.isVisible = function () {
var picker = document.getElementById("colorPickWrapper");
return picker != null;
};
this.toggle = function () {
if (this.isVisible()) {
this.close();
} else {
this.show(this._color);
}
};
}

52
js/script.js
View File

@@ -188,6 +188,7 @@ var View = function (notes) {
this._editor = undefined;
this._isotope = undefined;
this._colorPick = undefined;
this._changed = false;
};
@@ -298,6 +299,10 @@ View.prototype = {
}
}
});
this._colorPick = new QnColorPick(".modal-content", function (color) {
$("#modal-note-div .quicknote").css("background-color", color);
});
}
// Save instance of View
@@ -314,7 +319,7 @@ View.prototype = {
// Open notes when clicking them.
$("#notes-grid-div").on("click", ".quicknote", function (event) {
event.stopPropagation();
var id = parseInt($(this).data('id'), 10);
var id = parseInt($(this).attr('data-id'), 10);
self.editNote(id);
});
@@ -337,7 +342,7 @@ View.prototype = {
event.stopPropagation();
var gridnote = $(this).parent().parent().parent();
var id = parseInt(gridnote.data('id'), 10);
var id = parseInt(gridnote.attr('data-id'), 10);
var note = self._notes.read(id);
OC.dialogs.confirm(
@@ -384,7 +389,7 @@ View.prototype = {
var icon = $(this);
var gridNote = icon.parent().parent().parent();
var id = parseInt(gridNote.data('id'), 10);
var id = parseInt(gridNote.attr('data-id'), 10);
var note = self._notes.read(id);
note.isPinned = true;
@@ -408,7 +413,7 @@ View.prototype = {
var icon = $(this);
var gridNote = icon.parent().parent().parent();
var id = parseInt(gridNote.data('id'), 10);
var id = parseInt(gridNote.attr('data-id'), 10);
var note = self._notes.read(id);
note.isPinned = false;
@@ -431,6 +436,10 @@ View.prototype = {
// Cancel when click outside the modal.
$('#div-content').on('click', '.modal-note-background', function (event) {
event.stopPropagation();
if (self._colorPick.isVisible()) {
self._colorPick.close();
return;
}
if (!self._changed) {
self.cancelEdit();
return;
@@ -499,13 +508,13 @@ View.prototype = {
});
// Handle tags on modal
$('#modal-note-div').on('click', '.slim-tag', function (event) {
$('#modal-note-div').on("click", ".slim-tag", function (event) {
event.stopPropagation();
$('#modal-note-div #tag-button').trigger( "click");
});
// handle tags button.
$('#modal-note-div #share-button').click(function (event) {
$('#modal-note-div').on("click", "#share-button", function (event) {
event.stopPropagation();
QnDialogs.shares(
self._notes.getUsersSharing(),
@@ -518,13 +527,13 @@ View.prototype = {
);
});
// FIXME: Hack to sent click event to colorPicker.
$('#modal-note-div .icon-toggle-background').click(function (event) {
$(this).parent().click();
$('#modal-note-div').on("click", "#color-button", function (event) {
event.stopPropagation();
self._colorPick.toggle();
});
// handle attach button.
$('#modal-note-div #attach-button').click(function (event) {
$('#modal-note-div').on("click", "#attach-button", function (event) {
event.stopPropagation();
OC.dialogs.filepicker(t('quicknotes', 'Select file to attach'), function(datapath, returntype) {
OC.Files.getClient().getFileInfo(datapath).then((status, fileInfo) => {
@@ -542,7 +551,7 @@ View.prototype = {
});
// handle tags button.
$('#modal-note-div #tag-button').click(function (event) {
$('#modal-note-div').on("click", "#tag-button", function (event) {
event.stopPropagation();
var noteTags = self._editableTags();
QnDialogs.tags(
@@ -557,19 +566,19 @@ View.prototype = {
});
// handle cancel editing notes.
$('#modal-note-div #close-button').click(function (event) {
$('#modal-note-div').on("click", "#close-button", function (event) {
event.stopPropagation();
self.cancelEdit();
});
// handle cancel editing notes.
$('#modal-note-div #cancel-button').click(function (event) {
$('#modal-note-div').on("click", "#cancel-button", function (event) {
event.stopPropagation();
self.cancelEdit();
});
// Handle save note
$('#modal-note-div #save-button').click(function (event) {
$('#modal-note-div').on("click", "#save-button", function (event) {
event.stopPropagation();
self.saveNote();
});
@@ -791,9 +800,9 @@ View.prototype = {
},
_editableId: function(id) {
if (id === undefined)
return $("#modal-note-div .quicknote").data('id');
return $("#modal-note-div .quicknote").attr('data-id');
else
$("#modal-note-div .quicknote").data('id', id);
$("#modal-note-div .quicknote").attr('data-id', id);
},
_editableTitle: function(title) {
if (title === undefined)
@@ -828,16 +837,7 @@ View.prototype = {
return this._colorToHex($("#modal-note-div .quicknote").css("background-color"));
else {
$("#modal-note-div .quicknote").css("background-color", color);
/*$("#color-button").colorPick({
'initialColor': color,
'paletteLabel': t('quicknotes', 'Colors'),
'palette': ['#F7EB96', '#88B7E3', '#C1ECB0', '#BFA6E9', '#DAF188', '#FF96AC', '#FCF66F', '#F2F1EF', '#C1D756', '#CECECE'],
'allowRecent': false,
'allowCustomColor': false,
'onColorSelected': function() {
$("#modal-note-div .quicknote").css("background-color", this.color);
}
});*/
this._colorPick.select(color);
}
},
_editableShares: function(shared_with) {

4
templates/main.php
View File

@@ -6,12 +6,12 @@ vendor_script('quicknotes', 'medium-editor');
vendor_style('quicknotes', 'medium-editor');
vendor_script('quicknotes', 'autolist');
vendor_script('quicknotes', 'lozad');
//vendor_script('quicknotes', 'colorPick');
//vendor_style('quicknotes', 'colorPick');
script('quicknotes', 'qn-dialogs');
script('quicknotes', 'qn-colorpick');
script('quicknotes', 'script');
style('quicknotes', 'style');
style('quicknotes', 'medium');
style('quicknotes', 'qn-colorpick');
?>
<div id="app-navigation">