wip conversion to es6

This commit is contained in:
Kevin Ross 2015-11-30 14:57:40 -06:00
parent 861c5b2b9e
commit da332ed278
10 changed files with 12180 additions and 332 deletions

View File

@ -86,17 +86,17 @@ module.exports = function (grunt) {
modules: 'ignore'
},
files: {
'js/dist/util.js' : 'js/src/util.js',
'js/dist/alert.js' : 'js/src/alert.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',
'js/dist/dropdown.js' : 'js/src/dropdown.js',
'js/dist/modal.js' : 'js/src/modal.js',
'js/dist/scrollspy.js' : 'js/src/scrollspy.js',
'js/dist/tab.js' : 'js/src/tab.js',
'js/dist/tooltip.js' : 'js/src/tooltip.js',
'js/dist/popover.js' : 'js/src/popover.js'
'js/dist/ripples.js' : 'js/src/ripples.js' //,
//'js/dist/alert.js' : 'js/src/alert.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',
//'js/dist/dropdown.js' : 'js/src/dropdown.js',
//'js/dist/modal.js' : 'js/src/modal.js',
//'js/dist/scrollspy.js' : 'js/src/scrollspy.js',
//'js/dist/tab.js' : 'js/src/tab.js',
//'js/dist/tooltip.js' : 'js/src/tooltip.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/alert.js' : 'js/src/alert.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',
'dist/js/umd/dropdown.js' : 'js/src/dropdown.js',
'dist/js/umd/modal.js' : 'js/src/modal.js',
'dist/js/umd/scrollspy.js' : 'js/src/scrollspy.js',
'dist/js/umd/tab.js' : 'js/src/tab.js',
'dist/js/umd/tooltip.js' : 'js/src/tooltip.js',
'dist/js/umd/popover.js' : 'js/src/popover.js'
'dist/js/umd/ripples.js' : 'js/src/ripples.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',
//'dist/js/umd/collapse.js' : 'js/src/collapse.js',
//'dist/js/umd/dropdown.js' : 'js/src/dropdown.js',
//'dist/js/umd/modal.js' : 'js/src/modal.js',
//'dist/js/umd/scrollspy.js' : 'js/src/scrollspy.js',
//'dist/js/umd/tab.js' : 'js/src/tab.js',
//'dist/js/umd/tooltip.js' : 'js/src/tooltip.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/alert.js',
'js/src/button.js',
'js/src/carousel.js',
'js/src/collapse.js',
'js/src/dropdown.js',
'js/src/modal.js',
'js/src/scrollspy.js',
'js/src/tab.js',
'js/src/tooltip.js',
'js/src/popover.js'
'js/src/ripples.js',
//'js/src/alert.js',
//'js/src/button.js',
//'js/src/carousel.js',
//'js/src/collapse.js',
//'js/src/dropdown.js',
//'js/src/modal.js',
//'js/src/scrollspy.js',
//'js/src/tab.js',
//'js/src/tooltip.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']);

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

128
js/src/old/es6Template.js Normal file
View File

@ -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

320
js/src/old/ripples.js Normal file
View File

@ -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);

View File

@ -1,324 +1,350 @@
/* 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";
// FIXME: convert to member variable use instead of passing around/finding?
const Ripples = (($) => {
/**
* 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
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
}
/**
* Define the defaults of the plugin
*/
var defaults = {};
// ------------------------------------------------------------------------
// private
_createRipple(event) {
// Verify if the user is just touching on a device and return if so
if (this.isTouch() && event.type === "mousedown") {
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)) {
this._element.append("<div class='ripple-container'></div>")
}
// Find the ripple wrapper
let containerElement = this._element.children(".ripple-container")
// Get relY and relX positions
let relY = this._getRelY(containerElement, event)
let relX = this._getRelX(containerElement, event)
// If relY and/or relX are false, return the event
if (!relY && !relX) {
return
}
// Get the ripple color
let rippleColor = this._getRipplesColor(this._element)
// Create the ripple element
let rippleElement = $("<div></div>")
rippleElement.addClass("ripple").css(`left: ${relX}; top: ${relY}; background-color: ${rippleColor}`)
/* https://github.com/eslint/eslint/issues/4579
rippleElement.addClass("ripple").css({
"left": relX,
"top": relY,
"background-color": rippleColor
})
*/
// Append the ripple to the wrapper
containerElement.append(rippleElement)
// Make sure the ripple has the styles applied (ugly hack but it works)
(() => { return window.getComputedStyle(rippleElement[0]).opacity })()
// Turn on the ripple animation
this.rippleOn(this._element, rippleElement)
// Call the rippleEnd function when the transition "on" ends
setTimeout(() => {
this.rippleEnd(rippleElement)
}, 500)
// Detect when the user leaves the element
this._element.on("mouseup mouseleave touchend", () => {
rippleElement.data("mousedown", "off")
if (rippleElement.data("animating") === "off") {
this.rippleOut(rippleElement)
}
})
}
/**
* Create the main plugin function
*/
function Ripples(element, options) {
self = this;
/**
* Get the relX
*/
_getRelX(containerElement, event) {
let wrapperOffset = containerElement.offset()
this.element = $(element);
let result = null
if (!this.isTouch()) {
// Get the mouse position relative to the ripple wrapper
result = 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
this.options = $.extend({}, defaults, options);
if (event.touches.length === 1) {
result = event.touches[0].pageX - wrapperOffset.left
} else {
result = false
}
}
this._defaults = defaults;
this._name = ripples;
return result
}
this.init();
/**
* Get the relY
*/
_getRelY(containerElement, event) {
let wrapperOffset = containerElement.offset()
let result = null
if (!this.isTouch()) {
/**
* Get the mouse position relative to the ripple wrapper
*/
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
if (event.touches.length === 1) {
result = event.touches[0].pageY - wrapperOffset.top
} else {
result = false
}
}
return result
}
/**
* Get the ripple color
*/
_getRipplesColor(element) {
let color = element.data("ripple-color") ? element.data("ripple-color") : window.getComputedStyle(element[0]).color
return color
}
/**
* Verify if the client browser has transistion support
*/
_hasTransitionSupport() {
let thisBody = document.body || document.documentElement
let thisStyle = thisBody.style
let 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
*/
isTouch() {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
}
/**
* End the animation of the ripple
*/
rippleEnd(rippleElement) {
rippleElement.data("animating", "off")
if (rippleElement.data("mousedown") === "off") {
this.rippleOut(rippleElement)
}
}
/**
* Turn off the ripple effect
*/
rippleOut(rippleElement) {
rippleElement.off()
if (this._hasTransitionSupport()) {
rippleElement.addClass("ripple-out")
} else {
rippleElement.animate({ "opacity": 0 }, 100, () => {
rippleElement.trigger("transitionend")
})
}
rippleElement.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", () => {
rippleElement.remove()
})
}
/**
* Turn on the ripple effect
*/
rippleOn(element, rippleElement) {
let size = this._getNewSize(element, rippleElement)
if (this._hasTransitionSupport()) {
rippleElement
.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 {
rippleElement.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, () => {
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)
// }
// }
}
/**
* Initialize the plugin
* ------------------------------------------------------------------------
* Data Api implementation
* ------------------------------------------------------------------------
*/
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 $wrapper = $element.children(".ripple-container");
/**
* 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;
}
/**
* 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
*/
$wrapper.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);
}
});
});
};
// $(document).on(
// Event.CLICK_DATA_API,
// Selector.DATA_DISMISS,
// Ripples._handleClose(new Ripples())
// )
/**
* Get the new size based on the element height/width and the ripple width
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
*/
Ripples.prototype.getNewSize = function($element, $ripple) {
$.fn[NAME] = Ripples._jQueryInterface
$.fn[NAME].Constructor = Ripples
$.fn[NAME].noConflict = () => {
$.fn[NAME] = JQUERY_NO_CONFLICT
return Ripples._jQueryInterface
}
return (Math.max($element.outerWidth(), $element.outerHeight()) / $ripple.outerWidth()) * 2.5;
};
return Ripples
})(jQuery)
/**
* Get the relX
*/
Ripples.prototype.getRelX = function($wrapper, event) {
var wrapperOffset = $wrapper.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($wrapper, event) {
var wrapperOffset = $wrapper.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);
export default Ripples

View File

@ -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",