Proyectos de Subversion Moodle

{"version":3,"file":"gradecategorytoggle.min.js","sources":["../src/gradecategorytoggle.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 * Javascript module for toggling the visibility of the grade categories in the user report.\n *\n * @module    gradereport_user/gradecategorytoggle\n * @copyright 2022 Mihail Geshoski <mihail@moodle.com>\n * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nconst SELECTORS = {\n    CATEGORY_TOGGLE: '.toggle-category',\n    USER_REPORT_TABLE: '.user-grade'\n};\n\n/**\n * Register related event listeners.\n *\n * @method registerListenerEvents\n * @param {string} userReportId The ID of the user report container element.\n */\nconst registerListenerEvents = (userReportId) => {\n    const reportContainer = document.querySelector('#' + userReportId);\n    const userReport = reportContainer.querySelector(SELECTORS.USER_REPORT_TABLE);\n\n    userReport.addEventListener('click', e => {\n        const toggle = e.target.closest(SELECTORS.CATEGORY_TOGGLE);\n\n        if (toggle) {\n            e.preventDefault();\n            toggleCategory(toggle);\n        }\n    });\n};\n\n/**\n * Method that handles the category toggle action.\n *\n * @method toggleCategory\n * @param {object} toggleElement The category toggle node that was clicked.\n */\nconst toggleCategory = (toggleElement) => {\n    const target = toggleElement.dataset.target;\n    const categoryId = toggleElement.dataset.categoryid;\n    // Whether the toggle action is collapsing the category or not.\n    const isCollapsing = toggleElement.getAttribute('aria-expanded') === \"true\";\n    const userReport = toggleElement.closest(SELECTORS.USER_REPORT_TABLE);\n\n    // Find all targeted 'children' rows of the toggled category.\n    const targetRows = userReport.querySelectorAll(target);\n\n    if (isCollapsing) {\n        toggleElement.setAttribute('aria-expanded', 'false');\n        // Update the 'data-target' of the toggle category node to make sure that when we perform another toggle action\n        // to expand this category we only target rows which have been hidden by this category toggle action.\n        toggleElement.dataset.target = `[data-hidden-by='${categoryId}']`;\n    } else {\n        toggleElement.setAttribute('aria-expanded', 'true');\n        // Update the 'data-target' of the toggle category node to make sure that when we perform another toggle action\n        // to collapse this category we only target rows which are children of this category and are not currently hidden.\n        toggleElement.dataset.target = `.cat_${categoryId}[data-hidden='false']`;\n    }\n\n    // Loop through all targeted children row elements and update the required data attributes to either hide or show\n    // them depending on the toggle action (collapsing or expanding).\n    targetRows.forEach((row) => {\n        if (isCollapsing) {\n            row.dataset.hidden = 'true';\n            row.dataset.hiddenBy = categoryId;\n        } else {\n            row.dataset.hidden = 'false';\n            row.dataset.hiddenBy = '';\n        }\n    });\n\n    // Since the user report is presented in an HTML table, rowspans are used under each category to create a visual\n    // hierarchy between categories and grading items. When expanding or collapsing a category we need to also update\n    // (subtract or add) the rowspan values associated to each parent category row to preserve the correct visual\n    // hierarchy in the table.\n    updateParentCategoryRowspans(toggleElement, targetRows.length);\n};\n\n/**\n * Method that updates the rowspan value of all 'parent' category rows of a given category node.\n *\n * @method updateParentCategoryRowspans\n * @param {object} toggleElement The category toggle node that was clicked.\n * @param {int} num The number we want to add or subtract from the rowspan value of the 'parent' category row elements.\n */\nconst updateParentCategoryRowspans = (toggleElement, num) => {\n    const userReport = toggleElement.closest(SELECTORS.USER_REPORT_TABLE);\n    // Get the row element which contains the category toggle node.\n    const rowElement = toggleElement.closest('tr');\n\n    // Loop through the class list of the toggle category row element.\n    // The list contains classes which identify all parent categories of the toggled category.\n    rowElement.classList.forEach((className) => {\n        // Find the toggle node of the 'parent' category that is identified by the given class name.\n        const parentCategoryToggleElement = userReport.querySelector(`[data-target=\".${className}[data-hidden='false']\"`);\n        if (parentCategoryToggleElement) {\n            // Get the row element which contains the parent category toggle node.\n            const categoryRowElement = parentCategoryToggleElement.closest('tr');\n            // Find the rowspan element associated to this parent category.\n            const categoryRowSpanElement = categoryRowElement.nextElementSibling.querySelector('[rowspan]');\n\n            // Depending on whether the toggle action has expanded or collapsed the category, either add or\n            // subtract from the 'parent' category rowspan.\n            if (toggleElement.getAttribute('aria-expanded') === \"true\") {\n                categoryRowSpanElement.rowSpan = categoryRowSpanElement.rowSpan + num;\n            } else { // The category has been collapsed.\n                categoryRowSpanElement.rowSpan = categoryRowSpanElement.rowSpan - num;\n            }\n        }\n    });\n};\n\n/**\n * Init method.\n *\n * @param {string} userReportId The ID of the user report container element.\n */\nexport const init = (userReportId) => {\n    registerListenerEvents(userReportId);\n};\n"],"names":["SELECTORS","toggleCategory","toggleElement","target","dataset","categoryId","categoryid","isCollapsing","getAttribute","targetRows","closest","querySelectorAll","setAttribute","forEach","row","hidden","hiddenBy","updateParentCategoryRowspans","length","num","userReport","classList","className","parentCategoryToggleElement","querySelector","categoryRowSpanElement","nextElementSibling","rowSpan","userReportId","document","addEventListener","e","toggle","preventDefault","registerListenerEvents"],"mappings":";;;;;;;;MAuBMA,0BACe,mBADfA,4BAEiB,cA6BjBC,eAAkBC,sBACdC,OAASD,cAAcE,QAAQD,OAC/BE,WAAaH,cAAcE,QAAQE,WAEnCC,aAA+D,SAAhDL,cAAcM,aAAa,iBAI1CC,WAHaP,cAAcQ,QAAQV,6BAGXW,iBAAiBR,QAE3CI,cACAL,cAAcU,aAAa,gBAAiB,SAG5CV,cAAcE,QAAQD,kCAA6BE,mBAEnDH,cAAcU,aAAa,gBAAiB,QAG5CV,cAAcE,QAAQD,sBAAiBE,qCAK3CI,WAAWI,SAASC,MACZP,cACAO,IAAIV,QAAQW,OAAS,OACrBD,IAAIV,QAAQY,SAAWX,aAEvBS,IAAIV,QAAQW,OAAS,QACrBD,IAAIV,QAAQY,SAAW,OAQ/BC,6BAA6Bf,cAAeO,WAAWS,SAUrDD,6BAA+B,CAACf,cAAeiB,aAC3CC,WAAalB,cAAcQ,QAAQV,6BAEtBE,cAAcQ,QAAQ,MAI9BW,UAAUR,SAASS,kBAEpBC,4BAA8BH,WAAWI,uCAAgCF,yCAC3EC,4BAA6B,OAIvBE,uBAFqBF,4BAA4Bb,QAAQ,MAEbgB,mBAAmBF,cAAc,aAI/B,SAAhDtB,cAAcM,aAAa,iBAC3BiB,uBAAuBE,QAAUF,uBAAuBE,QAAUR,IAElEM,uBAAuBE,QAAUF,uBAAuBE,QAAUR,uBAW7DS,eApGWA,CAAAA,eACJC,SAASL,cAAc,IAAMI,cAClBJ,cAAcxB,6BAEtC8B,iBAAiB,SAASC,UAC3BC,OAASD,EAAE5B,OAAOO,QAAQV,2BAE5BgC,SACAD,EAAEE,iBACFhC,eAAe+B,aA4FvBE,CAAuBN"}