@kizmann/pico-js 0.5.4 → 1.0.0

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": "@kizmann/pico-js",
3
- "version": "0.5.4",
3
+ "version": "1.0.0",
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
  }
@@ -281,15 +281,23 @@ export class Obj
281
281
 
282
282
  static filter(obj, filter)
283
283
  {
284
- return Obj.each(Obj.filterIndex(obj, filter), (key) => {
285
- return obj[key];
284
+ let result = {};
285
+
286
+ Obj.each(Obj.filterIndex(obj, filter), (key) => {
287
+ result[key] = obj[key];
286
288
  });
289
+
290
+ return result;
287
291
  }
288
292
 
289
293
  static filterIndex(obj, filter)
290
294
  {
291
295
  return Any.keys(obj).filter((key) => {
292
296
 
297
+ if ( typeof filter === "undefined" ) {
298
+ return Any.isEmpty(obj[key]);
299
+ }
300
+
293
301
  if ( Any.isFunction(filter) ) {
294
302
  return filter.call({}, obj[key], key);
295
303
  }
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>
@@ -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>
@@ -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>
@@ -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>