1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
# slidetray
* an ease web slide presentation builder
* descripbed in json format
## presentation json template
js (var as json)
```js
let presentation = {
name: `str.ascii`, /// MANDATORY
title: `str.utf8`,
description: `txt.utf8`,
selector: `str.selector`, /// MANDATORY
source_url: `str.url, default='./'`,
effect: `none(=default) | cards | flip | fade | cube`,
theme: `light(=default) | dark`,
navigation: `boolean, default=true`,
pagination: `none | classic(=default) | dynamic | progress | fraction`
keyboard: `boolean, default=false`,
touch: `boolean, default=true`,
css: `text.css`,
slides: [ /// MANDATORY
{
description: `str.utf8`,
image: `str.url`, /// MANDATORY
poi: [ // points of interest
{
text: `utf8 str`
style: `text.css_block, position absolute%, scoped`,
link: [ `array.css_blocks` ] /**/
hover:
},
/*
... */
]
},
/*
... */
]
}
// ** example
// style: [
// '{ top: 15px; background: #333; }',
// 'a { color: #fff; }
// 'a:hover { color: red; }
// ]
```
## HTML minimal template
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<link rel="stylesheet" href="/css/easy-presentation.css"/>
</head>
<body>
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper"></div>
<!--
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
-->
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="/presentation-factory.js"></script>
<!-- Initialize Swiper -->
<script>
let setup = {
// presentaion setup json
};
let presentation = new presentationFactory(setup);
presentation.show(); // == .prepareCSS().prepareHTML().render()
</script>
</body>
</html>
```
## TODO: check if url is not broken
https://stackoverflow.com/questions/333634/http-head-request-in-javascript-ajax
https://stackoverflow.com/questions/1591401/javascript-jquery-check-broken-links
## TODO: custom effects
brainstorming:
* https://codepen.io/paralleluniv3rse/pen/yGQjMv
|
