Tornado Methods
tornado provide an Object called Tornado that has a useful methods and properties that u can use to minpluate 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 Broswer 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 throgh 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 detactor 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 throgh Parents Tree until it finds the matching selector and graped 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 });siblings targeting example
Set Multiple Attributes
tornado provide a simple method to set Multiple Attributes as an Array With Tornado.setAttributes(element, {Attribute:Value,...});
//====> Set Attributes Example <====// var element = Tornado.getElement('#image'); Tornado.setAttributes(element, { 'src':'URL', 'alt':'Alternative Text' });Set Multiple Attributes Code Example
Insert Before & After
insert after is a method that let you insert element after/next to another element you can use it like this Tornado.insertAfter(element, reference) and it accepts string HTML or Node Elements see the example below and for inserting element before another element you can use Tornado.insBefore(element, reference) function to do so.
//====> Insert Element After a List <====//
Tornado.insertAfter('<p class="new-element">a new Element</p>', '.list-component');
//====> Insert Element Before a List <====//
Tornado.insBefore('<p class="new-element">a new Element</p>', '.list-component')Append & prepend
append and prepend is methods that let you add an string HTML or Node Element into another element after the last child or before the first child and it works simply like that Tornado.appendIn(element, reference selector ); for inserting an html elements as the last child of the reference element and for inserting the element before the first child you can use the Plain JS Function ParentNode.prepend(…nodesToPrepend);
//====> Insert Element as the Last Child <====// var referanceElement = Tornado.getElement('#target'); Tornado.appendIn('<p class="new-element">a new Element</p>', referanceElement); //====> Insert Element as the First Child <====// var referanceElement = Tornado.getElement('#target'); referanceElement.prepend(...nodesToPrepend);Append & preappend Example
Get Element Height
tornado provides a method to get The Complete Height of an Element including Padding and u can use it like this Tornado.getHeight(element) and it will return the complete height of that element in numbers
//====> Get Element Height <====// var element= Tornado.getElement('#target'); Tornado.getHeight(element);Append & preappend Example
in View Detector
tornado provides a method to check if the element is in view point of the screen or not and return [true] or [false] and you can use it by calling Tornado.inView(element); look at the example code below
//====> is Element in ViewPort <====// var element= Tornado.getElement('#target'); if (Tornado.inView(element)) { //===> do something }Append & preappend Example