| 1 | {"version":3,"sources":["../../src/js/autocomplete_widget.js"],"names":["html","nothing","render","bindTemplate","throttlePromise","template","style","AutocompleteSuggestion","constructor","label","value","PerspectiveAutocompleteWidget","displayed","_selection_index","connectedCallback","_register_ids","_register_callbacks","markup","_details","display","_container","classList","remove","_list","children","setAttribute","length","clear","reposition","scrollTop","add","console","warning","item_clicked","ev","target","matches","event","CustomEvent","detail","bubbles","dispatchEvent","item_mouseover","_render_details_panel","item_mouseleave","get_selected_value","getAttribute","hide","removeAttribute","_next","count","idx","_go_to","_prev","position","scrollIntoView","block","item","_clear_details_panel","hasAttribute","help","signature","shadowRoot","querySelector","addEventListener","bind","preventDefault"],"mappings":"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","sourcesContent":["/******************************************************************************\n *\n * Copyright (c) 2017, the Perspective Authors.\n *\n * This file is part of the Perspective library, distributed under the terms of\n * the Apache License 2.0. The full license can be found in the LICENSE file.\n *\n */\nimport {html, nothing, render} from \"lit-html\";\n\nimport {bindTemplate, throttlePromise} from \"./utils.js\";\n\nimport template from \"../html/autocomplete_widget.html\";\n\nimport style from \"../less/autocomplete_widget.less\";\n\n/**\n * A single suggestion object for the autocomplete, containing `label`, which\n * is the text displayed to the user, and `value`, which is the text that goes\n * into the input when a selection is chosen.\n */\nexport class AutocompleteSuggestion {\n /**\n * Construct a new autocomplete suggestion.\n *\n * @param {String} label the text shown to the user\n * @param {String} value the text used to replace inside the input\n */\n constructor(label, value) {\n this.label = label;\n this.value = value;\n }\n}\n\n// Eslint complains here because we don't do anything, but actually we globally\n// register this class as a CustomElement\n@bindTemplate(template, style) // eslint-disable-next-line no-unused-vars\nclass PerspectiveAutocompleteWidget extends HTMLElement {\n constructor() {\n super();\n this.displayed = false;\n this._selection_index = -1;\n }\n\n connectedCallback() {\n this._register_ids();\n this._register_callbacks();\n }\n\n /**\n * Render an array of suggestions inside the autocomplete. Calling this\n * method will overwrite the existing suggestions inside the\n * autocomplete container.\n *\n * @param {Array<Template>} markup An array of `lit-html` template objects\n * that will be rendered. If the length of `markup` is 0, the autocomplete\n * is cleared and hidden.\n * @param {Boolean} is_column_name if true, suggestions will be rendered\n * with additional CSS classes denoting that they are column names.\n *\n * TODO: do we want throttlePromise on all render functions?\n */\n @throttlePromise\n render(markup) {\n this._details.style.display = \"none\";\n this._container.classList.remove(\"show-details\");\n this._list.classList.remove(\"small\");\n\n if (this._selection_index > -1) {\n const children = this._list.children;\n children[this._selection_index].setAttribute(\"aria-selected\", false);\n }\n\n if (markup.length === 0) {\n this.clear();\n return;\n }\n\n this.reposition();\n\n // Reset selection state\n this._selection_index = -1;\n\n // Show autocomplete container\n this.display();\n\n // Reset scroll inside container to be at the top\n this._list.scrollTop = 0;\n\n // Special classes for smaller selections\n if (markup.length < 4) {\n this._list.classList.add(\"small\");\n }\n\n render(markup, this._list);\n }\n\n /**\n * Repositions the widget within the textarea - must be implemented by the\n * user. Defaults to a no-op;\n */\n reposition() {\n console.warning(\"PerspectiveAutocompleteWidget.reposition has not been implemented.\");\n return;\n }\n\n /**\n * If an item is clicked inside the autocomplete, dispatch a\n * `perspective-autocomplete-item-clicked` event, containing the original\n * click event in the new event's `detail` attribute.\n *\n * @param {*} ev\n */\n item_clicked(ev) {\n if (ev.target && (ev.target.matches(\".psp-autocomplete__item\") || ev.target.matches(\".psp-autocomplete-item__label\"))) {\n const event = new CustomEvent(\"perspective-autocomplete-item-clicked\", {\n detail: ev,\n bubbles: true\n });\n this.dispatchEvent(event);\n }\n }\n\n /**\n * When an item is hovered over, render the details panel if necessary.\n *\n * @param {*} ev\n */\n item_mouseover(ev) {\n if (ev.target && ev.target.matches(\".psp-autocomplete__item\")) {\n this._render_details_panel(ev.target);\n }\n }\n\n /**\n * When hover exits, clear the details panel.\n *\n * @param {*} ev\n */\n item_mouseleave(ev) {\n if (ev.target && ev.target.matches(\".psp-autocomplete__item\")) {\n this._render_details_panel(ev.target);\n }\n }\n\n /**\n * Returns the `data-value` attribute of the currently selected item, or\n * `undefined` if there is no selection.\n */\n get_selected_value() {\n if (this._selection_index !== -1) {\n return this._list.children[this._selection_index].getAttribute(\"data-value\");\n }\n }\n\n /**\n * Clears the autocomplete widget and sets the widget's `display`\n * style to `none`.\n */\n clear() {\n this.hide();\n this._selection_index = -1;\n this._container.removeAttribute(\"style\");\n this._container.classList.add(\"undocked\");\n render(nothing, this._list);\n }\n\n /**\n * Displays the autocomplete and sets `this.displayed` to true.\n */\n display() {\n this._container.style.display = \"flex\";\n this.displayed = true;\n }\n\n /**\n * Hides the autocomplete, and sets `this.displayed` to false.\n */\n hide() {\n this._container.style.display = \"none\";\n this.displayed = false;\n }\n\n /**\n * Navigate to the next element inside the container.\n */\n _next() {\n const count = this._list.children.length;\n const idx = this._selection_index < count - 1 ? this._selection_index + 1 : count ? 0 : -1;\n this._go_to(idx);\n }\n\n /**\n * Go back one element inside the container.\n */\n _prev() {\n const count = this._list.children.length;\n const position = this._selection_index - 1;\n const idx = this._selection_index > -1 && position !== -1 ? position : count - 1;\n this._go_to(idx);\n }\n\n /**\n * Navigate to element `idx` inside the container.\n *\n * @param {Number} idx\n */\n _go_to(idx) {\n // liberally borrowed from awesomplete\n const children = this._list.children;\n\n if (this._selection_index > -1) {\n children[this._selection_index].setAttribute(\"aria-selected\", false);\n }\n\n // reset selection\n this._selection_index = idx;\n\n if (idx > -1 && children.length > 0) {\n children[idx].setAttribute(\"aria-selected\", \"true\");\n children[idx].scrollIntoView({\n block: \"nearest\"\n });\n\n this._render_details_panel(children[idx]);\n }\n }\n\n _render_details_panel(item) {\n // Because hover and keyboard events can interact, always clear before\n // re-rendering the details panel.\n this._clear_details_panel();\n\n if (item.hasAttribute(\"data-help\") && item.getAttribute(\"data-help\")) {\n this._container.classList.add(\"show-details\");\n const label = item.getAttribute(\"data-label\");\n const help = item.getAttribute(\"data-help\");\n const signature = item.getAttribute(\"data-signature\");\n\n const template = html`\n <span class=\"psp-autocomplete-item-detail__item--label\">${label}</span>\n <span class=\"psp-autocomplete-item-detail__item--signature\">${signature}</span>\n <span class=\"psp-autocomplete-item-detail__item--help\">${help}</span>\n `;\n\n render(template, this._details);\n\n this._details.scrollTop = 0;\n this._details.style.display = \"block\";\n }\n }\n\n /**\n * Remove and hide the details panel.\n */\n _clear_details_panel() {\n render(nothing, this._details);\n this._details.style.display = \"none\";\n this._container.classList.remove(\"show-details\");\n }\n\n /**\n * Map DOM IDs to class properties.\n */\n _register_ids() {\n this._container = this.shadowRoot.querySelector(\".psp-autocomplete-widget\");\n this._list = this.shadowRoot.querySelector(\".psp-autocomplete-widget__list\");\n this._details = this.shadowRoot.querySelector(\".psp-autocomplete-widget__details\");\n }\n\n /**\n * Map callback functions to class properties.\n */\n _register_callbacks() {\n // Dispatch a custom event on click & disable the `mousedown` handler\n this._list.addEventListener(\"click\", this.item_clicked.bind(this));\n this._list.addEventListener(\"mousedown\", ev => ev.preventDefault());\n this._list.addEventListener(\"mouseover\", this.item_mouseover.bind(this));\n this._list.addEventListener(\"mouseleave\", this.item_mouseleave.bind(this));\n }\n}\n"],"file":"autocomplete_widget.js"} |