Rewrote mobile extension to ES6.

src/extensions/mobile/bootstrap-table-mobile.js

@@ -1,136 +1,121 @@
 /**
  * @author: Dennis Hernández
  * @webSite: http://djhvscf.github.io/Blog
- * @version: v1.1.0
+ * @update zhixin wen <wenzhixin2010@gmail.com>
  */
 
-!function ($) {
-
-    'use strict';
-
-    var showHideColumns = function (that, checked) {
-        if (that.options.columnsHidden.length > 0 ) {
-            $.each(that.columns, function (i, column) {
-                if (that.options.columnsHidden.indexOf(column.field) !== -1) {
-                    if (column.visible !== checked) {
-                        that.toggleColumn(that.fieldsColumnsIndex[column.field], checked, true);
-                    }
-                }
-            });
+!($ => {
+
+  const debounce = (func, wait) => {
+    let timeout = 0
+    return (...args) => {
+      const later = () => {
+        timeout = 0
+        func(...args)
+      }
+      clearTimeout(timeout)
+      timeout = setTimeout(later, wait)
+    }
+  }
+
+  $.extend($.fn.bootstrapTable.defaults, {
+    mobileResponsive: false,
+    minWidth: 562,
+    minHeight: undefined,
+    heightThreshold: 100, // just slightly larger than mobile chrome's auto-hiding toolbar
+    checkOnInit: true,
+    columnsHidden: []
+  })
+
+  $.BootstrapTable = class extends $.BootstrapTable {
+    init (...args) {
+      super.init(...args)
+
+      if (!this.options.mobileResponsive || !this.options.minWidth) {
+        return
+      }
+
+      if (this.options.minWidth < 100 && this.options.resizable) {
+        console.info('The minWidth when the resizable extension is active should be greater or equal than 100')
+        this.options.minWidth = 100
+      }
+
+      let old = {
+        width: $(window).width(),
+        height: $(window).height()
+      }
+
+      $(window).on('resize orientationchange', debounce(() => {
+        // reset view if height has only changed by at least the threshold.
+        const width = $(window).width()
+        const height = $(window).height()
+
+        if (
+          Math.abs(old.height - height) > this.options.heightThreshold ||
+          old.width !== width
+        ) {
+          this.changeView(width, height)
+          old = {
+            width,
+            height
+          }
         }
-    };
-
-    var resetView = function (that) {
-        if (that.options.height || that.options.showFooter) {
-            setTimeout(function(){
-                that.resetView.call(that);
-            }, 1);
+      },200))
+
+      if (this.options.checkOnInit) {
+        const width = $(window).width()
+        const height = $(window).height()
+        this.changeView(width, height)
+        old = {
+          width,
+          height
         }
-    };
-
-    var changeView = function (that, width, height) {
-        if (that.options.minHeight) {
-            if ((width <= that.options.minWidth) && (height <= that.options.minHeight)) {
-                conditionCardView(that);
-            } else if ((width > that.options.minWidth) && (height > that.options.minHeight)) {
-                conditionFullView(that);
-            }
-        } else {
-            if (width <= that.options.minWidth) {
-                conditionCardView(that);
-            } else if (width > that.options.minWidth) {
-                conditionFullView(that);
+      }
+    }
+
+    conditionCardView () {
+      this.changeTableView(false)
+      this.showHideColumns(false)
+    }
+
+    conditionFullView () {
+      this.changeTableView(true)
+      this.showHideColumns(true)
+    }
+
+    changeTableView (cardViewState) {
+      this.options.cardView = cardViewState
+      this.toggleView()
+    }
+
+    showHideColumns (checked) {
+      if (this.options.columnsHidden.length > 0 ) {
+        this.columns.forEach(column => {
+          if (this.options.columnsHidden.includes(column.field)) {
+            if (column.visible !== checked) {
+              this.toggleColumn(this.fieldsColumnsIndex[column.field], checked, true)
             }
+          }
+        })
+      }
+    }
+
+    changeView (width, height) {
+      if (this.options.minHeight) {
+        if ((width <= this.options.minWidth) && (height <= this.options.minHeight)) {
+          this.conditionCardView()
+        } else if ((width > this.options.minWidth) && (height > this.options.minHeight)) {
+          this.conditionFullView()
         }
-
-        resetView(that);
-    };
-
-    var conditionCardView = function (that) {
-        changeTableView(that, false);
-        showHideColumns(that, false);
-    };
-
-    var conditionFullView = function (that) {
-        changeTableView(that, true);
-        showHideColumns(that, true);
-    };
-
-    var changeTableView = function (that, cardViewState) {
-        that.options.cardView = cardViewState;
-        that.toggleView();
-    };
-
-    var debounce = function(func,wait) {
-        var timeout;
-        return function() {
-            var context = this,
-                args = arguments;
-            var later = function() {
-                timeout = null;
-                func.apply(context,args);
-            };
-            clearTimeout(timeout);
-            timeout = setTimeout(later, wait);
-        };
-    };
-
-    $.extend($.fn.bootstrapTable.defaults, {
-        mobileResponsive: false,
-        minWidth: 562,
-        minHeight: undefined,
-        heightThreshold: 100, // just slightly larger than mobile chrome's auto-hiding toolbar
-        checkOnInit: true,
-        columnsHidden: []
-    });
-
-    var BootstrapTable = $.fn.bootstrapTable.Constructor,
-        _init = BootstrapTable.prototype.init;
-
-    BootstrapTable.prototype.init = function () {
-        _init.apply(this, Array.prototype.slice.apply(arguments));
-
-        if (!this.options.mobileResponsive) {
-            return;
+      } else {
+        if (width <= this.options.minWidth) {
+          this.conditionCardView()
+        } else if (width > this.options.minWidth) {
+          this.conditionFullView()
         }
+      }
 
-        if (!this.options.minWidth) {
-            return;
-        }
-
-        if (this.options.minWidth < 100 && this.options.resizable) {
-            console.log("The minWidth when the resizable extension is active should be greater or equal than 100");
-            this.options.minWidth = 100;
-        }
-
-        var that = this,
-            old = {
-                width: $(window).width(),
-                height: $(window).height()
-            };
-
-        $(window).on('resize orientationchange',debounce(function (evt) {
-            // reset view if height has only changed by at least the threshold.
-            var height = $(this).height(),
-                width = $(this).width();
-
-            if (Math.abs(old.height - height) > that.options.heightThreshold || old.width != width) {
-                changeView(that, width, height);
-                old = {
-                    width: width,
-                    height: height
-                };
-            }
-        },200));
-
-        if (this.options.checkOnInit) {
-            var height = $(window).height(),
-                width = $(window).width();
-            changeView(this, width, height);
-            old = {
-                width: width,
-                height: height
-            };
-        }
-    };
-}(jQuery);
+      this.resetView()
+    }
+  }
+})(jQuery)