@kizmann/pico-js 0.4.4 → 0.4.6
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 +7 -4
- package/package.json +1 -1
- package/src/index.js +10 -0
- package/src/library/element.js +43 -1
- package/src/utility/dom.js +5 -4
- package/src/utility/object.js +9 -0
package/docs/element/ready.html
CHANGED
|
@@ -20,11 +20,14 @@
|
|
|
20
20
|
<body>
|
|
21
21
|
|
|
22
22
|
<div id="app">
|
|
23
|
-
<div js-test="foo: 'bar';">
|
|
24
|
-
<span>Hallo!</span>
|
|
23
|
+
<div js-test="foo: 'bar'; inview: true">
|
|
24
|
+
<span>Hallo test!</span>
|
|
25
25
|
</div>
|
|
26
|
-
<div
|
|
27
|
-
<span>
|
|
26
|
+
<div style="height: 2000px">
|
|
27
|
+
<span>Spacer!</span>
|
|
28
|
+
</div>
|
|
29
|
+
<div js-test2="foo: 'bar'; inview: true">
|
|
30
|
+
<span>Hallo test2!</span>
|
|
28
31
|
</div>
|
|
29
32
|
</div>
|
|
30
33
|
|
package/package.json
CHANGED
package/src/index.js
CHANGED
|
@@ -85,4 +85,14 @@ if ( typeof global.pi === 'undefined' && global.navigator ) {
|
|
|
85
85
|
global.pi = Pico;
|
|
86
86
|
}
|
|
87
87
|
|
|
88
|
+
global.pi.Dom.ready(function () {
|
|
89
|
+
|
|
90
|
+
// Apply dom scroll event
|
|
91
|
+
document.addEventListener("scroll",
|
|
92
|
+
global.pi.Element.scroll);
|
|
93
|
+
|
|
94
|
+
// Apply initial scroll event
|
|
95
|
+
global.pi.Element.scroll();
|
|
96
|
+
});
|
|
97
|
+
|
|
88
98
|
export default Pico;
|
package/src/library/element.js
CHANGED
|
@@ -22,6 +22,25 @@ export class Element
|
|
|
22
22
|
*/
|
|
23
23
|
static runs = [];
|
|
24
24
|
|
|
25
|
+
/**
|
|
26
|
+
* Instance storage.
|
|
27
|
+
*/
|
|
28
|
+
static invi = [];
|
|
29
|
+
|
|
30
|
+
static scroll()
|
|
31
|
+
{
|
|
32
|
+
Arr.each(this.invi, (item, index) => {
|
|
33
|
+
|
|
34
|
+
if ( ! Dom.find(item.el).inviewY() ) {
|
|
35
|
+
return;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
Arr.removeIndex(this.invi, index);
|
|
39
|
+
|
|
40
|
+
item.cb();
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
|
|
25
44
|
/**
|
|
26
45
|
* Bind a class on selector.
|
|
27
46
|
*/
|
|
@@ -56,6 +75,7 @@ export class Element
|
|
|
56
75
|
el: el.get(0), prefix: prefix, deamon: cb
|
|
57
76
|
});
|
|
58
77
|
|
|
78
|
+
|
|
59
79
|
el.data(prefix, cb);
|
|
60
80
|
|
|
61
81
|
return cb.bind !== undefined ?
|
|
@@ -130,6 +150,12 @@ export class Element
|
|
|
130
150
|
options = { _plain: Dom.find(el).attr(selector) };
|
|
131
151
|
}
|
|
132
152
|
|
|
153
|
+
let inview = Obj.pluck(options, 'inview', false);
|
|
154
|
+
|
|
155
|
+
if ( inview ) {
|
|
156
|
+
Arr.remove(this.invi, { el });
|
|
157
|
+
}
|
|
158
|
+
|
|
133
159
|
if ( document.body.contains(el) ) {
|
|
134
160
|
return;
|
|
135
161
|
}
|
|
@@ -147,7 +173,13 @@ export class Element
|
|
|
147
173
|
options = { _plain: Dom.find(el).attr(selector) };
|
|
148
174
|
}
|
|
149
175
|
|
|
150
|
-
|
|
176
|
+
let inview = Obj.pluck(options, 'inview', false);
|
|
177
|
+
|
|
178
|
+
let bindCb = () => {
|
|
179
|
+
this.bind(key, el, options);
|
|
180
|
+
};
|
|
181
|
+
|
|
182
|
+
inview ? this.bindInview(el, bindCb) : bindCb();
|
|
151
183
|
});
|
|
152
184
|
|
|
153
185
|
};
|
|
@@ -160,6 +192,16 @@ export class Element
|
|
|
160
192
|
return this;
|
|
161
193
|
}
|
|
162
194
|
|
|
195
|
+
static bindInview(el, cb)
|
|
196
|
+
{
|
|
197
|
+
Arr.add(this.invi, { el, cb }, { el });
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
static unbindInview(el, cb)
|
|
201
|
+
{
|
|
202
|
+
Arr.remove(this.invi, { el, cb }, { el });
|
|
203
|
+
}
|
|
204
|
+
|
|
163
205
|
|
|
164
206
|
|
|
165
207
|
/**
|
package/src/utility/dom.js
CHANGED
|
@@ -31,7 +31,7 @@ export class Dom
|
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
if ( delay !== 0 && (ready === false || count <= delay) ) {
|
|
34
|
-
setTimeout(() => Dom.ready(callback, delay, count +
|
|
34
|
+
setTimeout(() => Dom.ready(callback, delay, count + 50), 50);
|
|
35
35
|
return this;
|
|
36
36
|
}
|
|
37
37
|
|
|
@@ -42,15 +42,16 @@ export class Dom
|
|
|
42
42
|
|
|
43
43
|
static complete(callback, delay = 0, count = 0)
|
|
44
44
|
{
|
|
45
|
-
let ready = document.readyState === 'complete'
|
|
45
|
+
let ready = document.readyState === 'complete' ||
|
|
46
|
+
document.readyState === 'interactive';
|
|
46
47
|
|
|
47
48
|
if ( delay === 0 && (ready === false || count < delay) ) {
|
|
48
|
-
Dom.find(document).on('
|
|
49
|
+
Dom.find(document).on('load', callback);
|
|
49
50
|
return this;
|
|
50
51
|
}
|
|
51
52
|
|
|
52
53
|
if ( delay !== 0 && (ready === false || count < delay) ) {
|
|
53
|
-
setTimeout(() => Dom.ready(callback, delay, count +
|
|
54
|
+
setTimeout(() => Dom.ready(callback, delay, count + 50), 50);
|
|
54
55
|
return this;
|
|
55
56
|
}
|
|
56
57
|
|
package/src/utility/object.js
CHANGED
|
@@ -158,6 +158,15 @@ export class Obj
|
|
|
158
158
|
return this.unset(obj[key], keys);
|
|
159
159
|
}
|
|
160
160
|
|
|
161
|
+
static pluck(obj, keys, fallback = null)
|
|
162
|
+
{
|
|
163
|
+
let value = this.get(obj, keys, fallback);
|
|
164
|
+
|
|
165
|
+
this.unset(obj, keys);
|
|
166
|
+
|
|
167
|
+
return value;
|
|
168
|
+
}
|
|
169
|
+
|
|
161
170
|
static only(obj, keys, assign = null)
|
|
162
171
|
{
|
|
163
172
|
let result = {};
|