Publisher.js

// Copyright (c) 2017 Euan Ong
//
// This program is free software; you can redistribute it and/or
// modify it under the terms of the The GNU Affero General Public
// License as published by the Free Software Foundation; either
// version 3 of the License, or (at your option) any later version.
//
// You should have received a copy of the GNU Affero General Public
// License along with this library; if not, write to the Free Software
// Foundation, 51 Franklin Street, Suite 500 Boston, MA 02110-1335 USA

/*
   global

   _, jQuery, Materialize
*/
/*
   exported

   Publisher
*/

class Publisher {
    constructor(Planet) {
        this.Planet = Planet;
        this.ChipTags = null;
        this.PlaceholderMBImage = "images/mbgraphic.png";
        this.PlaceholderTBImage = "images/tbgraphic.png";
        this.PublisherOfflineHTML =
            "<div>" +
            _("Feature unavailable - cannot connect to server. Reload Music Blocks to try again.") +
            "</div>";
        this.TitleLowerBound = 1;
        this.TitleUpperBound = 50;
        this.DescriptionLowerBound = 1;
        this.DescriptionUpperBound = 1000;
        this.ProjectTable = Planet.LocalPlanet.ProjectTable;
        this.IsShareLink = false;
    }

    dataToTags(DATA) {
        // convert to blocks like structure.
        DATA = JSON.parse(DATA);

        const blocks = {
            blockList: []
        };

        for (const i of DATA) {
            const block = {};
            block.name = typeof i[1] === "string" ? i[1] : i[1][0];
            block.connections = i[4];
            blocks.blockList.push(block);
        }

        //convert blocks to score.
        const score = this.Planet.analyzeProject();

        //0("rhythm"),1("pitch"),2("tone"),3("mouse"),4("pen"),5("number"),
        //6("flow"),7("action"),8("sensors"),9("media"),10("mice")

        //use score to map tags.
        const tags = [];

        //Pitch, Tone, and/or Rhythm
        if (score[1] && score[2]) tags.push("2"); // music

        //pen,mouse
        if (score[3] && score[4]) tags.push("3"); // art

        //sensors
        if (score[8]) tags.push("5"); // interactive

        //number
        if (score[5]) tags.push("4"); // math

        return tags;
    }

    findTagWithName(name) {
        const Planet = this.Planet;
        const keys = Object.keys(Planet.TagsManifest);

        for (let i = 0; i < keys.length; i++)
            if (Planet.TagsManifest[keys[i]].TagName === name) return keys[i];

        return null;
    }

    addTags() {
        const tags = this.Planet.TagsManifest;
        this.ChipTags = {};
        const keys = Object.keys(tags);

        for (let i = 0; i < keys.length; i++)
            if (tags[keys[i]].IsTagUserAddable === "1") this.ChipTags[tags[keys[i]].TagName] = null;

        const maxLength = 5;

        jQuery(".chips").on("chip.add", (e, chip) => {
            // you have the added chip here
            let arr = jQuery(".chips-initial").material_chip("data");

            if (!(chip.tag in this.ChipTags)) arr.splice(arr.length - 1, 1);
            else chip.id = this.findTagWithName(chip.tag);

            if (arr.length > maxLength) arr = arr.slice(0, maxLength);

            this.setTagInput(arr);
        });

        jQuery(".chips").on("chip.delete", (e, chip) => {
            let arr = jQuery(".chips-initial").material_chip("data");

            if (!(chip.tag in this.ChipTags)) arr.splice(arr.length - 1, 1);
            else chip.id = this.findTagWithName(chip.tag);

            this.setTagInput(arr);
        });
    }

    setTagInput(arr) {
        jQuery(".chips-initial").material_chip({
            data: arr,
            autocompleteOptions: {
                data: this.ChipTags,
                limit: Infinity,
                minLength: 1
            }
        });
    }

    setTags(arr) {
        const a = [];

        for (let i = 0; i < arr.length; i++) {
            const o = {};
            o.tag = this.Planet.TagsManifest[arr[i]].TagName;
            o.id = arr[i];
            a.push(o);
        }
        this.setTagInput(a);
    }

    getTags() {
        const t = jQuery(".chips-initial").material_chip("data");
        const a = [];

        for (let i = 0; i < t.length; i++) a.push(t[i].id);

        return a;
    }

    initSubmit() {
        document
            .getElementById("publisher-submit")
            .addEventListener("click", this.publishProject.bind(this));
    }

    open(id, IsShareLink) {
        this.IsShareLink = IsShareLink === undefined ? false : IsShareLink;
        const name = this.ProjectTable[id].ProjectName;
        let image = this.ProjectTable[id].ProjectImage;
        const published = this.ProjectTable[id].PublishedData;
        const DATA = this.ProjectTable[id].ProjectData;
        const description = published !== null ? published.ProjectDescription : "";
        const tags = published !== null ? published.ProjectTags : this.dataToTags(DATA);

        document.getElementById("publisher-ptitle").textContent = _(
            `${published !== null ? "Republish" : "Publish"}  Project`
        );

        const Planet = this.Planet;

        if (Planet.ConnectedToServer) {
            document.getElementById("publish-description").value = description;
            document.getElementById("publish-description-label").setAttribute("data-error", "");
            this.setTags(tags);
            document.getElementById("publish-id").value = id;
            document.getElementById("publish-title").value = name;
            document.getElementById("publish-title-label").setAttribute("data-error", "");

            if (image === null) {
                image = Planet.IsMusicBlocks ? this.PlaceholderMBImage : this.PlaceholderTBImage;
            }

            document.getElementById("publish-image").src = image;
            document.getElementById("publisher-error").textContent = "";
            document.getElementById("publisher-error").style.display = "none";
            Materialize.updateTextFields();
        }

        jQuery("#publisher").modal("open");
    }

    publishProject() {
        const Planet = this.Planet;

        document.getElementById("publisher-error").textContent = "";
        document.getElementById("publisher-error").style.display = "none";
        document.getElementById("publisher-progress").style.visibility = "visible";

        let errors = false;
        const id = document.getElementById("publish-id").value;
        const title = document.getElementById("publish-title");
        const titlelabel = document.getElementById("publish-title-label");

        if (title.value.length < this.TitleLowerBound) {
            errors = true;
            titlelabel.setAttribute("data-error", _("This field is required"));
            title.classList.add("invalid");
            titlelabel.classList.add("active");
        }

        if (title.value.length > this.TitleUpperBound) {
            errors = true;
            titlelabel.setAttribute("data-error", _("Title too long"));
            title.classList.add("invalid");
            titlelabel.classList.add("active");
        }

        const description = document.getElementById("publish-description");
        const descriptionlabel = document.getElementById("publish-description-label");

        if (description.value.length < this.DescriptionLowerBound) {
            errors = true;
            descriptionlabel.setAttribute("data-error", _("This field is required"));
            description.classList.add("invalid");
            descriptionlabel.classList.add("active");
        }

        if (description.value.length > this.DescriptionUpperBound) {
            errors = true;
            descriptionlabel.setAttribute("data-error", _("Description too long"));
            description.classList.add("invalid");
            descriptionlabel.classList.add("active");
        }

        if (errors === true) this.hideProgressBar();
        else {
            const submitobj = {};
            submitobj.ProjectID = id;
            submitobj.ProjectName = title.value;
            submitobj.ProjectDescription = description.value;
            // parseProject() now resolves proto block names to display names when running
            // inside Music Blocks iframe by accessing window.parent.activity.blocks.palettes.
            // This improves project searchability by using human-friendly names (e.g., "pitch"
            // display name) instead of proto identifiers in ProjectSearchKeywords.
            submitobj.ProjectSearchKeywords = this.parseProject(this.ProjectTable[id].ProjectData);
            submitobj.ProjectData = Planet.ProjectStorage.encodeTB(
                this.ProjectTable[id].ProjectData
            );
            submitobj.ProjectImage = this.ProjectTable[id].ProjectImage;
            submitobj.ProjectIsMusicBlocks = Planet.IsMusicBlocks ? 1 : 0;
            submitobj.ProjectCreatorName = Planet.ProjectStorage.getDefaultCreatorName();
            submitobj.ProjectTags = this.getTags();
            const send = JSON.stringify(submitobj);
            const published = {};
            published.ProjectDescription = description.value;
            published.ProjectTags = this.getTags();
            document.getElementById("publisher-submit").style.cursor = "wait";
            document.getElementById("publisher-cancel").style.cursor = "wait";

            for (
                let i = 0;
                i < document.getElementById("publisher-form").getElementsByTagName("INPUT").length;
                i++
            )
                document.getElementById("publisher-form").getElementsByTagName("INPUT")[
                    i
                ].style.cursor = "wait";

            for (
                let i = 0;
                i <
                document.getElementById("publisher-form").getElementsByTagName("TEXTAREA").length;
                i++
            )
                document.getElementById("publisher-form").getElementsByTagName("TEXTAREA")[
                    i
                ].style.cursor = "wait";

            document.body.style.cursor = "wait";
            Planet.ServerInterface.addProject(
                send,
                function (data) {
                    this.afterPublishProject(data, id, title.value, published);
                }.bind(this)
            );
        }
    }

    /**
     * parseProject(tb)
     * Convert project TB to a space-separated list of block names suitable for
     * ProjectSearchKeywords. When possible (i.e., when running inside the main
     * Music Blocks iframe) attempt to map proto names to human-friendly display
     * names using the palettes API (getProtoNameAndPalette). If palettes are not
     * available fall back to the raw proto names.
     *
     * @param {string} tb - JSON string of project blocks
     * @returns {string} space-separated block names
     */
    parseProject(tb) {
        try {
            tb = JSON.parse(tb);
        } catch (error) {
            console.error("Publisher: Failed to parse project data for keyword extraction.", error);
            return "";
        }

        const words = new Set();

        for (let i = 0; i < tb.length; i++) {
            const block = tb[i];

            let name = null;

            if (typeof block[1] === "string") {
                name = block[1];
            } else if (Array.isArray(block[1])) {
                name = block[1][0];
            } else if (typeof block[1] === "number") {
                break;
            }

            if (name === null) continue;

            // Best-effort resolution: if running inside the iframe and the parent
            // window exposes the Activity palette API, map proto name to the
            // human-friendly display name. This ensures Publisher sends meaningful
            // keywords for search when integrated with Music Blocks.
            try {
                if (
                    typeof window !== "undefined" &&
                    window.parent &&
                    window.parent.activity &&
                    window.parent.activity.blocks &&
                    window.parent.activity.blocks.palettes
                ) {
                    const p = window.parent.activity.blocks.palettes.getProtoNameAndPalette(name);
                    if (p && p[2]) name = p[2];
                }
            } catch (e) {
                // ignore and use raw name
            }

            words.add(name);
        }

        let s = "";
        for (const item of words) s += `${item} `;

        return s.slice(0, -1);
    }

    hideProgressBar() {
        document.getElementById("publisher-progress").style.visibility = "hidden";
    }

    afterPublishProject(data, id, name, published) {
        const Planet = this.Planet;

        if (data.success) {
            Planet.ProjectStorage.addPublishedData(id, published);
            Planet.ProjectStorage.renameProject(id, name);
            this.hideProgressBar();
            this.close();
            Planet.LocalPlanet.updateProjects();
            Planet.GlobalPlanet.refreshProjects();

            if (this.IsShareLink)
                document.getElementById("sharebox-" + id).style.display = "initial";
        } else {
            this.throwError(_("Server Error") + " (" + data.error + ") - " + _("Try Again"));
            this.hideProgressBar();
        }

        document.getElementById("publisher-submit").style.cursor = "pointer";
        document.getElementById("publisher-cancel").style.cursor = "pointer";

        for (
            let i = 0;
            i < document.getElementById("publisher-form").getElementsByTagName("INPUT").length;
            i++
        )
            document.getElementById("publisher-form").getElementsByTagName("INPUT")[
                i
            ].style.cursor = "text";

        for (
            let i = 0;
            i < document.getElementById("publisher-form").getElementsByTagName("TEXTAREA").length;
            i++
        )
            document.getElementById("publisher-form").getElementsByTagName("TEXTAREA")[
                i
            ].style.cursor = "text";

        document.body.style.cursor = "default";
    }

    throwError(error) {
        document.getElementById("publisher-error").textContent = error;
        document.getElementById("publisher-error").style.display = "initial";
    }

    close() {
        jQuery("#publisher").modal("close");
    }

    init() {
        const Planet = this.Planet;

        if (!Planet.ConnectedToServer) {
            let element = document.getElementById("publisher-form");
            element.parentNode.removeChild(element);
            element = document.getElementById("publisher-submit");
            element.parentNode.removeChild(element);
            const frag = document.createRange().createContextualFragment(this.PublisherOfflineHTML);
            document.getElementById("publisher-content").appendChild(frag);
        } else {
            this.addTags();
            this.initSubmit();
        }
    }
}