@kizmann/pico-js 0.3.24 → 0.3.27
Sign up to get free protection for your applications and to get access to all the features.
- 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 +70 -24
- package/src/utility/dom.js +21 -0
- package/src/utility/object.js +8 -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,34 +68,41 @@ 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
|
-
new instance(el.get(0), options).unbind();
|
|
82
|
+
let callback = (el, options) => {
|
|
78
83
|
|
|
79
|
-
|
|
80
|
-
|
|
84
|
+
let cb = el.data(prefix);
|
|
85
|
+
|
|
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
|
*/
|
|
88
|
-
static observe(key)
|
|
105
|
+
static observe(key, plain = false)
|
|
89
106
|
{
|
|
90
107
|
let selector = this.getPrefix(key);
|
|
91
108
|
|
|
@@ -96,20 +113,49 @@ 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 }) => {
|
|
104
124
|
|
|
105
125
|
let options = Str.objectify(
|
|
106
126
|
Dom.find(el).attr(selector)
|
|
107
127
|
);
|
|
108
128
|
|
|
109
|
-
|
|
129
|
+
if ( plain && Any.isEmpty(options) ) {
|
|
130
|
+
options = { _plain: Dom.find(el).attr(selector) };
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
if ( document.body.contains(el) ) {
|
|
134
|
+
return;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
return this.unbind(key, el, options)
|
|
110
138
|
});
|
|
111
139
|
|
|
112
|
-
|
|
140
|
+
Dom.find(`[${selector}]:not(.${mounted})`).each((el) => {
|
|
141
|
+
|
|
142
|
+
let options = Str.objectify(
|
|
143
|
+
Dom.find(el).attr(selector)
|
|
144
|
+
);
|
|
145
|
+
|
|
146
|
+
if ( plain && Any.isEmpty(options) ) {
|
|
147
|
+
options = { _plain: Dom.find(el).attr(selector) };
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
this.bind(key, el, options);
|
|
151
|
+
});
|
|
152
|
+
|
|
153
|
+
};
|
|
154
|
+
|
|
155
|
+
Dom.find(document.body).observer(callback)
|
|
156
|
+
(document.body, options);
|
|
157
|
+
|
|
158
|
+
Dom.find(document.body).on('dom.change', callback);
|
|
113
159
|
|
|
114
160
|
return this;
|
|
115
161
|
}
|
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 ) {
|
package/src/utility/object.js
CHANGED
|
@@ -27,6 +27,10 @@ export class Obj
|
|
|
27
27
|
keys = keys.join('.');
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
+
if ( obj[keys] !== undefined ) {
|
|
31
|
+
return obj[keys];
|
|
32
|
+
}
|
|
33
|
+
|
|
30
34
|
if ( ! Any.isString(keys) ) {
|
|
31
35
|
keys = keys.toString();
|
|
32
36
|
}
|
|
@@ -60,6 +64,10 @@ export class Obj
|
|
|
60
64
|
keys = keys.toString();
|
|
61
65
|
}
|
|
62
66
|
|
|
67
|
+
if ( obj[keys] !== undefined ) {
|
|
68
|
+
obj[keys] = val; return obj;
|
|
69
|
+
}
|
|
70
|
+
|
|
63
71
|
keys = keys.split('.');
|
|
64
72
|
|
|
65
73
|
let index = 0, length = keys.length, nested = obj;
|