@diplodoc/tabs-extension 3.1.1 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/runtime/index.js +1 -1
  3. package/runtime/index.js.map +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@diplodoc/tabs-extension",
3
- "version": "3.1.1",
3
+ "version": "3.2.0",
4
4
  "description": "Tabs plugin for Diplodoc transformer and builder",
5
5
  "main": "plugin/index.js",
6
6
  "types": "plugin/index.d.ts",
package/runtime/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";(()=>{var O="yfm-tabs",X="yfm-tabs-vertical",E="yfm-tab-list",V="yfm-tab",u="yfm-tab-panel",T="active";var B="data-diplodoc-group",f="data-diplodoc-key",F="data-diplodoc-id";var Q="defaultTabsGroup-",G=Symbol.for("diplodocTabs");var m=g=>{let t=g.composedPath();return Array.isArray(t)&&t.length>0?t[0]:g.target},h=g=>{let t=m(g);return!t||!t.matches},y=g=>Math.abs(g.scrollHeight-g.clientHeight)>1?g:g.parentElement?y(g.parentElement):void 0,x=(g,t)=>{let e=g.getBoundingClientRect(),i=t.getBoundingClientRect();return{top:e.top-i.top,left:e.left-i.left,scrollTop:t.scrollTop,scrollLeft:t.scrollLeft}};var r={TABS:`.${O}`,TAB_LIST:`.${E}`,TAB:`.${V}`,TAB_PANEL:`.${u}`,VERTICAL_TABS:`.${X}`},p=class{constructor(t){this._onSelectTabHandlers=new Set;this._document=t,this._document.addEventListener("click",e=>{let i=m(e),o=this.areTabsVertical(i);if(h(e)||!(this.isValidTabElement(i)||o))return;let l=this.getTabDataFromHTMLElement(i);l&&this._selectTab(l,i)}),this._document.addEventListener("keydown",e=>{let i=null;switch(e.key){case"ArrowLeft":{i="left";break}case"ArrowRight":{i="right";break}}if(!i)return;let o=m(e);if(h(e)||!this.isValidTabElement(o))return;let{tabs:l,nodes:a}=this.getTabs(o),c=this.getTabDataFromHTMLElement(o),n=l.findIndex(({key:A})=>(c==null?void 0:c.key)&&A===c.key);if(!c||l.length<=1||n===-1)return;let s=(n+(i==="left"?-1:1)+l.length)%l.length;this.selectTab(l[s]),a[s].focus()})}onSelectTab(t){return this._onSelectTabHandlers.add(t),()=>{this._onSelectTabHandlers.delete(t)}}selectTabById(t,e){let i=this._document.querySelector(`${r.TAB}[${F}="${t}"]`);if(!i||!this.isValidTabElement(i))return;let o=this.getTabDataFromHTMLElement(i);o&&this._selectTab(o,i),e!=null&&e.scrollToElement&&i.scrollIntoView()}selectTab(t){this._selectTab(t)}_selectTab(t,e){let{group:i,key:o,align:l}=t;if(!i)return;let a=e&&y(e),c=a&&x(e,a);this.updateHTML({group:i,key:o,align:l},l)>0&&(this.fireSelectTabEvent({group:i,key:o,align:l},e==null?void 0:e.dataset.diplodocId),c&&this.resetScroll(e,a,c))}updateHTML(t,e){switch(e){case"radio":return this.updateHTMLVertical(t);case"horizontal":return this.updateHTMLHorizontal(t)}return 0}updateHTMLVertical(t){let{group:e,key:i}=t,o=this._document.querySelectorAll(`${r.TABS}[${B}="${e}"] ${r.TAB}[${f}="${i}"]`),l=0;return o.forEach(a=>{let n=a.parentNode.children;for(let s=0;s<n.length;s+=2){let[A,I]=[n.item(s),n.item(s+1)],d=A.children.item(0);d.hasAttribute("checked")&&(A.classList.remove("active"),I==null||I.classList.remove("active"),d.removeAttribute("checked")),A===a&&(A.classList.add("active"),I==null||I.classList.add("active"),d.setAttribute("checked","true")),l++}}),l}updateHTMLHorizontal(t){let{group:e,key:i}=t,o=this._document.querySelectorAll(`${r.TABS}[${B}="${e}"] ${r.TAB}[${f}="${i}"]`),l=0;return o.forEach(a=>{let c=a;if(!this.isValidTabElement(c)||c.dataset.diplodocIsActive==="true")return;l++;let n=a,s=n.parentNode,A=s==null?void 0:s.parentNode,I=Array.from((s==null?void 0:s.querySelectorAll(r.TAB))||[]),d=Array.from((A==null?void 0:A.children)||[]).filter(b=>b.classList.contains(u)),S=I.indexOf(n);I.forEach((b,L)=>{let R=d[L],C=L===S,Z=b;Z.dataset.diplodocIsActive=C?"true":"false",b.classList.toggle(T,C),b.setAttribute("aria-selected",C.toString()),b.setAttribute("tabindex",C?"0":"-1"),R.classList.toggle(T,C)})}),l}resetScroll(t,e,i){let o=x(t,e),l=o.top-i.top,a=o.left-i.left,c=o.scrollTop-i.scrollTop,n=o.scrollLeft-i.scrollLeft;e.scrollTo(e.scrollLeft+a-n,e.scrollTop+l-c)}fireSelectTabEvent(t,e){let{group:i,key:o,align:l}=t,a=i.startsWith(Q)?{key:o,align:l}:t;this._onSelectTabHandlers.forEach(c=>{c({tab:a,currentTabId:e})})}isValidTabElement(t){let e=t.matches(r.TAB)&&t.dataset.diplodocId?t.closest(r.TAB_LIST):null;return e==null?void 0:e.closest(r.TABS)}areTabsVertical(t){let e=t.parentElement;return t.dataset.diplodocVerticalTab||!!(e!=null&&e.dataset.diplodocVerticalTab)}getTabDataFromHTMLElement(t){var o,l;if(this.areTabsVertical(t)){let a=t.dataset.diplodocVerticalTab?t:t.parentElement,c=a.dataset.diplodocKey,n=(o=a.closest(r.TABS))==null?void 0:o.dataset.diplodocGroup;return c&&n?{group:n,key:c,align:"radio"}:null}let e=t.dataset.diplodocKey,i=(l=t.closest(r.TABS))==null?void 0:l.dataset.diplodocGroup;return e&&i?{group:i,key:e,align:"horizontal"}:null}getTabs(t){var l,a;let e=(l=t.closest(r.TABS))==null?void 0:l.dataset.diplodocGroup,i=(a=t.closest(r.TAB_LIST))==null?void 0:a.querySelectorAll(r.TAB),o=[];return i.forEach(c=>{let n=c==null?void 0:c.dataset.diplodocKey;n&&o.push({group:e,key:n,align:"horizontal"})}),{tabs:o,nodes:i}}};typeof window!="undefined"&&typeof document!="undefined"&&!window[G]&&(window[G]=new p(document));})();
1
+ "use strict";(()=>{var O="yfm-tabs",X="yfm-tabs-vertical",E="yfm-tab-list",V="yfm-tab",u="yfm-tab-panel",T="active";var B="data-diplodoc-group",f="data-diplodoc-key",F="data-diplodoc-id";var Q="defaultTabsGroup-",G=Symbol.for("diplodocTabs");var m=g=>{let t=g.composedPath();return Array.isArray(t)&&t.length>0?t[0]:g.target},h=g=>{let t=m(g);return!t||!t.matches},y=g=>Math.abs(g.scrollHeight-g.clientHeight)>1?g:g.parentElement?y(g.parentElement):void 0,x=(g,t)=>{let e=g.getBoundingClientRect(),i=t.getBoundingClientRect();return{top:e.top-i.top,left:e.left-i.left,scrollTop:t.scrollTop,scrollLeft:t.scrollLeft}};var r={TABS:`.${O}`,TAB_LIST:`.${E}`,TAB:`.${V}`,TAB_PANEL:`.${u}`,VERTICAL_TABS:`.${X}`},p=class{constructor(t){this._onSelectTabHandlers=new Set;this._document=t,this._document.addEventListener("click",e=>{let i=m(e),o=this.areTabsVertical(i);if(h(e)||!(this.isValidTabElement(i)||o))return;let l=this.getTabDataFromHTMLElement(i);l&&this._selectTab(l,i)}),this._document.addEventListener("keydown",e=>{let i=null;switch(e.key){case"ArrowLeft":{i="left";break}case"ArrowRight":{i="right";break}case"ArrowUp":{i="left";break}case"ArrowDown":{i="right";break}}if(!i)return;let o=m(e);if(h(e)||!this.isValidTabElement(o))return;let{tabs:l,nodes:a}=this.getTabs(o),c=this.getTabDataFromHTMLElement(o),n=l.findIndex(({key:A})=>(c==null?void 0:c.key)&&A===c.key);if(!c||l.length<=1||n===-1)return;let s=(n+(i==="left"?-1:1)+l.length)%l.length;this.selectTab(l[s]),a[s].focus()})}onSelectTab(t){return this._onSelectTabHandlers.add(t),()=>{this._onSelectTabHandlers.delete(t)}}selectTabById(t,e){let i=this._document.querySelector(`${r.TAB}[${F}="${t}"]`);if(!i||!this.isValidTabElement(i))return;let o=this.getTabDataFromHTMLElement(i);o&&this._selectTab(o,i),e!=null&&e.scrollToElement&&i.scrollIntoView()}selectTab(t){this._selectTab(t)}_selectTab(t,e){let{group:i,key:o,align:l}=t;if(!i)return;let a=e&&y(e),c=a&&x(e,a);this.updateHTML({group:i,key:o,align:l},l)>0&&(this.fireSelectTabEvent({group:i,key:o,align:l},e==null?void 0:e.dataset.diplodocId),c&&this.resetScroll(e,a,c))}updateHTML(t,e){switch(e){case"radio":return this.updateHTMLVertical(t);case"horizontal":return this.updateHTMLHorizontal(t)}return 0}updateHTMLVertical(t){let{group:e,key:i}=t,o=this._document.querySelectorAll(`${r.TABS}[${B}="${e}"] ${r.TAB}[${f}="${i}"]`),l=0;return o.forEach(a=>{let n=a.parentNode.children;for(let s=0;s<n.length;s+=2){let[A,I]=[n.item(s),n.item(s+1)],d=A.children.item(0);d.hasAttribute("checked")&&(A.classList.remove("active"),I==null||I.classList.remove("active"),d.removeAttribute("checked")),A===a&&(A.classList.add("active"),I==null||I.classList.add("active"),d.setAttribute("checked","true")),l++}}),l}updateHTMLHorizontal(t){let{group:e,key:i}=t,o=this._document.querySelectorAll(`${r.TABS}[${B}="${e}"] ${r.TAB}[${f}="${i}"]`),l=0;return o.forEach(a=>{let c=a;if(!this.isValidTabElement(c)||c.dataset.diplodocIsActive==="true")return;l++;let n=a,s=n.parentNode,A=s==null?void 0:s.parentNode,I=Array.from((s==null?void 0:s.querySelectorAll(r.TAB))||[]),d=Array.from((A==null?void 0:A.children)||[]).filter(b=>b.classList.contains(u)),S=I.indexOf(n);I.forEach((b,L)=>{let R=d[L],C=L===S,Z=b;Z.dataset.diplodocIsActive=C?"true":"false",b.classList.toggle(T,C),b.setAttribute("aria-selected",C.toString()),b.setAttribute("tabindex",C?"0":"-1"),R.classList.toggle(T,C)})}),l}resetScroll(t,e,i){let o=x(t,e),l=o.top-i.top,a=o.left-i.left,c=o.scrollTop-i.scrollTop,n=o.scrollLeft-i.scrollLeft;e.scrollTo(e.scrollLeft+a-n,e.scrollTop+l-c)}fireSelectTabEvent(t,e){let{group:i,key:o,align:l}=t,a=i.startsWith(Q)?{key:o,align:l}:t;this._onSelectTabHandlers.forEach(c=>{c({tab:a,currentTabId:e})})}isValidTabElement(t){let e=t.matches(r.TAB)&&t.dataset.diplodocId?t.closest(r.TAB_LIST):null;return e==null?void 0:e.closest(r.TABS)}areTabsVertical(t){let e=t.parentElement;return t.dataset.diplodocVerticalTab||!!(e!=null&&e.dataset.diplodocVerticalTab)}getTabDataFromHTMLElement(t){var o,l;if(this.areTabsVertical(t)){let a=t.dataset.diplodocVerticalTab?t:t.parentElement,c=a.dataset.diplodocKey,n=(o=a.closest(r.TABS))==null?void 0:o.dataset.diplodocGroup;return c&&n?{group:n,key:c,align:"radio"}:null}let e=t.dataset.diplodocKey,i=(l=t.closest(r.TABS))==null?void 0:l.dataset.diplodocGroup;return e&&i?{group:i,key:e,align:"horizontal"}:null}getTabs(t){var l,a;let e=(l=t.closest(r.TABS))==null?void 0:l.dataset.diplodocGroup,i=(a=t.closest(r.TAB_LIST))==null?void 0:a.querySelectorAll(r.TAB),o=[];return i.forEach(c=>{let n=c==null?void 0:c.dataset.diplodocKey;n&&o.push({group:e,key:n,align:"horizontal"})}),{tabs:o,nodes:i}}};typeof window!="undefined"&&typeof document!="undefined"&&!window[G]&&(window[G]=new p(document));})();
2
2
  //# sourceMappingURL=index.js.map
package/runtime/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../src/common.ts", "../src/runtime/utils.ts", "../src/runtime/TabsController.ts", "../src/runtime/index.ts"],
4
- "sourcesContent": ["import type {TabsOrientation} from './plugin/transform';\nimport type {TabsController} from './runtime/TabsController';\n\nexport const TABS_CLASSNAME = 'yfm-tabs';\nexport const TABS_VERTICAL_CLASSNAME = 'yfm-tabs-vertical';\nexport const TABS_LIST_CLASSNAME = 'yfm-tab-list';\nexport const TAB_CLASSNAME = 'yfm-tab';\nexport const TAB_PANEL_CLASSNAME = 'yfm-tab-panel';\nexport const ACTIVE_CLASSNAME = 'active';\nexport const VERTICAL_TAB_CLASSNAME = 'yfm-vertical-tab';\n\nexport const GROUP_DATA_KEY = 'data-diplodoc-group';\nexport const TAB_DATA_KEY = 'data-diplodoc-key';\nexport const TAB_DATA_ID = 'data-diplodoc-id';\nexport const TAB_DATA_VERTICAL_TAB = 'data-diplodoc-vertical-tab';\nexport const TAB_ACTIVE_KEY = 'data-diplodoc-is-active';\nexport const TAB_RADIO_KEY = 'data-diplodoc-input';\n\nexport const DEFAULT_TABS_GROUP_PREFIX = 'defaultTabsGroup-';\n\nexport interface Tab {\n group?: string;\n key: string;\n align: TabsOrientation;\n}\n\nexport interface SelectedTabEvent {\n tab: Tab;\n currentTabId?: string;\n}\n\nexport const GLOBAL_SYMBOL: unique symbol = Symbol.for('diplodocTabs');\n\ndeclare global {\n interface Window {\n [GLOBAL_SYMBOL]: TabsController;\n }\n}\n", "export const getEventTarget = (event: Event) => {\n const path = event.composedPath();\n return Array.isArray(path) && path.length > 0 ? path[0] : event.target;\n};\n\nexport const isCustom = (event: Event) => {\n const target = getEventTarget(event);\n return !target || !(target as HTMLElement).matches;\n};\n\nexport const getClosestScrollableParent = (element: HTMLElement): HTMLElement | undefined => {\n if (Math.abs(element.scrollHeight - element.clientHeight) > 1) {\n return element;\n }\n\n return element.parentElement ? getClosestScrollableParent(element.parentElement) : undefined;\n};\n\nexport interface ElementOffset {\n top: number;\n left: number;\n scrollTop: number;\n scrollLeft: number;\n}\n\nexport const getOffsetByScrollableParent = (\n element: HTMLElement,\n scrollableParent: HTMLElement,\n): ElementOffset => {\n const elementBounds = element.getBoundingClientRect();\n const scrollableParentBounds = scrollableParent.getBoundingClientRect();\n return {\n top: elementBounds.top - scrollableParentBounds.top,\n left: elementBounds.left - scrollableParentBounds.left,\n scrollTop: scrollableParent.scrollTop,\n scrollLeft: scrollableParent.scrollLeft,\n };\n};\n", "import {\n ACTIVE_CLASSNAME,\n DEFAULT_TABS_GROUP_PREFIX,\n GROUP_DATA_KEY,\n SelectedTabEvent,\n TABS_CLASSNAME,\n TABS_LIST_CLASSNAME,\n TABS_VERTICAL_CLASSNAME,\n TAB_CLASSNAME,\n TAB_DATA_ID,\n TAB_DATA_KEY,\n TAB_PANEL_CLASSNAME,\n Tab,\n} from '../common';\nimport type {TabsOrientation} from '../plugin/transform';\nimport {\n ElementOffset,\n getClosestScrollableParent,\n getEventTarget,\n getOffsetByScrollableParent,\n isCustom,\n} from './utils';\n\nconst Selector = {\n TABS: `.${TABS_CLASSNAME}`,\n TAB_LIST: `.${TABS_LIST_CLASSNAME}`,\n TAB: `.${TAB_CLASSNAME}`,\n TAB_PANEL: `.${TAB_PANEL_CLASSNAME}`,\n VERTICAL_TABS: `.${TABS_VERTICAL_CLASSNAME}`,\n};\n\nexport interface ISelectTabByIdOptions {\n scrollToElement: boolean;\n}\n\ntype Handler = (data: SelectedTabEvent) => void;\n\ntype TabSwitchDirection = 'left' | 'right';\n\nexport class TabsController {\n private _document: Document;\n\n private _onSelectTabHandlers: Set<Handler> = new Set();\n\n constructor(document: Document) {\n this._document = document;\n this._document.addEventListener('click', (event) => {\n const target = getEventTarget(event) as HTMLElement;\n const areVertical = this.areTabsVertical(target);\n\n if (isCustom(event)) {\n return;\n }\n\n if (!(this.isValidTabElement(target) || areVertical)) {\n return;\n }\n\n const tab = this.getTabDataFromHTMLElement(target);\n\n if (tab) {\n this._selectTab(tab, target);\n }\n });\n this._document.addEventListener('keydown', (event) => {\n let direction: TabSwitchDirection | null = null;\n switch (event.key) {\n case 'ArrowLeft': {\n direction = 'left';\n break;\n }\n case 'ArrowRight': {\n direction = 'right';\n break;\n }\n }\n if (!direction) {\n return;\n }\n\n const target = getEventTarget(event) as HTMLElement;\n\n if (isCustom(event) || !this.isValidTabElement(target)) {\n return;\n }\n\n const {tabs, nodes} = this.getTabs(target);\n const currentTab = this.getTabDataFromHTMLElement(target);\n const currentTabIndex = tabs.findIndex(\n ({key}) => currentTab?.key && key === currentTab.key,\n );\n if (!currentTab || tabs.length <= 1 || currentTabIndex === -1) {\n return;\n }\n\n const newIndex =\n (currentTabIndex + (direction === 'left' ? -1 : 1) + tabs.length) % tabs.length;\n\n this.selectTab(tabs[newIndex]);\n nodes[newIndex].focus();\n });\n }\n\n onSelectTab(handler: Handler) {\n this._onSelectTabHandlers.add(handler);\n\n return () => {\n this._onSelectTabHandlers.delete(handler);\n };\n }\n\n selectTabById(id: string, options?: ISelectTabByIdOptions) {\n const target = this._document.querySelector(\n `${Selector.TAB}[${TAB_DATA_ID}=\"${id}\"]`,\n ) as HTMLElement;\n\n if (!target || !this.isValidTabElement(target)) {\n return;\n }\n\n const tab = this.getTabDataFromHTMLElement(target);\n\n if (tab) {\n this._selectTab(tab, target);\n }\n\n if (options?.scrollToElement) {\n target.scrollIntoView();\n }\n }\n\n selectTab(tab: Tab) {\n this._selectTab(tab);\n }\n\n private _selectTab(tab: Tab, targetTab?: HTMLElement) {\n const {group, key, align} = tab;\n\n if (!group) {\n return;\n }\n\n const scrollableParent = targetTab && getClosestScrollableParent(targetTab);\n const previousTargetOffset =\n scrollableParent && getOffsetByScrollableParent(targetTab, scrollableParent);\n\n const updatedTabs = this.updateHTML({group, key, align}, align);\n\n if (updatedTabs > 0) {\n this.fireSelectTabEvent({group, key, align}, targetTab?.dataset.diplodocId);\n\n if (previousTargetOffset) {\n this.resetScroll(targetTab, scrollableParent, previousTargetOffset);\n }\n }\n }\n\n private updateHTML(tab: Required<Tab>, align: TabsOrientation) {\n switch (align) {\n case 'radio': {\n return this.updateHTMLVertical(tab);\n }\n case 'horizontal': {\n return this.updateHTMLHorizontal(tab);\n }\n }\n\n return 0;\n }\n\n private updateHTMLVertical(tab: Required<Tab>) {\n const {group, key} = tab;\n\n const tabs = this._document.querySelectorAll(\n `${Selector.TABS}[${GROUP_DATA_KEY}=\"${group}\"] ${Selector.TAB}[${TAB_DATA_KEY}=\"${key}\"]`,\n );\n\n let updated = 0;\n\n tabs.forEach((tab) => {\n const root = tab.parentNode!;\n const elements = root.children;\n\n for (let i = 0; i < elements.length; i += 2) {\n const [title, content] = [elements.item(i), elements.item(i + 1)] as HTMLElement[];\n\n const input = title.children.item(0) as HTMLInputElement;\n\n if (input.hasAttribute('checked')) {\n title.classList.remove('active');\n content?.classList.remove('active');\n input.removeAttribute('checked');\n }\n\n if (title === tab) {\n title.classList.add('active');\n content?.classList.add('active');\n input.setAttribute('checked', 'true');\n }\n\n updated++;\n }\n });\n\n return updated;\n }\n\n private updateHTMLHorizontal(tab: Required<Tab>) {\n const {group, key} = tab;\n\n const tabs = this._document.querySelectorAll(\n `${Selector.TABS}[${GROUP_DATA_KEY}=\"${group}\"] ${Selector.TAB}[${TAB_DATA_KEY}=\"${key}\"]`,\n );\n\n let updated = 0;\n\n tabs.forEach((element) => {\n const htmlElem = element as HTMLElement;\n if (!this.isValidTabElement(htmlElem) || htmlElem.dataset.diplodocIsActive === 'true') {\n return;\n }\n\n updated++;\n\n const tab = element;\n const tabList = tab.parentNode;\n const tabsContainer = tabList?.parentNode;\n const allTabs = Array.from(tabList?.querySelectorAll(Selector.TAB) || []);\n const allPanels = Array.from(tabsContainer?.children || []).filter((node) =>\n node.classList.contains(TAB_PANEL_CLASSNAME),\n );\n const targetIndex = allTabs.indexOf(tab);\n\n allTabs.forEach((tab, i) => {\n const panel = allPanels[i];\n const isTargetTab = i === targetIndex;\n const htmlElem = tab as HTMLElement;\n\n htmlElem.dataset.diplodocIsActive = isTargetTab ? 'true' : 'false';\n\n tab.classList.toggle(ACTIVE_CLASSNAME, isTargetTab);\n tab.setAttribute('aria-selected', isTargetTab.toString());\n tab.setAttribute('tabindex', isTargetTab ? '0' : '-1');\n panel.classList.toggle(ACTIVE_CLASSNAME, isTargetTab);\n });\n });\n\n return updated;\n }\n\n private resetScroll(\n target: HTMLElement,\n scrollableParent: HTMLElement,\n previousTargetOffset: ElementOffset,\n ) {\n const targetOffset = getOffsetByScrollableParent(target, scrollableParent);\n const topDelta = targetOffset.top - previousTargetOffset.top;\n const leftDelta = targetOffset.left - previousTargetOffset.left;\n const scrollTopDelta = targetOffset.scrollTop - previousTargetOffset.scrollTop;\n const scrollLeftDelta = targetOffset.scrollLeft - previousTargetOffset.scrollLeft;\n scrollableParent.scrollTo(\n scrollableParent.scrollLeft + leftDelta - scrollLeftDelta,\n scrollableParent.scrollTop + topDelta - scrollTopDelta,\n );\n }\n\n private fireSelectTabEvent(tab: Required<Tab>, diplodocId?: string) {\n const {group, key, align} = tab;\n\n const eventTab: Tab = group.startsWith(DEFAULT_TABS_GROUP_PREFIX) ? {key, align} : tab;\n\n this._onSelectTabHandlers.forEach((handler) => {\n handler({tab: eventTab, currentTabId: diplodocId});\n });\n }\n\n private isValidTabElement(element: HTMLElement) {\n const tabList =\n element.matches(Selector.TAB) && element.dataset.diplodocId\n ? element.closest(Selector.TAB_LIST)\n : null;\n\n return tabList?.closest(Selector.TABS);\n }\n\n private areTabsVertical(target: HTMLElement) {\n const parent = target.parentElement;\n\n return target.dataset.diplodocVerticalTab || Boolean(parent?.dataset.diplodocVerticalTab);\n }\n\n private getTabDataFromHTMLElement(target: HTMLElement): Tab | null {\n if (this.areTabsVertical(target)) {\n const tab = target.dataset.diplodocVerticalTab ? target : target.parentElement!;\n\n const key = tab.dataset.diplodocKey;\n const group = (tab.closest(Selector.TABS) as HTMLElement)?.dataset.diplodocGroup;\n return key && group ? {group, key, align: 'radio'} : null;\n }\n\n const key = target.dataset.diplodocKey;\n const group = (target.closest(Selector.TABS) as HTMLElement)?.dataset.diplodocGroup;\n return key && group ? {group, key, align: 'horizontal'} : null;\n }\n\n private getTabs(target: HTMLElement): {tabs: Tab[]; nodes: NodeListOf<HTMLElement>} {\n const group = (target.closest(Selector.TABS) as HTMLElement)?.dataset.diplodocGroup;\n const nodes = (\n target.closest(Selector.TAB_LIST) as HTMLElement\n )?.querySelectorAll<HTMLElement>(Selector.TAB);\n\n const tabs: Tab[] = [];\n nodes.forEach((tabEl) => {\n const key = tabEl?.dataset.diplodocKey;\n if (!key) {\n return;\n }\n\n /** horizontal-only supported feature (used in left/right button click) */\n tabs.push({\n group,\n key,\n align: 'horizontal',\n });\n });\n\n return {tabs, nodes};\n }\n}\n", "import {GLOBAL_SYMBOL} from '../common';\nimport {TabsController} from './TabsController';\nimport './scss/tabs.scss';\n\nif (typeof window !== 'undefined' && typeof document !== 'undefined' && !window[GLOBAL_SYMBOL]) {\n window[GLOBAL_SYMBOL] = new TabsController(document);\n}\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import type {TabsOrientation} from './plugin/transform';\nimport type {TabsController} from './runtime/TabsController';\n\nexport const TABS_CLASSNAME = 'yfm-tabs';\nexport const TABS_VERTICAL_CLASSNAME = 'yfm-tabs-vertical';\nexport const TABS_LIST_CLASSNAME = 'yfm-tab-list';\nexport const TAB_CLASSNAME = 'yfm-tab';\nexport const TAB_PANEL_CLASSNAME = 'yfm-tab-panel';\nexport const ACTIVE_CLASSNAME = 'active';\nexport const VERTICAL_TAB_CLASSNAME = 'yfm-vertical-tab';\n\nexport const GROUP_DATA_KEY = 'data-diplodoc-group';\nexport const TAB_DATA_KEY = 'data-diplodoc-key';\nexport const TAB_DATA_ID = 'data-diplodoc-id';\nexport const TAB_DATA_VERTICAL_TAB = 'data-diplodoc-vertical-tab';\nexport const TAB_ACTIVE_KEY = 'data-diplodoc-is-active';\nexport const TAB_RADIO_KEY = 'data-diplodoc-input';\n\nexport const DEFAULT_TABS_GROUP_PREFIX = 'defaultTabsGroup-';\n\nexport interface Tab {\n group?: string;\n key: string;\n align: TabsOrientation;\n}\n\nexport interface SelectedTabEvent {\n tab: Tab;\n currentTabId?: string;\n}\n\nexport const GLOBAL_SYMBOL: unique symbol = Symbol.for('diplodocTabs');\n\ndeclare global {\n interface Window {\n [GLOBAL_SYMBOL]: TabsController;\n }\n}\n", "export const getEventTarget = (event: Event) => {\n const path = event.composedPath();\n return Array.isArray(path) && path.length > 0 ? path[0] : event.target;\n};\n\nexport const isCustom = (event: Event) => {\n const target = getEventTarget(event);\n return !target || !(target as HTMLElement).matches;\n};\n\nexport const getClosestScrollableParent = (element: HTMLElement): HTMLElement | undefined => {\n if (Math.abs(element.scrollHeight - element.clientHeight) > 1) {\n return element;\n }\n\n return element.parentElement ? getClosestScrollableParent(element.parentElement) : undefined;\n};\n\nexport interface ElementOffset {\n top: number;\n left: number;\n scrollTop: number;\n scrollLeft: number;\n}\n\nexport const getOffsetByScrollableParent = (\n element: HTMLElement,\n scrollableParent: HTMLElement,\n): ElementOffset => {\n const elementBounds = element.getBoundingClientRect();\n const scrollableParentBounds = scrollableParent.getBoundingClientRect();\n return {\n top: elementBounds.top - scrollableParentBounds.top,\n left: elementBounds.left - scrollableParentBounds.left,\n scrollTop: scrollableParent.scrollTop,\n scrollLeft: scrollableParent.scrollLeft,\n };\n};\n", "import {\n ACTIVE_CLASSNAME,\n DEFAULT_TABS_GROUP_PREFIX,\n GROUP_DATA_KEY,\n SelectedTabEvent,\n TABS_CLASSNAME,\n TABS_LIST_CLASSNAME,\n TABS_VERTICAL_CLASSNAME,\n TAB_CLASSNAME,\n TAB_DATA_ID,\n TAB_DATA_KEY,\n TAB_PANEL_CLASSNAME,\n Tab,\n} from '../common';\nimport type {TabsOrientation} from '../plugin/transform';\nimport {\n ElementOffset,\n getClosestScrollableParent,\n getEventTarget,\n getOffsetByScrollableParent,\n isCustom,\n} from './utils';\n\nconst Selector = {\n TABS: `.${TABS_CLASSNAME}`,\n TAB_LIST: `.${TABS_LIST_CLASSNAME}`,\n TAB: `.${TAB_CLASSNAME}`,\n TAB_PANEL: `.${TAB_PANEL_CLASSNAME}`,\n VERTICAL_TABS: `.${TABS_VERTICAL_CLASSNAME}`,\n};\n\nexport interface ISelectTabByIdOptions {\n scrollToElement: boolean;\n}\n\ntype Handler = (data: SelectedTabEvent) => void;\n\ntype TabSwitchDirection = 'left' | 'right';\n\nexport class TabsController {\n private _document: Document;\n\n private _onSelectTabHandlers: Set<Handler> = new Set();\n\n constructor(document: Document) {\n this._document = document;\n this._document.addEventListener('click', (event) => {\n const target = getEventTarget(event) as HTMLElement;\n const areVertical = this.areTabsVertical(target);\n\n if (isCustom(event)) {\n return;\n }\n\n if (!(this.isValidTabElement(target) || areVertical)) {\n return;\n }\n\n const tab = this.getTabDataFromHTMLElement(target);\n\n if (tab) {\n this._selectTab(tab, target);\n }\n });\n this._document.addEventListener('keydown', (event) => {\n let direction: TabSwitchDirection | null = null;\n switch (event.key) {\n case 'ArrowLeft': {\n direction = 'left';\n break;\n }\n case 'ArrowRight': {\n direction = 'right';\n break;\n }\n case 'ArrowUp': {\n direction = 'left';\n break;\n }\n case 'ArrowDown': {\n direction = 'right';\n break;\n }\n }\n if (!direction) {\n return;\n }\n\n const target = getEventTarget(event) as HTMLElement;\n\n if (isCustom(event) || !this.isValidTabElement(target)) {\n return;\n }\n\n const {tabs, nodes} = this.getTabs(target);\n const currentTab = this.getTabDataFromHTMLElement(target);\n const currentTabIndex = tabs.findIndex(\n ({key}) => currentTab?.key && key === currentTab.key,\n );\n if (!currentTab || tabs.length <= 1 || currentTabIndex === -1) {\n return;\n }\n\n const newIndex =\n (currentTabIndex + (direction === 'left' ? -1 : 1) + tabs.length) % tabs.length;\n\n this.selectTab(tabs[newIndex]);\n nodes[newIndex].focus();\n });\n }\n\n onSelectTab(handler: Handler) {\n this._onSelectTabHandlers.add(handler);\n\n return () => {\n this._onSelectTabHandlers.delete(handler);\n };\n }\n\n selectTabById(id: string, options?: ISelectTabByIdOptions) {\n const target = this._document.querySelector(\n `${Selector.TAB}[${TAB_DATA_ID}=\"${id}\"]`,\n ) as HTMLElement;\n\n if (!target || !this.isValidTabElement(target)) {\n return;\n }\n\n const tab = this.getTabDataFromHTMLElement(target);\n\n if (tab) {\n this._selectTab(tab, target);\n }\n\n if (options?.scrollToElement) {\n target.scrollIntoView();\n }\n }\n\n selectTab(tab: Tab) {\n this._selectTab(tab);\n }\n\n private _selectTab(tab: Tab, targetTab?: HTMLElement) {\n const {group, key, align} = tab;\n\n if (!group) {\n return;\n }\n\n const scrollableParent = targetTab && getClosestScrollableParent(targetTab);\n const previousTargetOffset =\n scrollableParent && getOffsetByScrollableParent(targetTab, scrollableParent);\n\n const updatedTabs = this.updateHTML({group, key, align}, align);\n\n if (updatedTabs > 0) {\n this.fireSelectTabEvent({group, key, align}, targetTab?.dataset.diplodocId);\n\n if (previousTargetOffset) {\n this.resetScroll(targetTab, scrollableParent, previousTargetOffset);\n }\n }\n }\n\n private updateHTML(tab: Required<Tab>, align: TabsOrientation) {\n switch (align) {\n case 'radio': {\n return this.updateHTMLVertical(tab);\n }\n case 'horizontal': {\n return this.updateHTMLHorizontal(tab);\n }\n }\n\n return 0;\n }\n\n private updateHTMLVertical(tab: Required<Tab>) {\n const {group, key} = tab;\n\n const tabs = this._document.querySelectorAll(\n `${Selector.TABS}[${GROUP_DATA_KEY}=\"${group}\"] ${Selector.TAB}[${TAB_DATA_KEY}=\"${key}\"]`,\n );\n\n let updated = 0;\n\n tabs.forEach((tab) => {\n const root = tab.parentNode!;\n const elements = root.children;\n\n for (let i = 0; i < elements.length; i += 2) {\n const [title, content] = [elements.item(i), elements.item(i + 1)] as HTMLElement[];\n\n const input = title.children.item(0) as HTMLInputElement;\n\n if (input.hasAttribute('checked')) {\n title.classList.remove('active');\n content?.classList.remove('active');\n input.removeAttribute('checked');\n }\n\n if (title === tab) {\n title.classList.add('active');\n content?.classList.add('active');\n input.setAttribute('checked', 'true');\n }\n\n updated++;\n }\n });\n\n return updated;\n }\n\n private updateHTMLHorizontal(tab: Required<Tab>) {\n const {group, key} = tab;\n\n const tabs = this._document.querySelectorAll(\n `${Selector.TABS}[${GROUP_DATA_KEY}=\"${group}\"] ${Selector.TAB}[${TAB_DATA_KEY}=\"${key}\"]`,\n );\n\n let updated = 0;\n\n tabs.forEach((element) => {\n const htmlElem = element as HTMLElement;\n if (!this.isValidTabElement(htmlElem) || htmlElem.dataset.diplodocIsActive === 'true') {\n return;\n }\n\n updated++;\n\n const tab = element;\n const tabList = tab.parentNode;\n const tabsContainer = tabList?.parentNode;\n const allTabs = Array.from(tabList?.querySelectorAll(Selector.TAB) || []);\n const allPanels = Array.from(tabsContainer?.children || []).filter((node) =>\n node.classList.contains(TAB_PANEL_CLASSNAME),\n );\n const targetIndex = allTabs.indexOf(tab);\n\n allTabs.forEach((tab, i) => {\n const panel = allPanels[i];\n const isTargetTab = i === targetIndex;\n const htmlElem = tab as HTMLElement;\n\n htmlElem.dataset.diplodocIsActive = isTargetTab ? 'true' : 'false';\n\n tab.classList.toggle(ACTIVE_CLASSNAME, isTargetTab);\n tab.setAttribute('aria-selected', isTargetTab.toString());\n tab.setAttribute('tabindex', isTargetTab ? '0' : '-1');\n panel.classList.toggle(ACTIVE_CLASSNAME, isTargetTab);\n });\n });\n\n return updated;\n }\n\n private resetScroll(\n target: HTMLElement,\n scrollableParent: HTMLElement,\n previousTargetOffset: ElementOffset,\n ) {\n const targetOffset = getOffsetByScrollableParent(target, scrollableParent);\n const topDelta = targetOffset.top - previousTargetOffset.top;\n const leftDelta = targetOffset.left - previousTargetOffset.left;\n const scrollTopDelta = targetOffset.scrollTop - previousTargetOffset.scrollTop;\n const scrollLeftDelta = targetOffset.scrollLeft - previousTargetOffset.scrollLeft;\n scrollableParent.scrollTo(\n scrollableParent.scrollLeft + leftDelta - scrollLeftDelta,\n scrollableParent.scrollTop + topDelta - scrollTopDelta,\n );\n }\n\n private fireSelectTabEvent(tab: Required<Tab>, diplodocId?: string) {\n const {group, key, align} = tab;\n\n const eventTab: Tab = group.startsWith(DEFAULT_TABS_GROUP_PREFIX) ? {key, align} : tab;\n\n this._onSelectTabHandlers.forEach((handler) => {\n handler({tab: eventTab, currentTabId: diplodocId});\n });\n }\n\n private isValidTabElement(element: HTMLElement) {\n const tabList =\n element.matches(Selector.TAB) && element.dataset.diplodocId\n ? element.closest(Selector.TAB_LIST)\n : null;\n\n return tabList?.closest(Selector.TABS);\n }\n\n private areTabsVertical(target: HTMLElement) {\n const parent = target.parentElement;\n\n return target.dataset.diplodocVerticalTab || Boolean(parent?.dataset.diplodocVerticalTab);\n }\n\n private getTabDataFromHTMLElement(target: HTMLElement): Tab | null {\n if (this.areTabsVertical(target)) {\n const tab = target.dataset.diplodocVerticalTab ? target : target.parentElement!;\n\n const key = tab.dataset.diplodocKey;\n const group = (tab.closest(Selector.TABS) as HTMLElement)?.dataset.diplodocGroup;\n return key && group ? {group, key, align: 'radio'} : null;\n }\n\n const key = target.dataset.diplodocKey;\n const group = (target.closest(Selector.TABS) as HTMLElement)?.dataset.diplodocGroup;\n return key && group ? {group, key, align: 'horizontal'} : null;\n }\n\n private getTabs(target: HTMLElement): {tabs: Tab[]; nodes: NodeListOf<HTMLElement>} {\n const group = (target.closest(Selector.TABS) as HTMLElement)?.dataset.diplodocGroup;\n const nodes = (\n target.closest(Selector.TAB_LIST) as HTMLElement\n )?.querySelectorAll<HTMLElement>(Selector.TAB);\n\n const tabs: Tab[] = [];\n nodes.forEach((tabEl) => {\n const key = tabEl?.dataset.diplodocKey;\n if (!key) {\n return;\n }\n\n /** horizontal-only supported feature (used in left/right button click) */\n tabs.push({\n group,\n key,\n align: 'horizontal',\n });\n });\n\n return {tabs, nodes};\n }\n}\n", "import {GLOBAL_SYMBOL} from '../common';\nimport {TabsController} from './TabsController';\nimport './scss/tabs.scss';\n\nif (typeof window !== 'undefined' && typeof document !== 'undefined' && !window[GLOBAL_SYMBOL]) {\n window[GLOBAL_SYMBOL] = new TabsController(document);\n}\n"],
5
+ "mappings": "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",
6
6
  "names": ["TABS_CLASSNAME", "TABS_VERTICAL_CLASSNAME", "TABS_LIST_CLASSNAME", "TAB_CLASSNAME", "TAB_PANEL_CLASSNAME", "ACTIVE_CLASSNAME", "GROUP_DATA_KEY", "TAB_DATA_KEY", "TAB_DATA_ID", "DEFAULT_TABS_GROUP_PREFIX", "GLOBAL_SYMBOL", "getEventTarget", "event", "path", "isCustom", "target", "getClosestScrollableParent", "element", "getOffsetByScrollableParent", "scrollableParent", "elementBounds", "scrollableParentBounds", "Selector", "TABS_CLASSNAME", "TABS_LIST_CLASSNAME", "TAB_CLASSNAME", "TAB_PANEL_CLASSNAME", "TABS_VERTICAL_CLASSNAME", "TabsController", "document", "event", "target", "getEventTarget", "areVertical", "isCustom", "tab", "direction", "tabs", "nodes", "currentTab", "currentTabIndex", "key", "newIndex", "handler", "id", "options", "TAB_DATA_ID", "targetTab", "group", "align", "scrollableParent", "getClosestScrollableParent", "previousTargetOffset", "getOffsetByScrollableParent", "GROUP_DATA_KEY", "TAB_DATA_KEY", "updated", "elements", "i", "title", "content", "input", "element", "htmlElem", "tabList", "tabsContainer", "allTabs", "allPanels", "node", "targetIndex", "panel", "isTargetTab", "ACTIVE_CLASSNAME", "targetOffset", "topDelta", "leftDelta", "scrollTopDelta", "scrollLeftDelta", "diplodocId", "eventTab", "DEFAULT_TABS_GROUP_PREFIX", "parent", "_a", "_b", "tabEl", "GLOBAL_SYMBOL", "TabsController"]
7
7
  }