analytics/webcontent/bi/js/dashboard-analytics/visualizations/renderer/conditions/ConditionalPalettePicker.js

'use strict';

/**
 * Licensed Materials - Property of IBM
 *
 * IBM Cognos Products: Dashboard
 *
 * (C) Copyright IBM Corp. 2016, 2020
 *
 * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 */
define(['jquery', 'underscore', '../../../lib/@waca/core-client/js/core-client/ui/core/View', '../../../util/DashboardFormatter', '../../../lib/@waca/core-client/js/core-client/ui/MultiHandleSlider', '../../../lib/@waca/dashboard-common/dist/utils/Flyout', '../../../data/models/ConditionalPalette', './ConditionalFlyoutView', 'jquery-ui', 'touch-punch'], function ($, _, View, Formatter, MultiHandleSlider, Flyout, ConditionalPalette, ConditionalFlyoutView) {
	'use strict';

	/**
  * Represents an Conditional colour palette
  */

	var ConditionalPalettePicker = View.extend({
		/**
   * @param options Object An object of options for this class
   * @param options.min
   * @param options.max
   * @param options.palette
   * @param options.widget
   */
		init: function init(options) {
			ConditionalPalettePicker.inherited('init', this, arguments);
			_.extend(this, options);
		},

		render: function render(coordinates) {
			var _this = this;

			var eventsExist = this.slider;
			return this._createSlider().then(function () {
				_this.slider.render();
				!eventsExist && _this._setEvents();

				if (coordinates) {
					_this._resize(coordinates);
				}
			});
		},

		_createSlider: function _createSlider() {
			var _this2 = this;

			// Use existing slider only if it's JQuery Slider exists
			if (this.slider && this.slider.$slider && this.slider.$slider.slider('instance')) {
				return Promise.resolve();
			}

			var promise = this.palette.getSize() === 0 && this.widget ? this.visModel.createDefaultConditionalPalette(this.min, this.max) : Promise.resolve();

			return promise.then(function () {
				_this2._values = [];
				var paletteSize = _this2.palette.getSize();
				for (var i = 0; i < paletteSize; i++) {
					var mark = _this2.palette.getColor(i);
					_this2._values.push(mark.getValue());
				}
				// Used to know how to handle the flyout when user is click on handles
				_this2.processNext = true;
				_this2.hasSlid = false;
				_this2.canAddHandle = false;
				_this2.slider = new MultiHandleSlider({
					$el: _this2.$el,
					min: _this2.min,
					max: _this2.max,
					maxHandles: _this2.visModel.getConditionalPaletteLength() + 1,
					values: _this2._values,
					format: function (value) {
						return Formatter.format(value, this.format);
					}.bind(_this2),
					styles: _this2.palette.getColors().models,
					addHandleTrack: true,
					sliderClasses: 'ConditionalPalettePicker',
					refreshSlider: function refreshSlider(values, styles) {
						// Update the JQuery Slider with new values
						if (this.$slider && this.$slider.slider('instance')) {
							this.$slider.slider('values', values);
							this._createSliderElements({ target: this.$slider[0] });
							if (styles && styles.length > 0) {
								this.styles = styles;
								this._createRangeDivs(this.$slider);
							}
						}
					},
					sliderCallback: {
						'slidechange': function (values) {
							var options = ConditionalPalette.createUndoRedoTransactionOptionsId('updateStyleValues');
							this.palette.updateStyleValues(values, options);
							// we only refresh the slider if the min or max value has changed.
							if (this.slider.maxValue.original !== this.slider.maxValue.value || this.slider.minValue.original !== this.slider.minValue.value) {
								this.palette.trigger('palette:refreshSlider', values);
							}
							// there is no need to callback to refresh.
							// once the model changes, the entire VisView will be re-rendered.
						}.bind(_this2)
					},
					sliderEvents: [{
						event: 'slide',
						callback: function () {
							this.hasSlid = true;
						}.bind(_this2)
					}, {
						event: 'mousedown touchstart',
						element: 'div.ui-slider-handle',
						callback: _this2._slideHandleMousedownEvent.bind(_this2)
					}, {
						event: 'mouseup touchend',
						element: 'div.ui-slider-handle',
						callback: _this2._slideHandleMouseupEvent.bind(_this2)
					}, {
						event: 'mousedown touchstart',
						element: 'div.sliderBarAddTrack, div.slider-handle-value',
						callback: function (event) {
							if (this.flyout) {
								this.flyout.close();
							}
							this.canAddHandle = true;
							event.stopPropagation();
						}.bind(_this2)
					}, {
						event: 'mouseup touchend',
						element: 'div.sliderBarAddTrack',
						callback: _this2._sliderAddHandle.bind(_this2)
					}, {
						event: 'mousemove mouseout touchmove',
						element: 'div.sliderBarAddTrack',
						callback: _this2._sliderGhostHandle.bind(_this2)
					}]
				});
			});
		},

		_resize: function _resize(coordinates) {
			var $picker = this.$el.find('.ConditionalPalettePicker');

			$picker.css('left', coordinates.x1 + 'px');
			$picker.css('width', coordinates.x2 - coordinates.x1 + 'px');
		},

		remove: function remove() {
			this._deleteFlyout();

			this.slider && this.slider.remove();

			this.palette && this.palette.off('palette:refreshSlider');

			ConditionalPalettePicker.inherited('remove', this, arguments);
		},

		_setEvents: function _setEvents() {
			this.palette.on('palette:refreshSlider', function () {
				var models = this.palette.getColors().models;
				var values = _.map(models, function (model) {
					return model.value;
				}) || [];
				this.slider.reRender({ styles: models, values: values });
			}.bind(this));
		},

		_createFlyout: function _createFlyout(event) {
			var handlePosition = this.slider.$handles.index(event.currentTarget);

			var options = {
				container: document.body,
				selector: event.currentTarget,
				popoverClass: 'actionToolbarPopover',
				viewport: 'body',
				viewClass: ConditionalFlyoutView,
				viewOptions: {
					visModel: this.visModel,
					widget: this.widget,
					palette: this.palette,
					slider: this.slider,
					icons: this.icons,
					handlePosition: handlePosition
				}
			};

			this.flyout = new Flyout(options);
			this.flyout.open(event.currentTarget);
		},

		_deleteFlyout: function _deleteFlyout() {
			if (this.flyout) {
				this.flyout.close();
				this.flyout.remove();
				delete this.flyout;
			}
		},

		_slideHandleMousedownEvent: function _slideHandleMousedownEvent(event) {
			this.hasSlid = false;
			if (this.slider.getHandleCount() > this.slider.minHandles && this.flyout) {
				if (this.flyout.selector === event.currentTarget && this.processNext) {
					this.processNext = false;
				} else {
					this.processNext = true;
				}

				if (this.flyout.view.isVisible) {
					this.flyout.close();
				} else {
					this.processNext = true;
				}
			}
		},

		_slideHandleMouseupEvent: function _slideHandleMouseupEvent(event) {
			if (this.slider.getHandleCount() > this.slider.minHandles && !this.hasSlid) {
				if (this.flyout) {
					if (this.flyout.selector === event.currentTarget && !this.flyout.view.isVisible && this.processNext) {
						this.flyout.open(event.currentTarget);
					} else if (this.flyout.selector !== event.currentTarget) {
						this.flyout.destroy().then(this._deleteFlyout.bind(this)).then(this._createFlyout.bind(this, event));
					}
				} else if (!this.flyout) {
					this._createFlyout(event);
				}
			}
		},

		_calculateSliderValue: function _calculateSliderValue(event) {
			var clientX = event.clientX;
			if (event.type === 'touchend' || event.type === 'touchmove') {
				clientX = event.originalEvent.changedTouches[0].clientX;
			}
			var $track = $(event.target);
			var width = $track.width();
			var offset = $track.offset();
			var options = this.slider.$slider.slider('option');
			var value = (clientX - offset.left) / width * (options.max - options.min) + options.min;
			if (options.step === 1) {
				value = Math.round(value);
			}
			return value;
		},

		_sliderAddHandle: function _sliderAddHandle(event) {
			if (this.canAddHandle === true && this.slider.getHandleCount() < this.slider.maxHandles) {
				var value = this._calculateSliderValue(event);
				var style = {
					value: value,
					color: '',
					bgcolor: '',
					pattern: ''
				};
				var options = ConditionalPalette.createUndoRedoTransactionOptionsId('addColor');
				this.palette.addColor(style, options);
				this.visModel.updateConditionalPalette().then(function () {
					this.slider.styles = this.palette.getColors().models;
					this.slider.addHandle(value);
					this.slider.$slider.addClass('ConditionalPalettePicker');
					this.canAddHandle = false;
				}.bind(this));
				event.stopPropagation();
				event.preventDefault();
			}
		},

		_sliderGhostHandle: function _sliderGhostHandle(event) {
			if (event.type === 'mouseout') {
				this.slider.removeGhostHandle();
			} else {
				if (this.slider.getHandleCount() < this.slider.maxHandles) {
					var value = this._calculateSliderValue(event);
					if (value >= this.slider.min && value <= this.slider.max) {
						this.slider.displayGhostHandle(event, value);
					}
				}
			}
		}
	});

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