@kizmann/pico-js 0.3.24 → 0.3.27
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 +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;
|