@kizmann/pico-js 0.5.5 → 1.0.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 (26) hide show
  1. package/README.md +1 -22
  2. package/dist/pico-js.js +1 -1
  3. package/dist/pico-js.js.map +1 -1
  4. package/package.json +24 -6
  5. package/babel.config.cjs +0 -16
  6. package/docs/cookie.html +0 -53
  7. package/docs/element/ready.html +0 -74
  8. package/docs/element/resizer.html +0 -85
  9. package/docs/index.html +0 -12
  10. package/docs/library/map.html +0 -312
  11. package/docs/store.html +0 -80
  12. package/docs/style.css +0 -41
  13. package/docs/utility/any.md +0 -427
  14. package/mix-manifest.json +0 -4
  15. package/pico.svg +0 -52
  16. package/tsconfig.json +0 -14
  17. package/types/index.d.ts +0 -25
  18. package/types/utility/any.d.ts +0 -66
  19. package/types/utility/array.d.ts +0 -46
  20. package/types/utility/now.d.ts +0 -148
  21. package/types/utility/number.d.ts +0 -31
  22. package/types/utility/object.d.ts +0 -54
  23. package/types/utility/string.d.ts +0 -33
  24. package/webpack.config.cjs +0 -83
  25. package/webservy.json +0 -8
  26. /package/{.nojekyll → dist/.ignore.js} +0 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kizmann/pico-js",
3
- "version": "0.5.5",
3
+ "version": "1.0.1",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "private": false,
@@ -9,9 +9,14 @@
9
9
  "main": "src/index.js",
10
10
  "unpkg": "dist/pico-js.js",
11
11
  "types": "types/index.d.ts",
12
+ "files": [
13
+ "dist/",
14
+ "src/",
15
+ "package.json"
16
+ ],
12
17
  "scripts": {
13
- "build": "webpack --hide-modules --mode=production --config webpack.config.cjs",
14
- "watch": "webpack --watch --hide-modules --mode=development --config webpack.config.cjs"
18
+ "build": "webpack --mode production --config webpack.config.cjs",
19
+ "watch": "webpack --watch --mode development --config webpack.config.cjs"
15
20
  },
16
21
  "devDependencies": {
17
22
  "@babel/core": "^7.4.5",
@@ -21,10 +26,23 @@
21
26
  "@babel/preset-env": "^7.4.4",
22
27
  "babel-loader": "^8.0.6",
23
28
  "cross-env": "^5.1",
24
- "moment": "^2.24.0",
29
+ "css-loader": "^3.2.0",
30
+ "html-webpack-plugin": "^5.0.0",
31
+ "mini-css-extract-plugin": "^2.0.0",
32
+ "postcss": "^8.4.31",
33
+ "postcss-inline-svg": "^5.0.0",
34
+ "postcss-loader": "^5.0.0",
35
+ "sass": "^1.87.0",
36
+ "sass-loader": "^12.0.0",
25
37
  "terser-webpack-plugin": "^4.2.3",
26
38
  "uuid": "^3.3.2",
27
- "webpack": "^4.39.1",
28
- "webpack-cli": "^3.3.9"
39
+ "webpack": "^5.0.0",
40
+ "webpack-cli": "^4.0.0",
41
+ "webpack-dev-server": "^4.0.0"
42
+ },
43
+ "dependencies": {
44
+ "docsify": "^4.13.1",
45
+ "moment": "^2.30.1",
46
+ "global": "^4.4.0"
29
47
  }
30
48
  }
package/babel.config.cjs DELETED
@@ -1,16 +0,0 @@
1
- module.exports = function (api) {
2
-
3
- api.cache(true);
4
-
5
- const presets = [
6
- '@babel/preset-env'
7
- ];
8
-
9
- const plugins= [
10
- "@babel/plugin-proposal-class-properties",
11
- "@babel/plugin-proposal-object-rest-spread",
12
- "@babel/plugin-proposal-export-default-from"
13
- ];
14
-
15
- return { presets, plugins };
16
- };
package/docs/cookie.html DELETED
@@ -1,53 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
- <title>Nano JS Ready</title>
8
-
9
- <link rel="stylesheet" href="https://unpkg.com/backpack.css@2.0.0/lib/backpack.css">
10
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
11
- <link rel="stylesheet" href="../style.css">
12
-
13
- <!--[if IE ]>
14
- <script src="//cdnjs.cloudflare.com/ajax/libs/js-polyfills/0.1.43/polyfill.min.js"></script>
15
- <![endif]-->
16
-
17
- <script src="../../dist/pico-js.js"></script>
18
-
19
- </head>
20
- <body>
21
-
22
- <div id="app">
23
- <div>Open console!</div>
24
- </div>
25
-
26
- <script>
27
- (function (pi) {
28
-
29
- 'use strict';
30
-
31
- pi.Dom.ready(function() {
32
-
33
- var obj = {
34
- foo: { bar: 'key' }, hu: 'tem', ka: { se: { nope: 'lol' } }
35
- };
36
-
37
- console.log(pi.Obj.flatten(obj));
38
-
39
- console.log(pi.Str.real('@[\'\']'));
40
- console.log(pi.Str.real('@[1,"foo",3]'));
41
- pi.Cookie.set('foobar1', { foo: 'bar', pi: { nano: 'ui', kyoto: 'cms' } });
42
- console.log(pi.Cookie.get('foobar1', {}, 'object'));
43
- pi.Cookie.set('foobar2', ['foo', 'bar', 1], 60 * 60);
44
- console.log(pi.Cookie.get('foobar2', [], 'array'));
45
- pi.Cookie.set('foobar3', true);
46
- console.log(pi.Cookie.get('foobar3', false, 'boolean'));
47
- });
48
-
49
-
50
- })(window.pi);
51
- </script>
52
- </body>
53
- </html>
package/docs/element/ready.html DELETED
@@ -1,74 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
- <title>Nano JS Ready</title>
8
-
9
- <link rel="stylesheet" href="https://unpkg.com/backpack.css@2.0.0/lib/backpack.css">
10
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
11
- <link rel="stylesheet" href="../style.css">
12
-
13
- <!--[if IE ]>
14
- <script src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.append%2CElement.prototype.before%2CElement.prototype.classList%2CElement.prototype.closest%2CElement.prototype.matches%2CElement.prototype.prepend%2CElement.prototype.remove%2CNodeList.prototype.%40%40iterator%2CNodeList.prototype.forEach%2CNode.prototype.contains%2CMutationObserver%2CURL%2CElement%2CDocumentFragment%2CDocumentFragment.prototype.append%2CDocumentFragment.prototype.prepend%2CHTMLDocument%2Cdocument.querySelector%2Cdocument.getElementsByClassName%2Cdocument%2CgetComputedStyle%2CrequestAnimationFrame"></script>
15
- <![endif]-->
16
-
17
- <script src="../../../dist/pico-js.js"></script>
18
-
19
- </head>
20
- <body>
21
-
22
- <div id="app">
23
- <div js-test="foo: 'bar'; inview: true">
24
- <span>Hallo test!</span>
25
- </div>
26
- <div style="height: 2000px">
27
- <span>Spacer!</span>
28
- </div>
29
- <div js-test2="foo: 'bar'; inview: true">
30
- <span>Hallo test2!</span>
31
- </div>
32
- </div>
33
-
34
- <script>
35
- (function (pi) {
36
-
37
- 'use strict';
38
-
39
- pi.Dom.ready(function() {
40
-
41
- pi.Element.alias('test', function () {
42
- return {
43
- bind: function(el, options) {
44
- console.log('bind', el, options);
45
- },
46
- unbind: function(el, options) {
47
- console.log('unbind', el, options);
48
- }
49
- };
50
- });
51
-
52
- pi.Element.observe('test');
53
-
54
- pi.Element.alias('test2', function (el, options) {
55
-
56
- console.log('bind', el, options);
57
-
58
- this.unbind = function(el, options) {
59
- console.log('unbind', el, options);
60
- };
61
-
62
- return this;
63
- });
64
-
65
- pi.Element.observe('test2');
66
-
67
- });
68
-
69
-
70
-
71
- })(window.pi);
72
- </script>
73
- </body>
74
- </html>
package/docs/element/resizer.html DELETED
@@ -1,85 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
- <title>Nano UI Draggable</title>
8
-
9
- <link rel="stylesheet" href="https://unpkg.com/backpack.css@2.0.0/lib/backpack.css">
10
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
11
- <link rel="stylesheet" href="../../dist/index.legacy.css">
12
- <link rel="stylesheet" href="../style.css">
13
-
14
- <!--[if IE ]>
15
- <script src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.append%2CElement.prototype.before%2CElement.prototype.classList%2CElement.prototype.closest%2CElement.prototype.matches%2CElement.prototype.prepend%2CElement.prototype.remove%2CNodeList.prototype.%40%40iterator%2CNodeList.prototype.forEach%2CNode.prototype.contains%2CMutationObserver%2CURL%2CElement%2CDocumentFragment%2CDocumentFragment.prototype.append%2CDocumentFragment.prototype.prepend%2CHTMLDocument%2Cdocument.querySelector%2Cdocument.getElementsByClassName%2Cdocument%2CgetComputedStyle%2CrequestAnimationFrame"></script>
16
- <![endif]-->
17
-
18
- <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
19
- <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/2.0.5/velocity.min.js"></script>
20
- <script src="../../dist/index.js"></script>
21
-
22
- <style>
23
- .resizer {
24
- position: relative;
25
- width: 200px;
26
- height: 200px;
27
- background: #eee;
28
- }
29
-
30
- .resizer.resizer--horizontal .resizer__handle {
31
- cursor: col-resize;
32
- position: absolute;
33
- top: 0;
34
- right: 0;
35
- display: block;
36
- width: 20px;
37
- height: 100%;
38
- background: #555;
39
- }
40
-
41
- .resizer.resizer--vertical .resizer__handle {
42
- cursor: row-resize;
43
- position: absolute;
44
- bottom: 0;
45
- left: 0;
46
- display: block;
47
- width: 100%;
48
- height: 20px;
49
- background: #555;
50
- }
51
- </style>
52
-
53
- </head>
54
- <body>
55
-
56
- <div id="app">
57
- <div custom-resizer>
58
- <div>Hallo!</div>
59
- <div class="resizer__handle"></div>
60
- </div>
61
-
62
- <div js-resizer="resizeMode: vertical;">
63
- <div>Hallo!</div>
64
- <div class="resizer__handle"></div>
65
- </div>
66
- </div>
67
-
68
- <script>
69
- (function (Nano) {
70
-
71
- 'use strict';
72
-
73
- Nano.Element.observe('resizer');
74
-
75
- Nano.Element.bind('resizer', '[custom-resizer]', {
76
- onResizeEnd: (el) => {
77
- console.log(el, Nano.Dom.find(el).width());
78
- },
79
- test: 1321
80
- });
81
-
82
- })(window.Nano);
83
- </script>
84
- </body>
85
- </html>
package/docs/index.html DELETED
@@ -1,12 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
- <title>Document</title>
8
- </head>
9
- <body>
10
-
11
- </body>
12
- </html>
package/docs/library/map.html DELETED
@@ -1,312 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
- <title>Nano JS Ready</title>
8
-
9
- <link rel="stylesheet" href="https://unpkg.com/backpack.css@2.0.0/lib/backpack.css">
10
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
11
- <link rel="stylesheet" href="../style.css">
12
-
13
- <!--[if IE ]>
14
- <script src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.append%2CElement.prototype.before%2CElement.prototype.classList%2CElement.prototype.closest%2CElement.prototype.matches%2CElement.prototype.prepend%2CElement.prototype.remove%2CNodeList.prototype.%40%40iterator%2CNodeList.prototype.forEach%2CNode.prototype.contains%2CMutationObserver%2CURL%2CElement%2CDocumentFragment%2CDocumentFragment.prototype.append%2CDocumentFragment.prototype.prepend%2CHTMLDocument%2Cdocument.querySelector%2Cdocument.getElementsByClassName%2Cdocument%2CgetComputedStyle%2CrequestAnimationFrame"></script>
15
- <![endif]-->
16
-
17
- <script src="../../dist/pico-js.js"></script>
18
-
19
- <script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>
20
- <script src="https://maps.googleapis.com/maps/api/js"></script>
21
-
22
- </head>
23
- <body>
24
-
25
- <div id="app">
26
- <div id="map" style="width: 100%; height: 600px;"></div>
27
- <div id="directions"></div>
28
- <a href="javascript:void(0)" id="focusGroup0">Focus group 0</a>
29
- <a href="javascript:void(0)" id="focusGroup1">Focus group 1</a>
30
- <a href="javascript:void(0)" id="focusReset">Reset focus</a>
31
- <a href="javascript:void(0)" id="changeMarkerByAddress">Marker Address</a>
32
- <a href="javascript:void(0)" id="getDirections">Directions</a>
33
- </div>
34
-
35
- <script>
36
- (function (pi) {
37
-
38
- 'use strict';
39
-
40
- pi.Dom.ready(function() {
41
-
42
- pi.Map.setMapStyle([
43
- {
44
- "featureType": "all",
45
- "elementType": "geometry.fill",
46
- "stylers": [
47
- {
48
- "weight": "2.00"
49
- }
50
- ]
51
- },
52
- {
53
- "featureType": "all",
54
- "elementType": "geometry.stroke",
55
- "stylers": [
56
- {
57
- "color": "#9c9c9c"
58
- }
59
- ]
60
- },
61
- {
62
- "featureType": "all",
63
- "elementType": "labels.text",
64
- "stylers": [
65
- {
66
- "visibility": "on"
67
- }
68
- ]
69
- },
70
- {
71
- "featureType": "landscape",
72
- "elementType": "all",
73
- "stylers": [
74
- {
75
- "color": "#f2f2f2"
76
- }
77
- ]
78
- },
79
- {
80
- "featureType": "landscape",
81
- "elementType": "geometry.fill",
82
- "stylers": [
83
- {
84
- "color": "#ffffff"
85
- }
86
- ]
87
- },
88
- {
89
- "featureType": "landscape.man_made",
90
- "elementType": "geometry.fill",
91
- "stylers": [
92
- {
93
- "color": "#ffffff"
94
- }
95
- ]
96
- },
97
- {
98
- "featureType": "poi",
99
- "elementType": "all",
100
- "stylers": [
101
- {
102
- "visibility": "off"
103
- }
104
- ]
105
- },
106
- {
107
- "featureType": "road",
108
- "elementType": "all",
109
- "stylers": [
110
- {
111
- "saturation": -100
112
- },
113
- {
114
- "lightness": 45
115
- }
116
- ]
117
- },
118
- {
119
- "featureType": "road",
120
- "elementType": "geometry.fill",
121
- "stylers": [
122
- {
123
- "color": "#eeeeee"
124
- }
125
- ]
126
- },
127
- {
128
- "featureType": "road",
129
- "elementType": "labels.text.fill",
130
- "stylers": [
131
- {
132
- "color": "#7b7b7b"
133
- }
134
- ]
135
- },
136
- {
137
- "featureType": "road",
138
- "elementType": "labels.text.stroke",
139
- "stylers": [
140
- {
141
- "color": "#ffffff"
142
- }
143
- ]
144
- },
145
- {
146
- "featureType": "road.highway",
147
- "elementType": "all",
148
- "stylers": [
149
- {
150
- "visibility": "simplified"
151
- }
152
- ]
153
- },
154
- {
155
- "featureType": "road.arterial",
156
- "elementType": "labels.icon",
157
- "stylers": [
158
- {
159
- "visibility": "off"
160
- }
161
- ]
162
- },
163
- {
164
- "featureType": "transit",
165
- "elementType": "all",
166
- "stylers": [
167
- {
168
- "visibility": "off"
169
- }
170
- ]
171
- },
172
- {
173
- "featureType": "water",
174
- "elementType": "all",
175
- "stylers": [
176
- {
177
- "color": "#46bcec"
178
- },
179
- {
180
- "visibility": "on"
181
- }
182
- ]
183
- },
184
- {
185
- "featureType": "water",
186
- "elementType": "geometry.fill",
187
- "stylers": [
188
- {
189
- "color": "#c8d7d4"
190
- }
191
- ]
192
- },
193
- {
194
- "featureType": "water",
195
- "elementType": "labels.text.fill",
196
- "stylers": [
197
- {
198
- "color": "#070707"
199
- }
200
- ]
201
- },
202
- {
203
- "featureType": "water",
204
- "elementType": "labels.text.stroke",
205
- "stylers": [
206
- {
207
- "color": "#ffffff"
208
- }
209
- ]
210
- }
211
- ]);
212
-
213
- var lat = pi.Num.random(1000, 2000) / 100;
214
- var lng = pi.Num.random(1000, 2000) / 100;
215
-
216
- var map = new pi.Map('#map', {
217
- lat: lat, lng: lng
218
- });
219
-
220
- map.clusterMarkers({ gridSize: 20 });
221
-
222
- pi.Map.setMarkerStyle('default', {
223
- default: 'https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678111-map-marker-512.png',
224
- hover: 'https://static.thenounproject.com/png/462-200.png',
225
- active: 'https://cdn4.iconfinder.com/data/icons/small-n-flat/24/map-marker-512.png'
226
- });
227
-
228
- var mainMarker = map.createMarker(null, {
229
- lat: lat, lng: lng, html: `<h4>Home Marker</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>`
230
- });
231
-
232
- pi.Arr.each(pi.Arr.make(60), function (index) {
233
-
234
- var lat = pi.Num.random(1000, 2000) / 100;
235
- var lng = pi.Num.random(1000, 2000) / 100;
236
-
237
- var html = `<h4>Marker ${index}</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>`;
238
-
239
- var groups = [
240
- pi.Num.random(0, 1) ? 'group1' : 'group0'
241
- ];
242
-
243
- map.createMarker(null, {
244
- lat: lat, lng: lng, html: html, groups: groups
245
- });
246
-
247
- });
248
-
249
- map.focusMarkers();
250
-
251
- pi.Dom.find('#focusGroup0').on('click', function () {
252
- map.showMarkers(function (item) {
253
- return pi.Arr.has(item.extras.groups, 'group0');
254
- }).focusMarkers();
255
- });
256
-
257
- pi.Dom.find('#focusGroup1').on('click', function () {
258
- map.showMarkers(function (item) {
259
- return pi.Arr.has(item.extras.groups, 'group1');
260
- }).focusMarkers();
261
- });
262
-
263
- pi.Dom.find('#focusReset').on('click', function () {
264
- map.showMarkers().focusMarkers();
265
- });
266
-
267
- pi.Dom.find('#changeMarkerByAddress').on('click', function () {
268
-
269
- let success = function () {
270
- map.focusMarkers();
271
- };
272
-
273
- let error = function () {
274
- console.log('NOO');
275
- };
276
-
277
- map.setMarkerByAddress(mainMarker.key, 'Hamburg').then(success, error);
278
- });
279
-
280
- pi.Dom.find('#getDirections').on('click', function () {
281
-
282
- let success = function () {
283
- console.log('YES');
284
- };
285
-
286
- let error = function () {
287
- console.log('NOO');
288
- };
289
-
290
- map.renderDirections({
291
- origin: 'Lübeck', destination: 'Hamburg', panel: '#directions'
292
- }).then(success, error);
293
- });
294
-
295
- // var marker = map.createMarker(null, {
296
- // lat: 11.26373, lng: 108.62004, group: 'test'
297
- // });
298
-
299
- // map.toggleMarker(marker.key);
300
- //
301
- // pi.Any.delay(function () {
302
- // map.toggleMarker(marker.key);
303
- //
304
- // console.log(marker);
305
- // }, 1500);
306
-
307
- }, 1500);
308
-
309
- })(window.pi);
310
- </script>
311
- </body>
312
- </html>
package/docs/store.html DELETED
@@ -1,80 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
- <title>Nano JS Ready</title>
8
-
9
- <link rel="stylesheet" href="https://unpkg.com/backpack.css@2.0.0/lib/backpack.css">
10
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
11
- <link rel="stylesheet" href="../style.css">
12
-
13
- <!--[if IE ]>
14
- <script src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.append%2CElement.prototype.before%2CElement.prototype.classList%2CElement.prototype.closest%2CElement.prototype.matches%2CElement.prototype.prepend%2CElement.prototype.remove%2CNodeList.prototype.%40%40iterator%2CNodeList.prototype.forEach%2CNode.prototype.contains%2CMutationObserver%2CURL%2CElement%2CDocumentFragment%2CDocumentFragment.prototype.append%2CDocumentFragment.prototype.prepend%2CHTMLDocument%2Cdocument.querySelector%2Cdocument.getElementsByClassName%2Cdocument%2CgetComputedStyle%2CrequestAnimationFrame"></script>
15
- <![endif]-->
16
-
17
- <script src="../../dist/pico-js.js"></script>
18
-
19
- </head>
20
- <body>
21
-
22
- <div id="app">
23
- <div js-test="foo: 'bar';">
24
- <span>Hallo!</span>
25
- </div>
26
- <div js-ready="duration: 200;">
27
- <span>Hallo!</span>
28
- </div>
29
- </div>
30
-
31
- <script>
32
- (function (Nano) {
33
-
34
- 'use strict';
35
-
36
- Nano.Dom.ready(function() {
37
-
38
- // Add store with setter function, so you can call an ajax instance and apply the setter
39
- Nano.Store.add('testdata', function (setter) {
40
- Nano.Any.delay(function() {
41
- setter([123,321]);
42
- }, 1500);
43
- });
44
-
45
-
46
- Nano.Event.bind('store/fetch:testdata' ,function () {
47
- console.log('fetching started');
48
- });
49
-
50
- Nano.Event.bind('store/fetched:testdata' ,function () {
51
- console.log('fetching ended');
52
- });
53
-
54
- // Clear storage so at next request data will be fresh
55
- //Nano.Store.clear('testdata');
56
-
57
- // Add listener
58
- let storeGetter = Nano.Store.get('testdata', function (data) {
59
- console.log(data);
60
- });
61
-
62
- // Add listener
63
- let errorGetter = Nano.Store.get('givemeaerror', function (data) {
64
- console.log(data);
65
- });
66
-
67
- // Refresh storage and submit update
68
-
69
- Nano.Any.delay(function () {
70
- Nano.Store.refresh('testdata');
71
- }, 4000);
72
-
73
- });
74
-
75
-
76
-
77
- })(window.Nano);
78
- </script>
79
- </body>
80
- </html>