/* ========================================================================
 * EdGel uoe.js
 * ========================================================================
 * Copyright 2014-2022 The University of Edinburgh
 * ======================================================================== */

// Create the EdGel object for extensions.
var EdGel = EdGel || { socialMedia: { buttons: {} } };

// Polyfill for IE9+: without which no IE support

if (!Element.prototype.matches) {
  Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector
}

if (!Element.prototype.closest) {
  Element.prototype.closest = function (s) {
    'use strict'

    var el = this

    do {
      if (el.matches(s)) {
        return el
      }
      el = el.parentElement || el.parentNode
    } while (el !== null && el.nodeType === 1)
    return null
  };
}

document.addEventListener('DOMContentLoaded', function () {
  'use strict';

  var uoeNavTrigger = document.getElementsByClassName('uoe-nav-trigger')
  var pageHeadSearch = document.getElementsByClassName('page-head-search')
  var carousel = document.getElementsByClassName('carousel')
  var html = document.getElementsByTagName('HTML')
  var i
  var elChild
  var id

  // Ensure we have marked JS as active.
  // This is used by uoe-nav to ensure we don't hide the menu structure if we don't have JS to re-display it.
  for (i = 0; i < html.length; i++) {
    html[i].classList.add('js')
  }

  for (i = 0; i < uoeNavTrigger.length; i++) {
    id = 'uoe-nav-' + i
    var menus = uoeNavTrigger[i].parentElement.getElementsByClassName('uoe-nav')
    if (menus && menus[0].id) {
      id = menus[0].id
    }
    else if (menus) {
      menus[0].id = id
    }
    if (menus) {
      menus[0].classList.add('collapse')
    }

    uoeNavTrigger[i].insertBefore(document.createTextNode(' '), uoeNavTrigger[i].firstChild)
    elChild = document.createElement('a')
    elChild.setAttribute('class', 'uoe-nav-trigger-button')
    elChild.setAttribute('role', 'button')
    elChild.setAttribute('aria-controls', id)
    elChild.setAttribute('aria-expanded', 'false')
    elChild.setAttribute('data-toggle', 'collapse')
    elChild.setAttribute('href', '#' + id)
    elChild.innerHTML = '<span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>' +
        '<span class="sr-only">Toggle navigation</span>'
    uoeNavTrigger[i].insertBefore(elChild, uoeNavTrigger[i].firstChild)
  }

  // Hide search form for small devices
  for (i = 0; i < pageHeadSearch.length; i++) {
    var elContainer = document.createElement('a')
    var row = pageHeadSearch[i].closest('.row')
    var insertPoint = row.firstChild

    // insert point should be the node after the first non-text node
    while (insertPoint !== null && insertPoint.nodeType === 3) {
      insertPoint = insertPoint.nextSibling
    }
    if (insertPoint !== null) {
      // Add padding to move the logo away from the search trigger.
      insertPoint.classList.add('page-head-logo-collapsible-search')
      insertPoint = insertPoint.nextSibling
    }

    id = 'uoe-head-search-' + i
    if (pageHeadSearch[i].id) {
      id = pageHeadSearch[i].id
    }
    else {
      pageHeadSearch[i].id = id
    }
    pageHeadSearch[i].classList.add('collapse')

    elContainer.setAttribute('class', 'page-head-search-trigger')
    elContainer.setAttribute('role', 'button')
    elContainer.setAttribute('aria-controls', id)
    elContainer.setAttribute('aria-expanded', 'false')
    elContainer.setAttribute('data-toggle', 'collapse')
    elContainer.setAttribute('href', '#' + id)
    row.insertBefore(elContainer, insertPoint)
    row.insertBefore(document.createTextNode(' '), insertPoint)

    elChild = document.createElement('span')
    elChild.setAttribute('class', 'glyphicon glyphicon-search')
    elChild.setAttribute('aria-hidden', 'true')
    elContainer.insertBefore(elChild, null)

    elChild = document.createElement('span')
    elChild.setAttribute('class', 'sr-only')
    elChild.innerHTML = 'Show/hide site search'
    elContainer.insertBefore(elChild, null)
  }

  // Undo the carousel animation blocking by bootstrap accessibility plugin.
  for (i = 0; i < carousel.length; i++) {
    carousel[i].setAttribute('data-interval', 5000)
    carousel[i].setAttribute('data-wrap', true)
    carousel[i].setAttribute('data-pause', 'hover')
  }
});
