'use strict';
/**
* Dynamic placeholder component.
* @namespace dynamicPlaceholder
* @memberof UCASDesignFramework
* @param {object} global - UCASDesignFramework object.
* @param {object} _u - UCASUtilities object.
*/
(function (global, _u) {
var dynamicPlaceholders = {}
/**
* Initialises any form items it finds that have a data-dynamic-placeholder attribute
* which contains a JSON array of placeholders which it will cycle through.
* @function init
* @memberof! UCASDesignFramework.dynamicPlaceholder
* @param {Node} [context=document] - context to limit the selector
* @param {String} [selector=.v5-form-item [data-dynamic-placeholder]] - a valid CSS selector for the placeholder data attribute
* @returns {Boolean} - true for success
* @example
* UCASDesignFramework.dynamicPlaceholder.init()
*/
function init (context, selector) {
context = context || document
selector = selector || '.v5-form-item [data-dynamic-placeholder]'
var formItems = document.querySelectorAll(selector)
if (!formItems) {
_u.log.info('Failed to find dynamic placeholders')
return false
} else {
formItems.forEach(function (formItem) {
if (!formItem.id) {
_u.log.info('Form item must have an ID')
return
}
if (dynamicPlaceholders[formItem.id]) {
_u.log.info('Already initialised dynamic placeholder with ID ' + formItem.id)
return
}
createDynamicPlaceholder(formItem)
})
}
return true
}
/**
* DynamicPlaceholder.
* @class
* @memberof! UCASDesignFramework.dynamicPlaceholder
*/
var DynamicPlaceholder = {
init: function (formItem) {
this.$formItem = formItem
this.dynamicPlaceholders = _u.json.getJson(this.$formItem.getAttribute('data-dynamic-placeholder'))
if (this.dynamicPlaceholders) {
this.placeholderTimeoutID = window.setTimeout(changePlaceholder, 5000, this)
}
},
destroy: function () {
window.clearTimeout(this.placeholderTimeoutID)
delete dynamicPlaceholders[this.$formItem.id]
}
}
/**
* @function changePlaceholder
* @memberof! UCASDesignFramework.dynamicPlaceholder
* @param {DynamicPlaceholder} dynamicPlaceholder - the DynamicPlacholder for the form element
* @private
*/
function changePlaceholder (dynamicPlaceholder) {
// Set the changing state.
dynamicPlaceholder.$formItem.setAttribute('data-dynamic-placeholder-changing', '')
// Wait for the transition (set in CSS) to change the text over.
window.setTimeout(function (dynamicPlaceholder) {
dynamicPlaceholder.dynamicPlaceholders.push(dynamicPlaceholder.$formItem.placeholder)
dynamicPlaceholder.$formItem.placeholder = dynamicPlaceholder.dynamicPlaceholders.shift()
dynamicPlaceholder.$formItem.removeAttribute('data-dynamic-placeholder-changing')
// Set it all off again.
dynamicPlaceholder.placeholderTimeoutID = window.setTimeout(changePlaceholder, 5000, dynamicPlaceholder)
}, 800, dynamicPlaceholder)
}
/**
* Creates and registers a dynamicPlaceholder.
* @function create
* @memberof! UCASDesignFramework.dynamicPlaceholder
* @param {Node} formItem - the form element
* @return {DynamicPlaceholder} - the DynamicPlaceholder object
* @example
* UCASDesignFramework.dynamicPlaceholder.create($myFormItem)
*/
function createDynamicPlaceholder (formItem) {
if (formItem.id) {
dynamicPlaceholders[formItem.id] = Object.create(DynamicPlaceholder)
dynamicPlaceholders[formItem.id].init(formItem)
return dynamicPlaceholders[formItem.id]
} else {
_u.log.info('Form item must have an ID')
}
}
/**
* @function destroy
* @memberof! UCASDesignFramework.dynamicPlaceholder
* @param {Node} formItem - the form element
* @example
* UCASDesignFramework.dynamicPlaceholder.destroy($myFormItem)
*/
function destroyDynamicPlaceholder (formItem) {
if (dynamicPlaceholders[formItem.id]) {
dynamicPlaceholders[formItem.id].destroy()
} else {
_u.log.info('Form item must have an ID')
}
}
// Expose public methods and properties.
global.dynamicPlaceholder = {
addSubscriptions: true,
init: init,
initOnLoad: true,
create: createDynamicPlaceholder,
destroy: destroyDynamicPlaceholder
}
})(UCASDesignFramework, UCASUtilities)