NotePostApp/www/js/home.js

/*
 * 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/.
 */

var force_card_refresh = false;

$(".view-main").on("ptr:refresh", ".ptr-content", function () {
    loadCards(function () {
        app.ptr.done();
    });
});

$(".view-main").on("input change", "#searchbar-input", function () {
    window.shuffleInstance.filter(function (element) {
        var searchtext = $("#searchbar-input").val().toLowerCase();
        var notetext = $(".card-content", $(element)).text().toLowerCase();
        return (notetext.indexOf(searchtext) !== -1);
    });
});

$(".view-main").on("click", ".parsedown-task-list", function (e) {
    var noteid = $(this).closest(".notecard").data("id");
    var note = NOTES.get(noteid);
    var checkbox = $(this).find("input[type=checkbox]");
    var line = $(this);
    var text = line.text().trim();
    // The checkbox has already changed by itself if it was clicked directly
    var checked = checkbox.prop("checked");
    if (e.target.nodeName != "INPUT") {
        checked = !checked;
    }

    var checkedState = note.toggleChecklistItem(text);

    note.setModified();

    NOTES.set(note);
    NOTES.syncAll();

    if (checkedState) {
        line.addClass("parsedown-task-list-close");
        line.removeClass("parsedown-task-list-open");
        checkbox.prop("checked", true);
    } else {
        line.addClass("parsedown-task-list-open");
        line.removeClass("parsedown-task-list-close");
        checkbox.prop("checked", false);
    }

});

function loadNotesToCards(notes, oldnotes, callback) {
    var reloadCards = true;
    if (force_card_refresh != true && notes.length == oldnotes.length) {
        var allSame = true;
        var allPresent = true;
        for (var n in notes) {
            if (!notes[n].compareTo(oldnotes[n])) {
                allSame = false;
            }
            if (document.getElementById('notecard-col-' + notes[n].getID()) === null) {
                allPresent = false;
            }
        }
        if (allSame && allPresent) {
            reloadCards = false;
        }
    }
    force_card_refresh = false;
    if (reloadCards) {
        for (i in window.shuffleInstance.items) {
            window.shuffleInstance.remove(window.shuffleInstance.items[i]);
        }
        $(".notecard-col").remove();
    }
    var trayitems = [];
    for (n in notes) {
        var note = notes[n];
        // Ignore notes that we deleted but haven't synced yet
        if (note.getSyncStatus() == "LOCAL_DELETED") {
            continue;
        }
        if (reloadCards) {
            $("#notecards-bin").append('<div class="col-100 medium-50 large-33 notecard-col grid-item" id="notecard-col-' + note.noteid + '" data-favorite="' + (note.favorite ? "1" : "0") + '">'
                    + '<div class="card notecard" id="notecard-' + note.getID() + '" data-id="' + note.getID() + '" data-favorite="' + (note.getFavorite() ? "1" : "0") + '" data-bg="' + note.getColor() + '" data-fg="' + note.getTextColor() + '" style="background-color: #' + note.getColor() + '; color: #' + note.getTextColor() + ';">'
                    + '<div class="editbtn">'
                    + '<i class="material-icons">edit</i>'
                    + '</div>'
                    + '<div class="menubtn">'
                    + '<i class="material-icons">more_vert</i>'
                    + '</div>'
                    + '<div class="card-content card-content-padding"><div class="btnswrapthing"></div>' + note.getHTML() + '</div>'
                    + '</div>'
                    + '</div>');
        }
        trayitems.push({
            title: note.getTitle(),
            id: note.getID()
        });
    }
    if (reloadCards) {
        $(".notecard .card-content ul li:has(input[type=checkbox])").addClass("parsedown-task-list");
        $(".notecard .card-content ul li:has(input[type=checkbox]:checkbox:not(:checked))").addClass("parsedown-task-list-open");
        $(".notecard .card-content ul li:has(input[type=checkbox]:checkbox:checked)").addClass("parsedown-task-list-close");
        $(".parsedown-task-list input[type=checkbox]").removeAttr("disabled");
        var noteElements = document.getElementsByClassName("notecard-col");
        window.shuffleInstance.add(noteElements);
        window.shuffleInstance.sort({
            reverse: true,
            by: function (el) {
                if (el.getAttribute("id") == "offline-indicator") {
                    return "999999999";
                }
                return el.getAttribute("data-favorite");
            }
        });
    }
    setTrayMenu(trayitems);
    // Make sure gutters and stuff work
    setTimeout(function () {
        window.shuffleInstance.layout();
    }, 500);
    if (typeof callback == 'function') {
        callback();
    }
}

function loadCards(callback) {
    var oldnotes = NOTES.getAll().slice();
    NOTES.syncAll(function (notes) {
        $("#home-loading-progressbar").css("display", "none");
        if ($("#offline-indicator").css("display") != "none") {
            app.toast.create({
                text: '<i class="fas fa-globe-americas"></i> &nbsp; Back online.',
                closeTimeout: 5000
            }).open();
        }
        $("#offline-indicator").css("display", "none");
        console.log("Comparing: ", notes, oldnotes);
        loadNotesToCards(notes, oldnotes, callback);
    }, function (notes) {
        $("#offline-indicator").css("display", "");
        loadNotesToCards(notes, oldnotes, callback);
    });
}

function editNote(id) {
    var note = NOTES.get(id);
    router.navigate("/editor", {
        context: {
            noteid: id,
            content: note.getText(),
            notetitle: note.getTitle(),
        }
    });
    console.log("Editing " + id);
}

function favoriteNote(id) {
    var note = NOTES.get(id);
    note.setFavorite(!note.getFavorite());
    note.setModified();
    $("#notecard-" + id).attr("data-favorite", note.getFavorite() ? "1" : "0");
    note.saveNote();
    NOTES.syncAll();
}

function makeList(id) {
    var note = NOTES.get(id);
    note.toChecklist();
    note.setModified();
    note.saveNote();
    force_card_refresh = true;
    app.ptr.refresh();
}

function deleteNote(id) {
    app.dialog.confirm('Are you sure?', 'Delete Note', function () {
        var note = NOTES.get(id);
        note.deleteme();
        NOTES.set(note);
        window.shuffleInstance.remove(document.getElementById("notecard-col-" + id));
        $("#notecard-col-" + id).remove();
        window.shuffleInstance.layout();
        loadCards();
    });
}

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

$("#app").on("click", ".listify-note-btn", function () {
    makeList($(this).data("note"));
    app.popover.close();
});

$("#app").on("click", ".delete-note-btn", function () {
    deleteNote($(this).data("note"));
    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.setColor(color);
    note.setModified();
    note.saveNote();
    NOTES.syncAll();
    $("#notecard-" + noteid).data("bg", note.getColor());
    $("#notecard-" + noteid).data("fg", note.getTextColor());
    $("#notecard-" + noteid).attr("data-bg", note.getColor());
    $("#notecard-" + noteid).attr("data-fg", note.getTextColor()); // For CSS starbg
    $("#notecard-" + noteid).css("background-color", "#" + note.getColor());
    $("#notecard-" + noteid).css("color", "#" + note.getTextColor());
});

function openNoteActionMenu(notecard) {
    var noteid = notecard.data("id");
    if (window.innerWidth < 768) {
        var actionsheet = app.actions.create({
            buttons: [
                {
                    text: "Edit",
                    bold: true,
                    icon: '<i class="fas fa-edit fa-fw"></i>',
                    onClick: function () {
                        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-half-alt fa-fw"></i>',
                    onClick: function () {
                        favoriteNote(noteid);
                    }
                },
                {
                    text: "Make a List",
                    icon: '<i class="fas fa-tasks fa-fw"></i>',
                    onClick: function () {
                        makeList(noteid);
                    }
                },
                {
                    text: "Delete",
                    color: "red",
                    icon: '<i class="fas fa-trash fa-fw"></i>',
                    onClick: function () {
                        deleteNote(noteid);
                    }
                }
            ]
        });

        actionsheet.open();
        return false;
    } else {
        var contextPopover = app.popover.create({
            targetEl: notecard.children(".menubtn"),
            content: '<div class="popover">' +
                    '<div class="popover-inner">' +
                    '<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-half-alt 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 text-color-red" data-note="' + noteid + '"><i class="fas fa-trash fa-fw"></i> Delete</a></li>' +
                    '</ul>' +
                    '</div>' +
                    '</div>' +
                    '</div>'
        });
        contextPopover.open();
    }
    return false;
}

$(".view-main").on("click", ".notecard .menubtn", function () {
    return openNoteActionMenu($(this).parent());
});

$(".view-main").on("click", ".notecard .editbtn", function () {
    editNote($(this).parent().data("id"));
});

$(".view-main").on("contextmenu", ".notecard", function () {
    return openNoteActionMenu($(this));
});

// Re-layout notes when any images load
$("img").on("load", function () {
    console.log("Image loaded, redoing layout...");
    window.shuffleInstance.layout();
});