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

action.php

@@ -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));
 }

lib/Note.lib.php

@@ -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(),

pages.php

@@ -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"

pages/home.php

@@ -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>

static/js/home.js

@@ -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);