analytics/webcontent/bi/js/gemini/app/util/View.js

'use strict';

/**
 * Licensed Materials - Property of IBM
 * IBM Cognos Products: BI Cloud (C) Copyright IBM Corp. 2014, 2017
 * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 */
define(['jquery', 'underscore', 'doT', '../../lib/@waca/core-client/js/core-client/ui/core/Events', '../../lib/@waca/core-client/js/core-client/utils/EventHelper'], function ($, _, dot, Events) {

	var View = null;
	var eventsRegex = /^(\S+)\s*(.*)$/;

	// View related attributes that are supported
	var viewAttributes = ['el', 'id', 'className', 'tagName', 'events'];

	/**
  * A Backbone style base View Class. UI Views should extend this class.
  *
  */
	View = Events.extend({
		templateString: null,
		id: null,

		init: function init(attributes) {
			View.inherited('init', this, arguments);
			this.viewId = _.uniqueId('view');
			this.dotTemplate = dot.template(this.templateString || '');

			_.extend(this, _.pick(attributes || {}, viewAttributes));
			this._initDomElement();
			this._attachEvents();
		},

		/**
   * The tag name given to the view's DOM element. By default it's a DIV.
   */
		tagName: 'div',

		/**
   * Initialize the DOM element for this view
   */
		_initDomElement: function _initDomElement() {
			if (!this.el) {
				var attrs = {};
				if (this.id) {
					attrs.id = _.result(this, 'id');
				}
				if (this.className) {
					attrs['class'] = _.result(this, 'className');
				}
				this.setElement(document.createElement(this.tagName));
				this.$el.attr(attrs);
			} else {
				this.setElement(_.result(this, 'el'));
			}
		},

		/**
   * Convenience function to use jQuery to find a DOM element within this view. This is
   * faster then doing a global lockup.
   */
		$: function $(selector) {
			return this.$el.find(selector);
		},

		/**
   * Hide the view
   */
		hide: function hide() {
			this.$el.hide();
		},

		/**
   * Show the view if hidden
   */
		show: function show() {
			this.$el.show();
		},

		/**
   * Make sure the target is the intended dom node, using CSS class to validate.
   * If not the right node, check out the parents.
   */
		getTarget: function getTarget(target, sClass) {
			var $t = $(target);
			if (!$t.hasClass(sClass)) {
				var parents = $t.parents('.' + sClass);
				if (parents.length > 0) {
					target = parents[0];
				}
			}
			return target;
		},

		/**
   * Render is the main function of the View. Views should implement (override) the render
   * method to populate this.el with the appropriate HTML. Render should always return this
   * to allow chaining of calls.
   */
		render: function render() {
			return this;
		},

		/**
   * Remove this view:
   *		-Remove the element from the DOM
   *		-Remove the event listeners
   */
		remove: function remove() {
			if (this.$el) {
				this.$el.remove();
			}
			if (this.off) {
				this.off();
			}
			return this;
		},

		/**
   * Set the view element to a new DOM element
   */
		setElement: function setElement(el) {
			this._detachEvents();
			this.$el = el instanceof $ ? el : $(el);
			this.el = this.$el[0];
			this._attachEvents();
			return this;
		},

		/**
   * Attaches the events in this.events to this.el for this view
   */
		_attachEvents: function _attachEvents() {
			var events = this.events;

			this._detachEvents();
			for (var key in events) {
				if (events.hasOwnProperty(key)) {
					var callback = events[key];
					if (!_.isFunction(callback)) {
						callback = this[events[key]];
					}
					if (!callback) {
						continue;
					}
					var match = key.match(eventsRegex);
					var eventName = match[1];
					var selector = match[2];
					// add the event to the element, with a namespace 'privateViewEvents'
					this.$el.on(eventName + '.privateViewEvents' + this.viewId, selector, callback.bind(this));
				}
			}
			return this;
		},

		/**
   * Detaches all the events from the element
   */
		_detachEvents: function _detachEvents() {
			if (this.$el) {
				this.$el.off('.privateViewEvents' + this.viewId);
			}
			return this;
		}

	});

	return View;
});
//# sourceMappingURL=View.js.map