3 lines
5.8 KiB
JavaScript
3 lines
5.8 KiB
JavaScript
/*! DSFR v1.11.2 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions) */
|
|
const s=window.dsfr;class t extends s.core.DisclosureButton{constructor(){super(s.core.DisclosureType.SELECT)}static get instanceClassName(){return"TabButton"}handleClick(s){super.handleClick(s),this.focus()}apply(s){super.apply(s),this.isPrimary&&(this.setAttribute("tabindex",s?"0":"-1"),s&&this.list&&this.list.focalize(this))}get list(){return this.element.getAscendantInstance("TabsList","TabsGroup")}}const e={TAB:s.internals.ns.selector("tabs__tab"),GROUP:s.internals.ns.selector("tabs"),PANEL:s.internals.ns.selector("tabs__panel"),LIST:s.internals.ns.selector("tabs__list"),SHADOW:s.internals.ns.selector("tabs__shadow"),SHADOW_LEFT:s.internals.ns.selector("tabs__shadow--left"),SHADOW_RIGHT:s.internals.ns.selector("tabs__shadow--right"),PANEL_START:s.internals.ns.selector("tabs__panel--direction-start"),PANEL_END:s.internals.ns.selector("tabs__panel--direction-end")},i="direction-start",n="direction-end",r="none";class a extends s.core.Disclosure{constructor(){super(s.core.DisclosureType.SELECT,e.PANEL,t,"TabsGroup"),this._direction=r,this._isPreventingTransition=!1}static get instanceClassName(){return"TabPanel"}get direction(){return this._direction}set direction(s){if(s!==this._direction){switch(this._direction){case i:this.removeClass(e.PANEL_START);break;case n:this.removeClass(e.PANEL_END);break;case r:break;default:return}switch(this._direction=s,this._direction){case i:this.addClass(e.PANEL_START);break;case n:this.addClass(e.PANEL_END)}}}get isPreventingTransition(){return this._isPreventingTransition}set isPreventingTransition(t){this._isPreventingTransition!==t&&(t?this.addClass(s.internals.motion.TransitionSelector.NONE):this.removeClass(s.internals.motion.TransitionSelector.NONE),this._isPreventingTransition=!0===t)}translate(s,t){this.isPreventingTransition=t,this.direction=s}reset(){this.group&&this.group.retrieve(!0)}_electPrimaries(s){return this.group&&this.group.list?super._electPrimaries(s).filter((s=>this.group.list.node.contains(s.node))):[]}}const o="tab_keys_left",h="tab_keys_right",l="tab_keys_home",c="tab_keys_end",d={PRESS_KEY:s.internals.ns.emission("tab","press_key"),LIST_HEIGHT:s.internals.ns.emission("tab","list_height")};class u extends s.core.DisclosuresGroup{constructor(){super("TabPanel")}static get instanceClassName(){return"TabsGroup"}init(){super.init(),this.listen("transitionend",this.transitionend.bind(this)),this.addAscent(d.PRESS_KEY,this.pressKey.bind(this)),this.addAscent(d.LIST_HEIGHT,this.setListHeight.bind(this)),this.isRendering=!0}getIndex(s=0){super.getIndex(s)}get list(){return this.element.getDescendantInstances("TabsList","TabsGroup",!0)[0]}setListHeight(s){this.listHeight=s}transitionend(s){this.isPreventingTransition=!0}get buttonHasFocus(){return this.members.some((s=>s.buttonHasFocus))}pressKey(s){switch(s){case o:this.pressLeft();break;case h:this.pressRight();break;case l:this.pressHome();break;case c:this.pressEnd()}}pressRight(){this.buttonHasFocus&&(this.index<this.length-1?this.index++:this.index=0,this.focus())}pressLeft(){this.buttonHasFocus&&(this.index>0?this.index--:this.index=this.length-1,this.focus())}pressHome(){this.buttonHasFocus&&(this.index=0,this.focus())}pressEnd(){this.buttonHasFocus&&(this.index=this.length-1,this.focus())}focus(){this.current&&this.current.focus()}apply(){for(let s=0;s<this._index;s++)this.members[s].translate(i);this.current&&this.current.translate(r);for(let s=this._index+1;s<this.length;s++)this.members[s].translate(n);this.isPreventingTransition=!1}get isPreventingTransition(){return this._isPreventingTransition}set isPreventingTransition(t){this._isPreventingTransition!==t&&(t?this.addClass(s.internals.motion.TransitionSelector.NONE):this.removeClass(s.internals.motion.TransitionSelector.NONE),this._isPreventingTransition=!0===t)}render(){if(null===this.current)return;this.node.scrollTop=0,this.node.scrollLeft=0;const s=Math.round(this.current.node.offsetHeight);this.panelHeight!==s&&(this.panelHeight=s,this.style.setProperty("--tabs-height",this.panelHeight+this.listHeight+"px"))}}class b extends s.core.Instance{static get instanceClassName(){return"TabsList"}init(){this.listen("scroll",this.scroll.bind(this)),this.listenKey(s.core.KeyCodes.RIGHT,this.ascend.bind(this,d.PRESS_KEY,h),!0,!0),this.listenKey(s.core.KeyCodes.LEFT,this.ascend.bind(this,d.PRESS_KEY,o),!0,!0),this.listenKey(s.core.KeyCodes.HOME,this.ascend.bind(this,d.PRESS_KEY,l),!0,!0),this.listenKey(s.core.KeyCodes.END,this.ascend.bind(this,d.PRESS_KEY,c),!0,!0),this.isResizing=!0}focalize(s){const t=s.getRect(),e=this.getRect(),i=this.node.scrollLeft;t.left<e.left?this.node.scrollTo(i-e.left+t.left-16,0):t.right>e.right&&this.node.scrollTo(i-e.right+t.right+16,0)}get isScrolling(){return this._isScrolling}set isScrolling(s){this._isScrolling!==s&&(this._isScrolling=s,this.apply())}apply(){this._isScrolling?(this.addClass(e.SHADOW),this.scroll()):(this.removeClass(e.SHADOW_RIGHT),this.removeClass(e.SHADOW_LEFT),this.removeClass(e.SHADOW))}scroll(){const s=this.node.scrollLeft,t=s<=16,i=this.node.scrollWidth-this.node.clientWidth-16,n=Math.abs(s)>=i,r="rtl"===document.documentElement.getAttribute("dir"),a=r?e.SHADOW_RIGHT:e.SHADOW_LEFT,o=r?e.SHADOW_LEFT:e.SHADOW_RIGHT;t?this.removeClass(a):this.addClass(a),n?this.removeClass(o):this.addClass(o)}resize(){this.isScrolling=this.node.scrollWidth>this.node.clientWidth+16;const s=this.getRect().height;this.setProperty("--tabs-list-height",`${s}px`),this.ascend(d.LIST_HEIGHT,s)}dispose(){this.isScrolling=!1}}s.tab={TabPanel:a,TabButton:t,TabsGroup:u,TabsList:b,TabSelector:e,TabEmission:d},s.internals.register(s.tab.TabSelector.PANEL,s.tab.TabPanel),s.internals.register(s.tab.TabSelector.GROUP,s.tab.TabsGroup),s.internals.register(s.tab.TabSelector.LIST,s.tab.TabsList);
|
|
//# sourceMappingURL=tab.module.min.js.map
|