A JavaScript utility library oriented to real world tasks.
Tiny aims to stay small and simple, while powerful and really useful.
Inspired by jQuery and Underscore, but using concepts from You might not need jQuery and the power of ES6 (ES2015).
Methods are implemented individually and not as part of a whole.
There are multiple ways to use Tiny.
Grab the distributable code and embed into a <script>
tag just before the closing </body>
tag.
Use NPM or Bower and include Tiny.js as a part of the build process.
npm install tiny.js
bower install tiny
<script src="https://http2.mlstatic.com/ui/chico/tiny/[VERSION]/tiny.min.js"></script>
Check releases to find the latest version number.
Creates a copy of the provided object.
obj
: typeObject
. The object to be cloned.
Returns an Object
.
Copy all of the properties of the sources to the target object and returns the resulting object. The last source will override properties of the same name in previous object.
Inherits the prototype methods from one constructor into another.
The parent will be accessible through the obj.super_
property.
Fully compatible with standard Node.js inherits
.
obj
: typeObject
. An object that will have the new members.superConstructor
: typeFunction
. The constructor Class.
Validates for a valid Object.
obj
: typeObject
. The object to be validated.
Returns a Boolean
.
Node's event emitter.
The most relevant methods:
on()
once()
emmit()
[WIP]
See the external module and the docs for a complete reference.
Attach an event handler for an event to the selected elements.
elem
: typeHTMLElement|String
. An HTMLElement or a CSS selector to add listener toevent
: typeString
. Event name.handler
: typeFunction
. Event handler function.bubbles
: typeBoolean
. Whether or not to be propagated to outer elements.
Example:
tiny.on('.btn', 'click', function(e){ /* ... */ });
tiny.on(document.querySelector('button'), 'click', function(e){ /* ... */ });
Remove an event handler from the element
elem
: typeHTMLElement|String
. An HTMLElement or a CSS selector to remove listener fromevent
: typeString
. Event name.handler
: typeFunction
. Event handler function to remove.
Example:
tiny.off('.btn', 'click', fn);
tiny.off(document.querySelector('button'), 'click', fn);
Attach a handler to an event for the element that executes only once.
elem
: typeHTMLElement|String
. An HTMLElement or a CSS selector to add listener toevent
: typeString
. Event name.handler
: typeFunction
. Event handler function.bubbles
: typeBoolean
. Whether or not to be propagated to outer elements.
Example:
tiny.once('.btn', 'click', fn);
tiny.once(document.querySelector('button'), 'click', fn);
Fires an event for the given element.
elem
: typeHTMLElement|String
. An HTMLElement or a CSS selector to add listener toevent
: typeString|Event
. Event name or an event object.
Example:
tiny.trigger('.btn', 'click');
tiny.trigger(document.querySelector('button'), 'click');
tiny.trigger(document.body, 'layoutchange');
Adds the specified class to an element
el
: AnHTMLElement
className
:String
The class that should be added to an element
Example:
tiny.addClass(document.body, 'example');
Removes the specified class from an element
el
: AnHTMLElement
className
:String
The class that should be removed
Example:
tiny.removeClass(document.body, 'example');
Determines whether is the given class is assigned to an element
el
: AnHTMLElement
className
:String
The class that should be adden to an element
Example:
tiny.hasClass(document.body, 'example'); // => false
Note: tiny.addClass
, tiny.removeClass
and tiny.hasClass
are the methods
of a single module named classList
. It can be imported entirely as
import classList from 'tiny.js/modules/classList'
or as a separated methods
import {addClass, removeClass, hasClass} from 'tiny.js/modules/classList'
Get the parent of an element, optionally filtered by a tag
el
: AnHTMLElement
className
:String
The tag name of the parent to look for
Get the next element sibling
el
: AnHTMLElement
Get the value of a computed style for the first element in set of matched elements or set one or more CSS properties for every matched element.
el
: AnHTMLElement
or a valid CSS selector.key
: A CSS property name. Can be an object of property-value pairs to set.value
: A value to set for the property.
// Setter
tiny.css(el, 'width', 'auto');
tiny.css(el, {
width: 'auto',
height: 'auto'
});
// Getter
tiny.css(el, 'width');
Performs an asynchronous HTTP (Ajax) request.
url
: typeString
. The URL to which the request is sent.settings
: typeObject
. Optional.cache
: typeBoolean
. If set tofalse
, it will force requests not to be cached by the browser. Default:true
data
: typeString
A data that should be passed with xhr, currently sould be formatted as query string like aa=b&c=d
. As an alternativeFormData
can be passedheaders
: typeObject
A list of additional headers, for example{ 'X-Auth': 'auth-token' }
context
: typeObject
Every callback will be called in context ofsettings.context
orwindow
if not provideddataType
: typeString
A mime type, [json,html,text]method
: typeString
A valid HTTP method, [GET|POST|PUT|DELETE]credentials
: typeSting
Use the"include"
value to send cookies in a CORS request, not supported in IE lte 9. Default is"omit"
success
: typeFunction
A success callback that receives response data, status and xhr object.error
: typeFunction
An error callback that receives xhr, status and error object.complete
: A success callback that receives response data, status and xhr object.preload
: typeBoolean
. If set totrue
, it will sent requests without HTTP headers to match with the preloaded resource by the browser. Default:false
.
Example:
tiny.ajax(
"http://xxxx/data.json", {
success: fn,
dataType: "json",
credentials: "include"
}
);
Performs a JSONP request
url
: typeString
. The URL of the requested resource.settings
: typeObject
. Optional.prefix
: typeString
. Prefix for the callback functions that handle JSONP responses. Default:"__jsonp"
name
: typeString|Function
. A name of the callback function that handle JSONP response. Can be a function that receives the prefix and the request id (increment). Default:settings.prefix + increment
param
: typeString
. A name of the query string parameter. Default:"callback"
timeout
: typeNumber
. How long after the request until a timeout error will occur. Default:15000
success
: typeFunction
. Success callback function.error
: typeFunction
. Error callback function.autoCleanup
: typeBoolean
. Cleans the callback function after the first call to guarantee the single execution of callback. Default:true
Tiny loader of javascript sources using CORS. Load scripts asynchronously in parallel maintaining the execution order. See jcors-loader for complete documentation.
Example:
tiny.jcors(
"http://xxxx/jquery.min.js",
function() {
$("#demo").html("jQuery Loaded");
},
"http://xxxx/jquery.cookie.js",
function() {
$.cookie('not_existing');
}
);
Boolean values to determine which features are available in the browser.
Verifies that CSS Animations are supported (or any of its browser-specific implementations).
Example:
if (tiny.support.animation) {
// Some code here!
}
Checks is the User Agent supports touch events.
if (tiny.support.touch) {
// Some code here!
}
Checks is the User Agent supports custom events.
if (tiny.support.customEvent) {
// Some code here!
}
A tiny JavaScript API for handling cookies
Create cookie
key
: typeString
. A cookie name.value
: typeString|Object
. A cookie value.options
: typeObject
expires
: typeNumbre|String
. Define when the cookie will be removed.path
: typeString
. A String indicating the path where the cookie is visible.domain
: typestring
. A valid domain where the cookie should be visible.secure
: typeBoolean
. Indicate if the cookie transmission requires a secure protocol (https).sameSite
: typeBoolean|String
. It’s designed to protect from so-called XSRF (cross-site request forgery) attacks.
Example:
tiny.cookies.set('ID', 1); // Create session cookie
tiny.cookies.set('ID', 2, { expires: 14 }); // Creates a cookie that expires in 14 days
tiny.cookies.set('ID', 2, { sameSite: 'None', secure: true }); // Creates a cookie with SameSite=None; Secure
Read cookie
key
: typeString
A cookie name to get.
Example:
var user_id = tiny.cookies.get('ID');
Delete cookie
key
: typeString
A cookie name to delete.
Example:
tiny.cookies.remove('ID');
Check if the cookie is supported by the browser and enabled
Example:
if (tiny.cookies.isEnabled()) {
showCookiesPolicy();
}
Get the current vertical and horizontal positions of the scroll bars. Returns an object with left
and top
values.
Example:
tiny.scroll(); // { left: 0, top: 1200 }
Get the current offset of an element. Returns an object with left
and top
values.
el
: AnHTMLElement
Example:
tiny.offset(document.querySelector('header')); // { left: 0, top: 20 }
Oleh Burkhay (UX Front-End), and contributors.
Tested on IE8+ and major browsers.
Licensed under the MIT license.
Copyright (c) 2015 MercadoLibre.