webpack-bootstrap-ui-kit/src/js_old/_components/_ui.hover.js

/*
 * Conflicts with 'bootstrap/js/dist/dropdown'
 */
'use strict'

import $ from 'jquery'
import Events from '../_events'
import 'jquery-hoverintent/jquery.hoverIntent.js'
import MainUI from '../_main'

const HoverUI = (($) => {
  // Constants
  const W = window
  const D = document
  const $Html = $('html')
  const $Body = $('body')

  const NAME = 'jsHoverUI'
  const DATA_KEY = NAME

  class HoverUI {
    // Constructor
    constructor (el) {
      console.log(`${NAME}: init`)

      const ui = this
      const $el = $(el)

      if (
        $el.is(
          '[target="_blank"],.external,[data-toggle="lightbox"],[data-lightbox-gallery]'
        )
      ) {
        return true
      }

      ui.$el = $el

      // find parent
      let $parent = $el.parents('.nav-item, .dropdown')
      $parent = $parent && $parent.length ? $parent.first() : null
      // $parent = $parent ? $parent : $el.parent();
      ui.$parent = $parent

      // find target
      let $target = $el.data('target')
      $target = $target && $target.length ? $target : null
      $target = $target || ($parent
        ? $parent.find('.dropdown-menu').first()
        : null)

      if (!$target || !$target.length) {
        console.warn(`${NAME}: Missing target for:`)
        console.warn($el)
        return
      }

      ui.$target = $target

      const $triger = $parent || $el
      ui.$triger = $triger

      // integrate with dropdown-toggle
      $('[data-toggle="dropdown"]').on('click touch', (e) => {
        console.log(`${NAME}: dropdown click-touch`)
        ui.hide()
      })

      if (!W.isTouch) {
        $triger.hoverIntent({
          sensitivity: 10,
          interval: 50,
          over: () => {
            ui.show()
          },
          out: () => {
            ui.hide()
          },
        })
      }

      $el.off('click touch')
      $el.on('click touch', (e) => {
        const size = MainUI.detectBootstrapScreenSize()
        console.log(`${NAME}: click-touch size: ${size}`)

        if (
          size === 'xs' ||
          !$el.data('allow-click') ||
          (W.IsTouchScreen && !$el.data('allow-touch-click'))
        ) {
          console.log(`${NAME}: click-touch prevent click`)
          e.stopPropagation()
          e.preventDefault()
        }

        if (ui.isShown()) {
          ui.hide()
        } else {
          ui.show()
        }
      })

      $el.data(NAME, ui)
      $triger.addClass(`${NAME}-active`)
    }

    isShown () {
      return this.$target.hasClass('show')
    }

    show () {
      const ui = this
      ui.$el
        .parents('.dropdown')
        .not('.active')
        .each((i, el) => {
          const $el = $(el)
          $el.find('.dropdown').removeClass('show')
          $el.addClass('show')
        })

      ui.$target.addClass('show')
    }

    hide () {
      const ui = this
      const $el = ui.$target
      $el.removeClass('show')
      $el.find('.dropdown-menu').removeClass('show')
      $el.parent('.dropdown').removeClass('show')
    }

    dispose () {
      const ui = this
      const $el = ui.$el

      console.log(`${NAME}: dispose`)

      ui.$triger.removeClass(`${NAME}-active`)
      $.removeData($el, DATA_KEY)

      ui.$el = null
      ui.$parent = null
      ui.$target = null
      ui.$triger = null
    }

    static _jQueryInterface () {
      return this.each(function () {
        // attach functionality to el
        const $el = $(this)
        let data = $el.data(DATA_KEY)

        if (!data) {
          data = new HoverUI(this)
          $el.data(DATA_KEY, data)
        }
      })
    }
  }

  // jQuery interface
  $.fn[NAME] = HoverUI._jQueryInterface
  $.fn[NAME].Constructor = HoverUI
  $.fn[NAME].noConflict = function () {
    $.fn[NAME] = JQUERY_NO_CONFLICT
    return HoverUI._jQueryInterface
  }

  // auto-apply
  $('[data-toggle="hover"]').ready(() => {
    $('[data-toggle="hover"]').jsHoverUI()
  })

  // rewrite 'bootstrap/js/dist/dropdown'
  $('[data-toggle="dropdown"]').on('click touch', (e) => {
    e.preventDefault()

    const $el = $(e.currentTarget)
    const $parent = $el.parent('.dropdown')

    // hide siblings
    $parent.parent().find('.dropdown, .dropdown-menu').removeClass('show')

    if ($parent.hasClass('show')) {
      $parent.removeClass('show')
      $parent.find('.dropdown-menu').removeClass('show')
    } else {
      $parent.addClass('show')
      $parent.find('.dropdown-menu').addClass('show')
    }
  })

  return HoverUI
})($)

export default HoverUI