Upgraded to Meteor 1.6.0.1 and NodeJS 8.9.3. Added weekly/daily property to venues to support graphing and tracking of actual income from farmers markets (they don't usually match with expected income). Added workers objects to help illustrate who did what work (who was at the market on a specific week for example, or who prep'd and who canned a batch of jam). Fixed some bugs in the venue page. Re-design of the menu to allow for more menu options.
This commit is contained in:
@@ -4,6 +4,9 @@
|
||||
// Takes a input form element and a hidden form element (to store the selected id in) along with an array of objects, to build a dropdown select control that allows the user to type part of the selection to filter the list.
|
||||
// Modified for meteor.
|
||||
//
|
||||
// @param options: See Combo.DEFAULTS below.
|
||||
//
|
||||
//
|
||||
(function($) {
|
||||
let Combo = function($input, $hidden, options) {
|
||||
let _this = this;
|
||||
@@ -37,7 +40,8 @@
|
||||
|
||||
//this.$list.appendTo($input.parent());
|
||||
this.$list.appendTo(this.$listContainer);
|
||||
this.$listContainer.appendTo($input.parent());
|
||||
//this.$listContainer.appendTo($input.parent());
|
||||
this.$listContainer.prependTo(document.body); //Place the container at the top of the page with no height.
|
||||
|
||||
//Setup the list to highlight the item the user is hovering over, to select the item the user clicks, and to remove the hover styling when the list closes due to a selection being made.
|
||||
this.$list
|
||||
@@ -132,8 +136,8 @@
|
||||
let groupFunctions = _this.options.groupFunctions;
|
||||
let getClasses = _this.options.getClasses;
|
||||
|
||||
let addOne = function(data, parent) { //role is optional.
|
||||
let text = $.isFunction(_this.options.textAttr) ? _this.options.textAttr(data) : data[_this.options.textAttr];
|
||||
let addOne = function(data, parent) {
|
||||
let text = _this.options.textAttr ? ($.isFunction(_this.options.textAttr) ? _this.options.textAttr(data) : data[_this.options.textAttr]) : data;
|
||||
let li = $("<li" + (parent ? " role='leaf'" : "") + (getClasses ? " class='" + getClasses(data) + "'" : "") + ">" + text + "</li>");
|
||||
|
||||
li.appendTo(_this.$list);
|
||||
@@ -191,8 +195,15 @@
|
||||
|
||||
Tracker.autorun(function() {
|
||||
this.$list.empty();
|
||||
//Add the initial set of data.
|
||||
add(options.cursor.fetch());
|
||||
if(options.cursor) {
|
||||
//Add the initial set of data.
|
||||
add(options.cursor.fetch());
|
||||
}
|
||||
else if(options.set) {
|
||||
for(let i = 0; i < options.set.length; i++) {
|
||||
add(options.set[i]);
|
||||
}
|
||||
}
|
||||
}.bind(this));
|
||||
|
||||
//Check the hidden input field for an ID, and setup the selection based in it if there is one.
|
||||
@@ -221,10 +232,11 @@
|
||||
};
|
||||
|
||||
Combo.DEFAULTS = {
|
||||
cursor: undefined, //A meteor Cursor.
|
||||
cursor: undefined, //A meteor Cursor used to populate the values displayed in the combo.
|
||||
set: [], //An array of values displayed in the combo. This must be specified if cursor is not specified.
|
||||
selection: undefined, //A meteor ReactiveVar whose value will be set to the current selection.
|
||||
comparator: undefined, //A function that takes two collection objects and compares them for equality. If the combo shows users for example, this comparator would compare one user id to another. Required for the combo to set the selection if the view changes it externally relative to this combo.
|
||||
textAttr: 'text', //The attribute of the data elements to use for the name. This can also be a function that takes the data object and returns the text.
|
||||
comparator: function(a, b) {return a === b;}, //A function that takes two collection objects and compares them for equality. If the combo shows users for example, this comparator would compare one user id to another. Required for the combo to set the selection if the view changes it externally relative to this combo.
|
||||
textAttr: undefined, //The attribute of the data elements to use for the name. This can also be a function that takes the data object and returns the text.
|
||||
idAttr: 'id', //The attribute of the data elements to use for the ID. This can also be a function that takes the data obejct and returns the ID.
|
||||
// groupFunctions: The object containing three functions: 'groupParent', 'parentText', 'children'.
|
||||
// groupParents(data) will take a data element and return the objects that best represents the parents of the children (for a multi layer tree, this would be the node just before the leaf nodes).
|
||||
@@ -274,6 +286,15 @@
|
||||
return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
|
||||
};
|
||||
|
||||
// Removes all filtering. This is used to clear the filtering when first opening the combo when there is a value in the field. This is desirable because when we have an exact match, but are opening the combo, we most often want to select a new value.
|
||||
Combo.prototype.clearFilter = function() {
|
||||
console.log("CLearing Filter");
|
||||
//Show all list elements.
|
||||
this.$list.find('li').addClass('visible').show();
|
||||
//Hide any node list elements.
|
||||
this.$list.find('li[role="node"]').removeClass('visible').hide();
|
||||
};
|
||||
|
||||
//Filters the list items by marking those that match the text in the text field as having the class 'visible'.
|
||||
Combo.prototype.filter = function() {
|
||||
try {
|
||||
@@ -350,26 +371,36 @@
|
||||
};
|
||||
|
||||
Combo.prototype.show = function() {
|
||||
//Position the list relative to the edit field.
|
||||
this.$list.css({position: 'absolute', top: 0, left: 0, width: this.$input.outerWidth()});
|
||||
|
||||
if(!this.$list.is(':visible') && this.$list.find('li.visible').length > 0) {
|
||||
let fns = {default: 'show', fade: 'fadeIn', slide: 'slideDown'};
|
||||
let fn = fns[this.options.effects];
|
||||
|
||||
this.trigger('show');
|
||||
this.$input.addClass('open');
|
||||
this.$list[fn](this.options.duration, $.proxy(this.trigger, this, 'shown'));
|
||||
// Make sure we don't repeatedly try to show the combo.
|
||||
if(!this.isShowing) {
|
||||
let position = this.$input.offset();
|
||||
|
||||
this.isShowing = true;
|
||||
// Position the list relative to the field. Note that we place the combo at the top of the page (in the body tag) to avoid overflow not showing and to ensure the page scrolls if needed.
|
||||
this.$list.css({position: 'absolute', top: position.top + this.$input.outerHeight(), left: position.left, width: this.$input.outerWidth()});
|
||||
this.clearFilter();
|
||||
|
||||
if(!this.$list.is(':visible') && this.$list.find('li.visible').length > 0) {
|
||||
let fns = {default: 'show', fade: 'fadeIn', slide: 'slideDown'};
|
||||
let fn = fns[this.options.effects];
|
||||
|
||||
this.trigger('show');
|
||||
this.$input.addClass('open');
|
||||
this.$list[fn](this.options.duration, $.proxy(this.trigger, this, 'shown'));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Combo.prototype.hide = function() {
|
||||
let fns = {default: 'hide', fade: 'fadeOut', slide: 'slideUp'};
|
||||
let fn = fns[this.options.effects];
|
||||
|
||||
this.trigger('hide');
|
||||
this.$input.removeClass('open');
|
||||
this.$list[fn](this.options.duration, $.proxy(this.trigger, this, 'hidden'));
|
||||
if(this.isShowing) {
|
||||
let fns = {default: 'hide', fade: 'fadeOut', slide: 'slideUp'};
|
||||
let fn = fns[this.options.effects];
|
||||
|
||||
this.isShowing = false;
|
||||
this.trigger('hide');
|
||||
this.$input.removeClass('open');
|
||||
this.$list[fn](this.options.duration, $.proxy(this.trigger, this, 'hidden'));
|
||||
}
|
||||
};
|
||||
|
||||
// goDown: true/false - defaults to true - indicating whether the highlighting should go up or down if the requested item is a node. Nodes cannot be highlighted or selected.
|
||||
|
||||
Reference in New Issue
Block a user