@kizmann/pico-js 0.3.22 → 0.3.25

Sign up to get free protection for your applications and to get access to all the features.
Files changed (7) hide show
  1. package/dist/pico-js.js +1 -1
  2. package/dist/pico-js.js.map +1 -1
  3. package/docs/element/ready.html +28 -12
  4. package/package.json +1 -1
  5. package/src/library/element.js +61 -23
  6. package/src/utility/dom.js +26 -1
  7. package/src/utility/object.js +2 -2
package/docs/element/ready.html CHANGED
@@ -14,7 +14,7 @@
14
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
15
  <![endif]-->
16
16
 
17
- <script src="../../dist/pico-js.js"></script>
17
+ <script src="../../../dist/pico-js.js"></script>
18
18
 
19
19
  </head>
20
20
  <body>
@@ -23,33 +23,49 @@
23
23
  <div js-test="foo: 'bar';">
24
24
  <span>Hallo!</span>
25
25
  </div>
26
- <div js-ready="duration: 200;">
26
+ <div js-test2="foo: 'bar';">
27
27
  <span>Hallo!</span>
28
28
  </div>
29
29
  </div>
30
30
 
31
31
  <script>
32
- (function (Nano) {
32
+ (function (pi) {
33
33
 
34
34
  'use strict';
35
35
 
36
- Nano.Dom.ready(function() {
36
+ pi.Dom.ready(function() {
37
37
 
38
- Nano.Element.alias('test', function(el, options) {
39
- console.log(el, options);
38
+ pi.Element.alias('test', function () {
39
+ return {
40
+ bind: function(el, options) {
41
+ console.log('bind', el, options);
42
+ },
43
+ unbind: function(el, options) {
44
+ console.log('unbind', el, options);
45
+ }
46
+ };
40
47
  });
41
48
 
42
- Nano.Element.observe('test');
49
+ pi.Element.observe('test');
43
50
 
44
- Nano.Any.delay(() => {
45
- Nano.Element.bind('ready', '[js-custom]', { duration: 2500 });
46
- }, 2500);
51
+ pi.Element.alias('test2', function (el, options) {
47
52
 
48
- }, 1500);
53
+ console.log('bind', el, options);
54
+
55
+ this.unbind = function(el, options) {
56
+ console.log('unbind', el, options);
57
+ };
58
+
59
+ return this;
60
+ });
61
+
62
+ pi.Element.observe('test2');
63
+
64
+ });
49
65
 
50
66
 
51
67
 
52
- })(window.Nano);
68
+ })(window.pi);
53
69
  </script>
54
70
  </body>
55
71
  </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kizmann/pico-js",
3
- "version": "0.3.22",
3
+ "version": "0.3.25",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "author": "Eduard Kizmann <kizmann@protonmail.ch>",
package/src/library/element.js CHANGED
@@ -1,4 +1,4 @@
1
- import { Str, Obj, Dom, Any } from "../index";
1
+ import { Str, Obj, Dom, Any, Arr } from "../index";
2
2
 
3
3
  export class Element
4
4
  {
@@ -17,6 +17,11 @@ export class Element
17
17
  */
18
18
  static inis = {};
19
19
 
20
+ /**
21
+ * Runtime storage.
22
+ */
23
+ static runs = [];
24
+
20
25
  /**
21
26
  * Bind a class on selector.
22
27
  */
@@ -29,14 +34,13 @@ export class Element
29
34
 
30
35
  static bind(key, selector, options = {})
31
36
  {
32
- let el = Dom.find(selector);
37
+ let el = Dom.find(selector), prefix = this.getPrefix(key);
33
38
 
34
39
  // Add mounted class
35
- el.addClass(
36
- this.getPrefix(key)
37
- );
40
+ el.addClass(prefix);
38
41
 
39
- let instance = Obj.get(this.inis, key, null);
42
+ let instance = Obj.get(this.inis,
43
+ key, null);
40
44
 
41
45
  if ( Any.isEmpty(instance) ) {
42
46
  return console.error(`Element "${key}" is not defined.`);
@@ -48,8 +52,14 @@ export class Element
48
52
  el.get(0), options
49
53
  );
50
54
 
55
+ Element.runs.push({
56
+ el: el.get(0), prefix: prefix, deamon: cb
57
+ });
58
+
59
+ el.data(prefix, cb);
60
+
51
61
  return cb.bind !== undefined ?
52
- cb.bind() : cb;
62
+ cb.bind(el.get(0), options) : cb;
53
63
  };
54
64
 
55
65
  // Bind option
@@ -58,30 +68,37 @@ export class Element
58
68
  return this;
59
69
  }
60
70
 
61
- static unbind()
71
+ static unbind(key, selector, options = {})
62
72
  {
63
- let el = Dom.find(selector);
64
-
65
- // Add mounted class
66
- el.removeClass(
67
- this.getPrefix(key)
68
- );
73
+ let el = Dom.find(selector), prefix = this.getPrefix(key);
69
74
 
70
- let instance = Obj.get(this.inis, key, null);
75
+ let instance = Obj.get(this.inis,
76
+ key, null);
71
77
 
72
78
  if ( Any.isEmpty(instance) ) {
73
79
  return console.error(`Element "${key}" is not defined.`);
74
80
  }
75
81
 
76
- let callback = (el, options) =>
77
- new instance(el.get(0), options).unbind();
82
+ let callback = (el, options) => {
83
+
84
+ let cb = el.data(prefix);
78
85
 
79
- // Bind option
80
- callback.call({}, el, {});
86
+ if ( cb.unbind === undefined ) {
87
+ return;
88
+ }
89
+
90
+ return cb.unbind(el.get(0), options);
91
+ };
92
+
93
+ // Unbind option
94
+ callback.call({}, el, options);
95
+
96
+ Arr.remove(Element.runs, { el: el.get(0) });
81
97
 
82
98
  return this;
83
99
  }
84
100
 
101
+
85
102
  /**
86
103
  * Bind callback on selector.
87
104
  */
@@ -96,20 +113,41 @@ export class Element
96
113
  attributeFilter: [selector]
97
114
  };
98
115
 
99
- Dom.find(document.body).observer(() => {
116
+ let callback = () => {
100
117
 
101
118
  let mounted = Element.getPrefix(key);
102
119
 
103
- Dom.find('[' + selector + ']:not(.' + mounted + ')').each((el) => {
120
+ let deamons = Arr.filter(this.runs,
121
+ { prefix: selector });
122
+
123
+ Arr.each(deamons, ({ el }) => {
124
+
125
+ let options = Str.objectify(
126
+ Dom.find(el).attr(selector)
127
+ );
128
+
129
+ if ( document.body.contains(el) ) {
130
+ return;
131
+ }
132
+
133
+ return this.unbind(key, el, options)
134
+ });
135
+
136
+ Dom.find(`[${selector}]:not(.${mounted})`).each((el) => {
104
137
 
105
138
  let options = Str.objectify(
106
139
  Dom.find(el).attr(selector)
107
140
  );
108
141
 
109
- this.bind(key, el, options)
142
+ this.bind(key, el, options);
110
143
  });
111
144
 
112
- })(document.body, options);
145
+ };
146
+
147
+ Dom.find(document.body).observer(callback)
148
+ (document.body, options);
149
+
150
+ Dom.find(document.body).on('dom.change', callback);
113
151
 
114
152
  return this;
115
153
  }
package/src/utility/dom.js CHANGED
@@ -10,6 +10,8 @@ export class Dom
10
10
 
11
11
  static events = [];
12
12
 
13
+ static datas = [];
14
+
13
15
  constructor(el)
14
16
  {
15
17
  if ( el instanceof NodeList ) {
@@ -726,8 +728,31 @@ export class Dom
726
728
  }
727
729
  }
728
730
 
729
- value(val)
731
+ data(key = undefined, val = undefined, fallback = null)
730
732
  {
733
+ let match = Arr.find(Dom.datas, { el: this.get(0) },
734
+ { el: this.get(0) });
735
+
736
+ if ( key === undefined ) {
737
+ return match;
738
+ }
739
+
740
+ if ( val === undefined ) {
741
+ return Obj.get(match, key, fallback);
742
+ }
743
+
744
+ Arr.replace(Dom.datas, Obj.set(match, key, val),
745
+ { el: this.get(0) });
746
+
747
+ return this;
748
+ }
749
+
750
+ value(val = undefined)
751
+ {
752
+ if ( val === undefined ) {
753
+ return this.get(0).value;
754
+ }
755
+
731
756
  this.each((el) => el.value = val);
732
757
 
733
758
  return this;
package/src/utility/object.js CHANGED
@@ -39,11 +39,11 @@ export class Obj
39
39
  return fallback;
40
40
  }
41
41
 
42
- while (obj !== undefined && index < length) {
42
+ while (obj !== undefined && obj !== null && index < length) {
43
43
  obj = obj[keys[index++]];
44
44
  }
45
45
 
46
- if ( typeof obj === 'undefined' ) {
46
+ if ( obj === undefined || obj === null) {
47
47
  return fallback;
48
48
  }
49
49