PROBLEM?
BACK ON TOP

Agile.js API

How To use / Download This JSLib?
Simply Copy-Paste this <script> code below in your project document <head>. ..or Download it by clicking here 
	_( "#id .class:3 span" );

Agile Path

_(/*PATH*/); semplify the call stacks to get elements in your HTML code.
In this case i'm looking for all HTML SPAN Elements contained in the Third element identified with class "class" contained in the HTML Element identified with id "id".
Yes it's a mindblow to say but let's examine the small thing:

The HTML Involved: 

	<div id="id">
		<div class="class"></div>
		<div class="class"></div>
		<div class="class"></div>
		<div class="class">
			<span></span>
			<span></span>
			<span></span>► Selected Elements
			<span></span>
			<span></span>
		</div>
		<div class="class"></div>
		<div class="class"></div>
	</div>
The JS Equivalent is: 
	document.getElementById( "id" ).getElementsByClassName( "class" ).item(3).getElementsByTagName( "span" );
At the end you'll get an array of span elements. ( Selected Element )
the return give the [HTML Node Element] wich have all the standard JavaScript Properties.:

_("#idname").innerHTML = " ";
_("#idname").style.color = "BLACK";
_("#idname").setAttribute("attribName",100);
etc..


Syntax

  • # identifies an ID;
    ( #idname pick out the first <div id="idname"> Element in your HTML Document)

  • . identifies a CLASS;
    ( .classname pick out an array of <div class="classname"> Elements)

  • < identifies the parent container;
    ( <#idname pick out the element wich contain your <div id="idname"> Element)
    the < Symbol can be typed more times if you want to get a far parent.

    Example: 
    	<div>► Second parent
		<div>► First parent [SELECTED]
			<div id="idname"></div>
		</div>
	</div>
    with: 
    	_( " <#idname " );
    What happen here!? Easy, you selected the <div id="idname"> Element with #idname BUT, using the < symbol before you'll get the PARENT of #idname typed .
    If you want to select the SECOND parent you only have to add an other < so.. you queryed to get the PARENT element 2 times with: 
    	_( " <<#idname " );


  • without any symbols before the name identifies a TAG STANDARD element like DIV, SPAN, TABLE, TD, H1, P, etc..;
    ( span pick out an array of <span> Elements)


If you already have an HTML node Element saved in a variabile.. 
	var el = _( " #idname " );
..and you want to browse the path starting from that element, you can use this syntax: 
	_( el , ".classname:0" );
Your saved el will be used as initial HTML element to calc the following path.

Example:
	<div id="idname">► var el
		<div class="classname"></div>► Final Selected Element
		<div class="classname"></div>
		<div class="classname"></div>
		<div class="classname"></div>
	</div>

	var el = _( " #idname " );
	_( el , ".classname:0" );

	_.debug(function(){	
		// Your code HERE	
	});

Agile Debugger

_.debug(/*CODE*/); is a fast method wich log in your browser console almost every errors contained in your /*CODE*/.
Example:

	var a = 10;
	_.debug(function(){	
		a = a / b;
	});
b do not exist and the exception generated will be logged in your console
Simple right? :) 

	_.curX;
	// and
	_.curY;

Cursor position X/Y

Just 2 simple properties. _.curX; and _.curY; will give you the mouse coordinates in your web page DOM.


If you wish to know the coordinates of your mouse in the screen area.. use this properties: 

	_.scrX;
	// and
	_.scrY;

	_.scrollTop( "#idname" );

Get element ScrollTop (in px)

With _.scrollTop( "#idname" ); you can get the space from the desired element to the top of your document page.
The path use the same system of the primary's Agile's method _( " " ); 

		_.scrollTop( "#idname .classname:3 span:0" );	// just an example

	_.scrollTo( "#idname" );

Set page Scroll

With _.scrollTo( "#idname" ); you can set the document scroll to the desired Element.
The path use the same system of the primary's Agile's Path method _( " " ); 

		_.scrollTo( "#idname .classname:3 span:0" );	// just an example

You can also add an Offset to the scroll position: 
	_.scrollTo( "#idname", 100);
In this case the document will be scrolled to the element "#idname" + an offset of 100 px (can be positive and negative)
Else, without params _.scrollTo(); will scroll the page to the top of the document.

A perfect live example is the api menu-nav of this page :) 
	var o1 = {
		a:0,
		b:{
			x:false,
			y:"agile"
		}
	}
	
	var o2 = o1.clone();

Accurate Object's Clone

A very critical issue in javascript is to CLONING an object (JSON) into an other var.
Let's see why (if that's new for you) using the object o1

An object var can not be cloned/copied like this 

	var o2 = o1;
This o2 isn't a clone, it's a REFERENCE of o1
Infact if you write 
	o2.a = 25;
o2.a and o1.a values will BOTH change to 25.

Using this method you'll get a real cloned copy instead. 
	var o = {
		a:0,
		b:{
			x:false,
			y:"agile"
		}
	}
	
	o.assign({ b:{ x:true } });

Accurate Object's Assign

An handy method wich update given properties to your object

In the above example the value of o.b.x has been updated to TRUE 

	var myArray = [9, 3, 5, 2, 4, 3, 0, 6, 8, 7];
	myArray.sortNum();
	
	// myArray is now sorted
	// [ 0, 2, 3, 3, 4, 5, 6, 7, 8, 9 ]

Fast sort a numeric Array

JavaScript already have an Array.sort() method. It can sort Numbers, Strings, Objects, etc..
but, if you have to sort a numeric Array you should use this my custom method wich is ~1472.5% faster.

I made this Test page to show you the differences http://jsperf.com/array-sorttest 

	var myArray = ["banana", "orange", "kiwi", "watermelon", "cherries"];
	myArray.move(2, 0);
	
	// myArray has changed to
	// ["kiwi", "banana", "orange", "watermelon", "cherries"]

Change values's index of an Array

An handy method wich allow to change the array's elements index.
In the above example the element with index 2 has been changed to 0 setting "kiwi" as the first element of the array 

	var myArray = ["banana", "orange", "kiwi", "watermelon", "cherries"];
	myArray.swap(2, 0);
	
	// myArray has changed to
	// ["kiwi", "orange", "banana", "watermelon", "cherries"]

Change values's index of an Array

An handy method wich allow to swap array's elements with index.
In the above example the element with index 2 has been swapped with the element 0 setting "kiwi" as the first element of the array and "banana" the third one. 

	_.convert( myVar );

A collection of Conversions

Description HERE 

	_.ani.transition(1000, function(){
		// your code here
	});

Basic and free Transition method

HUGE Description HERE 

	_.ani.range( 50, 100, 0.5 );

	// return -> 75

Trigger anelemt's event

Description HERE 

	_.browser();

Get the current Browser

A fast and basic way to know what browser is reading yur code.

How does it work?
It's very simple,
if you're using FireFox it will return "FF", if Chrome "CH", if Opera "OP", if Safari "SA", if IExplorer "IE".
if something else it will return "Unknown".

Example (in this case):


Generic Example: 
	if( _.browser() == "FF"){
		// Code for FIREFOX
	}
	else if( _.browser() == "CH"){
		// Code for CHROME
	}
	else if( _.browser() == "IE"){
		// Code for INTERNET EXPLORERS
	}
	else{
		// Code For Other Browsers
	}

	_.isset( myVar );

Check if Var is declared

This method check id the variable has been declared before.

Example 1: 

	if( _.isset(myVar)){
		console.log("myVar Exist.");
	}
	else{
		console.log("myVar has not been declared.");
	}

	myVar has not been declared.

else if.. 
	myVar = "something";

	if( _.isset(myVar)){
		console.log("myVar Exist.");
	}
	else{
		console.log("myVar has not been declared.");
	}

	myVar Exist.

	var resultParams = _.filterURLparams(	
		"par1=1&par2=2&par3=3&par4=4", 
		[ "par2", "par4" ]
	);
	
	// resultParams = "par1=1&par3=3";

Remove desired params

Usefull if you program your website with PHP too.

	_.validDate( "mm/dd/yyyy", "11/9/1950" );

Check if valid date

Check if the date you typed in is a valid date or not.

Example:

	_.validDate( "mm/dd/yyyy", "11/31/2014" );
will return "FALSE" ..becouse November do not have 31 days! 
	_.download( 
		"file_Name.txt",
		"http://www.mydomain.org/folder/file.txt" 
	);

Download Typed url

An easy method wich allow to trigger the download process for everiting you need to be downloaded.

Note
This method has not been tested on old browsers and may now work. 
	_.curState;

Current Mouse state (event)

Save the last mouse event. Try click and doubleclick on this document.

	_.selectable( element, false );

Is [element] Selectable?

Using this function allow you to block the HightLight on text of your element.

Example: 

	<p id="text-selectable">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit...
	</p>
	<p id="text-unselectable">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit...
	</p>

	_.selectable( "#text-selectable",   true );
	_.selectable( "#text-unselectable", false );
Output..

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

Lorem ipsum dolor sit amet, consectetur adipiscing elit...


Only in the first panel can be select (hightlight) the text. In the second one no becouse has been blocked. 
	var os = _.offset( element );
		
	os.x;	// contain the X coordinate
	os.y;	// contain the Y coordinate

Get elements Coordinates (DOM)

With this method you can know the position of every elements in your DOM. 

	<div id="idname">
		<div class="classname"></div>
	</div>

	var os = _.offset( "#indame .classname:0" );
os will contain the x / y coordinates of the element "#indame .classname:0" in the DOM.
If you want to know the coordinates of your element in his parent container just add true as second param. 
	var os = _.offset( "#indame .classname:0", true );
Syntax
The Full Syntax is 
	var os = _.offset( _PATH_ , _PARENTONLY_ );
Where..:
  • _PATH_ is required and need the element path or an HTML element

  • _PARENTONLY_ is optional (default set as false) and allow you to get the offset position of your element in his parent container if set as true
	var cloneVar = _.clone( varObject );

clone a varObject

Description HERE 

	_.trigger( element, "onclick" );

Trigger anelemt's event

Description HERE 

	var trackBar = _.htmlc.track( element, "myTrack" );
		
	trackBar.value	// return the trackBar

Create a TrackBar (Slider)

This simple method create a Track Bar wich will be resized to the element width (or height if it's a vertical trackbar).
let's analyze how it work with an example.:

	#idname{
		/* CSS rules */
		width:250px;
	}

	<div id="idname"></div>
Our page have a div with id "idname" width width : 150px and we want to insert a trackBar in it.
To do that we only have to write this js code: 
	var myTB = _.htmlc.track( "#idname", "myTrack" );
The Hell is that thing!?
Here we are creating a new TrackBar Object named "myTrack" and it's going to be ''deploied'' in the tag element with id = "idname".
After called this little function you'll have a myTB var wich contain all properties related of that your new TrackBar.

To get the current Value of your TrackBar you can just use this attribute: 
	myTB.value;	// Contain the current TrackBar Value (From 0 to 100)
or, if you didn't referenced your TrackBar into a variable, the tb value can be retrived it like this: 
	_.htmlc.track.get( "myTrack" ).value;
If you want to Set by code the value use this function: 
	_.htmlc.track.set( "myTrack" , 75 );	// 75 is just an example (From 0 to 100)
Demo:
Customization
If you don't like the default style of the trackbar you can simply Edit it with his own CSS references.
Let's watch out last example: 
	_.htmlc.track( "#idname", "myTrack" );
you can Edit your TrackBar style with CSS using the Name you give like this.: 
	#agile-tb-myTrack{
	}
	#agile-tb-myTrack-track{
	}
	#agile-tb-myTrack-bar{
	}
	#agile-tb-myTrack-button{
	}
the first id, #agile-tb-myTrack, reference the object itself.
the second, with track, reference the gray rail where the handler scroll.
the third, with bar, reference the blu rail wich say the current value of the TrackBar.
the fourth, with button, reference the handler (grip) over the rail.

Customization (DEMO)
1.
Using.: 
	#agile-tb-myTrack:hover #agile-tb-myTrack-button{
		background: rgba(255,255,255,0.9);
	}
	#agile-tb-myTrack-track{
		
		background:linear-gradient(90deg,#f00,#0f0);
		border-radius:100px;
	}
	#agile-tb-myTrack-bar{
		background:transparent;
	}
	#agile-tb-myTrack-button{
		width:18px;
		border-radius:50%;
		background: rgba(255,255,255,0.7);
	}


2.
Using.: 
	#agile-tb-myTrack-track{
		height:10px;
		top:calc(50% - 5px);
		box-shadow:	inset 0 1px #fff,
				inset 1px 0 #fff,
				inset -1px 0 #fff,
				0 -1px #222,
				0 1px #222,
				-1px 0 #222,
				1px 0 #222;
		border-radius:2px;
	}
	#agile-tb-myTrack-bar{
		background:linear-gradient(0deg,#fa0,#fe0);
		box-shadow:inset 0 5px rgba(255,255,255,0.5);
	}
	#agile-tb-myTrack-button{
		width:18px;
		border-radius:50%;
		background: transparent;
		box-shadow:none;
	}
Create vertical and inverted trackbars
if you want to create a vertical trackbar you only need to ad / change a parameter when declaring it.: 
	_.htmlc.track( "#idname", "myTrack", "v");
the "v" says that the trackbar should be Vertical (the default value is "o" as hOrizontal)
and finally, if you wish an inverted trackbar you can write something like this.:

(example with an horizontal trackbar) 
	_.htmlc.track( "#idname", "myTrack", true);
	// or
	_.htmlc.track( "#idname", "myTrack", "o", true);
Events
  • onScroll 
    	_.htmlc.track.get( "myTrack" ).onScroll = function(tb){
		// Your code HERE
	}
    The onScroll event will be called until the trackbar is being used.


  • onChange 
    	_.htmlc.track.get( "myTrack" ).onChange = function(tb){
		// Your code HERE
	}
    The onChange event will be called after the user released the trackbar.


Syntax
The Full Syntax is 
	var myTB = _.htmlc.track( _PATH_ , _NAME_ , _TYPE_ , _IVERTED_ );
Where..:
  • _PATH_ is required and need the element path or an HTML element wich will become the container of your TrackBar Object.

  • _NAME_ is required and define the new TrackBar with your typed text.

  • _TYPE_ is optional (default set as "o") and can be "o" (orizzontal) or "v" (vertical)

  • _INVERTED_ is optional (default set as false)
	_.css({ /* CSS rules */ });

Create CSS Styles With JavaScript

Yes, you can Create / Insert / Edit / Delete CSS Styles and rules using this javascript function.

WoOw! ..How does it work?
Let's starting from the beginning.
In a CSS StyleSheet if you want to add a new CSS rule, (for example a class .classname and an id #idname with a color and background properties) , you have to write this: 
	#idname{
		color:#222;
		background:#fff;
	}
	.classname{
		color:#a00;
		background:#eee;
	}
With this function the syntax is very similar. To write the same rules you can write something like that: 
	_.css({ 
		"#idname":{
			color:"#222",
			background:"#fff"
		},	 
		".classname":{
			color:"#a00",
			background:"#eee"
		}	
	});


	_.htmlc.colorPicker('myColorPicker','RGBA',function(cp){
		// Your Code HERE (CallBack)
		// cp.value contain the selected Color value
	});

Create ColorPickers ( RGBA / HSLA )

Ever wanted a simple portable ColorPicker ready to use? even if you're not using chrome's html5 inputs?
Here for you a small and easy ColorPicker.

(double click on the square to select your color)

How does it work?
Let's examine it.
	_.htmlc.colorPicker('myColorPicker','RGBA');
"myColorPicker" is the name