fuelux - npm Package Compare versions

Comparing version 3.14.1 to 3.14.2

bower.json

@@ -31,3 +31,5 @@ {
     "underscore": "1.x",
-    "blanket": "1.x"
+    "blanket": "1.x",
+    "jquery-simulate-ext": "~1.3.0",
+    "require-handlebars-plugin": "~1.0.0"
   },
@@ -34,0 +36,0 @@ "ignore": [

index.js

@@ -23,2 +23,3 @@ define(function (require) {
 	var _ = require('underscore');
+	var hbs = require('hbs');
 
@@ -75,3 +76,6 @@
 	 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
-
+	$('#myCombobox').combobox({
+		filterOnKeypress: false,
+		showOptionsOnKeypress: true
+	});
 	// sample method buttons
@@ -968,2 +972,6 @@ $('#btnComboboxGetSelectedItem').on('click', function () {
 
+	var tree = require('hbs!fuelux_templates/tree');
+	var $myTreeWrapper = $('#myTreeWrapper');
+	$myTreeWrapper.html(tree({id: 'myTree', folderSelect: true}));
+
 	var treeDataSource = function (parentData, callback) {
@@ -1032,2 +1040,10 @@ log('Opening branch data: ', parentData);
 						}
+					},
+					{
+						'name': 'Load More',
+						'type': 'overflow',
+						'attr': {
+							'layer': 'layer' + guid(),
+							'id': 'id' + guid()
+						}
 					}
@@ -1039,3 +1055,3 @@ ]
 
-	$('#myTree1').tree({
+	$('#myTree').tree({
 		dataSource: treeDataSource,
@@ -1060,2 +1076,5 @@ cacheItems: true,
 	function myTreeInit () {
+		var $myTree2Wrapper = $('#myTree2Wrapper');
+		$myTree2Wrapper.html(tree({id: 'myTree2'}));
+
 		var callLimit = 200;
@@ -1100,2 +1119,9 @@ var callCount = 0;
 									}
+								},
+								{
+									'name': 'Load More',
+									'type': 'overflow',
+									'attr': {
+										'layer': 'layer' + guid()
+									}
 								}
@@ -1171,2 +1197,9 @@ ]
 								}
+							},
+							{
+								'name': 'Load More Items',
+								'type': 'overflow',
+								'attr': {
+									'layer': 'layer' + guid()
+								}
 							}
@@ -1173,0 +1206,0 @@ ]

js/combobox.js

@@ -42,2 +42,3 @@ /*
 		this.$button = this.$element.find('.btn');
+		this.$inputGroupBtn = this.$element.find('.input-group-btn');
 
@@ -47,2 +48,3 @@ this.$element.on('click.fu.combobox', 'a', $.proxy(this.itemclicked, this));
 		this.$element.on('shown.bs.dropdown', $.proxy(this.menuShown, this));
+		this.$input.on('keyup.fu.combobox', $.proxy(this.keypress, this));
 
@@ -58,2 +60,7 @@ // set default selection
 
+		// filter on load in case the first thing they do is press navigational key to pop open the menu
+		if (this.options.filterOnKeypress) {
+			this.options.filter(this.$dropMenu.find('li'), this.$input.val(), this);
+		}
+
 	};
@@ -83,2 +90,3 @@
 			if (typeof $item[0] !== 'undefined') {
+				$item.addClass('selected');
 				this.$selectedItem = $item;
@@ -91,2 +99,8 @@ this.$input.val(this.$selectedItem.text().trim());
 
+		clearSelection: function () {
+			this.$selectedItem = null;
+			this.$input.val('');
+			this.$dropMenu.find('li').removeClass('selected');
+		},
+
 		menuShown: function () {
@@ -114,3 +128,3 @@ if (this.options.autoResizeMenu) {
 				data = {
-					text: this.$input.val()
+					text: this.$input.val().trim()
 				};
@@ -125,3 +139,3 @@ }
 			this.$element.find('li').each(function () {
-				if ((this.textContent || this.innerText || $(this).text() || '').toLowerCase() === (text || '').toLowerCase()) {
+				if ((this.textContent || this.innerText || $(this).text() || '').trim().toLowerCase() === (text || '').trim().toLowerCase()) {
 					$item = $(this);
@@ -131,2 +145,3 @@ return false;
 			});
+
 			this.doSelect($item);
@@ -196,2 +211,71 @@ },
 
+		keypress: function (e) {
+			var ENTER = 13;
+			//var TAB = 9;
+			var ESC = 27;
+			var LEFT = 37;
+			var UP = 38;
+			var RIGHT = 39;
+			var DOWN = 40;
+
+			var IS_NAVIGATIONAL = (
+				e.which === UP ||
+				e.which === DOWN ||
+				e.which === LEFT ||
+				e.which === RIGHT
+			);
+
+			if(this.options.showOptionsOnKeypress && !this.$inputGroupBtn.hasClass('open')){
+				this.$button.dropdown('toggle');
+				this.$input.focus();
+			}
+
+			if (e.which === ENTER) {
+				e.preventDefault();
+
+				var selected = this.$dropMenu.find('li.selected').text().trim();
+				if(selected.length > 0){
+					this.selectByText(selected);
+				}else{
+					this.selectByText(this.$input.val());
+				}
+
+				this.$inputGroupBtn.removeClass('open');
+				this.inputchanged(e);
+			} else if (e.which === ESC) {
+				e.preventDefault();
+				this.clearSelection();
+				this.$inputGroupBtn.removeClass('open');
+			} else if (this.options.showOptionsOnKeypress) {
+				if (e.which === DOWN || e.which === UP) {
+					e.preventDefault();
+					var $selected = this.$dropMenu.find('li.selected');
+					if ($selected.length > 0) {
+						if (e.which === DOWN) {
+							$selected = $selected.next(':not(.hidden)');
+						} else {
+							$selected = $selected.prev(':not(.hidden)');
+						}
+					}
+
+					if ($selected.length === 0){
+						if (e.which === DOWN) {
+							$selected = this.$dropMenu.find('li:not(.hidden):first');
+						} else {
+							$selected = this.$dropMenu.find('li:not(.hidden):last');
+						}
+					}
+					this.$dropMenu.find('li').removeClass('selected');
+					$selected.addClass('selected');
+				}
+			}
+
+			// Avoid filtering on navigation key presses
+			if (this.options.filterOnKeypress && !IS_NAVIGATIONAL) {
+				this.options.filter(this.$dropMenu.find('li'), this.$input.val(), this);
+			}
+
+			this.previousKeyPress = e.which;
+		},
+
 		inputchanged: function (e, extra) {
@@ -244,3 +328,30 @@ // skip processing for internally-generated synthetic event
 	$.fn.combobox.defaults = {
-		autoResizeMenu: true
+		autoResizeMenu: true,
+		filterOnKeypress: false,
+		showOptionsOnKeypress: false,
+		filter: function filter (list, predicate, self) {
+			var visible = 0;
+			self.$dropMenu.find('.empty-indicator').remove();
+
+			list.each(function (i) {
+				var $li = $(this);
+				var text = $(this).text().trim();
+
+				$li.removeClass();
+
+				if (text === predicate) {
+					$li.addClass('text-success');
+					visible++;
+				} else if (text.substr(0, predicate.length) === predicate) {
+					$li.addClass('text-info');
+					visible++;
+				} else {
+					$li.addClass('hidden');
+				}
+			});
+
+			if (visible === 0) {
+				self.$dropMenu.append('<li class="empty-indicator text-muted"><em>No Matches</em></li>');
+			}
+		}
 	};
@@ -247,0 +358,0 @@

js/scheduler.js

@@ -258,6 +258,6 @@ /*
 			if (val === 'after') {
-				this.$endAfter.parent().removeClass('hide hidden'); // hide is deprecated
+				this.$endAfter.parent().removeClass('hide hidden'); // jQuery deprecated hide in 3.0. Use hidden instead. Leaving hide here to support previous markup
 				this.$endAfter.parent().attr('aria-hidden', 'false');
 			} else if (val === 'date') {
-				this.$endDate.parent().removeClass('hide hidden');	// hide is deprecated
+				this.$endDate.parent().removeClass('hide hidden');	// jQuery deprecated hide in 3.0. Use hidden instead. Leaving hide here to support previous markup
 				this.$endDate.parent().attr('aria-hidden', 'false');
@@ -451,7 +451,7 @@ }
 				case 'monthly':
-					this.$repeatIntervalPanel.removeClass('hide hidden'); // hide is deprecated
+					this.$repeatIntervalPanel.removeClass('hide hidden'); // jQuery deprecated hide in 3.0. Use hidden instead. Leaving hide here to support previous markup
 					this.$repeatIntervalPanel.attr('aria-hidden', 'false');
 					break;
 				default:
-					this.$repeatIntervalPanel.addClass('hidden'); // hide is deprecated
+					this.$repeatIntervalPanel.addClass('hidden'); // jQuery deprecated hide in 3.0. Use hidden instead. Leaving hide here to support previous markup
 					this.$repeatIntervalPanel.attr('aria-hidden', 'true');
@@ -466,3 +466,3 @@ break;
 			// show panel for current selection
-			this.$element.find('.repeat-' + val).removeClass('hide hidden'); // hide is deprecated
+			this.$element.find('.repeat-' + val).removeClass('hide hidden'); // jQuery deprecated hide in 3.0. Use hidden instead. Leaving hide here to support previous markup
 			this.$element.find('.repeat-' + val).attr('aria-hidden', 'false');
@@ -476,3 +476,3 @@
 			} else {
-				this.$end.removeClass('hide hidden'); // hide is deprecated
+				this.$end.removeClass('hide hidden'); // jQuery deprecated hide in 3.0. Use hidden instead. Leaving hide here to support previous markup
 				this.$end.attr('aria-hidden', 'false');
@@ -518,3 +518,3 @@ }
 				item = 'weekly';
-				
+
 				if (recur.BYDAY) {
@@ -569,3 +569,3 @@ if (recur.BYDAY === 'MO,TU,WE,TH,FR') {
 					$repeatYearlyDay.find('.year-month-day-pos').selectlist('selectByValue', recur.BYSETPOS);
-					
+
 					if (recur.BYDAY) {
@@ -590,3 +590,3 @@ $repeatYearlyDay.find('.year-month-days').selectlist('selectByValue', recur.BYDAY);
 				var untilSplit, untilDate;
-				
+
 				if (recur.UNTIL.length === 8) {
@@ -593,0 +593,0 @@ untilSplit = recur.UNTIL.split('');

js/tree.js

@@ -48,2 +48,6 @@ /*
 
+		this.$element.on('click.fu.tree', '.tree-overflow', $.proxy(function (ev){
+			this.populate($(ev.currentTarget));
+		}, this));
+
 		// folderSelect default is true
@@ -93,13 +97,40 @@ if (this.options.folderSelect) {
 			var self = this;
+
+			// populate was initiated based on clicking overflow link
+			var isOverflow = $el.hasClass('tree-overflow');
+
 			var $parent = ($el.hasClass('tree')) ? $el : $el.parent();
-			var loader = $parent.find('.tree-loader:eq(0)');
+			var atRoot = $parent.hasClass('tree');
+
+			if(isOverflow && !atRoot){
+				$parent = $parent.parent();
+			}
+
 			var treeData = $parent.data();
+			// expose overflow data to datasource so it can be responded to appropriately.
+			if(isOverflow){
+				treeData.overflow = $el.data();
+			}
+
 			isBackgroundProcess = isBackgroundProcess || false;	// no user affordance needed (ex.- "loading")
 
+			if(isOverflow){
+				if(atRoot){
+					// the loader at the root level needs to continually replace the overflow trigger
+					// otherwise, when loader is shown below, it will be the loader for the last folder
+					// in the tree, instead of the loader at the root level.
+					$el.replaceWith($parent.find('> .tree-loader').remove());
+				}else{
+					$el.remove();
+				}
+			}
+
+			var $loader = $parent.find('.tree-loader:last');
+
 			if (isBackgroundProcess === false) {
-				loader.removeClass('hide hidden'); // hide is deprecated
+				$loader.removeClass('hide hidden'); // jQuery deprecated hide in 3.0. Use hidden instead. Leaving hide here to support previous markup
 			}
+
+
 			this.options.dataSource(treeData ? treeData : {}, function (items) {
-				loader.addClass('hidden');
-
 				$.each(items.data, function (index, value) {
@@ -109,9 +140,13 @@ var $entity;
 					if (value.type === 'folder') {
-						$entity = self.$element.find('[data-template=treebranch]:eq(0)').clone().removeClass('hide hidden').removeData('template'); // hide is deprecated
+						$entity = self.$element.find('[data-template=treebranch]:eq(0)').clone().removeClass('hide hidden').removeData('template').removeAttr('data-template'); // jQuery deprecated hide in 3.0. Use hidden instead. Leaving hide here to support previous markup
 						$entity.data(value);
 						$entity.find('.tree-branch-name > .tree-label').html(value.text || value.name);
 					} else if (value.type === 'item') {
-						$entity = self.$element.find('[data-template=treeitem]:eq(0)').clone().removeClass('hide hidden').removeData('template'); // hide is deprecated
+						$entity = self.$element.find('[data-template=treeitem]:eq(0)').clone().removeClass('hide hidden').removeData('template').removeAttr('data-template'); // jQuery deprecated hide in 3.0. Use hidden instead. Leaving hide here to support previous markup
 						$entity.find('.tree-item-name > .tree-label').html(value.text || value.name);
 						$entity.data(value);
+					} else if (value.type === 'overflow') {
+						$entity = self.$element.find('[data-template=treeoverflow]:eq(0)').clone().removeClass('hide hidden').removeData('template').removeAttr('data-template'); // jQuery deprecated hide in 3.0. Use hidden instead. Leaving hide here to support previous markup
+						$entity.find('.tree-overflow-name > .tree-label').html(value.text || value.name);
+						$entity.data(value);
 					}
@@ -168,10 +203,12 @@
 
-					// add child nodes
-					if ($el.hasClass('tree-branch-header')) {
+					// add child node
+					if (atRoot) {
+						$parent.append($entity);
+					} else {
 						$parent.find('.tree-branch-children:eq(0)').append($entity);
-					} else {
-						$el.append($entity);
 					}
 				});
 
+				$parent.find('.tree-loader').addClass('hidden');
+
 				// return newly populated folder
@@ -232,3 +269,3 @@ self.$element.trigger('loaded.fu.tree', $parent);
 			$branch.attr('aria-expanded', 'true');
-			$treeFolderContentFirstChild.removeClass('hide hidden'); // hide is deprecated
+			$treeFolderContentFirstChild.removeClass('hide hidden'); // jQuery deprecated hide in 3.0. Use hidden instead. Leaving hide here to support previous markup
 			$branch.find('> .tree-branch-header .icon-folder').eq(0)
@@ -308,3 +345,3 @@ .removeClass('glyphicon-folder-close')
 
-				// hide is deprecated
+				// jQuery deprecated hide in 3.0. Use hidden instead. Leaving hide here to support previous markup
 				if (self.$element.find(".tree-branch.tree-open:not('.hidden, .hide')").length === 0) {
@@ -311,0 +348,0 @@ self.$element.trigger('closedAll.fu.tree', {

package.json

@@ -86,3 +86,3 @@ {
   "title": "Fuel UX",
-  "version": "3.14.1",
+  "version": "3.14.2",
   "volo": {
@@ -89,0 +89,0 @@ "baseDir": "lib",

test/combobox-test.js

@@ -7,2 +7,8 @@ /*global QUnit:false, module:false, test:false, asyncTest:false, expect:false*/
 	var $ = require('jquery');
+	// require('sim/libs/bililiteRange');
+	// require('sim/libs/jquery.simulate');
+	// require('sim/src/jquery.simulate.ext');
+	// require('sim/src/jquery.simulate.drag-n-drop');
+	// require('sim/src/jquery.simulate.key-sequence');
+	// require('sim/src/jquery.simulate.key-combo');
 	var html = require('text!test/markup/combobox-markup.html!strip');
@@ -114,2 +120,48 @@ /* FOR DEV TESTING - uncomment to test against index.html */
 
+	// var userInteracts = function userInteracts($combobox) {
+	// 	var DOWN_KEY = 40;
+	// 	var UP_KEY = 38;
+	// 	var deleteAllTypeT = "{backspace}{backspace}{backspace}{backspace}{backspace}T";
+	// 	var hitEnter = "{enter}";
+
+	// 	var hitDown = jQuery.Event("keyup");
+	// 	hitDown.which = DOWN_KEY;
+	// 	hitDown.keyCode = DOWN_KEY;
+	// 	hitDown.keypress = DOWN_KEY;
+
+	// 	$combobox.find('input').simulate("key-sequence", {sequence: deleteAllTypeT});
+	// 	$combobox.find('input').trigger(hitDown);
+	// 	$combobox.find('input').simulate("key-sequence", {sequence: hitEnter});
+	// };
+
+	// test("should respond to keypresses appropriately with filter and showOptionsOnKeypress off", function() {
+	// 	var $combobox = $(html).find("#MyCombobox").combobox();
+
+	// 	userInteracts($combobox);
+
+	// 	var item = $combobox.combobox('selectedItem');
+	// 	var expectedItem = { text:'T' };
+	// 	deepEqual(item, expectedItem, 'Combobox was not triggered, filter not activated');
+	// });
+
+	// test("should respond to keypresses appropriately with filter off and showOptionsOnKeypress on", function() {
+	// 	var $combobox = $(html).find("#MyComboboxWithSelectedForOptions").combobox({ showOptionsOnKeypress: true });
+
+	// 	userInteracts($combobox);
+
+	// 	var item = $combobox.combobox('selectedItem');
+	// 	var expectedItem = { text:'Four', value: 4 };
+	// 	deepEqual(item, expectedItem, 'Combobox was triggered with filter inactive but showOptionsOnKeypress active');
+	// });
+
+	// test("should respond to keypresses appropriately with filter and showOptionsOnKeypress on", function() {
+	// 	var $combobox = $(html).find("#MyComboboxWithSelectedForFilter").combobox({ showOptionsOnKeypress: true, filterOnKeypress: true });
+
+	// 	userInteracts($combobox);
+
+	// 	var item = $combobox.combobox('selectedItem');
+	// 	var expectedItem = { text:'Two', value: 2 };
+	// 	deepEqual(item, expectedItem, 'Combobox was triggered with filter active');
+	// });
+
 	test("should select by text with whitespace", function() {
@@ -116,0 +168,0 @@ var $combobox = $(html).find("#MyCombobox").combobox();

test/tree-test.js

@@ -105,2 +105,9 @@ /*global QUnit:false, module:false, test:false, asyncTest:false, expect:false*/
 							}
+						},
+						{
+							name: 'Load More',
+							type: 'overflow',
+							attr: {
+								id: 'overflow1'
+							}
 						}
@@ -128,2 +135,7 @@ ]
 
+	var NUM_CHILDREN = 9;
+	var NUM_FOLDERS = 4;
+	var NUM_ITEMS = 4;
+	var NUM_OVERFLOWS = 1;
+
 	test("should be defined on jquery object", function () {
@@ -172,4 +184,5 @@ ok($().tree, 'tree method is defined');
 
-		equal($tree.find('.tree-branch').length, 5, 'Initial set of folders have been added');
-		equal($tree.find('.tree-item').length, 5, 'Initial set of items have been added');
+		equal($tree.find('.tree-branch:not([data-template])').length, NUM_FOLDERS, 'Initial set of folders have been added');
+		equal($tree.find('.tree-item:not([data-template])').length, NUM_ITEMS, 'Initial set of items have been added');
+		equal($tree.find('.tree-overflow:not([data-template])').length, NUM_OVERFLOWS, 'Initial overflow has been added');
 	});
@@ -187,3 +200,3 @@
 		$tree.tree('discloseFolder', $selNode.find('.tree-branch-name'));
-		equal($selNode.find('.tree-branch-children > li').length, 8, 'Folder has been populated with items/sub-folders');
+		equal($selNode.find('.tree-branch-children > li').length, NUM_CHILDREN, 'Folder has been populated with items/sub-folders');
 
@@ -199,3 +212,3 @@ $tree = $(html).find('#MyTreeSelectableFolder');
 		$tree.tree('discloseFolder', $selNode.find('.tree-branch-header'));
-		equal($selNode.find('.tree-branch-children > li').length, 8, 'Folder has been populated with sub-folders and items');
+		equal($selNode.find('.tree-branch-children > li').length, NUM_CHILDREN, 'Folder has been populated with sub-folders and items');
 	});
@@ -255,2 +268,17 @@
 
+	// test("Overflow click works as designed", function () {
+	// 	var $tree = $(html).find('#MyTree');
+
+	// 	$tree.tree({
+	// 		dataSource: this.dataSource
+	// 	});
+
+	// 	equal($tree.find('> li:not([data-template])').length, NUM_CHILDREN, 'Initial set of folders (' + NUM_CHILDREN + ' children) have been added');
+	// 	$tree.find('.tree-overflow:eq(0)').click();
+	// 	//Once overflow is clicked, all original contents is loaded again, and original overflow is actually REMOVED from tree contents.
+	// 	var NUM_AFTER_OVERFLOW_CLICK = (NUM_CHILDREN * 2) - 1;
+	// 	equal($tree.find('> li:not([data-template])').length, NUM_AFTER_OVERFLOW_CLICK, 'Overflow contents (now ' + NUM_AFTER_OVERFLOW_CLICK + ' children) have loaded');
+
+	// });
+
 	test("Multiple item/folder selection works as designed", function () {
@@ -397,3 +425,3 @@ var $tree = $(html).find('#MyTree');
 		$tree.tree('discloseFolder', $folderToRefresh.find('.tree-branch-name'));
-		equal($folderToRefresh.find('.tree-branch-children > li').length, 8, 'Folder has been populated with items/sub-folders');
+		equal($folderToRefresh.find('.tree-branch-children > li').length, NUM_CHILDREN, 'Folder has been populated with items/sub-folders');
 		initialLoadedFolderId = $folderToRefresh.find(selector).attr('id');
@@ -400,0 +428,0 @@

No alert changes

Improved metrics

Total package byte prevSize

2111867

increased by2.88%

Number of package files

275

increased by2.61%

Lines of code

25664

increased by1.97%

No dependency changes