Adding new options: appendFilterControls

site/docs/extensions/filter-control.md

@@ -79,6 +79,16 @@ Dependence if you use the datepicker option: [bootstrap-datepicker](https://gith
 
 - **Default:** `false`
 
+### appendFilterControls
+
+- **type:** `Boolean`
+
+- **Detail:**
+
+   Set to true to append the filter controls after the column title. If false, the controls will be prepend before column title.
+
+- **Default:** `false`
+
 ## Column options
 
 ### filterControl

src/dom.js

@@ -1,88 +0,0 @@
-import {isString, isUndefined, isJQueryObject} from './types'
-import {showHide} from './helpers'
-
-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 removeElem = (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
-}
-
-export const is = (ele, tag) => {
-  tag = tag.toLowerCase()
-  if (isJQueryObject(ele)) {
-    ele = ele[0]
-  }
-
-  if (tag === ':focus') {
-    return ele === document.activeElement
-  }
-
-  if (tag === ':checkbox') {
-    return ele.type === 'checkbox'
-  }
-
-  if (tag === ':radio') {
-    return ele.type === 'radio'
-  }
-
-  if (tag === 'input[type=text]') {
-    return ele.type === 'text' && ele.nodeName.toLowerCase() === 'input'
-  }
-
-  ele.nodeName.toLowerCase() === tag
-}
-
-export const find = (ele, selector) => {
-  if (isJQueryObject(ele)) {
-    ele = ele[0]
-  }
-
-  return ele.querySelectorAll(selector)
-}
-
-export const show = (elements) => showHide(elements, true)
-
-export const hide = (elements) => showHide(elements)

src/helpers.js

@@ -1,50 +0,0 @@
-export const defaultDisplay = (tag) => {
-  const iframe = document.createElement('iframe')
-  iframe.setAttribute('frameborder', 0)
-  iframe.setAttribute('width', 0)
-  iframe.setAttribute('height', 0)
-  document.documentElement.appendChild(iframe)
-
-  const doc = (iframe.contentWindow || iframe.contentDocument).document
-
-  // IE support
-  doc.write()
-  doc.close()
-
-  const testEl = doc.createElement(tag)
-  doc.documentElement.appendChild(testEl)
-  const display = (window.getComputedStyle ? getComputedStyle(testEl, null) : testEl.currentStyle).display
-  iframe.parentNode.removeChild(iframe)
-  return display
-}
-
-export const showHide = (elements, show) => {
-  let display
-  let elem
-  let computedDisplay
-  const values = []
-  const length = elements.length
-
-  for (let index = 0; index < length; index++) {
-    elem = elements[index]
-    if ( !elem.style ) {
-      continue
-    }
-
-    values[index] = elem.getAttribute('data-olddisplay')
-    display = elem.style.display
-    computedDisplay = (window.getComputedStyle ? getComputedStyle(elem, null) : elem.currentStyle).display
-
-    if (show) {
-      if (!values[index] && display === 'none') elem.style.display = ''
-      if (elem.style.display === '' && (computedDisplay === 'none')) values[index] = values[index] || defaultDisplay(elem.nodeName)
-    } else {
-      if (display && display !== 'none' || !(computedDisplay === 'none'))
-        elem.setAttribute('data-olddisplay', (computedDisplay === 'none') ? display : computedDisplay)
-    }
-    if (!show || elem.style.display === 'none' || elem.style.display === '')
-      elem.style.display = show ? values[index] || '' : 'none'
-  }
-
-  return elements
-}

src/polyfill.js

@@ -1,21 +0,0 @@
-function closest () {
-  if (!Element.prototype.matches) {
-    Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector
-  }
-
-  if (!Element.prototype.closest) {
-    Element.prototype.closest = function (s) {
-      var el = this
-
-      do {
-        if (el.matches(s)) return el
-        el = el.parentElement || el.parentNode
-      } while (el !== null && el.nodeType === 1)
-      return null
-    }
-  }
-}
-
-export default function Polyfill () {
-  closest()
-}

src/sort.js

@@ -1,44 +0,0 @@
-import {isNumeric} from './types.js'
-
-export default function Sort (a, b, order, sortStable) {
-  if (a === undefined || a === null) {
-    a = ''
-  }
-  if (b === undefined || b === null) {
-    b = ''
-  }
-
-  if (sortStable && a === b) {
-    a = a._position
-    b = b._position
-  }
-
-  // IF both values are numeric, do a numeric comparison
-  if (isNumeric(a) && isNumeric(b)) {
-    // Convert numerical values form string to float.
-    a = parseFloat(a)
-    b = parseFloat(b)
-    if (a < b) {
-      return order * -1
-    }
-    if (a > b) {
-      return order
-    }
-    return 0
-  }
-
-  if (a === b) {
-    return 0
-  }
-
-  // If value is not a string, convert to string
-  if (typeof a !== 'string') {
-    a = a.toString()
-  }
-
-  if (a.localeCompare(b) === -1) {
-    return order * -1
-  }
-
-  return order
-}

src/types.js

@@ -1,30 +0,0 @@
-// 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
-
-export const isPlainObject = (obj) => Object.prototype.toString.call(obj) === '[object Object]'
-
-export const isJQueryObject = (obj) => {
-  if (window.jQuery) {
-    return obj instanceof jQuery
-  }
-
-  return false
-}