Source: components/content/_content-halves.js

'use strict';

/**
 * Content halves component.
 * @namespace contentHalves
 * @memberof UCASDesignFramework
 * @param {object} global - UCASDesignFramework object.
 * @param {object} _u - UCASUtilities object.
 */
(function (global, _u) {
  var clientWidth
  var contentHalves
  var resizeTimeout
  var screenSize

  /**
   * @function init
   * @memberof! UCASDesignFramework.contentHalves
   * @returns {Boolean} - true for success
   * @example
   * UCASDesignFramework.contentHalves.init()
   */
  function init () {
    // The design for content halves puts the left edge at the far left of the screen.
    // We do this with JavaScript.
    // IE can't handle this, so we ignore it right from the start.
    if (document.documentMode) { return false }

    contentHalves = document.querySelectorAll('.content-halves')
    clientWidth = document.body.clientWidth
    screenSize = calculateScreenSize()

    if (!contentHalves) {
      _u.log.info('Failed to find any content halves')
      return false
    } else {
      contentHalves.forEach(renderContentHalves)
    }

    window.addEventListener('scroll', firstScroll, false)
    window.addEventListener('resize', resizeThrottler, false)
    return true
  }

  /**
   * @function firstScroll
   * @memberof! UCASDesignFramework.contentHalves
   * @private
   * Fixes an issue with iOS not rendering contentHalves the first time around.
   */
  function firstScroll () {
    contentHalves.forEach(renderContentHalves)
    window.removeEventListener('scroll', firstScroll)
  }

  /**
   * Slow down the resize handler so we don't repaint too much.
   * @TODO This can be generalised and put into _size.js
   */
  function resizeThrottler () {
    if (!resizeTimeout) {
      resizeTimeout = setTimeout(function () {
        resizeTimeout = null

        // Check width as triggering the keyboard on Android changes page size.
        // We're only interested if the width changes.
        if (clientWidth !== document.body.clientWidth) {
          clientWidth = document.body.clientWidth
          screenSize = calculateScreenSize()
          contentHalves.forEach(renderContentHalves)
        }
      }, 200)
    }
  }

  /**
   * Decide how to display the contentHalves.
   * @return {string} - mobile|desktop
   */
  function calculateScreenSize () {
    return global.size.cssBreakpoint === 'xsmall' || global.size.cssBreakpoint === 'small' ? 'mobile' : 'desktop'
  }

  /**
   * @function renderContentHalves
   * @memberof! UCASDesignFramework.contentHalves
   * @param {Node} item - a contentHalves node
   * @private
   */
  function renderContentHalves (item) {
    var primary = item.querySelector('.content-halves__primary')
    var secondary = item.querySelector('.content-halves__secondary')

    if (screenSize === 'desktop') {
      var itemStyle = window.getComputedStyle(item)
      var right = item.offsetWidth + parseInt(itemStyle.marginLeft) + parseInt(itemStyle.marginRight) - primary.offsetLeft
      secondary.style.position = 'absolute'
      secondary.style.right = right + 'px'
    } else {
      secondary.style.position = ''
      secondary.style.right = ''
    }
  }

  /**
   * Assumes the elements have been removed from the DOM.
   * @function destroy
   * @memberof! UCASDesignFramework.contentHalves
   * @example
   * UCASDesignFramework.contentHalves.destroy()
   */
  function destroy () {
    contentHalves = resizeTimeout = null
    window.removeEventListener('resize', resizeThrottler)
  }

  // Expose public methods and properties.
  global.contentHalves = {
    addSubscriptions: true,
    init: init,
    initOnLoad: true,
    destroy: destroy
  }
})(UCASDesignFramework, UCASUtilities)