1 | 1 | 'use strict'; |
2 | | |
3 | | // ----- main constructor |
4 | | // -- @param el {Array} HTMLElement array |
5 | | // --------------------------------------- |
6 | 1 | var Query = function(el) { |
7 | 20 | this.el = el; |
8 | | }; |
9 | | |
10 | | |
11 | 1 | Query.prototype = { |
12 | | |
13 | | constructor: Query, |
14 | | |
15 | | |
16 | | // --------------------------------- core --------------------------------- |
17 | | |
18 | | each: function(cb) { |
19 | | |
20 | 15 | for (var i = 0, len = this.el.length; i < len; i++) { |
21 | 21 | cb(this.el[i], i); |
22 | | } |
23 | | |
24 | 15 | return this; |
25 | | |
26 | | }, |
27 | | |
28 | | |
29 | | // --------------------------------- manipulation --------------------------------- |
30 | | |
31 | | append: function(str) { |
32 | | |
33 | 2 | this.each(function(el) { |
34 | 3 | el.appendChild(document.createElement(str).cloneNode(true)); // append copy |
35 | | }); |
36 | | |
37 | 2 | return this; |
38 | | |
39 | | }, |
40 | | |
41 | | empty: function() { |
42 | | |
43 | 2 | this.each(function(el) { |
44 | 3 | el.innerHTML = ''; |
45 | | }); |
46 | | |
47 | 2 | return this; |
48 | | |
49 | | }, |
50 | | |
51 | | hide: function() { |
52 | | |
53 | 2 | this.each(function(el) { |
54 | 3 | el.style.display = 'none'; |
55 | | }); |
56 | | |
57 | 2 | return this; |
58 | | |
59 | | }, |
60 | | |
61 | | show: function() { |
62 | | |
63 | 2 | this.each(function(el) { |
64 | 3 | el.style.display = ''; |
65 | | }); |
66 | | |
67 | 2 | return this; |
68 | | }, |
69 | | |
70 | | toggle: function() { |
71 | | |
72 | 4 | this.each(function(el) { |
73 | 6 | el.style.display = el.style.display === 'none' ? '' : 'none'; |
74 | | }); |
75 | | |
76 | 4 | return this; |
77 | | |
78 | | } |
79 | | |
80 | | // --------------------------------- traversal --------------------------------- |
81 | | |
82 | | |
83 | | |
84 | | }; // end Query.prototype |
85 | | |
86 | | |
87 | | |
88 | | |
89 | | |
90 | | |
91 | | // --------------------------------- helpers --------------------------------- |
92 | | |
93 | | // ----- convert HTMLCollection to Array |
94 | | // -- @param nodeList {NodeList|HTMLCollection} |
95 | | // -- @return {Array} |
96 | | // based on http://stackoverflow.com/q/3199588/4459340 |
97 | | // --------------------------------------- |
98 | 1 | function toArray(nodeList) { |
99 | | |
100 | 21 | var i = nodeList.length; |
101 | 21 | var arr = []; |
102 | | |
103 | 21 | while (i--) { |
104 | 28 | arr.unshift(nodeList[i]); |
105 | | } |
106 | | |
107 | 21 | return arr; |
108 | | |
109 | | } |
110 | | |
111 | | |
112 | | // --------------------------------- exports --------------------------------- |
113 | | |
114 | | // ----- export factory & selector engine |
115 | | // -- @param? selector {String} css-like selector |
116 | | // -- @return {Query} new s-query object |
117 | | // --------------------------------------- |
118 | 1 | module.exports = function(selector) { |
119 | 16 | var arr = toArray(document.querySelectorAll(selector)); |
120 | 16 | return new Query(arr); |
121 | | }; |
122 | | |
123 | | |
124 | | // ----- selector engine |
125 | | // -- @param id|className|tagName|name {String} |
126 | | // -- @return {Query} |
127 | | // --------------------------------------- |
128 | 1 | module.exports.byId = function(id) { |
129 | 1 | return new Query([document.getElementById(id)]); |
130 | | }; |
131 | | |
132 | 1 | module.exports.byClass = function(className) { |
133 | 1 | var elements = toArray(document.getElementsByClassName(className)); |
134 | 1 | return new Query(elements); |
135 | | }; |
136 | | |
137 | 1 | module.exports.byTag = function(tag) { |
138 | 1 | var elements = toArray(document.getElementsByTagName(tag)); |
139 | 1 | return new Query(elements); |
140 | | }; |
141 | | |
142 | 1 | module.exports.byName = function(name) { |
143 | 1 | var elements = toArray(document.getElementsByName(name)); |
144 | 1 | return new Query(elements); |
145 | | }; |
146 | | |
147 | | |
148 | | // attach helper functions |
149 | 1 | module.exports.toArray = toArray; |