-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathsmart.multisplitbutton.js
6 lines (4 loc) · 7.25 KB
/
smart.multisplitbutton.js
1
2
3
4
5
6
/* Smart UI v15.2.0 (2023-04-20)
Copyright (c) 2011-2023 jQWidgets.
License: https://htmlelements.com/license/ */ //
Smart("smart-multi-split-button",class extends Smart.DropDownList{static get properties(){return{buttonsDataSource:{value:[],type:"array"},dropDownOpenMode:{allowedValues:["none","dropDownButton","auto"],value:"dropDownButton",type:"string"}}}template(){return'<div id="container" role="presentation">\n <span class="smart-label" id="label">[[label]]</span>\n <div id="content" class="smart-content" role="presentation">\n <div id="actionButton" class ="smart-input smart-action-button" role="presentation">\n <template>\n <div class="smart-multi-split-button-buttons" *items={{buttonsDataSource}} role="presentation"><span class="smart-action-split-button" inner-H-T-M-L={{item}} role="button"></span></div>\n </template>\n </div>\n <span id="dropDownButton" class="smart-drop-down-button" role="button" aria-label="Toggle popup">\n <span class ="smart-drop-down-button-icon" id="arrow" aria-hidden="true"></span>\n </span>\n <div id="dropDownContainer" class="smart-drop-down smart-drop-down-container smart-visibility-hidden" role="presentation">\n <smart-list-box id="listBox" unfocusable\n animation="[[animation]]"\n data-source="[[dataSource]]"\n disabled="[[disabled]]"\n display-loading-indicator="[[displayLoadingIndicator]]"\n display-member="[[displayMember]]"\n filterable="[[filterable]]"\n filter-mode="[[filterMode]]"\n filter-input-placeholder="[[filterInputPlaceholder]]"\n grouped="[[grouped]]"\n group-member="[[groupMember]]"\n item-height="[[itemHeight]]"\n item-template="[[itemTemplate]]"\n incremental-search-delay="[[incrementalSearchDelay]]"\n incremental-search-mode="[[incrementalSearchMode]]"\n loading-indicator-placeholder="[[loadingIndicatorPlaceholder]]"\n loading-indicator-position="[[loadingIndicatorPosition]]"\n name="[[name]]"\n placeholder="[[dropDownPlaceholder]]"\n readonly="[[readonly]]"\n right-to-left="[[rightToLeft]]"\n selected-indexes="{{selectedIndexes}}"\n selection-mode="[[selectionMode]]"\n selected-values="{{selectedValues}}"\n sorted="[[sorted]]"\n theme="[[theme]]"\n value-member="[[valueMember]]"\n horizontal-scroll-bar-visibility="[[horizontalScrollBarVisibility]]"\n vertical-scroll-bar-visibility="[[verticalScrollBarVisibility]]"\n virtualized="[[virtualized]]">\n <content></content>\n </smart-list-box>\n <div id="resizeBar" class="smart-drop-down-resize-bar" aria-label="Resize">\n <div></div>\n </div>\n </div>\n </div>\n <span class="smart-hint" id="hint">[[hint]]</span>\n </div>'}static get listeners(){return{"actionButton.down":"_buttonsDownHandler","actionButton.mouseenter":"_buttonsMouseEventsHandler","actionButton.move":"_buttonsMouseEventsHandler","actionButton.mouseleave":"_buttonsMouseEventsHandler","dropDownButton.mouseenter":"_dropDownButtonMouseEventsHandler","dropDownButton.mouseleave":"_dropDownButtonMouseEventsHandler","actionButton.focus":"_focusEventHandler","actionButton.blur":"_blurEventHandler","dropDownButton.focus":"_focusEventHandler","dropDownButton.blur":"_blurEventHandler"}}static get styleUrls(){return["smart.dropdown.css","smart.multisplitbutton.css"]}_blurEventHandler(){const t=this;t.removeAttribute("focus"),t._preventDropDownClose||t.close()}_focusEventHandler(){this.setAttribute("focus","")}_documentUpHandler(t){const e=this;super._documentUpHandler(t);const n=(e.shadowRoot||e).querySelectorAll(".smart-action-split-button");for(let t=0;t<n.length;t++)n[t].removeAttribute("active");e.removeAttribute("active")}_dropDownButtonMouseEventsHandler(t){const e=this;"mouseleave"===t.type?(e.$.dropDownButton.removeAttribute("hover"),e.removeAttribute("hover")):(e.$.dropDownButton.setAttribute("hover",""),e.setAttribute("hover",""))}_buttonsDownHandler(t){const e=this,n=(e.shadowRoot||e).querySelectorAll(".smart-action-split-button");for(let o=0;o<n.length;o++){const r=n[o].getBoundingClientRect();"mouseleave"!==t.type?(e.setAttribute("active",""),n[o].removeAttribute("active"),r.left<=t.pageX&&t.pageX<=r.width+r.left&&(n[o].setAttribute("active",""),e.$.fireEvent("buttonClick",{index:o,label:e.buttonsDataSource[o]}))):(n[o].removeAttribute("active"),e.removeAttribute("active",""))}}_buttonsMouseEventsHandler(t){const e=this,n=(e.shadowRoot||e).querySelectorAll(".smart-action-split-button");for(let o=0;o<n.length;o++){const r=n[o].getBoundingClientRect();"mouseleave"!==t.type?(e.setAttribute("hover",""),n[o].removeAttribute("hover"),r.left<=t.pageX&&t.pageX<=r.width+r.left&&n[o].setAttribute("hover","")):(n[o].removeAttribute("hover"),e.removeAttribute("hover",""))}}_applySelection(){const t=this;if(0===t.buttonsDataSource.length){if("placeholder"===t.selectionDisplayMode||0===t.selectedIndexes.length)return void((t.shadowRoot||t).querySelector(".smart-template-container").innerHTML=t.placeholder);if(!t.$.listBox._items||0===t.$.listBox._items.length)return;(t.shadowRoot||t).querySelector(".smart-template-container").innerHTML='<div class="smart-multi-split-button-buttons"><span class="smart-action-split-button"></span></div>',t.$.actionButton.querySelector(".smart-action-split-button").appendChild(t._createToken())}}propertyChangedHandler(t,e,n){const o=this;"dataSource"===t||"displayMember"===t?(o._setDropDownSize(),o._positionDetection.checkBrowserBounds("vertically"),o._positionDetection.positionDropDown(),o._positionDetection.checkBrowserBounds("horizontally")):super.propertyChangedHandler(t,e,n)}_setAriaRelations(){const t=this;t.setAttribute("role","group"),t.setAttribute("aria-describedby",t.$.hint.id),t.setAttribute("aria-labelledby",t.$.label.id),t.getElementsByClassName("smart-template-container")[0].setAttribute("role","presentation");const e=t._ariaButton=t.$.dropDownButton;e.setAttribute("aria-haspopup","listbox"),e.setAttribute("aria-expanded",t.opened),e.setAttribute("aria-owns",t.$.listBox.id)}});