converted autofill to es6

Gruntfile.js

@@ -101,8 +101,8 @@ module.exports = function (grunt) {
         },
         files: {
           'js/dist/util.js'         : 'js/src/util.js',
-          'js/dist/ripples.js'      : 'js/src/ripples.js' //,
+          'js/dist/ripples.js'      : 'js/src/ripples.js',
-          //'js/dist/alert.js'     : 'js/src/alert.js',
+          'js/dist/autofill.js'     : 'js/src/autofill.js',
           //'js/dist/button.js'    : 'js/src/button.js',
           //'js/dist/carousel.js'  : 'js/src/carousel.js',
           //'js/dist/collapse.js'  : 'js/src/collapse.js',
@@ -128,7 +128,8 @@ module.exports = function (grunt) {
         },
         files: {
           'dist/js/umd/util.js'         : 'js/src/util.js',
-          'dist/js/umd/ripples.js'      : 'js/src/ripples.js' //,
+          'dist/js/umd/ripples.js'      : 'js/src/ripples.js',
+          'dist/js/umd/autofill.js'     : 'js/src/autofill.js',
           //'dist/js/umd/alert.js'     : 'js/src/alert.js',
           //'dist/js/umd/button.js'    : 'js/src/button.js',
           //'dist/js/umd/carousel.js'  : 'js/src/carousel.js',
@@ -191,7 +192,7 @@ module.exports = function (grunt) {
         src: [
           'js/src/util.js',
           'js/src/ripples.js',
-          //'js/src/alert.js',
+          'js/src/autofill.js',
           //'js/src/button.js',
           //'js/src/carousel.js',
           //'js/src/collapse.js',

js/src/autofill.js

@@ -0,0 +1,109 @@
+//import Util from './util'
+
+const Autofill = (($) => {
+
+  /**
+   * ------------------------------------------------------------------------
+   * Constants
+   * ------------------------------------------------------------------------
+   */
+  const NAME = 'autofill'
+  const DATA_KEY = `mdb.${NAME}`
+  const JQUERY_NO_CONFLICT = $.fn[NAME]
+
+  const Default = {}
+
+  /**
+   * ------------------------------------------------------------------------
+   * Class Definition
+   * ------------------------------------------------------------------------
+   */
+  class Autofill {
+
+    constructor(config) {
+      this.config = $.extend({}, Default, config)
+
+      this._watchLoading()
+      this._attachEventHandlers()
+    }
+
+    dispose() {
+      $.removeData(this.element, DATA_KEY)
+      this.config = null
+    }
+
+    // ------------------------------------------------------------------------
+    // private
+
+    _watchLoading() {
+      // After 10 seconds we are quite sure all the needed inputs are autofilled then we can stop checking them
+      setTimeout(() => {
+        clearInterval(this._onLoading)
+      }, 10000)
+    }
+
+    // This part of code will detect autofill when the page is loading (username and password inputs for example)
+    _onLoading() {
+      setInterval(() => {
+        $("input[type!=checkbox]").each((index, element) => {
+          let $element = $(element)
+          if ($element.val() && $element.val() !== $element.attr("value")) {
+            $element.triggerStart("change")
+          }
+        })
+      }, 100)
+    }
+
+    _attachEventHandlers() {
+      // Listen on inputs of the focused form
+      //  (because user can select from the autofill dropdown only when the input has focus)
+      let focused = null
+      $(document)
+        .on("focus", "input", (event) => {
+          let $inputs = $(event.currentTarget).closest("form").find("input").not("[type=file]")
+          focused = setInterval(() => {
+            $inputs.each((index, element) => {
+              let $element = $(element)
+              if ($element.val() !== $element.attr("value")) {
+                $element.triggerStart("change")
+              }
+            })
+          }, 100)
+        })
+        .on("blur", ".form-group input", () => {
+          clearInterval(focused)
+        })
+    }
+
+    // ------------------------------------------------------------------------
+    // static
+    static _jQueryInterface(config) {
+      return this.each(() => {
+        let $element = $(this)
+        let data = $element.data(DATA_KEY)
+
+        if (!data) {
+          data = new Autofill(this, config)
+          $element.data(DATA_KEY, data)
+        }
+      })
+    }
+  }
+
+  /**
+   * ------------------------------------------------------------------------
+   * jQuery
+   * ------------------------------------------------------------------------
+   */
+  $.fn[NAME] = Autofill._jQueryInterface
+  $.fn[NAME].Constructor = Autofill
+  $.fn[NAME].noConflict = () => {
+    $.fn[NAME] = JQUERY_NO_CONFLICT
+    return Autofill._jQueryInterface
+  }
+
+  return Autofill
+
+})(jQuery)
+
+export default Autofill

js/src/old/es6Template.js

@@ -8,9 +8,11 @@ const Foo = (($) => {
    * ------------------------------------------------------------------------
    */
   const NAME = 'foo'
-  const DATA_KEY = `bmd.${NAME}`
+  const DATA_KEY = `mdb.${NAME}`
   const JQUERY_NO_CONFLICT = $.fn[NAME]
 
+  const Default = {}
+
   /**
    * ------------------------------------------------------------------------
    * Class Definition
@@ -18,13 +20,15 @@ const Foo = (($) => {
    */
   class Foo {
 
-    constructor(element) {
+    constructor(element, config) {
       this.element = element
+      this.config = $.extend({}, Default, config)
     }
 
     dispose() {
       $.removeData(this.element, DATA_KEY)
       this.element = null
+      this.config = null
     }
 
     // ------------------------------------------------------------------------
@@ -43,13 +47,9 @@ const Foo = (($) => {
         let data = $element.data(DATA_KEY)
 
         if (!data) {
-          data = new Foo(this)
+          data = new Foo(this, config)
           $element.data(DATA_KEY, data)
         }
-
-        if (config === 'close') {
-          data[config](this)
-        }
       })
     }
   }
@@ -61,7 +61,7 @@ const Foo = (($) => {
    */
   $.fn[NAME] = Foo._jQueryInterface
   $.fn[NAME].Constructor = Foo
-  $.fn[NAME].noConflict = function() {
+  $.fn[NAME].noConflict = () => {
     $.fn[NAME] = JQUERY_NO_CONFLICT
     return Foo._jQueryInterface
   }

js/src/old/material.js

@@ -196,41 +196,41 @@
     "ripples": function(selector) {
       $((selector) ? selector : this.options.withRipples).ripples();
     },
-    "autofill": function() {
+    //"autofill": function() {
-      // This part of code will detect autofill when the page is loading (username and password inputs for example)
+    //  // This part of code will detect autofill when the page is loading (username and password inputs for example)
-      var loading = setInterval(function() {
+    //  var loading = setInterval(function() {
-        $("input[type!=checkbox]").each(function() {
+    //    $("input[type!=checkbox]").each(function() {
-          var $this = $(this);
+    //      var $this = $(this);
-          if ($this.val() && $this.val() !== $this.attr("value")) {
+    //      if ($this.val() && $this.val() !== $this.attr("value")) {
-            $this.triggerStart("change");
+    //        $this.triggerStart("change");
-          }
+    //      }
-        });
+    //    });
-      }, 100);
+    //  }, 100);
-
+    //
-      // After 10 seconds we are quite sure all the needed inputs are autofilled then we can stop checking them
+    //  // After 10 seconds we are quite sure all the needed inputs are autofilled then we can stop checking them
-      setTimeout(function() {
+    //  setTimeout(function() {
-        clearInterval(loading);
+    //    clearInterval(loading);
-      }, 10000);
+    //  }, 10000);
-    },
+    //},
-    "attachAutofillEventHandlers": function() {
+    //"attachAutofillEventHandlers": function() {
-      // Listen on inputs of the focused form (because user can select from the autofill dropdown only when the input has focus)
+    //  // Listen on inputs of the focused form (because user can select from the autofill dropdown only when the input has focus)
-      var focused;
+    //  var focused;
-      $(document)
+    //  $(document)
-      .on("focus", "input", function() {
+    //  .on("focus", "input", function() {
-        var $inputs = $(this).parents("form").find("input").not("[type=file]");
+    //    var $inputs = $(this).parents("form").find("input").not("[type=file]");
-        focused = setInterval(function() {
+    //    focused = setInterval(function() {
-          $inputs.each(function() {
+    //      $inputs.each(function() {
-            var $this = $(this);
+    //        var $this = $(this);
-            if ($this.val() !== $this.attr("value")) {
+    //        if ($this.val() !== $this.attr("value")) {
-              $this.triggerStart("change");
+    //          $this.triggerStart("change");
-            }
+    //        }
-          });
+    //      });
-        }, 100);
+    //    }, 100);
-      })
+    //  })
-      .on("blur", ".form-group input", function() {
+    //  .on("blur", ".form-group input", function() {
-        clearInterval(focused);
+    //    clearInterval(focused);
-      });
+    //  });
-    },
+    //},
     "init": function() {
       var $document = $(document);
 
@@ -251,8 +251,9 @@
         this.radio();
       }
       if (this.options.autofill) {
-        this.autofill();
+        //this.autofill();
-        this.attachAutofillEventHandlers();
+        //this.attachAutofillEventHandlers();
+        new Autofill()
       }
 
       if (document.arrive && this.options.arrive) {

js/src/ripples.js

@@ -8,7 +8,7 @@ const Ripples = (($) => {
    * ------------------------------------------------------------------------
    */
   const NAME = 'ripples'
-  const DATA_KEY = `bmd.${NAME}`
+  const DATA_KEY = `mdb.${NAME}`
   const JQUERY_NO_CONFLICT = $.fn[NAME]
 
   const Default = {
@@ -251,13 +251,13 @@ const Ripples = (($) => {
     // ------------------------------------------------------------------------
     // static
 
-    static _jQueryInterface(options) {
+    static _jQueryInterface(config) {
       return this.each(() => {
         let element = $(this)
         let data = element.data(DATA_KEY)
 
         if (!data) {
-          data = new Ripples(this, options)
+          data = new Ripples(this, config)
           element.data(DATA_KEY, data)
         }
       })