'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)