Aegis JS Library Documentation

Warning: This Documentation is a Work in Progress.

The Aegis JS Library provides multiple classes for different purposes which work well with any other JS library.

  1. DOM Manipulation
  2. Notification
  3. Request
  4. Screen
  5. Storage
  6. Text

DOM Manipulation

This module handles DOM Manipulation in jQuery-like way.

Instantiation

Creates the Aegis object.

Parameters: String (Selector)

Returns: Aegis Object

Example:

$_("div p.summary");
Result: An Aegis object for DOM Manipulation.
hide()

Hide the element.

Example:

$_("div p.summary").hide();
Result: Hides all the elements that match the selector.
show()

Shows the element.

Example:

$_("div p.summary").show();
Result: Shows all the elements that match the selector.
addClass()

Adds a class to the element.

Parameters: String (Class to add)

Example:

$_("div p.summary").addClass("fadeIn");
Result: Adds the fadeIn class to every element matching the selector.
removeClass()

Creates the Aegis object.

Parameters: String (Class to remove)

Example:

$_("div p.summary").removeClass("fadeIn");
Result: Removes the fadeIn class from every element matching the selector.
toggleClass()

Toggles the class of an element between two given classes.

Parameters: String (Classes)

Example:

$_("div p.summary").toggleClass("fadeIn fadeOut");
Result: Toggles the fadeIn or fadeOut class in the elements matching the selector.
value()

Returns the value of an element or sets it.

Optional Parameters Parameters: String (Selector)

Returns: String (Value of the element)

Example:

$_("input [data-content='mail']").value();
Result: Returns the value of the input.
$_("input [data-content='mail']").value("mail@example.com");
Result: Sets the value of the input to "mail@example.com".
click()

Adds a click listener to the element.

Parameters: Callback Function

Example:

$_("button [type='submit']").click(function(){
	alert("Clicked");
});
Result: The listener is added to the element and will run the function at click.
submit()

Adds a submit event listener.

Parameters: Callback Function

Example:

$_("#myForm").submit(function(){
	alert("Submited");
});
Result: The listener is added to the element and will run the function at submit.
change()

Adds a change event listener to an element.

Parameters: Callback Function

Example:

$_("#myForm input").change(function(){
	alert("Something changed");
});
Result: The listener is added to the element and will run the function when the values change.
scroll()

Adds an event listener to the scroll event.

Parameters: Callback Function

Example:

$_(".text").scroll(function(){
	alert("Scroll detected");
});
Result: The listener is added to the element and will run the function at scroll.
on()

Adds an event listener to the the element.

Parameters: String (Event), Callback Function

Example:

$_("div p.summary").on("click", function(){
	alert("click");
});
Result: The listener is added to the element and will run the function when the event happens.
filter()

Filters the matched elements and reduces them to the once that matches the new given selector.

Parameters: String (Selector)

Example:

$_("div p.summary").filter(".special");
Result: The Aegis object will now hold those elements matching the div p.summary.special Selector.
data()

Retrieves or sets the data property of an element.

Parameters: String (Data to retrieve)

Optional Parameters: String (New value of the data)

Returns: String

Example (Assuming the element has a data-content="mail" set):

$_("input [data-content]").data("content");
Result:
"mail"
$_("input [data-content]").data("content", "email");
Result: The data content will now be set to
"email"
text()

Retrieve the text of an element or sets it.

Optional Parameters: String (New text)

Returns: String

Example:

$_("div p.summary").text();
Result: This will return the text in the
"div p.summary"
element.
$_("div p.summary").text("New text");
Result: Sets the text in the
"div p.summary"
element to
"New text"
.
html()

Retrieves the HTML inside an element or sets it.

Optional Parameters: String (New HTML code)

Returns: String

Example:

$_("div p.summary").html();
Result: This will return the HTML inside the
"div p.summary"
element.
$_("div p.summary").html("<p>New text</p>");
Result: Sets the HTML in the
"div p.summary"
element to
"<p>New text</p>"
.
append()

Append an element to the current one.

Parameters: String (New element)

Example:

$_("div").append("<p>New paragraph</p>");
Result: The new paragraph will be appended to the div element.
each()

Cycles through all the elements of the collection and runs the given function.

Parameters: Callback Function. The element is sent to this function as a parameter.

Example:

$_("div p.summary").each(function(element){
	$_(element).style({color: "rgb(66, 66, 66);"});
});
Result: The function will be run for each p.summary element inside the div.
get()

Returns an element of the collection by it's index.

Parameters: Integer (Index)

Returns: Aegis Object

Example:

$_("div p.summary").get(0);
Result: This will return the first element of the collection.
isVisible()

Check if an element is visible or not.

Returns: Boolean

Example:

$_(".hidden").isVisible();
Result: True/False depending on the visibility of the hidden element.
parent()

Returns the parent element.

Returns: Aegis Object

Example:

$_("div.special").parent();
Result: An Aegis object with the parent element of the div.
find()

Find other element inside an element.

Parameters: String (Selector)

Returns: Aegis Object

Example:

$_("div.stack").find("span.needle");
Result: An Aegis object with the "span.needle" element if found.
offset()

Gets the top and left coordinates of an element relative to the document.

Parameters: String (Selector)

Returns: JSON Object

Example:

$_(".floating").offset();
Result:
{
			top: 100,
			left: 100
		}
closest()

Finds the closest element that matches the given selector to the current element.

Parameters: String (Selector)

Returns: Aegis Object

Example:

$_("div p.summary").closest(".copy");
Result: An Aegis object with the closest .copy element to the p.summary element.
attribute()

Gets the required attribute of an element or sets it.

Parameters: String (Selector)

Returns: String

Example:

$_("img.cover").attribute("src");
Result: Returns the source of the img.cover element.
$_("img.cover").attribute("src", "http://example.com/img/newImage.png");
Result: Sets the source of the img.cover element to http://example.com/img/newImage.png.
after()

Insert content after each element.

Parameters: String (Content)

Example:

$_("div p.summary").after("<p>Some content</p>");
Result: The Some content paragraph will be added after the p.summary elements.
before()

Insert content before each element.

Parameters: String (Content)

Example:

$_("div p.summary").before("<p>Some content</p>");
Result: The Some content paragraph will be added before the p.summary elements.
style()

Sets the given style properties to the element.

Parameters: String (Selector)

Returns: Aegis Object

Example:

$_("div p.summary").style({color: "red", margin: "1em"});
Result: The p.summary elements will now have a red color and a margin of 1em.
animate()

Custom animation of CSS properties.

Parameters: JSON Object (CSS properties), Integer (Speed)

Example:

$_('html, body').animate({scrollTop: 500}, 1000);
Result: The page will be smooth scrolled to the 500px distance.

Notification

The notification module uses the new HTML5 notifications API and may not work in some browsers.

Request

This module handles HTTP requests.

get()

Sends a GET request.

Parameters: String (Url), JSON Object (Data), JSON Object (Callback functions)

Optional Parameters: String (Response Type)

Returns: XMLHttpRequest object

Example:

Request.get("http://example.com/json/", {lang: "en"} {
	onload: function (request){

	},

	onerror: function(request){

	}
});
Result: The request will be sent, when it succeeds it will launch the onload function, if there's an error, it will launch the onerror function.
post()

Sends a POST request.

Parameters: String (Url), JSON Object (Data), JSON Object (Callback functions)

Optional Parameters: String (Response Type), String (Content Type)

Returns: XMLHttpRequest object

Example:

Request.post("http://example.com/json/", new FormData($_("#myForm").get(0)), "text", "multipart/form-data" {
	onload: function (request){

	},

	onerror: function(request){

	}
});
Result: The request will be sent, when it succeeds it will launch the onload function, if there's an error, it will launch the onerror function.
json()

Retrieves JSON from a given url.

Parameters: String (Url), JSON Object (Callback functions)

Returns: XMLHttpRequest object

Example:

Request.json("http://example.com/json/", {
	onload: function (request){

	},

	onerror: function(request){

	}
});
Result: The request will be sent, when it succeeds it will launch the onload function, if there's an error, it will launch the onerror function.

Screen

The screen module takes care of checking information from the device's screen.

isRetina()

Checks if the display has Retina resolution.

Returns: Boolean

Example:

Screen.isRetina();
Result: true/false
isPortrait()

Checks if the device is in Portrait orientation.

Returns: Boolean

Example:

Screen.isPortrait();
Result: true/false
isLandscape()

Checks if the device is in Landscape orientation.

Returns: Boolean

Example:

Screen.isLandscape();
Result: true/false
getOrientation()

Gets the device current orientation.

Returns: String (Orientation)

Example:

Screen.getOrientation();
Result: "Portrait"/"Landscape"
getMaximumWidth()

Gets the display width.

Returns: Integer (Pixels)

Example:

Screen.getMaximumWidth();
Result: Width measured in number in pixels
getMaximumHeight()

Gets the display height.

Returns: Integer (Pixels)

Example:

Screen.getMaximumHeight();
Result: Height measured in number in pixels

Storage

The storage module uses the HTML5 Local Storage and deals with the related tasks.

set()

Stores a given data in a given key-name.

Parameters: String (Key), String (Value)

Example:

Storage.set("Color", "Black");
Result: Stores "Black" in "Color"
get()

Gets the data of a given key.

Parameters: String

Returns: String

Example:

Storage.get("Color");
Result: "Black"
clear()

Deletes all the Locally Stored Data.

Example:

Storage.clear();
Result: Deletes all the stored Data

Text

The text module takes care of text-related tasks and functionalities.

capitalize()

Capitalizes every first letter of all the words in the text.

Parameters: String

Returns: String

Example:

Text.capitalize("hello world");
Result:
"Hello World"
getSuffix()

Gets the suffix of a given phrase in a given text.

Parameters: String (Full Text), String (Key)

Returns: String

Example:

Text.getSuffix("hello world", "hello");
Result:
"world"
getPrefix()

Gets the prefix of a given phrase in a given text.

Parameters: String (Full Text), String (Key)

Returns: String

Example:

Text.capitalize("hello world", "world");
Result:
"hello"
getSelection()

Gets the currently selected text.

Returns: String

Example:

Text.getSelection()
Result: Returns currently selected text.
removeSpecialCharacters()

Removes some special characters (# : ñ í ó ú á é Í Ó Ú Á É ( ) ¡ ¿ /).

Parameters: String

Returns: String

Example:

Text.removePunctuation("And then, he woke up (or not).")
Result:
"And then he woke up or not."
removePunctuation()

Removes all punctuation marks (; : . ,).

Parameters: String

Returns: String

Example:

Text.removePunctuation("And then, he woke up.")
Result:
"And then he woke up"
toUrl()

Encodes a url.

Parameters: String

Returns: String

Example:

Text.toFriendlyUrl("La ñ es especial!");
Result:
"La%20%C3%B1%20es%20especial!"
toFriendlyUrl()

Makes a given text url friendly.

Parameters: String

Returns: String

Example:

Text.toFriendlyUrl("La ñ es especial!");
Result:
"La-n-es-especial"