From a319ffade4a36339e8513d5bbc914d08037483da Mon Sep 17 00:00:00 2001 From: Jevy Larano <32891190+jrlarano@users.noreply.github.com> Date: Fri, 14 Jun 2024 13:21:13 +0800 Subject: [PATCH 1/4] Fix viewer scrollable container --- lib/incito-browser/incito.ts | 13 ++++++++++--- lib/kits/core-ui/incito-publication.ts | 3 +++ lib/kits/incito-publication/bootstrapper.ts | 15 ++++++++++----- lib/kits/incito-publication/viewer.ts | 18 ++++++++++++++---- 4 files changed, 37 insertions(+), 12 deletions(-) diff --git a/lib/incito-browser/incito.ts b/lib/incito-browser/incito.ts index 39641618..0fbe9f92 100644 --- a/lib/incito-browser/incito.ts +++ b/lib/incito-browser/incito.ts @@ -695,6 +695,7 @@ export default class Incito extends MicroEvent<{ sectionHidden: [{sectionId: string; sectionPosition: number}]; }> { containerEl: HTMLElement; + scrollableContainer: string | null; incito: IIncito; el: HTMLDivElement; ids: Record; @@ -707,11 +708,13 @@ export default class Incito extends MicroEvent<{ sectionVisibility: Map; constructor( containerEl: HTMLElement, - {incito, canLazyload}: {incito: IIncito; canLazyload?: boolean} + {incito, canLazyload}: {incito: IIncito; canLazyload?: boolean}, + scrollableContainer: string | null ) { super(); this.containerEl = containerEl; + this.scrollableContainer = scrollableContainer || null; this.incito = incito; this.el = document.createElement('div'); this.ids = {}; @@ -920,6 +923,10 @@ export default class Incito extends MicroEvent<{ window.addEventListener('pagehide', this.handlePageHide); window.addEventListener('beforeunload', this.handleBeforeUnload); + const scrollableContainerEl = this.scrollableContainer + ? document.querySelector(this.scrollableContainer) + : null; + this.sectionObserver = new IntersectionObserver( (entries) => entries.forEach(({target, isIntersecting: newVisibility}) => { @@ -932,7 +939,7 @@ export default class Incito extends MicroEvent<{ this.sectionVisibility.set(target, newVisibility); this.triggerSectionVisibility(target, newVisibility); }), - {rootMargin: '5px 0px'} + {rootMargin: '5px 0px', root: scrollableContainerEl} ); this.lazyObserver = new IntersectionObserver( (entries) => { @@ -943,7 +950,7 @@ export default class Incito extends MicroEvent<{ } }); }, - {rootMargin: '500px 0px'} + {rootMargin: '500px 0px', root: scrollableContainerEl} ); this.videoObserver = new IntersectionObserver( (entries) => { diff --git a/lib/kits/core-ui/incito-publication.ts b/lib/kits/core-ui/incito-publication.ts index 9e0b1882..b24c9a70 100644 --- a/lib/kits/core-ui/incito-publication.ts +++ b/lib/kits/core-ui/incito-publication.ts @@ -197,6 +197,9 @@ const IncitoPublication = ( // @ts-expect-error bootstrapper = new Bootstrapper(options); bootstrapper.enableLazyLoading = scriptEls.enableLazyload; + bootstrapper.scrollableContainer = scriptEls.enableSidebar + ? '.incito' + : '.sgn__incito'; const data = await bootstrapper.fetch(); diff --git a/lib/kits/incito-publication/bootstrapper.ts b/lib/kits/incito-publication/bootstrapper.ts index bed8607f..7ad39521 100644 --- a/lib/kits/incito-publication/bootstrapper.ts +++ b/lib/kits/incito-publication/bootstrapper.ts @@ -68,6 +68,7 @@ export default class Bootstrapper { featureLabels = this.getFeatureLabels(); versionsSupported = ['1.0.0']; enableLazyLoading = false; + scrollableContainer: string | null = null; options: BootstrapperInit; maxWidth: number; // @ts-expect-error @@ -182,11 +183,15 @@ export default class Bootstrapper { ); } - const viewer = new Viewer(this.options.el, { - details, - incito, - eventTracker: this.options.eventTracker - }); + const viewer = new Viewer( + this.options.el, + { + details, + incito, + eventTracker: this.options.eventTracker + }, + this.scrollableContainer + ); const controls = new Controls(viewer); viewer.incito.bind('destroyed', controls.destroy); diff --git a/lib/kits/incito-publication/viewer.ts b/lib/kits/incito-publication/viewer.ts index ec9d04ec..a3650dda 100644 --- a/lib/kits/incito-publication/viewer.ts +++ b/lib/kits/incito-publication/viewer.ts @@ -17,14 +17,24 @@ class Viewer extends MicroEvent { options: ViewerInit; incito: Incito; _eventTracking: EventTracking; - constructor(el: HTMLElement, options: ViewerInit) { + scrollableContainer: string | null; + constructor( + el: HTMLElement, + options: ViewerInit, + scrollableContainer: string | null + ) { super(); this.el = el; this.options = options; - this.incito = new Incito(this.el, { - incito: this.options.incito - }); + this.scrollableContainer = scrollableContainer; + this.incito = new Incito( + this.el, + { + incito: this.options.incito + }, + this.scrollableContainer + ); this._eventTracking = new EventTracking( this.options.eventTracker, this.options.details From eb99c819340c7dad01e34c2cc2ec9b35b53b0a0e Mon Sep 17 00:00:00 2001 From: Jevy Larano <32891190+jrlarano@users.noreply.github.com> Date: Fri, 14 Jun 2024 16:13:19 +0800 Subject: [PATCH 2/4] Minor refactor --- lib/incito-browser/incito.ts | 6 +++--- lib/kits/incito-publication/bootstrapper.ts | 2 +- lib/kits/incito-publication/viewer.ts | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/lib/incito-browser/incito.ts b/lib/incito-browser/incito.ts index 0fbe9f92..e1669ad7 100644 --- a/lib/incito-browser/incito.ts +++ b/lib/incito-browser/incito.ts @@ -695,7 +695,7 @@ export default class Incito extends MicroEvent<{ sectionHidden: [{sectionId: string; sectionPosition: number}]; }> { containerEl: HTMLElement; - scrollableContainer: string | null; + scrollableContainer: string | undefined; incito: IIncito; el: HTMLDivElement; ids: Record; @@ -709,12 +709,12 @@ export default class Incito extends MicroEvent<{ constructor( containerEl: HTMLElement, {incito, canLazyload}: {incito: IIncito; canLazyload?: boolean}, - scrollableContainer: string | null + scrollableContainer: string | undefined ) { super(); this.containerEl = containerEl; - this.scrollableContainer = scrollableContainer || null; + this.scrollableContainer = scrollableContainer || undefined; this.incito = incito; this.el = document.createElement('div'); this.ids = {}; diff --git a/lib/kits/incito-publication/bootstrapper.ts b/lib/kits/incito-publication/bootstrapper.ts index 7ad39521..fafee073 100644 --- a/lib/kits/incito-publication/bootstrapper.ts +++ b/lib/kits/incito-publication/bootstrapper.ts @@ -68,7 +68,7 @@ export default class Bootstrapper { featureLabels = this.getFeatureLabels(); versionsSupported = ['1.0.0']; enableLazyLoading = false; - scrollableContainer: string | null = null; + scrollableContainer: string | undefined; options: BootstrapperInit; maxWidth: number; // @ts-expect-error diff --git a/lib/kits/incito-publication/viewer.ts b/lib/kits/incito-publication/viewer.ts index a3650dda..3aa745ce 100644 --- a/lib/kits/incito-publication/viewer.ts +++ b/lib/kits/incito-publication/viewer.ts @@ -17,11 +17,11 @@ class Viewer extends MicroEvent { options: ViewerInit; incito: Incito; _eventTracking: EventTracking; - scrollableContainer: string | null; + scrollableContainer: string | undefined; constructor( el: HTMLElement, options: ViewerInit, - scrollableContainer: string | null + scrollableContainer: string | undefined ) { super(); From 5b0d4c867ee6b83452e5aca8de00b4a50a3334ba Mon Sep 17 00:00:00 2001 From: Jevy Larano <32891190+jrlarano@users.noreply.github.com> Date: Fri, 14 Jun 2024 16:30:06 +0800 Subject: [PATCH 3/4] Minor refactor and fix test error --- lib/incito-browser/__tests__/incito.test-jsdom.ts | 2 +- lib/incito-browser/incito.ts | 6 +++--- lib/kits/incito-publication/bootstrapper.ts | 2 +- lib/kits/incito-publication/viewer.ts | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/lib/incito-browser/__tests__/incito.test-jsdom.ts b/lib/incito-browser/__tests__/incito.test-jsdom.ts index fca22f6c..ae31fb5e 100644 --- a/lib/incito-browser/__tests__/incito.test-jsdom.ts +++ b/lib/incito-browser/__tests__/incito.test-jsdom.ts @@ -10,7 +10,7 @@ describe('Incito', () => { // @ts-expect-error can't treat the json import as const 🤷‍♀️ const incito: IIncito = data; - const incitoViewer = new Incito(main, {incito}); + const incitoViewer = new Incito(main, {incito}, ''); expect(() => incitoViewer.start()).not.toThrow(); diff --git a/lib/incito-browser/incito.ts b/lib/incito-browser/incito.ts index e1669ad7..38c4469a 100644 --- a/lib/incito-browser/incito.ts +++ b/lib/incito-browser/incito.ts @@ -695,7 +695,7 @@ export default class Incito extends MicroEvent<{ sectionHidden: [{sectionId: string; sectionPosition: number}]; }> { containerEl: HTMLElement; - scrollableContainer: string | undefined; + scrollableContainer: string; incito: IIncito; el: HTMLDivElement; ids: Record; @@ -709,12 +709,12 @@ export default class Incito extends MicroEvent<{ constructor( containerEl: HTMLElement, {incito, canLazyload}: {incito: IIncito; canLazyload?: boolean}, - scrollableContainer: string | undefined + scrollableContainer: string ) { super(); this.containerEl = containerEl; - this.scrollableContainer = scrollableContainer || undefined; + this.scrollableContainer = scrollableContainer; this.incito = incito; this.el = document.createElement('div'); this.ids = {}; diff --git a/lib/kits/incito-publication/bootstrapper.ts b/lib/kits/incito-publication/bootstrapper.ts index fafee073..cad2a9d6 100644 --- a/lib/kits/incito-publication/bootstrapper.ts +++ b/lib/kits/incito-publication/bootstrapper.ts @@ -68,7 +68,7 @@ export default class Bootstrapper { featureLabels = this.getFeatureLabels(); versionsSupported = ['1.0.0']; enableLazyLoading = false; - scrollableContainer: string | undefined; + scrollableContainer: string; options: BootstrapperInit; maxWidth: number; // @ts-expect-error diff --git a/lib/kits/incito-publication/viewer.ts b/lib/kits/incito-publication/viewer.ts index 3aa745ce..a63ae7fa 100644 --- a/lib/kits/incito-publication/viewer.ts +++ b/lib/kits/incito-publication/viewer.ts @@ -17,11 +17,11 @@ class Viewer extends MicroEvent { options: ViewerInit; incito: Incito; _eventTracking: EventTracking; - scrollableContainer: string | undefined; + scrollableContainer: string; constructor( el: HTMLElement, options: ViewerInit, - scrollableContainer: string | undefined + scrollableContainer: string ) { super(); From a4258ca8e0b2f548425f68e4afcb3b02ea1589e8 Mon Sep 17 00:00:00 2001 From: Jevy Larano <32891190+jrlarano@users.noreply.github.com> Date: Fri, 14 Jun 2024 16:43:06 +0800 Subject: [PATCH 4/4] Fix test error --- .../incito-publication/viewer.test-jsdom.ts | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/lib/kits/incito-publication/viewer.test-jsdom.ts b/lib/kits/incito-publication/viewer.test-jsdom.ts index 32f7dd30..0450b8b9 100644 --- a/lib/kits/incito-publication/viewer.test-jsdom.ts +++ b/lib/kits/incito-publication/viewer.test-jsdom.ts @@ -16,11 +16,18 @@ describe('SGN.IncitoPublicationKit.Viewer', () => { const mountPoint = document.createElement('div'); - const viewer = new Viewer(mountPoint, { - details: {id: 'incito-id', types: ['paged', 'incito']} as V2Catalog, - incito: dummyIncito, - eventTracker: fakeEventTracker as any - }); + const viewer = new Viewer( + mountPoint, + { + details: { + id: 'incito-id', + types: ['paged', 'incito'] + } as V2Catalog, + incito: dummyIncito, + eventTracker: fakeEventTracker as any + }, + '' + ); viewer.start();