Giters

vojtechportes / SJS

SJS - Simple javascript library for modern browsers

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

SJS

version 1.1.13

Simple javascript library for modern browsers.

Issues with Event and Data attribute modules are awaiting to be fixed. Therefore SJS should be used only without this modules. Fix should be ready till April 2016

Benchmark

results

Unit tests

results

Download

SJS with IE9 support

s.js ~ 29.389kb
s.min.js ~ 14.853kb

SJS without IE9 support

s.modern.js ~ 27.568kb
s.modern.min.js ~ 14.093kb

SJS without IE9 support and without Element.Style, Dimension, Require Modules

s.base.js ~ 24.92kb
s.base.min.js ~ 12.628kb

Plugins

SJS-Cookie

Browser support

IE Chrome Firefox Safari
9+ 8+ 13+ ALL (?)

Core

extend

Extend type Object

window.extend('$', function(){
	// Some code
});

implement

Implement new prototype extension to type Object

Node.implement('method', function(){
	// Some code
});

Dollar selector

Dollar selector is an funciton which returns html collection

Arguments:

  • selector
$('body div');

If selector contains only id of element, getElementById is used instead of querySelectorAll and Node is returned instead of NodeList

$('#body-inner');

DOM Ready

document.addEvent('ready', function(){
	// Some code
});

Window Load

window.addEvent('load', function(){
	// Some code
});

Each

each

A generic iterator function which can be used on NodeList, objects or arrays

Array

$.each([1,2,3], function(value, key){
	// Some code
});

HTML collection

$('div').each(function(value, key){
	// Some code
});

Element

By setting window.SJS.data.object to true (by overriding or changing value in src/modules/Core.js or prod/s.*.js), behavior of set get methods will be changed while setting or getting data. Istead of to element, data will be stored in dataCache on window object.

When searching for element via $ selector, or getElement, getElements, getFirstChild, getLastChild, selector property can be used to return original selector.

$('body').selector;

// Return "body"

$('body').getFirstChild().selector;

// Return "body > :first-child"

Element constructor

arguments:

  • tag
  • object

Argument object can contain multiple key types: attribute (eg. class, id, href), data, text, html, styles and events. html can be an array with another element/s constructor or html.

Return Node.

new Element('div', {
	'class': 'item first',
	'data': {
		'content': [1, 2, 3],
		...
	},
	'styles': {
		'background-color': 'yellow',
		'font-size': '42px'
	},
	'events': {
		'click': function () {
			event.preventDefault();
			console.log('click');
		}
	},
	'html': [['div', {
		'class': 'inner',
		'text': 'lorem ipsum dolor sit amet...'
	}], [...]]
});

getNode

Return first element from NodeList or Node

$('div').getNode();

first

Select first element from html collection

$('div').first();

last

Select last element from html collection

$('div').last();

setData

(this method is available in SJS with IE9 support only!)

Node.dataset wrapper

Arguments:

  • key
  • value
$('div').first().setData('content', ['a', 'b']);

getData

(this method is available in SJS with IE9 support only!)

Node.dataset wrapper

Arguments:

  • key
$('div').first().getData('content');

set

Set attribute or data attribute to element, return element or html collection

Special attributes:

html - set inner html, text - set text content, tag - set tag name

Arguments:

  • name - name of attribute
  • value - value of attribute
  • type - type of attribute - data or attr (default)
$('div').set('href', 'http://www.domain.tld');

get

Get attribute or data attribute from element

Special attributes:

html - return inner html, text - return text content, tag - return tag name

Arguments:

  • name - name of attribute
  • type - type of attribute data or attr (default)
// <div data-content='{"heading": "lorem ipsum", "text": "dolor sit amet"}'></div>

$('div').get('content', 'data');

// return {"heading": "lorem ipsum", "text": "dolor sit amet"}

removeData

Remove data from window.dataCache object, return element or html collection

Arguments:

  • name - name of data attribute
$('div').removeData('content');

// remove data "content" from all div elements

getParent

Return parent of element

$('div.someElement').getParent();

getElement

Return first html element

Arguments:

  • selector
$('body div.wrapper').getElement('div')

getElemens

Return all html elements as html collection

Arguments:

  • selector
$('body div.wrapper').getElements('div')

getNext

Return next element or null

$('body div.first').getNext();

getPrevious

Return previous element or null

$('body div.first').getPrevious();

getFirstChild

Return first child element or null

$('body div.wrapper').getFirstChild();

getLastChild

Return last child element or null

$('body div.wrapper').getLastChild();

getSiblings

Return collection of element's siblings

$('body div.wrapper div').getSiblings();

isChildOf

Return true if element is child of parent or return false

Arguments:

  • parent
$('div.feature').isChildOf('.features');

removeElement

Remove html element or collection of elements or child elements

Arguments:

  • selector
// remove all div.wrapper elements

$('body div.wrapper').removeElement();
// remove all divs inside div.wrapper

$('body div.wrapper').removeElement('div');

inject

Inject element to current element

Arguments:

  • tag
  • object - see Element constructor
  • where - before, after, inside (default)

or

  • element/s - Node, NodeList
  • where - before, after, inside (default)
$('body div.wrapper').inject('div', {
	'class': 'inner',
	'text': 'lorem ipsum dolor sit amet...'
}, 'after');

$('body div.wrapper').inject([
	new Element('div'),
	new Element('p')
]);

cloneElement

Return cloned element without events

var element = $('div').first().cloneElement();

// Return element

$('div').first().inject($('div').first());

Element Class

addClass

Add class to element/s, return element or html collection

Arguments:

  • name - class name/s
$('div').addClass('item first');

hasClass

Returns true or false

Arguments:

  • name - class name/s
$('div').hasClass('item');

removeClass

Remove class from element/s, return element or html collection

Arguments:

  • name - class name/s
$('div').removeClass('item');

toggleClass

Toggle class on element, return element or html collection

Arguments:

  • name - class name/s
$('div').toggleClass('active');

Element Style

setStyle

Add style to element/s, return element

Arguments:

  • property
  • value
$('div').setStyle('background-color', 'blue');

setStyles

Add style object to element/s, return element or html collection

Arguments:

  • object - style object
$('div').setStyles({
	'background-color': 'blue',
	'font-size': '48px',
	'color': 'white'
});

getStyle

Return style value or false in case element has no such style

Arguments:

  • property
$('div').getStyle('background-color');

removeStyle

Remove style from element or return false in case element has no such style, return element or html collection

$('div').removeStyle('color');

Element Event

All events are stored on window object. They are accesible on window.eventCache.

To trigger custom event use method fireEvent. To listen custom event, use addEvent method.

Events can be namespaced in format eventname.namespace[.namespace,...]

Events can be also removed, cloned, fired or retrieved from cache by its namespace.

getEventCache

Return all informations about element event from window object

Arguments:

  • element
  • type - type of event (eg. click, scroll etc.)
window.getEventCache($('div').first(), 'click');

// return eg.: {'type': 'click', 'fce': function(){ console.log('click') }, 'eid': 'e_78354214568'}

Event constructor (cache)

new SEvent(object)
register

Add event listener to cache

Arguments:

  • event
var e = new SEvent({
	'el': $('div').first(),
	'type': 'click',
	'fce': function(){
		console.log('click');
	}});
e.register(event);
unregister

Remove event listener from cache

var e - new SEvent({'el': $('div').first(), 'eid': 'e_78354214568'});
e.unregister();

addEvent

Add event listener to element/s

Arguments:

  • type - eg. click, scroll etc.
  • callback
  • capture - true or false (default)

or

  • cache event listener object
$('div').first().addEvent('click', function(){
	event.stopPropagation();
	console.log('click');
});
var e = $('div').first().cloneEvent('click');
$('p').addEvent(e);

removeEvent

Remove event listener from element/s

Arguments:

  • type - eg. click, scroll etc.
  • capture - true or false (default)
$('div').first().removeEvent('click');
$('div').first().removeEvent('.myNamespace');

// all events with namespace "myNamespace" from first div in collection

cloneEvent

Return event listener cache object of element

Arguments:

  • type - eg. click, scroll etc.
  • element - element/s on which will be event cloned (optional)
$('div').first().cloneEvent('click');

// return eg.: {'type': 'click', 'fce': function(){ console.log('click') }, 'eid': 'e_78354214568'}

$('div').first().cloneEvent('click', $('p'));

// clone click event listener from first div element in DOM and apply it to all paragraph elements in DOM
$('div').first().cloneEvent('.myNamespace', $('p'));

// clone all event listeners with namespace "myNamespace" from first div element in DOM and apply it to all paragraph elements in DOM

fireEvent

Fire event on element/s.

Arguments:

  • type - eg. click, scroll etc.
// Fire click event on all div elements

$('div').fireEvent('click');
// Fire click event on div element

$('div').first().fireEvent('click');
// Fire all events with namespace "myNamespace" on div element

$('div').first().fireEvent('.myNamespace');

String

toCamelCase

Return camel case string

'lorem ipsum'.toCamelCase();

// return LoremIpsum

firstUpper

Return string with first letter in upper case format

'lorem ipsum'.firstUpper();

// return Lorem ipsum

escapeRegex

Return escaped string that can be used in regex pattern

'lorem.ipsum(dolor)'.escapeRegex();

// return lorem\.ipsum\(dolor\)

Dimension

offset

Return offset of element as object

$('div').offset();

// return {'top': 8, 'bottom': 8, 'left': 8, 'right': 28}

offsetParent

Return offset of parent element as object

$('div').parentOffset();

// return {'top': 0, 'bottom': 0, 'left': 0, 'right': 0}

size

Return size of element or window as object

Arguments:

  • outer - true / false (default)
$('div').size();

// return {'x': 800, 'y': 200}

window.size();

// return {'x': 1920, 'y': 1200}

Array / Object

clear

Clear duplicites in array

['a', 'b', 'a'].clear();

// return ['a', 'b']

clean

Clean values that are undefined or empty strings

['a', 'b', undefined, '', 'c'].clean();

// return ['a', 'b', 'c']

merge

Merge the contents of two or more objects (object, or array) into first object

Arguments:

  • objects - array, array of arrays or objects
  • deep - true / false (default), if true merge will become recursive
$.merge([[1,2,3], [4]]);

// ^- will output [4,2,3]

$.merge([[1,[1,2],3], [1,[3]]]);

// ^- will output [1,[3],3]

$.merge([[1,[1,2],3], [1,[3]]], true);

// ^- will output [1,[1,3],3]

Request

Request constructor

Request constructor creates an request object settings. If content of file is in valid JSON format, JSON is returned as response.

Arguments:

  • object
  • object.method - POST (default) or GET
  • object.type - document or none (empty string) (default)
  • object.async - true (default) or false
  • object.url - url can contain selector in format "url(space)selector"
  • object.events - loading, error, complete (complete event is mandatory)
  • object.events.loading
  • object.events.error
  • object.events.complete
new Request({
	'method': 'GET',
	'url': 'ajax.html #inner',
	'type': 'document',
	'events': {
		'complete': function(response) {
			console.log(response);
		},
		'loading': function(){
			console.log('loading...');
		},		
		'error': function() {
			console.warn('something bad happend');
		}
	}
});

send

Send method is method of Request object.

Arguments:

  • query - Query string in case POST method is used in Request constructor
var r = new Request({
	'method': 'GET',
	'url': 'ajax.html #inner',
	'type': 'document',
	'events': {
		'complete': function(response) {
			console.log(response);
		},
		'loading': function(){
			console.log('loading...');
		},
		'error': function() {
			console.warn('something bad happend');
		}
	}
});

r.send();

load

Load is method of Node, NodeList. Return responseXML or responseText. Returned value is "loaded" into element on which is method used by injecting or seting text content. If method is called on NodeList, content is loaded to first element of NodeList.

Arguments:

  • url
  • type - document or default (default)
$('#content').load('ajax.html #inner p', 'document');

Require

Require is an function loading JavaScript files.

Arguments:

  • path/s - single path or array of paths to files
  • callback - callback is called when all files are loaded
Require(['script1.js', 'script2.js', 'script3.js'], function(){
	console.log('all scripts are loaded.');
});

About

SJS - Simple javascript library for modern browsers

Languages

Language:JavaScript 95.9%Language:HTML 2.8%Language:PHP 0.7%Language:CSS 0.6%