Adding modular js

src/bootstrap-table.js

@@ -7,6 +7,7 @@
 import Constants from './constants/index.js'
 import Utils from './utils/index.js'
 import VirtualScroll from './virtual-scroll/index.js'
+import {isNumeric, isEmptyObject} from './types.js'
 
 class BootstrapTable {
   constructor (el, options) {
@@ -425,7 +426,7 @@ class BootstrapTable {
           }
 
           // IF both values are numeric, do a numeric comparison
-          if (Utils.isNumeric(aa) && Utils.isNumeric(bb)) {
+          if (isNumeric(aa) && isNumeric(bb)) {
             // Convert numerical values form string to float.
             aa = parseFloat(aa)
             bb = parseFloat(bb)
@@ -708,7 +709,7 @@ class BootstrapTable {
 
       const s = this.searchText && (this.options.escape
         ? Utils.escapeHTML(this.searchText) : this.searchText).toLowerCase()
-      const f = Utils.isEmptyObject(this.filterColumns) ? null : this.filterColumns
+      const f = isEmptyObject(this.filterColumns) ? null : this.filterColumns
 
       // Check filter
       if (typeof this.filterOptions.filterAlgorithm === 'function') {
@@ -753,7 +754,7 @@ class BootstrapTable {
             continue
           }
 
-          const key = Utils.isNumeric(this.header.fields[j]) ? parseInt(this.header.fields[j], 10) : this.header.fields[j]
+          const key = isNumeric(this.header.fields[j]) ? parseInt(this.header.fields[j], 10) : this.header.fields[j]
           const column = this.columns[this.fieldsColumnsIndex[key]]
           let value
 
@@ -1171,7 +1172,7 @@ class BootstrapTable {
       }
     }
 
-    if (item._data && !Utils.isEmptyObject(item._data)) {
+    if (item._data && !isEmptyObject(item._data)) {
       for (const [k, v] of Object.entries(item._data)) {
         // ignore data-index
         if (k === 'index') {
@@ -1278,7 +1279,7 @@ class BootstrapTable {
       value = Utils.calculateObjectValue(column,
         this.header.formatters[j], [value_, item, i, field], value_)
 
-      if (item[`_${field}_data`] && !Utils.isEmptyObject(item[`_${field}_data`])) {
+      if (item[`_${field}_data`] && !isEmptyObject(item[`_${field}_data`])) {
         for (const [k, v] of Object.entries(item[`_${field}_data`])) {
           // ignore data-index
           if (k === 'index') {
@@ -1557,7 +1558,7 @@ class BootstrapTable {
       }
     }
 
-    if (!(Utils.isEmptyObject(this.filterColumnsPartial))) {
+    if (!(isEmptyObject(this.filterColumnsPartial))) {
       params.filter = JSON.stringify(this.filterColumnsPartial, null)
     }
 
@@ -1985,7 +1986,7 @@ class BootstrapTable {
 
   getData (useCurrentPage) {
     let data = this.options.data
-    if (this.searchText || this.options.sortName || !Utils.isEmptyObject(this.filterColumns) || !Utils.isEmptyObject(this.filterColumnsPartial)) {
+    if (this.searchText || this.options.sortName || !isEmptyObject(this.filterColumns) || !isEmptyObject(this.filterColumnsPartial)) {
       data = this.data
     }
 
@@ -2553,8 +2554,8 @@ class BootstrapTable {
   }
 
   filterBy (columns, options) {
-    this.filterOptions = Utils.isEmptyObject(options) ? this.options.filterOptions : $.extend(this.options.filterOptions, options)
-    this.filterColumns = Utils.isEmptyObject(columns) ? {} : columns
+    this.filterOptions = isEmptyObject(options) ? this.options.filterOptions : $.extend(this.options.filterOptions, options)
+    this.filterColumns = isEmptyObject(columns) ? {} : columns
     this.options.pageNumber = 1
     this.initSearch()
     this.updatePagination()

src/dom.js

@@ -0,0 +1,50 @@
+import {isString, isUndefined} from './types'
+
+export const createText = (text) => document.createTextNode(text)
+
+export const getText = (node) => {
+  if (isUndefined(node.textContent)) {
+    return node.innerText.trim()
+  }
+  return node.textContent.trim()
+}
+
+export const createElem = (...args) => {
+  const tag = args[0]
+  if (!isString(tag)) {
+    return null
+  }
+
+  const el = document.createElement(tag)
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i]
+
+    if (Array.isArray(arg) && arg.length === 2) {
+      el.setAttribute(arg[0], arg[1])
+    }
+  }
+  return el
+}
+
+export const removeElm = (node) => node.parentNode.removeChild(node)
+
+export const hasClass = (ele, cls) => {
+  if (isUndefined(ele)) {
+    return false
+  }
+
+  return ele.classList.contains(cls)
+}
+
+export const addClass = (ele, cls) => ele.classList.add(cls)
+
+export const removeClass = (ele, cls) => ele.classList.remove(cls)
+
+export const createOpt = (text, value, isSel) => {
+  const isSelected = isSel ? true : false
+  const opt = isSelected ?
+    createElem('option', ['value', value.trim()], ['selected', 'true']) :
+    createElem('option', ['value', value.trim()])
+  opt.appendChild(createText(text.trim()))
+  return opt
+}

src/extensions/filter-control/bootstrap-table-filter-control.js

@@ -4,6 +4,8 @@
  * @version: v2.2.0
  */
 
+import {createElem, createOpt} from '../../dom.js'
+
 const Utils = $.fn.bootstrapTable.utils
 const UtilsFilterControl = {
   getOptionsFromSelectControl (selectControl) {
@@ -29,21 +31,10 @@ const UtilsFilterControl = {
       }
     }
   },
-  addOptionToSelectControl (selectControl, _value, text) {
-    const value = $.trim(_value)
+  addOptionToSelectControl (selectControl, value, text) {
     const $selectControl = $(selectControl.get(selectControl.length - 1))
-    if (
-      !UtilsFilterControl.existOptionInSelectControl(selectControl, value)
-    ) {
-      $selectControl.append(
-        $('<option></option>')
-          .attr('value', value)
-          .text(
-            $('<div />')
-              .html(text)
-              .text()
-          )
-      )
+    if (!UtilsFilterControl.existOptionInSelectControl(selectControl, value)) {
+      $selectControl.append(createOpt(text, value))
     }
   },
   sortSelectControl (selectControl) {
@@ -302,7 +293,7 @@ const UtilsFilterControl = {
       $.each(header.children().children(), (i, tr) => {
         const $tr = $(tr)
         if ($tr.data('field') === column.field) {
-          $tr.find('.fht-cell').append(html.join(''))
+          $tr.find('.fht-cell').append(html[0]).append(html.length > 1 ? html[1] : '')
           return false
         }
       })
@@ -517,29 +508,26 @@ $.extend($.fn.bootstrapTable.defaults, {
   alignmentSelectControlOptions: undefined,
   filterTemplate: {
     input (that, field, isVisible, placeholder) {
-      return Utils.sprintf(
-        '<input type="text" class="form-control bootstrap-table-filter-control-%s" style="width: 100%; visibility: %s" placeholder="%s">',
-        field,
-        isVisible,
-        placeholder
-      )
+      return createElem('input',
+        ['type', 'text'],
+        ['class', Utils.sprintf('form-control bootstrap-table-filter-control-%s', field)],
+        ['width', '100%'],
+        ['visibility', isVisible],
+        ['placeholder', placeholder])
     },
     select ({ options }, field, isVisible) {
-      return Utils.sprintf(
-        '<select class="form-control bootstrap-table-filter-control-%s" style="width: 100%; visibility: %s" dir="%s"></select>',
-        field,
-        isVisible,
-        UtilsFilterControl.getDirectionOfSelectOptions(
-          options.alignmentSelectControlOptions
-        )
-      )
+      return createElem('select',
+        ['class', Utils.sprintf('form-control bootstrap-table-filter-control-%s', field)],
+        ['visibility', isVisible],
+        ['width', '100%'],
+        ['dir', UtilsFilterControl.getDirectionOfSelectOptions(options.alignmentSelectControlOptions)])
     },
     datepicker (that, field, isVisible) {
-      return Utils.sprintf(
-        '<input type="text" class="form-control date-filter-control bootstrap-table-filter-control-%s" style="width: 100%; visibility: %s">',
-        field,
-        isVisible
-      )
+      return createElem('input',
+        ['type', 'text'],
+        ['class', Utils.sprintf('form-control date-filter-control bootstrap-table-filter-control-%s', field)],
+        ['visibility', isVisible],
+        ['width', '100%'])
     }
   },
   disableControlWhenSearch: false,

src/types.js

@@ -0,0 +1,20 @@
+// eslint-disable-next-line no-void
+const UNDEFINED = void 0
+
+export const EMPTY_FN = function () {}
+
+export const isObject = (obj) => Object.prototype.toString.call(obj) === '[object Object]'
+
+export const isFunction = (obj) => Object.prototype.toString.call(obj) === '[object Function]'
+
+export const isString = (obj) => Object.prototype.toString.call(obj) === '[object String]'
+
+export const isNumeric = (obj) => Object.prototype.toString.call(obj) === '[object Number]'
+
+export const isBoolean = (obj) => Object.prototype.toString.call(obj) === '[object Boolean]'
+
+export const isUndefined = (obj) => obj === UNDEFINED
+
+export const isNull = (obj) => obj === null
+
+export const isEmptyObject = (obj) => isUndefined(obj) || isNull(obj) || obj.length === 0

src/utils/index.js

@@ -16,14 +16,6 @@ export default {
     return flag ? str : ''
   },
 
-  isEmptyObject (obj = {}) {
-    return Object.entries(obj).length === 0 && obj.constructor === Object
-  },
-
-  isNumeric (n) {
-    return !isNaN(parseFloat(n)) && isFinite(n)
-  },
-
   getFieldTitle (list, value) {
     for (const item of list) {
       if (item.field === value) {