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

'use strict'

import $ from 'jquery'
import Events from '../_events'
import Spinner from './_ui.spinner'

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

  const NAME = 'jsAjaxUI'
  const DATA_KEY = NAME

  class AjaxUI {
    // Constructor
    constructor (element) {
      this._element = element
      const $element = $(this._element)
      $element.addClass(`${NAME}-active`)

      $element.bind('click', function (e) {
        e.preventDefault()

        const $this = $(this)

        $('.ajax').each(function () {
          const $this = $(this)
          $this.removeClass('active')
          $this.parents('.nav-item').removeClass('active')
        })

        $this.addClass('loading')

        AjaxUI.load($this.attr('href'), () => {
          $this.removeClass('loading')
          $this.parents('.nav-item').addClass('active')
          $this.addClass('active')
        })
      })
    }

    // Public methods
    static load (url, callback) {
      // show spinner
      Spinner.show(() => {
        $Body.removeClass('loaded')
      })

      // update document location
      G.MainUI.updateLocation(url)

      const absoluteLocation =
        G.URLDetails.base + G.URLDetails.relative.substring(1)
      if (absoluteLocation !== G.location.href) {
        G.history.pushState(
          {
            ajax: true,
            page: absoluteLocation,
          },
          document.title,
          absoluteLocation
        )
      }

      $.ajax({
        sync: false,
        async: true,
        url,
        dataType: 'json',
        method: 'GET',
        cache: false,
        error (jqXHR) {
          console.warn(`${NAME}: AJAX request failure: ${jqXHR.statusText}`)
          G.location.href = url

          // google analytics
          if (typeof G.ga === 'function') {
            G.ga('send', 'event', 'error', 'AJAX ERROR', jqXHR.statusText)
          }
        },
        success (data, status, jqXHR) {
          AjaxUI.process(data, jqXHR, callback)

          // google analytics
          if (typeof G.ga === 'function') {
            G.ga('set', {
              page: G.URLDetails.relative + G.URLDetails.hash,
              title: jqXHR.getResponseHeader('X-Title'),
            })
            G.ga('send', 'pageview')
          }
        },
      })
    }

    static process (data, jqXHR, callback) {
      const css = jqXHR.getResponseHeader('X-Include-CSS').split(',') || []
      const js = jqXHR.getResponseHeader('X-Include-JS').split(',') || []

      // Replace HTML regions
      if (typeof data.regions === 'object') {
        for (const key in data.regions) {
          if (typeof data.regions[key] === 'string') {
            AjaxUI.replaceRegion(data.regions[key], key)
          }
        }
      }

      // remove already loaded scripts
      $('link[type="text/css"]').each(function () {
        const i = css.indexOf($(this).attr('href'))
        if (i > -1) {
          css.splice(i, 1)
        } else if (!$Body.data('unload-blocked')) {
          console.log(`${NAME}: Unloading | ${$(this).attr('href')}`)
          $(this).remove()
        }
      })

      $('script[type="text/javascript"]').each(function () {
        const i = js.indexOf($(this).attr('src'))
        if (i > -1) {
          js.splice(i, 1)
        } else if (!$Body.data('unload-blocked')) {
          console.log(`${NAME}: Unloading | ${$(this).attr('src')}`)
          $(this).remove()
        }
      })

      // preload CSS
      this.preload(css).then(() => {
        const $head = $('head')
        css.forEach((el) => {
          $head.append(
            `<link rel="stylesheet" type="text/css" href="${el}" />`
          )
        })

        // preload JS
        this.preload(js, 'script').then(() => {
          js.forEach((el) => {
            $Body.append(
              `<script type="text/javascript" charset="UTF-8" src="${el}"></script>`
            )
          })

          console.log(`${NAME}: New page is loaded!`)

          // trigger events
          if (typeof data.events === 'object') {
            for (const eventName in data.events) {
              $(D).trigger(eventName, [data.events[eventName]])
            }
          }

          if (typeof callback !== 'undefined') {
            callback()
          }

          $(G).trigger(Events.AJAX)
        })
      })
    }

    static preload (items, type = 'text', cache = true, itemCallback = false) {
      if (!items.length) {
        return $.Deferred().resolve().promise()
      }

      const dfds = []
      items.forEach((url, i) => {
        const dfd = $.Deferred()

        $.ajax({
          dataType: type,
          cache,
          url,
        }).always(() => {
          dfd.resolve()
          if (itemCallback) {
            itemCallback(i, url)
          }
        })

        dfds.push(dfd)
      })

      // return a master promise object which will resolve when all the deferred objects have resolved
      return $.when(...dfds)
    }

    static replaceRegion (html, key) {
      const $region = $(`[data-ajax-region="${key}"]`)

      if ($region.length) {
        $region.empty().append(html)
      } else {
        console.warn(`${NAME}: Region returned without class or id!`)
      }
    }

    dispose () {
      const $element = $(this._element)

      $element.removeClass(`${NAME}-active`)
      $.removeData(this._element, DATA_KEY)
      this._element = null
    }

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

        if (!data) {
          data = new AjaxUI(this)
          $element.data(DATA_KEY, data)
        }
      })
    }
  }

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

  // auto-apply
  $('.ajax').ready(() => {
    $('.ajax').jsAjaxUI()
  })

  // AJAX update browser title
  $(D).on('layoutRefresh', (e, data) => {
    D.title = data.Title

    $Html.attr('class', '')
    if (data.ClassName) {
      $Html.addClass(data.ClassName)
    }
    // data.Link = (data.Link === '/home/') ? '/' : data.Link;
  })

  // Back/Forward functionality
  G.onpopstate = function (event) {
    const $existingLink = $(`a[href^="${D.location}"]`)

    if (event.state !== null && event.state.ajax) {
      console.log(`${NAME}: GOBACK (AJAX state)`)
      AjaxUI.load(event.state.page)
    } else if ($existingLink.length && $existingLink.hasClass('ajax')) {
      console.log(`${NAME}: GOBACK (AJAX link)`)
      $existingLink.trigger('click')
    } else if (D.location.href !== G.location.href) {
      console.log(`${NAME}: GOBACK (HTTP)`)
      G.location.href = D.location
    }
  }

  // manage AJAX requests
  $.ajaxPrefilter((options, originalOptions, jqXHR) => {
    jqXHR.opts = options
    $.xhrPool.requests[jqXHR.opts.url] = jqXHR
  })

  $.xhrPool = {
    requests: {},
    paused: false,
    pauseAll: () => {
      $.xhrPool.paused = true

      /* for (let url in $.xhrPool.requests) {
        const jqXHR = $.xhrPool.requests[url];
        jqXHR.abort();
        console.log(`${NAME}: AJAX request is paused (${jqXHR.opts.url})`);
      } */
    },
    restoreAll: () => {
      for (const url in $.xhrPool.requests) {
        const jqXHR = $.xhrPool.requests[url]
        $.ajax(jqXHR.opts)
        console.log(`${NAME}: AJAX request is restored (${jqXHR.opts.url})`)
      }

      $.xhrPool.paused = false
    },
  }

  $.ajaxSetup({
    beforeSend: (jqXHR) => {}, //  and connection to list
    complete: (jqXHR) => {
      if (!$.xhrPool.paused) {
        // console.log(`${NAME}: AJAX request is done (${jqXHR.opts.url})`);
        delete $.xhrPool.requests[jqXHR.opts.url]
      }
    },
  })

  // attach events
  $Body.on(`${Events.OFFLINE}`, () => {
    $.xhrPool.pauseAll()
  })

  $Body.on(`${Events.BACKONLINE}`, () => {
    $.xhrPool.restoreAll()
  })

  return AjaxUI
})($)

export default AjaxUI