Proyectos de Subversion Moodle

{"version":3,"file":"togglesensitive.min.js","sources":["../src/togglesensitive.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 * JS module for toggling the sensitive input visibility (e.g. passwords, keys).\n *\n * @module     core/togglesensitive\n * @copyright  2023 David Woloszyn <david.woloszyn@moodle.com>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport {isExtraSmall} from 'core/pagehelpers';\nimport Templates from 'core/templates';\nimport Pending from 'core/pending';\nimport Prefetch from 'core/prefetch';\nimport Notification from 'core/notification';\nimport {notifyFieldStructureChanged} from 'core_form/events';\n\nconst SELECTORS = {\n    BUTTON: '.toggle-sensitive-btn',\n    ICON: '.toggle-sensitive-btn .icon',\n};\n\nconst PIX = {\n    EYE: 't/hide',\n    EYE_SLASH: 't/show',\n};\n\nlet sensitiveElementId;\nlet smallScreensOnly;\n\n/**\n * Entrypoint of the js.\n *\n * @method init\n * @param {String} elementId Form button element.\n * @param {boolean} isSmallScreensOnly Is this for small screens only?\n */\nexport const init = (elementId, isSmallScreensOnly = false) => {\n    const sensitiveInput = document.getElementById(elementId);\n    if (sensitiveInput === null) {\n        // Exit early if invalid element id passed.\n        return;\n    }\n    sensitiveElementId = elementId;\n    smallScreensOnly = isSmallScreensOnly;\n    Prefetch.prefetchTemplate('core/form_input_toggle_sensitive');\n    // Render the sensitive input with a toggle button.\n    renderSensitiveToggle(sensitiveInput);\n    // Register event listeners.\n    registerListenerEvents();\n};\n\n/**\n * Render the new input html with toggle button and update the incoming html.\n *\n * @method renderSensitiveToggle\n * @param {HTMLElement} sensitiveInput HTML element for the sensitive input.\n */\nconst renderSensitiveToggle = (sensitiveInput) => {\n    Templates.render(\n        'core/form_input_toggle_sensitive',\n        {\n            smallscreensonly: smallScreensOnly,\n            sensitiveinput: sensitiveInput.outerHTML,\n        }\n    ).then((html) => {\n        sensitiveInput.outerHTML = html;\n        // Dispatch the event indicating the sensitive input has changed.\n        notifyFieldStructureChanged(sensitiveInput.id);\n        return;\n    }).catch(Notification.exception);\n};\n\n/**\n * Register event listeners.\n *\n * @method registerListenerEvents\n */\nconst registerListenerEvents = () => {\n    // Toggle the sensitive input visibility when interacting with the toggle button.\n    document.addEventListener('click', handleButtonInteraction);\n    // For small screens only, hide all sensitive inputs when the screen is enlarged.\n    if (smallScreensOnly) {\n        window.addEventListener('resize', handleScreenResizing);\n    }\n};\n\n/**\n * Handle events trigger by interacting with the toggle button.\n *\n * @method handleButtonInteraction\n * @param {Event} event The button event.\n */\nconst handleButtonInteraction = (event) => {\n    const toggleButton = event.target.closest(SELECTORS.BUTTON);\n    if (toggleButton) {\n        const sensitiveInput = document.getElementById(sensitiveElementId);\n        if (sensitiveInput) {\n            toggleSensitiveVisibility(sensitiveInput, toggleButton);\n        }\n    }\n};\n\n/**\n * Handle events trigger by resizing the screen.\n *\n * @method handleScreenResizing\n */\nconst handleScreenResizing = () => {\n    if (!isExtraSmall()) {\n        const sensitiveInput = document.getElementById(sensitiveElementId);\n        if (sensitiveInput) {\n            const toggleButton = sensitiveInput.parentNode.querySelector(SELECTORS.BUTTON);\n            if (toggleButton) {\n                toggleSensitiveVisibility(sensitiveInput, toggleButton, true);\n            }\n        }\n    }\n};\n\n/**\n * Toggle the sensitive input visibility and its associated icon.\n *\n * @method toggleSensitiveVisibility\n * @param {HTMLInputElement} sensitiveInput The sensitive input element.\n * @param {HTMLElement} toggleButton The toggle button.\n * @param {boolean} force Force the input back to password type.\n */\nconst toggleSensitiveVisibility = (sensitiveInput, toggleButton, force = false) => {\n    const pendingPromise = new Pending('core/togglesensitive:toggle');\n    let type;\n    let icon;\n    if (force === true) {\n        type = 'password';\n        icon = PIX.EYE;\n    } else {\n        type = sensitiveInput.getAttribute('type') === 'password' ? 'text' : 'password';\n        icon = sensitiveInput.getAttribute('type') === 'password' ? PIX.EYE_SLASH : PIX.EYE;\n    }\n    sensitiveInput.setAttribute('type', type);\n    Templates.renderPix(icon, 'core').then((icon) => {\n        toggleButton.innerHTML = icon;\n        pendingPromise.resolve();\n        return;\n    }).catch(Notification.exception);\n};\n"],"names":["SELECTORS","PIX","sensitiveElementId","smallScreensOnly","elementId","isSmallScreensOnly","sensitiveInput","document","getElementById","prefetchTemplate","renderSensitiveToggle","registerListenerEvents","render","smallscreensonly","sensitiveinput","outerHTML","then","html","id","catch","Notification","exception","addEventListener","handleButtonInteraction","window","handleScreenResizing","event","toggleButton","target","closest","toggleSensitiveVisibility","parentNode","querySelector","force","pendingPromise","Pending","type","icon","getAttribute","setAttribute","renderPix","innerHTML","resolve"],"mappings":";;;;;;;gRA8BMA,iBACM,wBAINC,QACG,SADHA,cAES,aAGXC,mBACAC,+BASgB,SAACC,eAAWC,iFACtBC,eAAiBC,SAASC,eAAeJ,WACxB,OAAnBE,iBAIJJ,mBAAqBE,UACrBD,iBAAmBE,qCACVI,iBAAiB,oCAE1BC,sBAAsBJ,gBAEtBK,iCASED,sBAAyBJ,oCACjBM,OACN,mCACA,CACIC,iBAAkBV,iBAClBW,eAAgBR,eAAeS,YAErCC,MAAMC,OACJX,eAAeS,UAAYE,6CAECX,eAAeY,OAE5CC,MAAMC,sBAAaC,YAQpBV,uBAAyB,KAE3BJ,SAASe,iBAAiB,QAASC,yBAE/BpB,kBACAqB,OAAOF,iBAAiB,SAAUG,uBAUpCF,wBAA2BG,cACvBC,aAAeD,MAAME,OAAOC,QAAQ7B,qBACtC2B,aAAc,OACRrB,eAAiBC,SAASC,eAAeN,oBAC3CI,gBACAwB,0BAA0BxB,eAAgBqB,gBAUhDF,qBAAuB,UACpB,+BAAgB,OACXnB,eAAiBC,SAASC,eAAeN,uBAC3CI,eAAgB,OACVqB,aAAerB,eAAeyB,WAAWC,cAAchC,kBACzD2B,cACAG,0BAA0BxB,eAAgBqB,cAAc,MAclEG,0BAA4B,SAACxB,eAAgBqB,kBAAcM,oEACvDC,eAAiB,IAAIC,iBAAQ,mCAC/BC,KACAC,MACU,IAAVJ,OACAG,KAAO,WACPC,KAAOpC,UAEPmC,KAA+C,aAAxC9B,eAAegC,aAAa,QAAyB,OAAS,WACrED,KAA+C,aAAxC/B,eAAegC,aAAa,QAAyBrC,cAAgBA,SAEhFK,eAAeiC,aAAa,OAAQH,yBAC1BI,UAAUH,KAAM,QAAQrB,MAAMqB,OACpCV,aAAac,UAAYJ,KACzBH,eAAeQ,aAEhBvB,MAAMC,sBAAaC"}