cavalion-vcl 1.1.80 → 1.1.82

package/CHANGELOG.md

@@ -1,3 +1,33 @@
+### `2024/07/07` - 1.1.82
+
+* **cavalion-blocks<>:**
+	* Emits container-ready
+* **prototypes/ui/forms/Home.tree**:
+	* Scrolls new tree nodes into view upon creation
+* **Component**:
+	* Adjusts Component.prototype.revertPropertyValue() so that it returns the value which has been set 
+* ** Control**:
+	* Introduces Control.prototype.syncClasses()
+	* Fixes issues with qsn and qsna 
+	* Introduces reflectActionEvent, which is overridden by Ace, in order to block content from overwriting value/text
+* **Tabs**:
+	* Adds support for deselecting tabs with alt-modifier
+* **List**:
+	* Improves event columnsChanged
+* **Console**
+	* Adds support for logging to console
+* **Array**
+	* fixes a bug in getAttributeNames(), I just don't understand why it surfaced all the sudden, feel like it should've bothered me way before
+
+### `2024/05/20` - 1.1.81
+
+* **Panel**:
+	- Refines zoom calculations to recursively retrieve zoom factor from parent elements 
+* **ListColumn**:
+	- Animates the automatic adjustment of column width
+* **data/Array**:
+	- Enhances/optimizes prototype.**splice()** in order to avoid "_RangeError: Maximum call stack size exceeded_"-exception while adding "100s of 1000s" of items
+
 ### `2024/03/28` - 1.1.80
 
 * **Component**: Enhances querying attributes: now supports use of regexp, eg: app.qs("*[attr=/value/]")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cavalion-vcl",
-  "version": "1.1.80",
+  "version": "1.1.82",
   "description": "Visual Component Library for vcl-comps",
   "main": "index.js",
   "scripts": {

package/src/Application.js

@@ -8,6 +8,8 @@ define(function(require) {
 	var CssRules = 			require("./CssRules");
 
 	var instances = [];
+	
+
 
 	return (Application = Application(require, {
 		inherits: Component,
@@ -26,7 +28,64 @@ define(function(require) {
 			writeStorage: function(key, value, callback, errback) {
 				var app = this.get();
 				return app.writeStorage.apply(app, arguments);
+			},
+			
+			updateFavicons(htmldoc, basePath, sizes) {
+			    const head = htmldoc.head;
+			    const faviconTypes = {
+			        "16x16": "image/png",
+			        "32x32": "image/png",
+			        "192x192": "image/png",
+			        "512x512": "image/png",
+			        "ico": "image/x-icon",
+			        "apple-touch-icon": "image/png"
+			    };
+			
+			    // Ensure the basePath is an absolute URL relative to the htmldoc's location
+			    const absolutePath = new URL(basePath, htmldoc.location).href;
+			
+			    // Keep track of existing links to remove those not needed anymore
+			    const existingLinks = Array.from(htmldoc.querySelectorAll('link[rel="icon"], link[rel="apple-touch-icon"], link[rel="manifest"]'));
+			
+			    // Create or update favicon links
+			    sizes.forEach(size => {
+			        let type = faviconTypes[size] || "image/png";
+			        let rel = size === "ico" ? "icon" : (size === "apple-touch-icon" ? "apple-touch-icon" : "icon");
+			        let href = `${absolutePath}/favicon${size === "ico" ? "" : `-${size}`}.${size === "ico" ? "ico" : "png"}`;
+			        let link = htmldoc.querySelector(`link[rel="${rel}"][sizes="${size}"]`);
+			
+			        if (!link) {
+			            link = htmldoc.createElement("link");
+			            link.rel = rel;
+			            if (size !== "ico" && size !== "apple-touch-icon") {
+			                link.sizes = size;
+			            }
+			            link.type = type;
+			            link.href = href;
+			            head.appendChild(link);
+			        } else {
+			            link.href = href;
+			        }
+			
+			        // Remove the link from the existingLinks array as it is being reused
+			        existingLinks.splice(existingLinks.indexOf(link), 1);
+			    });
+			
+			    // Create or update manifest link
+			    let manifestLink = htmldoc.querySelector('link[rel="manifest"]');
+			    if (!manifestLink) {
+			        manifestLink = htmldoc.createElement("link");
+			        manifestLink.rel = "manifest";
+			        manifestLink.href = `${absolutePath}/site.webmanifest`;
+			        head.appendChild(manifestLink);
+			    } else {
+			        manifestLink.href = `${absolutePath}/site.webmanifest`;
+			    }
+			
+			    // Remove all remaining existing links that were not reused
+			    existingLinks.forEach(link => head.removeChild(link));
 			}
+
 		},
 		prototype: {
 			_dispatcher: null,
@@ -252,7 +311,7 @@ define(function(require) {
                         document.querySelector("html head").appendChild(link);
                     }
                     link.setAttribute("href", value);
-                    this._icon = value;
+                    // Application.updateFavicons(document, this._icon = value, ["16x16", "32x32", "192x192", "512x512", "ico", "apple-touch-icon"]);
                 }
 			},
 			getCssRules: function() {

package/src/Component.js

@@ -487,18 +487,15 @@ define(function (require) {
             },
             revertPropertyValue: function (name) {
                 var property = this.defineProperties()[name];
-                property.set(this, this.getPropertyValue(name));
+                var value = this.getPropertyValue(name);
+                property.set(this, value);
+                return value;
             },
             getPropertyValue: function (name) {
                 return this['@properties'] ? this['@properties'][name] : undefined;
             },
             
             vars: function(key, value) {
-            	/*- 
-            		this.vars("control") 
-            		this.vars("resource")
-            		this.vars(["resource", true])
-            	*/
             	if(arguments.length === 0) { 
             		return this.getVars();
             	}
@@ -506,7 +503,6 @@ define(function (require) {
             		return this.setVar("" + key, value);
             	}
             	if(arguments.length === 3) {
-            		value = arguments[3];
             		return this.getVar.apply(this, arguments);
             	}
             	if(key instanceof Array) {
@@ -561,7 +557,9 @@ define(function (require) {
                 	if(fallback_to_owner === true && this._owner !== null) {
                     	r = this._owner.getVar(namePath, true, defaultValue);
                 	} else if(arguments.length === 3) {
-                		r = defaultValue;
+                		if((r = defaultValue) !== undefined) {
+                			this.setVar(namePath, defaultValue);
+                		}
                 	}
                 }
                 return r;

package/src/Control.js

@@ -552,6 +552,15 @@ define(function(require) {
 			},
 			finalizeNodes: function() {},
 
+			qsn: function() {
+				const node = this.nodeNeeded();
+				return node.qs.apply(node, arguments);
+			},
+			qsna: function() {
+				const node = this.nodeNeeded();
+				return node.qsa.apply(node, arguments);
+			},
+
 			createDragger: function() {
 				return new Dragger(this);
 			},
@@ -922,6 +931,28 @@ define(function(require) {
 				});
 				this.applyClasses();
 			},
+			syncClasses: function(classes, values) {
+				/*- The syncClasses method synchronizes the presence of specified CSS classes on an element based on corresponding boolean values or functions. 
+					**Parameters**:
+						- classes (Array of Strings): An array of class names to be synchronized.
+						- values (Array of Booleans/Functions): An array where each value determines whether the corresponding class should be present. If a function is provided, it is called with the element, class name, and current presence of the class, and should return a boolean.
+					**Returns** (Boolean): true if any class was added or removed; otherwise, false. */
+				let changed = false;
+				values.map((v, i) => {
+					const cl = classes[i];
+					const has = this.hasClass(cl);
+					const should = typeof v === "function" ? v(this, cl, has) : !!v;
+					
+					if(has && !should) {
+						this.removeClass(cl);
+						changed = true;
+					} else if(!has && should) {
+						this.addClass(cl);
+						changed = true;
+					}
+				});
+				return changed;
+			},
 			hasState: function(state) {
 			/** @param state {String} ControlState * @returns
 			 */
@@ -1653,11 +1684,7 @@ this._updateCalls = this._updateCalls || 0; this._updateCalls++;
 					if(this._action !== null) {
 						this._actionListeners = this._action.on({
 							"change"(evt) { 
-								if(me._node) {
-									if(evt && evt.what.includes && evt.what.includes("content")) {
-										me._node.innerHTML = me.getInnerHtml();
-									}
-								}
+								me.reflectActionEvent(evt);
 								me.update(); },
 							"destroy"() { me.setAction(null); }
 						});
@@ -1668,6 +1695,13 @@ this._updateCalls = this._updateCalls || 0; this._updateCalls++;
 					}
 				}
 			},
+			reflectActionEvent(evt) {
+				if(this._node) {
+					if(evt && evt.what.includes && evt.what.includes("content")) {
+						this._node.innerHTML = this.getInnerHtml();
+					}
+				}
+			},
 
 
 // PROPERTIES

package/src/Factory.js

@@ -157,6 +157,7 @@ define(function(require) {
                 return this.doLoad(source, success, failure);
 			},
 			doLoad: function(source, success, failure) {
+this._source = source;
 				if(typeof failure === "function") {
 					try {
 						return this.doLoad_(source, success, failure);

package/src/data/Array.js

@@ -113,7 +113,7 @@ define(function(require) {
 							}
 						});
 					}
-				});
+				}, this);
 
 				return keys;
 			},
@@ -267,7 +267,37 @@ define(function(require) {
 			splice: function() {
 				this.assertArray();
 				try {
-					return window.Array.prototype.splice.apply(this._array, arguments);
+					// return window.Array.prototype.splice.apply(this._array, 
+					// 	this._array.length === 0 ?
+					// 		[0, 0].concat(js.copy_args(arguments).slice(2)) :
+					// 		arguments);
+
+				    const MAX_SEGMENT_SIZE = 15000;
+				
+				    // Voorbereiding van argumenten en controleer de conditie
+				    let args;
+				    if (this._array.length === 0) {
+				        args = [0, 0, ...js.copy_args(arguments).slice(2)];
+				    } else {
+				        args = window.Array.prototype.slice.call(arguments);
+				    }
+				
+				    // Het eerste deel van de argumenten dat niet de daadwerkelijke elementen van res bevat
+				    const initialArgs = args.slice(0, 2);
+				    // De elementen van res die toegevoegd moeten worden
+				    const elementsToAdd = args.slice(2);
+				
+				    // Voer de splice in segmenten uit als het aantal elementen groter is dan MAX_SEGMENT_SIZE
+				    while (elementsToAdd.length > 0) {
+				        // Bepaal het huidige segment
+				        const currentSegment = elementsToAdd.splice(0, MAX_SEGMENT_SIZE);
+				        // Voer splice uit voor het huidige segment
+				        window.Array.prototype.splice.apply(this._array, [...initialArgs, ...currentSegment]);
+				        // Update initialArgs voor volgende iteraties: stel startIndex bij en reset deleteCount naar 0
+				        initialArgs[0] += MAX_SEGMENT_SIZE; // Verplaats de startindex
+				        initialArgs[1] = 0; // Geen elementen te verwijderen in volgende segmenten
+				    }
+
 				} finally {
 					this.arrayChanged();
 				}

package/src/prototypes/App.console.js

@@ -120,6 +120,7 @@ keyup:MetaCtrl+192`,
     		}
     	}
     }],
+    
     [["ui/forms/util/Console"], "console", {
     	align: "bottom",
 	    height: 250,

package/src/prototypes/App.v1.js

@@ -64,7 +64,7 @@ var FormContainer = require("vcl/ui/FormContainer");
 				'vertical-align': "top",
 				'&.disabled': "color:gray;",
 				'&:not(:active)': "margin-bottom:4px;",
-				'&:active:active:active': "margin-bottom:0;margin-top:2px;border:2px solid rgb(57,121,217); padding-left:8px; padding-right:6px; background:-webkit-linear-gradient(top, rgb(255, 255, 255) 10%, rgb(227, 227, 227) 100%);"
+				'&:active': "margin-bottom:0;margin-top:2px;border:2px solid rgb(57,121,217); padding-left:8px; padding-right:6px; background:-webkit-linear-gradient(top, rgb(255, 255, 255) 10%, rgb(227, 227, 227) 100%);"
 			}
     	}
     }, [

package/src/prototypes/blocks/App.js

@@ -0,0 +1,5 @@
+"use js";
+
+console.log("using vcl-prototypes:blocks/App");
+
+[["cavalion-blocks<App>"]];

package/src/prototypes/cavalion-blocks.js

@@ -9,17 +9,17 @@
 	- vars.onLoad
 	
 */
-
 ["vcl/ui/Panel", {
 	align: "client",
 	onNodeCreated() {
 		var uri = this.vars("uri") || js.sf("%s<%s>", this.getSpecializer(), this.vars("specializer") || this._name);
-		var onLoad = this.vars("onLoad");
 		require("B").instantiate(uri, { owner: this }).then(_ => {
+				const onLoad = this.vars("onLoad");
 				_.setParent(this); // TODO why can't this be in property decl?
 				if(onLoad) {
 					onLoad.apply(this, [_]);
 				}
+				this.emit("container-ready", [_]);
 			});
 	}
 }];

package/src/prototypes/ui/forms/Home.js

@@ -18,7 +18,7 @@ var Node = require("vcl/ui/Node");
 	}
 }, [
     [("#menubar"), { visible: false }],
-    [("#client"), { css: "border-left: none;"}],
+    [("#client"), { css: "border-left: none;" }],
 	[("#left"), {}, [
 		[("vcl/ui/Tree"), "tree", {
 	    	onSelectionChange: function(selection) {

package/src/prototypes/ui/forms/Home.tabs.js

@@ -0,0 +1,9 @@
+"use js";
+
+["", {}, [
+    [("#description"), {
+    	content: "Home.tabs: Navigeer met behulp van de UI hieronder naar de gewenste sectie."
+    }],
+    
+    ["vcl/ui/Tabs", "tabs", { classes: "white-blue" }]
+]];

package/src/prototypes/ui/forms/Home.tree.js

@@ -379,16 +379,11 @@ var Handlers = {
 
 			if(message.activate !== false) {
 				scope.tree.setSelection([node]);
+				node.update(() => node.scrollIntoView());
 			} else if(message.lazyLoad !== true) {
 				container.forceLoad();
 			}
 			
-			// parent && parent.setTimeout("update", () => {
-			// 	// Hmprf, what is going on here?
-			// 	parent._parent.updateChildren(true, true);
-			// 	parent._parent.updateChildren(true, true);
-			// }, 500);
-
 			return true;
 		}
 	}
@@ -397,56 +392,56 @@ var Handlers = {
     	onDispatchChildEvent: Handlers["client.onDispatchChildEvent"] 
     }],
     [("#tree"), { 
-    	css: {
-    	    "margin": "8px",
-    		"padding-left": "16px",
-    		".{./Node}": {
-		        "&.loading": {
-		        	">.selection": {
-			        	"background-image": "url(/shared/vcl/images/loading.gif)",
-			        	"background-repeat": "no-repeat",
-			        	"background-position": "10px 5px",
-		        		// "opacity": "0.5"
-		        	},
-		        	"&.selected >.text": {
-		        		"font-weight": "normal"
-		        	}
-		        },
-    			">.text": {
-                	"&:focus": {
-                		outline: "none"
-                	},
-    				// "padding-top": "2px"
-    			},
-    			">.selection": {
-    				//height: "20px"
-    				color: "red"
-    			},
-    			"&.disabled": {
-    		        cursor: "default",
-    				color: "silver"
-    			},
-    			"&.selected": {
-    				">.selection": {
-//    	    			    "background-color": "#f0f0f0"
-//    	    			    "background-color": "silver"
-    				},
-    				">.icon": {
-//        					color: "inherit"
-    				},
-                    ">.text": {
-	    				"font-weight": "bold",
-//    	    			    "background-color": "#f0f0f0",
-//    	    			    color: "inherit"
-    					"&:hover": {
-    						">.close": {
-            					visibility: "inherit",
-    						}
-    					}
-                    }
-    			}
-			}
-    	},
+//     	css: {
+//     	    "margin": "8px",
+//     		"padding-left": "16px",
+//     		".{./Node}": {
+// 		        "&.loading": {
+// 		        	">.selection": {
+// 			        	"background-image": "url(/shared/vcl/images/loading.gif)",
+// 			        	"background-repeat": "no-repeat",
+// 			        	"background-position": "10px 5px",
+// 		        		// "opacity": "0.5"
+// 		        	},
+// 		        	"&.selected >.text": {
+// 		        		"font-weight": "normal"
+// 		        	}
+// 		        },
+//     			">.text": {
+//                 	"&:focus": {
+//                 		outline: "none"
+//                 	},
+//     				// "padding-top": "2px"
+//     			},
+//     			">.selection": {
+//     				//height: "20px"
+//     				color: "red"
+//     			},
+//     			"&.disabled": {
+//     		        cursor: "default",
+//     				color: "silver"
+//     			},
+//     			"&.selected": {
+//     				">.selection": {
+// //    	    			    "background-color": "#f0f0f0"
+// //    	    			    "background-color": "silver"
+//     				},
+//     				">.icon": {
+// //        					color: "inherit"
+//     				},
+//                     ">.text": {
+// 	    				"font-weight": "bold",
+// //    	    			    "background-color": "#f0f0f0",
+// //    	    			    color: "inherit"
+//     					"&:hover": {
+//     						">.close": {
+//             					visibility: "inherit",
+//     						}
+//     					}
+//                     }
+//     			}
+// 			}
+//     	},
     	onNodesNeeded: Handlers["tree.onNodesNeeded"],
     	onSelectionChange: Handlers["tree.onSelectionChange"]
     }]

package/src/prototypes/ui/forms/Portal.js

@@ -16,57 +16,57 @@ var Component = require("vcl/Component");
 [["ui/Form"], {
     css: {
     	// TODO refactor to higher level (one inmem-css-decl please)
-		"#tabs": {
-	        "padding-top": "2px",
-	        "margin-left": "32px",
-	        ".{./Tab}": {
-	            display: "inline-block",
-	            border: "1px solid transparent",
-	            "border-top-left-radius": "3px",
-	            "border-top-right-radius": "3px",
-	            "border-bottom": "none",
-	            padding: "3px 8px 2px 8px",
-	            // "margin-left": "3px",
-	            // "margin-right": "3px",
-	            cursor: "pointer",
-	            "background-color": "#f0f0f0",
-	            "border-color": "gray",
-	            color: "gray",
-	            "vertical-align": "bottom",
-	            "&:hover": {
-	            	// "padding-top": "4px",
-	            	color: "black",
-	                padding: "3px 8px 3px 8px",
-	            	"margin-top": "0"
-	            },
-	            "&.selected": {
-	            	// "padding-top": "4px",
-	                "background-color": "#fcfcfc",
-	                "border-color": "gray",
-	            	"margin-top": "0",
-	                padding: "3px 8px 3px 8px",
-	                color: "black"
-	            },
-	            "&.disabled": {
-	                cursor: "default",
-	                color: "silver"
-	            },
-	            ".hidden": {
-	                display: "none"
-	            }
-	        },
-	        "&.bottom": {
-	            "background-color": "#dfdfdf",
-	            "border-top": "1px solid #a3a3a3",
-	            "padding-top": "0px",
-	            "padding-bottom": "1px",
-	            ".{./Tab}": {
-	                border: "1px solid transparent",
-	                "border-top": "none"
-	            }
-	        }
-		},
 		"#top": {
+			"#tabs": {
+		        "padding-top": "2px",
+		        "margin-left": "32px",
+		        ".{./Tab}": {
+		            display: "inline-block",
+		            border: "1px solid transparent",
+		            "border-top-left-radius": "3px",
+		            "border-top-right-radius": "3px",
+		            "border-bottom": "none",
+		            padding: "3px 8px 2px 8px",
+		            // "margin-left": "3px",
+		            // "margin-right": "3px",
+		            cursor: "pointer",
+		            "background-color": "#f0f0f0",
+		            "border-color": "gray",
+		            color: "gray",
+		            "vertical-align": "bottom",
+		            "&:hover": {
+		            	// "padding-top": "4px",
+		            	color: "black",
+		                // padding: "3px 8px 3px 8px",
+		            	// "margin-top": "0"
+		            },
+		            "&.selected": {
+		            	// "padding-top": "4px",
+		                "background-color": "#fcfcfc",
+		                "border-color": "gray",
+		            	"margin-top": "0",
+		                padding: "3px 8px 3px 8px",
+		                color: "black"
+		            },
+		            "&.disabled": {
+		                cursor: "default",
+		                color: "silver"
+		            },
+		            ".hidden": {
+		                display: "none"
+		            }
+		        },
+		        "&.bottom": {
+		            "background-color": "#dfdfdf",
+		            "border-top": "1px solid #a3a3a3",
+		            "padding-top": "0px",
+		            "padding-bottom": "1px",
+		            ".{./Tab}": {
+		                border: "1px solid transparent",
+		                "border-top": "none"
+		            }
+		        }
+			},
 			// "background-color": "rgba(232, 240, 254)",
 			"padding-bottom": "8px",
 	        "padding-top": "8px",

package/src/prototypes/ui/forms/View.js

@@ -1,102 +1,6 @@
 "use js";
 
-[["ui/Form"], {
-    css: {
-    	// TODO refactor to be 'singleton' (iykwim)
-    	'#menubar#menubar#menubar': {
-		    '&.loading': "background: url(/shared/vcl/images/loading.gif) no-repeat 50% 50%;",
-		    '&.nested-in-tabs': {
-		    	'': "padding: 2px; border: none;",
-		    	'.{Button}': "padding:2px 5px;"
-		    },
-	    	'padding': "4px",
-	    	'overflow': "hidden",
-			'border-bottom': "1px solid #f0f0f0",
-			'.disabled.disabled.disabled.disabled.disabled': "color:silver;cursor:default;",
-			'.right': "float: right;",
-			'.{Button}': {
-				outline: "none",
-				'&:not(.right)': "margin-right: 8px;",
-				'background': "none",
-				'background-color': "transparent",
-				'border': "none",
-				'text-shadow': "none",
-				'&.link': {
-					'color': "blue",
-					'text-decoration': "underline"
-				},
-				'box-shadow': "none",
-				cursor: "pointer",
-				padding: "2px 4px 2px 4px",
-				'&.disabled': {
-					color: "silver",
-					cursor: "default"
-				},
-				'&:hover': "background-color: #f0f0f0;",
-				'&.pressed': "background-color: #f0f0f0;color:rgb(56, 121, 217);",
-				'&:not(.disabled):active': {
-				    color: "rgb(56, 121, 217)",
-				    'background-color': "#f0f0f0"
-				},
-				'&.selected': "background-color: rgb(56, 121, 217); color: white;"
-			},
-			'.{Tab}': {
-				cursor: "pointer",
-				padding: "2px 4px 2px 4px",
-				display: "inline-block", 
-				'margin-right': "8px",
-				'border-radius': "3px",
-				'&.selected': "background-color: rgb(56, 121, 217); color: white;",
-				'&:not(.disabled):active': {
-				    color: "rgb(56, 121, 217)",
-				    'background-color': "#f0f0f0"
-				}
-			},
-		    
-			'.submit.submit.submit': {
-				'&:not(:active)': "background-color:limegreen;color:white;", 
-				'&:active': "color:green;" 
-			},
-			'.cancel.cancel.cancel': {
-				'&:not(:active)': "background-color:red;color:#f0f0f0;",
-				'&:active': "color:red;" 
-			}
-    	},
-    	'#left': {
-        	'#left_content': {
-            	'padding': "8px",
-            	'padding-left': "16px",
-            	'min-height': "96px",
-        	},
-			'#menubar': {
-				'position': "static",
-				'padding': "8px 0 10px 0",
-				'.{./Button}': {
-					'cursor': "pointer",
-					'outline': "none",
-					'padding': "2px", 
-					'background': "none",
-					'border': "none",
-					'background-color': "transparent",
-					'color': "blue",
-					'text-shadow': "none",
-					'text-decoration': "underline",
-					'box-shadow': "none",
-					'margin-top': "2px",
-					'&.disabled': {
-						'color': "silver",
-						'cursor': "default"
-					},
-					'&:not(.disabled):active': {
-					    'color': "rgb(56, 121, 217)",
-					    'background-color': "#f0f0f0"
-					}
-				}
-			}
-    	},
-    	'#description': "color: gray;"
-    }
-}, [
+[["ui/Form"], {}, [
     ["vcl/ui/Panel", ("left"), { align: "left", width: 325 }, [
         ["vcl/ui/Panel", ("left_content"), { align: "top", autoSize: "height" }, [
 	        ["vcl/ui/Element", ("description"), {

package/src/prototypes/ui/forms/util/Console.js

@@ -80,8 +80,8 @@ var cl = console.log;
 
         var down;
         // FIXME overriding dispatcher, Application.prototype.dispatchEvent(...)
-        this.app()._dispatcher.override({
-            dispatch: function (component, name, evt) {
+    	this.app()._dispatcher.override({
+        	dispatch: function (component, name, evt) {
                 if(evt.keyCode === 27 /* Escape */) {
                     if (sizer._control !== null) {
                         if (name === "keydown" && evt.ctrlKey === false) {

package/src/ui/Ace.js

@@ -133,7 +133,8 @@ function(require, Ace, ace, DefaultCommands, Panel, Type, Text) {
 			setMode: function (mode) {
 				this.getEditor().session.setMode("ace/mode/" + mode);
 			},
-			
+
+			reflectActionEvent(evt) {},
 			getDiffs: function(originalText) {
 				var dmp = new Text.dmp();
 				var editor = this.getEditor();

package/src/ui/Console.js

@@ -15,7 +15,8 @@ define(function(require) {
 			'collapsed': "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAANH2lDQ1BJQ0MgUHJvZmlsZQAAeJyV13k0lH0bB/DrnhnGMsYYO2Fkl31fsm+JsmZLSXaGmZAkZUnKmiUULSjaFC0kKlrIEpJCQlHZQ8iSZd4/5Kn3Oed5n/P+/rru65z7vn/3fc7n+zsXACuPO5VKRgFAYFBosK2ZIcnJ2YWE7QIMsAABVEDL3SOEamBtbQn/uOY7AQEA6JB1p1LJbC+zMn7mODv4m9i+aE3yl/rn+wAAAB/s5OwCgMgAAIfPeq0PABz712t7AOA4FEoNBUB8AYDDw9fdEwCJBACZYHtbIwDkGgDgfdbrSgDA71+vGwAAH+bhEwqAdAPQE4M8/YIAsBMA9LqeXiEeAHgZAPD0DPEIBMCnAYBcYCDFEwBfCwCSHtTgUAD8CADIOjm7kNa3vDsRQIUXgMHid+9QFkB5AYDkjt89kQcAXO4AhSm/e7O2gAAAwtUW4q2sBAAACM4QgK6fRpsVB8BmAKym02jLhTTa6mUAdC9ALdnjYHDYr/+FIC0A/3a9/s2/FhoBQAEgokgxKgIdiYmkO0YfjY1lOM5ozFjHdJL5FC6BJRlfQfBlSyems2dwnOHM4srizuGp46Pw523KE7gg2EA6KFy4+bJIm9gR8WKJdqlj0je3dMrGyt2S71E8qXRX+aNqslqF+oBmqlaV9pBOpu4TvTGDbMNnRpMmuab1ZjPml7Y3WczvKNzZavXa+rVNu+2K/Y1d7xw6Hbucul0wu++49u7p29vv9nHfp/04j4eeX7y+eg/5DPuO+I0GcJKfBn4LmqRMUacPfA+eCZkLnTv4I2z+0EL44uGliJ9HViJXjq5GSUW/i0WOo+LQJzDxdCfpT2ETGBIZk5iSmVNwqSyn8Wms6YQMtkziGfYsjmzOHK6z3Od4cnnz+M7zX9h0UeCSYL5QAalQ+PLmKyJFosViVyWuSVyXvCF1U/rmeAn5lsxt2VL5MoU7incV7yndVylXrVCrmH8QVqn+UKNKq1r70dbHW5/oPFmriarVe6r/zOC54QujOkxdXL3JS9MGs0bzJvNmpuakVxYtlq072/Btp19bt9u8se0gdmS8tXtn37mri6srp9vxvVOPywe+D3m9rn2u/Xs+Cn689MltYN+g8GDh5/1fPL56DokNFQ97j/iM+o5Jjd0Y958I+EaelJ28PRU0TflOnVGcuTsbPBfyI3Redb5iIWwxfOnwz8PLWsvVK0dWI9d01p7QaACICAqPmkY3Y27SZdJHYn0Y7BmNmFSYJXASLDx4blYeAg8bJ1GcXZJDg9OSay93CE8qbylfM/+oALugmpAP6azwSxFEVEfsgPgdiSkpSWnylmpZtJyBfLrCgJKUcrxKl5q0OlWjTotbO3zrK10uPYr+M0NRoyPG7aaCZuHbHpsvWShaeu3I2tlujbcxsw23K7J/68DkqO90wPmCS/3uqT1Ce63cIvYVutftH/Xk9NLzdvI55pvvV+vfF7AUyB60hWJM9T0QGZwWUhhafrAh7MOhsfD5CPQRtkjSUZljqlH60RYxVrG7j++L8zpBjg89GXwqOiE68XhSQnJGSlJq7ulzaTnp6RnnMzPOZGedzb6Wc/Xs7XPXcm/mlZ5/dOHRxbpLr/LbCzoKOy53XPlQ9KV4+Orgta/Xp258vzlVMnlr5vZU6XjZxJ3huwP3Bu/3lLdXND6orXzwsLTqfHXGo+jHgU9211jUbn0q/Yz4bOn5pxdNdffrM18GN9g1qjXxN9Gae17db0lsdWkTaRt6fa/96BuTDnxH39v8d/6dyp2rXS3dme/39Ej1zH6o6o3ts+jn6O//eP1TyID2IGaw6fOZL3u/SnydGKoajhnZPso52jd2ZZw8oTqx9q1xMmNq97To9MT3ezORs2ZzxLnuH0XzlAXNRfTiy6X0n7uXRZa/rVSsRq+Z07hoNAA4joSjItDa6CrMUTo9uhr6GOwJBlOGOsZ4ppPMibjtuGaWFHwKayrBitDGlkbMYM/kyOS053zLlc2dzXOWN5cvjz9v03kBV4E+wUtC+aQC4YLNBSKXRa+IFYkXS1yVvCZ1XdpPemzLDZkS2Vtyt+VLFcoU7yjdVb6ncl+1Qq1CvUIjXGNRs0qrSrt66yOdx7rHdNf0avRrDZ4aPjN6bhxngjGpM603e7mtwbxxe5NFkiXO8tWOlp2tVm3WaTYEm3bbN3Yd9m93dTpkO3I5djl1O7936dmd58rv2runb+9Ht0/7PrkX7BfeP+jx2fOL11fvYh/x9QTxHwu4SZYhT/xXisz+lSKVhzUOL0X8PLIcuXJ09dhaFC0GYlF/JQn2FDaBIaExcXsSczIuBZfKcpo1jZDO9leWcOVwn+X5lSWb/sySwsHLHldEikSLxa+Kb6RJicwt2dtyf2SJcrlKheoD9Ur1hxpVmtXaj7Qfb32iW6P7R46Y1Ju+NG0wa9zWZN5s8SqsdXPbztfW7dZvbDqOvpPudOhy7I7tkf/g0hvfr/wxYUB1MPmL55D2cPqo37j/N/IU5XvinMv86aWkVVsaDWD97AMAoFcDyN4C4JALYFcIEL8FQMINgOsagDULgL0moOgEAaVDBWS7zsb5AQgQQADkwBCcIQTSoAwWERJigYQj15BWZBjFijJDxaAeo1bQOugYdD16BSOMccYUY37QmdKdoCulm6I3oy+gH8JyYl2xjxmwDJoMcQzjjFqMFMZaJlmmaKZKZjxzDPN7HAcuCDfCYsJynGUA745/xopm9WadINgQsgmrbAlsM0QtYhG7OnsR+xSHG8cCpx9nBdcWrpfc3jxYnhu8YryHeOf4LvCb8c9uyhcQFYgURATLhfxJwqQe4TObN2+OFmEVaRNNF9slzic+KHFT0kjyupShNJv0wJZ7MidlXeWU5XHywwovFAuVYpU9VcxUZdTY1VbUhzRyNPGatVpl2gVbz+ic0o3SO6R/wIBs6Gfka+xrEmAaZBa67Yh53PbTFnmW13dU7my06rX+bou1E7TX2GXnQHVMdbrt/Npl1pVnj+5eb7e0fdXuIx7cnmZeh71L/Hj8rQMSyXVBKIoBNebA8xD6UIuDGeGihykRjyKZjrocK4mixdjHoU64xj84xZ5wILE9JSt1Kc0tvT5T/kxuTsjZz7l2eXUXb+eLFVy4zF1MuJp6HX/j9K2cUoGyK3dly40r2ivdH35/zP2kpNbweWgda31Jw/bmxBbZ1vbXYR3176hd/N0NveJ93R8TB/S+lAx5jgiN9nxzmOKa7prJnXNbmFgqX46i8dBoAIACJuAGKdADJzgIWVAJ/QgWUUDckFSkBplFSaPcULmot2hW9A50MroFw4KxwmRhPtCR6PzoyugW6Y3oT9O/x4phD2KfMxAZPBkqGZkZXRlvM2GY9jLdZ2Zi9mCuwXHiqLgWFmmWFJYJvCW+lJWFlcLaSdAnXGHDs4WxfSCaEu+wk9gz2Nc4Qji+cfpzjnGRuWa4Q7nneSJ4Ed5kPj6+G/ya/PWbHDaNCkQL8gpWCNkIjZHihcWFGzYHiXCLPBH1EMOJPRUPkhCSeCOZIGUotSpdvSVSRkdmQbZG7pS8vYKwwpRijVK6sr+Ksaqg6rLaO/WHGhc0Y7R8tB236ujI6wrrEfUxBmiDGcPvRlPG4yZDprNm49t+bEdZcFhy71DcqWtlZW1rE2B72C7P/u6uVw4fHFecOVzkd+90PbDn3N46t2F3xv0KHr6euV413tO+Un5e/jkB7wL5g3ZR8qgjwZIhYaGNYQKHQsKbIkSOpEaOHXOOaohRiy2KI55IPUk8lZ3Ik5SXopramuaV/jMzJUs9++vZi7n+53ddlMqnK5i4/Kyo/Oq56/E3PW65lpre0binUi73QPahZLXYY8kahad6z7fV2bwkNx5oTm/Jb3vU3t9B6xTq1unx7E3qr/o08Zn3q+Fw9Oi18S+TfNPeMxfnhhYkl4KWK9YQGg0A6IEAAmAIzpAGZfBmw/6G+3X1GFaMM+YHnSld7i/va1hXBiGGOIZxRnvGWiZZpvPMeOYY5gVcEG6ExRPvjv/M6s06QQghrLIlELmIRezq7E0cbhwLnGl/md7JO/fLs7UgIlj+y7LNuuRfjsOkDP80/FvwL79vNGu1yn7b/S33n93+L7U+A348/tZ/VxvW83e3sTf+lJus9FtuNv2G3QuaG3qvZG74LSFuCL5XuWG4+vi64qc9G44bR5sTX71oyW5tfx32RqCj/h21s6wrvruhJ6xXvC+g3/hj4oDe4MnP+7+UfJ0f6hgRGg0YMx+XnMB+c5gsnoqf9vm+bUZ6lnl2cu71j3vz2Qv2CxOLcUuGPyV+Di1HrfCsXFxlW41bXVi7Qkui0QDW5yUAAGAyopApwSRLI+N/Ge7+3xVIPrjxDgQAcF5Bu+wAgAgAm8AIKEAGCgQDCSzBCIwB1mc1AAB6AsB5RwCAmsUj0X9/bqhXeCgAgBGFejjYz8c3lGRApZK9SEaUQOrBUK9gGZJ5kIecDElJQUEdAOA/QDcDSMfdcGMAAACFSURBVBiVdY4xCkIxEERn4y83bYLn8AzW3kpPIYKlljZ2HsJOECx3U6WICEGyVkIQM93AG94ghLAEMGGQGTNvmXnlvb+XUgSA9QDFGC9dFwBrVb2OgG9uRLQRkYcbqOettQV+z5nZyzl3NLNDSunZA28Ap1rrPuec+9FERGcz26lq+uf6AJ0/M9pbbH4+AAAAAElFTkSuQmCC",
 			'expanded':  "data:image/png;base64,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"
 		};
-		
+
+	var MAX_HISTORY_LENGTH = 1024;		
 	var Console = {
 		inherits: Panel,
 		prototype: {
@@ -252,10 +253,11 @@ define(function(require) {
 						} else {
 							sel = this._nodes.console.qsa(":scope > .node").map(n => n._line._value);
 						}
-						console.log(sel);
+						if(evt.shiftKey === true) {
+							console.log(sel);
+						}
 						this.print(sel);
-					}
-					if(evt.keyCode === 76) {
+					} else if(evt.keyCode === 76) {
 						if(evt.shiftKey === true) {
 							
 						} else {
@@ -275,9 +277,9 @@ define(function(require) {
 					if(!this._Q) {
 						const v = this._nodes.input.value;
 						
-						this._Q = this._history.filter(s => !v || s.startsWith(v));
-						this._Q = this._Q.concat(this._history.filter(s => s.includes(v)));
-						
+						this._Q = this._history.filter((s, i, a) => (!i || a[i - 1] !== s) && (!v || s.startsWith(v)));
+						this._Q = this._Q.concat(this._history.filter(s => s.includes(v))).reverse().filter(Array.fn.unique).reverse();
+
 						if(this._Q.length === 0) {
 							this._Q = [v];
 						}
@@ -371,8 +373,8 @@ define(function(require) {
 		            var history = JSON.parse(localStorage.getItem(key)) || [];
 		            if (history[history.length - 1] !== text) {
 		                history.push(text);
-		                if (history.length > 100) {
-		                    history.splice(0, history.length - 100);
+		                if (history.length > MAX_HISTORY_LENGTH) {
+		                    history.splice(0, history.length - MAX_HISTORY_LENGTH);
 		                }
 		                localStorage.setItem(key, JSON.stringify(history));
 		            }
@@ -395,8 +397,8 @@ define(function(require) {
 				var history = this._history || [];
 	            if (history[history.length - 1] !== text) {
 	                history.push(text);
-	                if (history.length > 100) {
-	                    history.splice(0, history.length - 100);
+	                if (history.length > MAX_HISTORY_LENGTH) {
+	                    history.splice(0, history.length - MAX_HISTORY_LENGTH);
 	                }
 	                this.writeStorage("history", history);
 	            }

package/src/ui/List.js

@@ -19,7 +19,7 @@ define(function(require) {
 	// require("stylesheet!./List.less");
 	
 	// TODO centralize/utilize :-p
-	const capitalize = (s) => String.format("%s%s", s.charAt(0).toUpperCase(),
+	const capitalize = (s) => js.sf("%s%s", s.charAt(0).toUpperCase(),
 			s.substring(1));
 			
 	const workaroundColumnAlignment = (list) => {
@@ -49,25 +49,25 @@ define(function(require) {
 				this._selection = [];
 			},
 
-			"@css": {
+			'@css': {
 				overflow: "hidden",
-				"overflow-x": "auto",
-				"&.busy": {
-					"background": "url(/shared/vcl/images/loading.gif) no-repeat 4px 32px",
-					".body": {
+				'overflow-x': "auto",
+				'&.busy': {
+					'background': "url(/shared/vcl/images/loading.gif) no-repeat 4px 32px",
+					'.body': {
 						visibility: "hidden"
 					}
 				},
-				".body": {
+				'.body': {
 					overflow: "auto",
 					position: "absolute",
 					left: "0",
 					top: "0px",
 					right: "0",
 					bottom: "0",
-					"line-height": "13px",
-//					"background-color": "white",
-					".scroll": {
+					'line-height': "13px",
+					// 'background-color': "white",
+					'.scroll': {
 						position: "absolute",
 						width: "1px",
 						height: "1px",
@@ -75,7 +75,9 @@ define(function(require) {
 						'z-index': 2
 					}
 				},
-				"&.header-invisible .{./ListHeader}": "height:0;"
+				'&.header-invisible .{./ListHeader}': "height:0;",
+				'.{./ListColumn}': "transition: width 400ms, max-width 400ms",
+				'.ListCell': "transition: width 400ms, max-width 400ms"
 			},
 			MAX_AUTOCOLUMNS: 50,
 
@@ -201,8 +203,8 @@ define(function(require) {
 					var bw = thisObj.getBodyWidth();
 					var bh = thisObj.getBodyHeight();
 					var s = thisObj._nodes.scroll.style;
-					s.left = String.format("%dpx", bw);
-					s.top = String.format("%dpx", bh + rect.top);
+					s.left = js.sf("%dpx", bw);
+					s.top = js.sf("%dpx", bh + rect.top);
 
 					thisObj._body.setBounds(rect.left, rect.top - 3, undefined, undefined, bw, bh);
 				}];
@@ -360,7 +362,11 @@ workaroundColumnAlignment(this);
 				return r;
 			},
 
-			notifyEvent: function(event, data) {},
+			notifyEvent: function(event, data) {
+				if(event === "columnsChanged") {
+					this.fire("onColumnsChanged", data)
+				}
+			},
 			render_: function(bodyUpdateRows/*TODO*/) {
 				if(bodyUpdateRows) return this._body.updateRows();
 				
@@ -425,7 +431,7 @@ workaroundColumnAlignment(this);
 					value = "-";
 				} else if(column._wantsNullValues || (value !== null && value !== undefined)) {
 					if(column._displayFormat !== "") {
-						value = String.format(column._displayFormat, value);
+						value = js.sf(column._displayFormat, value);
 					}
 					if(column._onGetValue !== null) {
 						value = column.fire("onGetValue", [
@@ -483,11 +489,11 @@ workaroundColumnAlignment(this);
 			formatDate: function(value, opts) {
 				if(!(value instanceof Date)) value = new Date(value);
 				if(opts && opts.utc) {
-					return String.format("%d/%02d/%02d %02d:%02d", value.getUTCFullYear(), value.getUTCMonth() + 1,
+					return js.sf("%d/%02d/%02d %02d:%02d", value.getUTCFullYear(), value.getUTCMonth() + 1,
 							value.getUTCDate(), value.getUTCHours(), value.getUTCMinutes());
 				}
 				
-				return String.format("%d/%02d/%02d %02d:%02d", value.getFullYear(), value.getMonth() + 1,
+				return js.sf("%d/%02d/%02d %02d:%02d", value.getFullYear(), value.getMonth() + 1,
 						value.getDate(), value.getHours(), value.getMinutes());
 			},
 
@@ -725,6 +731,7 @@ workaroundColumnAlignment(this);
 								column.setContent(s);
 								column.setList(this);
 								onInit && onInit.apply(this, [column]);
+								changed = true;
 							}
 							attributes.push(attrs[i]);
 						}
@@ -739,7 +746,7 @@ workaroundColumnAlignment(this);
 						// }
 
 						if(changed === true) {
-							this.notifyEvent("columnsChanged");
+							this.notifyEvent("columnsChanged", [], true);
 						}
 					} else {
 						this.destroyColumns();
@@ -862,7 +869,7 @@ workaroundColumnAlignment(this);
 				var value = this._source.getAttributeValue(column._attribute, row, true);
 				if(column._wantsNullValues || (value !== null && value !== undefined)) {
 					if(column._displayFormat !== "") {
-						value = String.format(column._displayFormat, value);
+						value = js.sf(column._displayFormat, value);
 					}
 					if(column._onGetValue !== null) {
 						value = column.fire("onGetValue", [value, row, this._source]);

package/src/ui/ListColumn.js

@@ -66,7 +66,7 @@ define(function(require) {
 			constructor: function(owner) {
 				this._rule = Stylesheet.createCssRule("width: 130px;", 5);
 				// this._rule.style.setProperty("display", "none", "important");
-				//this._rule.style.setProperty("transition", "width 50ms");
+				this._rule.style.setProperty("transition", "width 250ms, max-width 250ms");
 			},
 			destroy: function() {
 			/**

package/src/ui/ListRow.js

@@ -43,7 +43,7 @@ define(function(require) {
 				var html = [];
 
 				for(var i = 0; i < columns.length; ++i) {
-					html.push(String.format(
+					html.push(js.sf(
 						"<div style=\"height: %dpx;\" class=\"%s %s\">" +
 	//						"<div style='float: left; padding: 5px;'></div>" +
 						"</div>",

package/src/ui/Panel.js

@@ -221,7 +221,7 @@ define(function (require) {
 				var cs = this.getComputedStyle();
 				var w = parseFloat(cs.width);
 				var h = parseFloat(cs.height);
-				var f = this._zoom < 1 ? -1 : 1;
+				var f = (this._zoom < 1 ? -1 : 1) * this.getZoom(true);
 				var cr;
 				
 				if(this._zoom < 1) {
@@ -846,6 +846,12 @@ define(function (require) {
             isHeightStored: function () {
                 return this._align !== "left" && this._align !== "right" && this._align !== "client" && this._autoSize !== "height" && this._autoSize !== "both";
             },
+            getZoom: function(parents) {
+            	if(parents && this._parent !== null) {
+            		return this._zoom * this._parent.getZoom(parents);
+            	}
+            	return this._zoom;
+            },
             setZoom: function(f) {
             	if(this._zoom !== f) {
             		if(!this.hasClass("animated")) {

package/src/ui/Tab.js

@@ -102,7 +102,11 @@ define(function(require) {
 					} else if(evt.target.classList.contains("menu")) {
 						this.dispatch("menuclick", evt);
 					} else {
-						this.setSelected(this._groupIndex < -1 ? !this.getSelected() : true);
+						if(this.isSelected() && evt.altKey === true) {
+							this.setSelected(false);
+						} else {
+							this.setSelected(this._groupIndex < -1 ? !this.getSelected() : true);
+						}
 						//this._node.childNodes[0].blur();
 					}
 				}

package/src/ui/Tabs.js

@@ -284,7 +284,6 @@ define(function(require) {
 	            	control && this.makeVisible(control);
             	}.bind(this), 100);
             }
-
     	},
     	properties: {
     		"onChange": {