Merge branch '2.1'

Author: peter-gribanov

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [ "es2015" ],
+  "plugins": [
+    "babel-polyfill"
+  ]
+}

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+package-lock.json

README.md

@@ -17,7 +17,7 @@ Install from [NPM](https://nodei.co/npm/gpslab-controller/):
 $ npm install gpslab-controller
 ```
 
-Or download the script [here](https://github.com/gpslab/gpslab-controller/blob/master/src/controller.js) and include it (unless you are packaging scripts somehow else):
+Or download the script [here](https://github.com/gpslab/gpslab-controller/blob/master/dist/controller.min.js) and include it (unless you are packaging scripts somehow else):
 
 ```html
 <script src="/path/to/controller.js"></script>
@@ -26,9 +26,14 @@ Or download the script [here](https://github.com/gpslab/gpslab-controller/blob/m
 Or include it via [jsDelivr CDN](https://www.jsdelivr.com/package/npm/gpslab-controller):
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/gpslab-controller@2/src/controller.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/gpslab-controller@2/dist/controller.min.js"></script>
 ```
 
+## ECMAScript 2016
+
+This framework is written for ECMAScript 2016, but you can use the recompiled version for
+[ECMAScript 2015](dist/controller.es2015.min.js).
+
 ## Methods
 
 The library exposes these methods: `registerControl()`, `registerControls()`, `singleBind()`, `bind()`.
@@ -68,7 +73,7 @@ Binding the control for single specific element.
 
 #### Arguments
 
-1. `element` (**HTMLElement**) HTMLElement for binding.
+1. `element` (**Element**) Element for binding.
 
 #### Returns
 
@@ -82,7 +87,7 @@ Find the controls in element and children elements and binding it.
 
 #### Arguments
 
-1. `element` (**?HTMLElement**) HTMLElement for binding. The `BODY` element as a default.
+1. `element` (**Element**) Element for binding.
 
 #### Returns
 
@@ -94,10 +99,10 @@ Create new control for bind [the jQuery datepicker](https://jqueryui.com/datepic
 controller:
 
 ```js
-Controller.registerControl('form-date', element => $(element).datepicker({dateFormat: 'yy-mm-dd'}));
+Controller.registerControl('date-picker', element => $(element).datepicker({dateFormat: 'yy-mm-dd'}));
 
 document.addEventListener('DOMContentLoaded', function() {
-  Controller.bind(); // bind datepicker control
+  Controller.bind(document.getElementsByTagName('body').item(0)); // find input and bind datepicker control to it
 });
 ```
 
@@ -106,7 +111,7 @@ Use in HTML:
 ```html
 <form>
     <!-- after document loaded Datepicker will be binded to this element -->
-    <input type="date" name="date" data-control="form-date">
+    <input type="date" name="date" data-control="date-picker">
     <button type="submit">Submit</button>
 </form>
 ```
@@ -119,7 +124,7 @@ You can bind controls for a new added elements:
 const input = document.createElement('input');
 input.setAttribute('type', 'date');
 input.setAttribute('name', 'date');
-input.setAttribute('data-control', 'form-date');
+input.setAttribute('data-control', 'date-picker');
 
 // add element to document first
 // sometimes controls incorrectly works if you binding them before add element to a document
@@ -137,18 +142,28 @@ Use spaces (` `) or commas (`,`) for separate control names in the `data` attrib
 
 ```html
 <form>
-    <input
-        type="date"
-        name="date"
-        required="required"
-        data-control="form-date form-required form-related"
-        data-related-target="#date_related"
-    >
-    <input type="date" name="date_related" data-control="form-date" id="date_related">
+    <!-- set password and repeat it for sign up -->
+    <input type="password" name="password" required="required" data-control="show-password input-equal-to" data-equal-to="#repeat_password">
+    <input type="password" name="repeat_password" required="required" data-control="show-password" id="repeat_password">
     <button type="submit">Submit</button>
 </form>
 ```
 
+```js
+Controller.registerControl('input-equal-to', element => {
+  const target = document.querySelectorAll(element.getAttribute('data-equal-to'));
+  // check that value of input element equal to value of target element
+});
+Controller.registerControl('show-password', element => {
+  // for example, you can add button for show password
+});
+
+// bind all controls for all elements
+document.addEventListener('DOMContentLoaded', function() {
+  Controller.bind(document.getElementsByTagName('body').item(0));
+});
+```
+
 ### Use classes for controls
 
 It will be better create new classes for define control and encapsulate all logic in them:
@@ -193,10 +208,10 @@ class AppendControl {
 }
 
 Controller.registerControls({
-    'form-date': element => $(element).datepicker({dateFormat: 'yy-mm-dd'}),
+    'date-picker': element => $(element).datepicker({dateFormat: 'yy-mm-dd'}),
     'append': element => new AppendControl(element),
 });
-Controller.bind();
+Controller.bind(document.getElementsByTagName('body')[0]);
 ```
 
 Use in HTML:
@@ -205,10 +220,22 @@ Use in HTML:
 <button
     type="button"
     data-control="append"
-    data-prototype="<input type='date' name='date' data-control='form-date' />"
+    data-prototype="<input type='date' name='date' data-control='date-picker'>"
 >Append</button>
 ```
 
+## Building
+
+For contributors:
+
+* Run `npm install` to install all the dependencies.
+* Run `gulp`. The default task will build minify files.
+
+For repo owners, after a code change:
+
+* Run `npm version` to tag the new release.
+* Run `npm login`, `npm publish` to release on npm.
+
 ## License
 
 This bundle is under the [MIT license](http://opensource.org/licenses/MIT). See the complete license in the file: LICENSE

dist/controller.es2015.min.js

@@ -0,0 +1,51 @@
+import gulp from 'gulp';
+import uglify from 'gulp-uglify';
+import uglify_es from 'gulp-uglify-es';
+import rename from 'gulp-rename';
+import sourcemaps from 'gulp-sourcemaps';
+import buffer from 'gulp-buffer';
+import headerComment from 'gulp-header-comment';
+import babelify from 'babelify';
+import browserify from 'browserify';
+import source from 'vinyl-source-stream';
+
+const copyright = `
+  <%= pkg.title %>
+  <%= pkg.homepage %>
+
+  Copyright <%= moment().format('YYYY') %> by <%= pkg.author %>
+
+  Licensed under the <%= pkg.license %> license:
+  http://www.opensource.org/licenses/<%= pkg.license %>
+`;
+
+function es2015() {
+  return browserify('src/controller.js', { debug: false })
+    .transform(babelify)
+    .bundle()
+    .pipe(source('controller.es2015.min.js'))
+    .pipe(buffer())
+    .pipe(uglify({
+      compress: { drop_console: true },
+    }))
+    .pipe(headerComment(copyright))
+    .pipe(sourcemaps.init({ loadMaps: true })) // load and init sourcemaps
+    .pipe(sourcemaps.write('.')) // write sourcemaps
+    .pipe(gulp.dest('dist'));
+}
+function build() {
+  return gulp.src('src/controller.js')
+    .pipe(buffer())
+    .pipe(uglify_es({
+      compress: { drop_console: true },
+    }))
+    .pipe(headerComment(copyright))
+    .pipe(rename({ suffix: '.min' }))
+    .pipe(sourcemaps.init({ loadMaps: true })) // load and init sourcemaps
+    .pipe(sourcemaps.write('.')) // write sourcemaps
+    .pipe(gulp.dest('dist'));
+}
+
+gulp.task('es2015', es2015);
+gulp.task('build', build);
+gulp.task('default', ['build', 'es2015']);

dist/controller.es2015.min.js.map

@@ -2,7 +2,7 @@
   "name": "gpslab-controller",
   "version": "2.0.1",
   "license": "MIT",
-  "title": "Micro framework for JavaScript",
+  "title": "GpsLab Controller",
   "description": "GpsLab Controller is a JavaScript micro framework",
   "keywords": [
     "controller",
@@ -17,5 +17,20 @@
   },
   "bugs": {
     "url": "https://github.com/gpslab/gpslab-controller/issues"
+  },
+  "devDependencies": {
+    "babel-core": "^6.26.3",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babelify": "^7.3.0",
+    "browserify": "^14.4.0",
+    "gulp": "^3.9.1",
+    "gulp-buffer": "0.0.2",
+    "gulp-header-comment": "^0.4.0",
+    "gulp-rename": "^1.4.0",
+    "gulp-sourcemaps": "^2.6.4",
+    "gulp-uglify": "^2",
+    "gulp-uglify-es": "^1.0.4",
+    "vinyl-source-stream": "^1.1.2"
   }
 }

dist/controller.min.js

@@ -2,8 +2,7 @@
  * GpsLab Controller
  * https://github.com/gpslab/gpslab-controller
  *
- * Copyright 2017, Peter Gribanov
- * http://peter-gribanov.ru
+ * Copyright 2018 by Peter Gribanov (http://peter-gribanov.ru)
  *
  * Licensed under the MIT license:
  * http://www.opensource.org/licenses/MIT
@@ -64,10 +63,14 @@
 
     /**
      * Binding the control for single specific element.
-     * @param {HTMLElement} element
+     * @param {Element} element
      * @returns {boolean}
      */
     static singleBind(element) {
+      if (!(element instanceof Element)) {
+        throw new Error(`The element to be binding must be instance of Element, now it is "${typeof element}".`);
+      }
+
       if (!element.getAttribute('data-control')) {
         return false;
       }
@@ -89,11 +92,13 @@
 
     /**
      * Find the controls in element and children elements and binding it.
-     * @param {?HTMLElement} [element=null]
+     * @param {Element} element
      * @returns {boolean}
      */
     static bind(element) {
-      element = element || document.getElementsByTagName('body')[0];
+      if (!(element instanceof Element)) {
+        throw new Error(`The element to be binding must be instance of Element, now it is "${typeof element}".`);
+      }
 
       let binded = Controller.singleBind(element);