Default Theme Dark Theme
Tornado Logo
Tornado has become Phenix Design System

Typescript Methods - Tornado UI

Tornado JavaScript is Build On the ES-Next with Typescript to provide DOM Manipulate methods.

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 <=======//

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);
/*===== Targeting Multiple Selectors ======*/
Tornado.getElements(selectors).forEach(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 can see an example to use in the code below.

//===> get the current direction [ltr] or [rtl] <===//
//===> get the direction Start point [right] or [left] <===//
//===> get the direction End point [right] or [left] <===//

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 =======//
element : targetElement,
filter : mathcingSelector
//====== Get Next Sibling =======//
element : targetElement,
filter : mathcingSelector
//======> Get All Next Sibling <======//
element : targetElement,
filter : mathcingSelector
//====== Get Previous Sibling =======//
element : targetElement,
filter : mathcingSelector
//======> Get All Previous Sibling <======//
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, {
'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');

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');

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

Copyright (c) 2016-present, Tornado UI Licensed under the terms of the MIT License.