feat: programmatic controller with section/slide indicator (#47 #49)

src/lib/Fullpage.svelte

@@ -4,8 +4,8 @@
     import { setContext } from 'svelte'
     import { writable } from 'svelte/store'
     import { quartOut } from 'svelte/easing'
-    import { FullpageActivity } from './stores'
-    import type { easingFunction, navigationFunction, SectionContext } from '$lib/types'
+    import { FullpageActivity, FullpageExternalController } from './stores'
+    import type { easingFunction, FullpageExternalControllerStore, navigationFunction, SectionContext } from '$lib/types'
 
     export let scrollDuration = 750
     export let pageRoundingThresholdMultiplier = 8
@@ -15,6 +15,7 @@
 
     const sectionCount = writable(0)
     const activeSectionStore = FullpageActivity(sectionCount)
+    export const controller: FullpageExternalControllerStore = FullpageExternalController(activeSectionStore)
     let sections: Array<string> = []
     let toSection: navigationFunction
 
@@ -46,8 +47,8 @@
 </script>
 
 <div {...$$restProps}>
-    <FullpageController bind:toSection {activeSectionStore} {scrollDuration} {pageRoundingThresholdMultiplier}
-                        {disableDragNavigation} {disableArrowsNavigation} {easing}>
+    <FullpageController bind:toSection externalController={controller} {activeSectionStore} {scrollDuration}
+                        {pageRoundingThresholdMultiplier} {disableDragNavigation} {disableArrowsNavigation} {easing}>
         <slot/>
     </FullpageController>
     <Indicator {sections} activeSection={$activeSectionStore} on:goto={toSection}/>

src/lib/FullpageController.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
     import { tweened } from 'svelte/motion'
-    import type { easingFunction, FullpageActivityStore, navigationFunction } from '$lib/types'
+    import type {
+        easingFunction,
+        FullpageActivityStore,
+        navigationFunction
+    } from '$lib/types'
 
     export let activeSectionStore: FullpageActivityStore
     // Configuration
@@ -9,6 +13,11 @@
     export let disableArrowsNavigation: boolean
     export let pageRoundingThresholdMultiplier: number
     export let easing: easingFunction
+    export let externalController
+    externalController.goto = (sectionId: number) => {
+        activeSectionStore.toPage(sectionId)
+        setScroll()
+    }
 
     let fullpage: HTMLDivElement
     const fullpageScroll = tweened(0, {

src/lib/FullpageSection.svelte

@@ -2,7 +2,7 @@
     import FullpageSectionController from './FullpageSectionController.svelte'
     import Indicator from './Indicator/Slide.svelte'
     import { getContext, onMount, setContext } from 'svelte'
-    import { FullpageActivity } from './stores'
+    import { FullpageActivity, FullpageExternalController } from './stores'
     import { writable } from 'svelte/store'
     import type { navigationFunction, SectionContext, SlideContext } from '$lib/types'
 
@@ -12,6 +12,7 @@
     const { registerSection, activeSectionStore, config }: SectionContext = getContext('section')
     const slideCount = writable(0)
     const activeSlideStore = FullpageActivity(slideCount)
+    export const controller = FullpageExternalController(activeSlideStore)
 
     let sectionId: number
     let slides: Array<string> = []
@@ -40,7 +41,7 @@
 </script>
 
 <section {...$$restProps}>
-    <FullpageSectionController bind:toSlide {activeSlideStore} {isSlidable} {isActive}
+    <FullpageSectionController bind:toSlide externalController={controller} {activeSlideStore} {isSlidable} {isActive}
                                {disableCentering} scrollDuration={config.scrollDuration}
                                disableDragNavigation={config.disableDragNavigation}
                                disableArrowsNavigation={config.disableArrowsNavigation}

src/lib/FullpageSectionController.svelte

@@ -12,6 +12,11 @@
     export let disableArrowsNavigation: boolean
     export let pageRoundingThresholdMultiplier: number
     export let easing: easingFunction
+    export let externalController
+    externalController.goto = (sectionId: number) => {
+        activeSlideStore.toPage(sectionId)
+        setScroll()
+    }
 
     let section: HTMLDivElement
     const sectionScroll = tweened(0, {

src/lib/index.ts

@@ -1,3 +1,4 @@
 export { default as Fullpage } from './Fullpage.svelte'
 export { default as FullpageSection } from './FullpageSection.svelte'
 export { default as FullpageSlide } from './FullpageSlide.svelte'
+export type * from './types'

src/lib/stores.ts

@@ -1,5 +1,5 @@
 import { writable, type Writable } from 'svelte/store'
-import type { FullpageActivityStore } from '$lib/types'
+import type { FullpageActivityStore, FullpageExternalControllerStore } from '$lib/types'
 
 function FullpageActivity (pageCountStore: Writable<number>): FullpageActivityStore {
     let activePage = 0
@@ -34,7 +34,19 @@ function FullpageActivity (pageCountStore: Writable<number>): FullpageActivitySt
     }
 }
 
+function FullpageExternalController (fullpageActivityStore: FullpageActivityStore): FullpageExternalControllerStore {
+    const { subscribe } = fullpageActivityStore
+    const goto = (pageId: number) => {
+        console.error(`FullpageExternalController.goto(${pageId}) is not implemented, wait for components to be mounted`)
+    }
+    return {
+        subscribe,
+        goto
+    }
+}
+
 export {
-    FullpageActivity
+    FullpageActivity,
+    FullpageExternalController
 }
 

src/lib/types.ts

@@ -8,6 +8,10 @@ interface FullpageActivityStore extends Readable<number> {
     toPage: (pageId: number) => void
 }
 
+interface FullpageExternalControllerStore extends Readable<number> {
+    goto: (pageId: number) => void
+}
+
 type registerSection = (title?: string) => number
 
 type easingFunction = ((t: number) => number) | undefined
@@ -36,6 +40,7 @@ interface SlideContext {
 export type {
     navigationFunction,
     FullpageActivityStore,
+    FullpageExternalControllerStore,
     registerSection,
     easingFunction,
     SectionContext,