Proyectos de Subversion Moodle

{"version":3,"file":"categorylist.min.js","sources":["../src/categorylist.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 * The category list component.\n *\n * The category list is a drop target, so that a category may be dropped at the top or bottom of the list.\n *\n * @module     qbank_managecategories/categorylist\n * @class      qbank_managecategories/categorylist\n */\n\nimport {BaseComponent, DragDrop} from 'core/reactive';\nimport Templates from 'core/templates';\nimport {getString} from 'core/str';\nimport {categorymanager} from 'qbank_managecategories/categorymanager';\n\nexport default class extends BaseComponent {\n\n    create(descriptor) {\n        this.name = descriptor.element.id;\n        this.selectors = {\n            CATEGORY_LIST: '.qbank_managecategories-categorylist',\n            CATEGORY_ITEM: '.qbank_managecategories-item[data-categoryid]',\n            CATEGORY_CONTENTS: '.qbank_managecategories-item > .container',\n            CATEGORY_DETAILS: '.qbank_managecategories-details',\n            CATEGORY_NO_DRAGHANDLE: '.qbank_managecategories-item[data-categoryid]:not(.draghandle)',\n            CATEGORY_ID: id => `#category-${id}`,\n        };\n        this.classes = {\n            DROP_TARGET_BEFORE: 'qbank_managecategories-droptarget-before',\n            DROP_TARGET: 'qbank_managecategories-droptarget',\n            NO_BOTTOM_PADDING: 'pb-0',\n        };\n        this.ids = {\n            CATEGORY: id => `category-${id}`,\n        };\n    }\n\n    stateReady() {\n        this.dragdrop = new DragDrop(this);\n    }\n\n    destroy() {\n        // The draggable element must be unregistered.\n        if (this.dragdrop !== undefined) {\n            this.dragdrop.unregister();\n            this.dragdrop = undefined;\n        }\n    }\n\n    /**\n     * Static method to create a component instance.\n     *\n     * @param {string} target the DOM main element or its ID\n     * @param {object} selectors optional css selector overrides\n     * @return {Component}\n     */\n    static init(target, selectors) {\n        return new this({\n            element: document.querySelector(target),\n            selectors,\n            reactive: categorymanager,\n        });\n    }\n\n    validateDropData() {\n        return true;\n    }\n\n    /**\n     * Highlight the border of the list where the category will be moved.\n     *\n     * If dropping at the top of the list, highlight the top border.\n     * If dropping at the bottom, highlight the bottom border.\n     *\n     * @param {Object} dropData\n     * @param {Event} event\n     */\n    showDropZone(dropData, event) {\n        const dropTarget = this.getElement();\n        if (dropTarget.closest(this.selectors.CATEGORY_ID(dropData.id))) {\n            // Can't drop onto its own child.\n            return false;\n        }\n        if (this.getInsertBefore(event, dropTarget)) {\n            dropTarget.classList.add(this.classes.DROP_TARGET_BEFORE);\n            dropTarget.classList.remove(this.classes.DROP_TARGET);\n        } else {\n            dropTarget.classList.add(this.classes.DROP_TARGET);\n            dropTarget.classList.remove(this.classes.DROP_TARGET_BEFORE);\n        }\n        return true;\n    }\n\n    /**\n     * Remove highlighting.\n     *\n     * @param {Object} dropData\n     * @param {Event} event\n     */\n    hideDropZone(dropData, event) {\n        const dropTarget = event.target.closest(this.selectors.CATEGORY_LIST);\n        dropTarget.classList.remove(this.classes.DROP_TARGET_BEFORE);\n        dropTarget.classList.remove(this.classes.DROP_TARGET);\n    }\n\n    /**\n     * Determine whether we're dragging over the top or bottom half of the list.\n     *\n     * @param {Event} event\n     * @param {Element} dropTarget\n     * @return {boolean}\n     */\n    getInsertBefore(event, dropTarget) {\n        // Get the current mouse position within the drop target\n        const mouseY = event.clientY - dropTarget.getBoundingClientRect().top;\n\n        // Get the height of the drop target\n        const targetHeight = dropTarget.clientHeight;\n\n        // Check if the mouse is over the top half of the drop target\n        return mouseY < targetHeight / 2;\n    }\n\n    /**\n     * Find the new position of the dropped category, and trigger the move.\n     *\n     * @param {Object} dropData\n     * @param {Event} event\n     */\n    drop(dropData, event) {\n        const dropTarget = event.target.closest(this.selectors.CATEGORY_LIST);\n\n        if (!dropTarget) {\n            return;\n        }\n\n        if (dropTarget.closest(this.selectors.CATEGORY_ID(dropData.id))) {\n            // Can't drop onto your own child.\n            return;\n        }\n\n        const source = document.getElementById(this.ids.CATEGORY(dropData.id));\n\n        if (!source) {\n            return;\n        }\n\n        const targetParentId = dropTarget.dataset.categoryid;\n        let precedingSibling;\n\n        if (this.getInsertBefore(event, dropTarget)) {\n            // Dropped at the top of the list.\n            precedingSibling = null;\n        } else {\n            // Dropped at the bottom of the list.\n            precedingSibling = dropTarget.lastElementChild;\n        }\n\n        // Insert the category after the target category\n        categorymanager.moveCategory(dropData.id, targetParentId, precedingSibling?.dataset.categoryid);\n    }\n\n    /**\n     * Watch for categories moving to a new parent.\n     *\n     * @return {Array} A list of watchers.\n     */\n    getWatchers() {\n        return [\n            // Watch for this category having its child count updated.\n            {watch: `categoryLists[${this.element.dataset.categoryid}].childCount:updated`, handler: this.checkEmptyList},\n            // Watch for any new category being created.\n            {watch: `categories:created`, handler: this.addCategory},\n        ];\n    }\n\n    /**\n     * If this list is now empty, remove it.\n     *\n     * @param {Object} args\n     * @param {Object} args.element The categoryList state element.\n     */\n    async checkEmptyList({element}) {\n        if (element.childCount === 0) {\n            // Display a new child drop zone.\n            const categoryItem = this.getElement().closest(this.selectors.CATEGORY_ITEM);\n            const {html, js} = await Templates.renderForPromise(\n                'qbank_managecategories/newchild',\n                {\n                    categoryid: this.getElement().dataset.categoryid,\n                    tooltip: getString('newchild', 'qbank_managecategories', categoryItem.dataset.categoryname)\n                }\n            );\n            const activityNameArea = categoryItem.querySelector(this.selectors.CATEGORY_DETAILS);\n            await Templates.appendNodeContents(activityNameArea, html, js);\n            // Reinstate padding on the parent element.\n            this.element.closest(this.selectors.CATEGORY_CONTENTS).classList.remove(this.classes.NO_BOTTOM_PADDING);\n            // Remove this list.\n            this.remove();\n        }\n    }\n\n    /**\n     * If a newly-created category has this list's category as its parent, add it to this list.\n     *\n     * @param {Object} args\n     * @param {Object} args.element\n     * @return {Promise<void>}\n     */\n    async addCategory({element}) {\n        if (element.parent !== this.getElement().dataset.categoryid) {\n            return; // Not for me.\n        }\n        const {html, js} = await Templates.renderForPromise('qbank_managecategories/category', element.templatecontext);\n        Templates.appendNodeContents(this.getElement(), html, js);\n        // If one of the children has no draghandle, it should do now it has a sibling.\n        const noDragHandle = this.getElement(this.selectors.CATEGORY_NO_DRAGHANDLE);\n        if (noDragHandle) {\n            this.reactive.dispatch('showDragHandle', noDragHandle.dataset.categoryid);\n        }\n    }\n}\n"],"names":["BaseComponent","create","descriptor","name","element","id","selectors","CATEGORY_LIST","CATEGORY_ITEM","CATEGORY_CONTENTS","CATEGORY_DETAILS","CATEGORY_NO_DRAGHANDLE","CATEGORY_ID","classes","DROP_TARGET_BEFORE","DROP_TARGET","NO_BOTTOM_PADDING","ids","CATEGORY","stateReady","dragdrop","DragDrop","this","destroy","undefined","unregister","target","document","querySelector","reactive","categorymanager","validateDropData","showDropZone","dropData","event","dropTarget","getElement","closest","getInsertBefore","classList","add","remove","hideDropZone","clientY","getBoundingClientRect","top","clientHeight","drop","getElementById","targetParentId","dataset","categoryid","precedingSibling","lastElementChild","moveCategory","_precedingSibling","getWatchers","watch","handler","checkEmptyList","addCategory","childCount","categoryItem","html","js","Templates","renderForPromise","tooltip","categoryname","activityNameArea","appendNodeContents","parent","templatecontext","noDragHandle","dispatch"],"mappings":"0XA6B6BA,wBAEzBC,OAAOC,iBACEC,KAAOD,WAAWE,QAAQC,QAC1BC,UAAY,CACbC,cAAe,uCACfC,cAAe,gDACfC,kBAAmB,4CACnBC,iBAAkB,kCAClBC,uBAAwB,iEACxBC,YAAaP,wBAAmBA,UAE/BQ,QAAU,CACXC,mBAAoB,2CACpBC,YAAa,oCACbC,kBAAmB,aAElBC,IAAM,CACPC,SAAUb,uBAAkBA,KAIpCc,kBACSC,SAAW,IAAIC,mBAASC,MAGjCC,eAE0BC,IAAlBF,KAAKF,gBACAA,SAASK,kBACTL,cAAWI,eAWZE,OAAQpB,kBACT,IAAIgB,KAAK,CACZlB,QAASuB,SAASC,cAAcF,QAChCpB,UAAAA,UACAuB,SAAUC,mCAIlBC,0BACW,EAYXC,aAAaC,SAAUC,aACbC,WAAab,KAAKc,oBACpBD,WAAWE,QAAQf,KAAKhB,UAAUM,YAAYqB,SAAS5B,OAIvDiB,KAAKgB,gBAAgBJ,MAAOC,aAC5BA,WAAWI,UAAUC,IAAIlB,KAAKT,QAAQC,oBACtCqB,WAAWI,UAAUE,OAAOnB,KAAKT,QAAQE,eAEzCoB,WAAWI,UAAUC,IAAIlB,KAAKT,QAAQE,aACtCoB,WAAWI,UAAUE,OAAOnB,KAAKT,QAAQC,sBAEtC,GASX4B,aAAaT,SAAUC,aACbC,WAAaD,MAAMR,OAAOW,QAAQf,KAAKhB,UAAUC,eACvD4B,WAAWI,UAAUE,OAAOnB,KAAKT,QAAQC,oBACzCqB,WAAWI,UAAUE,OAAOnB,KAAKT,QAAQE,aAU7CuB,gBAAgBJ,MAAOC,mBAEJD,MAAMS,QAAUR,WAAWS,wBAAwBC,IAG7CV,WAAWW,aAGD,EASnCC,KAAKd,SAAUC,mCACLC,WAAaD,MAAMR,OAAOW,QAAQf,KAAKhB,UAAUC,mBAElD4B,qBAIDA,WAAWE,QAAQf,KAAKhB,UAAUM,YAAYqB,SAAS5B,gBAK5CsB,SAASqB,eAAe1B,KAAKL,IAAIC,SAASe,SAAS5B,kBAM5D4C,eAAiBd,WAAWe,QAAQC,eACtCC,iBAIAA,iBAFA9B,KAAKgB,gBAAgBJ,MAAOC,YAET,KAGAA,WAAWkB,kDAIlBC,aAAarB,SAAS5B,GAAI4C,yCAAgBG,qDAAAG,kBAAkBL,QAAQC,YAQxFK,oBACW,CAEH,CAACC,8BAAwBnC,KAAKlB,QAAQ8C,QAAQC,mCAAkCO,QAASpC,KAAKqC,gBAE9F,CAACF,2BAA6BC,QAASpC,KAAKsC,6CAU/BxD,QAACA,iBACS,IAAvBA,QAAQyD,WAAkB,OAEpBC,aAAexC,KAAKc,aAAaC,QAAQf,KAAKhB,UAAUE,gBACxDuD,KAACA,KAADC,GAAOA,UAAYC,mBAAUC,iBAC/B,kCACA,CACIf,WAAY7B,KAAKc,aAAac,QAAQC,WACtCgB,SAAS,kBAAU,WAAY,yBAA0BL,aAAaZ,QAAQkB,gBAGhFC,iBAAmBP,aAAalC,cAAcN,KAAKhB,UAAUI,wBAC7DuD,mBAAUK,mBAAmBD,iBAAkBN,KAAMC,SAEtD5D,QAAQiC,QAAQf,KAAKhB,UAAUG,mBAAmB8B,UAAUE,OAAOnB,KAAKT,QAAQG,wBAEhFyB,uCAWKrC,QAACA,kBACXA,QAAQmE,SAAWjD,KAAKc,aAAac,QAAQC,wBAG3CY,KAACA,KAADC,GAAOA,UAAYC,mBAAUC,iBAAiB,kCAAmC9D,QAAQoE,oCACrFF,mBAAmBhD,KAAKc,aAAc2B,KAAMC,UAEhDS,aAAenD,KAAKc,WAAWd,KAAKhB,UAAUK,wBAChD8D,mBACK5C,SAAS6C,SAAS,iBAAkBD,aAAavB,QAAQC"}