@kizmann/pico-js 0.4.4 → 0.4.6
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 +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 = {};
|