Sindbad~EG File Manager

{"version":3,"file":"search_combobox.min.js","sources":["../../src/comboboxsearch/search_combobox.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\nimport $ from 'jquery';\nimport CustomEvents from \"core/custom_interaction_events\";\nimport {debounce} from 'core/utils';\nimport Pending from 'core/pending';\n\n/**\n * The class that manages the state of the search within a combobox.\n *\n * @module    core/comboboxsearch/search_combobox\n * @copyright 2023 Mathew May <mathew.solutions>\n * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n// Reused variables for the class.\nconst events = [\n    'keydown',\n    CustomEvents.events.activate,\n    CustomEvents.events.keyboardActivate\n];\nconst UP = -1;\nconst DOWN = 1;\n\nexport default class {\n    // Define our standard lookups.\n    selectors = {\n        component: this.componentSelector(),\n        trigger: this.triggerSelector(),\n        input: '[data-action=\"search\"]',\n        clearSearch: '[data-action=\"clearsearch\"]',\n        dropdown: this.dropdownSelector(),\n        resultitems: '[role=\"option\"]',\n        viewall: '#select-all',\n    };\n\n    // The results from the called filter function.\n    matchedResults = [];\n\n    // What did the user search for?\n    searchTerm = '';\n\n    // What the user searched for as a lowercase.\n    preppedSearchTerm = null;\n\n    // The DOM nodes after the dropdown render.\n    resultNodes = [];\n\n    // Where does the user currently have focus?\n    currentNode = null;\n\n    // The current node for the view all link.\n    currentViewAll = null;\n\n    dataset = null;\n\n    datasetSize = 0;\n\n    // DOM nodes that persist.\n    component = document.querySelector(this.selectors.component);\n    searchInput = this.component.querySelector(this.selectors.input);\n    searchDropdown = this.component.querySelector(this.selectors.dropdown);\n    clearSearchButton = this.component.querySelector(this.selectors.clearSearch);\n    $component = $(this.component);\n\n    constructor() {\n        // If we have a search input, try to get the value otherwise fallback.\n        this.setSearchTerms(this.searchInput?.value ?? '');\n        // Begin handling the base search component.\n        this.registerClickHandlers();\n        this.registerKeyHandlers();\n        // Conditionally set up the input handler since we don't know exactly how we were called.\n        if (this.searchInput !== null) {\n            this.registerInputHandlers();\n        }\n    }\n\n    /**\n     * Stub out a required function.\n     */\n    fetchDataset() {\n        throw new Error(`fetchDataset() must be implemented in ${this.constructor.name}`);\n    }\n\n    /**\n     * Stub out a required function.\n     * @param {Array} dataset\n     */\n    filterDataset(dataset) {\n        throw new Error(`filterDataset(${dataset}) must be implemented in ${this.constructor.name}`);\n    }\n\n    /**\n     * Stub out a required function.\n     */\n    filterMatchDataset() {\n        throw new Error(`filterMatchDataset() must be implemented in ${this.constructor.name}`);\n    }\n\n    /**\n     * Stub out a required function.\n     */\n    renderDropdown() {\n        throw new Error(`renderDropdown() must be implemented in ${this.constructor.name}`);\n    }\n\n    /**\n     * Stub out a required function.\n     */\n    componentSelector() {\n        throw new Error(`componentSelector() must be implemented in ${this.constructor.name}`);\n    }\n\n    /**\n     * Stub out a required function.\n     */\n    dropdownSelector() {\n        throw new Error(`dropdownSelector() must be implemented in ${this.constructor.name}`);\n    }\n\n    /**\n     * Stub out a required function.\n     */\n    triggerSelector() {\n        throw new Error(`triggerSelector() must be implemented in ${this.constructor.name}`);\n    }\n\n    /**\n     * Return the dataset that we will be searching upon.\n     *\n     * @returns {Promise<null>}\n     */\n    async getDataset() {\n        if (!this.dataset) {\n            this.dataset = await this.fetchDataset();\n        }\n        this.datasetSize = this.dataset.length;\n        return this.dataset;\n    }\n\n    /**\n     * Return the size of the dataset.\n     *\n     * @returns {number}\n     */\n    getDatasetSize() {\n        return this.datasetSize;\n    }\n\n    /**\n     * Return the results of the filter upon the dataset.\n     *\n     * @returns {Array}\n     */\n    getMatchedResults() {\n        return this.matchedResults;\n    }\n\n    /**\n     * Given a filter has been run across the dataset, store the matched results.\n     *\n     * @param {Array} result\n     */\n    setMatchedResults(result) {\n        this.matchedResults = result;\n    }\n\n    /**\n     * Get the value that the user entered.\n     *\n     * @returns {string}\n     */\n    getSearchTerm() {\n        return this.searchTerm;\n    }\n\n    /**\n     * Get the transformed search value.\n     *\n     * @returns {string}\n     */\n    getPreppedSearchTerm() {\n        return this.preppedSearchTerm;\n    }\n\n    /**\n     * When a user searches for something, set our variable to manage it.\n     *\n     * @param {string} result\n     */\n    setSearchTerms(result) {\n        this.searchTerm = result;\n        this.preppedSearchTerm = result.toLowerCase();\n    }\n\n    /**\n     * Return an object containing a handfull of dom nodes that we sometimes need the value of.\n     *\n     * @returns {object}\n     */\n    getHTMLElements() {\n        this.updateNodes();\n        return {\n            searchDropdown: this.searchDropdown,\n            currentViewAll: this.currentViewAll,\n            searchInput: this.searchInput,\n            clearSearchButton: this.clearSearchButton,\n            trigger: this.component.querySelector(this.selectors.trigger),\n        };\n    }\n\n    /**\n     * When called, close the dropdown and reset the input field attributes.\n     *\n     * @param {Boolean} clear Conditionality clear the input box.\n     */\n    closeSearch(clear = false) {\n        this.toggleDropdown();\n        // Hide the \"clear\" search button search bar.\n        this.clearSearchButton.classList.add('d-none');\n        if (clear) {\n            // Clear the entered search query in the search bar and hide the search results container.\n            this.setSearchTerms('');\n            this.searchInput.value = \"\";\n        }\n    }\n\n    /**\n     * Check whether search results are currently visible.\n     *\n     * @returns {Boolean}\n     */\n    searchResultsVisible() {\n        const {searchDropdown} = this.getHTMLElements();\n        // If a Node is not visible, then the offsetParent is null.\n        return searchDropdown.offsetParent !== null;\n    }\n\n    /**\n     * When called, update the dropdown fields.\n     *\n     * @param {Boolean} on Flag to toggle hiding or showing values.\n     */\n    toggleDropdown(on = false) {\n        this.$component.dropdown('toggle');\n        if (on) {\n            this.searchDropdown.classList.add('show');\n            $(this.searchDropdown).show();\n        } else {\n            this.searchDropdown.classList.remove('show');\n            $(this.searchDropdown).hide();\n        }\n    }\n\n    /**\n     * These class members change when a new result set is rendered. So update for fresh data.\n     */\n    updateNodes() {\n        this.resultNodes = [...this.component.querySelectorAll(this.selectors.resultitems)];\n        this.currentNode = this.resultNodes.find(r => r.id === document.activeElement.id);\n        this.currentViewAll = this.component.querySelector(this.selectors.viewall);\n        this.clearSearchButton = this.component.querySelector(this.selectors.clearSearch);\n        this.searchInput = this.component.querySelector(this.selectors.input);\n        this.searchDropdown = this.component.querySelector(this.selectors.dropdown);\n    }\n\n    /**\n     * Register clickable event listeners.\n     */\n    registerClickHandlers() {\n        // Register click events within the component.\n        this.component.addEventListener('click', this.clickHandler.bind(this));\n    }\n\n    /**\n     * Register key event listeners.\n     */\n    registerKeyHandlers() {\n        CustomEvents.define(document, events);\n\n        // Register click events.\n        events.forEach((event) => {\n            this.component.addEventListener(event, this.keyHandler.bind(this));\n        });\n    }\n\n    /**\n     * Register input event listener for the text input area.\n     */\n    registerInputHandlers() {\n        // Register & handle the text input.\n        this.searchInput.addEventListener('input', debounce(async() => {\n            if (this.getSearchTerm() === this.searchInput.value && this.searchResultsVisible()) {\n                window.console.warn(`Search term matches input value - skipping`);\n                // The debounce canhappen multiple times quickly. GRrargh\n                return;\n            }\n            this.setSearchTerms(this.searchInput.value);\n            // We can also require a set amount of input before search.\n            if (this.getSearchTerm() === '') {\n                this.toggleDropdown();\n                // Hide the \"clear\" search button in the search bar.\n                this.clearSearchButton.classList.add('d-none');\n            } else {\n                const pendingPromise = new Pending();\n                await this.renderAndShow().then(() => {\n                    // Display the \"clear\" search button in the search bar.\n                    this.clearSearchButton.classList.remove('d-none');\n                    return;\n                }).then(() => {\n                    pendingPromise.resolve();\n                    return true;\n                });\n            }\n        }, 300, {pending: true}));\n    }\n\n    /**\n     * Update any changeable nodes, filter and then render the result.\n     *\n     * @returns {Promise<void>}\n     */\n    async filterrenderpipe() {\n        this.updateNodes();\n        this.setMatchedResults(await this.filterDataset(await this.getDataset()));\n        this.filterMatchDataset();\n        await this.renderDropdown();\n    }\n\n    /**\n     * A combo method to take the matching fields and render out the results.\n     *\n     * @returns {Promise<void>}\n     */\n    async renderAndShow() {\n        // User has given something for us to filter against.\n        this.setMatchedResults(await this.filterDataset(await this.getDataset()));\n        await this.filterMatchDataset();\n        // Replace the dropdown node contents and show the results.\n        await this.renderDropdown();\n        // Set the dropdown to open.\n        this.toggleDropdown(true);\n    }\n\n    /**\n     * Set the current focus either on the preceding or next result item.\n     *\n     * @param {Number} direction Is the user moving up or down the resultset?\n     * @param {KeyboardEvent} e The JS event from the event handler.\n     */\n    keyUpDown(direction, e) {\n        e.preventDefault();\n        // Stop Bootstrap from being clever.\n        e.stopPropagation();\n        // Current focus is on the input box so depending on direction, go to the top or the bottom of the displayed results.\n        if (document.activeElement === this.searchInput && this.resultNodes.length > 0) {\n            if (direction === UP) {\n                this.moveToLastNode();\n            } else {\n                this.moveToFirstNode();\n            }\n        }\n        const index = this.resultNodes.indexOf(this.currentNode);\n        if (this.currentNode) {\n            if (direction === UP) {\n                if (index === 0) {\n                    this.moveToLastNode();\n                } else {\n                    this.moveToNode(index - 1);\n                }\n            } else {\n                if (index + 1 >= this.resultNodes.length) {\n                    this.moveToFirstNode();\n                } else {\n                    this.moveToNode(index + 1);\n                }\n            }\n        } else {\n            if (direction === UP) {\n                this.moveToLastNode();\n            } else {\n                this.moveToFirstNode();\n            }\n        }\n    }\n\n    /**\n     * The handler for when a user interacts with the component.\n     *\n     * @param {MouseEvent} e The triggering event that we are working with.\n     */\n    async clickHandler(e) {\n        this.updateNodes();\n\n        // Prevent normal key presses activating this.\n        if (e.target.closest('.dropdown-item') && e.button === 0) {\n            window.location = e.target.closest('.dropdown-item').href;\n        }\n        // The \"clear search\" button is triggered.\n        if (e.target.closest(this.selectors.clearSearch) && e.button === 0) {\n            this.closeSearch(true);\n            this.searchInput.focus({preventScroll: true});\n        }\n        // User may have accidentally clicked off the dropdown and wants to reopen it.\n        if (e.target.closest(this.selectors.input) && this.getSearchTerm() !== '' && e.button === 0) {\n            await this.renderAndShow();\n        }\n    }\n\n    /**\n     * The handler for when a user presses a key within the component.\n     *\n     * @param {KeyboardEvent} e The triggering event that we are working with.\n     */\n    keyHandler(e) {\n        this.updateNodes();\n        // Switch the key presses to handle keyboard nav.\n        switch (e.key) {\n            case 'ArrowUp':\n                this.keyUpDown(UP, e);\n                break;\n            case 'ArrowDown':\n                this.keyUpDown(DOWN, e);\n                break;\n            case 'Home':\n                e.preventDefault();\n                this.moveToFirstNode();\n                break;\n            case 'End':\n                e.preventDefault();\n                this.moveToLastNode();\n                break;\n            case 'Tab':\n                // If the current focus is on the view all link, then close the widget then set focus on the next tertiary nav item.\n                if (e.target.closest(this.selectors.viewall)) {\n                    this.closeSearch();\n                }\n                break;\n        }\n    }\n\n    /**\n     * Set focus on a given node after parsed through the calling functions.\n     *\n     * @param {HTMLElement} node The node to set focus upon.\n     */\n    selectNode = (node) => {\n        node.focus({preventScroll: true});\n        this.searchDropdown.scrollTop = node.offsetTop - (node.clientHeight / 2);\n    };\n\n    /**\n     * Set the focus on the first node within the array.\n     */\n    moveToFirstNode = () => {\n        if (this.resultNodes.length > 0) {\n            this.selectNode(this.resultNodes[0]);\n        }\n    };\n\n    /**\n     * Set the focus to the final node within the array.\n     */\n    moveToLastNode = () => {\n        if (this.resultNodes.length > 0) {\n            this.selectNode(this.resultNodes[this.resultNodes.length - 1]);\n        }\n    };\n\n    /**\n     * Set focus on any given specified node within the node array.\n     *\n     * @param {Number} index Which item within the array to set focus upon.\n     */\n    moveToNode = (index) => {\n        if (this.resultNodes.length > 0) {\n            this.selectNode(this.resultNodes[index]);\n        }\n    };\n}\n"],"names":["events","CustomEvents","activate","keyboardActivate","constructor","component","this","componentSelector","trigger","triggerSelector","input","clearSearch","dropdown","dropdownSelector","resultitems","viewall","document","querySelector","selectors","node","focus","preventScroll","searchDropdown","scrollTop","offsetTop","clientHeight","resultNodes","length","selectNode","index","setSearchTerms","searchInput","_this$searchInput","value","registerClickHandlers","registerKeyHandlers","registerInputHandlers","fetchDataset","Error","name","filterDataset","dataset","filterMatchDataset","renderDropdown","datasetSize","getDatasetSize","getMatchedResults","matchedResults","setMatchedResults","result","getSearchTerm","searchTerm","getPreppedSearchTerm","preppedSearchTerm","toLowerCase","getHTMLElements","updateNodes","currentViewAll","clearSearchButton","closeSearch","clear","toggleDropdown","classList","add","searchResultsVisible","offsetParent","on","$component","show","remove","hide","querySelectorAll","currentNode","find","r","id","activeElement","addEventListener","clickHandler","bind","define","forEach","event","keyHandler","async","window","console","warn","pendingPromise","Pending","renderAndShow","then","resolve","pending","getDataset","keyUpDown","direction","e","preventDefault","stopPropagation","moveToLastNode","moveToFirstNode","indexOf","moveToNode","target","closest","button","location","href","key"],"mappings":"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"}