analytics/webcontent/bi/js/dashboard-analytics/features/widget/conditionalFormatting/properties/ColourRange.js

'use strict';

/**
 * Licensed Materials - Property of IBM
 * IBM Cognos Products: BI Cloud (C) Copyright IBM Corp. 2019
 * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 */
define(['jquery', 'doT', 'text!./ColourRange.html', 'dashboard-analytics/lib/@waca/core-client/js/core-client/ui/properties/BaseProperty', 'dashboard-analytics/lib/@waca/core-client/js/core-client/ui/KeyCodes'], function ($, dot, ColourRangeTemplate, BaseProperty, KeyCodes) {
	'use strict';

	var ColourRange = BaseProperty.extend({
		/**
   * Creates a property with round checkbox.
   * @param options.id {string} - property id
   * @param options.el {node} - parent element
   * @param options.ariaLabel {string} - aria label
   * @param options.properties.onSelectCallback {function} - callback function
   * @param options.properties.items {array} - array of objects
   * 		Example:[
   * 					{ start_label: '0', end_label: '50', color: 'red', selected: true },
   * 					{ start_label: '50', end_label: '100', color: 'orange', selected: false },
   * 					{ start_label: '100', end_label: 'Max', color: 'green', selected: false }
   * 				]
   */
		init: function init(options) {
			this.events = {};
			this.events['clicktap .property_' + options.id + ' .box-container .box-inner-container .box'] = '_onBoxClick';
			this.events['keydown .property_' + options.id + ' .box-container .box-inner-container .box'] = '_onKeyDown';

			ColourRange.inherited('init', this, arguments);

			this._selectedItemIndex = -1;
		},

		remove: function remove() {
			ColourRange.inherited('remove', this, arguments);
		},

		/**
   * @function ColourRange#doRender
   * @description renders the colour range. Currently supporting up to 4 bars
   */
		doRender: function doRender() {
			ColourRange.inherited('doRender', this, arguments);

			try {
				this.stepCount = this.properties.items.length;
				if (this.stepCount > 4) {
					throw new Error(this.stepCount + ' bars is not currently supported in the color range widget');
				}
				if (this.$el.find('.conditional-formatting-colour-range').length === 0) {
					this.$el.append($(this._getRenderedHtml()));
				}

				if (this._selectedItemIndex === -1) {
					this._selectedItemIndex = this._findSelectedBoxIndex();
				}

				this._updateCss();
			} catch (e) {
				this.glassContext.getCoreSvc('.Logger').error('Unable to render Colour Range component.', e);
			}
		},

		/**
   * [10%][color1][color2][10%]
  	 * [20% label][padding][label2][padding][20% label]
   * This is to create the padding for the edges so that the box labels center corrently
   */
		_getPaddingWidth: function _getPaddingWidth() {
			//calculate width per box
			var boxWidth = 80. / this.stepCount;
			//the padding is the remainder from the 20% width for the end-box divs
			var leftoverPadding = boxWidth / 2. - 10.;
			return leftoverPadding + '%';
		},

		_updateCss: function _updateCss() {
			this._updateBoxSelection();
			this._updateLabelSelection();
		},

		_getRenderedHtml: function _getRenderedHtml() {
			var outTemplate = dot.template(ColourRangeTemplate);
			if (!outTemplate) {
				outTemplate = this.templateString;
			}
			return outTemplate({
				id: this.id,
				ariaLabel: this.ariaLabel,
				items: this.properties.items,
				stepCount: this.stepCount,
				paddingWidth: this._getPaddingWidth()
			});
		},

		_onBoxClick: function _onBoxClick(event) {
			this._onEventTriggered(event);
		},

		_onKeyDown: function _onKeyDown(event) {
			if (event.keyCode === KeyCodes.SPACE || event.keyCode === KeyCodes.ENTER) {
				this._onEventTriggered(event);
			}
		},

		_onEventTriggered: function _onEventTriggered(event) {
			this._selectedItemIndex = parseInt(event.currentTarget.dataset.index, 10);
			this._updateSelection(this._selectedItemIndex);
			this._updateCss();
			this.properties.onSelectCallback(this.properties.items[this._selectedItemIndex]);
		},

		_updateSelection: function _updateSelection(selectedItemIndex) {
			for (var i = 0; i < this.properties.items.length; i++) {
				if (i === selectedItemIndex) {
					this.properties.items[i].selected = true;
				} else {
					this.properties.items[i].selected = false;
				}
			}
		},

		_findSelectedBoxIndex: function _findSelectedBoxIndex() {
			var selectedItemIndex = -1;
			this.properties.items.forEach(function (item, index) {
				if (item.selected === true) {
					selectedItemIndex = index;
				}
			});
			return selectedItemIndex;
		},

		_updateBoxSelection: function _updateBoxSelection() {
			var boxes = this.$el.find('.box');
			Array.prototype.forEach.call(boxes, function (box) {
				box.classList.remove('selected');
			});
			boxes[this._selectedItemIndex].classList.add('selected');
		},

		_updateLabelSelection: function _updateLabelSelection() {
			var boxLabels = this.$el.find('.box-label');
			Array.prototype.forEach.call(boxLabels, function (boxLabel) {
				boxLabel.classList.remove('selected');
			});
			boxLabels[this._selectedItemIndex].classList.add('selected');
			boxLabels[this._selectedItemIndex + 1].classList.add('selected');
		}
	});

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