mirror of
				https://github.com/mdbootstrap/mdb-ui-kit.git
				synced 2025-11-04 01:47:35 +03:00 
			
		
		
		
	converted togglebutton to es6
This commit is contained in:
		
							parent
							
								
									d1fe1a06dd
								
							
						
					
					
						commit
						2eb61027da
					
				| 
						 | 
				
			
			@ -104,7 +104,7 @@ module.exports = function (grunt) {
 | 
			
		|||
          'js/dist/ripples.js'      : 'js/src/ripples.js',
 | 
			
		||||
          'js/dist/autofill.js'     : 'js/src/autofill.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/dropdown.js'  : 'js/src/dropdown.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/autofill.js'     : 'js/src/autofill.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/collapse.js'  : 'js/src/collapse.js',
 | 
			
		||||
          //'dist/js/umd/dropdown.js'  : 'js/src/dropdown.js',
 | 
			
		||||
| 
						 | 
				
			
			@ -194,7 +194,7 @@ module.exports = function (grunt) {
 | 
			
		|||
          'js/src/ripples.js',
 | 
			
		||||
          'js/src/autofill.js',
 | 
			
		||||
          'js/src/checkbox.js',
 | 
			
		||||
          //'js/src/carousel.js',
 | 
			
		||||
          'js/src/togglebutton.js',
 | 
			
		||||
          //'js/src/collapse.js',
 | 
			
		||||
          //'js/src/dropdown.js',
 | 
			
		||||
          //'js/src/modal.js',
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -59,12 +59,12 @@
 | 
			
		|||
    //  .data("mdproc", true)
 | 
			
		||||
    //  .after("<span class='checkbox-material'><span class='check'></span></span>");
 | 
			
		||||
    //},
 | 
			
		||||
    "togglebutton": function(selector) {
 | 
			
		||||
      $((selector) ? selector : this.options.togglebuttonElements)
 | 
			
		||||
      .filter(":notmdproc")
 | 
			
		||||
      .data("mdproc", true)
 | 
			
		||||
      .after("<span class='toggle'></span>");
 | 
			
		||||
    },
 | 
			
		||||
    //"togglebutton": function(selector) {
 | 
			
		||||
    //  $((selector) ? selector : this.options.togglebuttonElements)
 | 
			
		||||
    //  .filter(":notmdproc")
 | 
			
		||||
    //  .data("mdproc", true)
 | 
			
		||||
    //  .after("<span class='toggle'></span>");
 | 
			
		||||
    //},
 | 
			
		||||
    "radio": function(selector) {
 | 
			
		||||
      // Add fake-radio to material radios
 | 
			
		||||
      $((selector) ? selector : this.options.radioElements)
 | 
			
		||||
| 
						 | 
				
			
			@ -241,11 +241,12 @@
 | 
			
		|||
        this.attachInputEventHandlers();
 | 
			
		||||
      }
 | 
			
		||||
      if (this.options.checkbox) {
 | 
			
		||||
        this.checkbox();
 | 
			
		||||
        //this.checkbox();
 | 
			
		||||
        $(this.options.checkboxElements).checkbox()
 | 
			
		||||
      }
 | 
			
		||||
      if (this.options.togglebutton) {
 | 
			
		||||
        this.togglebutton();
 | 
			
		||||
        //this.togglebutton();
 | 
			
		||||
        $(this.options.togglebuttonElements).togglebutton()
 | 
			
		||||
      }
 | 
			
		||||
      if (this.options.radio) {
 | 
			
		||||
        this.radio();
 | 
			
		||||
| 
						 | 
				
			
			@ -279,7 +280,7 @@
 | 
			
		|||
        }
 | 
			
		||||
        if (this.options.togglebutton) {
 | 
			
		||||
          $document.arrive(this.options.togglebuttonElements, function() {
 | 
			
		||||
            $.material.togglebutton($(this));
 | 
			
		||||
            $(this).togglebutton();
 | 
			
		||||
          });
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
							
								
								
									
										72
									
								
								js/src/togglebutton.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										72
									
								
								js/src/togglebutton.js
									
									
									
									
									
										Normal 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
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user