Merge pull request loryjs#150 from meandmax/update-readme-pindown-deps

Pin down dependencies, update docs
lkuechler · Dec 17, 2015 · ff25b49 · ff25b49
2 parents 1d1cb56 + 1f38d3c
commit ff25b49
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -22,12 +22,36 @@ Please visit: [http://meandmax.github.io/lory/](http://meandmax.github.io/lory/
 
 [![Sauce Test Status](https://saucelabs.com/browser-matrix/meandmax.svg)](https://saucelabs.com/u/meandmax)
 
-## Install with node
+## Install with node in es2015:
 
 ```
 npm install --save lory.js
+```
+
+```js
+    import {lory} from 'lory.js';
+
+    document.addEventListener('DOMContentLoaded', () => {
+        const slider = document.querySelector('.js_slider');
+
+        lory(slider, {
+            // options going here
+        });
+    });
+```
 
-import lory from 'lory.js';
+## Consume it as an ES2015 module:
+
+```js
+    var lory = require('lory.js').lory;
+
+    document.addEventListener('DOMContentLoaded', function() {
+        var slider = document.querySelector('.js_slider');
+
+        lory(slider, {
+            // options going here
+        });
+    });
 ```
 
 ## Install with bower

diff --git a/demo/index.html b/demo/index.html
@@ -424,6 +424,42 @@ <h2>initialize multiple similiar sliders</h2>
 
 </section>
 
+<section class="commonJS">
+<h2>Consume it as a commonJS module</h2>
+
+<div class="examplecode"><pre><code class="javascript">
+    "use strict";
+
+    var lory = require('lory.js').lory;
+
+    document.addEventListener('DOMContentLoaded', function() {
+        var slider = document.querySelector('.js_slider');
+
+        lory(slider, {
+            // options going here
+        });
+    });
+
+</code></pre></div>
+
+</section>
+
+<section class="ES2015">
+<h2>Consume it as an ES2015 module</h2>
+
+<div class="examplecode"><pre><code class="javascript">
+    import {lory} from 'lory.js';
+
+    document.addEventListener('DOMContentLoaded', () => {
+        const slider = document.querySelector('.js_slider');
+
+        lory(slider, {
+            // options going here
+        });
+    });
+
+</code></pre></div>
+
 <section class="jquery">
 <h2>Use it as a jQuery Plugin</h2>
 

diff --git a/index.html b/index.html
@@ -423,6 +423,42 @@ <h2>initialize multiple similiar sliders</h2>
 
 </section>
 
+<section class="commonJS">
+<h2>Consume it as a commonJS module</h2>
+
+<div class="examplecode"><pre><code class="javascript">
+    "use strict";
+
+    var lory = require('lory.js').lory;
+
+    document.addEventListener('DOMContentLoaded', function() {
+        var slider = document.querySelector('.js_slider');
+
+        lory(slider, {
+            // options going here
+        });
+    });
+
+</code></pre></div>
+
+</section>
+
+<section class="ES2015">
+<h2>Consume it as an ES2015 module</h2>
+
+<div class="examplecode"><pre><code class="javascript">
+    import {lory} from 'lory.js';
+
+    document.addEventListener('DOMContentLoaded', () => {
+        const slider = document.querySelector('.js_slider');
+
+        lory(slider, {
+            // options going here
+        });
+    });
+
+</code></pre></div>
+
 <section class="jquery">
 <h2>Use it as a jQuery Plugin</h2>
 

diff --git a/package.json b/package.json
@@ -36,37 +36,37 @@
   "devDependencies": {
     "babel-loader": "6.2.0",
     "babel-core": "6.2.1",
-    "babel-preset-es2015": "^6.0.15",
-    "babel-preset-stage-0": "^6.0.15",
+    "babel-preset-es2015": "6.0.15",
+    "babel-preset-stage-0": "6.0.15",
     "chai": "3.4.1",
     "clamp.js": "0.2.9",
     "custom-event": "1.0.0",
-    "cz-conventional-changelog": "^1.1.4",
+    "cz-conventional-changelog": "1.1.4",
     "dependency-check": "2.5.1",
     "eslint": "1.10.1",
     "eslint-config-standard": "4.4.0",
     "eslint-plugin-standard": "1.3.1",
-    "karma": "^0.13.14",
+    "karma": "0.13.14",
     "karma-chai": "0.1.0",
     "karma-chrome-launcher": "0.2.0",
-    "karma-firefox-launcher": "^0.1.7",
+    "karma-firefox-launcher": "0.1.7",
     "karma-fixture": "0.2.5",
     "karma-html2js-preprocessor": "0.1.0",
-    "karma-ie-launcher": "^0.2.0",
+    "karma-ie-launcher": "0.2.0",
     "karma-mocha": "0.2.0",
     "karma-mocha-reporter": "1.1.3",
-    "karma-opera-launcher": "^0.3.0",
-    "karma-phantomjs-launcher": "^0.2.1",
-    "karma-safari-launcher": "^0.1.1",
-    "karma-sauce-launcher": "^0.3.0",
+    "karma-opera-launcher": "0.3.0",
+    "karma-phantomjs-launcher": "0.2.1",
+    "karma-safari-launcher": "0.1.1",
+    "karma-sauce-launcher": "0.3.0",
     "mocha": "2.3.4",
-    "phantomjs": "^1.9.18",
+    "phantomjs": "1.9.18",
     "rimraf": "2.4.4",
-    "sauce-connect-launcher": "^0.13.0",
-    "saucelabs": "^1.0.1",
-    "semantic-release": "^4.3.5",
+    "sauce-connect-launcher": "0.13.0",
+    "saucelabs": "1.0.1",
+    "semantic-release": "4.3.5",
     "uglify-js": "2.6.1",
-    "watch": "^0.16.0",
+    "watch": "0.16.0",
     "webpack": "1.12.9",
     "webpack-dev-server": "1.14.0"
   },