gs‐utils‐jquery.js

This file contains a little re-implementation of the famous jQuery library. The goal is to have the same function chaining and an elegant way to manipulate a single DOM element or an entire list at the same time.
For example:

// Native JS
element.querySelectorAll( ".clazz" ).forEach( el => {
    el.setAttribute( "foo", 21 );
    el.onclick = () => {};
} );

// jQuery mindset
$( element )
    .$query( ".clazz" )
    .$setAttr( "foo", 21 )
    .$on( "click", () => {} );

/**    jQuery style                                     Native way                                             **/
/**...............................................**...........................................................**/
/**/   const a = jq.$getAttr( "a" );             /**/   const a = el.getAttribute( "a" );                     /**/
/**...............................................**...........................................................**/
/**/   const [ a, b ] = jq.$getAttr( "a", "b" ); /**/   const a = el.getAttribute( "a" );                     /**/
/**/                                             /**/   const b = el.getAttribute( "b" );                     /**/
/**...............................................**...........................................................**/
/**/   const h = jq.$hasAttr( "a" );             /**/   const h = el.hasAttribute( "a" );                     /**/
/**...............................................**...........................................................**/
/**/   jq.$rmAttr( "a" );                        /**/   el.removeAttribute( "a" );                            /**/
/**...............................................**...........................................................**/
/**/   jq.$rmAttr( "a", "b" );                   /**/   el.removeAttribute( "a" );                            /**/
/**/                                             /**/   el.removeAttribute( "b" );                            /**/
/**...............................................**...........................................................**/
/**/   jq.$addAttr( "a" );                       /**/   el.setAttribute( "a", "" );                           /**/
/**...............................................**...........................................................**/
/**/   jq.$addAttr( "a", "b" );                  /**/   el.setAttribute( "a", "" );                           /**/
/**/                                             /**/   el.setAttribute( "b", "" );                           /**/
/**...............................................**...........................................................**/
/**/   jq.$setAttr( "key", "value" );            /**/   el.setAttribute( "key", "value" );                    /**/
/**/   jq.$setAttr( "key", true );               /**/   el.setAttribute( "key", "" );                         /**/
/**/   jq.$setAttr( "key", false );              /**/   el.removeAttribute( "key" );                          /**/
/**...............................................**...........................................................**/
/**/   jq.$setAttr( {                            /**/   el.setAttribute( "a", "hello" );                      /**/
/**/       a: "hello",                           /**/   el.setAttribute( "b", "world" );                      /**/
/**/       b: "world",                           /**/   el.setAttribute( "c", "" );                           /**/
/**/       c: true,                              /**/   el.rmAttribute( "d" );                                /**/
/**/       d: false,                             /**/                                                         /**/
/**/   } );                                      /**/                                                         /**/
/**...............................................**...........................................................**/
/**/   const d = jq.$disabled();                 /**/   const d = el.getAttribute( "disabled" );              /**/
/**/   jq.$disabled( true );                     /**/   el.setAttribute( "disabled", "" );                    /**/
/**/   jq.$disabled( false );                    /**/   el.removeAttribute( "disabled" );                     /**/
/**...............................................**...........................................................**/
/**/   const d = jq.$checked();                  /**/   const d = el.checked;                                 /**/
/**/   jq.$checked( true );                      /**/   el.checked = true;                                    /**/
/**/   jq.$checked( false );                     /**/   el.checked = false;                                   /**/
/**...............................................**...........................................................**/
/**/   jq.$viewbox( w, h );                      /**/   el.setAttribute( "viewBox", `0 0 ${w} ${h}` );        /**/
/**/   jq.$viewbox( x, y, w, h );                /**/   el.setAttribute( "viewBox", `${x} ${y} ${w} ${h}` );  /**/
/**...............................................**...........................................................**/
/**/                                             /**/                                                         /**/
/**/                                             /**/                                                         /**/
/**/   const a = jq.$hasClass( "c" );            /**/   const a = el.classList.contains( "c" );               /**/
/**/                                             /**/                                                         /**/
/**/   jq.$addClass( "c" );                      /**/   el.classList.add( "c" );                              /**/
/**/   jq.$addClass( "c", "d" );                 /**/   el.classList.add( "c", "d" );                         /**/
/**/                                             /**/                                                         /**/
/**/   jq.$rmClass( "c" );                       /**/   el.classList.remove( "c" );                           /**/
/**/   jq.$rmClass( "c", "d" );                  /**/   el.classList.remove( "c", "d" );                      /**/
/**/                                             /**/                                                         /**/
/**/   jq.$togClass( "c" );                      /**/   el.classList.toggle( "c" );                           /**/
/**/   jq.$togClass( "c", true );                /**/   el.classList.toggle( "c", true );                     /**/
/**/                                             /**/                                                         /**/
/**/                                             /**/                                                         /**/
/**...............................................**...........................................................**/
/**/   const bcr = jq.$bcr();                    /**/   const bcr = el.getBoundingClientRect();               /**/
/**...............................................**...........................................................**/
/**/   const x = jq.$left();                     /**/   const x = parseFloat( getComputedStyle( el ).left );  /**/
/**/   const y = jq.$top();                      /**/   const y = parseFloat( getComputedStyle( el ).top );   /**/
/**/   const w = jq.$width();                    /**/   const w = el.clientWidth;                             /**/
/**/   const h = jq.$height();                   /**/   const h = el.clientHeight;                            /**/
/**...............................................**...........................................................**/
/**/   jq.$left( "21px" );                       /**/   el.style.left = "21px";                               /**/
/**/   jq.$left( 3 * 7, "px" );                  /**/   el.style.left = `${ 3 * 7 }px`;                       /**/
/**...............................................**...........................................................**/
/**/   jq.$top( "21px" );                        /**/   el.style.top = "21px";                                /**/
/**/   jq.$top( 3 * 7, "px" );                   /**/   el.style.top = `${ 3 * 7 }px`;                        /**/
/**...............................................**...........................................................**/
/**/   jq.$width( "21px" );                      /**/   el.style.width = "21px";                              /**/
/**/   jq.$width( 3 * 7, "px" );                 /**/   el.style.width = `${ 3 * 7 }px`;                      /**/
/**...............................................**...........................................................**/
/**/   jq.$height( "21px" );                     /**/   el.style.height = "21px";                             /**/
/**/   jq.$height( 3 * 7, "px" );                /**/   el.style.height = `${ 3 * 7 }px`;                     /**/
/**...............................................**...........................................................**/
/**/   jq.$css( "opacity", 1 );                  /**/   el.style.opacity = 1;                                 /**/
/**/   jq.$css( "minWidth", "21px" );            /**/   el.style.minWidth = "21px";                           /**/
/**/   jq.$css( "minHeight", 3 * 7, "em" );      /**/   el.style.minHeight = `${ 3 * 7 }em`;                  /**/
/**...............................................**...........................................................**/
/**/   jq.$css( {                                /**/   el.style.opacity = 1;                                 /**/
/**/       opacity: 1,                           /**/   el.style.minWidth = "21px";                           /**/
/**/       minWidth: "21px",                     /**/   el.style.minHeight = `${ 3 * 7 }em`;                  /**/
/**/       minHeight: `${ 3 * 7 }em`,            /**/                                                         /**/
/**/   } );                                      /**/                                                         /**/
/**...............................................**...........................................................**/