Skip to content

Commit ede7306

Browse files
ValexrValexr
committed
@slidy/core - add reactive position
1 parent 5a51026 commit ede7306

File tree

4 files changed

+91
-205
lines changed

4 files changed

+91
-205
lines changed

‎packages/core/README.MD

+9-9
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,8 @@ If you need keyboard navigation just set `tabindex=0` on target node.
131131

132132
| Key | Default | Type | Description |
133133
| :---------- | :---------- | :--------- | :---------- |
134-
| `index` | `0` | `number` | Start index |
134+
| `index` | `0` | `number` | Sliding index |
135+
| `position` | `0` | `number` | Sliding position. Setter working only in `snap: undefined` mode. |
135136
| `clamp` | `0` | `number` | Clamping sliding by index: `clamp - index + clamp` |
136137
| `indent` | `1` | `number` | Sliding indent: part of gap padding both start/end edges of slide `gap * indent` |
137138
| `sensity` | `5` | `number` | Sliding sensity: how many pixels to drag in the RAF `~16ms` to start move, `0` when sliding |
@@ -147,7 +148,6 @@ If you need keyboard navigation just set `tabindex=0` on target node.
147148

148149
| Key | Type | Description |
149150
| :---------- | :------- | :---------- |
150-
| `position` | `number` | Current position |
151151
| `direction` | `number` | Children move direction |
152152

153153
#### Avialable only in Animation Function
@@ -238,12 +238,12 @@ Slidy instance reinit on every change childNodes.length in `on:mutate` event.
238238

239239
## Methods
240240

241-
| Name | Arguments | Description |
242-
| :---------- | :----------------- | :---------- |
243-
| `to()` | `(index)` | Scroll to `index` |
244-
| `init()` | `(node)` | Init slidy() instance |
245-
| `update()` | `({option:value})` | Update any property in options |
246-
| `destroy()` | `()` | Remove event listners, observers & defaulted props on `slidy()` instance |
241+
| Name | Arguments | Description |
242+
| :---------- | :------------------ | :---------- |
243+
| `to()` | `(index, position)` | Scroll to `index` or `position` (only `snap: undefined`) |
244+
| `init()` | `(node)` | Init slidy() instance |
245+
| `update()` | `({option:value})` | Update any property in options |
246+
| `destroy()` | `()` | Remove event listners, observers & defaulted props on `slidy()` instance |
247247

248248
### Usage
249249

@@ -257,7 +257,7 @@ Slidy instance reinit on every change childNodes.length in `on:mutate` event.
257257
slidy.update({ snap: 'center' })
258258
259259
prev.onclick = () => slidy.to(index - 1)
260-
next.onclick = () => slidy.to(index + 1)
260+
next.onclick = () => slidy.to(index + 1, 100)
261261
</script>
262262
</head>
263263

‎packages/core/public/index.html

+69-186
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,53 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="utf-8" />
5-
<meta
6-
name="viewport"
7-
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=auto"
8-
/>
6+
<meta name="viewport"
7+
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=auto" />
98
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
109
<meta name="apple-mobile-web-app-capable" content="yes" />
1110
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
1211
<meta http-equiv="Pragma" content="no-cache" />
1312
<meta http-equiv="Expires" content="0" />
1413

15-
<link
16-
href="assets/splashscreens/iphone5_splash.png"
14+
<link href="assets/splashscreens/iphone5_splash.png"
1715
media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"
18-
rel="apple-touch-startup-image"
19-
/>
20-
<link
21-
href="assets/splashscreens/iphone6_splash.png"
16+
rel="apple-touch-startup-image" />
17+
<link href="assets/splashscreens/iphone6_splash.png"
2218
media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)"
23-
rel="apple-touch-startup-image"
24-
/>
25-
<link
26-
href="assets/splashscreens/iphoneplus_splash.png"
19+
rel="apple-touch-startup-image" />
20+
<link href="assets/splashscreens/iphoneplus_splash.png"
2721
media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)"
28-
rel="apple-touch-startup-image"
29-
/>
30-
<link
31-
href="assets/splashscreens/iphonex_splash.png"
22+
rel="apple-touch-startup-image" />
23+
<link href="assets/splashscreens/iphonex_splash.png"
3224
media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)"
33-
rel="apple-touch-startup-image"
34-
/>
35-
<link
36-
href="assets/splashscreens/iphonexr_splash.png"
25+
rel="apple-touch-startup-image" />
26+
<link href="assets/splashscreens/iphonexr_splash.png"
3727
media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)"
38-
rel="apple-touch-startup-image"
39-
/>
40-
<link
41-
href="assets/splashscreens/iphonexsmax_splash.png"
28+
rel="apple-touch-startup-image" />
29+
<link href="assets/splashscreens/iphonexsmax_splash.png"
4230
media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)"
43-
rel="apple-touch-startup-image"
44-
/>
45-
<link
46-
href="assets/splashscreens/iphone12_splash.png"
31+
rel="apple-touch-startup-image" />
32+
<link href="assets/splashscreens/iphone12_splash.png"
4733
media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3)"
48-
rel="apple-touch-startup-image"
49-
/>
50-
<link
51-
href="assets/splashscreens/ipad_splash.png"
34+
rel="apple-touch-startup-image" />
35+
<link href="assets/splashscreens/ipad_splash.png"
5236
media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)"
53-
rel="apple-touch-startup-image"
54-
/>
55-
<link
56-
href="assets/splashscreens/ipadpro1_splash.png"
37+
rel="apple-touch-startup-image" />
38+
<link href="assets/splashscreens/ipadpro1_splash.png"
5739
media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)"
58-
rel="apple-touch-startup-image"
59-
/>
60-
<link
61-
href="assets/splashscreens/ipadpro3_splash.png"
40+
rel="apple-touch-startup-image" />
41+
<link href="assets/splashscreens/ipadpro3_splash.png"
6242
media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)"
63-
rel="apple-touch-startup-image"
64-
/>
65-
<link
66-
href="assets/splashscreens/ipadpro2_splash.png"
43+
rel="apple-touch-startup-image" />
44+
<link href="assets/splashscreens/ipadpro2_splash.png"
6745
media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)"
68-
rel="apple-touch-startup-image"
69-
/>
46+
rel="apple-touch-startup-image" />
7047

71-
<link
72-
rel="apple-touch-icon"
73-
type="image/png"
74-
sizes="any"
75-
href="assets/apple-touch-icon.png"
76-
/>
77-
<link
78-
rel="apple-touch-icon-precomposed"
79-
type="image/png"
80-
sizes="any"
81-
href="assets/apple-touch-icon-precomposed.png"
82-
/>
48+
<link rel="apple-touch-icon" type="image/png" sizes="any" href="assets/apple-touch-icon.png" />
49+
<link rel="apple-touch-icon-precomposed" type="image/png" sizes="any"
50+
href="assets/apple-touch-icon-precomposed.png" />
8351
<link rel="icon" type="image/png" href="assets/favicon.png" />
8452
<link rel="stylesheet" href="dev.css" />
8553

@@ -174,11 +142,11 @@ <h3 id="header"></h3>
174142

175143
<footer>
176144
<nav>
177-
<button id="prev" onclick="slidy.to(options.index - 1)">←</button>
145+
<button id="prev" onclick="slidy.to(options.index - 1, -100)">←</button>
178146
<button id="reload" onclick="getPhotos(node, utils.randomQ(1, 99), options.length)">
179147
<i class="icon icon-refresh"></i>
180148
</button>
181-
<button id="next" onclick="slidy.to(options.index + 1)">→</button>
149+
<button id="next" onclick="slidy.update({position: 1000})">→</button>
182150
</nav>
183151

184152
<nav id="dots"></nav>
@@ -191,145 +159,69 @@ <h3 id="header"></h3>
191159

192160
<form>
193161
<fieldset>
194-
<label title="axis"
195-
>axis
196-
<select
197-
id="axis"
198-
name="axis"
199-
onchange="slidy.update({ axis: this.value })"
200-
></select>
162+
<label title="axis">axis
163+
<select id="axis" name="axis" onchange="slidy.update({ axis: this.value })"></select>
201164
</label>
202-
<label title="snap"
203-
>snap
204-
<select
205-
id="snap"
206-
name="snap"
207-
onchange="slidy.update({ snap: this.value })"
208-
></select>
165+
<label title="snap">snap
166+
<select id="snap" name="snap" onchange="slidy.update({ snap: this.value })"></select>
209167
</label>
210-
<label title="animation"
211-
>animation
212-
<select
213-
id="animation"
214-
name="animation"
215-
onchange="slidy.update({ animation: animations[this.value] })"
216-
></select>
168+
<label title="animation">animation
169+
<select id="animation" name="animation"
170+
onchange="slidy.update({ animation: animations[this.value] })"></select>
217171
</label>
218-
<label title="easing"
219-
>easing
220-
<select
221-
id="easing"
222-
name="easing"
223-
onchange="slidy.update({ easing: easings[this.value] })"
224-
></select>
172+
<label title="easing">easing
173+
<select id="easing" name="easing"
174+
onchange="slidy.update({ easing: easings[this.value] })"></select>
225175
</label>
226176
</fieldset>
227177
</form>
228178

229179
<form>
230180
<fieldset>
231-
<label title="clamp"
232-
>clamp
233-
<input
234-
id="clamp"
235-
onchange="slidy.update({ clamp: +this.value })"
236-
name="clamp"
237-
type="number"
238-
size="1"
239-
step="1"
240-
min="0"
241-
max="3"
242-
/>
181+
<label title="clamp">clamp
182+
<input id="clamp" onchange="slidy.update({ clamp: +this.value })" name="clamp" type="number"
183+
size="1" step="1" min="0" max="3" />
243184
</label>
244-
<label title="sensity"
245-
>sensity
246-
<input
247-
id="sensity"
248-
onchange="slidy.update({ sensity: +this.value })"
249-
name="sensity"
250-
type="number"
251-
size="2"
252-
step="1"
253-
min="0"
254-
max="100"
255-
/>
185+
<label title="sensity">sensity
186+
<input id="sensity" onchange="slidy.update({ sensity: +this.value })" name="sensity"
187+
type="number" size="2" step="1" min="0" max="100" />
256188
</label>
257-
<label title="indent"
258-
>indent
259-
<input
260-
id="indent"
261-
onchange="slidy.update({ indent: +this.value })"
262-
name="indent"
263-
type="number"
264-
size="1"
265-
step="0.1"
266-
min="-2"
267-
max="2"
268-
/>
189+
<label title="indent">indent
190+
<input id="indent" onchange="slidy.update({ indent: +this.value })" name="indent" type="number"
191+
size="1" step="0.1" min="-2" max="2" />
269192
</label>
270-
<label title="duration"
271-
>duration
272-
<input
273-
id="duration"
274-
onchange="slidy.update({ duration: +this.value })"
275-
name="duration"
276-
type="number"
277-
size="2"
278-
step="1"
279-
min="100"
280-
max="1000"
281-
/>
193+
<label title="duration">duration
194+
<input id="duration" onchange="slidy.update({ duration: +this.value })" name="duration"
195+
type="number" size="2" step="1" min="100" max="1000" />
282196
</label>
283-
<label title="gravity"
284-
>gravity
285-
<input
286-
id="gravity"
287-
onchange="slidy.update({ gravity: +this.value })"
288-
name="gravity"
289-
type="number"
290-
size="1"
291-
step="0.1"
292-
min="0.1"
293-
max="2"
294-
/>
197+
<label title="gravity">gravity
198+
<input id="gravity" onchange="slidy.update({ gravity: +this.value })" name="gravity"
199+
type="number" size="1" step="0.1" min="0.1" max="2" />
295200
</label>
296201
</fieldset>
297202
</form>
298203

299204
<form>
300205
<fieldset>
301-
<label title="length"
302-
>length
303-
<input
304-
id="length"
305-
onchange="utils.changeLength(this)"
306-
name="length"
307-
type="number"
308-
size="1"
309-
step="1"
310-
min="1"
311-
max="50"
312-
/>
206+
<label title="length">length
207+
<input id="length" onchange="utils.changeLength(this)" name="length" type="number" size="1"
208+
step="1" min="1" max="50" />
313209
</label>
314-
<label title="flow"
315-
>flow
210+
<label title="flow">flow
316211
<select id="flow" name="flow" onchange="utils.setFlow(this.value)">
317212
<option>row</option>
318213
<option>row-reverse</option>
319214
<option>column</option>
320215
<option>column-reverse</option>
321216
</select>
322217
</label>
323-
<label title="width"
324-
>width
218+
<label title="width">width
325219
<input onchange="utils.setVar(this)" name="width" size="4" />
326220
</label>
327-
<label title="height"
328-
>height
221+
<label title="height">height
329222
<input onchange="utils.setVar(this)" name="height" size="5" />
330223
</label>
331-
<label title="gap"
332-
>gap
224+
<label title="gap">gap
333225
<input onchange="utils.setVar(this)" name="gap" size="4" />
334226
</label>
335227
</fieldset>
@@ -375,33 +267,23 @@ <h3>
375267
<h2>Packages</h2>
376268
<ul>
377269
<li>
378-
<a href="https://github.com/Valexr/slidy/tree/master/packages/core"
379-
>@slidy/core</a
380-
>
270+
<a href="https://github.com/Valexr/slidy/tree/master/packages/core">@slidy/core</a>
381271
- Core sliding script
382272
</li>
383273
<li>
384-
<a href="https://github.com/Valexr/slidy/tree/master/packages/media"
385-
>@slidy/media</a
386-
>
274+
<a href="https://github.com/Valexr/slidy/tree/master/packages/media">@slidy/media</a>
387275
- Observable media
388276
</li>
389277
<li>
390-
<a href="https://github.com/Valexr/slidy/tree/master/packages/easing"
391-
>@slidy/easing</a
392-
>
278+
<a href="https://github.com/Valexr/slidy/tree/master/packages/easing">@slidy/easing</a>
393279
- Easing functions
394280
</li>
395281
<li>
396-
<a href="https://github.com/Valexr/slidy/tree/master/packages/animation"
397-
>@slidy/animation</a
398-
>
282+
<a href="https://github.com/Valexr/slidy/tree/master/packages/animation">@slidy/animation</a>
399283
- Animation functions
400284
</li>
401285
<li>
402-
<a href="https://github.com/Valexr/slidy/tree/master/packages/svelte"
403-
>@slidy/svelte</a
404-
>
286+
<a href="https://github.com/Valexr/slidy/tree/master/packages/svelte">@slidy/svelte</a>
405287
- SvelteJS template
406288
</li>
407289
</ul>
@@ -444,4 +326,5 @@ <h2>Thanks 🎉</h2>
444326
</article>
445327
<br />
446328
</body>
447-
</html>
329+
330+
</html>

0 commit comments

Comments
 (0)