DEPRECATED, use frontools instead
·▄▄▄▄▄▄ ▐ ▄ ▄▄▄▄▄ ▄▄▌ .▄▄ ·
▐▄▄·▀▄ █·▪ •█▌▐█•██ ▪ ▪ ██• ▐█ ▀.
██▪ ▐▀▀▄ ▄█▀▄ ▐█▐▐▌ ▐█.▪ ▄█▀▄ ▄█▀▄ ██▪ ▄▀▀▀█▄
██▌.▐█•█▌▐█▌.▐▌██▐█▌ ▐█▌·▐█▌.▐▌▐█▌.▐▌▐█▌▐▌▐█▄▪▐█
▀▀▀ .▀ ▀ ▀█▄▀▪▀▀ █▪ ▀▀▀ ▀█▄▀▪ ▀█▄▀▪.▀▀▀ ▀▀▀▀
The front-end designer's low-level toolbox
About Frontools
Frontools is a bundle of tools for front-end designers who want to have a low level development workflow. No bullshit, it's easy to learn.
It supports only modern browsers
Installation
npm install frontools-js-polyfills --save-dev
import "frontools-js-polyfills";
// or individually
import "frontools-js-polyfills/source/Array.js";
import "frontools-js-polyfills/source/Element.js";
import "frontools-js-polyfills/source/Math.js";
import "frontools-js-polyfills/source/MouseEvent.js";
import "frontools-js-polyfills/source/String.js";Usage
Array
Min, max
var x = [ 1, 4, 9 ];
a = x.max; // 9
b = x.min; // 1Element
var element = document.getElementById( "#element-id" );Vertical State
Top position in the page
var top = element.verticalState.top;Detect visibility
window.addEventListener( "scroll", function () {
// true if hidden under the viewport
element.verticalState.ahead;
// true if one pixel of the element is visible from the bottom
element.verticalState.entering;
// true if 100% of the element is visible in the viewport
// true if it takes 100% of the viewport
element.verticalState.contained;
// true if one pixel of the element is exiting from the top
element.verticalState.exiting;
// true if hidden above the viewport
element.verticalState.behind;
} );You can also define limits:
window.addEventListener( "scroll", function () {
element.verticalState.getBoundedState( "ahead" ) == element.verticalState.ahead;
// Top margin and bottom margins are equivalents. Here 100px;
element.verticalState.getBoundedState( "entering", [ 100 ] )
// Top margin is 100px high and bottom margins is 200px high;
element.verticalState.getBoundedState( "contained", [ 100, 200 ] )
} );Scroll the page to the element
// Speed is 35 pixels per frame at ~60fps
element.scrollIntoViewport();
// change the speed
element.scrollIntoViewport({ speed: 50 });
// give at top margin. Default 0 pixels
element.scrollIntoViewport({ marginTop: 150 });
// launch a callback once scrolled
element.scrollIntoViewport({ callback: function() {
console.log( "Hi there!" );
} });
// you can define them together
element.scrollIntoViewport({ speed: 50, marginTop: 150 });Remove all children present in Element
element.empty();Math
Easing functions
Math.easeInCubic(), Math.easeOutCubic(), Math.easeInOutCubic()
var change = 0;
// while in a loop for example - from 0 to 1000;
var change += Math.easeOutCubic( Date.now() - start, 0, change, 1000 );Limited random
var r1 = Math.randomArbitrary() // between 0 and 1 - Float
var r2 = Math.randomArbitrary(10, 40) // between 10 and 40 - IntegerFind next and previous values
var min = 0,
max = 3;
var n1 = Math.getNeighbors( 3, min, max );
// n1.previous = 2; n1.next = 0;
var n2 = Math.getNeighbors( 0, min, max );
// n2.previous = 3; n2.next = 1;Mouse Event
Position in the web page
document.addEventListener( "mousemove", function ( event ) {
var x = event.pageX,
y = event.pageY;
} );String
Shorten Text
var lorem = "Lorem ipsum dolor sit amet.";
var short = lorem.shorten( 2 ); // "Lorem ipsum…"
var short = lorem.shorten( 2, "!" ); // "Lorem ipsum!"Add dummy parameter to avoid AJAX request cache
var url1 = "http://url/api/getvalue";
url1 = url1.uncache(); // "http://url/api/getvalue?_=47571455386523253"
var url2 = "http://url/api/getvalue?p=val";
url2 = url2.uncache(); // "http://url/api/getvalue?p=val&_=47571455386523253"Contribute
There are many ways to contribute to Frontools.
- Submit bugs and help us verify fixes as they are checked in.
- Review the source code changes.
- Join the #frontools discussion on Twitter.
License
This work is licensed under the Creative Commons Attribution-ShareAlike 4.0 International License. To view a copy of this license, visit or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA.
