diff --git a/packages/docs/components/molecules/StickyTableOfContent/examples.md b/packages/docs/components/molecules/AnchorNav/examples.md similarity index 100% rename from packages/docs/components/molecules/StickyTableOfContent/examples.md rename to packages/docs/components/molecules/AnchorNav/examples.md diff --git a/packages/docs/components/molecules/StickyTableOfContent/index.md b/packages/docs/components/molecules/AnchorNav/index.md similarity index 56% rename from packages/docs/components/molecules/StickyTableOfContent/index.md rename to packages/docs/components/molecules/AnchorNav/index.md index c4b3dd8d..dcbd23a7 100644 --- a/packages/docs/components/molecules/StickyTableOfContent/index.md +++ b/packages/docs/components/molecules/AnchorNav/index.md @@ -1,7 +1,7 @@ -# StickyTable +# AnchorNav diff --git a/packages/docs/components/molecules/StickyTableOfContent/js-api.md b/packages/docs/components/molecules/AnchorNav/js-api.md similarity index 100% rename from packages/docs/components/molecules/StickyTableOfContent/js-api.md rename to packages/docs/components/molecules/AnchorNav/js-api.md diff --git a/packages/docs/components/molecules/StickyTableOfContent/stories/app.js b/packages/docs/components/molecules/AnchorNav/stories/app.js similarity index 64% rename from packages/docs/components/molecules/StickyTableOfContent/stories/app.js rename to packages/docs/components/molecules/AnchorNav/stories/app.js index 2b25b9df..f6fc33dc 100644 --- a/packages/docs/components/molecules/StickyTableOfContent/stories/app.js +++ b/packages/docs/components/molecules/AnchorNav/stories/app.js @@ -1,19 +1,19 @@ /* eslint-disable max-classes-per-file */ import { Base, createApp } from '@studiometa/js-toolkit'; import { - StickyTable as StickyTableCore, - StickyTableItem, - StickyTableSection, + AnchorNav as AnchorNavCore, + AnchorNavLink, + AnchorNavTarget, } from '@studiometa/ui'; /** * */ -class StickyTable extends StickyTableCore { +class AnchorNav extends AnchorNavCore { static config = { components: { - StickyTableItem, - StickyTableSection, + AnchorNavLink, + AnchorNavTarget, }, }; } @@ -25,7 +25,7 @@ class App extends Base { static config = { name: 'App', components: { - StickyTable, + AnchorNav, }, }; } diff --git a/packages/docs/components/molecules/AnchorNav/stories/app.twig b/packages/docs/components/molecules/AnchorNav/stories/app.twig new file mode 100644 index 00000000..af44c5e1 --- /dev/null +++ b/packages/docs/components/molecules/AnchorNav/stories/app.twig @@ -0,0 +1,53 @@ +{% set section_length = 3 %} + + + +
+ +
+
+
+ Item-1 +
+
+
+
+ Item-2 +
+
+
+
+ Item-3 +
+
+ {# {% for item in 1..section_length %} +
+
+ Item-{{ loop.index }} +
+
+ {% endfor %} #} +
+
+ +
diff --git a/packages/docs/components/molecules/StickyTableOfContent/stories/app.twig b/packages/docs/components/molecules/StickyTableOfContent/stories/app.twig deleted file mode 100644 index 8341ef32..00000000 --- a/packages/docs/components/molecules/StickyTableOfContent/stories/app.twig +++ /dev/null @@ -1,32 +0,0 @@ - - -
-
- item-1 - - item-2 - - item-3 -
-
-
-
- Item-1 -
-
-
-
- Item-2 -
-
-
-
- Item-3 -
-
-
-
- -
diff --git a/packages/ui/molecules/AnchorNav/AnchorNav.ts b/packages/ui/molecules/AnchorNav/AnchorNav.ts new file mode 100644 index 00000000..60735270 --- /dev/null +++ b/packages/ui/molecules/AnchorNav/AnchorNav.ts @@ -0,0 +1,46 @@ +import { Base } from '@studiometa/js-toolkit'; +import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit'; +import { AnchorNavLink } from './AnchorNavLink.js'; +import { AnchorNavTarget } from './AnchorNavTarget.js'; + +export interface AnchorNavProps extends BaseProps { + $children: { + AnchorNavLink: AnchorNavLink[]; + AnchorNavTarget: AnchorNavTarget[]; + }; +} + +export class AnchorNav extends Base { + /** + * Config + */ + static config: BaseConfig = { + name: 'AnchorNav', + components: { + AnchorNavLink, + AnchorNavTarget, + }, + }; + + /** + * Listen to the AnchorNavTarget that is intersected + */ + onAnchorNavTargetIsIntersected(id) { + console.log(id); + + if (document.querySelector('.current')) { + document.querySelector('.current').classList.remove('current'); + } + const currentAnchorNavLink = this.$children.AnchorNavLink.find( + (anchorNavLink) => anchorNavLink.targetSelector === id, + ); + currentAnchorNavLink.$el.classList.add('current'); + } + + // this.$children.AnchorNavLink.filter((navLink, navLinkId) => id !== navLinkId).forEach( + // ({ leave }) => leave(), + // ); + + // this.$children.AnchorNavLink[id].enter(); + // } +} diff --git a/packages/ui/molecules/AnchorNav/AnchorNavLink.ts b/packages/ui/molecules/AnchorNav/AnchorNavLink.ts new file mode 100644 index 00000000..304a401d --- /dev/null +++ b/packages/ui/molecules/AnchorNav/AnchorNavLink.ts @@ -0,0 +1,67 @@ +import type { BaseConfig } from '@studiometa/js-toolkit'; +import { AnchorScrollTo } from '../../atoms/AnchorScrollTo/AnchorScrollTo.js'; + +export interface AnchorNavLinkProps extends AnchorScrollToProps { + $options: { + id: string; + }; +} + +/** + * Manage a slider item and its state transition. + */ +export class AnchorNavLink extends AnchorScrollTo { + /** + * Config. + */ + static config: BaseConfig = { + ...AnchorScrollTo.config, + name: 'AnchorNavLink', + }; +} + +// import type { BaseConfig } from '@studiometa/js-toolkit'; +// import { AnchorScrollTo, AnchorScrollToProps } from '../../atoms/AnchorScrollTo/AnchorScrollTo.js'; +// import { withTransition } from '../../decorators/index.js'; +// import { Transition } from '../../primitives/index.js'; + +// export interface AnchorNavLinkProps extends AnchorScrollToProps { +// $options: { +// id: string; +// }; +// } + +// /** +// * Manage a slider item and its state transition. +// */ +// export class AnchorNavLink extends withTransition(AnchorScrollTo) { +// /** +// * Config. +// */ +// static config: BaseConfig = { +// ...AnchorScrollTo.config, +// name: 'AnchorNavLink', +// options: { +// ...AnchorScrollTo.config.options, +// ...Transition.config.options, +// enterKeep: { +// type: Boolean, +// default: true, +// }, +// leaveKeep: { +// type: Boolean, +// default: true, +// }, +// }, +// }; + +// enter() { +// this.$options.active = true; +// super.enter(); +// } + +// leave() { +// this.$options.active = false; +// super.leave(); +// } +// } diff --git a/packages/ui/molecules/StickyTable/StickyTableSection.ts b/packages/ui/molecules/AnchorNav/AnchorNavTarget.ts similarity index 54% rename from packages/ui/molecules/StickyTable/StickyTableSection.ts rename to packages/ui/molecules/AnchorNav/AnchorNavTarget.ts index ced1e4fc..0bb45973 100644 --- a/packages/ui/molecules/StickyTable/StickyTableSection.ts +++ b/packages/ui/molecules/AnchorNav/AnchorNavTarget.ts @@ -1,7 +1,7 @@ import { Base } from '@studiometa/js-toolkit'; import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit'; -export interface StickyTableSectionProps extends BaseProps { +export interface AnchorNavTargetProps extends BaseProps { $refs: { item: HTMLElement[]; }; @@ -10,12 +10,12 @@ export interface StickyTableSectionProps extends BaseProps { /** * Manage a sticky table section. */ -export class StickyTableSection extends Base { +export class AnchorNavTarget extends Base { /** * Config. */ static config: BaseConfig = { - name: 'StickyTableSection', + name: 'AnchorNavTarget', refs: ['item[]'], options: { threshold: { type: String, default: '0.5' }, @@ -24,8 +24,9 @@ export class StickyTableSection extends Base { emits: ['is-intersected'], }; - /** TODO use the withIntersectionObserver from js-toolkit or with sentinel from ui */ mounted() { + console.log('mounted'); + const observer = new IntersectionObserver(this.checkIntersection.bind(this), { threshold: this.$options.threshold, rootMargin: this.$options.rootmargin, @@ -36,12 +37,38 @@ export class StickyTableSection extends Base { } checkIntersection(entries) { - if (entries[0].isIntersecting) { - console.log(this.$options); + console.log(entries); + if (entries[0].isIntersecting) { let { id } = entries[0].target; id = `#${id}`; + console.log(id); + this.$emit('is-intersected', id); } } } + +/** + * Manage a sticky table section. + */ +// export class AnchorNavTarget extends withIntersectionObserver(Base, { +// threshold: 0.5, +// rootMargin: '0% 0px -40% 0px', +// }) { +// /** +// * Config. +// */ +// static config: BaseConfig = { +// name: 'AnchorNavTarget', +// }; + + // intersected(entries) { + // if (entries[0].isIntersecting) { + // console.log(this.$options); + + // let { id } = entries[0].target; + // id = `#${id}`; + // this.$emit('is-intersected', id); + // } +// } diff --git a/packages/ui/molecules/AnchorNav/index.ts b/packages/ui/molecules/AnchorNav/index.ts new file mode 100644 index 00000000..542db9fb --- /dev/null +++ b/packages/ui/molecules/AnchorNav/index.ts @@ -0,0 +1,3 @@ +export * from './AnchorNav.js'; +export * from './AnchorNavLink.js'; +export * from './AnchorNavTarget.js'; diff --git a/packages/ui/molecules/StickyTable/package.json b/packages/ui/molecules/AnchorNav/package.json similarity index 52% rename from packages/ui/molecules/StickyTable/package.json rename to packages/ui/molecules/AnchorNav/package.json index e3cead4e..834f3563 100644 --- a/packages/ui/molecules/StickyTable/package.json +++ b/packages/ui/molecules/AnchorNav/package.json @@ -1,5 +1,5 @@ { - "name": "@studiometa/ui-sticky-table", + "name": "@studiometa/ui-anchor-nav", "type": "module", "version": "0.0.0" } diff --git a/packages/ui/molecules/StickyTable/StickyTable.ts b/packages/ui/molecules/StickyTable/StickyTable.ts deleted file mode 100644 index b8dce626..00000000 --- a/packages/ui/molecules/StickyTable/StickyTable.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { Base } from '@studiometa/js-toolkit'; -import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit'; -import { StickyTableItem } from './StickyTableItem.js'; -import { StickyTableSection } from './StickyTableSection.js'; - -/** - * @typedef {object} StickyTableRefs - * @property {HTMLElement} tableItem - * @property {HTMLElement} - */ - -export interface StickyTableProps extends BaseProps { - $children: { - StickyTableItem: StickyTableItem[]; - StickyTableSection: StickyTableSection[]; - }; -} - -export class StickyTable extends Base { - /** - * Config - */ - static config: BaseConfig = { - name: 'StickyTable', - components: { - StickyTableItem, - StickyTableSection, - }, - }; - - /** - * Listen to the stickyTable that is intersected - */ - onStickyTableSectionIsIntersected(id) { - if (document.querySelector('.current')) { - document.querySelector('.current').classList.remove('current'); - } - const currentStickyTableItem = this.$children.StickyTableItem.find( - (stickyTableItem) => stickyTableItem.targetSelector === id, - ); - currentStickyTableItem.$el.classList.add('current'); - } -} diff --git a/packages/ui/molecules/StickyTable/StickyTableItem.ts b/packages/ui/molecules/StickyTable/StickyTableItem.ts deleted file mode 100644 index 9aaaa3d0..00000000 --- a/packages/ui/molecules/StickyTable/StickyTableItem.ts +++ /dev/null @@ -1,21 +0,0 @@ -import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit'; -import { AnchorScrollTo } from '../../atoms/AnchorScrollTo/AnchorScrollTo.js'; - -export interface StickyTableItemProps extends BaseProps { - $options: { - id: string; - }; -} - -/** - * Manage a slider item and its state transition. - */ -export class StickyTableItem extends AnchorScrollTo { - /** - * Config. - */ - static config: BaseConfig = { - ...AnchorScrollTo.config, - name: 'StickyTableItem', - }; -} diff --git a/packages/ui/molecules/StickyTable/index.ts b/packages/ui/molecules/StickyTable/index.ts deleted file mode 100644 index d27e5f5d..00000000 --- a/packages/ui/molecules/StickyTable/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './StickyTable.js'; -export * from './StickyTableItem.js'; -export * from './StickyTableSection.js'; diff --git a/packages/ui/molecules/index.ts b/packages/ui/molecules/index.ts index f25b4268..3472f2dd 100644 --- a/packages/ui/molecules/index.ts +++ b/packages/ui/molecules/index.ts @@ -3,7 +3,7 @@ export * from './Accordion/AccordionItem.js'; export * from './Menu/index.js'; export * from './Slider/index.js'; export * from './Sticky/Sticky.js'; -export * from './StickyTable/index.js'; +export * from './AnchorNav/index.js'; export * from './TableOfContent/index.js'; export * from './Tabs/index.js'; export * from './Modal/index.js';