Source: initiators/flipclock/extension/faces.js

/**
 * @namespace Initiators/FlipClock/Faces
 * @description FlipClock.js has a fully extendible API to create any clock face you need.
 * More clock faces will be added over time, so be sure to fork the code and make a pull request
 * if you want to see your clock face appear in the core library.
 */

/**
 * @memberof Initiators/FlipClock/Faces
 * @function numberize
 * @description Formats any array of numbers into a valid array of numbers
 * @return {Array} current time for Daily face
 */
function numberize(obj) {
  const data = [];
  obj.forEach((value) => {
    data.push(value.toString().length === 1 ? `0${value}` : value.toString());
  });

  if (data.length > this.minimumDigits) {
    this.minimumDigits = data.length;
  }

  if (this.minimumDigits > data.length) {
    for (let x = data.length; x < this.minimumDigits; x += 1) {
      data.unshift('0');
    }
  }
  return data;
}

/**
 * @memberof Initiators/FlipClock/Faces
 * @function getPlasmaHourlyLabels
 * @description Generate array with translate labels for Hourly face
 * @return {Array} translate labels for Hourly face
 */
function getPlasmaHourlyLabels() {
  return [
    this.lang.hours,
    this.lang.minutes,
    this.lang.seconds,
  ];
}

/**
 * @memberof Initiators/FlipClock/Faces
 * @function getPlasmaHourlyCounter
 * @description Generate array with current time for Hourly face
 * @return {Array} current time for Hourly face
 */
function getPlasmaHourlyCounter() {
  return numberize.call(this, [
    this.time.getHours(),
    this.time.getMinutes(true),
    this.time.getSeconds(true),
  ]);
}

/**
 * @memberof Initiators/FlipClock/Faces
 * @function getPlasmaDailyLabels
 * @description Generate array with translate labels for Daily face
 * @return {Array} translate labels for Daily face
 */
function getPlasmaDailyLabels() {
  return [
    this.lang.days,
    this.lang.hours,
    this.lang.minutes,
    this.lang.seconds,
  ];
}

/**
 * @memberof Initiators/FlipClock/Faces
 * @function getPlasmaHourlyCounter
 * @description Generate array with current time for Daily face
 * @return {Array} current time for Daily face
 */
function getPlasmaDailyCounter() {
  return numberize.call(this, [
    this.time.getDays(),
    this.time.getHours(true),
    this.time.getMinutes(true),
    this.time.getSeconds(true),
  ]);
}

/**
 * @memberof Initiators/FlipClock/Faces
 * @exports DailyCounterFace
 * @description Transform default counter to Plasma standard counter with day counter
 * @member {Object} DailyCounterFace
 */
const DailyCounterFace = {
  constructor(factory, options) {
    this.options = options;
    this.options.minimumDigits = 4;
    this.base(factory, this.options);
  },

  build(excludeHours, time) {
    const labels = getPlasmaDailyLabels.call(this.factory);
    const newTime = time || getPlasmaDailyCounter.call(this.factory);

    newTime.forEach((digit) => {
      this.createList(digit);
    });

    this.lists.forEach((el, i) => {
      const { $el } = el;

      const elSpan = document.createElement('span');
      elSpan.classList.add('flip-clock-label');
      elSpan.innerText = labels[i];

      const cover = document.createElement('div');
      cover.classList.add('flip-wrapper');
      $el.parentNode.insertBefore(cover, $el);
      cover.appendChild($el);
      cover.appendChild(elSpan);
    });

    this.base();
  },

  flip(time, doNotAddPlayClass) {
    const newTime = time || getPlasmaDailyCounter.call(this.factory);
    this.autoIncrement();
    this.base(newTime, doNotAddPlayClass);
  },
};

/**
 * @memberof Initiators/FlipClock/Faces
 * @exports HourlyCounterFace
 * @description Transform default counter to Plasma standard counter without day counter
 * @member {Object} HourlyCounterFace
 */
const HourlyCounterFace = {
  constructor(factory, options) {
    this.options = options;
    this.options.minimumDigits = 3;
    this.base(factory, this.options);
  },

  build(excludeHours, time) {
    const labels = getPlasmaHourlyLabels.call(this.factory);
    const newTime = time || getPlasmaHourlyCounter.apply(this.factory);

    newTime.forEach((digit) => {
      this.createList(digit);
    });

    this.lists.forEach((el, i) => {
      const { $el } = el;

      const elSpan = document.createElement('span');
      elSpan.classList.add('flip-clock-label');
      elSpan.innerText = labels[i];

      const cover = document.createElement('div');
      cover.classList.add('flip-wrapper');
      $el.parentNode.insertBefore(cover, $el);
      cover.appendChild($el);
      cover.appendChild(elSpan);
    });

    this.base();
  },

  flip(time, doNotAddPlayClass) {
    const newTime = time || getPlasmaHourlyCounter.apply(this.factory);
    this.autoIncrement();
    this.base(newTime, doNotAddPlayClass);
  },
};

export { DailyCounterFace };
export { HourlyCounterFace };