Add color picker, improve refresh behavior
This commit is contained in:
parent
40e6ff1b64
commit
64beddce8a
@ -116,6 +116,8 @@ class NotePostNotes extends Notes {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Sync notes with the NotePost server, resolving conflicts in the process.
|
||||
*
|
||||
@ -123,8 +125,6 @@ class NotePostNotes extends Notes {
|
||||
* @param {function} error
|
||||
* @returns {undefined}
|
||||
*/
|
||||
|
||||
|
||||
sync(success, error) {
|
||||
super.sync();
|
||||
var self = this;
|
||||
|
||||
@ -112,8 +112,7 @@ class Notes {
|
||||
|
||||
if (typeof note.html !== 'string') {
|
||||
note.html = marked(note.content);
|
||||
} // Save
|
||||
|
||||
}
|
||||
|
||||
return note;
|
||||
}
|
||||
|
||||
@ -6,9 +6,43 @@
|
||||
|
||||
|
||||
$(".view-main").on("ptr:refresh", ".ptr-content", function () {
|
||||
restartApplication();
|
||||
loadCards(function () {
|
||||
app.ptr.done();
|
||||
});
|
||||
});
|
||||
|
||||
function loadCards(callback) {
|
||||
// Do it twice as a workaround for the stupid sync issue
|
||||
NOTES.sync(function () {
|
||||
NOTES.sync(function (notes) {
|
||||
for (i in window.shuffleInstance.items) {
|
||||
window.shuffleInstance.remove(window.shuffleInstance.items[i]);
|
||||
}
|
||||
$(".notecard-col").remove();
|
||||
for (n in notes) {
|
||||
var note = notes[n];
|
||||
$("#notecards-bin").append('<div class="col-100 tablet-50 desktop-33 notecard-col" id="notecard-col-' + note.noteid + '">'
|
||||
+ '<div class="card notecard" id="notecard-' + note.noteid + '" data-id="' + note.noteid + '" data-bg="' + note.color + '" data-fg="' + note.textcolor + '" style="background-color: #' + note.color + '; color: #' + note.textcolor + ';">'
|
||||
+ '<div class="menubtn">'
|
||||
+ '<i class="material-icons">more_vert</i>'
|
||||
+ '</div>'
|
||||
+ '<div class="card-content card-content-padding">' + note.html + '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>');
|
||||
}
|
||||
var noteElements = document.getElementsByClassName("notecard-col");
|
||||
window.shuffleInstance.add(noteElements);
|
||||
if (typeof callback == 'function') {
|
||||
callback();
|
||||
}
|
||||
}, function () {
|
||||
restartApplication();
|
||||
});
|
||||
}, function () {
|
||||
restartApplication();
|
||||
});
|
||||
}
|
||||
|
||||
function editNote(id) {
|
||||
var note = NOTES.get(id);
|
||||
router.navigate("/editnote", {
|
||||
@ -32,16 +66,29 @@ function makeList(id) {
|
||||
function deleteNote(id) {
|
||||
app.dialog.confirm('Are you sure?', 'Delete Note', function () {
|
||||
NOTES.del(id, function () {
|
||||
app.ptr.refresh();
|
||||
window.shuffleInstance.remove(document.getElementById("notecard-" + id));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function colorNote(id) {
|
||||
$("#colorpicker").data("noteid", id);
|
||||
var colorpicker = app.popup.create({
|
||||
el: $("#colorpicker")
|
||||
});
|
||||
colorpicker.open();
|
||||
}
|
||||
|
||||
$("#app").on("click", ".edit-note-btn", function () {
|
||||
editNote($(this).data("note"));
|
||||
app.popover.close();
|
||||
});
|
||||
|
||||
$("#app").on("click", ".color-note-btn", function () {
|
||||
colorNote($(this).data("note"));
|
||||
app.popover.close();
|
||||
});
|
||||
|
||||
$("#app").on("click", ".favorite-note-btn", function () {
|
||||
favoriteNote($(this).data("note"));
|
||||
app.popover.close();
|
||||
@ -57,6 +104,23 @@ $("#app").on("click", ".delete-note-btn", function () {
|
||||
app.popover.close();
|
||||
});
|
||||
|
||||
$("#app").on("click", "#colorpicker .colorpicker-color", function () {
|
||||
var color = $(this).data("color");
|
||||
var noteid = $("#colorpicker").data("noteid");
|
||||
var note = NOTES.get(noteid);
|
||||
app.popup.close();
|
||||
note.color = color;
|
||||
// Set them to null, they'll be fixed in fix()
|
||||
note.modified = null;
|
||||
note.textcolor = null;
|
||||
note2 = NOTES.fix(note);
|
||||
NOTES.set(note2);
|
||||
$("#notecard-" + noteid).data("bg", note2.color);
|
||||
$("#notecard-" + noteid).data("fg", note2.textcolor);
|
||||
$("#notecard-" + noteid).css("background-color", "#" + note2.color);
|
||||
$("#notecard-" + noteid).css("color", "#" + note2.textcolor);
|
||||
});
|
||||
|
||||
function openNoteActionMenu(notecard) {
|
||||
var noteid = notecard.data("id");
|
||||
if (window.innerWidth < 768) {
|
||||
@ -70,6 +134,14 @@ function openNoteActionMenu(notecard) {
|
||||
editNote(noteid);
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "Color",
|
||||
icon: '<i class="fas fa-palette fa-fw"></i>',
|
||||
onClick: function () {
|
||||
colorNote(noteid);
|
||||
}
|
||||
},
|
||||
|
||||
// {
|
||||
// text: "Favorite",
|
||||
// icon: '<i class="fas fa-star fa-fw"></i>',
|
||||
@ -104,6 +176,7 @@ function openNoteActionMenu(notecard) {
|
||||
'<div class="list">' +
|
||||
'<ul>' +
|
||||
'<li><a class="list-button item-link edit-note-btn" data-note="' + noteid + '"><i class="fas fa-edit fa-fw"></i> Edit</a></li>' +
|
||||
'<li><a class="list-button item-link color-note-btn" data-note="' + noteid + '"><i class="fas fa-palette fa-fw"></i> Color</a></li>' +
|
||||
'<li><a class="list-button item-link favorite-note-btn" data-note="' + noteid + '"><i class="fas fa-star fa-fw"></i> Favorite</a></li>' +
|
||||
'<li><a class="list-button item-link listify-note-btn" data-note="' + noteid + '"><i class="fas fa-tasks fa-fw"></i> Make a List</a></li>' +
|
||||
'<li><a class="list-button item-link delete-note-btn" data-note="' + noteid + '"><i class="fas fa-trash fa-fw"></i> Delete</a></li>' +
|
||||
|
||||
@ -28,6 +28,8 @@
|
||||
</div>
|
||||
|
||||
<div class="row notecards-row" id="notecards-bin">
|
||||
<div class="col-100 tablet-50 desktop-33" style="visibility: hidden;" id="notecard-col-sizer">
|
||||
</div>
|
||||
{{#if offline}}
|
||||
<div class="col-100 tablet-50 desktop-33 notecard-col">
|
||||
<div class="card">
|
||||
@ -39,7 +41,7 @@
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#each notecards}}
|
||||
<div class="col-100 tablet-50 desktop-33 notecard-col">
|
||||
<div class="col-100 tablet-50 desktop-33 notecard-col" id="notecard-col-{{noteid}}">
|
||||
<div class="card notecard" id="notecard-{{noteid}}" data-id="{{noteid}}" data-bg="{{color}}" data-fg="{{textcolor}}" style="background-color: #{{color}}; color: #{{textcolor}};">
|
||||
<div class="menubtn">
|
||||
<i class="material-icons">more_vert</i>
|
||||
@ -61,10 +63,37 @@
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="popup" id="colorpicker">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="title">Set Color</div>
|
||||
|
||||
<div class="right">
|
||||
<a href="#" class="link icon-only popup-close">
|
||||
<i class="material-icons">close</i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block">
|
||||
<div style="display: flex; justify-content: center; flex-wrap: wrap;">
|
||||
{{#each colors}}
|
||||
<div class="card colorpicker-color" style="background-color: #{{this}}; height: 3em; width: 3em; cursor: pointer;" data-color="{{this}}">
|
||||
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.shuffleInstance = new window.Shuffle(document.getElementById('notecards-bin'), {
|
||||
itemSelector: '.notecard-col'
|
||||
itemSelector: '.notecard-col',
|
||||
sizer: '#notecard-col-sizer'
|
||||
});
|
||||
|
||||
loadCards();
|
||||
</script>
|
||||
|
||||
</div>
|
||||
@ -16,7 +16,38 @@ var routes = [
|
||||
};
|
||||
var context = {
|
||||
showrefreshbtn: (platform_type != "cordova"),
|
||||
offline: OFFLINE
|
||||
offline: OFFLINE,
|
||||
colors: [
|
||||
// Pastel colors
|
||||
"EF9A9A", // red
|
||||
"FFCC80", // orange
|
||||
"FFF59D", // yellow
|
||||
"E6EE9C", // lime
|
||||
"A5D6A7", // green
|
||||
"80CBC4", // teal
|
||||
"81D4FA", // light blue
|
||||
"90CAF9", // blue
|
||||
"B39DDB", // purple
|
||||
"F48FB1", // pink
|
||||
// Bright colors
|
||||
"F44336", // red
|
||||
"FF9800", // orange
|
||||
"FFEB3B", // yellow
|
||||
"8BC34A", // light green
|
||||
"4CAF50", // green
|
||||
"009688", // teal
|
||||
"03A9F4", // light blue
|
||||
"2196F3", // blue
|
||||
"673AB7", // purple
|
||||
"E91E63", // pink
|
||||
// Other colors
|
||||
"FFFFFF", // white
|
||||
"E0E0E0", // pastel gray
|
||||
"9E9E9E", // gray
|
||||
"BCAAA4", // pastel brown
|
||||
"795548", // brown
|
||||
"000000" // black
|
||||
]
|
||||
};
|
||||
NOTES.sync(function (notes) {
|
||||
context["notecards"] = notes;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user