Tornado Logo

Javascript - Tornado UI v2

Tornado JavaScript is Build On the New ECMA Script 2015 or ES5/6 Syntax with no Third Party Dependencies and provide DOM helpers functions and rendered with Babel v7.

Javascript Files Structure

you can skip playing with the javascript source files if you’r not a Common Javascript Player and Read the Helpers Functions for Easy DOM Manipulate and How to Rerun the Existing Components Functions for Some Realtime Events or Framework Like React.JS

└─ src/Javascript                [Tornado JavaScipt Source Files]
 |├─ 00_ES6_Helpers.js           [DOM Manipulate Helpers Functions ]
 |├─ 01_Tornado.js               [Global Utilities/Effects Functions]
 |├─ 02_Navigation_Menus.js      [Responsive Menu Component Mechanism Functions]
 |├─ 03_Nested_Menus.js          [Multiple Level Nested Menu's Component Functions]
 |├─ 04_Dropdowns.js             [Dropdown Buttons Component Functions]
 |├─ 05_Forms.js                 [Form Controls Validation and Tricky Styling Functions]
 |├─ 06_Modals.js                [Popup Modals Component Mechanism Functions]
 |├─ 07_Accordion.js             [Accordion Component Mechanism Functions]
 |├─ 08_Tabs_System.js           [Tabs Component Mechanism Functions]
 |├─ 09_Carousel.js              [Slider Component Mechanism Functions]
 |├─ 99_theme.js                 [Blank Scripts File for You]
...

Tornado Javascript Source Files

JS 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 Function for those two functions one is getElement(‘.css-selector’) for a single element and getElements(‘.css-selectors’) for multiple elements and they will return to you an HTML Collection to loop throgh all selectors and do stuff to them try the code below to see it work.

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

/*===== Targeting Multiple Selectors ======*/
var elements = getElements(selectors);
Array.from(elements).forEach(function (element) {
    console.log(element);
});

Page Direction Detactor

page direction is stored variable 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 preformance purpose.you can see an example to use in the code below.

if(pageDirection === 'ltr') {
    console.log('your page styled on LTR page direction');
} else if (pageDirection === 'rtl') {
    console.log('your page styled on RTL page direction');
};

Live Events Watcher

live events is a simple watcher for event Listener called addLiveListener(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.

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

Parents Until

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

parentsUntil (referenceElement, parentSelector );

Working With Siblings

tornado provide 3 functions to target the siblings of an element with matching condition one is getSiblings(referenceElement ,filter) and it return all sibling of the giving element another is getNextSibling(reference, filter) to get the next sibling if it matchs the selector or getNextSiblings(referenceElement, stopPoint); for All Next Siblings and the Last one is getPrevSibling(reference, filter) to get the Previous element if it matchs the selector or getPrevSiblings(referenceElement,
stopPoint ); for All Previous Siblings Filter parameter is optional for graping a specific element if its matched with the filter selector.

//====== Get All Siblings =======//
getSiblings(referenceElement, mathcingSelector);

//====== Get Next Sibling =======//
getNextSibling(referenceElement, mathcingSelector);

//======> Get All Next Sibling Until stopPoint <======//
getNextSiblings(referenceElement, stopPoint);

//====== Get Previous Sibling =======//
getPrevSibling(referenceElement, filter);

//======> Get All Previous Sibling Until stopPoint <======//
getPrevSiblings(referenceElement, stopPoint);

siblings targeting example

Set Multiple Attributes

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

//====> Set Attributes Example <====//
var element = getElement('#image');
setAttributes(element, {
    'src':'URL',
    'alt':'Alternative Text'
});

Set Multiple Attributes Code Example

Insert Before & After

insert after is a function that let you insert element after/next to another element you can use it like this 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 insBefore(element, reference) function to do so.

//====> Insert Element After a List <====//
insertAfter('<p class="new-element">a new Element</p>', '.list-component');

//====> Insert Element Before a List <====//
insBefore('<p class="new-element">a new Element</p>', '.list-component')

Append & prepend

append and prepend is functions 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 appendIn(reference selector, element); 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 = getElement('#target');
appendIn(referanceElement,'<p class="new-element">a new Element</p>');

//====> Insert Element as the First Child <====//
var referanceElement = getElement('#target');
referanceElement.prepend(...nodesToPrepend);

Append & preappend Example

Featured Functions [Realtime Assets]

featured functions is using the applied ui effects and javascript components seprated as functions with helpful option for using it along side with realtime frameworks like [ React.JS || Vue.JS || etc… ], and also to control if you want to add,remove,run,restart that components code below is a list of that functions and if you are new to tornado while you read the documentation you will find and understand each function in action.

Function Default Selector Discription
dynamicBackgrounds(cssSelector); Default : “[data-src]” Dynamic Backgrounds
stickyElements(cssSelector); Default : “[data-sticky]” Sticky Elements
scrollSpy(selector); “.scrollspy [data-target], .scrollspy a” ScrollSpy
smothScroll(cssSelector); Default : “.smoth-scroll” Smoth Scroll
animatedCounter(selector); Default : “[data-counter]” Animated Counter
ViewPortDetactor(selector); Default : “.view-status” ViewPort Detactor

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