slim-select 1.27.0 → 2.0.0

package/src/slim-select/slim.ts

@@ -1,770 +0,0 @@
-import SlimSelect from './index'
-import { ensureElementInView, isValueInArrayOfObjects, highlight } from './helper'
-import { Option, Optgroup, validateOption } from './data'
-
-interface SingleSelected {
-  container: HTMLDivElement
-  placeholder: HTMLSpanElement
-  deselect: HTMLSpanElement
-  arrowIcon: {
-    container: HTMLSpanElement
-    arrow: HTMLSpanElement
-  }
-}
-
-interface MultiSelected {
-  container: HTMLDivElement
-  values: HTMLDivElement
-  add: HTMLDivElement
-  plus: HTMLSpanElement
-}
-
-interface Search {
-  container: HTMLDivElement
-  input: HTMLInputElement
-  addable?: HTMLDivElement
-}
-
-// Class is responsible for creating all the elements
-export class Slim {
-  public main: SlimSelect
-  public container: HTMLDivElement
-  public singleSelected: SingleSelected | null
-  public multiSelected: MultiSelected | null
-  public content: HTMLDivElement
-  public search: Search
-  public list: HTMLDivElement
-  constructor(info: { main: SlimSelect }) {
-    this.main = info.main
-
-    // Create elements in order of appending
-    this.container = this.containerDiv()
-    this.content = this.contentDiv()
-    this.search = this.searchDiv()
-    this.list = this.listDiv()
-    this.options()
-
-    this.singleSelected = null
-    this.multiSelected = null
-    if (this.main.config.isMultiple) {
-      this.multiSelected = this.multiSelectedDiv()
-      if (this.multiSelected) {
-        this.container.appendChild(this.multiSelected.container)
-      }
-    } else {
-      this.singleSelected = this.singleSelectedDiv()
-      this.container.appendChild(this.singleSelected.container)
-    }
-    if (this.main.config.addToBody) {
-      // add the id to the content as a class as well
-      // this is important on touch devices as the close method is
-      // triggered when clicks on the document body occur
-      this.content.classList.add(this.main.config.id)
-      document.body.appendChild(this.content)
-    } else {
-      this.container.appendChild(this.content)
-    }
-    this.content.appendChild(this.search.container)
-    this.content.appendChild(this.list)
-  }
-
-  // Create main container
-  public containerDiv(): HTMLDivElement {
-    // Create main container
-    const container = document.createElement('div') as HTMLDivElement
-
-    // Add style and classes
-    container.style.cssText = this.main.config.style
-
-    this.updateContainerDivClass(container)
-
-    return container
-  }
-
-  // Will look at the original select and pull classes from it
-  public updateContainerDivClass(container: HTMLDivElement) {
-    // Set config class
-    this.main.config.class = this.main.select.element.className.split(' ')
-
-    // Clear out classlist
-    container.className = ''
-
-    // Loop through config class and add
-    container.classList.add(this.main.config.id)
-    container.classList.add(this.main.config.main)
-    for (const c of this.main.config.class) {
-      if (c.trim() !== '') {
-        container.classList.add(c)
-      }
-    }
-  }
-
-  public singleSelectedDiv(): SingleSelected {
-    const container: HTMLDivElement = document.createElement('div')
-    container.classList.add(this.main.config.singleSelected)
-
-    // Placeholder text
-    const placeholder: HTMLSpanElement = document.createElement('span')
-    placeholder.classList.add('placeholder')
-    container.appendChild(placeholder)
-
-    // Deselect
-    const deselect = document.createElement('span')
-    deselect.innerHTML = this.main.config.deselectLabel
-    deselect.classList.add('ss-deselect')
-    deselect.onclick = (e) => {
-      e.stopPropagation()
-
-      // Dont do anything if disabled
-      if (!this.main.config.isEnabled) {return}
-
-      this.main.set('')
-    }
-    container.appendChild(deselect)
-
-    // Arrow
-    const arrowContainer: HTMLSpanElement = document.createElement('span')
-    arrowContainer.classList.add(this.main.config.arrow)
-    const arrowIcon = document.createElement('span')
-    arrowIcon.classList.add('arrow-down')
-    arrowContainer.appendChild(arrowIcon)
-    container.appendChild(arrowContainer)
-
-    // Add onclick for main selector div
-    container.onclick = () => {
-      if (!this.main.config.isEnabled) { return }
-
-      this.main.data.contentOpen ? this.main.close() : this.main.open()
-    }
-
-    return {
-      container,
-      placeholder,
-      deselect,
-      arrowIcon: {
-        container: arrowContainer,
-        arrow: arrowIcon
-      }
-    }
-  }
-
-  // Based upon current selection set placeholder text
-  public placeholder(): void {
-    const selected = this.main.data.getSelected() as Option
-
-    // Placeholder display
-    if (selected === null || (selected && selected.placeholder)) {
-      const placeholder = document.createElement('span')
-      placeholder.classList.add(this.main.config.disabled)
-      placeholder.innerHTML = this.main.config.placeholderText
-      if (this.singleSelected) {
-        this.singleSelected.placeholder.innerHTML = placeholder.outerHTML
-      }
-    } else {
-      let selectedValue = ''
-      if (selected) {
-        selectedValue = selected.innerHTML && this.main.config.valuesUseText !== true ? selected.innerHTML : selected.text
-      }
-      if (this.singleSelected) {
-        this.singleSelected.placeholder.innerHTML = (selected ? selectedValue : '')
-      }
-    }
-  }
-
-  // Based upon current selection/settings hide/show deselect
-  public deselect(): void {
-    if (this.singleSelected) {
-      // if allowDeselect is false just hide it
-      if (!this.main.config.allowDeselect) {
-        this.singleSelected.deselect.classList.add('ss-hide')
-        return
-      }
-
-      if (this.main.selected() === '') {
-        this.singleSelected.deselect.classList.add('ss-hide')
-      } else {
-        this.singleSelected.deselect.classList.remove('ss-hide')
-      }
-    }
-  }
-
-  public multiSelectedDiv(): MultiSelected {
-    const container = document.createElement('div')
-    container.classList.add(this.main.config.multiSelected)
-
-    const values = document.createElement('div')
-    values.classList.add(this.main.config.values)
-    container.appendChild(values)
-
-    const add = document.createElement('div')
-    add.classList.add(this.main.config.add)
-    const plus = document.createElement('span')
-    plus.classList.add(this.main.config.plus)
-    plus.onclick = (e) => {
-      if (this.main.data.contentOpen) {
-        this.main.close()
-        e.stopPropagation()
-      }
-    }
-    add.appendChild(plus)
-    container.appendChild(add)
-
-    container.onclick = (e) => {
-      if (!this.main.config.isEnabled) { return }
-
-      // Open only if you are not clicking on x text
-      const target = e.target as Element
-      if (!target.classList.contains(this.main.config.valueDelete)) {
-        this.main.data.contentOpen ? this.main.close() : this.main.open()
-      }
-    }
-
-    return {
-      container,
-      values,
-      add,
-      plus
-    }
-  }
-
-  // Get selected values and append to multiSelected values container
-  // and remove those who shouldnt exist
-  public values(): void {
-    if (!this.multiSelected) { return }
-    let currentNodes = this.multiSelected.values.childNodes as any as HTMLDivElement[]
-    const selected = this.main.data.getSelected() as Option[]
-
-    // Remove nodes that shouldnt be there
-    let exists
-    const nodesToRemove = []
-    for (const c of currentNodes) {
-      exists = true
-      for (const s of selected) {
-        if (String(s.id) === String(c.dataset.id)) {
-          exists = false
-        }
-      }
-
-      if (exists) { nodesToRemove.push(c) }
-    }
-
-    for (const n of nodesToRemove) {
-      n.classList.add('ss-out')
-      this.multiSelected.values.removeChild(n)
-    }
-
-    // Add values that dont currently exist
-    currentNodes = this.multiSelected.values.childNodes as any as HTMLDivElement[]
-    for (let s = 0; s < selected.length; s++) {
-      exists = false
-      for (const c of currentNodes) {
-        if (String(selected[s].id) === String(c.dataset.id)) {
-          exists = true
-        }
-      }
-
-      if (!exists) {
-        if (currentNodes.length === 0 || !HTMLElement.prototype.insertAdjacentElement) {
-          this.multiSelected.values.appendChild(this.valueDiv(selected[s]))
-        } else if (s === 0) {
-          this.multiSelected.values.insertBefore(this.valueDiv(selected[s]), (currentNodes[s] as any))
-        } else {
-          (currentNodes[s - 1] as any).insertAdjacentElement('afterend', this.valueDiv(selected[s]))
-        }
-      }
-    }
-
-    // If there are no values set placeholder
-    if (selected.length === 0) {
-      const placeholder = document.createElement('span')
-      placeholder.classList.add(this.main.config.disabled)
-      placeholder.innerHTML = this.main.config.placeholderText
-      this.multiSelected.values.innerHTML = placeholder.outerHTML
-    }
-  }
-
-  public valueDiv(optionObj: Option): HTMLDivElement {
-    const value = document.createElement('div')
-    value.classList.add(this.main.config.value)
-    value.dataset.id = optionObj.id
-
-    const text = document.createElement('span')
-    text.classList.add(this.main.config.valueText)
-    text.innerHTML = (optionObj.innerHTML && this.main.config.valuesUseText !== true ? optionObj.innerHTML : optionObj.text)
-    value.appendChild(text)
-
-    if (!optionObj.mandatory) {
-      const deleteSpan = document.createElement('span')
-      deleteSpan.classList.add(this.main.config.valueDelete)
-      deleteSpan.innerHTML = this.main.config.deselectLabel
-      deleteSpan.onclick = (e) => {
-        e.preventDefault()
-        e.stopPropagation()
-        let shouldUpdate = false
-
-        // If no beforeOnChange is set automatically update at end
-        if (!this.main.beforeOnChange) {shouldUpdate = true}
-
-        if (this.main.beforeOnChange) {
-          const selected = this.main.data.getSelected() as Option
-          const currentValues = JSON.parse(JSON.stringify(selected))
-
-          // Remove from current selection
-          for (let i = 0; i < currentValues.length; i++) {
-            if (currentValues[i].id === optionObj.id) {
-              currentValues.splice(i, 1)
-            }
-          }
-
-          const beforeOnchange = this.main.beforeOnChange(currentValues)
-          if (beforeOnchange !== false) { shouldUpdate = true }
-        }
-
-        if (shouldUpdate) {
-          this.main.data.removeFromSelected((optionObj.id as any), 'id')
-          this.main.render()
-          this.main.select.setValue()
-          this.main.data.onDataChange() // Trigger on change callback
-        }
-      }
-
-
-      value.appendChild(deleteSpan)
-    }
-
-    return value
-  }
-
-  // Create content container
-  public contentDiv(): HTMLDivElement {
-    const container = document.createElement('div')
-    container.classList.add(this.main.config.content)
-    return container
-  }
-
-  public searchDiv(): Search {
-    const container = document.createElement('div')
-    const input = document.createElement('input')
-    const addable = document.createElement('div')
-    container.classList.add(this.main.config.search)
-
-    // Setup search return object
-    const searchReturn: Search = {
-      container,
-      input
-    }
-
-    // We still want the search to be tabable but not shown
-    if (!this.main.config.showSearch) {
-      container.classList.add(this.main.config.hide)
-      input.readOnly = true
-    }
-
-    input.type = 'search'
-    input.placeholder = this.main.config.searchPlaceholder
-    input.tabIndex = 0
-    input.setAttribute('aria-label', this.main.config.searchPlaceholder)
-    input.setAttribute('autocapitalize', 'off')
-    input.setAttribute('autocomplete', 'off')
-    input.setAttribute('autocorrect', 'off')
-    input.onclick = (e) => {
-      setTimeout(() => {
-        const target = e.target as HTMLInputElement
-        if (target.value === '') { this.main.search('') }
-      }, 10)
-    }
-    input.onkeydown = (e) => {
-      if (e.key === 'ArrowUp') {
-        this.main.open()
-        this.highlightUp()
-        e.preventDefault()
-      } else if (e.key === 'ArrowDown') {
-        this.main.open()
-        this.highlightDown()
-        e.preventDefault()
-      } else if (e.key === 'Tab') {
-        if (!this.main.data.contentOpen) {
-          setTimeout(() => { this.main.close() }, this.main.config.timeoutDelay)
-        } else {
-          this.main.close()
-        }
-      } else if (e.key === 'Enter') {
-        e.preventDefault()
-      }
-    }
-    input.onkeyup = (e) => {
-      const target = e.target as HTMLInputElement
-      if (e.key === 'Enter') {
-        if (this.main.addable && e.ctrlKey) {
-          addable.click()
-          e.preventDefault()
-          e.stopPropagation()
-          return
-        }
-        const highlighted = this.list.querySelector('.' + this.main.config.highlighted) as HTMLDivElement
-        if (highlighted) { highlighted.click() }
-      } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-        // Cancel out to leave for onkeydown to handle
-      } else if (e.key === 'Escape') {
-        this.main.close()
-      } else {
-        if (this.main.config.showSearch && this.main.data.contentOpen) {
-          this.main.search(target.value)
-        } else {
-          input.value = ''
-        }
-      }
-      e.preventDefault()
-      e.stopPropagation()
-    }
-    input.onfocus = () => { this.main.open() }
-    container.appendChild(input)
-
-    if (this.main.addable) {
-      addable.classList.add(this.main.config.addable)
-      addable.innerHTML = '+'
-      addable.onclick = (e) => {
-        if (this.main.addable) {
-          e.preventDefault()
-          e.stopPropagation()
-
-          const inputValue = this.search.input.value
-          if (inputValue.trim() === '') { this.search.input.focus(); return }
-
-          const addableValue = this.main.addable(inputValue)
-          let addableValueStr = ''
-          if (!addableValue) { return }
-
-          if (typeof addableValue === 'object') {
-            const validValue = validateOption(addableValue)
-            if (validValue) {
-              this.main.addData(addableValue)
-              addableValueStr = (addableValue.value ? addableValue.value : addableValue.text)
-            }
-          } else {
-            this.main.addData(this.main.data.newOption({
-              text: addableValue,
-              value: addableValue
-            }))
-            addableValueStr = addableValue
-          }
-
-          this.main.search('')
-          setTimeout(() => { // Temp fix to solve multi render issue
-            this.main.set(addableValueStr, 'value', false, false)
-          }, 100)
-
-          // Close it only if closeOnSelect = true
-          if (this.main.config.closeOnSelect) {
-            setTimeout(() => { // Give it a little padding for a better looking animation
-              this.main.close()
-            }, 100)
-          }
-        }
-      }
-      container.appendChild(addable)
-
-      searchReturn.addable = addable
-    }
-
-    return searchReturn
-  }
-
-  public highlightUp(): void {
-    const highlighted = this.list.querySelector('.' + this.main.config.highlighted) as HTMLDivElement
-    let prev: HTMLDivElement | null = null
-    if (highlighted) {
-      prev = highlighted.previousSibling as HTMLDivElement
-      while (prev !== null) {
-        if (prev.classList.contains(this.main.config.disabled)) {
-          prev = prev.previousSibling as HTMLDivElement
-          continue
-        } else {
-          break
-        }
-      }
-    } else {
-      const allOptions = this.list.querySelectorAll('.' + this.main.config.option + ':not(.' + this.main.config.disabled + ')')
-      prev = allOptions[allOptions.length - 1] as HTMLDivElement
-    }
-
-    // Do not select if optgroup label
-    if (prev && prev.classList.contains(this.main.config.optgroupLabel)) { prev = null }
-
-    // Check if parent is optgroup
-    if (prev === null) {
-      const parent = highlighted.parentNode as HTMLDivElement
-      if (parent.classList.contains(this.main.config.optgroup)) {
-        if (parent.previousSibling) {
-          const prevNodes = (parent.previousSibling as HTMLDivElement).querySelectorAll('.' + this.main.config.option + ':not(.' + this.main.config.disabled + ')')
-          if (prevNodes.length) {
-            prev = prevNodes[prevNodes.length - 1] as HTMLDivElement
-          }
-        }
-      }
-    }
-
-    // If previous element exists highlight it
-    if (prev) {
-      if (highlighted) { highlighted.classList.remove(this.main.config.highlighted) }
-      prev.classList.add(this.main.config.highlighted)
-      ensureElementInView(this.list, prev)
-    }
-  }
-
-  public highlightDown(): void {
-    const highlighted = this.list.querySelector('.' + this.main.config.highlighted) as HTMLDivElement
-    let next = null
-
-    if (highlighted) {
-      next = highlighted.nextSibling as HTMLDivElement
-      while (next !== null) {
-        if (next.classList.contains(this.main.config.disabled)) {
-          next = next.nextSibling as HTMLDivElement
-          continue
-        } else {
-          break
-        }
-      }
-    } else {
-      next = this.list.querySelector('.' + this.main.config.option + ':not(.' + this.main.config.disabled + ')') as HTMLDivElement
-    }
-
-    // Check if parent is optgroup
-    if (next === null && highlighted !== null) {
-      const parent = highlighted.parentNode as HTMLDivElement
-      if (parent.classList.contains(this.main.config.optgroup)) {
-        if (parent.nextSibling) {
-          const sibling = parent.nextSibling as HTMLDivElement
-          next = sibling.querySelector('.' + this.main.config.option + ':not(.' + this.main.config.disabled + ')') as HTMLDivElement
-        }
-      }
-    }
-
-    // If previous element exists highlight it
-    if (next) {
-      if (highlighted) { highlighted.classList.remove(this.main.config.highlighted) }
-      next.classList.add(this.main.config.highlighted)
-      ensureElementInView(this.list, next)
-    }
-  }
-
-  // Create main container that options will reside
-  public listDiv(): HTMLDivElement {
-    const list = document.createElement('div')
-    list.classList.add(this.main.config.list)
-    return list
-  }
-
-  // Loop through data || filtered data and build options and append to list container
-  public options(content: string = ''): void {
-    const data = this.main.data.filtered || this.main.data.data
-
-    // Clear out innerHtml
-    this.list.innerHTML = ''
-
-    // If content is being passed just use that text
-    if (content !== '') {
-      const searching = document.createElement('div')
-      searching.classList.add(this.main.config.option)
-      searching.classList.add(this.main.config.disabled)
-      searching.innerHTML = content
-      this.list.appendChild(searching)
-      return
-    }
-
-    // If ajax and isSearching
-    if (this.main.config.isAjax && this.main.config.isSearching) {
-      const searching = document.createElement('div')
-      searching.classList.add(this.main.config.option)
-      searching.classList.add(this.main.config.disabled)
-      searching.innerHTML = this.main.config.searchingText
-      this.list.appendChild(searching)
-      return
-    }
-
-    // If no results show no results text
-    if (data.length === 0) {
-      const noResults = document.createElement('div')
-      noResults.classList.add(this.main.config.option)
-      noResults.classList.add(this.main.config.disabled)
-      noResults.innerHTML = this.main.config.searchText
-      this.list.appendChild(noResults)
-      return
-    }
-
-    // Append individual options to div container
-    for (const d of data) {
-      // Create optgroup
-      if (d.hasOwnProperty('label')) {
-        const item = d as Optgroup
-        const optgroupEl = document.createElement('div')
-        optgroupEl.classList.add(this.main.config.optgroup)
-
-        // Create label
-        const optgroupLabel = document.createElement('div')
-        optgroupLabel.classList.add(this.main.config.optgroupLabel)
-        if (this.main.config.selectByGroup && this.main.config.isMultiple) {
-          optgroupLabel.classList.add(this.main.config.optgroupLabelSelectable)
-        }
-        optgroupLabel.innerHTML = item.label
-        optgroupEl.appendChild(optgroupLabel)
-
-        const options = item.options
-        if (options) {
-          for (const o of options) {
-            optgroupEl.appendChild(this.option(o))
-          }
-
-          // Selecting all values by clicking the group label
-          if (this.main.config.selectByGroup && this.main.config.isMultiple) {
-            const master = this
-            optgroupLabel.addEventListener('click', (e: MouseEvent) => {
-              e.preventDefault()
-              e.stopPropagation()
-
-              for (const childEl of optgroupEl.children as any as HTMLDivElement[]) {
-                if (childEl.className.indexOf(master.main.config.option) !== -1) {
-                  childEl.click()
-                }
-              }
-            })
-          }
-        }
-        this.list.appendChild(optgroupEl)
-      } else {
-        this.list.appendChild(this.option(d as Option))
-      }
-    }
-  }
-
-  // Create single option
-  public option(data: Option): HTMLDivElement {
-    // Add hidden placeholder
-    if (data.placeholder) {
-      const placeholder = document.createElement('div')
-      placeholder.classList.add(this.main.config.option)
-      placeholder.classList.add(this.main.config.hide)
-      return placeholder
-    }
-
-    const optionEl = document.createElement('div')
-
-    // Add class to div element
-    optionEl.classList.add(this.main.config.option)
-    if (data.class) {
-      data.class.split(' ').forEach((dataClass: string) => {
-        optionEl.classList.add(dataClass)
-      })
-    }
-
-    // Add style to div element
-    if (data.style) {
-      optionEl.style.cssText = data.style
-    }
-
-    const selected = this.main.data.getSelected() as Option
-
-    optionEl.dataset.id = data.id
-    if (this.main.config.searchHighlight && this.main.slim && data.innerHTML && this.main.slim.search.input.value.trim() !== '') {
-      optionEl.innerHTML = highlight(data.innerHTML, this.main.slim.search.input.value, this.main.config.searchHighlighter)
-    } else if (data.innerHTML) {
-      optionEl.innerHTML = data.innerHTML
-    }
-    if (this.main.config.showOptionTooltips && optionEl.textContent) {
-      optionEl.setAttribute('title', optionEl.textContent)
-    }
-    const master = this
-    optionEl.addEventListener('click', function(e: MouseEvent) {
-      e.preventDefault()
-      e.stopPropagation()
-
-      const element = this
-      const elementID = element.dataset.id
-
-      if (data.selected === true && master.main.config.allowDeselectOption) {
-        let shouldUpdate = false
-
-        // If no beforeOnChange is set automatically update at end
-        if (!master.main.beforeOnChange || !master.main.config.isMultiple) {shouldUpdate = true}
-
-        if (master.main.beforeOnChange && master.main.config.isMultiple) {
-          const selectedValues = master.main.data.getSelected() as Option
-          const currentValues = JSON.parse(JSON.stringify(selectedValues))
-
-          // Remove from current selection
-
-          for (let i = 0; i < currentValues.length; i++) {
-            if (currentValues[i].id === elementID) {
-              currentValues.splice(i, 1)
-            }
-          }
-
-          const beforeOnchange = master.main.beforeOnChange(currentValues)
-          if (beforeOnchange !== false) { shouldUpdate = true }
-        }
-
-        if (shouldUpdate) {
-          if (master.main.config.isMultiple) {
-            master.main.data.removeFromSelected((elementID as any), 'id')
-            master.main.render()
-            master.main.select.setValue()
-            master.main.data.onDataChange() // Trigger on change callback
-          } else {
-            master.main.set('')
-          }
-
-        }
-      } else {
-        // Check if option is disabled or is already selected, do nothing
-        if (data.disabled || data.selected) {
-          return
-        }
-
-        // Check if hit limit
-        if (master.main.config.limit && Array.isArray(selected) && master.main.config.limit <= selected.length) {
-          return
-        }
-
-        if (master.main.beforeOnChange) {
-          let value
-          const objectInfo = JSON.parse(JSON.stringify(master.main.data.getObjectFromData(elementID as string)))
-          objectInfo.selected = true
-
-          if (master.main.config.isMultiple) {
-            value = JSON.parse(JSON.stringify(selected))
-            value.push(objectInfo)
-          } else {
-            value = JSON.parse(JSON.stringify(objectInfo))
-          }
-
-          const beforeOnchange = master.main.beforeOnChange(value)
-          if (beforeOnchange !== false) {
-            master.main.set((elementID as string), 'id', master.main.config.closeOnSelect)
-          }
-        } else {
-          master.main.set((elementID as string), 'id', master.main.config.closeOnSelect)
-        }
-      }
-    })
-
-    const isSelected = selected && isValueInArrayOfObjects(selected, 'id', (data.id as string))
-    if (data.disabled || isSelected) {
-      optionEl.onclick = null
-      if (!master.main.config.allowDeselectOption) {
-        optionEl.classList.add(this.main.config.disabled)
-      }
-      if (master.main.config.hideSelectedOption) {
-        optionEl.classList.add(this.main.config.hide)
-      }
-    }
-
-    if (isSelected) {
-      optionEl.classList.add(this.main.config.optionSelected)
-    } else {
-      optionEl.classList.remove(this.main.config.optionSelected)
-    }
-
-    return optionEl
-  }
-}