Apps/NotePost
2
0
Fork 0
Code Issues 3 Pull Requests Releases Wiki Activity

Add AJAX note refresh, note text now changes color to stay readable on dark backgrounds

Browse Source
This commit is contained in:
Skylar Ittner 2018-11-24 14:25:43 -07:00
parent 9742b70e71
commit 161b3e3755
5 changed files with 71 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
action.php
View File

@ -82,4 +82,12 @@ switch ($VARS['action']) {
$note->saveNote();
returnToSender("");
break;
case "getnotes":
header("Content-Type: application/json");
$noteids = $database->select('notes', 'noteid', ['ownerid' => $_SESSION['uid']]);
$notes = [];
foreach ($noteids as $n) {
$notes[] = Note::loadNote($n)->toArray();
}
exit(json_encode($notes));
}

25
lib/Note.lib.php
View File

@ -202,6 +202,30 @@ class Note {
return $this->favorite;
}
/**
* Get the text color for this note, based on the background color.
* Thanks to https://stackoverflow.com/a/8468448
* @return string
*/
public function getTextColor(): string {
$bg = $this->getColor();
$r = hexdec(substr($bg, 0, 2));
$g = hexdec(substr($bg, 2, 2));
$b = hexdec(substr($bg, 4, 2));
$contrast = sqrt(
$r * $r * .241 +
$g * $g * .691 +
$b * $b * .068
);
if ($contrast > 130) {
return '000000';
} else {
return 'FFFFFF';
}
}
/**
* Set the note content
* @param string $markdown
@ -272,6 +296,7 @@ class Note {
'noteid' => $this->getID(),
'color' => $this->getColor(),
'content' => $this->getText(),
'html' => $this->getHTML(true),
'title' => $this->getTitle(),
'modified' => $this->getModified(),
'favorite' => $this->getFavorite(),

5
pages.php
View File

@ -9,7 +9,10 @@ define("PAGES", [
"home" => [
"title" => "Notes",
"navbar" => true,
"icon" => "far fa-sticky-note"
"icon" => "far fa-sticky-note",
"scripts" => [
"static/js/home.js"
]
],
"404" => [
"title" => "404 error"

15
pages/home.php
View File

@ -15,8 +15,9 @@ foreach ($noteids as $n) {
<style nonce="<?php echo $SECURE_NONCE; ?>">
<?php
foreach ($notes as $note) {
echo "#notecard_" . $note->getID() . " {\n"
echo "#notecard_" . $note->getID() . ", #notecard_" . $note->getID() . " a {\n"
. " background-color: #" . $note->getColor() . ";\n"
. " color: #" . $note->getTextColor() . ";\n"
. " border: 1px solid #" . $note->getColor() . ";\n"
. "}\n";
}
@ -33,26 +34,26 @@ foreach ($notes as $note) {
foreach ($notes as $note) {
?>
<div class="col-12 col-sm-6 col-md-6 col-lg-4">
<div class="card mb-3" data-color="<?php echo $note->getColor(); ?>" id="notecard_<?php echo $note->getID(); ?>">
<div class="card notecard mb-3" data-color="<?php echo $note->getColor(); ?>" id="notecard_<?php echo $note->getID(); ?>" data-note="<?php echo $note->getID(); ?>">
<div class="card-body">
<div class="float-right">
<a href="./action.php?action=favoritenote&noteid=<?php echo $note->getID(); ?>" class="text-<?php echo $note->getFavorite() ? "warning" : "body"; ?>">
<a href="./action.php?action=favoritenote&noteid=<?php echo $note->getID(); ?>" class="favorite-btn <?php echo $note->getFavorite() ? "text-warning": ""; ?>">
<i class="fa<?php echo $note->getFavorite() ? "s" : "r"; ?> fa-star"></i>
</a>
</div>
<div class="card-text">
<div class="card-text note-text">
<?php echo $note->getHTML(); ?>
</div>
</div>
<div class="card-footer">
<a href="./app.php?page=editnote&note=<?php echo $note->getID(); ?>" class="text-body mr-2">
<a href="./app.php?page=editnote&note=<?php echo $note->getID(); ?>" class="mr-2">
<i class="fas fa-edit"></i> <?php $Strings->get('Edit'); ?>
</a>
<a href="./action.php?action=downloadnote&noteid=<?php echo $note->getID(); ?>" class="text-body mr-2">
<a href="./action.php?action=downloadnote&noteid=<?php echo $note->getID(); ?>" class="mr-2">
<i class="fas fa-download"></i> <?php $Strings->get('Download'); ?>
</a>
<a href="./action.php?action=deletenote&noteid=<?php echo $note->getID(); ?>" class="text-body text-danger">
<a href="./action.php?action=deletenote&noteid=<?php echo $note->getID(); ?>">
<i class="fas fa-trash"></i> <?php $Strings->get('Delete'); ?>
</a>
</div>

26
static/js/home.js Normal file
View File

@ -0,0 +1,26 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
// Update note content dynamically
setInterval(function () {
$.getJSON("action.php", {
action: "getnotes"
}, function (notes) {
for (var i = 0; i < notes.length; i++) {
n = notes[i];
var notecard = $("#notecard_" + n['noteid']);
var favbtn = notecard.find(".favorite-btn");
notecard.find(".note-text").html(n['html']);
if (n.favorite) {
favbtn.addClass("text-warning");
favbtn.html('<i class="fas fa-star"></i>');
} else {
favbtn.removeClass("text-warning");
favbtn.html('<i class="far fa-star"></i>');
}
}
});
}, 15 * 1000);