converted togglebutton to es6

This commit is contained in:
Kevin Ross 2015-12-01 12:47:00 -06:00
parent d1fe1a06dd
commit 2eb61027da
3 changed files with 85 additions and 12 deletions

View File

@ -104,7 +104,7 @@ module.exports = function (grunt) {
'js/dist/ripples.js' : 'js/src/ripples.js', 'js/dist/ripples.js' : 'js/src/ripples.js',
'js/dist/autofill.js' : 'js/src/autofill.js', 'js/dist/autofill.js' : 'js/src/autofill.js',
'js/dist/checkbox.js' : 'js/src/checkbox.js', 'js/dist/checkbox.js' : 'js/src/checkbox.js',
//'js/dist/carousel.js' : 'js/src/carousel.js', 'js/dist/togglebutton.js' : 'js/src/togglebutton.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',
@ -131,7 +131,7 @@ module.exports = function (grunt) {
'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/autofill.js' : 'js/src/autofill.js',
'dist/js/umd/checkbox.js' : 'js/src/checkbox.js', 'dist/js/umd/checkbox.js' : 'js/src/checkbox.js',
//'dist/js/umd/button.js' : 'js/src/button.js', 'dist/js/umd/togglebutton.js' : 'js/src/togglebutton.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',
@ -194,7 +194,7 @@ module.exports = function (grunt) {
'js/src/ripples.js', 'js/src/ripples.js',
'js/src/autofill.js', 'js/src/autofill.js',
'js/src/checkbox.js', 'js/src/checkbox.js',
//'js/src/carousel.js', 'js/src/togglebutton.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',

View File

@ -59,12 +59,12 @@
// .data("mdproc", true) // .data("mdproc", true)
// .after("<span class='checkbox-material'><span class='check'></span></span>"); // .after("<span class='checkbox-material'><span class='check'></span></span>");
//}, //},
"togglebutton": function(selector) { //"togglebutton": function(selector) {
$((selector) ? selector : this.options.togglebuttonElements) // $((selector) ? selector : this.options.togglebuttonElements)
.filter(":notmdproc") // .filter(":notmdproc")
.data("mdproc", true) // .data("mdproc", true)
.after("<span class='toggle'></span>"); // .after("<span class='toggle'></span>");
}, //},
"radio": function(selector) { "radio": function(selector) {
// Add fake-radio to material radios // Add fake-radio to material radios
$((selector) ? selector : this.options.radioElements) $((selector) ? selector : this.options.radioElements)
@ -241,11 +241,12 @@
this.attachInputEventHandlers(); this.attachInputEventHandlers();
} }
if (this.options.checkbox) { if (this.options.checkbox) {
this.checkbox(); //this.checkbox();
$(this.options.checkboxElements).checkbox() $(this.options.checkboxElements).checkbox()
} }
if (this.options.togglebutton) { if (this.options.togglebutton) {
this.togglebutton(); //this.togglebutton();
$(this.options.togglebuttonElements).togglebutton()
} }
if (this.options.radio) { if (this.options.radio) {
this.radio(); this.radio();
@ -279,7 +280,7 @@
} }
if (this.options.togglebutton) { if (this.options.togglebutton) {
$document.arrive(this.options.togglebuttonElements, function() { $document.arrive(this.options.togglebuttonElements, function() {
$.material.togglebutton($(this)); $(this).togglebutton();
}); });
} }

72
js/src/togglebutton.js Normal file
View File

@ -0,0 +1,72 @@
//import Util from './util'
const Togglebutton = (($) => {
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
const NAME = 'togglebutton'
const DATA_KEY = `mdb.${NAME}`
const JQUERY_NO_CONFLICT = $.fn[NAME]
const Default = {
template: `<span class='toggle'></span>`
}
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
class Togglebutton {
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 Togglebutton(this, config)
$element.data(DATA_KEY, data)
}
})
}
}
/**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
*/
$.fn[NAME] = Togglebutton._jQueryInterface
$.fn[NAME].Constructor = Togglebutton
$.fn[NAME].noConflict = () => {
$.fn[NAME] = JQUERY_NO_CONFLICT
return Togglebutton._jQueryInterface
}
return Togglebutton
})(jQuery)
export default Togglebutton