Miss any of our Open RFC calls?Watch the recordings here! »

go-native

1.0.0 • Public • Published

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.

Install

npm i go-native

DownloadsWeekly Downloads

99

Version

1.0.0

License

MIT

Last publish

Collaborators

  • avatar