Merge pull request #1 from Leko/v0.8.0

v0.8.0

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["es2015"],
+  "plugins": ["transform-class-properties"]
+}

.editorconfig

@@ -0,0 +1,6 @@
+
+root = true
+
+[{*.js,*.json}]
+indent_style = space
+indent_size = 2

.gitignore

@@ -35,3 +35,5 @@ jspm_packages
 
 # Optional REPL history
 .node_repl_history
+/dist/
+!/dist/.keep

README.md

@@ -1,25 +1,30 @@
-# in-progress.js
-Prevent screen transition if any state changed.
+<h1 align="center">
+  <br>
+  in-progress.js
+  <br>
+  <br>
+</h1>
+<p align="center">
+  <a href="https://circleci.com/gh/Leko/in-progress.js/tree/master"><img src="https://circleci.com/gh/Leko/in-progress.js/tree/master.svg?style=shield" alt="CircleCI"></a>
+  <a href="https://codecov.io/gh/Leko/in-progress.js"><img src="https://codecov.io/gh/Leko/in-progress.js/branch/master/graph/badge.svg" alt="Codecov" /></a>
+  <a href="https://www.npmjs.com/package/in-progress"><img src="https://img.shields.io/npm/v/in-progress.svg" alt="npm version"></a>
+  <a href="https://github.com/Leko/in-progress.js"><img src="https://img.shields.io/bower/v/in-progress.svg" alt="npm version"></a>
+</p>
+<h4 align="center">Prevent screen transition if any state changed.</h4>
 
 ## Getting started
 ```
+npm install in-progress
+bower install in-progress
 ```
 
 ## Usage
 ```js
-import InProgress, {
-  NullDetector
-  ObjectDetector
-  FormValueDetector
-  PromiseDetector
-} from 'in-progress'
-```
-
-### Change detectors
-#### NullDetector
+import { FormValueDetector } from 'in-progress'
 
-#### ObjectDetector
-
-#### FormValueDetector
+const formElement = document.querySelector('#some-form')
+const detector = new FormValueDetector(formElement)
+detector.observe()
+```
 
-#### PromiseDetector
+View [live demo](https://leko.github.io/in-progress.js/)

bower.json

@@ -0,0 +1,23 @@
+{
+  "name": "in-progress",
+  "description": "Prevent screen transition if any state changed.",
+  "main": "dist/inprogress.min.js",
+  "authors": [
+    "Leko <leko.noor@gmail.com>"
+  ],
+  "license": "MIT",
+  "keywords": [
+    "beforeunload",
+    "form",
+    "promise"
+  ],
+  "homepage": "https://github.com/Leko/in-progress.js",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "src",
+    "test",
+    "tests"
+  ]
+}

circle.yml

@@ -0,0 +1,9 @@
+machine:
+  node:
+    version: 6.1.0
+test:
+  pre:
+    - npm run lint
+  post:
+    - npm run build
+    - bash <(curl -s https://codecov.io/bash)

docs/index.html

@@ -0,0 +1,149 @@
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
+
+<div class="container">
+  <h1>in-progress.js demo</h1>
+  <p>
+    Prevent screen transition if any state changed.<br>
+    <a href="https://github.com/Leko/in-progress.js"><< Back to repository</a>
+  </p>
+
+  <form id="demo">
+    <button type="submit" class="btn btn-primary">Save</button>
+    <div class="form-group">
+      <label for="form-title">Title</label>
+      <input type="text" name="title" id="form-title" class="form-control" value="in-progress.js demo">
+    </div>
+
+    <div class="form-group">
+      <label for="form-category">Category</label>
+      <select name="category" id="form-category" class="form-control">
+        <option value="demo">Demo</option>
+        <option value="hobby">Hobby</option>
+        <option value="work">Work</option>
+      </select>
+    </div>
+
+    <div class="form-group">
+      <label for="form-tags">Tags</label>
+      <select name="tags" id="form-tags" class="form-control" multiple>
+        <option value="javascript" selected>javascript</option>
+        <option value="onbeforeunload" selected>onbeforeunload</option>
+        <option value="github" selected>github</option>
+        <option value="open-source" selected>open-source</option>
+        <option value="free" selected>free</option>
+      </select>
+    </div>
+
+    <div class="form-check">
+      <label class="form-check-label">
+        <input type="checkbox" name="share" class="form-check-input" checked> Public
+      </label>
+    </div>
+
+    <fieldset class="form-group">
+      <legend>Timing</legend>
+      <div class="form-check">
+        <label class="form-check-label">
+          <input type="radio" id="form-reservation-off" name="reservation" value="now" class="form-check-input" checked> Publish now
+        </label>
+      </div>
+      <div class="form-check">
+        <label class="form-check-label">
+          <input type="radio" id="form-reservation-on" name="reservation" value="reserve" class="form-check-input"> Rreserve
+          <div class="form-group">
+            <label for="form-date">Date</label>
+            <input type="datetime-local" name="date" id="form-date" class="form-control">
+          </div>
+        </label>
+      </div>
+    </fieldset>
+
+    <div class="form-group">
+      <label for="form-content">Content</label>
+      <textarea name="content" id="form-content" rows="5" class="form-control">
+1. Please change some field
+2. Reload this screen, close tab, browser back
+3. Click save
+3. Try 2 again !
+      </textarea>
+    </div>
+
+    <div class="form-group row">
+      <label for="example-search-input" class="col-2 col-form-label">Search</label>
+      <div class="col-10">
+        <input class="form-control" type="search" value="How do I shoot web" id="example-search-input" name="example-search-input">
+      </div>
+    </div>
+    <div class="form-group row">
+      <label for="example-email-input" class="col-2 col-form-label">Email</label>
+      <div class="col-10">
+        <input class="form-control" type="email" value="bootstrap@example.com" id="example-email-input" name="example-email-input">
+      </div>
+    </div>
+    <div class="form-group row">
+      <label for="example-url-input" class="col-2 col-form-label">URL</label>
+      <div class="col-10">
+        <input class="form-control" type="url" value="https://getbootstrap.com" id="example-url-input" name="example-url-input">
+      </div>
+    </div>
+    <div class="form-group row">
+      <label for="example-tel-input" class="col-2 col-form-label">Telephone</label>
+      <div class="col-10">
+        <input class="form-control" type="tel" value="1-(555)-555-5555" id="example-tel-input" name="example-tel-input">
+      </div>
+    </div>
+    <div class="form-group row">
+      <label for="example-password-input" class="col-2 col-form-label">Password</label>
+      <div class="col-10">
+        <input class="form-control" type="password" value="hunter2" id="example-password-input" name="example-password-input">
+      </div>
+    </div>
+    <div class="form-group row">
+      <label for="example-number-input" class="col-2 col-form-label">Number</label>
+      <div class="col-10">
+        <input class="form-control" type="number" value="42" id="example-number-input" name="example-number-input">
+      </div>
+    </div>
+    <div class="form-group row">
+      <label for="example-date-input" class="col-2 col-form-label">Date</label>
+      <div class="col-10">
+        <input class="form-control" type="date" value="2011-08-19" id="example-date-input" name="example-date-input">
+      </div>
+    </div>
+    <div class="form-group row">
+      <label for="example-month-input" class="col-2 col-form-label">Month</label>
+      <div class="col-10">
+        <input class="form-control" type="month" value="2011-08" id="example-month-input" name="example-month-input">
+      </div>
+    </div>
+    <div class="form-group row">
+      <label for="example-week-input" class="col-2 col-form-label">Week</label>
+      <div class="col-10">
+        <input class="form-control" type="week" value="2011-W33" id="example-week-input" name="example-week-input">
+      </div>
+    </div>
+    <div class="form-group row">
+      <label for="example-time-input" class="col-2 col-form-label">Time</label>
+      <div class="col-10">
+        <input class="form-control" type="time" value="13:45:00" id="example-time-input" name="example-time-input">
+      </div>
+    </div>
+  </form>
+
+  <footer class="text-center">
+    <small>&copy; 2017 Leko</small>
+  </footer>
+</div>
+
+<script src="inprogress.min.js"></script>
+<script>
+const el = document.getElementById('demo')
+const detector = new InProgress.FormValueDetector(el)
+
+el.addEventListener('submit', function (e) {
+  detector.reset()
+  e.preventDefault()
+}, false)
+
+detector.observe()
+</script>

gulpfile.js

@@ -0,0 +1,29 @@
+const path = require('path')
+const gulp = require('gulp')
+const webpack = require('webpack-stream')
+const gutil = require('gulp-util')
+// const gzip = require('gulp-gzip')
+const rename = require('gulp-rename')
+const uglify = require('gulp-uglify')
+const sourcemaps = require('gulp-sourcemaps')
+const webpackConfig = require('./webpack.config.js')
+
+gulp.task('build', (done) => {
+  // inprogress.js
+  webpack(Object.assign(webpackConfig, {
+    entry: path.resolve(__dirname, 'index.js'),
+    output: {
+      filename: 'inprogress.js',
+      library: 'InProgress',
+      libraryTarget: 'umd'
+    }
+  }))
+    .pipe(gulp.dest('dist'))
+    // inprogress.min.js + source map
+    .pipe(sourcemaps.init())
+    .pipe(uglify().on('error', gutil.log))
+    // .pipe(gzip()) // FIXME: Unexpected token
+    .pipe(rename('inprogress.min.js'))
+    .pipe(sourcemaps.write('.'))
+    .pipe(gulp.dest('dist'))
+})

index.js

@@ -1,13 +1,7 @@
-import InProgress from './src/InProgress'
 import NullDetector from './src/NullDetector'
-import ObjectDetector from './src/ObjectDetector'
 import FormValueDetector from './src/FormValueDetector'
-import PromiseDetector from './src/PromiseDetector'
 
-export default InProgress
 export {
   NullDetector,
-  ObjectDetector,
-  FormValueDetector,
-  PromiseDetector
+  FormValueDetector
 }

package.json

@@ -2,9 +2,14 @@
   "name": "in-progress",
   "version": "0.8.0",
   "description": "Prevent screen transition if any state changed.",
-  "main": "index.js",
+  "main": "dist/inprogress.js",
+  "files": [
+    "dist/inprogress.js"
+  ],
   "scripts": {
-    "test": "mocha"
+    "build": "gulp build",
+    "lint": "standard --parser babel-eslint",
+    "test": "istanbul cover _mocha -- --require babel-register --recursive"
   },
   "repository": {
     "type": "git",
@@ -20,5 +25,32 @@
   "bugs": {
     "url": "https://github.com/Leko/in-progress.js/issues"
   },
-  "homepage": "https://github.com/Leko/in-progress.js#readme"
+  "homepage": "https://github.com/Leko/in-progress.js#readme",
+  "dependencies": {
+    "deep-equal": "^1.0.1",
+    "form-serialize": "^0.7.1"
+  },
+  "devDependencies": {
+    "babel-core": "^6.23.1",
+    "babel-eslint": "^7.1.1",
+    "babel-loader": "^6.4.0",
+    "babel-plugin-transform-class-properties": "^6.23.0",
+    "babel-preset-env": "^1.2.1",
+    "babel-preset-es2015": "^6.22.0",
+    "babel-register": "^6.23.0",
+    "gulp": "^3.9.1",
+    "gulp-gzip": "^1.4.0",
+    "gulp-rename": "^1.2.2",
+    "gulp-sourcemaps": "^2.4.1",
+    "gulp-uglify": "^2.0.1",
+    "gulp-util": "^3.0.8",
+    "istanbul": "^1.1.0-alpha.1",
+    "jsdom": "^9.11.0",
+    "mocha": "^3.2.0",
+    "mocha-jsdom": "^1.1.0",
+    "pump": "^1.0.2",
+    "sinon": "^1.17.7",
+    "standard": "^9.0.1",
+    "webpack-stream": "^3.2.0"
+  }
 }

src/FormValueDetector.js

@@ -0,0 +1,22 @@
+/* eslint-env browser */
+import serialize from 'form-serialize'
+import NullDetector from './NullDetector'
+
+export default class FormValueDetector extends NullDetector {
+  static tags = [
+    'input',
+    'textarea',
+    'select'
+  ]
+
+  constructor (formEl, options = {}) {
+    const elements = formEl instanceof NodeList ? Array.from(formEl) : [formEl]
+    super(() => this.getValues(elements))
+  }
+
+  getValues (formElements) {
+    return formElements.reduce((acc, formEl) =>
+      Object.assign(acc, { [formEl.name]: serialize(formEl, { hash: true, empty: true }) })
+    , {})
+  }
+}