@rokkit/app 1.0.0-next.141 → 1.0.0-next.143

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rokkit/app",
3
- "version": "1.0.0-next.141",
3
+ "version": "1.0.0-next.143",
4
4
  "description": "App-level controls for Rokkit applications - theme management and UI chrome",
5
5
  "repository": {
6
6
  "type": "git",
@@ -10,6 +10,7 @@
10
10
  let focusedIndex = $state(0)
11
11
  let navEl = $state(null)
12
12
  let observer = null
13
+ let scrollLockTimer = null
13
14
 
14
15
  function slugify(text) {
15
16
  return (text ?? '')
@@ -44,7 +45,7 @@
44
45
  const visible = entries
45
46
  .filter((e) => e.isIntersecting)
46
47
  .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top)
47
- if (visible.length > 0) activeId = visible[0].target.id
48
+ if (visible.length > 0 && !scrollLockTimer) activeId = visible[0].target.id
48
49
  },
49
50
  { root: main, rootMargin: '-5% 0px -70% 0px' }
50
51
  )
@@ -58,6 +59,8 @@
58
59
  const el = document.getElementById(id)
59
60
  const main = getContainer()
60
61
  if (!el || !main) return
62
+ clearTimeout(scrollLockTimer)
63
+ scrollLockTimer = setTimeout(() => { scrollLockTimer = null }, 1000)
61
64
  main.scrollTo({ top: el.offsetTop - 16, behavior: 'smooth' })
62
65
  }
63
66
 
@@ -87,7 +90,9 @@
87
90
  }
88
91
 
89
92
  function handleSelect() {
90
- scrollToHeading(headings[focusedIndex]?.id)
93
+ const id = headings[focusedIndex]?.id
94
+ if (id) activeId = id
95
+ scrollToHeading(id)
91
96
  }
92
97
 
93
98
  function handleClick(event) {
@@ -101,7 +106,7 @@
101
106
  onMount(() => {
102
107
  scan()
103
108
  observe()
104
- return () => observer?.disconnect()
109
+ return () => { observer?.disconnect(); clearTimeout(scrollLockTimer) }
105
110
  })
106
111
  </script>
107
112
 
@@ -111,7 +116,6 @@
111
116
  data-toc
112
117
  aria-label="On this page"
113
118
  use:navigable
114
- onclick={handleClick}
115
119
  onprevious={handlePrevious}
116
120
  onnext={handleNext}
117
121
  onselect={handleSelect}
@@ -128,6 +132,7 @@
128
132
  data-toc-focused={focusedIndex === i ? '' : undefined}
129
133
  tabindex={focusedIndex === i ? 0 : -1}
130
134
  onfocusin={() => (focusedIndex = i)}
135
+ onclick={() => { focusedIndex = i; activeId = h.id; scrollToHeading(h.id) }}
131
136
  >
132
137
  {h.text}
133
138
  </button>