29-sticky-notes.htm

<!DOCTYPE html>
<html lang="en">
    <head>

        <title>Sticky Notes</title>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- LIBRARY FILES: basic.css and basic.js come first, your own code after them -->
        <link rel="preload" href="../basic/font/open-sans/OpenSans-Regular.ttf" as="font" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="../basic/basic.css">
        <script src="../basic/basic.js" type="text/javascript" charset="utf-8"></script>

        <script>

        /*

        STICKY NOTES

        A board of notes. Move a note by its top, write in it, and the notes are still there
        after the page is reloaded.

        - Drag with pointer events             -> works with the mouse, a finger and a pen.
          pointerdown on the top of a note, then page.on("pointermove" / "pointerup") until the drag ends.
          page.on() returns a remover function: the drag removes its own events at the end.
        - note.bringToFront()                  -> the touched note is on top of the others.
        - basic.clamp(value, min, max)         -> a note never leaves the board.
        - basic.objectOf(event.target)         -> which basic.js object is under the pointer?
        - A raw <textarea> inside a Box        -> it needs pointer-events: auto and user-select: text.
        - note.listenTo(textarea, "input", fn) -> an event of a raw element. It is removed with the note.
        - waitAndRun(timer, fn, ms)            -> saves 400 ms after the last key, not on every key.
        - basic.storage.save() / loadOr()      -> the notes are kept in localStorage.

        Double-click the empty board to add a note where you clicked.

        TRY: add a color to NOTE_COLORS: a new round button comes in the toolbar.

        */

        // *** VARIABLES:

        const STORAGE_KEY = "basic-samples-sticky-notes";

        const NOTE_WIDTH = 200;
        const NOTE_HEIGHT = 180;
        const HEADER_HEIGHT = 32;

        // "+ New note": the first one is here, every next one a step lower and to the right.
        const NEW_NOTE_X = 60;
        const NEW_NOTE_Y = 110;
        const NEW_NOTE_STEP = 28;
        const NEW_NOTE_STEPS = 8;       // then it starts again from the first place

        const SAVE_DELAY = 400;         // ms after the last key
        const FADE_TIME = 200;          // ms

        const NOTE_COLORS = ["#FFE98A", "#FFC7C2", "#BDE6C8", "#BFD9FF", "#E3CCFF"];

        const NOTE_SHADOW = "0 4px 10px rgba(0, 0, 0, 0.12)";
        const DRAG_SHADOW = "0 14px 28px rgba(0, 0, 0, 0.22)";

        // WHY: The page helpers are in one object, so their names can not clash with basic.js.
        const Board = {};

        Board.notes = [];              // The note boxes. note.data is its saved data.
        Board.newColor = NOTE_COLORS[0];
        Board.swatches = [];
        Board.saveTimer = null;

        let board;

        // *** START:

        const start = function () {

            page.color = "#EFE9DD";

            // BOX: The board. The notes are created in it.
            // WHY: zIndex: 0 keeps the z-index of the notes inside the board, so a note that is
            //      brought to the front many times still stays under the toolbar.
            board = Box(0, 0, "100%", "100%", {
                color: "transparent",
                zIndex: 0,
                clickable: 1,
                css: {
                    backgroundImage: "radial-gradient(" + Black(0.12) + " 1px, transparent 1px)",   // the dots
                    backgroundSize: "22px 22px",
                },
            });

            board.on("dblclick", function (self, event) {

                // WHY: Only the empty board. A double-click in a note selects a word.
                if (basic.objectOf(event.target) !== board) return;

                // The top of the new note comes under the pointer.
                const boardRect = board.elem.getBoundingClientRect();
                const x = event.clientX - boardRect.left - NOTE_WIDTH / 2;
                const y = event.clientY - boardRect.top - HEADER_HEIGHT / 2;
                Board.addNote(x, y);

            });

            Board.createToolbar();

            // GROUP: The hint at the bottom center. (A group is not clickable, the board still gets the clicks.)
            VGroup({ align: "center bottom", padding: 16, zIndex: 1 });
                Label({ text: "Double-click the board to add a note. Move a note by its top.",
                    fontSize: 13, textColor: Black(0.4) });
            endGroup();

            // The saved notes. The first time, two example notes.
            const savedNotes = basic.storage.loadOr(STORAGE_KEY, [
                { x: NEW_NOTE_X, y: NEW_NOTE_Y, color: NOTE_COLORS[0], text: "Move me by my top." },
                { x: 300, y: 170, color: NOTE_COLORS[3], text: "Click here and write something.\nIt is saved." },
            ]);

            // WHY: The board was made before the toolbar. createIn() creates the notes in the board.
            createIn(board, function () {
                savedNotes.forEach(function (data) { Board.createNote(data); });
            });

            // The notes come back inside the board when the window gets smaller.
            page.onResize(function () { Board.notes.forEach(Board.keepInBoard); });

        };

        // *** VIEW:

        Board.createToolbar = function () {

            // GROUP: Toolbar (on the page, over the board)
            HGroup({
                left: 16,
                top: 16,
                hug: 1,
                wrap: 1,            // WHY: On a narrow phone the last buttons go to a second line (not squeezed).
                gap: 8,
                padding: [10, 8],
                align: "left center",
                color: "white",
                round: 12,
                boxShadow: NOTE_SHADOW,
                zIndex: 1,
                clipContent: 0,
            });

                Button({
                    text: "+ New note",
                    width: "auto",
                    height: 36,
                    padding: [14, 0],
                    minimal: 1,
                    color: "#2F2F2F",
                    textColor: "white",
                    round: 8,
                    fontSize: 15,
                });
                that.on("click", Board.addNewNote);   // that: the object created last (the button)

                // One round button for every color. The selected one has a border.
                NOTE_COLORS.forEach(function (color) {

                    const swatch = Button({
                        text: "",
                        width: 26,
                        height: 26,
                        minimal: 1,
                        color: color,
                        round: 13,
                        border: 2,
                        borderColor: "transparent",
                    });
                    swatch.noteColor = color;
                    swatch.on("click", Board.selectColor);
                    Board.swatches.push(swatch);

                });

                Button({
                    text: "Clear",
                    width: "auto",
                    height: 36,
                    padding: [12, 0],
                    minimal: 1,
                    color: "transparent",
                    textColor: Black(0.55),
                    round: 8,
                    fontSize: 15,
                });
                that.on("click", Board.clearAll);

            endGroup();

            Board.selectColor(Board.swatches[0]);

        };

        // One note: a header to move it, a ✕ button and a textarea.
        Board.createNote = function (data) {

            // BOX: The note
            const note = startBox(data.x, data.y, NOTE_WIDTH, NOTE_HEIGHT, {
                color: data.color,
                round: 6,
                boxShadow: NOTE_SHADOW,
            });

                // BOX: Header. The note moves only from here, so the text in the textarea can still be selected.
                note.header = Box(0, 0, "100%", HEADER_HEIGHT, {
                    color: Black(0.05),
                    clickable: 1,
                    cursor: "grab",
                    css: { touchAction: "none" },   // WHY: A finger moves the note, not the page.
                });

                // BUTTON: ✕ at the top right, over the header
                note.deleteButton = Button({
                    right: 2,
                    top: 2,
                    text: "✕",
                    width: 28,
                    height: 28,
                    minimal: 1,
                    color: "transparent",
                    textColor: Black(0.4),
                    round: 14,
                    fontSize: 13,
                    // WHY: A button with only a symbol: a screen reader says this name.
                    aria: { label: "Delete the note" },
                });
                note.deleteButton.on("click", function () { Board.deleteNote(note); });

                // BOX: The textarea goes in it.
                note.body = Box(0, HEADER_HEIGHT, "100%", NOTE_HEIGHT - HEADER_HEIGHT, { color: "transparent" });

            endBox();

            note.data = data;
            note.textarea = Board.createTextarea(note);

            note.header.on("pointerdown", function (self, event) { Board.startDrag(note, event); });

            Board.keepInBoard(note);
            Board.notes.push(note);

            return note;

        };

        // TEXTAREA: basic.js has no multi-line input, so a raw HTML element is added into note.body.
        Board.createTextarea = function (note) {

            const textarea = document.createElement("textarea");
            textarea.value = note.data.text;
            textarea.placeholder = "Write here...";
            textarea.spellcheck = false;

            // Object.assign(): every style below is set on the element.
            Object.assign(textarea.style, {
                position: "absolute",
                left: "0",
                top: "0",
                width: "100%",
                height: "100%",
                boxSizing: "border-box",
                padding: "10px 12px",
                border: "none",
                outline: "none",
                resize: "none",
                background: "transparent",
                fontFamily: "opensans",
                fontSize: "15px",
                lineHeight: "1.4",
                color: Black(0.75),
                // WHY: basic.css gives every box pointer-events: none and user-select: none.
                //      Without these two lines, the textarea can not be clicked or written in.
                pointerEvents: "auto",
                userSelect: "text",
            });

            note.body.elem.appendChild(textarea);

            note.listenTo(textarea, "input", function () {
                note.data.text = textarea.value;
                Board.saveLater();
            });

            // WHY: A click in the text brings the note to the front, too.
            note.listenTo(textarea, "pointerdown", function () { note.bringToFront(); });

            return textarea;

        };

        // *** DRAG:

        Board.startDrag = function (note, event) {

            event.preventDefault();   // WHY: The press does not start a text selection.
            note.bringToFront();

            // Where the pointer is on the note, so the note does not jump to the pointer.
            const offsetX = event.clientX - note.left;
            const offsetY = event.clientY - note.top;

            // The note is lifted while it moves.
            note.header.cursor = "grabbing";
            note.boxShadow = DRAG_SHADOW;
            note.css.transform = "scale(1.03)";

            const moveNote = function (self, moveEvent) {
                note.left = moveEvent.clientX - offsetX;
                note.top = moveEvent.clientY - offsetY;
                Board.keepInBoard(note);
            };

            const endDrag = function () {

                removeMove();
                removeUp();
                removeCancel();

                note.header.cursor = "grab";
                note.boxShadow = NOTE_SHADOW;
                note.css.transform = "none";

                note.data.x = note.left;
                note.data.y = note.top;
                Board.save();

            };

            // WHY: On the page, not on the note: a fast pointer can leave the note while it moves.
            const removeMove = page.on("pointermove", moveNote);
            const removeUp = page.on("pointerup", endDrag);
            const removeCancel = page.on("pointercancel", endDrag);

        };

        // The note stays inside the board. (Also after the window gets smaller.)
        Board.keepInBoard = function (note) {
            const maxX = Math.max(0, board.width - NOTE_WIDTH);
            const maxY = Math.max(0, board.height - NOTE_HEIGHT);
            note.left = basic.clamp(note.left, 0, maxX);
            note.top = basic.clamp(note.top, 0, maxY);
        };

        // *** NOTES:

        // "+ New note": a little lower and to the right of the one before, so they do not cover each other.
        Board.addNewNote = function () {
            const step = Board.notes.length % NEW_NOTE_STEPS;
            const x = NEW_NOTE_X + step * NEW_NOTE_STEP;
            const y = NEW_NOTE_Y + step * NEW_NOTE_STEP;
            Board.addNote(x, y);
        };

        Board.addNote = function (x, y) {

            // createIn() creates the note in the board, and returns what its function returns.
            const note = createIn(board, function () {
                return Board.createNote({ x: x, y: y, color: Board.newColor, text: "" });
            });

            note.bringToFront();
            note.opacity = 0;
            note.animate({ opacity: 1 }, FADE_TIME);
            note.textarea.focus();

            Board.save();

        };

        Board.deleteNote = async function (note) {

            // WHY: A note that is fading out is not deleted again (a second click on ✕).
            if (note.isDeleting) return;
            note.isDeleting = 1;

            Board.notes = Board.notes.filter(function (other) { return other !== note; });
            Board.save();

            await note.animate({ opacity: 0 }, FADE_TIME);
            note.remove();   // The textarea and its events go with it: they are in the note.

        };

        Board.clearAll = function () {
            if (Board.notes.length === 0) return;
            if (!confirm("Delete all notes?")) return;
            // slice(): a copy of the list, because deleteNote() changes Board.notes.
            Board.notes.slice().forEach(Board.deleteNote);
        };

        Board.selectColor = function (swatch) {
            Board.newColor = swatch.noteColor;
            Board.swatches.forEach(function (other) {
                other.borderColor = (other === swatch) ? Black(0.6) : "transparent";
            });
        };

        // *** SAVE:

        Board.save = function () {
            const allData = Board.notes.map(function (note) { return note.data; });
            basic.storage.save(STORAGE_KEY, allData);
        };

        // WHY: Writing to localStorage on every key is not needed. It saves when the user stops writing.
        Board.saveLater = function () {
            Board.saveTimer = waitAndRun(Board.saveTimer, Board.save, SAVE_DELAY);
        };

        </script>

    </head>
    <body>
    </body>
</html>