ganlanyuan/go-native

Javascript polyfills that let you use native javascript.

Go-native

Javascript polyfills which let you use native javascript. Rewrite with ES2015 module.
CSS3 selectors, CSS3 media queries, ES5 extensions and a bunch of DOM utilities.
Tested on IE 8+, Firefox 17+, Chrome 15+, Safari 4+, Opera 10+.

Install

bower install go-native --save

Contents

####go-native.ie8

• NWMatcher (for selectivizr)
• selectivizr
• respond.js
• ES5 Array (every, filter, forEach, indexOf, lastIndexOf, map, reduce, reduceRight, some), Date (now, parse, toISOString, toJSON), Function (bind), Object (create, defineProperties, defineProperty, freeze, getOwnPropertyDescriptor, getOwnPropertyNames, getPrototypeOf, isExtensible, isFrozen, isSealed, keys, preventExtensions, seal) and String (trim) extensions
• Event-related methods:
  • preventDefault
  • stopPropagation
• EventTarget methods:
  • addEventListener
  • removeEventListener
• Element-related properties:
  • el.childElementCount
  • el.firstElementChild
  • el.lastElementChild
  • el.nextElementSibling
  • el.previousElementSibling
• Node-related properties:
  • node.textContent
• Window-related properties/methods:
  • window.getComputedStyle
  • window.innerWidth
  • window.innerHeight
  • window.pageXOffset / window.scrollY
  • window.pageYOffset / window.scrollX

####go-native

• ES5 methods:
  • Number.isNaN
  • String.prototype.repeat
• Element-related properties:
  • el.classList
• Node-related properties:
  • ChildNode.remove
• Length
• requestAnimationFrame
• optimizedResize
• extend
• isNodeList
• DOM related utilities
  • DOM.ready
  • isInViewport
  • indexOf
  • getOuterWidth
  • getOuterHeight
  • getOffsetLeft
  • getOffsetTop
  • getSupportedProp
  • getClosest
  • getParents
  • getParentsUntil
  • getSiblings
  • createElement
  • append
  • prepend
  • wrap
  • wrapAll
  • unwrap

Usage

import go-native in your script (make sure link to src folder, not dist folder)

import * as gn from "../../src/go-native";

Or add go-native.js and go-native.ie8.js to your page.

<!--[if (lt IE 9)]>
  <script src="path/to/go-native.ie8.js"></script>
<![endif]-->
<script src="path/to/go-native.js"></script>

Methods

DOM.ready

gn.ready(function () {
  // do something
  // on DOM ready
});

isInViewport

var el = document.querySelector('.element');
if (gn.isInViewport(el)) {
  // when element is in viewport
  // do something
}

indexOf

var index,
    list = document.querySelectorAll('.list > li'),
    current = document.querySelector('.current');

index = gn.indexOf(list, current);

getOuterWidth

// content + padding + border + margin
var box = document.querySelector('.box'),
    boxWidth = gn.getOuterWidth(box);

getOuterHeight

// content + padding + border + margin
var box = document.querySelector('.box'),
    boxHeight = gn.getOuterHeight(box);

getWidth

// content width
var box = document.querySelector('.box'),
    boxWidth = gn.getWidth(box);

getHeight

// content height
var box = document.querySelector('.box'),
    boxHeight = gn.getHeight(box);

getOffsetLeft

var box = document.querySelector('.box'),
    boxLeft = gn.getOffsetLeft(box);

getOffsetTop

var box = document.querySelector('.box'),
    boxTop = gn.getOffsetTop(box);

getSupportedProp

var transitionDuration = gn.getSupportedProp(['transitionDuration', 'WebkitTransitionDuration', 'MozTransitionDuration', 'OTransitionDuration']);
console.log(transitionDuration);

getClosest

var element = document.querySelector('.element'),
    red = gn.getClosest(element, '.red');

getParents

var element = document.querySelector('.element'),
    red = gn.getParents(element, '.red');

getParentsUntil

getSiblings

var element = document.querySelector('.element'),
    siblings = gn.getSiblings(element);

createElement

var el = gn.createElement({
  tagName: 'div',
  id: 'foo',
  className: 'foo',
  children: [{
   tagName: 'div',
   html: '<b>Hello, creatElement</b>',
   attributes: {
     'am-button': 'primary'
   }
  }]
});

append

var container = document.querySelector('.container');
gn.append(container, '<li>Peach</li>');
gn.append(container, el);

prepend

var container = document.querySelector('.container');
gn.prepend(container, '<li>Pear</li>');
gn.prepend(container, el);

wrap

var p = doc.querySelectorAll('p'),
    div = doc.createElement('div');
gn.wrap(p, div);

wrapAll

var p = doc.querySelectorAll('p'),
    div = doc.createElement('div');
gn.wrapAll(p, div);

unwrap

var container = doc.querySelectorAll('.container');
gn.unwrap(container);

Credit:

NWMatcher from dperini.
selectivizr from keithclark.
respond from scottjehl.
Length from heygrady.
requestAnimationFrame from darius.
indexOf from HubSpot/youmightnotneedjquery.

ES5 Array, Function, Date, Object and String extensions from 280north/narwhal.

preventDefault, stopPropagation, addEventListener, removeEventListener, node.textContent and optimizedResize from the Mozilla Developer Network.

el.classList, el.childElementCount, el.firstElementChild, el.lastElementChild, el.nextElementSibling, el.previousElementSibling, ChildNode.remove, window.getComputedStyle, window.innerWidth, window.innerHeight, window.pageXOffset, window.pageYOffset, Array.isArray, Number.isNaN and String.prototype.repeat from Alhadis.

DOM.ready, isInViewport, getClosest, getParents, getParentsUntil and getSiblings from Chris Ferdinandi.

License

This project is available under the MIT license.