Proyectos de Subversion Moodle

{"version":3,"file":"embedthumbnailinsert.min.js","sources":["../../src/embed/embedthumbnailinsert.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Tiny media plugin embed thumbnail upload class.\n *\n * This handles the embed thumbnail upload using drag-drop.\n *\n * @module      tiny_media/embed/embedthumbnailinsert\n * @copyright   2024 Stevani Andolo <stevani@hotmail.com.au>\n * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport Selectors from '../selectors';\nimport Dropzone from 'core/dropzone';\nimport uploadFile from 'editor_tiny/uploader';\nimport {prefetchStrings} from 'core/prefetch';\nimport {getStrings} from 'core/str';\nimport {component} from \"../common\";\nimport {\n    showElements,\n    startMediaLoading,\n    stopMediaLoading,\n    setPropertiesFromData,\n    body,\n    footer,\n} from '../helpers';\nimport {EmbedThumbnailPreview} from './embedthumbnailpreview';\nimport {EmbedHandler} from './embedhandler';\nimport {displayFilepicker} from 'editor_tiny/utils';\n\nprefetchStrings(component, [\n    'insertmediathumbnail',\n    'uploading',\n    'loadingembedthumbnail',\n    'addmediathumbnaildrop',\n]);\n\nexport class EmbedThumbnailInsert {\n\n    constructor(data) {\n        setPropertiesFromData(this, data); // Creates dynamic properties based on \"data\" param.\n    }\n\n    /**\n     * Init the dropzone and lang strings.\n     *\n     * @param {object} mediaData Object of selected media data\n     */\n    init = async(mediaData) => {\n        this.mediaData = mediaData; // Current selected media data passed from embedPreview.\n        const langStringKeys = [\n            'insertmediathumbnail',\n            'uploading',\n            'loadingembedthumbnail',\n            'addmediathumbnaildrop',\n        ];\n        const langStringvalues = await getStrings([...langStringKeys].map((key) => ({key, component})));\n        this.langStrings = Object.fromEntries(langStringKeys.map((key, index) => [key, langStringvalues[index]]));\n        this.currentModal.uploadThumbnailModal.setTitle(this.langStrings.insertmediathumbnail);\n\n        // Let's init the dropzone if canShowDropZone is true.\n        if (this.canShowDropZone) {\n            const dropZoneEle = document.querySelector(Selectors.EMBED.elements.dropzoneContainer);\n            const dropZone = new Dropzone(\n                dropZoneEle,\n                this.acceptedImageTypes,\n                files => {\n                    this.handleUploadedFile(files);\n                }\n            );\n            dropZone.setLabel(this.langStrings.addmediathumbnaildrop);\n            dropZone.init();\n        }\n\n        this.registerInsertMediaThumbnailEvents(this.thumbnailModalRoot);\n    };\n\n    /**\n     * Load and display a preview thumbnail based on the provided URL, and handles thumbnail loading events.\n     *\n     * @param {string} url - The URL of the thumbnail to load and display.\n     */\n    loadPreviewThumbnail = (url) => {\n        this.media.poster = url;\n\n        let templateContext = {\n            bodyTemplate: Selectors.EMBED.template.body.mediaThumbnailBody,\n            footerTemplate: Selectors.EMBED.template.footer.mediaThumbnailFooter,\n            selector: Selectors.EMBED.type,\n        };\n\n        Promise.all([body(templateContext, this.thumbnailModalRoot), footer(templateContext, this.thumbnailModalRoot)])\n            .then(() => {\n                const mediaThumbnail = new EmbedThumbnailPreview(this);\n                mediaThumbnail.init(this.mediaData);\n                return;\n            })\n            .catch(error => {\n                window.console.log(error);\n            });\n    };\n\n    /**\n     * Handles media preview on file picker callback.\n     *\n     * @param {object} params Object of uploaded file\n     */\n    filePickerCallback = (params) => {\n        if (params.url) {\n            this.loadPreviewThumbnail(params.url);\n        }\n    };\n\n    /**\n     * Updates the content of the loader icon.\n     *\n     * @param {HTMLElement} root - The root element containing the loader icon.\n     * @param {object} langStrings - An object containing language strings.\n     * @param {number|null} progress - The progress percentage (optional).\n     */\n    updateLoaderIcon = (root, langStrings, progress = null) => {\n        const loaderIconState = root.querySelector(Selectors.EMBED.elements.loaderIconContainer + ' div');\n        loaderIconState.innerHTML = (progress !== null) ?\n                               `${langStrings.uploading} ${Math.round(progress)}%` :\n                               langStrings.loadingembedthumbnail;\n    };\n\n    /**\n     * Handles changes in the media URL input field and loads a preview of the media if the URL has changed.\n     */\n    urlChanged() {\n        const url = this.thumbnailModalRoot.querySelector(Selectors.EMBED.elements.fromUrl).value;\n        if (url && url !== this.currentUrl) {\n            this.loadPreviewThumbnail(url);\n        }\n    }\n\n    /**\n     * Handles the uploaded file, initiates the upload process, and updates the UI during the upload.\n     *\n     * @param {FileList} files - The list of files to upload (usually from a file input field).\n     * @returns {Promise<void>} A promise that resolves when the file is uploaded and processed.\n     */\n    handleUploadedFile = async(files) => {\n        try {\n            startMediaLoading(this.thumbnailModalRoot, Selectors.EMBED.type);\n            const fileURL = await uploadFile(this.editor, 'image', files[0], files[0].name, (progress) => {\n                this.updateLoaderIcon(this.thumbnailModalRoot, this.langStrings, progress);\n            });\n\n            // Set the loader icon content to \"loading\" after the file upload completes.\n            this.updateLoaderIcon(this.thumbnailModalRoot, this.langStrings);\n            this.filePickerCallback({url: fileURL});\n        } catch (error) {\n            // Handle the error.\n            const urlWarningLabelEle = this.thumbnailModalRoot.querySelector(Selectors.EMBED.elements.urlWarning);\n            urlWarningLabelEle.innerHTML = error.error !== undefined ? error.error : error;\n            showElements(Selectors.EMBED.elements.urlWarning, this.thumbnailModalRoot);\n            stopMediaLoading(this.thumbnailModalRoot, Selectors.EMBED.type);\n        }\n    };\n\n    /**\n     * Registers events for insert thumbnail modal.\n     *\n     * @param {HTMLElement} root - The root element containing the loader icon.\n     */\n    registerInsertMediaThumbnailEvents = (root) => {\n        const urlEle = root.querySelector(Selectors.EMBED.elements.fromUrl);\n        if (urlEle) {\n            urlEle.addEventListener('input', () => {\n                (new EmbedHandler(this)).toggleUrlButton(urlEle, this.thumbnailModalRoot);\n            });\n        }\n\n        // Handles add media url.\n        const addUrlEle = root.querySelector(Selectors.EMBED.actions.addUrl);\n        if (addUrlEle) {\n            addUrlEle.addEventListener('click', () => {\n                startMediaLoading(this.thumbnailModalRoot, Selectors.EMBED.type);\n                this.urlChanged();\n            });\n        }\n\n        // Handle repository browsing.\n        const imageBrowser = root.querySelector(Selectors.IMAGE.actions.imageBrowser);\n        if (imageBrowser) {\n            imageBrowser.addEventListener('click', async(e) => {\n                e.preventDefault();\n                const params = await displayFilepicker(this.editor, 'image');\n                this.filePickerCallback(params);\n            });\n        }\n    };\n}\n"],"names":["component","constructor","data","async","mediaData","langStringKeys","langStringvalues","map","key","langStrings","Object","fromEntries","index","currentModal","uploadThumbnailModal","setTitle","this","insertmediathumbnail","canShowDropZone","dropZoneEle","document","querySelector","Selectors","EMBED","elements","dropzoneContainer","dropZone","Dropzone","acceptedImageTypes","files","handleUploadedFile","setLabel","addmediathumbnaildrop","init","registerInsertMediaThumbnailEvents","thumbnailModalRoot","url","media","poster","templateContext","bodyTemplate","template","body","mediaThumbnailBody","footerTemplate","footer","mediaThumbnailFooter","selector","type","Promise","all","then","EmbedThumbnailPreview","catch","error","window","console","log","params","loadPreviewThumbnail","root","progress","loaderIconState","loaderIconContainer","innerHTML","uploading","Math","round","loadingembedthumbnail","fileURL","editor","name","updateLoaderIcon","filePickerCallback","urlWarning","undefined","urlEle","fromUrl","addEventListener","EmbedHandler","toggleUrlButton","addUrlEle","actions","addUrl","urlChanged","imageBrowser","IMAGE","e","preventDefault","value","currentUrl"],"mappings":"01BA2CgBA,kBAAW,CACvB,uBACA,YACA,wBACA,8DAKAC,YAAYC,mCASLC,MAAAA,iBACEC,UAAYA,gBACXC,eAAiB,CACnB,uBACA,YACA,wBACA,yBAEEC,uBAAyB,mBAAW,IAAID,gBAAgBE,KAAKC,OAAUA,IAAAA,IAAKR,UAAAA,+BAC7ES,YAAcC,OAAOC,YAAYN,eAAeE,KAAI,CAACC,IAAKI,QAAU,CAACJ,IAAKF,iBAAiBM,gBAC3FC,aAAaC,qBAAqBC,SAASC,KAAKP,YAAYQ,sBAG7DD,KAAKE,gBAAiB,OAChBC,YAAcC,SAASC,cAAcC,mBAAUC,MAAMC,SAASC,mBAC9DC,SAAW,IAAIC,kBACjBR,YACAH,KAAKY,oBACLC,aACSC,mBAAmBD,UAGhCH,SAASK,SAASf,KAAKP,YAAYuB,uBACnCN,SAASO,YAGRC,mCAAmClB,KAAKmB,oEAQzBC,WACfC,MAAMC,OAASF,QAEhBG,gBAAkB,CAClBC,aAAclB,mBAAUC,MAAMkB,SAASC,KAAKC,mBAC5CC,eAAgBtB,mBAAUC,MAAMkB,SAASI,OAAOC,qBAChDC,SAAUzB,mBAAUC,MAAMyB,MAG9BC,QAAQC,IAAI,EAAC,iBAAKX,gBAAiBvB,KAAKmB,qBAAqB,mBAAOI,gBAAiBvB,KAAKmB,sBACrFgB,MAAK,KACqB,IAAIC,6CAAsBpC,MAClCiB,KAAKjB,KAAKZ,cAG5BiD,OAAMC,QACHC,OAAOC,QAAQC,IAAIH,wDASTI,SACdA,OAAOtB,UACFuB,qBAAqBD,OAAOtB,iDAWtB,SAACwB,KAAMnD,iBAAaoD,gEAAW,WACxCC,gBAAkBF,KAAKvC,cAAcC,mBAAUC,MAAMC,SAASuC,oBAAsB,QAC1FD,gBAAgBE,UAA0B,OAAbH,mBACHpD,YAAYwD,sBAAaC,KAAKC,MAAMN,eACvCpD,YAAY2D,oEAmBlBjE,MAAAA,2CAEKa,KAAKmB,mBAAoBb,mBAAUC,MAAMyB,YACrDqB,cAAgB,qBAAWrD,KAAKsD,OAAQ,QAASzC,MAAM,GAAIA,MAAM,GAAG0C,MAAOV,gBACxEW,iBAAiBxD,KAAKmB,mBAAoBnB,KAAKP,YAAaoD,kBAIhEW,iBAAiBxD,KAAKmB,mBAAoBnB,KAAKP,kBAC/CgE,mBAAmB,CAACrC,IAAKiC,UAChC,MAAOf,OAEsBtC,KAAKmB,mBAAmBd,cAAcC,mBAAUC,MAAMC,SAASkD,YACvEV,eAA4BW,IAAhBrB,MAAMA,MAAsBA,MAAMA,MAAQA,gCAC5DhC,mBAAUC,MAAMC,SAASkD,WAAY1D,KAAKmB,kDACtCnB,KAAKmB,mBAAoBb,mBAAUC,MAAMyB,qEAS5BY,aAC5BgB,OAAShB,KAAKvC,cAAcC,mBAAUC,MAAMC,SAASqD,SACvDD,QACAA,OAAOE,iBAAiB,SAAS,SACxBC,2BAAa/D,MAAOgE,gBAAgBJ,OAAQ5D,KAAKmB,6BAKxD8C,UAAYrB,KAAKvC,cAAcC,mBAAUC,MAAM2D,QAAQC,QACzDF,WACAA,UAAUH,iBAAiB,SAAS,oCACd9D,KAAKmB,mBAAoBb,mBAAUC,MAAMyB,WACtDoC,sBAKPC,aAAezB,KAAKvC,cAAcC,mBAAUgE,MAAMJ,QAAQG,cAC5DA,cACAA,aAAaP,iBAAiB,SAAS3E,MAAAA,IACnCoF,EAAEC,uBACI9B,aAAe,4BAAkB1C,KAAKsD,OAAQ,cAC/CG,mBAAmBf,iDAtJV1C,KAAMd,MA0FhCkF,mBACUhD,IAAMpB,KAAKmB,mBAAmBd,cAAcC,mBAAUC,MAAMC,SAASqD,SAASY,MAChFrD,KAAOA,MAAQpB,KAAK0E,iBACf/B,qBAAqBvB"}