frontools-js-polyfills v0.4.6

·▄▄▄▄▄▄         ▐ ▄ ▄▄▄▄▄            ▄▄▌  .▄▄ ·
▐▄▄·▀▄ █·▪     •█▌▐█•██  ▪     ▪     ██•  ▐█ ▀.
██▪ ▐▀▀▄  ▄█▀▄ ▐█▐▐▌ ▐█.▪ ▄█▀▄  ▄█▀▄ ██▪  ▄▀▀▀█▄
██▌.▐█•█▌▐█▌.▐▌██▐█▌ ▐█▌·▐█▌.▐▌▐█▌.▐▌▐█▌▐▌▐█▄▪▐█
▀▀▀ .▀  ▀ ▀█▄▀▪▀▀ █▪ ▀▀▀  ▀█▄▀▪ ▀█▄▀▪.▀▀▀  ▀▀▀▀
     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;          // 1

Element

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 - Integer

Find 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.