/
domit.js
366 lines (330 loc) · 11.2 KB
/
domit.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
/*! domit - v1.0.0
* https://github.com/trentrichardson/domit
* Copyright (c) 2015 Trent Richardson; Licensed MIT */
(function() {
"use strict";
/**
* @var _ A utility object for internal use only.
*/
var _ = {
/**
* @var bool - use animations or not (useful for testng)
*/
fx: true,
/**
* query - query the document for elements
* @param selector String - css selector
* @param scope Element - Dom element to search from
* @return Class - selector class with properties to manipulate collection of elements
*/
query: function(selector, scope){
/**
* Sel - a mini selector object with built in methods to traverse nodes
* @param selector String, NodeList, Node - css selector, a node list, or a single element
* @param scope Element - Dom element to search from
* @return Class - selector class with properties to manipulate collection of elements
*/
var Sel = function(selector, scope){
var nl;
this.scope = scope || document;
this.nodes=[];
if(typeof selector === 'string'){ // either an html string or css selector
nl = (selector[0] === '<') ? (function(){
var dv = document.createElement('div');
dv.innerHTML = selector;
return document.createDocumentFragment().appendChild(dv).childNodes;
})() : this.scope.querySelectorAll(selector);
}
else{ // a Node or NodeList was passed in
nl = selector.length !== undefined ? selector : [selector];
}
// convert the nodelist to a native array
for(var i = nl.length; i--; this.nodes.unshift(nl[i])){}
this.length = this.nodes.length;
return this;
};
/**
* Sel.find - selector functionality for the current collection of nodes
* @param selector String - css selector
* @return Class - returns a new Sel class instance of found nodes
*/
Sel.prototype.find = function(selector){
return new Sel(selector, this.nodes[0]);
};
/**
* Sel.attach - attach the collection of elements to a parent element
* @param parent Node - an html node element to attach to
* @param how String - append or prepend
* @param where Node - Node to insert the new node before
* @return Class - returns a new Sel class instance of found nodes or null
*/
Sel.prototype.attach = function(parent, how, where){
var t = this, j;
return t.each(function(i,el){
j = how === 'append'? parent.appendChild(el) : parent.insertBefore(el, where || parent.firstChild);
});
};
/**
* Sel.neighbor - get the sibling element, not necessarily in the Sel collection but the overall dom
* @param where String - previous or next
* @return Class - returns a new Sel class instance of found nodes or null
*/
Sel.prototype.neighbor = function(where){
return new Sel(this.nodes[0][where +'Sibling']);
};
/**
* Sel.each - loop over each element in the collection
* @param fn Function - the callback function for each node
* @return Class - returns this Sel class instance
*/
Sel.prototype.each = function(fn){
var t = this;
for(var i=0; i<t.nodes.length; i++){
fn.apply(t.nodes[i], [i, t.nodes[i]]);
}
return t;
};
/**
* Sel.data - get/set the data properties on all nodes in collection
* @param props String, Object - string of property name to get, a hash of key/values to set
* @return Class - returns this Sel class instance or value when using get
*/
Sel.prototype.data = function(props){
return (typeof props === 'string' && this.nodes.length > 0) ?
this.nodes[0].getAttribute('data-'+props) :
this.each(function(i, el){
for(var k in props){
if(props.hasOwnProperty(k)){
el.setAttribute('data-'+k, props[k]);
}
}
});
};
/**
* Sel.offset - get the offset of an element from the overall document x/y
* @return Object - {x: 123, y: 123} relative to the document, not the parent
*/
Sel.prototype.offset = function(){
var el = this.nodes[0],
ret = { x:0, y:0 };
do {
ret.x += isNaN(el.offsetLeft) ? 0 : el.offsetLeft;
ret.y += isNaN(el.offsetTop) ? 0 : el.offsetTop;
} while(el = el.offsetParent);
return ret;
};
/**
* Sel.css - get/set the css properties on all nodes in collection
* @param props String, Object - string of property name to get, a hash of key/values to set
* @return Class - returns this Sel class instance or value when using get
*/
Sel.prototype.css = function(props){
return (typeof props === 'string' && this.nodes.length > 0) ?
this.nodes[0].style[props] :
this.each(function(i, el){
for(var k in props){
if(props.hasOwnProperty(k)){
el.style[k] = props[k];
}
}
});
};
/**
* Sel.class - work with class names on all nodes in collection
* @param action String - has, add, delete
* @param cls String - the class name to add, delete, has
* @return Class/Boolean - returns this Sel class instance, when action="has" will return boolean
*/
Sel.prototype.cls = function(action, cls){
var findre = new RegExp("\\b"+ cls +"\\b", 'i');
return action === 'has' ?
findre.test(this.nodes[0].className) :
this.each(function(i, el){
el.className = el.className.replace(findre, " ");
if(action === 'add'){
el.className += ' '+ cls;
}
});
};
/**
* animate the collection of elements
* @param props Object - key/value pairs of css properties to animate to
* @param duration Int - milliseconds to animate
* @param fn Function - callback when done
* @return Class - returns this Sel class instance
*/
Sel.prototype.animate = function(props, duration, fn){
var raf,
t = this,
start,
progress,
percent,
fromprops={},
animloop = function(time){
var tmp = {};
start = start || time;
progress = time - start;
percent = duration === 0 ? 1 : (progress / duration);
for(var k in fromprops){
tmp[k] = (props[k]-fromprops[k]) * percent;
}
t.css(tmp);
if(progress < duration){
window.requestAnimationFrame(animloop);
}
else{
window.cancelAnimationFrame(raf);
t.css(props);
if(fn){fn.call(t);}
}
};
for(var k in props){
fromprops[k] = t.css(k) || 0;
}
// we need to look for an animation flag so this can be turned off
if(_.fx || duration > 0){
raf = window.requestAnimationFrame(animloop);
}
else{
t.css(props);
if(fn){fn.call(t);}
}
return this;
};
/**
* Sel.serialize - serialize the collection's form fields into an object
* @return Object - keys are field names, values are field values
*/
Sel.prototype.serialize = function(){
var ret = {};
this.find('input,select,textarea,button').each(function(i,el){
var n = el.name,
v = el.value,
tag = el.tagName.toLowerCase();
// checkboxes are always an array, only append if checked
if(tag === 'input' && el.type === 'checkbox'){
ret[n] = ret[n] || [];
if(el.checked){
ret[n].push(v);
}
}
// radio is never an array, set only if checked
else if(tag === 'input' && el.type === 'radio'){
if(el.checked){
ret[n] = v;
}
}
// select multiple is always an array, append only selected options
else if(tag === 'select' && el.multiple){
ret[n] = [];
new Sel('option[selected]',el).each(function(i,oel){
ret[n].push(oel.value);
});
}
// else standard input or select, convert to array if mulple with same name
else{
if(typeof ret[n] === 'object'){
ret[n].push(v);
}
else if(ret[n] !== undefined){
ret[n] = [ret[n], v];
}
else{
ret[n] = v;
}
}
});
return ret;
};
/**
* Sel.on - attach an event to the node collection
* @param type String - name of the event to attach
* @param fn Function - the event handler function
* @return Class - returns this Sel class instance
*/
Sel.prototype.on = function(type, fn){
return this.each(function(i, el){
el[ el.addEventListener? 'addEventListener' : 'attachEvent'](type, fn, (type === 'blur' || type === 'focus'));
});
};
/**
* Sel.off - remove an event from the node collection
* @param type String - name of the event to attach
* @param fn Function - the event handler function
* @return Class - returns this Sel class instance
*/
Sel.prototype.off = function(type, fn){
return this.each(function(i, el){
el[ el.removeEventListener? 'removeEventListener' : 'detachEvent'](type, fn, (type === 'blur' || type === 'focus'));
});
};
/**
* Sel.trigger - trigger an event to the node collection
* @param type Event/string - name of the event trigger or an Event object
* @param isCustom bool - whether this is a custom event or native
* @return Class - returns this Sel class instance
*/
Sel.prototype.trigger = function(ev, isCustom){
var j;
ev = (typeof ev === 'string')? _.event(ev) : ev;
return this.each(function(i, el){
j = el.dispatchEvent ? el.dispatchEvent(ev) : el.fireEvent((isCustom ? 'on' : '')+ ev.type, ev);
});
};
return new Sel(selector, scope);
},
/**
* Build a new event object
* @param name string - name of the event. Do not include "on" ex: "onclick"
* @param data object - any data to include into the event
* @return Event - A native event object
*/
event: function(name, data){
var evt = (typeof Event === 'function')? new Event(name) : (function(){
var mouse=/^(?:click|dblclick|mouse(?:down|up|over|move|out))$/.test(name),
evt = document.createEvent(mouse ? 'MouseEvents':'HTMLEvents');
evt[mouse ? 'initMouseEvent':'initEvent'](name, true, true);
return evt;
})();
for(var i in data){
evt[i] = data[i];
}
return evt;
}
};
(function() {
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller
// fixes from Paul Irish and Tino Zijdel
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame){
window.requestAnimationFrame = function(callback) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!window.cancelAnimationFrame){
window.cancelAnimationFrame = function(id) { clearTimeout(id); };
}
}());
/**
* Make this available externally
*/
if (typeof module !== 'undefined') {
module.exports = _;
} else if (typeof define === 'function' && define.amd) {
define([], _);
}
if (window && window.domit === undefined){
window.domit = _;
}
}());