commit 239f55ed9b279b5797dc7c6923be33f6a80afdc4
parent f98e18b1d6b63c1120b7bd86834953df42c2b319
Author: Jan Dankert <develop@jandankert.de>
Date: Thu, 15 Apr 2021 21:24:23 +0200
New: Using a Proxy for calling the event handler in the correct context; Added documentation
Diffstat:
2 files changed, 35 insertions(+), 1 deletion(-)
diff --git a/modules/cms/ui/themes/default/script/OQuery.md b/modules/cms/ui/themes/default/script/OQuery.md
@@ -0,0 +1,33 @@
+# OQuery
+
+OQuery is a lightweight ES6-ready replacement for JQuery.
+
+# Example
+
+```
+import $ from './OQuery.js';
+
+// Selectors
+$('.myclass').removeClass('otherclass');
+
+// Events
+$('.myclass').children('.subclass').click( function() {
+ $(this).closest('.otherclass').toggleClass('--is-open');
+});
+```
+
+Modern browsers are accepting this ECMA-Script-6 syntax directly, so there is no need to use webpack.
+
+# Creating elements
+
+```
+$.create('div').addClass('myclass').appendTo( $('body') );
+```
+
+# Drawbacks
+
+OQuery is **not** fully feature-compatible to JQuery!
+
+- No AJAX functions (today we are using the native `fetch`)
+- No effects
+- The constructor is only accepting selectors+
\ No newline at end of file
diff --git a/modules/cms/ui/themes/default/script/Oquery.js b/modules/cms/ui/themes/default/script/Oquery.js
@@ -177,7 +177,7 @@ export class OQuery {
on ( event,handler ) {
if ( typeof handler !== 'undefined')
- this.nodes.forEach(node => node.addEventListener( event,(ev) => {handler.call(node,ev)}) );
+ this.nodes.forEach(node => node.addEventListener( event,handler.bind(node) ) );
else
this.nodes.forEach(node => node.dispatchEvent( new Event(event) ) );
return this;