Skip to content

Commit db9ec8c

Browse files
ValexrValexr
committed
add lemon wrappper 🤓 like one more example
1 parent 29adad5 commit db9ec8c

File tree

3 files changed

+262
-1
lines changed

3 files changed

+262
-1
lines changed

‎example_dev.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
// a very simple env loader
1515
var to_load = [
1616
'src_js/wmgui$.js',
17+
'src_js/lemon.js',
1718
'src_js/log.js',
1819
'src_js/clean.js',
1920
// 'src_js/$.js',

‎src_js/lemon.js‎

Lines changed: 258 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,258 @@
1+
/**
2+
* Equivalent to jQuery's ready() function.
3+
*
4+
* @see https://gomakethings.com/a-native-javascript-equivalent-of-jquerys-ready-method/
5+
* @param {function} fn - The callback function.
6+
* @return {void}
7+
*/
8+
LemonReady = function (fn) {
9+
if ('function' !== typeof fn) { // Sanity check
10+
return;
11+
}
12+
if (document.readyState === 'complete') {
13+
return fn();
14+
}
15+
document.addEventListener('DOMContentLoaded', fn, false);
16+
};
17+
18+
/**
19+
* Find an element.
20+
*
21+
* @param {string|Object} selector - The css selector of the element.
22+
* If object then it can either be document or an element.
23+
* @param {Object} parent - The parent element, or undefined for document.
24+
* @return {Object} - returns the Lemon object to allow chaining methods.
25+
*/
26+
class Lemon {
27+
constructor(selector, parent) {
28+
parent = parent || document;
29+
if ('object' === typeof selector) {
30+
this.el = (selector[0] && selector[0] instanceof Element) ? selector : [selector];
31+
} else if ('string' === typeof selector) {
32+
this.el = parent.querySelectorAll(selector);
33+
}
34+
35+
// Convert ElementList to Array.
36+
this.el = [].slice.call(this.el);
37+
return this;
38+
}
39+
/**
40+
* Equivalent to jQuery's ready() function.
41+
*
42+
* @see https://gomakethings.com/a-native-javascript-equivalent-of-jquerys-ready-method/
43+
* @param {function} fn - The callback function.
44+
* @return {void}
45+
*/
46+
ready(fn) {
47+
if ('function' !== typeof fn) {
48+
return;
49+
}
50+
if (document.readyState === 'complete') {
51+
return fn();
52+
}
53+
document.addEventListener('DOMContentLoaded', fn, false);
54+
}
55+
/**
56+
* Run a callback against located elements.
57+
*
58+
* @param {function} callback - The callback we want to run on each element.
59+
* @return {Object} - returns the Lemon object to allow chaining methods.
60+
*/
61+
each(callback) {
62+
var self = this;
63+
for (var i = 0; i < this.el.length; i++) {
64+
callback(self.el[i]);
65+
}
66+
return this;
67+
}
68+
/**
69+
* Find a selector inside elements.
70+
*
71+
* @param {string} selector - The css selector of the element.
72+
* @return {Object} - returns the Lemon object to allow chaining methods.
73+
*/
74+
find(selector) {
75+
let found = [];
76+
this.each(function (el) {
77+
let elFound = el.querySelectorAll(selector);
78+
if (elFound) {
79+
found = found.concat(elFound);
80+
}
81+
});
82+
return new Lemon(found);
83+
}
84+
/**
85+
* Add a class to elements.
86+
*
87+
* @param {string} className - The class-name we want to add to element(s).
88+
* @return {Object} - Returns the Lemon object to allow chaining methods.
89+
*/
90+
addClass(className) {
91+
this.each(function (el) {
92+
el.classList.add(className);
93+
});
94+
return this;
95+
}
96+
/**
97+
* Remove a class from elements.
98+
*
99+
* @param {string} className - The class-name we want to add to element(s).
100+
* @return {Object} - Returns the Lemon object to allow chaining methods.
101+
*/
102+
removeClass(className) {
103+
this.each(function (el) {
104+
el.classList.remove(className);
105+
});
106+
return this;
107+
}
108+
/**
109+
* Convert a string to camelCase.
110+
*
111+
* @param {string} string The string we want to convert.
112+
* @return {string} - Returns the string formatted in camelCase.
113+
*/
114+
camelCase(string) {
115+
return string.replace(/-([a-z])/g, function (_all, letter) {
116+
return letter.toUpperCase();
117+
});
118+
}
119+
/**
120+
* Get the styles for a property, or change the value if one is defined.
121+
*
122+
* @param {string} property - The CSS property we're referencing.
123+
* @param {string|undefined} value - The value we want to assign, or undefined if we want to get the value.
124+
* @return {Object|string} - returns the Lemon object to allow chaining methods, OR the value if 2nd arg is undefined.
125+
*/
126+
css(property, value) {
127+
if ('undefined' === typeof value) {
128+
return getComputedStyle(this.el[0])[property];
129+
}
130+
this.each(function (el) {
131+
el.style[Lemon.camelCase(property)] = value;
132+
});
133+
return 'undefined' === typeof value ? '' : this;
134+
}
135+
/**
136+
* Figure out if the element has a class or not.
137+
*
138+
* @param {string} className - The class-name we're looking for.
139+
* @return {boolean} - Whether the element has the class we need or not.
140+
*/
141+
hasClass(className) {
142+
var found = false;
143+
this.each(function (el) {
144+
if (el.classList.contains(className)) {
145+
found = true;
146+
}
147+
});
148+
return found;
149+
}
150+
/**
151+
* Hide the element(s).
152+
*
153+
* @return {Object} - returns the Lemon object to allow chaining methods.
154+
*/
155+
hide() {
156+
this.each(function (el) {
157+
el.style.display = 'none';
158+
});
159+
return this;
160+
}
161+
/**
162+
* Show the element(s)
163+
*
164+
* @param {string} display - The css-display mode. Defaults to "block".
165+
* @return {Object} - returns the Lemon object to allow chaining methods.
166+
*/
167+
show(display) {
168+
display = display || 'block';
169+
this.each(function (el) {
170+
el.style.display = display;
171+
});
172+
return this;
173+
}
174+
/**
175+
* Get the direct parents of elements.
176+
*
177+
* @return {Object} - Returns the Lemon object to allow chaining methods.
178+
*/
179+
parent(selector) {
180+
let found = [];
181+
this.each(function (el) {
182+
found = found.concat(el.parentNode);
183+
});
184+
return new Lemon(found);
185+
}
186+
/**
187+
* Get the parents based on a selector.
188+
*
189+
* @param {string} selector - The CSS selector.
190+
* @return {Object} - returns the Lemon object to allow chaining methods.
191+
*/
192+
parents(selector) {
193+
let found = [], self = this;
194+
this.each(function (el) {
195+
let elFound = self.parents(selector, el);
196+
if (elFound) {
197+
found = found.concat(elFound);
198+
}
199+
});
200+
return new Lemon(found);
201+
}
202+
// EVENTS -----------------------------------------------------
203+
/**
204+
* Handle events.
205+
*
206+
* @param {Function} method - for example addEventListener.
207+
* @param {string} events - The JS event we want to add a listener for.
208+
* @param {Function} listener - The function to add to the listener.
209+
* @return {Object} - returns the Lemon object to allow chaining methods.
210+
*/
211+
eventsHandler(method, events, listener) {
212+
var self = this;
213+
events.split(' ').forEach(function (event) {
214+
self.each(function (el) {
215+
method.call(el, event, listener, false);
216+
});
217+
});
218+
return this;
219+
}
220+
/**
221+
* Similar to jQuery.off().
222+
*
223+
* @param {string} event - The JS event we want to add a listener for.
224+
* @param {Function} listener - The function to add to the listener.
225+
* @return {void}
226+
*/
227+
off(event, listener) {
228+
this.eventsHandler(removeEventListener, event, listener);
229+
}
230+
/**
231+
* Similar to jQuery.on().
232+
*
233+
* @param {string} event - The JS event we want to add a listener for.
234+
* @param {Function} listener - The function to add to the listener.
235+
* @return {Object} - returns the Lemon object to allow chaining methods.
236+
*/
237+
on(event, listener) {
238+
this.eventsHandler(addEventListener, event, listener);
239+
return this;
240+
}
241+
242+
static log() {
243+
return console.log(this);
244+
}
245+
static each(items, callback) {
246+
return items.length
247+
? items.forEach(callback)
248+
: Object.entries(items).forEach(callback);
249+
}
250+
}
251+
252+
function lemon(selector, parent) {
253+
return new Lemon(selector, parent);
254+
}
255+
256+
// lemon.log = function () {
257+
// console.log(this);
258+
// };

‎src_js/log.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,9 @@ const array = ['a', 'b'];
2222
window.onload = () => {
2323
console.log(
2424
'DOM',
25-
$('.controlswitch').children()
25+
$('.controlswitch').children(''),
26+
// lemon.log(),
27+
// lemon('#search_box').parent()
2628
// wmgui.$(),
2729
// 'window:', wmgui.$(window).nodes,
2830
// 'attr:', wmgui.$('#search_box').style(),

0 commit comments

Comments
 (0)