wip conversion to es6

Gruntfile.js

@@ -86,17 +86,17 @@ module.exports = function (grunt) {
           modules: 'ignore'
         },
         files: {
-          'js/dist/util.js'      : 'js/src/util.js',
+          'js/dist/ripples.js'      : 'js/src/ripples.js' //,
-          'js/dist/alert.js'     : 'js/src/alert.js',
+          //'js/dist/alert.js'     : 'js/src/alert.js',
-          'js/dist/button.js'    : 'js/src/button.js',
+          //'js/dist/button.js'    : 'js/src/button.js',
-          'js/dist/carousel.js'  : 'js/src/carousel.js',
+          //'js/dist/carousel.js'  : 'js/src/carousel.js',
-          'js/dist/collapse.js'  : 'js/src/collapse.js',
+          //'js/dist/collapse.js'  : 'js/src/collapse.js',
-          'js/dist/dropdown.js'  : 'js/src/dropdown.js',
+          //'js/dist/dropdown.js'  : 'js/src/dropdown.js',
-          'js/dist/modal.js'     : 'js/src/modal.js',
+          //'js/dist/modal.js'     : 'js/src/modal.js',
-          'js/dist/scrollspy.js' : 'js/src/scrollspy.js',
+          //'js/dist/scrollspy.js' : 'js/src/scrollspy.js',
-          'js/dist/tab.js'       : 'js/src/tab.js',
+          //'js/dist/tab.js'       : 'js/src/tab.js',
-          'js/dist/tooltip.js'   : 'js/src/tooltip.js',
+          //'js/dist/tooltip.js'   : 'js/src/tooltip.js',
-          'js/dist/popover.js'   : 'js/src/popover.js'
+          //'js/dist/popover.js'   : 'js/src/popover.js'
         }
       },
       dist: {
@@ -112,17 +112,17 @@ module.exports = function (grunt) {
           modules: 'umd'
         },
         files: {
-          'dist/js/umd/util.js'      : 'js/src/util.js',
+          'dist/js/umd/ripples.js'      : 'js/src/ripples.js' //,
-          'dist/js/umd/alert.js'     : 'js/src/alert.js',
+          //'dist/js/umd/alert.js'     : 'js/src/alert.js',
-          'dist/js/umd/button.js'    : 'js/src/button.js',
+          //'dist/js/umd/button.js'    : 'js/src/button.js',
-          'dist/js/umd/carousel.js'  : 'js/src/carousel.js',
+          //'dist/js/umd/carousel.js'  : 'js/src/carousel.js',
-          'dist/js/umd/collapse.js'  : 'js/src/collapse.js',
+          //'dist/js/umd/collapse.js'  : 'js/src/collapse.js',
-          'dist/js/umd/dropdown.js'  : 'js/src/dropdown.js',
+          //'dist/js/umd/dropdown.js'  : 'js/src/dropdown.js',
-          'dist/js/umd/modal.js'     : 'js/src/modal.js',
+          //'dist/js/umd/modal.js'     : 'js/src/modal.js',
-          'dist/js/umd/scrollspy.js' : 'js/src/scrollspy.js',
+          //'dist/js/umd/scrollspy.js' : 'js/src/scrollspy.js',
-          'dist/js/umd/tab.js'       : 'js/src/tab.js',
+          //'dist/js/umd/tab.js'       : 'js/src/tab.js',
-          'dist/js/umd/tooltip.js'   : 'js/src/tooltip.js',
+          //'dist/js/umd/tooltip.js'   : 'js/src/tooltip.js',
-          'dist/js/umd/popover.js'   : 'js/src/popover.js'
+          //'dist/js/umd/popover.js'   : 'js/src/popover.js'
         }
       }
     },
@@ -173,17 +173,17 @@ module.exports = function (grunt) {
       },
       bootstrap: {
         src: [
-          'js/src/util.js',
+          'js/src/ripples.js',
-          'js/src/alert.js',
+          //'js/src/alert.js',
-          'js/src/button.js',
+          //'js/src/button.js',
-          'js/src/carousel.js',
+          //'js/src/carousel.js',
-          'js/src/collapse.js',
+          //'js/src/collapse.js',
-          'js/src/dropdown.js',
+          //'js/src/dropdown.js',
-          'js/src/modal.js',
+          //'js/src/modal.js',
-          'js/src/scrollspy.js',
+          //'js/src/scrollspy.js',
-          'js/src/tab.js',
+          //'js/src/tab.js',
-          'js/src/tooltip.js',
+          //'js/src/tooltip.js',
-          'js/src/popover.js'
+          //'js/src/popover.js'
         ],
         dest: 'dist/js/<%= pkg.name %>.js'
       }
@@ -459,7 +459,7 @@ module.exports = function (grunt) {
   grunt.registerTask('test-js', ['eslint', 'jscs:core', 'jscs:test', 'jscs:grunt', 'qunit']);
 
   // JS distribution task.
-  grunt.registerTask('dist-js', ['babel:dev', 'concat', 'lineremover', 'babel:dist', 'stamp', 'uglify:core', 'commonjs']);
+  grunt.registerTask('dist-js', ['eslint', 'babel:dev', 'concat', 'lineremover', 'babel:dist', 'stamp', 'uglify:core', 'commonjs']);
 
   grunt.registerTask('test-scss', ['scsslint']);
 

js/src/old/es6Template.js

@@ -0,0 +1,128 @@
+const Foo = (($) => {
+
+
+  /**
+   * ------------------------------------------------------------------------
+   * Constants
+   * ------------------------------------------------------------------------
+   */
+  const NAME = 'foo'
+  const DATA_KEY = `bmd.${NAME}`
+  const EVENT_KEY = `.${DATA_KEY}`
+  const DATA_API_KEY = '.data-api'
+  const JQUERY_NO_CONFLICT = $.fn[NAME]
+
+  const Selector = {
+    DATA_DISMISS: '[data-dismiss="foo"]'
+  }
+
+  const Event = {
+    CLOSE: `close${EVENT_KEY}`,
+    CLOSED: `closed${EVENT_KEY}`,
+    CLICK_DATA_API: `click${EVENT_KEY}${DATA_API_KEY}`
+  }
+
+
+  /**
+   * ------------------------------------------------------------------------
+   * Class Definition
+   * ------------------------------------------------------------------------
+   */
+  class Foo {
+
+    constructor(element) {
+      this._element = element
+    }
+
+    // getters
+    static get NAME() {
+      return NAME
+    }
+
+    // public
+    close(element) {
+      element = element || this._element
+
+      let rootElement = this._getRootElement(element)
+      let customEvent = this._triggerCloseEvent(rootElement)
+
+      if (customEvent.isDefaultPrevented()) {
+        return
+      }
+
+      this._removeElement(rootElement)
+    }
+
+    dispose() {
+      $.removeData(this._element, DATA_KEY)
+      this._element = null
+    }
+
+
+    // private
+
+    _bar(element) {
+      let x = 1
+      return x
+    }
+
+
+    // static
+    static _jQueryInterface(config) {
+      return this.each(function () {
+        let $element = $(this)
+        let data = $element.data(DATA_KEY)
+
+        if (!data) {
+          data = new Foo(this)
+          $element.data(DATA_KEY, data)
+        }
+
+        if (config === 'close') {
+          data[config](this)
+        }
+      })
+    }
+
+    static _handleClose(fooInstance) {
+      return function (event) {
+        if (event) {
+          event.preventDefault()
+        }
+
+        fooInstance.close(this)
+      }
+    }
+  }
+
+
+  /**
+   * ------------------------------------------------------------------------
+   * Data Api implementation
+   * ------------------------------------------------------------------------
+   */
+
+  $(document).on(
+    Event.CLICK_DATA_API,
+    Selector.DATA_DISMISS,
+    Foo._handleClose(new Foo())
+  )
+
+
+  /**
+   * ------------------------------------------------------------------------
+   * jQuery
+   * ------------------------------------------------------------------------
+   */
+  $.fn[NAME] = Foo._jQueryInterface
+  $.fn[NAME].Constructor = Foo
+  $.fn[NAME].noConflict = function () {
+    $.fn[NAME] = JQUERY_NO_CONFLICT
+    return Foo._jQueryInterface
+  }
+
+  return Foo
+
+})(jQuery)
+
+export default Foo

js/src/old/ripples.js

@@ -0,0 +1,320 @@
+/* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
+/* globals jQuery, navigator */
+
+(function($, window, document, undefined) {
+
+  //"use strict";
+  //
+  ///**
+  // * Define the name of the plugin
+  // */
+  //var ripples = "ripples";
+  //
+  //
+  ///**
+  // * Get an instance of the plugin
+  // */
+  //var self = null;
+  //
+  //
+  ///**
+  // * Define the DEFAULT_OPTIONS of the plugin
+  // */
+  //var DEFAULT_OPTIONS = {};
+  //
+  //
+  ///**
+  // * Create the main plugin function
+  // */
+  //function Ripples(element, options) {
+  //  self = this;
+  //
+  //  this._element = $(element);
+  //  this._options = $.extend({}, DEFAULT_OPTIONS, options);
+  //
+  //  this.init();
+  //}
+  //
+  //
+  /**
+   * Initialize the plugin
+   */
+  //Ripples.prototype.init = function() {
+  //  var $element  = this._element;
+  //
+  //  $element.on("mousedown touchstart", function(event) {
+  //    /**
+  //     * Verify if the user is just touching on a device and return if so
+  //     */
+  //    if(self.isTouch() && event.type === "mousedown") {
+  //      return;
+  //    }
+  //
+  //
+  //    /**
+  //     * Verify if the current element already has a ripple wrapper element and
+  //     * creates if it doesn't
+  //     */
+  //    if(!($element.find(".ripple-container").length)) {
+  //      $element.append("<div class=\"ripple-container\"></div>");
+  //    }
+  //
+  //
+  //    /**
+  //     * Find the ripple wrapper
+  //     */
+  //    var $container = $element.children(".ripple-container");
+  //
+  //
+  //    /**
+  //     * Get relY and relX positions
+  //     */
+  //    var relY = self.getRelY($container, event);
+  //    var relX = self.getRelX($container, event);
+  //
+  //
+  //    /**
+  //     * If relY and/or relX are false, return the event
+  //     */
+  //    if(!relY && !relX) {
+  //      return;
+  //    }
+  //
+  //
+  //    /**
+  //     * Get the ripple color
+  //     */
+  //    var rippleColor = self.getRipplesColor($element);
+  //
+  //
+  //    /**
+  //     * Create the ripple element
+  //     */
+  //    var $ripple = $("<div></div>");
+  //
+  //    $ripple
+  //    .addClass("ripple")
+  //    .css({
+  //      "left": relX,
+  //      "top": relY,
+  //      "background-color": rippleColor
+  //    });
+  //
+  //
+  //    /**
+  //     * Append the ripple to the wrapper
+  //     */
+  //    $container.append($ripple);
+  //
+  //
+  //    /**
+  //     * Make sure the ripple has the styles applied (ugly hack but it works)
+  //     */
+  //    (function() { return window.getComputedStyle($ripple[0]).opacity; })();
+  //
+  //
+  //    /**
+  //     * Turn on the ripple animation
+  //     */
+  //    self.rippleOn($element, $ripple);
+  //
+  //
+  //    /**
+  //     * Call the rippleEnd function when the transition "on" ends
+  //     */
+  //    setTimeout(function() {
+  //      self.rippleEnd($ripple);
+  //    }, 500);
+  //
+  //
+  //    /**
+  //     * Detect when the user leaves the element
+  //     */
+  //    $element.on("mouseup mouseleave touchend", function() {
+  //      $ripple.data("mousedown", "off");
+  //
+  //      if($ripple.data("animating") === "off") {
+  //        self.rippleOut($ripple);
+  //      }
+  //    });
+  //
+  //  });
+  //};
+  //
+  //
+  ///**
+  // * Get the new size based on the element height/width and the ripple width
+  // */
+  //Ripples.prototype.getNewSize = function($element, $ripple) {
+  //
+  //  return (Math.max($element.outerWidth(), $element.outerHeight()) / $ripple.outerWidth()) * 2.5;
+  //};
+
+
+  ///**
+  // * Get the relX
+  // */
+  //Ripples.prototype.getRelX = function($container,  event) {
+  //  var wrapperOffset = $container.offset();
+  //
+  //  if(!self.isTouch()) {
+  //    /**
+  //     * Get the mouse position relative to the ripple wrapper
+  //     */
+  //    return event.pageX - wrapperOffset.left;
+  //  } else {
+  //    /**
+  //     * Make sure the user is using only one finger and then get the touch
+  //     * position relative to the ripple wrapper
+  //     */
+  //    event = event.originalEvent;
+  //
+  //    if(event.touches.length === 1) {
+  //      return event.touches[0].pageX - wrapperOffset.left;
+  //    }
+  //
+  //    return false;
+  //  }
+  //};
+  //
+  //
+  ///**
+  // * Get the relY
+  // */
+  //Ripples.prototype.getRelY = function($container, event) {
+  //  var wrapperOffset = $container.offset();
+  //
+  //  if(!self.isTouch()) {
+  //    /**
+  //     * Get the mouse position relative to the ripple wrapper
+  //     */
+  //    return event.pageY - wrapperOffset.top;
+  //  } else {
+  //    /**
+  //     * Make sure the user is using only one finger and then get the touch
+  //     * position relative to the ripple wrapper
+  //     */
+  //    event = event.originalEvent;
+  //
+  //    if(event.touches.length === 1) {
+  //      return event.touches[0].pageY - wrapperOffset.top;
+  //    }
+  //
+  //    return false;
+  //  }
+  //};
+  //
+  //
+  ///**
+  // * Get the ripple color
+  // */
+  //Ripples.prototype.getRipplesColor = function($element) {
+  //
+  //  var color = $element.data("ripple-color") ? $element.data("ripple-color") : window.getComputedStyle($element[0]).color;
+  //
+  //  return color;
+  //};
+
+  //
+  ///**
+  // * Verify if the client browser has transistion support
+  // */
+  //Ripples.prototype.hasTransitionSupport = function() {
+  //  var thisBody  = document.body || document.documentElement;
+  //  var thisStyle = thisBody.style;
+  //
+  //  var support = (
+  //    thisStyle.transition !== undefined ||
+  //    thisStyle.WebkitTransition !== undefined ||
+  //    thisStyle.MozTransition !== undefined ||
+  //    thisStyle.MsTransition !== undefined ||
+  //    thisStyle.OTransition !== undefined
+  //  );
+  //
+  //  return support;
+  //};
+  //
+  //
+  ///**
+  // * Verify if the client is using a mobile device
+  // */
+  //Ripples.prototype.isTouch = function() {
+  //  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+  //};
+  //
+  //
+  ///**
+  // * End the animation of the ripple
+  // */
+  //Ripples.prototype.rippleEnd = function($ripple) {
+  //  $ripple.data("animating", "off");
+  //
+  //  if($ripple.data("mousedown") === "off") {
+  //    self.rippleOut($ripple);
+  //  }
+  //};
+  //
+  //
+  ///**
+  // * Turn off the ripple effect
+  // */
+  //Ripples.prototype.rippleOut = function($ripple) {
+  //  $ripple.off();
+  //
+  //  if(self.hasTransitionSupport()) {
+  //    $ripple.addClass("ripple-out");
+  //  } else {
+  //    $ripple.animate({"opacity": 0}, 100, function() {
+  //      $ripple.trigger("transitionend");
+  //    });
+  //  }
+  //
+  //  $ripple.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
+  //    $ripple.remove();
+  //  });
+  //};
+  //
+  //
+  ///**
+  // * Turn on the ripple effect
+  // */
+  //Ripples.prototype.rippleOn = function($element, $ripple) {
+  //  var size = self.getNewSize($element, $ripple);
+  //
+  //  if(self.hasTransitionSupport()) {
+  //    $ripple
+  //    .css({
+  //      "-ms-transform": "scale(" + size + ")",
+  //      "-moz-transform": "scale(" + size + ")",
+  //      "-webkit-transform": "scale(" + size + ")",
+  //      "transform": "scale(" + size + ")"
+  //    })
+  //    .addClass("ripple-on")
+  //    .data("animating", "on")
+  //    .data("mousedown", "on");
+  //  } else {
+  //    $ripple.animate({
+  //      "width": Math.max($element.outerWidth(), $element.outerHeight()) * 2,
+  //      "height": Math.max($element.outerWidth(), $element.outerHeight()) * 2,
+  //      "margin-left": Math.max($element.outerWidth(), $element.outerHeight()) * (-1),
+  //      "margin-top": Math.max($element.outerWidth(), $element.outerHeight()) * (-1),
+  //      "opacity": 0.2
+  //    }, 500, function() {
+  //      $ripple.trigger("transitionend");
+  //    });
+  //  }
+  //};
+
+
+  /**
+   * Create the jquery plugin function
+   */
+  $.fn.ripples = function(options) {
+    return this.each(function() {
+      if(!$.data(this, "plugin_" + ripples)) {
+        $.data(this, "plugin_" + ripples, new Ripples(this, options));
+      }
+    });
+  };
+
+})(jQuery, window, document);

js/src/ripples.js

@@ -1,324 +1,350 @@
-/* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
+// FIXME: convert to member variable use instead of passing around/finding?
-/* globals jQuery, navigator */
+const Ripples = (($) => {
-
-(function($, window, document, undefined) {
-
-  "use strict";
 
   /**
-   * Define the name of the plugin
+   * ------------------------------------------------------------------------
+   * Constants
+   * ------------------------------------------------------------------------
    */
-  var ripples = "ripples";
+  const NAME = 'ripples'
+  const DATA_KEY = `bmd.${NAME}`
+  // const EVENT_KEY = `.${DATA_KEY}`
+  // const DATA_API_KEY = '.data-api'
+  const JQUERY_NO_CONFLICT = $.fn[NAME]
+  const DEFAULT_OPTIONS = {}
+
+  // const Selector = {
+  //  DATA_DISMISS: '[data-dismiss="ripples"]'
+  // }
+  //
+  // const Event = {
+  //  CLOSE: `close${EVENT_KEY}`,
+  //  CLOSED: `closed${EVENT_KEY}`,
+  //  CLICK_DATA_API: `click${EVENT_KEY}${DATA_API_KEY}`
+  // }
 
 
   /**
-   * Get an instance of the plugin
+   * ------------------------------------------------------------------------
+   * Class Definition
+   * ------------------------------------------------------------------------
    */
-  var self = null;
+  class Ripples {
 
+    constructor(element, options) {
+      this._element = $(element)
+      this._options = $.extend({}, DEFAULT_OPTIONS, options)
+      this._element.on("mousedown touchstart", this._createRipple)
+    }
 
-  /**
+    // getters
-   * Define the defaults of the plugin
+    static get NAME() {
-   */
+      return NAME
-  var defaults = {};
+    }
 
+    // public
+    close(element) {
+      element = element || this._element
 
-  /**
+      let rootElement = this._getRootElement(element)
-   * Create the main plugin function
+      let customEvent = this._triggerCloseEvent(rootElement)
-   */
-  function Ripples(element, options) {
-    self = this;
 
-    this.element = $(element);
+      if (customEvent.isDefaultPrevented()) {
+        return
+      }
 
-    this.options = $.extend({}, defaults, options);
+      this._removeElement(rootElement)
+    }
 
-    this._defaults = defaults;
+    dispose() {
-    this._name = ripples;
+      $.removeData(this._element, DATA_KEY)
-
+      this._element = null
-    this.init();
     }
 
 
-  /**
+    // ------------------------------------------------------------------------
-   * Initialize the plugin
+    // private
-   */
-  Ripples.prototype.init = function() {
-    var $element  = this.element;
 
-    $element.on("mousedown touchstart", function(event) {
+    _createRipple(event) {
-      /**
+
-       * Verify if the user is just touching on a device and return if so
+      // Verify if the user is just touching on a device and return if so
-       */
+      if (this.isTouch() && event.type === "mousedown") {
-      if(self.isTouch() && event.type === "mousedown") {
+        return
-        return;
       }
 
-
+      // Verify if the current element already has a ripple wrapper element and creates if it doesn't
-      /**
+      if (!(this._element.find(".ripple-container").length)) {
-       * Verify if the current element already has a ripple wrapper element and
+        this._element.append("<div class='ripple-container'></div>")
-       * creates if it doesn't
-       */
-      if(!($element.find(".ripple-container").length)) {
-        $element.append("<div class=\"ripple-container\"></div>");
       }
 
+      // Find the ripple wrapper
+      let containerElement = this._element.children(".ripple-container")
 
-      /**
+      // Get relY and relX positions
-       * Find the ripple wrapper
+      let relY = this._getRelY(containerElement, event)
-       */
+      let relX = this._getRelX(containerElement, event)
-      var $wrapper = $element.children(".ripple-container");
 
-
+      // If relY and/or relX are false, return the event
-      /**
-       * Get relY and relX positions
-       */
-      var relY = self.getRelY($wrapper, event);
-      var relX = self.getRelX($wrapper, event);
-
-
-      /**
-       * If relY and/or relX are false, return the event
-       */
       if (!relY && !relX) {
-        return;
+        return
       }
 
+      // Get the ripple color
+      let rippleColor = this._getRipplesColor(this._element)
 
-      /**
+      // Create the ripple element
-       * Get the ripple color
+      let rippleElement = $("<div></div>")
-       */
-      var rippleColor = self.getRipplesColor($element);
 
-
+      rippleElement.addClass("ripple").css(`left: ${relX}; top: ${relY};  background-color: ${rippleColor}`)
-      /**
+      /* https://github.com/eslint/eslint/issues/4579
-       * Create the ripple element
+       rippleElement.addClass("ripple").css({
-       */
-      var $ripple = $("<div></div>");
-
-      $ripple
-      .addClass("ripple")
-      .css({
        "left": relX,
        "top": relY,
        "background-color": rippleColor
-      });
+       })
-
-
-      /**
-       * Append the ripple to the wrapper
        */
-      $wrapper.append($ripple);
 
+      // Append the ripple to the wrapper
+      containerElement.append(rippleElement)
 
-      /**
+      // Make sure the ripple has the styles applied (ugly hack but it works)
-       * Make sure the ripple has the styles applied (ugly hack but it works)
+      (() => { return window.getComputedStyle(rippleElement[0]).opacity })()
-       */
-      (function() { return window.getComputedStyle($ripple[0]).opacity; })();
 
+      // Turn on the ripple animation
+      this.rippleOn(this._element, rippleElement)
 
-      /**
+      // Call the rippleEnd function when the transition "on" ends
-       * Turn on the ripple animation
+      setTimeout(() => {
-       */
+        this.rippleEnd(rippleElement)
-      self.rippleOn($element, $ripple);
+      }, 500)
 
+      // Detect when the user leaves the element
+      this._element.on("mouseup mouseleave touchend", () => {
+        rippleElement.data("mousedown", "off")
 
-      /**
+        if (rippleElement.data("animating") === "off") {
-       * Call the rippleEnd function when the transition "on" ends
+          this.rippleOut(rippleElement)
-       */
+        }
-      setTimeout(function() {
+      })
-        self.rippleEnd($ripple);
-      }, 500);
-
-
-      /**
-       * Detect when the user leaves the element
-       */
-      $element.on("mouseup mouseleave touchend", function() {
-        $ripple.data("mousedown", "off");
-
-        if($ripple.data("animating") === "off") {
-          self.rippleOut($ripple);
     }
-      });
-
-    });
-  };
-
-
-  /**
-   * Get the new size based on the element height/width and the ripple width
-   */
-  Ripples.prototype.getNewSize = function($element, $ripple) {
-
-    return (Math.max($element.outerWidth(), $element.outerHeight()) / $ripple.outerWidth()) * 2.5;
-  };
 
 
     /**
      * Get the relX
      */
-  Ripples.prototype.getRelX = function($wrapper,  event) {
+    _getRelX(containerElement, event) {
-    var wrapperOffset = $wrapper.offset();
+      let wrapperOffset = containerElement.offset()
 
-    if(!self.isTouch()) {
+      let result = null
-      /**
+      if (!this.isTouch()) {
-       * Get the mouse position relative to the ripple wrapper
+        // Get the mouse position relative to the ripple wrapper
-       */
+        result = event.pageX - wrapperOffset.left
-      return event.pageX - wrapperOffset.left;
       } else {
-      /**
+         // Make sure the user is using only one finger and then get the touch
-       * Make sure the user is using only one finger and then get the touch
+         //  position relative to the ripple wrapper
-       * position relative to the ripple wrapper
+        event = event.originalEvent
-       */
-      event = event.originalEvent;
 
         if (event.touches.length === 1) {
-        return event.touches[0].pageX - wrapperOffset.left;
+          result = event.touches[0].pageX - wrapperOffset.left
+        } else {
+          result = false
+        }
       }
 
-      return false;
+      return result
     }
-  };
 
 
     /**
      * Get the relY
      */
-  Ripples.prototype.getRelY = function($wrapper, event) {
+    _getRelY(containerElement, event) {
-    var wrapperOffset = $wrapper.offset();
+      let wrapperOffset = containerElement.offset()
+      let result = null
 
-    if(!self.isTouch()) {
+      if (!this.isTouch()) {
         /**
          * Get the mouse position relative to the ripple wrapper
          */
-      return event.pageY - wrapperOffset.top;
+        result = event.pageY - wrapperOffset.top
       } else {
         /**
          * Make sure the user is using only one finger and then get the touch
          * position relative to the ripple wrapper
          */
-      event = event.originalEvent;
+        event = event.originalEvent
 
         if (event.touches.length === 1) {
-        return event.touches[0].pageY - wrapperOffset.top;
+          result =  event.touches[0].pageY - wrapperOffset.top
+        } else {
+          result = false
+        }
       }
 
-      return false;
+      return result
     }
-  };
 
 
     /**
      * Get the ripple color
      */
-  Ripples.prototype.getRipplesColor = function($element) {
+    _getRipplesColor(element) {
-
+      let color = element.data("ripple-color") ? element.data("ripple-color") : window.getComputedStyle(element[0]).color
-    var color = $element.data("ripple-color") ? $element.data("ripple-color") : window.getComputedStyle($element[0]).color;
+      return color
-
+    }
-    return color;
-  };
 
 
     /**
      * Verify if the client browser has transistion support
      */
-  Ripples.prototype.hasTransitionSupport = function() {
+    _hasTransitionSupport() {
-    var thisBody  = document.body || document.documentElement;
+      let thisBody = document.body || document.documentElement
-    var thisStyle = thisBody.style;
+      let thisStyle = thisBody.style
 
-    var support = (
+      let support = (
         thisStyle.transition !== undefined ||
         thisStyle.WebkitTransition !== undefined ||
         thisStyle.MozTransition !== undefined ||
         thisStyle.MsTransition !== undefined ||
         thisStyle.OTransition !== undefined
-    );
+      )
 
-    return support;
+      return support
-  };
+    }
 
 
     /**
      * Verify if the client is using a mobile device
      */
-  Ripples.prototype.isTouch = function() {
+    isTouch() {
-    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+      return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
-  };
+    }
 
 
     /**
      * End the animation of the ripple
      */
-  Ripples.prototype.rippleEnd = function($ripple) {
+    rippleEnd(rippleElement) {
-    $ripple.data("animating", "off");
+      rippleElement.data("animating", "off")
 
-    if($ripple.data("mousedown") === "off") {
+      if (rippleElement.data("mousedown") === "off") {
-      self.rippleOut($ripple);
+        this.rippleOut(rippleElement)
+      }
     }
-  };
 
 
     /**
      * Turn off the ripple effect
      */
-  Ripples.prototype.rippleOut = function($ripple) {
+    rippleOut(rippleElement) {
-    $ripple.off();
+      rippleElement.off()
 
-    if(self.hasTransitionSupport()) {
+      if (this._hasTransitionSupport()) {
-      $ripple.addClass("ripple-out");
+        rippleElement.addClass("ripple-out")
       } else {
-      $ripple.animate({"opacity": 0}, 100, function() {
+        rippleElement.animate({ "opacity": 0 }, 100, () => {
-        $ripple.trigger("transitionend");
+          rippleElement.trigger("transitionend")
-      });
+        })
       }
 
-    $ripple.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
+      rippleElement.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", () => {
-      $ripple.remove();
+        rippleElement.remove()
-    });
+      })
-  };
+    }
 
 
     /**
      * Turn on the ripple effect
      */
-  Ripples.prototype.rippleOn = function($element, $ripple) {
+    rippleOn(element, rippleElement) {
-    var size = self.getNewSize($element, $ripple);
+      let size = this._getNewSize(element, rippleElement)
 
-    if(self.hasTransitionSupport()) {
+      if (this._hasTransitionSupport()) {
-      $ripple
+        rippleElement
           .css({
-        "-ms-transform": "scale(" + size + ")",
+            "-ms-transform": `scale(${size})`,
-        "-moz-transform": "scale(" + size + ")",
+            "-moz-transform": `scale(${size})`,
-        "-webkit-transform": "scale(" + size + ")",
+            "-webkit-transform": `scale(${size})`,
-        "transform": "scale(" + size + ")"
+            "transform": `scale(${size})`
           })
           .addClass("ripple-on")
           .data("animating", "on")
-      .data("mousedown", "on");
+          .data("mousedown", "on")
       } else {
-      $ripple.animate({
+        rippleElement.animate({
-        "width": Math.max($element.outerWidth(), $element.outerHeight()) * 2,
+          "width": Math.max(element.outerWidth(), element.outerHeight()) * 2,
-        "height": Math.max($element.outerWidth(), $element.outerHeight()) * 2,
+          "height": Math.max(element.outerWidth(), element.outerHeight()) * 2,
-        "margin-left": Math.max($element.outerWidth(), $element.outerHeight()) * (-1),
+          "margin-left": Math.max(element.outerWidth(), element.outerHeight()) * (-1),
-        "margin-top": Math.max($element.outerWidth(), $element.outerHeight()) * (-1),
+          "margin-top": Math.max(element.outerWidth(), element.outerHeight()) * (-1),
           "opacity": 0.2
-      }, 500, function() {
+        }, 500, () => {
-        $ripple.trigger("transitionend");
+          rippleElement.trigger("transitionend")
-      });
+        })
+      }
+    }
+
+
+    // ------------------------------------------------------------------------
+    // static
+    /**
+     * Get the new size based on the element height/width and the ripple width
+     */
+    static _getNewSize(element, rippleElement) {
+      return (Math.max(element.outerWidth(), element.outerHeight()) / rippleElement.outerWidth()) * 2.5
+    }
+
+
+    static _jQueryInterface(options) {
+      return this.each(() => {
+        let element = $(this)
+        let data = element.data(DATA_KEY)
+
+        if (!data) {
+          data = new Ripples(this, options)
+          element.data(DATA_KEY, data)
+        }
+      })
+    }
+
+    // static _handleClose(fooInstance) {
+    //  return function(event) {
+    //    if (event) {
+    //      event.preventDefault()
+    //    }
+    //
+    //    fooInstance.close(this)
+    //  }
+    // }
   }
-  };
 
 
   /**
-   * Create the jquery plugin function
+   * ------------------------------------------------------------------------
+   * Data Api implementation
+   * ------------------------------------------------------------------------
    */
-  $.fn.ripples = function(options) {
-    return this.each(function() {
-      if(!$.data(this, "plugin_" + ripples)) {
-        $.data(this, "plugin_" + ripples, new Ripples(this, options));
-      }
-    });
-  };
 
-})(jQuery, window, document);
+  // $(document).on(
+  //  Event.CLICK_DATA_API,
+  //  Selector.DATA_DISMISS,
+  //  Ripples._handleClose(new Ripples())
+  // )
+
+
+  /**
+   * ------------------------------------------------------------------------
+   * jQuery
+   * ------------------------------------------------------------------------
+   */
+  $.fn[NAME] = Ripples._jQueryInterface
+  $.fn[NAME].Constructor = Ripples
+  $.fn[NAME].noConflict = () => {
+    $.fn[NAME] = JQUERY_NO_CONFLICT
+    return Ripples._jQueryInterface
+  }
+
+  return Ripples
+
+})(jQuery)
+
+export default Ripples

package.json

@@ -33,7 +33,7 @@
   "license": "MIT",
   "devDependencies": {
     "autoprefixer": "^6.0.3",
-    "babel-eslint": "^4.1.3",
+    "babel-eslint": "^4.1.6",
     "btoa": "~1.1.2",
     "glob": "~6.0.1",
     "grunt": "~0.4.5",
@@ -50,7 +50,7 @@
     "grunt-contrib-uglify": "~0.11.0",
     "grunt-contrib-watch": "~0.6.1",
     "grunt-csscomb": "~3.1.0",
-    "grunt-eslint": "^17.1.0",
+    "grunt-eslint": "^17.3.1",
     "grunt-exec": "~0.4.6",
     "grunt-html": "~5.0.0",
     "grunt-jekyll": "~0.4.2",