@kizmann/pico-js 0.3.24 → 0.3.25
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/dist/pico-js.js +1 -1
- package/dist/pico-js.js.map +1 -1
- package/docs/element/ready.html +28 -12
- package/package.json +1 -1
- package/src/library/element.js +61 -23
- package/src/utility/dom.js +21 -0
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="
|
|
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-
|
|
26
|
+
<div js-test2="foo: 'bar';">
|
|
27
27
|
<span>Hallo!</span>
|
|
28
28
|
</div>
|
|
29
29
|
</div>
|
|
30
30
|
|
|
31
31
|
<script>
|
|
32
|
-
(function (
|
|
32
|
+
(function (pi) {
|
|
33
33
|
|
|
34
34
|
'use strict';
|
|
35
35
|
|
|
36
|
-
|
|
36
|
+
pi.Dom.ready(function() {
|
|
37
37
|
|
|
38
|
-
|
|
39
|
-
|
|
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
|
-
|
|
49
|
+
pi.Element.observe('test');
|
|
43
50
|
|
|
44
|
-
|
|
45
|
-
Nano.Element.bind('ready', '[js-custom]', { duration: 2500 });
|
|
46
|
-
}, 2500);
|
|
51
|
+
pi.Element.alias('test2', function (el, options) {
|
|
47
52
|
|
|
48
|
-
|
|
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.
|
|
68
|
+
})(window.pi);
|
|
53
69
|
</script>
|
|
54
70
|
</body>
|
|
55
71
|
</html>
|
package/package.json
CHANGED
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,
|
|
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,
|
|
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
|
-
|
|
82
|
+
let callback = (el, options) => {
|
|
83
|
+
|
|
84
|
+
let cb = el.data(prefix);
|
|
78
85
|
|
|
79
|
-
|
|
80
|
-
|
|
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
|
-
|
|
116
|
+
let callback = () => {
|
|
100
117
|
|
|
101
118
|
let mounted = Element.getPrefix(key);
|
|
102
119
|
|
|
103
|
-
|
|
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
|
-
}
|
|
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,6 +728,25 @@ export class Dom
|
|
|
726
728
|
}
|
|
727
729
|
}
|
|
728
730
|
|
|
731
|
+
data(key = undefined, val = undefined, fallback = null)
|
|
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
|
+
|
|
729
750
|
value(val = undefined)
|
|
730
751
|
{
|
|
731
752
|
if ( val === undefined ) {
|