Compiles to UMD for use on NPM updated the docs.

README.md

@@ -3,15 +3,79 @@
 [Live demo](http://nigelotoole.github.io/direction-reveal/)
 
 ## Direction aware content reveals
-This plugin detects the side a user enters and exits a block, allowing you to reveal and hide content based on this direction.
+This plugin detects which direction a user enters/exits a block, allowing you to reveal/hide content based on this direction.
+The hidden content can animate in from the direction the user enters and animate out the direction the user leaves, allowing you to create interesting animation effects.
+
+
+
+## Installation
+```javascript
+$ npm install direction-reveal --save-dev
+```
 
 
 ## Usage
 
-Once you have downloaded the code, run the commands below to view the demo.
+### Import
+
+The script is an ES6(ES2015) module but a compiled version is included in the build as index.js. You can also copy scripts/direction-reveal.js into your own site if your build process can accomodate ES6 modules, Babel and Browserify are used in the demo site.
 
 ```javascript
-$ npm install direction-reveal --save-dev
+import DirectionReveal from 'direction-reveal';
+
+// Init with default setup
+const directionRevealDemo = DirectionReveal();
+
+// Init with all options at default setting
+const directionRevealSwing = DirectionReveal({
+  selector: '.direction-reveal',              // Container element selector.
+  itemSelector: '.direction-reveal__card',    // Item element selector.
+  animationName: 'swing',                     // Animation CSS class.
+  enableTouch: true,                          // Adds touch event to show content on first click then follow link on the second click.
+  touchThreshold: 250                         // Touch length must be less than this to trigger reveal which prevents the event triggering if user is scrolling.
+});
+```
+
+
+### HTML
+
+```html
+  <div class="direction-reveal">
+
+    <a href="#" class="direction-reveal__card">
+      <img src="images/image.jpg" alt="Image" class="img-fluid">
+
+      <div class="direction-reveal__overlay">
+        <h3 class="direction-reveal__title">Title</h3>
+        <p class="direction-reveal__text">Description text.</p>
+      </div>
+    </a>
+
+    ...
+
+  </div>
+```
+
+
+### Using other tags
+The demos use <a> tags for the "direction-reveal__card" but a <div> can be used as below, specifiying the tabindex ensures keyboard navigation works as expected. They can all have a value of 0 and will follow the source order of the divs.
+
+```html
+<div class="direction-reveal__card" tabindex="0">
+  ...
+</div>
+```
+
+### Touch support
+The plugin will detect touch support and reveal the hidden content on first click then follow link on the second click. This can be disabled in the options.
+
+
+
+## Demo site
+Clone or download from Github.
+
+```javascript
+$ npm install
 $ gulp serve
 ```
 

gulpfile.js

@@ -25,7 +25,9 @@ gulp.task('styles', () => {
 });
 
 
+// Compiles scripts for browser
 gulp.task('scripts', () => {
+
   const browserifyBundle = browserify({
     entries: `scripts/main.js`,
     transform: babelify,
@@ -40,10 +42,23 @@ gulp.task('scripts', () => {
     .pipe($.sourcemaps.write('.'))
     .pipe(gulp.dest(`scripts`))
     .pipe(reload({ stream: true }))
+
 });
 
 
-gulp.task('serve', ['styles'], () => {
+// Compiles scripts to UMD for NPM
+gulp.task('scriptsNPM', () => {
+  return gulp.src('scripts/direction-reveal.js')
+    .pipe($.plumber())
+    .pipe($.babel({
+      plugins: ['transform-es2015-modules-umd']
+    }))
+    .pipe($.rename('index.js'))
+    .pipe(gulp.dest('./'))
+});
+
+
+gulp.task('serve', ['styles', 'scripts', 'scriptsNPM'], () => {
   browserSync.init({
     notify: false,
     port: 9000,
@@ -52,14 +67,9 @@ gulp.task('serve', ['styles'], () => {
     }
   });
 
-  gulp.watch([
-    '*.html'
-    // 'styles/**/*',
-    // 'scripts/**/*'
-  ]).on('change', reload);
-
+  gulp.watch(['*.html']).on('change', reload);
   gulp.watch('styles/**/*.scss', ['styles']);
-  gulp.watch('scripts/**/*.js', ['scripts']);
+  gulp.watch('scripts/**/*.js', ['scripts', 'scriptsNPM']);
 });
 
 gulp.task('default', ['serve']);