Source: components/forms/_dynamic-placeholder.js

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