virtual-scroller 1.14.0 → 1.15.1

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 (235) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/README.md +403 -254
  3. package/bundle/index-dom-bypass.html +197 -0
  4. package/bundle/index-dom-grid.html +203 -0
  5. package/bundle/index-dom-scrollableContainer.html +214 -0
  6. package/bundle/index-dom-tbody-scrollableContainer.html +81 -0
  7. package/bundle/index-dom-tbody.html +65 -0
  8. package/bundle/index-dom.html +114 -84
  9. package/bundle/index-react-bypass.html +194 -0
  10. package/bundle/{index-bypass.html → index-react-grid.html} +122 -120
  11. package/bundle/index-react-hook.html +209 -0
  12. package/bundle/index-react-scrollableContainer.html +207 -0
  13. package/bundle/index-react-strictMode.html +193 -0
  14. package/bundle/index-react-tbody-scrollableContainer.html +94 -0
  15. package/bundle/index-react-tbody.html +78 -0
  16. package/bundle/{messages.js → items.js} +1 -1
  17. package/bundle/lib/babel.min.js +25 -0
  18. package/bundle/lib/prop-types.min.js +1 -0
  19. package/bundle/lib/react-dom.development.js +29924 -0
  20. package/bundle/lib/react-dom.production.min.js +267 -0
  21. package/bundle/lib/react.development.js +3343 -0
  22. package/bundle/lib/react.production.min.js +31 -0
  23. package/bundle/style.base.css +33 -0
  24. package/{website/style.css → bundle/style.list.css} +10 -43
  25. package/bundle/style.list.grid.css +23 -0
  26. package/bundle/virtual-scroller-dom.js +1 -1
  27. package/bundle/virtual-scroller-dom.js.map +1 -1
  28. package/bundle/virtual-scroller-react.js +1 -1
  29. package/bundle/virtual-scroller-react.js.map +1 -1
  30. package/bundle/virtual-scroller.js +1 -1
  31. package/bundle/virtual-scroller.js.map +1 -1
  32. package/commonjs/BeforeResize.js +1 -2
  33. package/commonjs/BeforeResize.js.map +1 -1
  34. package/commonjs/DOM/VirtualScroller.js +7 -13
  35. package/commonjs/DOM/VirtualScroller.js.map +1 -1
  36. package/commonjs/DOM/tbody.js +6 -6
  37. package/commonjs/DOM/tbody.js.map +1 -1
  38. package/commonjs/ItemHeights.js +10 -13
  39. package/commonjs/ItemHeights.js.map +1 -1
  40. package/commonjs/Layout.defaults.js +21 -0
  41. package/commonjs/Layout.defaults.js.map +1 -0
  42. package/commonjs/Layout.js +75 -64
  43. package/commonjs/Layout.js.map +1 -1
  44. package/commonjs/Layout.test.js +8 -4
  45. package/commonjs/Layout.test.js.map +1 -1
  46. package/commonjs/VirtualScroller.constructor.js +38 -4
  47. package/commonjs/VirtualScroller.constructor.js.map +1 -1
  48. package/commonjs/VirtualScroller.items.js +50 -4
  49. package/commonjs/VirtualScroller.items.js.map +1 -1
  50. package/commonjs/VirtualScroller.js +23 -14
  51. package/commonjs/VirtualScroller.js.map +1 -1
  52. package/commonjs/VirtualScroller.layout.js +40 -29
  53. package/commonjs/VirtualScroller.layout.js.map +1 -1
  54. package/commonjs/VirtualScroller.onContainerResize.js +1 -2
  55. package/commonjs/VirtualScroller.onContainerResize.js.map +1 -1
  56. package/commonjs/VirtualScroller.state.js +10 -9
  57. package/commonjs/VirtualScroller.state.js.map +1 -1
  58. package/commonjs/VirtualScroller.verticalSpacing.js +39 -6
  59. package/commonjs/VirtualScroller.verticalSpacing.js.map +1 -1
  60. package/commonjs/react/VirtualScroller.js +124 -131
  61. package/commonjs/react/VirtualScroller.js.map +1 -1
  62. package/commonjs/react/useClassName.js +2 -2
  63. package/commonjs/react/useClassName.js.map +1 -1
  64. package/commonjs/react/useCreateVirtualScroller.js +64 -0
  65. package/commonjs/react/useCreateVirtualScroller.js.map +1 -0
  66. package/commonjs/react/useInstanceMethods.js +4 -4
  67. package/commonjs/react/useInstanceMethods.js.map +1 -1
  68. package/commonjs/react/useItemKeys.js +28 -5
  69. package/commonjs/react/useItemKeys.js.map +1 -1
  70. package/commonjs/react/useMergeRefs.js +52 -0
  71. package/commonjs/react/useMergeRefs.js.map +1 -0
  72. package/commonjs/react/useOnItemHeightDidChange.js +28 -12
  73. package/commonjs/react/useOnItemHeightDidChange.js.map +1 -1
  74. package/commonjs/react/useSetItemState.js +31 -12
  75. package/commonjs/react/useSetItemState.js.map +1 -1
  76. package/commonjs/react/{useVirtualScrollerStartStop.js → useStartStopVirtualScroller.js} +1 -1
  77. package/commonjs/react/{useVirtualScrollerStartStop.js.map → useStartStopVirtualScroller.js.map} +1 -1
  78. package/commonjs/react/useState.js +9 -9
  79. package/commonjs/react/useState.js.map +1 -1
  80. package/commonjs/react/{useStateNoStaleBug.js → useStateWithRepeatableRead.js} +3 -3
  81. package/commonjs/react/useStateWithRepeatableRead.js.map +1 -0
  82. package/commonjs/react/useStyle.js +28 -4
  83. package/commonjs/react/useStyle.js.map +1 -1
  84. package/commonjs/react/useValidateTableBodyItemsContainer.js +24 -0
  85. package/commonjs/react/useValidateTableBodyItemsContainer.js.map +1 -0
  86. package/commonjs/react/useVirtualScroller.js +142 -42
  87. package/commonjs/react/useVirtualScroller.js.map +1 -1
  88. package/commonjs/test/ItemsContainer.js +10 -10
  89. package/commonjs/test/ItemsContainer.js.map +1 -1
  90. package/commonjs/test/VirtualScroller.js +25 -10
  91. package/commonjs/test/VirtualScroller.js.map +1 -1
  92. package/dom/index.d.ts +6 -5
  93. package/index.d.ts +19 -8
  94. package/modules/BeforeResize.js +1 -2
  95. package/modules/BeforeResize.js.map +1 -1
  96. package/modules/DOM/VirtualScroller.js +7 -13
  97. package/modules/DOM/VirtualScroller.js.map +1 -1
  98. package/modules/DOM/tbody.js +4 -4
  99. package/modules/DOM/tbody.js.map +1 -1
  100. package/modules/ItemHeights.js +11 -14
  101. package/modules/ItemHeights.js.map +1 -1
  102. package/modules/Layout.defaults.js +11 -0
  103. package/modules/Layout.defaults.js.map +1 -0
  104. package/modules/Layout.js +74 -64
  105. package/modules/Layout.js.map +1 -1
  106. package/modules/Layout.test.js +8 -4
  107. package/modules/Layout.test.js.map +1 -1
  108. package/modules/VirtualScroller.constructor.js +37 -4
  109. package/modules/VirtualScroller.constructor.js.map +1 -1
  110. package/modules/VirtualScroller.items.js +51 -5
  111. package/modules/VirtualScroller.items.js.map +1 -1
  112. package/modules/VirtualScroller.js +23 -14
  113. package/modules/VirtualScroller.js.map +1 -1
  114. package/modules/VirtualScroller.layout.js +40 -29
  115. package/modules/VirtualScroller.layout.js.map +1 -1
  116. package/modules/VirtualScroller.onContainerResize.js +1 -2
  117. package/modules/VirtualScroller.onContainerResize.js.map +1 -1
  118. package/modules/VirtualScroller.state.js +10 -9
  119. package/modules/VirtualScroller.state.js.map +1 -1
  120. package/modules/VirtualScroller.verticalSpacing.js +38 -6
  121. package/modules/VirtualScroller.verticalSpacing.js.map +1 -1
  122. package/modules/react/VirtualScroller.js +122 -124
  123. package/modules/react/VirtualScroller.js.map +1 -1
  124. package/modules/react/useClassName.js +3 -3
  125. package/modules/react/useClassName.js.map +1 -1
  126. package/modules/react/useCreateVirtualScroller.js +53 -0
  127. package/modules/react/useCreateVirtualScroller.js.map +1 -0
  128. package/modules/react/useInstanceMethods.js +4 -4
  129. package/modules/react/useInstanceMethods.js.map +1 -1
  130. package/modules/react/useItemKeys.js +28 -5
  131. package/modules/react/useItemKeys.js.map +1 -1
  132. package/modules/react/useMergeRefs.js +44 -0
  133. package/modules/react/useMergeRefs.js.map +1 -0
  134. package/modules/react/useOnItemHeightDidChange.js +28 -12
  135. package/modules/react/useOnItemHeightDidChange.js.map +1 -1
  136. package/modules/react/useSetItemState.js +31 -12
  137. package/modules/react/useSetItemState.js.map +1 -1
  138. package/modules/react/{useVirtualScrollerStartStop.js → useStartStopVirtualScroller.js} +1 -1
  139. package/modules/react/{useVirtualScrollerStartStop.js.map → useStartStopVirtualScroller.js.map} +1 -1
  140. package/modules/react/useState.js +9 -9
  141. package/modules/react/useState.js.map +1 -1
  142. package/modules/react/{useStateNoStaleBug.js → useStateWithRepeatableRead.js} +2 -2
  143. package/modules/react/useStateWithRepeatableRead.js.map +1 -0
  144. package/modules/react/useStyle.js +27 -4
  145. package/modules/react/useStyle.js.map +1 -1
  146. package/modules/react/useValidateTableBodyItemsContainer.js +16 -0
  147. package/modules/react/useValidateTableBodyItemsContainer.js.map +1 -0
  148. package/modules/react/useVirtualScroller.js +136 -42
  149. package/modules/react/useVirtualScroller.js.map +1 -1
  150. package/modules/test/ItemsContainer.js +10 -10
  151. package/modules/test/ItemsContainer.js.map +1 -1
  152. package/modules/test/VirtualScroller.js +25 -10
  153. package/modules/test/VirtualScroller.js.map +1 -1
  154. package/package.json +4 -1
  155. package/react/as.d.ts +42 -0
  156. package/react/index.cjs +2 -1
  157. package/react/index.d.ts +248 -63
  158. package/react/index.js +1 -0
  159. package/rollup.config.mjs +15 -1
  160. package/source/BeforeResize.js +1 -2
  161. package/source/DOM/VirtualScroller.js +7 -13
  162. package/source/DOM/tbody.js +5 -5
  163. package/source/ItemHeights.js +11 -12
  164. package/source/Layout.defaults.js +8 -0
  165. package/source/Layout.js +66 -53
  166. package/source/Layout.test.js +7 -2
  167. package/source/VirtualScroller.constructor.js +27 -4
  168. package/source/VirtualScroller.items.js +47 -2
  169. package/source/VirtualScroller.js +23 -14
  170. package/source/VirtualScroller.layout.js +41 -28
  171. package/source/VirtualScroller.onContainerResize.js +1 -2
  172. package/source/VirtualScroller.state.js +10 -11
  173. package/source/VirtualScroller.verticalSpacing.js +32 -6
  174. package/source/react/VirtualScroller.js +135 -133
  175. package/source/react/useClassName.js +3 -3
  176. package/source/react/useCreateVirtualScroller.js +65 -0
  177. package/source/react/useInstanceMethods.js +12 -4
  178. package/source/react/useItemKeys.js +22 -4
  179. package/source/react/useMergeRefs.js +45 -0
  180. package/source/react/useOnItemHeightDidChange.js +29 -10
  181. package/source/react/useSetItemState.js +32 -10
  182. package/source/react/useState.js +6 -6
  183. package/source/react/{useStateNoStaleBug.js → useStateWithRepeatableRead.js} +1 -1
  184. package/source/react/useStyle.js +18 -2
  185. package/source/react/useValidateTableBodyItemsContainer.js +16 -0
  186. package/source/react/useVirtualScroller.js +155 -47
  187. package/source/test/ItemsContainer.js +10 -10
  188. package/source/test/VirtualScroller.js +16 -10
  189. package/website/index-dom-bypass.html +197 -0
  190. package/website/index-dom-grid.html +203 -0
  191. package/website/index-dom-scrollableContainer.html +214 -0
  192. package/website/index-dom-tbody-scrollableContainer.html +81 -0
  193. package/website/index-dom-tbody.html +65 -0
  194. package/website/index-dom.html +116 -84
  195. package/website/index-react-bypass.html +194 -0
  196. package/website/index-react-grid.html +197 -0
  197. package/website/index-react-hook.html +209 -0
  198. package/website/index-react-scrollableContainer.html +207 -0
  199. package/website/index-react-strictMode.html +193 -0
  200. package/website/index-react-tbody-scrollableContainer.html +94 -0
  201. package/website/index-react-tbody.html +78 -0
  202. package/website/index-react.html +193 -0
  203. package/website/index.html +120 -111
  204. package/website/{messages.js → items.js} +1 -1
  205. package/website/lib/babel.min.js +25 -0
  206. package/website/lib/prop-types.min.js +1 -0
  207. package/website/lib/react-dom.development.js +29924 -0
  208. package/website/lib/react-dom.production.min.js +267 -0
  209. package/website/lib/react.development.js +3343 -0
  210. package/website/lib/react.production.min.js +31 -0
  211. package/website/style.base.css +33 -0
  212. package/website/style.list.css +92 -0
  213. package/website/style.list.grid.css +23 -0
  214. package/bundle/index-grid.html +0 -216
  215. package/bundle/index-scrollableContainer.html +0 -208
  216. package/bundle/index-tbody-scrollableContainer.html +0 -70
  217. package/bundle/index-tbody.html +0 -57
  218. package/bundle/on-scroll-to-dom.js +0 -2
  219. package/bundle/on-scroll-to-dom.js.map +0 -1
  220. package/bundle/on-scroll-to-react.js +0 -2
  221. package/bundle/on-scroll-to-react.js.map +0 -1
  222. package/bundle/on-scroll-to.js +0 -2
  223. package/bundle/on-scroll-to.js.map +0 -1
  224. package/commonjs/react/useStateNoStaleBug.js.map +0 -1
  225. package/modules/react/useStateNoStaleBug.js.map +0 -1
  226. package/website/index-bypass.html +0 -185
  227. package/website/index-grid.html +0 -216
  228. package/website/index-scrollableContainer.html +0 -208
  229. package/website/index-tbody-scrollableContainer.html +0 -70
  230. package/website/index-tbody.html +0 -57
  231. package/website/lib/on-scroll-to-dom.js +0 -2
  232. package/website/lib/on-scroll-to-dom.js.map +0 -1
  233. package/website/lib/on-scroll-to-react.js +0 -2
  234. package/website/lib/on-scroll-to-react.js.map +0 -1
  235. /package/source/react/{useVirtualScrollerStartStop.js → useStartStopVirtualScroller.js} +0 -0
package/bundle/index-dom-bypass.html ADDED
@@ -0,0 +1,197 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <!-- Fix encoding. -->
5
+ <meta charset="utf-8">
6
+ <!-- Fix document width for mobile devices. -->
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+
9
+ <title>VirtualScroller (DOM) (bypass)</title>
10
+
11
+ <script src="./virtual-scroller-dom.js"></script>
12
+ <script src="./items.js"></script>
13
+
14
+ <link rel="stylesheet" href="./style.base.css"/>
15
+ <link rel="stylesheet" href="./style.list.css"/>
16
+ </head>
17
+
18
+ <body>
19
+ <!-- http://tholman.com/github-corners/ -->
20
+ <a title="Go to GitHub repo" href="https://gitlab.com/catamphetamine/virtual-scroller" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
21
+
22
+ <section class="container">
23
+ <h1>
24
+ <svg class="twitter-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
25
+ <path fill="#00AAEC" fill-rule="evenodd" d="M128 23.294a51.28 51.28 0 0 1-15.079 4.237c5.424-3.328 9.587-8.606 11.548-14.892a51.718 51.718 0 0 1-16.687 6.526c-4.778-5.231-11.608-8.498-19.166-8.498-14.493 0-26.251 12.057-26.251 26.927 0 2.111.225 4.16.676 6.133-21.824-1.126-41.17-11.835-54.131-28.145a27.422 27.422 0 0 0-3.554 13.552c0 9.338 4.636 17.581 11.683 22.412-4.297-.131-8.355-1.356-11.901-3.359v.331c0 13.051 9.053 23.937 21.074 26.403-2.201.632-4.523.948-6.92.948-1.69 0-3.343-.162-4.944-.478 3.343 10.694 13.035 18.483 24.53 18.691-8.986 7.227-20.315 11.533-32.614 11.533-2.119 0-4.215-.123-6.266-.37 11.623 7.627 25.432 12.088 40.255 12.088 48.309 0 74.717-41.026 74.717-76.612a89.39 89.39 0 0 0-.068-3.49A53.862 53.862 0 0 0 128 23.294" clip-rule="evenodd"></path>
26
+ </svg>
27
+ Latest Tweets on #politics
28
+ </h1>
29
+ <div id="show-previous"></div>
30
+ <div id="list"></div>
31
+ <div id="show-next"></div>
32
+ <footer>
33
+ © Twitter Inc., 2019
34
+ </footer>
35
+ </section>
36
+
37
+ <script>
38
+ // Enable debug output to console.
39
+ window.VirtualScrollerDebug = true
40
+ // Pass `?pagination=✓` URL query parameter to enable pagination.
41
+ window.PAGINATION = Boolean(new URL(window.location).searchParams.get('pagination'))
42
+ </script>
43
+
44
+ <script>
45
+ const BATCH_SIZE = 6
46
+ const COLUMNS_COUNT = 1
47
+
48
+ function getColumnsCount(container) {
49
+ return 1
50
+ }
51
+
52
+ function getInitialState(items) {
53
+ if (window.PAGINATION) {
54
+ const fromIndex = Math.floor((items.length - BATCH_SIZE) / 2 / COLUMNS_COUNT) * COLUMNS_COUNT
55
+ const toIndex = fromIndex + BATCH_SIZE - 1
56
+ return {
57
+ fromIndex,
58
+ toIndex,
59
+ items: items.slice(fromIndex, toIndex + 1)
60
+ }
61
+ } else {
62
+ return {
63
+ fromIndex: 0,
64
+ toIndex: items.length,
65
+ items: items
66
+ }
67
+ }
68
+ }
69
+
70
+ function onShowPrevious(items, getState, setState) {
71
+ let { fromIndex } = getState()
72
+ const { toIndex } = getState()
73
+ fromIndex = Math.max(fromIndex - BATCH_SIZE, 0)
74
+ setState({
75
+ ...getState(),
76
+ fromIndex,
77
+ items: items.slice(fromIndex, toIndex + 1)
78
+ })
79
+ }
80
+
81
+ function onShowNext(items, getState, setState) {
82
+ const { fromIndex } = getState()
83
+ let { toIndex } = getState()
84
+ toIndex = Math.min(toIndex + BATCH_SIZE, items.length - 1)
85
+ setState({
86
+ ...getState(),
87
+ toIndex,
88
+ items: items.slice(fromIndex, toIndex + 1)
89
+ })
90
+ }
91
+
92
+ function renderItem(item) {
93
+ const { username, date, text } = item
94
+
95
+ // Comment element.
96
+ const itemElement = document.createElement('article')
97
+ itemElement.classList.add('list-item')
98
+
99
+ // Comment author.
100
+ const authorElement = document.createElement('a')
101
+ authorElement.setAttribute('target', '_blank')
102
+ authorElement.setAttribute('href', `https://twitter.com/${username}`)
103
+ authorElement.textContent = `@${username}`
104
+ itemElement.appendChild(authorElement)
105
+
106
+ // Comment date.
107
+ const timeElement = document.createElement('time')
108
+ timeElement.setAttribute('datetime', date.toISOString())
109
+ timeElement.textContent = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`
110
+ itemElement.appendChild(timeElement)
111
+
112
+ // Comment text.
113
+ const textElement = document.createElement('p')
114
+ textElement.textContent = text
115
+ itemElement.appendChild(textElement)
116
+
117
+ // Return comment element.
118
+ return itemElement
119
+ }
120
+
121
+ function renderShowPrevious(items, getState, setState) {
122
+ const { fromIndex } = getState()
123
+ const container = document.getElementById('show-previous')
124
+ while (container.firstChild) {
125
+ container.removeChild(container.firstChild)
126
+ }
127
+ if (window.PAGINATION && fromIndex > 0) {
128
+ const button = document.createElement('button')
129
+ button.setAttribute('type', 'button')
130
+ button.classList.add('load-items-button')
131
+ button.addEventListener('click', () => onShowPrevious(items, getState, setState))
132
+ button.textContent = 'Show previous'
133
+ container.appendChild(button)
134
+ }
135
+ }
136
+
137
+ function renderShowNext(items, getState, setState) {
138
+ const { toIndex } = getState()
139
+ const container = document.getElementById('show-next')
140
+ while (container.firstChild) {
141
+ container.removeChild(container.firstChild)
142
+ }
143
+ if (window.PAGINATION && toIndex < items.length - 1) {
144
+ const button = document.createElement('button')
145
+ button.setAttribute('type', 'button')
146
+ button.classList.add('load-items-button')
147
+ button.addEventListener('click', () => onShowNext(items, getState, setState))
148
+ button.textContent = 'Show next'
149
+ container.appendChild(button)
150
+ }
151
+ }
152
+
153
+ class VirtualScrollerDemo {
154
+ constructor() {
155
+ this.state = getInitialState(ITEMS)
156
+ }
157
+
158
+ getState = () => {
159
+ return this.state
160
+ }
161
+
162
+ setState = (newState) => {
163
+ const prevState = this.state
164
+ this.state = newState
165
+ this.onStateChange(this.state, prevState)
166
+ }
167
+
168
+ onStateChange(state, prevState) {
169
+ if (state.items !== prevState.items) {
170
+ this.virtualScroller.setItems(state.items, {
171
+ preserveScrollPositionOnPrependItems: true
172
+ })
173
+ this.renderPrevNextButtons()
174
+ }
175
+ }
176
+
177
+ renderPrevNextButtons() {
178
+ renderShowPrevious(ITEMS, this.getState, this.setState)
179
+ renderShowNext(ITEMS, this.getState, this.setState)
180
+ }
181
+
182
+ render() {
183
+ this.virtualScroller = new VirtualScroller(
184
+ document.getElementById('list'),
185
+ this.getState().items,
186
+ renderItem,
187
+ { getColumnsCount, bypass: true }
188
+ )
189
+ this.renderPrevNextButtons()
190
+ }
191
+ }
192
+
193
+ const virtualScrollerDemo = new VirtualScrollerDemo()
194
+ virtualScrollerDemo.render()
195
+ </script>
196
+ </body>
197
+ </html>
package/bundle/index-dom-grid.html ADDED
@@ -0,0 +1,203 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <!-- Fix encoding. -->
5
+ <meta charset="utf-8">
6
+ <!-- Fix document width for mobile devices. -->
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+
9
+ <title>VirtualScroller (DOM) (Grid)</title>
10
+
11
+ <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
12
+
13
+ <script src="./virtual-scroller-dom.js"></script>
14
+ <script src="./items.js"></script>
15
+
16
+ <link rel="stylesheet" href="./style.base.css"/>
17
+ <link rel="stylesheet" href="./style.list.css"/>
18
+ <link rel="stylesheet" href="./style.list.grid.css"/>
19
+ </head>
20
+
21
+ <body>
22
+ <!-- http://tholman.com/github-corners/ -->
23
+ <a title="Go to GitHub repo" href="https://gitlab.com/catamphetamine/virtual-scroller" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
24
+
25
+ <section class="container">
26
+ <h1>
27
+ <svg class="twitter-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
28
+ <path fill="#00AAEC" fill-rule="evenodd" d="M128 23.294a51.28 51.28 0 0 1-15.079 4.237c5.424-3.328 9.587-8.606 11.548-14.892a51.718 51.718 0 0 1-16.687 6.526c-4.778-5.231-11.608-8.498-19.166-8.498-14.493 0-26.251 12.057-26.251 26.927 0 2.111.225 4.16.676 6.133-21.824-1.126-41.17-11.835-54.131-28.145a27.422 27.422 0 0 0-3.554 13.552c0 9.338 4.636 17.581 11.683 22.412-4.297-.131-8.355-1.356-11.901-3.359v.331c0 13.051 9.053 23.937 21.074 26.403-2.201.632-4.523.948-6.92.948-1.69 0-3.343-.162-4.944-.478 3.343 10.694 13.035 18.483 24.53 18.691-8.986 7.227-20.315 11.533-32.614 11.533-2.119 0-4.215-.123-6.266-.37 11.623 7.627 25.432 12.088 40.255 12.088 48.309 0 74.717-41.026 74.717-76.612a89.39 89.39 0 0 0-.068-3.49A53.862 53.862 0 0 0 128 23.294" clip-rule="evenodd"></path>
29
+ </svg>
30
+ Latest Tweets on #politics
31
+ </h1>
32
+ <div id="show-previous"></div>
33
+ <div id="list"></div>
34
+ <div id="show-next"></div>
35
+ <footer>
36
+ © Twitter Inc., 2019
37
+ </footer>
38
+ </section>
39
+
40
+ <script>
41
+ // Enable debug output to console.
42
+ window.VirtualScrollerDebug = true
43
+ // Pass `?pagination=✓` URL query parameter to enable pagination.
44
+ window.PAGINATION = Boolean(new URL(window.location).searchParams.get('pagination'))
45
+ </script>
46
+
47
+ <script type="text/babel">
48
+ const BATCH_SIZE = 6
49
+ const COLUMNS_COUNT = 3
50
+
51
+ function getColumnsCount(container) {
52
+ if (container.getWidth() > 1280) {
53
+ return COLUMNS_COUNT
54
+ }
55
+ return 1
56
+ }
57
+
58
+ function getInitialState(items) {
59
+ if (window.PAGINATION) {
60
+ const fromIndex = Math.floor((items.length - BATCH_SIZE) / 2 / COLUMNS_COUNT) * COLUMNS_COUNT
61
+ const toIndex = fromIndex + BATCH_SIZE - 1
62
+ return {
63
+ fromIndex,
64
+ toIndex,
65
+ items: items.slice(fromIndex, toIndex + 1)
66
+ }
67
+ } else {
68
+ return {
69
+ fromIndex: 0,
70
+ toIndex: items.length,
71
+ items: items
72
+ }
73
+ }
74
+ }
75
+
76
+ function onShowPrevious(items, getState, setState) {
77
+ let { fromIndex } = getState()
78
+ const { toIndex } = getState()
79
+ fromIndex = Math.max(fromIndex - BATCH_SIZE, 0)
80
+ setState({
81
+ ...getState(),
82
+ fromIndex,
83
+ items: items.slice(fromIndex, toIndex + 1)
84
+ })
85
+ }
86
+
87
+ function onShowNext(items, getState, setState) {
88
+ const { fromIndex } = getState()
89
+ let { toIndex } = getState()
90
+ toIndex = Math.min(toIndex + BATCH_SIZE, items.length - 1)
91
+ setState({
92
+ ...getState(),
93
+ toIndex,
94
+ items: items.slice(fromIndex, toIndex + 1)
95
+ })
96
+ }
97
+
98
+ function renderItem(item) {
99
+ const { username, date, text } = item
100
+
101
+ // Comment element.
102
+ const itemElement = document.createElement('article')
103
+ itemElement.classList.add('list-item')
104
+
105
+ // Comment author.
106
+ const authorElement = document.createElement('a')
107
+ authorElement.setAttribute('target', '_blank')
108
+ authorElement.setAttribute('href', `https://twitter.com/${username}`)
109
+ authorElement.textContent = `@${username}`
110
+ itemElement.appendChild(authorElement)
111
+
112
+ // Comment date.
113
+ const timeElement = document.createElement('time')
114
+ timeElement.setAttribute('datetime', date.toISOString())
115
+ timeElement.textContent = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`
116
+ itemElement.appendChild(timeElement)
117
+
118
+ // Comment text.
119
+ const textElement = document.createElement('p')
120
+ textElement.textContent = text
121
+ itemElement.appendChild(textElement)
122
+
123
+ // Return comment element.
124
+ return itemElement
125
+ }
126
+
127
+ function renderShowPrevious(items, getState, setState) {
128
+ const { fromIndex } = getState()
129
+ const container = document.getElementById('show-previous')
130
+ while (container.firstChild) {
131
+ container.removeChild(container.firstChild)
132
+ }
133
+ if (window.PAGINATION && fromIndex > 0) {
134
+ const button = document.createElement('button')
135
+ button.setAttribute('type', 'button')
136
+ button.classList.add('load-items-button')
137
+ button.addEventListener('click', () => onShowPrevious(items, getState, setState))
138
+ button.textContent = 'Show previous'
139
+ container.appendChild(button)
140
+ }
141
+ }
142
+
143
+ function renderShowNext(items, getState, setState) {
144
+ const { toIndex } = getState()
145
+ const container = document.getElementById('show-next')
146
+ while (container.firstChild) {
147
+ container.removeChild(container.firstChild)
148
+ }
149
+ if (window.PAGINATION && toIndex < items.length - 1) {
150
+ const button = document.createElement('button')
151
+ button.setAttribute('type', 'button')
152
+ button.classList.add('load-items-button')
153
+ button.addEventListener('click', () => onShowNext(items, getState, setState))
154
+ button.textContent = 'Show next'
155
+ container.appendChild(button)
156
+ }
157
+ }
158
+
159
+ class VirtualScrollerDemo {
160
+ constructor() {
161
+ this.state = getInitialState(ITEMS)
162
+ }
163
+
164
+ getState = () => {
165
+ return this.state
166
+ }
167
+
168
+ setState = (newState) => {
169
+ const prevState = this.state
170
+ this.state = newState
171
+ this.onStateChange(this.state, prevState)
172
+ }
173
+
174
+ onStateChange(state, prevState) {
175
+ if (state.items !== prevState.items) {
176
+ this.virtualScroller.setItems(state.items, {
177
+ preserveScrollPositionOnPrependItems: true
178
+ })
179
+ this.renderPrevNextButtons()
180
+ }
181
+ }
182
+
183
+ renderPrevNextButtons() {
184
+ renderShowPrevious(ITEMS, this.getState, this.setState)
185
+ renderShowNext(ITEMS, this.getState, this.setState)
186
+ }
187
+
188
+ render() {
189
+ this.virtualScroller = new VirtualScroller(
190
+ document.getElementById('list'),
191
+ this.getState().items,
192
+ renderItem,
193
+ { getColumnsCount }
194
+ )
195
+ this.renderPrevNextButtons()
196
+ }
197
+ }
198
+
199
+ const virtualScrollerDemo = new VirtualScrollerDemo()
200
+ virtualScrollerDemo.render()
201
+ </script>
202
+ </body>
203
+ </html>
package/bundle/index-dom-scrollableContainer.html ADDED
@@ -0,0 +1,214 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <!-- Fix encoding. -->
5
+ <meta charset="utf-8">
6
+ <!-- Fix document width for mobile devices. -->
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+
9
+ <title>VirtualScroller (DOM) (Scrollable Container)</title>
10
+
11
+ <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
12
+
13
+ <script src="./virtual-scroller-dom.js"></script>
14
+ <script src="./items.js"></script>
15
+
16
+ <link rel="stylesheet" href="./style.base.css"/>
17
+ <link rel="stylesheet" href="./style.list.css"/>
18
+
19
+ <style>
20
+ #scrollable-container {
21
+ margin-top: 20vh;
22
+ margin-bottom: 20vh;
23
+ max-height: 60vh;
24
+ overflow: auto;
25
+ }
26
+ </style>
27
+ </head>
28
+
29
+ <body>
30
+ <!-- http://tholman.com/github-corners/ -->
31
+ <a title="Go to GitHub repo" href="https://gitlab.com/catamphetamine/virtual-scroller" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
32
+
33
+ <section class="container">
34
+ <h1>
35
+ <svg class="twitter-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
36
+ <path fill="#00AAEC" fill-rule="evenodd" d="M128 23.294a51.28 51.28 0 0 1-15.079 4.237c5.424-3.328 9.587-8.606 11.548-14.892a51.718 51.718 0 0 1-16.687 6.526c-4.778-5.231-11.608-8.498-19.166-8.498-14.493 0-26.251 12.057-26.251 26.927 0 2.111.225 4.16.676 6.133-21.824-1.126-41.17-11.835-54.131-28.145a27.422 27.422 0 0 0-3.554 13.552c0 9.338 4.636 17.581 11.683 22.412-4.297-.131-8.355-1.356-11.901-3.359v.331c0 13.051 9.053 23.937 21.074 26.403-2.201.632-4.523.948-6.92.948-1.69 0-3.343-.162-4.944-.478 3.343 10.694 13.035 18.483 24.53 18.691-8.986 7.227-20.315 11.533-32.614 11.533-2.119 0-4.215-.123-6.266-.37 11.623 7.627 25.432 12.088 40.255 12.088 48.309 0 74.717-41.026 74.717-76.612a89.39 89.39 0 0 0-.068-3.49A53.862 53.862 0 0 0 128 23.294" clip-rule="evenodd"></path>
37
+ </svg>
38
+ Latest Tweets on #politics
39
+ </h1>
40
+ <div id="show-previous"></div>
41
+ <div id="scrollable-container">
42
+ <div id="list"></div>
43
+ </div>
44
+ <div id="show-next"></div>
45
+ <footer>
46
+ © Twitter Inc., 2019
47
+ </footer>
48
+ </section>
49
+
50
+ <script>
51
+ // Enable debug output to console.
52
+ window.VirtualScrollerDebug = true
53
+ // Pass `?pagination=✓` URL query parameter to enable pagination.
54
+ window.PAGINATION = Boolean(new URL(window.location).searchParams.get('pagination'))
55
+ </script>
56
+
57
+ <script type="text/babel">
58
+ const BATCH_SIZE = 6
59
+ const COLUMNS_COUNT = 1
60
+
61
+ function getColumnsCount(container) {
62
+ return 1
63
+ }
64
+
65
+ function getInitialState(items) {
66
+ if (window.PAGINATION) {
67
+ const fromIndex = Math.floor((items.length - BATCH_SIZE) / 2 / COLUMNS_COUNT) * COLUMNS_COUNT
68
+ const toIndex = fromIndex + BATCH_SIZE - 1
69
+ return {
70
+ fromIndex,
71
+ toIndex,
72
+ items: items.slice(fromIndex, toIndex + 1)
73
+ }
74
+ } else {
75
+ return {
76
+ fromIndex: 0,
77
+ toIndex: items.length,
78
+ items: items
79
+ }
80
+ }
81
+ }
82
+
83
+ function onShowPrevious(items, getState, setState) {
84
+ let { fromIndex } = getState()
85
+ const { toIndex } = getState()
86
+ fromIndex = Math.max(fromIndex - BATCH_SIZE, 0)
87
+ setState({
88
+ ...getState(),
89
+ fromIndex,
90
+ items: items.slice(fromIndex, toIndex + 1)
91
+ })
92
+ }
93
+
94
+ function onShowNext(items, getState, setState) {
95
+ const { fromIndex } = getState()
96
+ let { toIndex } = getState()
97
+ toIndex = Math.min(toIndex + BATCH_SIZE, items.length - 1)
98
+ setState({
99
+ ...getState(),
100
+ toIndex,
101
+ items: items.slice(fromIndex, toIndex + 1)
102
+ })
103
+ }
104
+
105
+ function getScrollableContainer() {
106
+ return document.getElementById('scrollable-container')
107
+ }
108
+
109
+ function renderItem(item) {
110
+ const { username, date, text } = item
111
+
112
+ // Comment element.
113
+ const itemElement = document.createElement('article')
114
+ itemElement.classList.add('list-item')
115
+
116
+ // Comment author.
117
+ const authorElement = document.createElement('a')
118
+ authorElement.setAttribute('target', '_blank')
119
+ authorElement.setAttribute('href', `https://twitter.com/${username}`)
120
+ authorElement.textContent = `@${username}`
121
+ itemElement.appendChild(authorElement)
122
+
123
+ // Comment date.
124
+ const timeElement = document.createElement('time')
125
+ timeElement.setAttribute('datetime', date.toISOString())
126
+ timeElement.textContent = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`
127
+ itemElement.appendChild(timeElement)
128
+
129
+ // Comment text.
130
+ const textElement = document.createElement('p')
131
+ textElement.textContent = text
132
+ itemElement.appendChild(textElement)
133
+
134
+ // Return comment element.
135
+ return itemElement
136
+ }
137
+
138
+ function renderShowPrevious(items, getState, setState) {
139
+ const { fromIndex } = getState()
140
+ const container = document.getElementById('show-previous')
141
+ while (container.firstChild) {
142
+ container.removeChild(container.firstChild)
143
+ }
144
+ if (window.PAGINATION && fromIndex > 0) {
145
+ const button = document.createElement('button')
146
+ button.setAttribute('type', 'button')
147
+ button.classList.add('load-items-button')
148
+ button.addEventListener('click', () => onShowPrevious(items, getState, setState))
149
+ button.textContent = 'Show previous'
150
+ container.appendChild(button)
151
+ }
152
+ }
153
+
154
+ function renderShowNext(items, getState, setState) {
155
+ const { toIndex } = getState()
156
+ const container = document.getElementById('show-next')
157
+ while (container.firstChild) {
158
+ container.removeChild(container.firstChild)
159
+ }
160
+ if (window.PAGINATION && toIndex < items.length - 1) {
161
+ const button = document.createElement('button')
162
+ button.setAttribute('type', 'button')
163
+ button.classList.add('load-items-button')
164
+ button.addEventListener('click', () => onShowNext(items, getState, setState))
165
+ button.textContent = 'Show next'
166
+ container.appendChild(button)
167
+ }
168
+ }
169
+
170
+ class VirtualScrollerDemo {
171
+ constructor() {
172
+ this.state = getInitialState(ITEMS)
173
+ }
174
+
175
+ getState = () => {
176
+ return this.state
177
+ }
178
+
179
+ setState = (newState) => {
180
+ const prevState = this.state
181
+ this.state = newState
182
+ this.onStateChange(this.state, prevState)
183
+ }
184
+
185
+ onStateChange(state, prevState) {
186
+ if (state.items !== prevState.items) {
187
+ this.virtualScroller.setItems(state.items, {
188
+ preserveScrollPositionOnPrependItems: true
189
+ })
190
+ this.renderPrevNextButtons()
191
+ }
192
+ }
193
+
194
+ renderPrevNextButtons() {
195
+ renderShowPrevious(ITEMS, this.getState, this.setState)
196
+ renderShowNext(ITEMS, this.getState, this.setState)
197
+ }
198
+
199
+ render() {
200
+ this.virtualScroller = new VirtualScroller(
201
+ document.getElementById('list'),
202
+ this.getState().items,
203
+ renderItem,
204
+ { getColumnsCount, getScrollableContainer }
205
+ )
206
+ this.renderPrevNextButtons()
207
+ }
208
+ }
209
+
210
+ const virtualScrollerDemo = new VirtualScrollerDemo()
211
+ virtualScrollerDemo.render()
212
+ </script>
213
+ </body>
214
+ </html>
package/bundle/index-dom-tbody-scrollableContainer.html ADDED
@@ -0,0 +1,81 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <!-- Fix encoding. -->
5
+ <meta charset="utf-8">
6
+ <!-- Fix document width for mobile devices. -->
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+
9
+ <title>VirtualScroller (DOM) (Scrollable Container) (<tbody/>)</title>
10
+
11
+ <script src="./virtual-scroller-dom.js"></script>
12
+
13
+ <link rel="stylesheet" href="./style.base.css"/>
14
+
15
+ <style>
16
+ #scrollable-container {
17
+ margin-top: 20vh;
18
+ margin-bottom: 20vh;
19
+ max-height: 60vh;
20
+ overflow: auto;
21
+ }
22
+ </style>
23
+
24
+ <style>
25
+ table {
26
+ width: 100%;
27
+ }
28
+
29
+ tr {
30
+ background: #fff
31
+ }
32
+
33
+ th, td {
34
+ padding-left: 1em;
35
+ padding-right: 1em;
36
+ padding-top: 0.2em;
37
+ padding-bottom: 0.2em;
38
+ }
39
+ </style>
40
+ </head>
41
+
42
+ <body>
43
+ <div id="scrollable-container">
44
+ <table>
45
+ <tbody id="table-rows-container">
46
+ </tbody>
47
+ </table>
48
+ </div>
49
+
50
+ <script>
51
+ // Enable debug output to console.
52
+ window.VirtualScrollerDebug = true
53
+ </script>
54
+
55
+ <script>
56
+ const rows = []
57
+ for (var i = 1; i <= 10000; i++) {
58
+ rows.push(i)
59
+ }
60
+
61
+ function renderRow(i) {
62
+ var tr = document.createElement('tr')
63
+ var td = document.createElement('td')
64
+ td.innerText = i
65
+ tr.appendChild(td)
66
+ return tr
67
+ }
68
+
69
+ function getScrollableContainer() {
70
+ return document.getElementById('scrollable-container')
71
+ }
72
+
73
+ new VirtualScroller(
74
+ document.getElementById('table-rows-container'),
75
+ rows,
76
+ renderRow,
77
+ { getScrollableContainer }
78
+ )
79
+ </script>
80
+ </body>
81
+ </html>