datavis-glide 4.0.0-PRE.0

package/src/ui/grid_filter.js

@@ -0,0 +1,398 @@
+import _ from 'underscore';
+import moment from 'moment';
+import numeral from 'numeral';
+import jQuery from 'jquery';
+import { BigNumber } from 'bignumber.js';
+
+import {
+	icon,
+	isFloat,
+	isInt,
+	makeSubclass,
+	mixinLogging,
+	toFloat,
+	toInt,
+} from '../util/misc.js';
+import { trans } from '../trans.js';
+
+/**
+ * @file
+ * Contains the implementation of "grid filters" which are the dynamically applied filters that are
+ * shown in the filter control of a grid.  They set the filter on the {@link View} associated with
+ * the {@link Grid}.
+ *
+ * If you're looking for the parameters that get sent to the {@link Source} then you want {@link
+ * source_param.js} instead.
+ *
+ * ## Classes
+ *
+ * - {@link GridFilter}
+ *   - {@link StringTextboxGridFilter}
+ *   - {@link StringDropdownGridFilterChosen}
+ *   - {@link StringDropdownGridFilterSumo}
+ *   - {@link NumberTextboxGridFilter}
+ *   - {@link NumberCheckboxGridFilter}
+ *   - {@link DateSingleGridFilter}
+ *   - {@link DateRangeGridFilter}
+ *   - {@link BooleanCheckboxGridFilter}
+ * - {@link GridFilterSet}
+ */
+
+// GridFilter {{{1
+
+// Superclass {{{2
+
+// Constructor {{{3
+
+/**
+ * Base class for all grid filter widgets.
+ *
+ * @class
+ *
+ * @property {string} field
+ *
+ * @property {GridFilterSet} gridFilterSet
+ *
+ * @property {object} opts
+ *
+ * @property {string} [opts.filterType]
+ *
+ * @property {string} [opts.filterButton]
+ * The button used to add a new filter.
+ *
+ * @property {string} [opts.noRemoveButton=false]
+ * If true, don't create a remove button to place next to the filter.
+ *
+ * @property {number} limit
+ *
+ * @property {boolean} applyImmediately
+ *
+ * @property {jQuery} div
+ *
+ * @property {jQuery} input
+ *
+ * @property {jQuery} removeBtn
+ *
+ * @property {string} id
+ *
+ */
+
+var GridFilter = (function () {
+	var id = 0;
+
+	var genId = function () {
+		return 'GridFilter_' + id++;
+	};
+
+	return makeSubclass('GridFilter', Object, function (field, gridFilterSet, typeInfo, opts) {
+		var self = this;
+		var localRemoveButton;
+
+		self.id = genId();
+		self.field = field;
+		self.gridFilterSet = gridFilterSet;
+		self.typeInfo = typeInfo;
+		self.opts = opts;
+
+		self.limit = 0;
+		self.applyImmediately = false;
+		self.div = jQuery('<div>')
+			.addClass('wcdv_filter_control_filter');
+
+		if (self.opts.makeRemoveButton) {
+			self.removeBtn = self.makeRemoveBtn();
+			localRemoveButton = self.removeBtn;
+		}
+		else if (self.opts.removeButton) {
+			localRemoveButton = self.opts.removeButton;
+		}
+
+		if (localRemoveButton) {
+			localRemoveButton.on('click', function () {
+				self.gridFilterSet.remove(self.getId(), self.opts.filterButton);
+				if (typeof self.opts.onRemove === 'function') {
+					self.opts.onRemove();
+				}
+			});
+		}
+
+		if (self.gridFilterSet.gridTable) {
+			self.gridFilterSet.gridTable.on('columnResize', function () {
+				self.adjustInputWidth({ useSizingElement: true, fromColumnResize: true });
+			});
+		}
+	});
+})();
+
+mixinLogging(GridFilter);
+
+// #getValue {{{3
+
+/**
+ * This represents an exact value to use with a filter operator to decide what to show in the grid.
+ *
+ * @typedef {string|Moment|Numeral} GridFilter~Value
+ */
+
+/**
+ * This represents a range of allowed values; anything within the range should be shown in the grid.
+ *
+ * @typedef {Object} GridFilter~RangeValue
+ *
+ * @property {GridFilter~Value} start The starting number / date in the range (inclusive).
+ * @property {GridFilter~Value} end The ending number / date in the range (inclusive).
+ */
+
+/**
+ * Gives the value that should be used when building the filters for the View from the user's
+ * input in the GridFilter.  A GridFilter can return either a single value (which should be combined
+ * with the operator, e.g. "greater than 40") or a range value (where the operators are implicitly
+ * greater-than-or-equal and less-than-or-equal, e.g. "between January 1st and March 31st").
+ *
+ * @returns {GridFilter~Value|GridFilter~RangeValue} The value of the filter; you can tell whether
+ * or not it will be a range by checking the result of #isRange().
+ */
+
+GridFilter.prototype.getValue = function () {
+	var self = this
+		, fti = self.gridFilterSet.view.typeInfo.get(self.field);
+
+	switch (fti.type) {
+	case 'date':
+	case 'time':
+	case 'datetime':
+		if (self.input.val() === '') {
+			return undefined;
+		}
+		return fti.internalType === 'moment' ? moment(self.input.val()) : self.input.val();
+	case 'number':
+	case 'currency':
+		if (self.input.val() === '') {
+			return undefined;
+		}
+		switch (fti.internalType) {
+		case 'bignumber':
+			return new BigNumber(self.input.val());
+		case 'numeral':
+			return numeral(self.input.val());
+		case 'primitive':
+			return isInt(self.input.val()) ? toInt(self.input.val())
+				: isFloat(self.input.val()) ? toFloat(self.input.val())
+				: self.input.val();
+		default:
+			return self.input.val();
+		}
+	case 'string':
+	default:
+		return self.input.val();
+	}
+};
+
+// #setValue {{{3
+
+GridFilter.prototype.setValue = function (val) {
+	var self = this;
+
+	if (['$exists', '$notexists'].indexOf(self.getOperator()) < 0) {
+		if (numeral && numeral.isNumeral(val)) {
+			self.input.val(val._value);
+		}
+		else {
+			self.input.val(val);
+		}
+	}
+};
+
+// #getOperator {{{3
+
+GridFilter.prototype.getOperator = function () {
+	var self = this;
+
+	return self.operatorDrop.val();
+};
+
+// #setOperator {{{3
+
+GridFilter.prototype.setOperator = function (op) {
+	var self = this;
+
+	if (self.operatorDrop) {
+		self.operatorDrop.val(op);
+		self.operatorDrop.change();
+	}
+};
+
+// #getId {{{3
+
+GridFilter.prototype.getId = function () {
+	return this.id;
+};
+
+// #makeOperatorDrop {{{3
+
+/**
+ * Construct a SELECT that allows the user to pick the operator.
+ *
+ * @param {Array<string>} include If present, only include operators that correspond to those
+ * operations requested.  This should be an array like ``['$eq', '$ne']`` to only show equality and
+ * inequality operators.
+ */
+
+GridFilter.prototype.makeOperatorDrop = function (include) {
+	var self = this;
+
+	// These are all the operators that are possible.
+
+	var operators = [
+		{value: '$contains', text: '∈'},
+		{value: '$notcontains', text: '∉'},
+		{value: '$eq', text: '='},
+		{value: '$ne', text: '≠'},
+		{value: '$gt', text: '>'},
+		{value: '$gte', text: '≥'},
+		{value: '$lt', text: '<'},
+		{value: '$lte', text: '≤'},
+		{value: '$in', text: 'in', transLabel: 'FILTER.STRING.OPERATOR.IN'},
+		{value: '$nin', text: 'not in', transLabel: 'FILTER.STRING.OPERATOR.NOT_IN'},
+		{value: '$exists', text: 'not blank', transLabel: 'FILTER.STRING.OPERATOR.NOT_BLANK'},
+		{value: '$notexists', text: 'blank', transLabel: 'FILTER.STRING.OPERATOR.BLANK'}
+	];
+
+	// Remove anything that user didn't ask for.
+
+	if (include !== undefined && _.isArray(include)) {
+		operators = _.reject(operators, function (elt) {
+			return include.indexOf(elt.value) < 0;
+		});
+	}
+
+	var operatorDrop = jQuery('<select>');
+
+	operatorDrop.css({'margin-right': '0.5em'});
+
+	// Add all the operators as options within the <SELECT>.
+
+	_.each(operators, function (op) {
+		operatorDrop.append(jQuery('<option>', { value: op.value }).text(op.transLabel != null ? trans(op.transLabel) : op.text));
+	});
+
+	// Hook up the event to update the filter when the operator is changed.
+
+	operatorDrop.on('change', function () {
+		// Hide the input when selecting either the "blank" or "not blank" operator.
+		// Show the input when selecting any other operator.
+
+		if (self.input) {
+			['$exists', '$notexists'].indexOf(self.getOperator()) >= 0
+				? self.hideInput()
+				: self.showInput();
+		}
+
+		// For non-blank operators, only update the filter spec when the input has something in it.
+		if (['$exists', '$notexists'].indexOf(self.getOperator()) >= 0 || self.getValue() !== '') {
+			self.gridFilterSet.update();
+		}
+	});
+
+	// Return the <SELECT> so that the caller can put it where they want.
+
+	return operatorDrop;
+};
+
+// #makeRemoveBtn {{{3
+
+GridFilter.prototype.makeRemoveBtn = function () {
+	var self = this;
+
+	var removeBtn = jQuery(icon('x', null, 'Click to remove filter'));
+
+	removeBtn.css({'cursor': 'pointer', 'margin-left': '0.5em'});
+	return removeBtn;
+};
+
+// #remove {{{3
+
+GridFilter.prototype.remove = function () {
+	var self = this;
+
+	self.div.remove();
+	self.gridFilterSet.update(false);
+};
+
+// #isRange {{{3
+
+GridFilter.prototype.isRange = function () {
+	return false;
+};
+
+// #adjustInputWidth {{{3
+
+GridFilter.prototype.adjustInputWidth = function (opts) {
+	var self = this;
+
+	if (!self.opts.autoUpdateInputWidth) {
+		return;
+	}
+
+	if (opts === undefined) {
+		opts = {};
+	}
+
+	// In case we're using TableTool, we need to carry around this idea of the sizing element.  At
+	// this point in the JS execution, TableTool hasn't caught up and correctly resized the floating
+	// header to match the original header column widths.  Therefore, we can't use `self.div` for
+	// determining the correct width (it's the wrong size, because it's still in a column which is the
+	// wrong size).  Instead, we need to use the sizing element - which is the original version of the
+	// TH containing `self.div` - to determine the correct size.  TableTool will catch up later,
+	// correctly resizing the column to align perfectly with what we set here.
+	//
+	// FIXME: This is extremely tightly coupled to knowledge about how the grid table is laid out and
+	// what features it has (e.g. TableTool).  It would be better to pass in what the size of the
+	// column currently is with the event handler.
+
+	_.defaults(opts, {
+		useSizingElement: false,
+		input: self.input
+	});
+
+	self.logDebug(self.makeLogTag() + ' Target: %O', opts.input);
+
+	var targetWidth = opts.useSizingElement ? self.opts.sizingElement.width() : self.div.width();
+	self.logDebug(self.makeLogTag() + ' Available Space: ' + targetWidth + 'px ' + (opts.useSizingElement ? '[sizing element]' : '[div]'));
+
+	if (self.removeBtn) {
+		targetWidth -= self.removeBtn.outerWidth();
+		self.logDebug(self.makeLogTag() + ' Remove Button: ' + self.removeBtn.outerWidth() + 'px');
+	}
+
+	if (self.operatorDrop !== undefined) {
+		targetWidth -= self.operatorDrop.outerWidth();
+		self.logDebug(self.makeLogTag() + ' Operator Drop: ' + self.operatorDrop.outerWidth() + 'px');
+	}
+
+	self.logDebug(self.makeLogTag() + ' Adjusting ' + self.field + ' filter widget width to ' + targetWidth + 'px to match column width');
+
+	opts.input.outerWidth(targetWidth);
+
+	if (typeof opts.callback === 'function') {
+		opts.callback(targetWidth);
+	}
+};
+
+// #showInput {{{3
+
+GridFilter.prototype.showInput = function (input) {
+	var self = this;
+
+	self.input.show();
+};
+
+// #hideInput {{{3
+
+GridFilter.prototype.hideInput = function (input) {
+	var self = this;
+
+	self.input.hide();
+};
+
+export default GridFilter;

package/src/ui/popup_menu.js

@@ -0,0 +1,224 @@
+import jQuery from 'jquery';
+import {
+	icon,
+	makeSubclass,
+} from '../util/misc.js';
+
+// Constructor {{{1
+
+/**
+ * Create a new popup menu instance.  A popup menu displays a list of items, each with an icon and
+ * label, and invokes a callback when the user clicks on one.
+ *
+ * @class
+ * @property {Array} items
+ * @property {object} ui
+ * @property {HTMLElement|null} ui.root
+ */
+
+var PopupMenu = makeSubclass('PopupMenu', Object, function () {
+	var self = this;
+
+	self.items = [];
+	self.ui = {
+		root: null
+	};
+	self._boundClose = null;
+});
+
+// #addItem {{{1
+
+/**
+ * Add an item to the menu.
+ *
+ * @param {string} label
+ * The text to display for this item.
+ *
+ * @param {string} iconName
+ * A Lucide icon name (e.g. 'arrow-up-narrow-wide').
+ *
+ * @param {function} callback
+ * Called when the item is clicked.  Receives `userdata` as its argument.
+ *
+ * @param {*} [userdata]
+ * Arbitrary data passed to the callback when this item is clicked.
+ */
+
+PopupMenu.prototype.addItem = function (label, iconName, callback, userdata) {
+	var self = this;
+
+	self.items.push({
+		label: label,
+		iconName: iconName,
+		callback: callback,
+		userdata: userdata,
+		separator: false
+	});
+};
+
+// #addSeparator {{{1
+
+/**
+ * Add a visual separator to the menu.
+ */
+
+PopupMenu.prototype.addSeparator = function () {
+	var self = this;
+
+	self.items.push({
+		separator: true
+	});
+};
+
+// #open {{{1
+
+/**
+ * Open the popup menu.  If an anchor element is provided, the menu is positioned near it, taking
+ * care to remain within the browser viewport.
+ *
+ * @param {HTMLElement|jQuery} [anchorElement]
+ * Optional element to position the menu near.
+ */
+
+PopupMenu.prototype.open = function (anchorElement) {
+	var self = this;
+
+	// Close any previously open instance of this menu.
+	self.close();
+
+	var root = document.createElement('div');
+	root.className = 'wcdv-popup-menu';
+	root.setAttribute('role', 'menu');
+
+	for (var i = 0; i < self.items.length; i++) {
+		var entry = self.items[i];
+
+		if (entry.separator) {
+			var sep = document.createElement('div');
+			sep.className = 'wcdv-popup-menu-sep';
+			sep.setAttribute('role', 'separator');
+			root.appendChild(sep);
+			continue;
+		}
+
+		var item = document.createElement('div');
+		item.className = 'wcdv-popup-menu-item';
+		item.setAttribute('role', 'menuitem');
+
+		if (entry.iconName) {
+			var iconElt = icon(entry.iconName).get(0);
+			if (iconElt) {
+				item.appendChild(iconElt);
+			}
+		}
+
+		var labelSpan = document.createElement('span');
+		labelSpan.className = 'wcdv-popup-menu-item-label';
+		labelSpan.textContent = entry.label || '';
+		item.appendChild(labelSpan);
+
+		// Bind the click handler using an IIFE to capture the current entry.
+		(function (e) {
+			item.addEventListener('click', function (evt) {
+				evt.stopPropagation();
+				self.close();
+				if (typeof e.callback === 'function') {
+					e.callback(e.userdata);
+				}
+			});
+		})(entry);
+
+		root.appendChild(item);
+	}
+
+	document.body.appendChild(root);
+	self.ui.root = root;
+
+	// Position the menu near the anchor element, clamped to the viewport.
+	if (anchorElement) {
+		var anchor = anchorElement instanceof jQuery ? anchorElement.get(0) : anchorElement;
+		var rect = anchor.getBoundingClientRect();
+
+		// Start below-left of the anchor.
+		var top = rect.bottom;
+		var left = rect.left;
+
+		// Measure the menu now that it's in the DOM.
+		var menuRect = root.getBoundingClientRect();
+		var vpWidth = window.innerWidth;
+		var vpHeight = window.innerHeight;
+
+		// Clamp horizontally.
+		if (left + menuRect.width > vpWidth) {
+			left = vpWidth - menuRect.width;
+		}
+		if (left < 0) {
+			left = 0;
+		}
+
+		// If the menu would overflow below, try placing it above the anchor.
+		if (top + menuRect.height > vpHeight) {
+			var above = rect.top - menuRect.height;
+			if (above >= 0) {
+				top = above;
+			}
+			else {
+				// Neither fits perfectly; pick whichever side has more room.
+				top = rect.top > (vpHeight - rect.bottom)
+					? Math.max(0, rect.top - menuRect.height)
+					: rect.bottom;
+			}
+		}
+
+		root.style.position = 'fixed';
+		root.style.top = top + 'px';
+		root.style.left = left + 'px';
+	}
+
+	// Close when the user clicks outside the menu.
+	self._boundClose = function (evt) {
+		if (self.ui.root && !self.ui.root.contains(evt.target)) {
+			self.close();
+		}
+	};
+
+	// Use a timeout so the current click event doesn't immediately close the menu.
+	setTimeout(function () {
+		document.addEventListener('mousedown', self._boundClose, true);
+	}, 0);
+};
+
+// #close {{{1
+
+/**
+ * Close the popup menu, removing it from the page.
+ */
+
+PopupMenu.prototype.close = function () {
+	var self = this;
+
+	if (self._boundClose) {
+		document.removeEventListener('mousedown', self._boundClose, true);
+		self._boundClose = null;
+	}
+
+	if (self.ui.root && self.ui.root.parentNode) {
+		self.ui.root.parentNode.removeChild(self.ui.root);
+	}
+	self.ui.root = null;
+};
+
+// #destroy {{{1
+
+/**
+ * Destroy the popup menu, releasing all resources.
+ */
+
+PopupMenu.prototype.destroy = function () {
+	var self = this;
+
+	self.close();
+	self.items = [];
+};
+
+export default PopupMenu;