migrated checkbox to es6

Gruntfile.js

@@ -103,7 +103,7 @@ module.exports = function (grunt) {
           'js/dist/util.js'         : 'js/src/util.js',
           'js/dist/ripples.js'      : 'js/src/ripples.js',
           'js/dist/autofill.js'     : 'js/src/autofill.js',
-          //'js/dist/button.js'    : 'js/src/button.js',
+          'js/dist/checkbox.js'    : 'js/src/checkbox.js',
           //'js/dist/carousel.js'  : 'js/src/carousel.js',
           //'js/dist/collapse.js'  : 'js/src/collapse.js',
           //'js/dist/dropdown.js'  : 'js/src/dropdown.js',
@@ -130,7 +130,7 @@ module.exports = function (grunt) {
           'dist/js/umd/util.js'         : 'js/src/util.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/checkbox.js'     : 'js/src/checkbox.js',
           //'dist/js/umd/button.js'    : 'js/src/button.js',
           //'dist/js/umd/carousel.js'  : 'js/src/carousel.js',
           //'dist/js/umd/collapse.js'  : 'js/src/collapse.js',
@@ -193,7 +193,7 @@ module.exports = function (grunt) {
           'js/src/util.js',
           'js/src/ripples.js',
           'js/src/autofill.js',
-          //'js/src/button.js',
+          'js/src/checkbox.js',
           //'js/src/carousel.js',
           //'js/src/collapse.js',
           //'js/src/dropdown.js',

js/src/checkbox.js

@@ -0,0 +1,73 @@
+//import Util from './util'
+
+const Checkbox = (($) => {
+
+  /**
+   * ------------------------------------------------------------------------
+   * Constants
+   * ------------------------------------------------------------------------
+   */
+  const NAME = 'checkbox'
+  const DATA_KEY = `mdb.${NAME}`
+  const JQUERY_NO_CONFLICT = $.fn[NAME]
+
+  const Default = {
+    template: `<span class='checkbox-material'><span class='check'></span></span>`
+  }
+
+  /**
+   * ------------------------------------------------------------------------
+   * Class Definition
+   * ------------------------------------------------------------------------
+   */
+  class Checkbox {
+
+    constructor(element, config) {
+      this.element = element
+      this.config = $.extend({}, Default, config)
+
+      this.element.after(this.config.template)
+    }
+
+    dispose() {
+      $.removeData(this.element, DATA_KEY)
+      this.element = null
+      this.config = null
+    }
+
+    // ------------------------------------------------------------------------
+    // private
+
+
+    // ------------------------------------------------------------------------
+    // static
+    static _jQueryInterface(config) {
+      return this.each(function () {
+        let $element = $(this)
+        let data = $element.data(DATA_KEY)
+
+        if (!data) {
+          data = new Checkbox(this, config)
+          $element.data(DATA_KEY, data)
+        }
+      })
+    }
+  }
+
+  /**
+   * ------------------------------------------------------------------------
+   * jQuery
+   * ------------------------------------------------------------------------
+   */
+  $.fn[NAME] = Checkbox._jQueryInterface
+  $.fn[NAME].Constructor = Checkbox
+  $.fn[NAME].noConflict = () => {
+    $.fn[NAME] = JQUERY_NO_CONFLICT
+    return Checkbox._jQueryInterface
+  }
+
+  return Checkbox
+
+})(jQuery)
+
+export default Checkbox

js/src/old/es6Template.js

@@ -11,7 +11,9 @@ const Foo = (($) => {
   const DATA_KEY = `mdb.${NAME}`
   const JQUERY_NO_CONFLICT = $.fn[NAME]
 
-  const Default = {}
+  const Default = {
+    template: ``
+  }
 
   /**
    * ------------------------------------------------------------------------

js/src/old/material.js

@@ -52,15 +52,14 @@
       "togglebuttonElements": ".togglebutton > label > input[type=checkbox]",
       "radioElements": ".radio > label > input[type=radio]"
     },
-    "checkbox": function(selector) {
-      // Add fake-checkbox to material checkboxes
-      $((selector) ? selector : this.options.checkboxElements)
-      .filter(":notmdproc")
-      .data("mdproc", true)
-      .after("<span class='checkbox-material'><span class='check'></span></span>");
-    },
+    //"checkbox": function(selector) {
+    //  // Add fake-checkbox to material checkboxes
+    //  $((selector) ? selector : this.options.checkboxElements)
+    //  .filter(":notmdproc")
+    //  .data("mdproc", true)
+    //  .after("<span class='checkbox-material'><span class='check'></span></span>");
+    //},
     "togglebutton": function(selector) {
-      // Add fake-checkbox to material checkboxes
       $((selector) ? selector : this.options.togglebuttonElements)
       .filter(":notmdproc")
       .data("mdproc", true)
@@ -243,6 +242,7 @@
       }
       if (this.options.checkbox) {
         this.checkbox();
+        $(this.options.checkboxElements).checkbox()
       }
       if (this.options.togglebutton) {
         this.togglebutton();
@@ -269,7 +269,7 @@
         }
         if (this.options.checkbox) {
           $document.arrive(this.options.checkboxElements, function() {
-            $.material.checkbox($(this));
+            $(this).checkbox();
           });
         }
         if (this.options.radio) {