TORNADO METHODS

tornado provide an Object called Tornado that has a useful methods and properties that u can use to miniplate the DOM Elements you can import it as JS/TS Module then you can use those methods like the Tornado.method(…). and its available as an object of the Browsers Window Object as will.

//======> Import Tornado UI Methods <=======//
import Tornado from './Base/Tornado';

//======> Typescript and Global Usage <=======//
Tornado.method(...);

DOM SELECTORS

tornado uses the querySelector() and querySelectorAll() to select elements and play with it and you can use the same to select any element and do stuff to it their is a Shorthand Methods for those two functions one is Tornado.getElement(‘.css-selector’) for a single element and Tornado.getElements(‘.css-selectors’) for multiple elements and they will return to you an HTML Collection or Node Objects to loop through all elements and do stuff to them try the code below to see it work.

/*===== Targeting Single Selector ======*/
var element = Tornado.getElement(selector);
console.log(element);

/*===== Targeting Multiple Selectors ======*/
Tornado.getElements(selectors).forEach(element => {
    console.log(element);
});

PAGE DIRECTION DETACTOR

page direction detector is properties in Tornado Object that return the current page direction ( ltr or rtl ) to use it if there is a scripts that act different on each direction for saving doing an extra file for your scripts and just do all your work in one file for development purpose. You can see an example to use in the code below.

//===> get the current direction [ltr] or [rtl] <===//
Tornado.direction();

//===> get the direction Start point [right] or [left] <===//
Tornado.direction('start');

//===> get the direction End point [right] or [left] <===//
Tornado.direction('end');

LIVE EVENTS WATCHER

live events is a simple method to watch over event Listener called **Tornado.liveEvent(selector, event, function)**; and it watches the DOM for attach an event handler for all elements which match the current selector, now and in the future try the code below to see it work.

Tornado.liveEvent('css-selector' or Object, 'click', function() {
    console.log('you just clicked' + this);
});

PARENTS UNTIL

tornado provide a simple method for walking through Parents Tree until it finds the matching selector and return it to you and it works like this Tornado.parentsUntil (referenceElement, parentSelector ); .

Tornado.parentsUntil (referenceElement, parentSelector );

WORKING WITH SIBLINGS

Tornado Provides a 5 Methods to play with Element Sibling to get All siblings or the Next One/s or the Previous One/s each method takes to object options targeted element and filter to get a specific element by css selector

//====== Get All Siblings =======//
Tornado.getSiblings({
   element : targetElement,
   filter : mathcingSelector
});

//====== Get Next Sibling =======//
Tornado.getNextSibling({
   element : targetElement,
   filter : mathcingSelector
});

//======> Get All Next Sibling <======//
Tornado.getNextSiblings({
   element : targetElement,
   filter : mathcingSelector
});

//====== Get Previous Sibling =======//
Tornado.getPrevSibling({
   element : targetElement,
   filter : mathcingSelector
});

//======> Get All Previous Sibling <======//
Tornado.getPrevSiblings({
   element : targetElement,
   filter : mathcingSelector
});

SET MULTIPLE ATTRIBUTES

tornado provide a simple method to set Multiple Attributes as an Array With Tornado.setAttributes(element, {Attribute:Value,...});