Browse Source

feat: hookElement can sync disabled status, hookElement value has type by text|on-off|boolean, hookNext can auto hook next element, Ignore .idea, Add eslintignore dist, package script cross-compatibility with Windows

Hugh Harlequin 2 years ago
parent
commit
345c109f86
7 changed files with 87 additions and 13 deletions
  1. 1 0
      .eslintignore
  2. 3 0
      .gitignore
  3. 38 6
      dist/js/bootstrap-switch.js
  4. 1 1
      dist/js/bootstrap-switch.min.js
  5. 1 0
      docs/CNAME
  6. 5 4
      package.json
  7. 38 2
      src/js/bootstrap-switch.js

+ 1 - 0
.eslintignore

@@ -0,0 +1 @@
+dist/js/*.js

+ 3 - 0
.gitignore

@@ -55,6 +55,9 @@ typings/
 # dotenv environment variables file
 .env
 
+# webstorm .idea
+.idea/
+
 # custom
 test/
 test.html

+ 38 - 6
dist/js/bootstrap-switch.js

@@ -1,7 +1,7 @@
 /**
   * bootstrap-switch - Turn checkboxes and radio buttons into toggle switches.
   *
-  * @version v3.3.5
+  * @version v3.4.0
   * @homepage https://bttstrp.github.io/bootstrap-switch
   * @author Mattia Larentis <[email protected]> (http://larentis.eu)
   * @license MIT
@@ -79,11 +79,12 @@
         inverse = options.inverse;
 
     return [state ? 'on' : 'off', size, disabled ? 'disabled' : undefined, readonly ? 'readonly' : undefined, indeterminate ? 'indeterminate' : undefined, inverse ? 'inverse' : undefined, id ? 'id-' + id : undefined].filter(function (v) {
-      return v == null;
+      return v !== undefined;
     });
   }
 
   function prvgetElementOptions() {
+    var valueType = ['text', 'on-off', 'boolean'];
     return {
       state: this.$element.is(':checked'),
       size: this.$element.data('size'),
@@ -101,7 +102,10 @@
       handleWidth: this.$element.data('handle-width'),
       labelWidth: this.$element.data('label-width'),
       baseClass: this.$element.data('base-class'),
-      wrapperClass: this.$element.data('wrapper-class')
+      wrapperClass: this.$element.data('wrapper-class'),
+      hookElement: null,
+      hookNext: this.$element.data('hook-next') === 'true',
+      valueType: valueType.indexOf(this.$element.data('value-type')) >= 0 ? this.$element.data('value-type') : 'on-off'
     };
   }
 
@@ -129,7 +133,7 @@
   function prvcontainerPosition() {
     var _this2 = this;
 
-    var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.ope;
+    var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.options.state;
 
     this.$container.css('margin-left', function () {
       var values = [0, '-' + _this2.privateHandleWidth + 'px'];
@@ -345,7 +349,7 @@
   function prvgetClasses(classes) {
     var _this8 = this;
 
-    if (!$.isArray(classes)) {
+    if (!Array.isArray(classes)) {
       return [prvgetClass.call(this, classes)];
     }
     return classes.map(function (v) {
@@ -364,6 +368,10 @@
       this.$element = $(element);
       this.options = $.extend({}, $.fn.bootstrapSwitch.defaults, prvgetElementOptions.call(this), options);
       this.prevOptions = {};
+      this.options.hookElement = this.options.hookNext ? this.$element.next() : this.options.hookElement;
+      if (this.options.hookElement) {
+        this.setHookValue(this.state());
+      }
       this.$wrapper = $('<div>', {
         class: function _class() {
           return getClasses(_this9.options, _this9.$element.attr('id')).map(function (v) {
@@ -386,6 +394,9 @@
       });
 
       this.$element.on('init.bootstrapSwitch', function () {
+        if (_this9.options.hookElement) {
+          _this9.options.hookElement.attr('disabled', _this9.$element.attr('disabled'));
+        }
         return _this9.options.onInit(element);
       });
       this.$element.on('switchChange.bootstrapSwitch', function () {
@@ -394,6 +405,9 @@
         }
 
         var changeState = _this9.options.onSwitchChange.apply(element, args);
+        if (_this9.options.hookElement) {
+          _this9.setHookValue(args[1]).change();
+        }
         if (changeState === false) {
           if (_this9.$element.is(':radio')) {
             $('[name="' + _this9.$element.attr('name') + '"]').trigger('previousState.bootstrapSwitch', true);
@@ -508,6 +522,9 @@
       value: function toggleDisabled() {
         this.options.disabled = !this.options.disabled;
         this.$element.prop('disabled', this.options.disabled);
+        if (this.options.hookElement) {
+          this.options.hookElement.prop('disabled', this.options.disabled);
+        }
         this.$wrapper.toggleClass(prvgetClass.call(this, 'disabled'));
         return this.$element;
       }
@@ -716,6 +733,18 @@
         this.$element.unwrap().unwrap().off('.bootstrapSwitch').removeData('bootstrap-switch');
         return this.$element;
       }
+    }, {
+      key: 'setHookValue',
+      value: function setHookValue(boolean) {
+        if (this.options.valueType === 'on-off') {
+          this.options.hookElement.val(boolean ? 'on' : 'off');
+        } else if (this.options.valueType === 'text') {
+          this.options.hookElement.val(this.options[boolean ? 'onText' : 'offText']);
+        } else {
+          this.options.hookElement.val(boolean);
+        }
+        return this.options.hookElement;
+      }
     }]);
 
     return BootstrapSwitch;
@@ -762,6 +791,9 @@
     baseClass: 'bootstrap-switch',
     wrapperClass: 'wrapper',
     onInit: function onInit() {},
-    onSwitchChange: function onSwitchChange() {}
+    onSwitchChange: function onSwitchChange() {},
+    hookElement: null,
+    hookNext: false,
+    valueType: 'on-off' // text|on-off|boolean
   };
 });

File diff suppressed because it is too large
+ 1 - 1
dist/js/bootstrap-switch.min.js


+ 1 - 0
docs/CNAME

@@ -0,0 +1 @@
+bootstrapswitch.com

+ 5 - 4
package.json

@@ -60,14 +60,15 @@
   "scripts": {
     "js:lint": "eslint src/js/",
     "js:test": "jest",
-    "js:build:dir": "mkdir -p dist/js",
+    "js:build:dir": "mkdir \"dist/js\"",
     "js:build:base": "babel -o dist/js/bootstrap-switch.js src/js/bootstrap-switch.js",
-    "js:build:min": "NODE_ENV=production babel -o dist/js/bootstrap-switch.min.js src/js/bootstrap-switch.js",
+    "js:build:min": "set NODE_ENV=production && babel -o dist/js/bootstrap-switch.min.js src/js/bootstrap-switch.js",
     "js:build:banner": "headr dist/js/bootstrap-switch.js -o dist/js/bootstrap-switch.js --version --homepage --author --license && headr dist/js/bootstrap-switch.min.js -o dist/js/bootstrap-switch.min.js --version --homepage --author --license",
     "js:build": "npm-run-all js:build:dir -p js:build:base js:build:min -s js:build:banner",
-    "js": "run-s js:lint js:test js:build",
+    "js:clean": "rm -rf \"dist/js\"",
+    "js": "run-s js:clean js:lint js:test js:build",
     "css:build:base": "lessc src/less/bootstrap2/build.less dist/css/bootstrap2/bootstrap-switch.css && lessc src/less/bootstrap3/build.less dist/css/bootstrap3/bootstrap-switch.css",
-    "css:build:min": "lessc --clean-css='--advanced' src/less/bootstrap2/build.less dist/css/bootstrap2/bootstrap-switch.min.css && lessc --clean-css='--advanced' src/less/bootstrap3/build.less dist/css/bootstrap3/bootstrap-switch.min.css",
+    "css:build:min": "lessc --clean-css=\"--advanced\" src/less/bootstrap2/build.less dist/css/bootstrap2/bootstrap-switch.min.css && lessc --clean-css=\"--advanced\" src/less/bootstrap3/build.less dist/css/bootstrap3/bootstrap-switch.min.css",
     "css:build:banner": "headr dist/css/bootstrap2/bootstrap-switch.css -o dist/css/bootstrap2/bootstrap-switch.css --version --homepage --author --license && headr dist/css/bootstrap2/bootstrap-switch.min.css -o dist/css/bootstrap2/bootstrap-switch.min.css --version --homepage --author --license && headr dist/css/bootstrap3/bootstrap-switch.css -o dist/css/bootstrap3/bootstrap-switch.css --version --homepage --author --license && headr dist/css/bootstrap3/bootstrap-switch.min.css -o dist/css/bootstrap3/bootstrap-switch.min.css --version --homepage --author --license",
     "css:build": "npm-run-all css:build:base css:build:min -p css:build:banner",
     "css": "run-p css:build",

+ 38 - 2
src/js/bootstrap-switch.js

@@ -12,11 +12,16 @@ function getClasses(options, id) {
     indeterminate ? 'indeterminate' : undefined,
     inverse ? 'inverse' : undefined,
     id ? `id-${id}` : undefined,
-  ].filter(v => v == null);
+  ].filter(v => v !== undefined);
 }
 
 
 function prvgetElementOptions() {
+  const valueType = [
+    'text',
+    'on-off',
+    'boolean',
+  ];
   return {
     state: this.$element.is(':checked'),
     size: this.$element.data('size'),
@@ -35,6 +40,9 @@ function prvgetElementOptions() {
     labelWidth: this.$element.data('label-width'),
     baseClass: this.$element.data('base-class'),
     wrapperClass: this.$element.data('wrapper-class'),
+    hookElement: null,
+    hookNext: this.$element.data('hook-next') === 'true',
+    valueType: valueType.indexOf(this.$element.data('value-type')) >= 0 ? this.$element.data('value-type') : 'on-off',
   };
 }
 
@@ -282,6 +290,11 @@ class BootstrapSwitch {
       options,
     );
     this.prevOptions = {};
+    this.options.hookElement = this.options.hookNext
+        ? this.$element.next() : this.options.hookElement;
+    if (this.options.hookElement) {
+      this.setHookValue(this.state());
+    }
     this.$wrapper = $('<div>', {
       class: () => getClasses(this.options, this.$element.attr('id'))
         .map(v => this::prvgetClass(v))
@@ -302,9 +315,17 @@ class BootstrapSwitch {
       class: this::prvgetClass('label'),
     });
 
-    this.$element.on('init.bootstrapSwitch', () => this.options.onInit(element));
+    this.$element.on('init.bootstrapSwitch', () => {
+      if (this.options.hookElement) {
+        this.options.hookElement.attr('disabled', this.$element.attr('disabled'));
+      }
+      return this.options.onInit(element);
+    });
     this.$element.on('switchChange.bootstrapSwitch', (...args) => {
       const changeState = this.options.onSwitchChange.apply(element, args);
+      if (this.options.hookElement) {
+        this.setHookValue(args[1]).change();
+      }
       if (changeState === false) {
         if (this.$element.is(':radio')) {
           $(`[name="${this.$element.attr('name')}"]`).trigger('previousState.bootstrapSwitch', true);
@@ -402,6 +423,7 @@ class BootstrapSwitch {
   toggleDisabled() {
     this.options.disabled = !this.options.disabled;
     this.$element.prop('disabled', this.options.disabled);
+    if (this.options.hookElement) { this.options.hookElement.prop('disabled', this.options.disabled); }
     this.$wrapper.toggleClass(this::prvgetClass('disabled'));
     return this.$element;
   }
@@ -565,6 +587,17 @@ class BootstrapSwitch {
       .removeData('bootstrap-switch');
     return this.$element;
   }
+
+  setHookValue(boolean) {
+    if (this.options.valueType === 'on-off') {
+      this.options.hookElement.val(boolean ? 'on' : 'off');
+    } else if (this.options.valueType === 'text') {
+      this.options.hookElement.val(this.options[boolean ? 'onText' : 'offText']);
+    } else {
+      this.options.hookElement.val(boolean);
+    }
+    return this.options.hookElement;
+  }
 }
 
 function bootstrapSwitch(option, ...args) {
@@ -605,4 +638,7 @@ $.fn.bootstrapSwitch.defaults = {
   wrapperClass: 'wrapper',
   onInit: () => {},
   onSwitchChange: () => {},
+  hookElement: null,
+  hookNext: false,
+  valueType: 'on-off', // text|on-off|boolean
 };

Some files were not shown because too many files changed in this diff