<commit_before>import { importHtml, importOnCall, importRef, ajax, initMsaBox, exportMsaBox } from "/utils/msa-utils.js"

const popupSrc = "/utils/msa-utils-popup.js"
const addPopup = importOnCall(popupSrc, "addPopup")

importHtml(`<style>
	msa-page {
        display: flex;
        flex-direction: column;
		flex: 1;
	}
</style>`)


export class HTMLMsaPageElement extends HTMLElement {

    getBaseUrl() {
        return "/page"
    }
    getId() {
        return this.getAttribute("page-id")
    }
    isEditable() {
        return (this.getAttribute("editable") == "true")
    }
    toFetch() {
        return (this.getAttribute("fetch") !== "false")
    }

    async connectedCallback() {
        this.editing = false
        if (this.toFetch())
            await this.getPage()
        // dynamically import msa-page-menu
        //if (this.isEditable())
        //    importHtml({ wel: '/page/msa-page-menu.js' }, this)
        this.initAddButtons()
    }

    initAddButtons() {
        const addBut = this.createAddButton()
        this.appendChild(addBut)
    }

    createAddButton() {
        const addBut = document.createElement("button")
        addBut.classList.add("msa-page-editor")
        addBut.textContent = "Add"
        addBut.onclick = async () => {
            await import("/utils/msa-utils-boxes-menu.js")
            const popup = await addPopup(this, document.createElement("msa-utils-boxes-menu"))
            popup.content.onSelect = async boxInfo => {
                popup.remove()
                const createFun = await importRef(boxInfo.createRef)
                const box = await createFun(this)
                await this.initMsaBox(box)
                this.insertBefore(box, addBut)
                this.postPage()
            }
        }
        return addBut
    }

    async initMsaBox(box) {
        await initMsaBox(box, { boxesRoute: `${this.getBaseUrl()}/${this.getId()}/_box` })
    }

    async getPage() {
        const page = await ajax("GET", `${this.getBaseUrl()}/${this.getId()}/_page`)
        const template = document.createElement("template")
        template.innerHTML = page.content || ""
        await this.initMsaBox(template.content)
        this.appendChild(template.content)
        this.setAttribute("editable", page.editable || false)
    }

    async postPage() {
        const tmpl = await exportMsaBox(this.children)
        for (let ed of tmpl.content.querySelectorAll(".msa-page-editor")) ed.remove()
        await ajax("POST", `${this.getBaseUrl()}/${this.getId()}/_page`, {<commit_msg>adit msa boxes on dblclick<commit_after>import { importHtml, importOnCall, importRef, ajax, initMsaBox, exportMsaBox, editMsaBox, forEachDeepMsaBox } from "/utils/msa-utils.js"

const popupSrc = "/utils/msa-utils-popup.js"
const addPopup = importOnCall(popupSrc, "addPopup")

importHtml(`<style>
	msa-page {
        margin: .5em;
        display: flex;
        flex-direction: column;
		flex: 1;
	}
</style>`)


export class HTMLMsaPageElement extends HTMLElement {

    getBaseUrl() {
        return "/page"
    }
    getId() {
        return this.getAttribute("page-id")
    }
    isEditable() {
        return (this.getAttribute("editable") == "true")
    }
    toFetch() {
        return (this.getAttribute("fetch") !== "false")
    }

    async connectedCallback() {
        this.editing = false
        if (this.toFetch())
            await this.getPage()
        // dynamically import msa-page-menu
        //if (this.isEditable())
        //    importHtml({ wel: '/page/msa-page-menu.js' }, this)
        this.initAddButtons()
    }

    initAddButtons() {
        const addBut = this.createAddButton()
        this.appendChild(addBut)
    }

    createAddButton() {
        const addBut = document.createElement("button")
        addBut.classList.add("msa-page-editor")
        addBut.textContent = "Add"
        addBut.onclick = async () => {
            await import("/utils/msa-utils-boxes-menu.js")
            const popup = await addPopup(this, document.createElement("msa-utils-boxes-menu"))
            popup.content.onSelect = async (tag, boxInfo) => {
                popup.remove()
                const createFun = await importRef(boxInfo.createRef)
                const box = createFun ? await createFun(this) : document.createElement(tag)
                await this.initMsaBox(box)
                this.insertBefore(box, addBut)
                this.postPage()
            }
        }
        return addBut
    }

    async initMsaBox(box) {
        await initMsaBox(box, { boxesRoute: `${this.getBaseUrl()}/${this.getId()}/_box` })
        await forEachDeepMsaBox(box, (_box, boxInfo) => {
            _box.addEventListener("dblclick", () => {
                _box.msaPageEditing = true
                editMsaBox(_box, true)
            })
            _box.addEventListener("blur", async () => {
                if (!_box.msaPageEditing) return
                delete _box.msaPageEditing
                await editMsaBox(_box, false)
                this.postPage()
            })
        })
    }

    async getPage() {
        const page = await ajax("GET", `${this.getBaseUrl()}/${this.getId()}/_page`)
        const template = document.createElement("template")
        template.innerHTML = page.content || ""
        await this.initMsaBox(template.content)
        this.appendChild(template.content)
        this.setAttribute("editable", page.editable || false)
    }

    async postPage() {
        const tmpl = await exportMsaBox(this.children)
        for (let ed of tmpl.content.querySelectorAll(".msa-page-editor")) ed.remove()
        await ajax("POST", `${this.getBaseUrl()}/${this.getId()}/_page`, {
{'fraction_non_alphanumeric': 0.13601263601263602, 'fraction_numerical': 0.0005265005265005265, 'mean_word_length': 2.212514092446449, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 14, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '68065', 'n_tokens_mistral': 1719, 'n_tokens_neox': 1713, 'n_words': 313}