pixl-xyapp 2.1.11 → 2.1.14

package/README.md

@@ -293,7 +293,7 @@ The library provides CSS styles and JavaScript functions for creating data table
 	</table>
 ```
 
-In addition to the CSS, a pagination system is provided, to assist you with generating tables from a large dataset that have pagination links built-in.  The function to call is `this.getPaginatedTable()` and is available in the `Page` base class.  It returns the final rendered HTML for the page.
+In addition to the CSS, a pagination system is provided, to assist you with generating tables from a large dataset that have pagination links built-in.  The function to call is `this.getPaginatedGrid()` and is available in the `Page` base class.  It returns the final rendered HTML for the page.
 
 To use it, you'll need to provide an object containing the following pieces of information:
 
@@ -322,7 +322,7 @@ Here is an example:
 		{ name: 'Rhubarb', color: 'Purple', size: '2ft', quantity: 190, price: '$3.99', created: 1441724876 }
 	];
 	
-	var html = this.getPaginatedTable({
+	var html = this.getPaginatedGrid({
 		cols: cols,
 		rows: rows,
 		data_type: 'vegetable',
@@ -343,7 +343,7 @@ Here is an example:
 	});
 ```
 
-So the idea here is, we have a dataset of 10 items total, but we are only showing 5 items per page.  So we have an array of 5 items in `rows`, but we're specifying the `total` as 10, and `offset` as 0 (first page).  Based on this, the `getPaginatedTable()` will generate the proper pagination links.
+So the idea here is, we have a dataset of 10 items total, but we are only showing 5 items per page.  So we have an array of 5 items in `rows`, but we're specifying the `total` as 10, and `offset` as 0 (first page).  Based on this, the `getPaginatedGrid()` will generate the proper pagination links.
 
 Your callback is fired once per row, and is passed the current row (array element from `rows`), and the localized index in `idx` (starts from `0` regardless of `offset`).  Your function should return an array of values which should match up with the `cols`, and each will be stuffed into a `<TD>` element.
 

package/css/base.css

@@ -185,6 +185,9 @@ button.link {
 	margin: 0;
 	font: inherit;
 }
+button.link.icon_pad i.mdi {
+	padding-right: 5px;
+}
 
 a, .link {
 	color: var(--link-color);
@@ -1311,9 +1314,27 @@ body.dark .dialog .multiselect > .item {
 	background: rgba(255, 255, 255, 0.1);
 }
 
-.multiselect > .item > i.mdi-close:hover:before {
+.multiselect > .item > button.mdi {
+	background: none;
+	border: none;
+	padding: 0;
+	margin: 0;
+	font: inherit;
+	cursor: pointer;
+}
+
+.multiselect > .item > button.mdi:before {
+	transform: scale(1.20);
+}
+
+.multiselect > .item > button.mdi:focus-visible { 
+	outline: 2px solid var(--theme-color); 
+	outline-offset: -2px;
+}
+
+.multiselect > .item > button.mdi-close:hover:before {
 	content: "\F0159"; /* mdi-close-circle */
-	color: var(--theme-color);
+	color: var(--red);
 }
 
 .multiselect > .item.inherited {
@@ -2535,6 +2556,9 @@ div.dropzone.drag > div.dz_bar {
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
+.data_grid_pagination button.link {
+	text-transform: uppercase;
+}
 .data_grid_pagination i.mdi:before {
 	transform: scale(1.5);
 }

package/js/base.js

@@ -8,6 +8,11 @@ var app = {
 	secure: !!location.protocol.match(/^https/i),
 	retina: (window.devicePixelRatio > 1),
 	mobile: !!navigator.userAgent.match(/(iOS|iPhone|iPad|Android)/),
+	os: {
+		mac: !!navigator.userAgent.match(/(Macintosh|Mac OS X|macOS)/),
+		win: !!navigator.userAgent.match(/(Windows)/),
+		linux: !!navigator.userAgent.match(/(Linux)/)
+	},
 	base_api_url: '/api',
 	plain_text_post: false,
 	prefs: {},
@@ -163,6 +168,7 @@ var app = {
 			var id = this.page_manager.current_page_id;
 			var page = this.page_manager.find(id);
 			if (page && page.onKeyDown) page.onKeyDown(event);
+			else if (app.onKeyDown) app.onKeyDown(event);
 		}
 		else if (app.onKeyDown) app.onKeyDown(event);
 	},

package/js/page.js

@@ -493,161 +493,6 @@ window.Page = class Page {
 		$(elem).closest('.form_row_range').find('input').val(value);
 	}
 	
-	getPaginatedTable() {
-		// get html for paginated table
-		// dual-calling convention: (resp, cols, data_type, callback) or (args)
-		var args = null;
-		if (arguments.length == 1) {
-			// custom args calling convention
-			args = arguments[0];
-			
-			// V2 API
-			if (!args.resp && args.rows && args.total) {
-				args.resp = {
-					rows: args.rows,
-					list: { length: args.total }
-				};
-			}
-		}
-		else {
-			// classic calling convention
-			args = {
-				resp: arguments[0],
-				cols: arguments[1],
-				data_type: arguments[2],
-				callback: arguments[3],
-				limit: this.args.limit,
-				offset: this.args.offset || 0
-			};
-		}
-		
-		var resp = args.resp;
-		var cols = args.cols;
-		var data_type = args.data_type;
-		var callback = args.callback;
-		var cpl = args.pagination_link || '';
-		var html = '';
-		
-		// pagination header
-		html += '<div class="pagination">';
-		html += '<table cellspacing="0" cellpadding="0" border="0" width="100%"><tr>';
-		
-		var results = {
-			limit: args.limit,
-			offset: args.offset || 0,
-			total: resp.list.length
-		};
-		
-		var num_pages = Math.floor( results.total / results.limit ) + 1;
-		if (results.total % results.limit == 0) num_pages--;
-		var current_page = Math.floor( results.offset / results.limit ) + 1;
-		
-		html += '<td align="left" width="33%">';
-		html += commify(results.total) + ' ' + pluralize(data_type, results.total) + ' found';
-		html += '</td>';
-		
-		html += '<td align="center" width="34%">';
-		if (num_pages > 1) html += 'Page ' + commify(current_page) + ' of ' + commify(num_pages);
-		else html += '&nbsp;';
-		html += '</td>';
-		
-		html += '<td align="right" width="33%">';
-		
-		if (num_pages > 1) {
-			// html += 'Page: ';
-			if (current_page > 1) {
-				if (cpl) {
-					html += '<span class="link" onClick="'+cpl+'('+Math.floor((current_page - 2) * results.limit)+')">&laquo; Prev</span>';
-				}
-				else {
-					html += '<a href="#' + this.ID + compose_query_string(merge_objects(this.args, {
-						offset: (current_page - 2) * results.limit
-					})) + '">&laquo; Prev</a>';
-				}
-			}
-			html += '&nbsp;&nbsp;&nbsp;';
-
-			var start_page = current_page - 4;
-			var end_page = current_page + 5;
-
-			if (start_page < 1) {
-				end_page += (1 - start_page);
-				start_page = 1;
-			}
-
-			if (end_page > num_pages) {
-				start_page -= (end_page - num_pages);
-				if (start_page < 1) start_page = 1;
-				end_page = num_pages;
-			}
-
-			for (var idx = start_page; idx <= end_page; idx++) {
-				if (idx == current_page) {
-					html += '<b>' + commify(idx) + '</b>';
-				}
-				else {
-					if (cpl) {
-						html += '<span class="link" onClick="'+cpl+'('+Math.floor((idx - 1) * results.limit)+')">' + commify(idx) + '</span>';
-					}
-					else {
-						html += '<a href="#' + this.ID + compose_query_string(merge_objects(this.args, {
-							offset: (idx - 1) * results.limit
-						})) + '">' + commify(idx) + '</a>';
-					}
-				}
-				html += '&nbsp;';
-			}
-
-			html += '&nbsp;&nbsp;';
-			if (current_page < num_pages) {
-				if (cpl) {
-					html += '<span class="link" onClick="'+cpl+'('+Math.floor((current_page + 0) * results.limit)+')">Next &raquo;</span>';
-				}
-				else {
-					html += '<a href="#' + this.ID + compose_query_string(merge_objects(this.args, {
-						offset: (current_page + 0) * results.limit
-					})) + '">Next &raquo;</a>';
-				}
-			}
-		} // more than one page
-		else {
-			html += 'Page 1 of 1';
-		}
-		html += '</td>';
-		html += '</tr></table>';
-		html += '</div>';
-		
-		html += '<div style="margin-top:5px; overflow-x:auto;">';
-		
-		var tattrs = args.attribs || {};
-		if (!tattrs.class) tattrs.class = 'data_table ellip';
-		if (!tattrs.width) tattrs.width = '100%';
-		html += '<table ' + compose_attribs(tattrs) + '>';
-		
-		html += '<tr><th>' + cols.join('</th><th>').replace(/\s+/g, '&nbsp;') + '</th></tr>';
-		
-		for (var idx = 0, len = resp.rows.length; idx < len; idx++) {
-			var row = resp.rows[idx];
-			var tds = callback(row, idx);
-			if (tds) {
-				html += '<tr' + (tds.className ? (' class="'+tds.className+'"') : '') + '>';
-				html += '<td>' + tds.join('</td><td>') + '</td>';
-				html += '</tr>';
-			}
-		} // foreach row
-		
-		if (!resp.rows.length) {
-			html += '<tr><td colspan="'+cols.length+'" align="center" style="padding-top:10px; padding-bottom:10px; font-weight:bold;">';
-			html += 'No '+pluralize(data_type)+' found.';
-			html += '</td></tr>';
-		}
-		
-		html += '</table>';
-		html += '</div>';
-		
-		return html;
-	}
-	
 	getPaginatedGrid() {
 		// get html for paginated grid
 		// multi-calling convention: (resp, cols, data_type, callback), or (args, callback), or (args)
@@ -717,12 +562,13 @@ window.Page = class Page {
 			// html += 'Page: ';
 			if (current_page > 1) {
 				if (cpl) {
-					html += '<span class="link" onClick="'+cpl+'('+Math.floor((current_page - 2) * results.limit)+')"><i class="mdi mdi-chevron-left"></i>&nbsp;Prev</span>';
+					var click = cpl + '(' + Math.floor((current_page - 2) * results.limit) + ')';
+					html += '<button class="link" ' + (args.primary ? 'id="btn_nav_prev"' : '') + ' onClick="' + click + '"><i class="mdi mdi-chevron-left"></i>&nbsp;Prev</button>';
 				}
 				else {
 					html += '<a href="#' + this.ID + compose_query_string(merge_objects(this.args, {
 						offset: (current_page - 2) * results.limit
-					})) + '">&laquo; Prev</a>';
+					})) + '" ' + (args.primary ? 'id="btn_nav_prev"' : '') + '><i class="mdi mdi-chevron-left"></i>&nbsp;Prev</a>';
 				}
 			}
 			html += '&nbsp;&nbsp;&nbsp;';
@@ -748,7 +594,7 @@ window.Page = class Page {
 				}
 				else {
 					if (cpl) {
-						html += '<span class="link" onClick="'+cpl+'('+Math.floor((idx - 1) * results.limit)+')">' + commify(idx) + '</span>';
+						html += '<button class="link" onClick="'+cpl+'('+Math.floor((idx - 1) * results.limit)+')">' + commify(idx) + '</button>';
 					}
 					else {
 						html += '<a href="#' + this.ID + compose_query_string(merge_objects(this.args, {
@@ -763,12 +609,13 @@ window.Page = class Page {
 			
 			if (current_page < num_pages) {
 				if (cpl) {
-					html += '<span class="link" onClick="'+cpl+'('+Math.floor((current_page + 0) * results.limit)+')">Next&nbsp;<i class="mdi mdi-chevron-right"></i></span>';
+					var click = cpl + '(' + Math.floor((current_page + 0) * results.limit) + ')';
+					html += '<button class="link" ' + (args.primary ? 'id="btn_nav_next"' : '') + ' onClick="' + click + '">Next&nbsp;<i class="mdi mdi-chevron-right"></i></button>';
 				}
 				else {
 					html += '<a href="#' + this.ID + compose_query_string(merge_objects(this.args, {
 						offset: (current_page + 0) * results.limit
-					})) + '">Next &raquo;</a>';
+					})) + '" ' + (args.primary ? 'id="btn_nav_next"' : '') + '>Next&nbsp;<i class="mdi mdi-chevron-right"></i></a>';
 				}
 			}
 		} // more than one page

package/js/select.js

@@ -358,7 +358,7 @@ var MultiSelect = {
 					}
 					else if (opt.selected) {
 						// item is selected
-						var html = '<i class="mdi mdi-close">&nbsp;</i>';
+						var html = '<button class="mdi mdi-close" aria-label="Remove Item: ' + encode_attrib_entities(opt.label) + '">&nbsp;</button>';
 						if (opt.getAttribute && opt.getAttribute('data-icon')) {
 							html += '<i class="mdi mdi-' + opt.getAttribute('data-icon') + '">&nbsp;</i>';
 						}
@@ -372,8 +372,10 @@ var MultiSelect = {
 				if (num_sel) $ms.append( '<div class="clear"></div>' );
 				else $ms.append( '<div class="placeholder">' + ($this.attr('placeholder') || 'Click to select...') + '</div>' );
 				
-				$ms.find('div.item > i.mdi-close').on('click', function(e) {
+				$ms.find('div.item > button.mdi-close').on('click keydown', function(e) {
 					// user clicked on the 'X' -- remove this item and redraw
+					if (e.key && (e.key != 'Enter') && (e.key != ' ')) return;
+					
 					var $item = $(this).parent();
 					var value = $item.data('value');
 					for (var idx = 0, len = self.options.length; idx < len; idx++) {
@@ -411,7 +413,7 @@ var MultiSelect = {
 			$this.on('redraw', redraw);
 			
 			// allow keyboard to open menu
-			$ms.on('keydown', function(event) {
+			$ms.on('keypress', function(event) {
 				if ((event.key == 'Enter') || (event.key == ' ')) {
 					$ms.click();
 					event.preventDefault();
@@ -776,7 +778,7 @@ var TextSelect = {
 				for (var idx = 0, len = self.options.length; idx < len; idx++) {
 					var opt = self.options[idx];
 					var $item = $('<div class="item"></div>').data('value', opt.value).html(
-						'<i class="mdi mdi-close">&nbsp;</i>' + opt.label
+						'<button class="mdi mdi-close" aria-label="Remove Item: ' + encode_attrib_entities(opt.label) + '">&nbsp;</button>' + opt.label
 					);
 					$ms.append( $item );
 					num_sel++;
@@ -785,8 +787,10 @@ var TextSelect = {
 				if (num_sel) $ms.append( '<div class="clear"></div>' );
 				else $ms.append( '<div class="placeholder">' + ($this.attr('placeholder') || 'Click to add...') + '</div>' );
 				
-				$ms.find('div.item > i').on('click', function(e) {
+				$ms.find('div.item > button.mdi').on('click keydown', function(e) {
 					// user clicked on the 'X' -- remove this item and redraw
+					if (e.key && (e.key != 'Enter') && (e.key != ' ')) return;
+					
 					var $item = $(this).parent();
 					var value = $item.data('value');
 					
@@ -809,7 +813,7 @@ var TextSelect = {
 			$this.on('redraw', redraw);
 			
 			// allow keyboard to open menu
-			$ms.on('keydown', function(event) {
+			$ms.on('keypress', function(event) {
 				if ((event.key == 'Enter') || (event.key == ' ')) {
 					$ms.click();
 					event.preventDefault();
@@ -946,3 +950,166 @@ var TextSelect = {
 	}
 	
 }; // TextSelect
+
+var KeySelect = {
+
+	init: function(sel) {
+		// initialize all key-selects based on selector
+		$(sel).each( function() {
+			var self = this;
+			var $this = $(this);
+			$this.css('display', 'none').attr({ 'aria-hidden': true, 'tabindex': '-1' });
+			
+			var $ms = $('<div class="multiselect text" role="button" tabindex="0"></div>');
+			$this.after( $ms );
+			
+			var redraw = function() {
+				// render contents of visible multiselect div
+				var num_sel = 0;
+				$ms.empty();
+				$ms.append('<div class="select_chevron mdi mdi-plus"></div>');
+				
+				for (var idx = 0, len = self.options.length; idx < len; idx++) {
+					var opt = self.options[idx];
+					var $item = $('<div class="item"></div>').data('value', opt.value).html(
+						'<button class="mdi mdi-close" aria-label="Remove Key: ' + encode_attrib_entities(opt.label) + '">&nbsp;</button>' + opt.label
+					);
+					$ms.append( $item );
+					num_sel++;
+				}
+				
+				if (num_sel) $ms.append( '<div class="clear"></div>' );
+				else $ms.append( '<div class="placeholder">' + ($this.attr('placeholder') || 'Click to add...') + '</div>' );
+				
+				$ms.find('div.item > button.mdi').on('click keydown', function(e) {
+					// user clicked on the 'X' -- remove this item and redraw
+					if (e.key && (e.key != 'Enter') && (e.key != ' ')) return;
+					
+					var $item = $(this).parent();
+					var value = $item.data('value');
+					
+					var idx = find_object_idx( self.options, { value: value } );
+					self.options.remove( idx );
+					
+					$this.trigger('change');
+					e.stopPropagation();
+					e.preventDefault();
+					return false;
+				});
+			}; // redraw
+			
+			redraw();
+			
+			// also trigger a redraw if the underlying hidden select changes
+			$this.on('change', redraw);
+			
+			// also expose redraw as a custom event that can be triggered
+			$this.on('redraw', redraw);
+			
+			// allow keyboard to open menu
+			$ms.on('keypress', function(event) {
+				if ((event.key == 'Enter') || (event.key == ' ')) {
+					$ms.click();
+					event.preventDefault();
+				}
+			} );
+			
+			$ms.on('click', function() {
+				// create popover dialog for adding new items
+				var html = '';
+				if ($ms.hasClass('disabled')) return;
+				
+				html += '<div class="sel_dialog_label">' + ($this.attr('title') || 'Add New Item') + '</div>';
+				html += '<div class="sel_dialog_search_container">';
+					html += '<input type="hidden" id="fe_sel_dialog_key" value=""/>';
+					html += '<input type="text" id="fe_sel_dialog_text" class="sel_dialog_search" style="border-radius:2px;" autocomplete="off" value=""/>';
+					html += '<div class="sel_dialog_search_icon"><i class="mdi mdi-' + ($this.attr('icon') || 'plus') + '"></i></div>';
+				html += '</div>';
+				
+				if ($this.attr('description')) {
+					html += '<div class="sel_dialog_caption">' + $this.attr('description') + '</div>';
+				}
+				
+				html += '<div class="sel_dialog_button_container">';
+					html += '<div class="button" id="btn_sel_dialog_cancel">Cancel</div>';
+					html += '<div class="button primary" id="btn_sel_dialog_add">' + ($this.attr('confirm') || 'Add Hot Key') + '</div>';
+				html += '</div>';
+				
+				Popover.attach( $ms, '<div style="padding:15px;">' + html + '</div>', $this.data('shrinkwrap') || false );
+				
+				var doAdd = function() {
+					app.clearError();
+					
+					var value = $('#fe_sel_dialog_key').val();
+					var label = $('#fe_sel_dialog_text').val();
+					
+					if (!value.length || find_object(self.options, { value: value })) {
+						Popover.detach();
+						return;
+					}
+					
+					// add new item
+					var opt = new Option( label, value );
+					opt.selected = true;
+					self.options[ self.options.length ] = opt;
+					
+					Popover.detach();
+					$this.trigger('change');
+				}; // doAdd
+				
+				$('#btn_sel_dialog_cancel').on('click', function() { Popover.detach(); });
+				$('#btn_sel_dialog_add').on('click', function() { doAdd(); });
+				
+				var $input = $('#fe_sel_dialog_text').focus().on('keydown', function(event) {
+					// capture keydown
+					if ((event.keyCode == 13) && this.value.length) {
+						event.preventDefault();
+						event.stopPropagation();
+						doAdd();
+					}
+					
+					var key_id = KeySelect.getKeyID(event);
+					if (!key_id) return;
+					
+					event.preventDefault();
+					event.stopPropagation();
+					
+					$('#fe_sel_dialog_key').val( key_id );
+					$('#fe_sel_dialog_text').val( KeySelect.getkeyLabel(key_id) );
+				});
+				
+				// highlight multiselect field under us
+				$ms.addClass('selected');
+				Popover.onDetach = function() { 
+					$ms.removeClass('selected').focus();
+				};
+			}); // click
+			
+		}); // forach elem
+	},
+	
+	getKeyID(event) {
+		// get get ID based on event
+		// ignore modifiers by themselves
+		if (event.key.match(/^(Shift|Control|Alt|Meta)$/)) return '';
+		
+		var parts = [];
+		if (event.shiftKey) parts.push('Shift');
+		if (event.ctrlKey) parts.push('Control');
+		if (event.altKey) parts.push('Alt');
+		if (event.metaKey) parts.push('Meta');
+		if (!parts.includes(event.code)) parts.push( event.code );
+		
+		return parts.join('+');
+	},
+	
+	getkeyLabel(key_id, glue = '+') {
+		// get formatted label based on key id
+		var os = app.os;
+		return key_id.split(/\+/).map( function(key) {
+			if (key == 'Meta') return os.mac ? 'Command' : (os.win ? 'Windows' : 'Super');
+			else return key.replace(/^(Key|Digit)/, '');
+		} ).join(glue);
+	}
+	
+}; // KeySelect

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "pixl-xyapp",
-	"version": "2.1.11",
-	"description": "A theme for xyOps.",
+	"version": "2.1.14",
+	"description": "Front-end web application and theme for xyOps.",
 	"author": "Joseph Huckaby <jhuckaby@pixlcore.com>",
 	"homepage": "https://github.com/pixlcore/pixl-xyapp",
 	"license": "BSD-3-Clause",