jellyfin-web/dashboard-ui/bower_components/emby-webcomponents/alphapicker/alphapicker.js

define(["focusManager","layoutManager","dom","css!./style.css","paper-icon-button-light","material-icons"],function(focusManager,layoutManager,dom){"use strict";function focus(){var scope=this,selected=scope.querySelector("."+selectedButtonClass);selected?focusManager.focus(selected):focusManager.autoFocus(scope,!0)}function getAlphaPickerButtonClassName(){var alphaPickerButtonClassName="alphaPickerButton";return layoutManager.tv&&(alphaPickerButtonClassName+=" alphaPickerButton-tv"),alphaPickerButtonClassName}function getLetterButton(l){return'<button data-value="'+l+'" class="'+getAlphaPickerButtonClassName()+'">'+l+"</button>"}function render(element,options){element.classList.add("alphaPicker"),element.classList.contains("alphaPicker-vertical")||element.classList.add("focuscontainer-x");var letters,html="",alphaPickerButtonClassName=getAlphaPickerButtonClassName(),rowClassName="alphaPickerRow";element.classList.contains("alphaPicker-vertical")&&(rowClassName+=" alphaPickerRow-vertical"),html+='<div class="'+rowClassName+'">',"keyboard"===options.mode?html+='<button data-value=" " is="paper-icon-button-light" class="'+alphaPickerButtonClassName+'"><i class="md-icon alphaPickerButtonIcon">&#xE256;</i></button>':(letters=["#"],html+=letters.map(getLetterButton).join("")),letters=["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"],html+=letters.map(getLetterButton).join(""),"keyboard"===options.mode?(html+='<button data-value="backspace" is="paper-icon-button-light" class="'+alphaPickerButtonClassName+'"><i class="md-icon alphaPickerButtonIcon">&#xE14A;</i></button>',html+="</div>",letters=["0","1","2","3","4","5","6","7","8","9"],html+='<div class="'+rowClassName+'">',html+="<br/>",html+=letters.map(getLetterButton).join(""),html+="</div>"):html+="</div>",element.innerHTML=html,element.classList.add("focusable"),element.focus=focus}function AlphaPicker(options){function onItemFocusTimeout(){itemFocusTimeout=null,self.value(itemFocusValue)}function onAlphaFocusTimeout(){if(alphaFocusTimeout=null,document.activeElement===alphaFocusedElement){var value=alphaFocusedElement.getAttribute("data-value");self.value(value,!0)}}function onAlphaPickerInKeyboardModeClick(e){var alphaPickerButton=dom.parentWithClass(e.target,"alphaPickerButton");if(alphaPickerButton){var value=alphaPickerButton.getAttribute("data-value");element.dispatchEvent(new CustomEvent("alphavalueclicked",{cancelable:!1,detail:{value:value}}))}}function onAlphaPickerClick(e){var alphaPickerButton=dom.parentWithClass(e.target,"alphaPickerButton");if(alphaPickerButton){var value=alphaPickerButton.getAttribute("data-value");(this._currentValue||"").toUpperCase()===value.toUpperCase()?self.value(null,!0):self.value(value,!0)}}function onAlphaPickerFocusIn(e){alphaFocusTimeout&&(clearTimeout(alphaFocusTimeout),alphaFocusTimeout=null);var alphaPickerButton=dom.parentWithClass(e.target,"alphaPickerButton");alphaPickerButton&&(alphaFocusedElement=alphaPickerButton,alphaFocusTimeout=setTimeout(onAlphaFocusTimeout,100))}function onItemsFocusIn(e){var item=dom.parentWithClass(e.target,itemClass);if(item){var prefix=item.getAttribute("data-prefix");prefix&&prefix.length&&(itemFocusValue=prefix[0],itemFocusTimeout&&clearTimeout(itemFocusTimeout),itemFocusTimeout=setTimeout(onItemFocusTimeout,100))}}var self=this;this.options=options;var itemFocusValue,itemFocusTimeout,alphaFocusedElement,alphaFocusTimeout,element=options.element,itemsContainer=options.itemsContainer,itemClass=options.itemClass;self.enabled=function(enabled){enabled?(itemsContainer&&itemsContainer.addEventListener("focus",onItemsFocusIn,!0),"keyboard"===options.mode&&element.addEventListener("click",onAlphaPickerInKeyboardModeClick),"click"!==options.valueChangeEvent?element.addEventListener("focus",onAlphaPickerFocusIn,!0):element.addEventListener("click",onAlphaPickerClick.bind(this))):(itemsContainer&&itemsContainer.removeEventListener("focus",onItemsFocusIn,!0),element.removeEventListener("click",onAlphaPickerInKeyboardModeClick),element.removeEventListener("focus",onAlphaPickerFocusIn,!0),element.removeEventListener("click",onAlphaPickerClick.bind(this)))},render(element,options),this.enabled(!0),this.visible(!0)}var selectedButtonClass="alphaPickerButton-selected";return AlphaPicker.prototype.value=function(value,applyValue){var btn,selected,element=this.options.element;if(void 0!==value)if(null!=value){if(value=value.toUpperCase(),this._currentValue=value,"keyboard"!==this.options.mode){selected=element.querySelector("."+selectedButtonClass);try{btn=element.querySelector(".alphaPickerButton[data-value='"+value+"']")}catch(err){console.log("Error in querySelector: "+err)}btn&&btn!==selected&&btn.classList.add(selectedButtonClass),selected&&selected!==btn&&selected.classList.remove(selectedButtonClass)}}else this._currentValue=value,selected=element.querySelector("."+selectedButtonClass),selected&&selected.classList.remove(selectedButtonClass);return applyValue&&element.dispatchEvent(new CustomEvent("alphavaluechanged",{cancelable:!1,detail:{value:value}})),this._currentValue},AlphaPicker.prototype.on=function(name,fn){var element=this.options.element;element.addEventListener(name,fn)},AlphaPicker.prototype.off=function(name,fn){var element=this.options.element;element.removeEventListener(name,fn)},AlphaPicker.prototype.visible=function(visible){var element=this.options.element;element.style.visibility=visible?"visible":"hidden"},AlphaPicker.prototype.values=function(){for(var element=this.options.element,elems=element.querySelectorAll(".alphaPickerButton"),values=[],i=0,length=elems.length;i<length;i++)values.push(elems[i].getAttribute("data-value"));return values},AlphaPicker.prototype.focus=function(){var element=this.options.element;focusManager.autoFocus(element,!0)},AlphaPicker.prototype.destroy=function(){var element=this.options.element;this.enabled(!1),element.classList.remove("focuscontainer-x"),this.options=null},AlphaPicker});