Add es6 example and update docs

zeusdeux · Mar 12, 2017 · 055d9a0 · 055d9a0
1 parent d5c0a65
commit 055d9a0
Show file tree

Hide file tree

Showing 8 changed files with 197 additions and 6 deletions.
diff --git a/.gitignore b/.gitignore
@@ -27,3 +27,5 @@ isInViewport_*.js
 /**/*.dmp
 TAGS
 /**/*.tern-port
+node_modules
+*compiled*
diff --git a/examples/es6-example/advanced.html b/examples/es6-example/advanced.html
@@ -0,0 +1,106 @@
+<!doctype html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8">
+    <title>
+      ES6/ES2015 module isInViewport Example
+    </title>
+    <link rel="stylesheet" href="./common.css" />
+    <style>
+     .box {
+       -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+       -ms-box-sizing: border-box;
+       box-sizing: border-box;
+       background-color: #C5C7BC;
+       height: 501px;
+       width: 100%;
+       margin-bottom: 2px;
+       text-align: center;
+     }
+     p {
+       padding: 0;
+       margin: 0;
+       line-height: 1.5em;
+       position: relative;
+       top: 50%;
+       transform: translateY(-50%);
+     }
+     .box.last {
+       color: #C5C7BC;
+     }
+     .tolerance {
+       height: 100px;
+       width: 100%;
+       background-color: rgb(212, 12, 20);
+       background-color: rgba(255, 0, 0, 0.4);
+       position: fixed;
+       top: 0;
+       left: 0;
+       z-index: 1;
+     }
+     .tolerance:before, .tolerance:after {
+       content:"";
+       display: table;
+     }
+     .tolerance:after {
+       clear: both;
+     }
+     .tolerance {
+       zoom: 1;
+       /* For IE 6/7 (trigger hasLayout) */
+     }
+     .tolerance * {
+       padding: 36px;
+       color: #fff;
+     }
+    </style>
+    <script src="./advanced.compiled.js">
+    </script>
+  </head>
+
+  <body>
+    <div class="tolerance">
+      <a class="right">Tolerance Area (Tolerance = 100px)</a>
+    </div>
+    <div id="container">
+      <div class="box">
+        <p>
+          1
+        </p>
+      </div>
+      <div class="box">
+        <p>
+          2
+        </p>
+      </div>
+      <div class="box">
+        <p>
+          3
+        </p>
+      </div>
+      <div class="box">
+        <p>
+          4
+        </p>
+      </div>
+      <div class="box">
+        <p>
+          5
+        </p>
+      </div>
+      <div class="box">
+        <p>
+          6
+        </p>
+      </div>
+      <div class="box last">
+        <p>
+          This div, if not in the tolerance area, will never turn light grey.
+        </p>
+      </div>
+    </div>
+  </body>
+
+</html>
diff --git a/examples/es6-example/advanced.js b/examples/es6-example/advanced.js
@@ -0,0 +1,13 @@
+import $ from 'jquery'
+import 'is-in-viewport'
+
+
+$(document).ready(function() {
+  $('#container > div.box').css('background-color', '#21221E')
+  $('#container > div.box:in-viewport(100)').css('background-color', '#C5C7BC')
+
+  $(window).scroll(function() {
+    $('#container > div.box').css('background-color', '#21221E')
+    $('#container > div.box:in-viewport(100)').css('background-color', '#C5C7BC')
+  })
+})
diff --git a/examples/es6-example/common.css b/examples/es6-example/common.css
@@ -0,0 +1,19 @@
+body {
+    margin: 0;
+    padding: 0;
+    background-color: #FBFBFB;
+    color: #151612;
+    font-family:"Century Gothic", CenturyGothic, AppleGothic, sans-serif;
+}
+h1 {
+    font-size: 3em;
+}
+a, a:visited, a:active, a:hover {
+    text-decoration: none;
+}
+.left {
+	float: left;
+}
+.right {
+	float: right;
+}
diff --git a/examples/es6-example/package.json b/examples/es6-example/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "is-in-viewport-es6-example",
+  "version": "1.0.0",
+  "description": "An example of using is-in-viewport in an es6 module",
+  "main": "advanced.compiled.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "rollup -c",
+    "prepublish": "rollup -c"
+  },
+  "author": "Mudit Ameta",
+  "license": "MIT",
+  "devDependencies": {
+    "rollup": "^0.41.5",
+    "rollup-plugin-commonjs": "^8.0.2",
+    "rollup-plugin-node-resolve": "^2.0.0"
+  },
+  "dependencies": {
+    "jquery": "^3.1.1"
+  }
+}
diff --git a/examples/es6-example/readme.md b/examples/es6-example/readme.md
@@ -0,0 +1,5 @@
+# Using `is-in-viewport` in an ES6/ES2015 module
+-----
+
+Run `npm install` in this folder and then serve it.
+Navigate to `advanced.html` and you shall the plugin loaded up.
diff --git a/examples/es6-example/rollup.config.js b/examples/es6-example/rollup.config.js
@@ -0,0 +1,13 @@
+import commonjs from 'rollup-plugin-commonjs'
+import nodeResolve from 'rollup-plugin-node-resolve'
+
+export default {
+  entry: './advanced.js',
+  dest: './advanced.compiled.js',
+  format: 'iife',
+  globals: {
+    window: 'window'
+  },
+  external: ['window'],
+  plugins: [nodeResolve({ skip: ['window'] }), commonjs({ exclude: ['window'] })]
+}
diff --git a/readme.md b/readme.md
@@ -1,17 +1,29 @@
 isInViewport.js
 ================
-[![Build Status](https://travis-ci.org/zeusdeux/isInViewport.svg?branch=dev)](https://travis-ci.org/zeusdeux/isInViewport)
+[![Build Status](https://travis-ci.org/zeusdeux/isInViewport.svg?branch=dev)](https://travis-ci.org/zeusdeux/isInViewport.svg?branch=master)
 [![CDNJS](https://img.shields.io/cdnjs/v/is-in-viewport.svg)](https://cdnjs.com/libraries/is-in-viewport)
 
 An ultra-light jQuery plugin that tells you if the element is in the viewport, but with a twist.
-Did you say [demo](http://www.isinviewport.mudit.xyz) (inclusive of tests & code coverage)?
-
-## NOTE: The demo is now back up!
+Did you say [demo](http://www.isinviewport.mudit.xyz) (inclusive of tests)?
 
 Installation
 ----------------
+#### Recommended method
+
+```js
+npm install --save is-in-viewport
+```
+You can then `require('is-in-viewport')` or `import 'is-in-viewport'` in your code.
+It will automagically work with the bundlers of your choice. If it breaks, please feel free to open an issue.
+Example usage in an ES6/ES2015 module is shown [in the `examples/es6-example`](./examples/es6-example/) folder.
+
+__Note__: `isInViewport` is a side-effecting module. It imports `jquery` that you have installed and attaches itself on it.
+As a consequence, `isInViewport` requires `jquery` to be installed as a peer dependency.
+Your bundling will fail if `jquery` isn't installed as [this `import`s `jquery`](./src/index.js#L2).
+
+#### Legacy installation method
 - Get the release that you want from [releases/tags](https://github.com/zeusdeux/isInViewport/releases) ( or `bower install isInViewport` or `npm install is-in-viewport`)
-- Copy either `isInViewport.js` or `isInViewport.min.js` from the `lib` folder to your folder containing your scripts
+- Copy either `isInViewport.js` or `isInViewport.min.js` from the `lib` folder to your folder containing your scripts. They both have full sourcemap support.
 - Add it after you include `jQuery`
 - You're ready to go!
 
@@ -140,7 +152,7 @@ Changelog
 
 - Remove the deprecated `$(el).do` method
 - Remove support for browsers < {IE9, Safari 5, Opera 10.5, Firefox 3.5}
-- Add support for ES6 modules. You can now do `import 'is-in-viewport'` in your ES6 module.
+- Add support for ES6 modules. You can now do `import 'is-in-viewport'` in your ES6 module
 
 `2.4.2`