Skip to content

Javascript polyfills that let you use native javascript.

License

Notifications You must be signed in to change notification settings

ganlanyuan/go-native

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Go-native

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