ids-enterprise/dist/js/all/template.js

Infor Design System (IDS) Enterprise Components for the web

import * as debug from '../utils/debug'; // NOTE: update this path when moving to a component folder
import { utils } from '../utils/utils'; // NOTE: update this path when moving to a component folder

// Settings and Options
const COMPONENT_NAME = 'componentName';

const COMPONENT_NAME_DEFAULTS = {
  propertyName: 'defaultValue'
};

/**
 * Component Name - Does this and that.
 * @class ComponentName
 * @param {string} element The plugin element for the constuctor
 * @param {string} [settings] The settings element.
 */
function ComponentName(element, settings) {
  this.settings = utils.mergeSettings(element, settings, COMPONENT_NAME_DEFAULTS);
  this.element = $(element);
  debug.logTimeStart(COMPONENT_NAME);
  this.init();
  debug.logTimeStart(COMPONENT_NAME);
}

// Plugin Methods
ComponentName.prototype = {

  /**
   * Do initialization, build up and / or add events ect.
   * @returns {object} The Component prototype, useful for chaining.
   */
  init() {
    // Do initialization. Build or Events ect
    return this
      .build()
      .handleEvents();
  },

  /**
   * Add any needed markup to the component.
   * @returns {object} The Component prototype, useful for chaining.
   * @private
   */
  build() {
    return this;
  },

  /**
   * Sets up event handlers for this component and its sub-elements.
   * @returns {object} The Component prototype, useful for chaining.
   * @private
   */
  handleEvents() {
    const self = this;

    this.element.on(`updated.${COMPONENT_NAME}`, () => {
      self.updated();
    });

    return this;
  },

  /**
   * Example Method.
   * @returns {void}
   */
  someMethod() {
    // do something with this.settings not settings.
  },

  /**
   * Handle updated settings and values.
   * @returns {object} [description]
   */
  updated() {
    return this
      .teardown()
      .init();
  },

  /**
   * Simple Teardown - remove events & rebuildable markup.
   * @returns {object} The Component prototype, useful for chaining.
   * @private
   */
  teardown() {
    this.element.off(`updated.${COMPONENT_NAME}`);
    return this;
  },

  /**
   * Teardown - Remove added markup and events.
   * @private
   */
  destroy() {
    this.teardown();
    $.removeData(this.element[0], COMPONENT_NAME);
  }
};

export { ComponentName, COMPONENT_NAME };