cavalion-vcl 1.1.40 → 1.1.44

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+### 2022/01/03 -  1.1.44
+
+* Adding `context` parameter to Array:onFilterObject-event, which can be used as a cache for a specific filter context (updateFilter-call)
+* Introducing List.prototype.**valueByColumnAndRow** - used to obtain the value that will be rendered (useful for inline filtering)
+
+### 2021/12/29 -  1.1.43
+
+- Styling glassy-overlays with text-shadow
+- **ui/Tabs**: Fixing styling bug
+- **ui/List**: Introducing `groupByColumn()`
+- **data/Query**: `requestPage()` now returns a Promise
+
+### 2021/12/28 -  1.1.42
+
+- Fix alignment bug `#CVLN-20211228-1` 
+
+### 2021/12/17 - 1.1.41
+
+* Working around autoWidth bug (ListColumn)
+
 ### 2021/12/07 - 1.1.40
 
 * Updating

package/ISSUES.md

@@ -1,3 +1,12 @@
+# BUG Panel.prototype.getClientRect `#CVLN-20211228-1`
+
+	// TODO, Erhm, what about the padding? #CVLN-20211228-1
+
+* padding is not handled correctly ()
+* publiek-putten
+* details > right > [tabs | containers]
+
+
 # BUG Rendering rows fails 
 
 When `#source` (linked to `#list`) updates while `#list` is not visible, the following usually occurs (no rows visible):

package/package.json

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

package/src/data/Array.js

@@ -185,11 +185,11 @@ define(function(require) {
 			
 			updateFilter: function(notify) {
 				if(this._onFilterObject !== null && this._array !== null) {
-					var arr = [];
+					var arr = [], context = {};
 					this._arr = this._array;
 					for(var i = 0; i < this._array.length; ++i) {
 						var obj = this._array[i];
-						if(this.fire("onFilterObject", [obj, i, this]) !== true) {
+						if(this.fire("onFilterObject", [obj, i, context]) !== true) {
 							arr.push(obj);
 						}
 					}
@@ -340,7 +340,7 @@ define(function(require) {
 			"onFilterObject": {
 				type: Type.FUNCTION,
 				editorInfo: {
-					defaultValue: "(function(object, index) {\n\t//return {true} to exclude item from exposed array\n})"
+					defaultValue: "(function(object, index, context) {\n\t//return {true} to exclude item from exposed array\n})"
 				}
 			},
 			"onGetAttributeValue": {

package/src/entities/Query.js

@@ -222,19 +222,20 @@ define(function(require) {
 			    	var index;
 			    	if(this._pageQueue && (index = this._pageQueue.indexOf(page)) !== -1) {
 			    		if(index !== this._pageQueue.length - 1) {
+			    			/* make more urgent */
 				    		this._pageQueue.splice(index, 1);
 				    		this._pageQueue.push(page);
 			    		}
 			    	}
-			    	return;
+			    	return this._pageReqs[page]; // Promise.resolve( ... ) 
 			    }
 			    
 			    /*- make sure additional requests for 'page' are ignored */
 			    this._pageReqs[page] = WAITING;
 			    if((criteria = this.getRequestCriteria(page)) === null) {
 					// console.debug(this._entity, "requestPage: page", page, "no criteria, skip");
-					delete me._pageReqs[page];
-			    	return;
+					delete this._pageReqs[page];
+			    	return Promise.resolve(null);
 			    }
 
 			    if(this._request !== null) {
@@ -244,14 +245,14 @@ define(function(require) {
 					}
 					
 					this._pageQueue.push(page);
-			    	this._request.then(function() {
+			    	return this._request.then(function() {
 			    		var page = me._pageQueue.pop();
 						// console.debug(me._entity, "popping page", page);
 						
 						delete me._pageReqs[page]; /* delete WAITING tag */
-			    		me.requestPage(page, true); /*- make sure that we remain busy */
+			    		return me.requestPage(page, true); /*- make sure that we remain busy */
 			    	});
-			    	return;
+			    	// return;
 			    }
 			    
 			    var EM = this.getEM(); var start = Date.now();
@@ -297,6 +298,8 @@ define(function(require) {
 				if(!wasBusy) {
 					this.notify(SourceEvent.busyChanged, true, page);
 				}
+				
+				return this._request;
 			},
 			getAttributeValue: function(name, index) {
 				/** @overrides ../data/Source.prototype.getAttributeValue */

package/src/prototypes/App.js

@@ -1,6 +1,6 @@
 "use vcl/ui/Node, vcl/ui/Button";
 
-["vcl/Application", {
+[("vcl/Application"), {
 	onLoad: function() {
     	var img = document.body.childNodes[0];
     	if(img && img.nodeName === "IMG") {
@@ -13,7 +13,7 @@
     		document.body);
 	}
 }, [
-    ["vcl/ui/Panel", "window", { 
+    [("vcl/ui/Panel"), "window", { 
     	align: "client", 
     	classes: "animated",
 		css: {
@@ -27,7 +27,7 @@
 			".with-shadow": "box-shadow:rgba(0, 0, 0, 0.4) 0px 1px 2px 0px;",
 			".transparent": "background-color:transparent;",
 			".glassy-overlay": {
-				"": "pointer-events: none; color:rgba(5,5,5,0.95);",
+				"": "pointer-events: none; color:rgba(5,5,5,0.95); text-shadow: rgb(255 255 255) 0px 0px 12px, #00000094 0px 0px 5px;",
 				">.{./Element}": "pointer-events: auto;",
 				">.glassy:not(.no-margin)": "margin: 32px;",
 				">.glassy": {

package/src/prototypes/make/Build.js

@@ -1,17 +1,19 @@
 "js/minify, devtools/Resources";
 
+var RM = require("devtools/Resources");
+
 var Handlers = {
-	merge_lib: function() {
+	merge_lib() {
         var vars = this._owner.getVars();
         vars.modules = vars.modules.concat(vars.extraModules);
         this._owner.render();
     },
-    merge_app: function() {
+    merge_app() {
         var vars = this._owner.getVars();
         vars.components = vars.components.concat(vars.extraComponents);
         this._owner.render();
 	},
-    make_app: function() {
+    make_app() {
         // FIXME This should be moved to Factory?
 
 	    var Component = require("vcl/Component");
@@ -29,8 +31,7 @@ var Handlers = {
 	    for(k in Factory.implicit_sources) {
 	    	v = Factory.implicit_sources[k];
 
-	    	source.push(String.format("define(\"%s\", %s);", k, 
-	    		JSON.stringify(v)));
+	    	source.push(String.format("define(\"%s\", %s);", k, JSON.stringify(v)));
 	    }
 	    source.push("\n\n/*- Implicit Sources (blocks) */");
 	    Factory = require("blocks/Factory");
@@ -48,8 +49,7 @@ var Handlers = {
 		        if(uri.indexOf(".js") === uri.length - 3) {
 		        	text = minify(text);
 		        }
-	            source.push(String.format("define(\"%s\", %s);",
-	                    uri, JSON.stringify(text)));
+	            source.push(String.format("define(\"%s\", %s);", uri, JSON.stringify(text)));
 	    	}
             if(--count === 0) {
                 scope['extra-components'].setValue(source.join("\n"));
@@ -72,13 +72,24 @@ var Handlers = {
 	        });
 	    });
     },
-    push_app: function() {
-		var RM = require("devtools/Resources");
-		var uri = this.vars(["app-js"]); if(!uri) { return alert("app-js not set"); }
+    push_app(evt) {
+		var uri = this.vars(["app-js"]); 
+		if(!uri) { 
+			return alert("app-js not set"); 
+		}
+		
+		if(confirm("Make?")) {
+			Handlers.make_app.apply(this, [evt]);
+		}
+		
 		var text = this.ud("#extra-components").getValue();
-		this.print("pushing", RM.update(uri, { text: text }));
+		RM.get(uri).then(res => {
+			res.text = text;
+			res = RM.update(uri, res).then(res => alert("Pushed"));
+			this.print("Push app-js", res);
+		});
     },
-    make_styles: function() {
+    make_styles() {
 	    var ctx = requirejs.s.contexts._;
         var scope = this.scope();
 	    var styles = this.vars(["styles"]).map(_ => "text!" + _.split("!").pop()).filter(_ => _);
@@ -87,7 +98,7 @@ var Handlers = {
 	    	scope['extra-styles'].setValue(args.join("\n"));
 	    });
     },
-    set_lib: function() {
+    set_lib() {
     	var scope = this.scope();
     	var modules = this.vars(["modules", true]);
     	var components = this.vars(["components", true]);
@@ -95,7 +106,7 @@ var Handlers = {
     	var all = JSON.parse(scope.modules.getValue());
     	scope['extra-modules'].setValue(all.join("\n"));
     },
-    set_app: function() {
+    set_app() {
     	var scope = this.scope();
     	var components = this.vars(["components", true]);
     	
@@ -176,76 +187,76 @@ var Handlers = {
     }
     
 }, [
-    ["vcl/ui/Group", {}, [
-        $(("vcl/ui/CheckGroup"), "app.js", {
+    [("vcl/ui/Group"), {}, [
+        [("vcl/ui/CheckGroup"), "app.js", {
             text: "app.js",
             expanded: true
         }, [
-            $(("vcl/ui/Group"), {}, [
-                $(("vcl/ui/Input"), "components", {
+            [("vcl/ui/Group"), {}, [
+                [("vcl/ui/Input"), "components", {
                     element: "textarea"
-                }),
-                $(("vcl/ui/Input"), "extra-components", {
+                }],
+                [("vcl/ui/Input"), "extra-components", {
                     element: "textarea"
-                }),
-                $(("vcl/ui/Input"), "implicit-components", {
+                }],
+                [("vcl/ui/Input"), "implicit-components", {
                     element: "textarea"
-                })
-            ]),
-            $(("vcl/ui/Button"), {
+                }]
+            ]],
+            [("vcl/ui/Button"), {
                 content: "Merge",
                 onClick: Handlers.merge_app
-            }),
-            $(("vcl/ui/Button"), {
+            }],
+            [("vcl/ui/Button"), {
                 content: ">>>",
                 onClick: Handlers.set_app
-            }),
-            $(("vcl/ui/Button"), {
+            }],
+            [("vcl/ui/Button"), {
                 content: "Make",
                 onClick: Handlers.make_app
-            }),
-            $(("vcl/ui/Button"), {
+            }],
+            [("vcl/ui/Button"), {
                 content: "Push",
                 onClick: Handlers.push_app
-            })
-        ]),
-        $(("vcl/ui/CheckGroup"), "styles.less", {
+            }]
+        ]],
+        [("vcl/ui/CheckGroup"), "styles.less", {
             text: "styles.less",
             expanded: true
         }, [
-            $(("vcl/ui/Group"), {}, [
-                $(("vcl/ui/Input"), "styles", {
+            [("vcl/ui/Group"), {}, [
+                [("vcl/ui/Input"), "styles", {
                     element: "textarea"
-                }),
-                $(("vcl/ui/Input"), "extra-styles", {
+                }],
+                [("vcl/ui/Input"), "extra-styles", {
                     element: "textarea"
-                }),
-            ]),
-            $(("vcl/ui/Button"), {
+                }],
+            ]],
+            [("vcl/ui/Button"), {
                 content: "Make",
                 onClick: Handlers.make_styles
-            })
-        ]),
-        $(("vcl/ui/CheckGroup"), "lib.js", {
+            }]
+        ]],
+        [("vcl/ui/CheckGroup"), "lib.js", {
             text: "lib.js",
             expanded: true
         }, [
-            $(("vcl/ui/Group"), {}, [
-                $(("vcl/ui/Input"), "modules", {
+            [("vcl/ui/Group"), {}, [
+                [("vcl/ui/Input"), "modules", {
                     element: "textarea"
-                }),
-                $(("vcl/ui/Input"), "extra-modules", {
+                }],
+                [("vcl/ui/Input"), "extra-modules", {
                     element: "textarea"
-                }),
-            ]),
-            $(("vcl/ui/Button"), {
+                }],
+            ]],
+            [("vcl/ui/Button"), {
                 content: "Merge",
                 onClick: Handlers.merge_lib
-            }),
-            $(("vcl/ui/Button"), {
+            }],
+            [("vcl/ui/Button"), {
                 content: ">>>",
                 onClick: Handlers.set_lib
-            })
-        ])
+            }]
+        ]]
     ]]
 ]];

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

@@ -16,7 +16,7 @@
 			'.right': "float: right;",
 			'.{Button}': {
 				outline: "none",
-				'&:not(.right)': "margin-right: 16px;",
+				'&:not(.right)': "margin-right: 8px;",
 				'background': "none",
 				'background-color': "transparent",
 				'border': "none",

package/src/ui/List.js

@@ -580,6 +580,15 @@ define(function(require) {
 				}
 				return null;
 			},
+			getColumnByName: function(name) {
+				for(var i = 0, l = this._columns.length; i < l; ++i) {
+					var c = this._columns[i];
+					if(c._custom === false && c._name === name) {
+						return c;
+					}
+				}
+				return null;
+			},
 			insertColumn: function(column, index) {
 				this._columns.push(column);
 				column._list = this;
@@ -814,6 +823,36 @@ define(function(require) {
 			oncolumndrop: function() {
 				return this.fire("onColumnDropped", arguments);
 			},
+
+			valueByColumnAndRow(column, row) {
+				var value, orgValue;
+				if(column._attribute !== "") {
+					orgValue = (value = this._source.getAttributeValue(column._attribute, row));
+				}
+				if(column._wantsNullValues || (value !== null && value !== undefined)) {
+					if(column._displayFormat !== "") {
+						value = String.format(column._displayFormat, value);
+					}
+					if(column._onGetValue !== null) {
+						value = column.fire("onGetValue", [value, row, this._source]);
+					}
+					if(this._onColumnGetValue !== null) {
+					    value = this.fire("onColumnGetValue", [column, value, row, this._source]);
+					}
+					if(this._formatDates === true && this.isDate(value)) {
+						value = this.formatDate(value);
+					}
+				}
+				return value;
+			},
+			groupByColumn(column) {
+				var r = {};
+				this._source.getObjects().forEach((obj, row) => {
+					var value = this.getValueByColumnAndRow(column, row);
+					(r[value] = r[value] || []).push(obj);
+				});
+				return r;
+			},
 			
 			hasSelection: function() {
 				return this._selection.length > 0;

package/src/ui/ListColumn.js

@@ -241,6 +241,11 @@ define(function(require) {
 				}
 				return r;
 			},
+			
+			
+			groupBy: function() {
+				return this._list.groupByColumn(this);	
+			},
 
 			sizing: function(evt) {
 			},
@@ -342,8 +347,13 @@ define(function(require) {
 				return this._autoWidthValue;
 			},
 			setAutoWidthValue: function(value, force) {
-				if(value === " ") value = " ";
 				value = value.trim();
+				if(value === " ") value = " ";
+				
+				if(value.length <= 10) {
+					value += "W";
+				}
+				
 				if(force === true || (this._autoWidthValue !== value && value.length > this._autoWidthValue.length)) {
 					this._autoWidthValue = value;
 					if(this._node !== null) {

package/src/ui/Panel.js

@@ -32,25 +32,11 @@ define(function (require) {
         };
         return animations[animation];
     }
-
-    /**
-     *
-     */
     function swap(obj, a1, a2) {
         var v = obj[a1];
         obj[a1] = obj[a2];
         obj[a2] = v;
     }
-
-    /**
-     *
-     * @param control
-     * @param left
-     * @param top
-     * @param right
-     * @param bottom
-     * @param callback
-     */
     function setBounds(control, left, top, right, bottom, callback) {
         if (control.setBounds(left, top, right, bottom, undefined, undefined, callback) === undefined) {
             callback();
@@ -145,7 +131,7 @@ define(function (require) {
  */
                                 if (align === "top") {
                                     setBounds(control, cr.left, cr.top, cr.right, U, function () {
-                                    	if(zoom != 1.0) {
+                                    	if(zoom !== 1.0) {
                                     		console.log("alignControls", control._name, control);
                                         	cr.top += (control._height * zoom);
                                     	} else {
@@ -155,7 +141,7 @@ define(function (require) {
                                     });
                                 } else if (align === "bottom") {
                                     setBounds(control, cr.left, U, cr.right, cr.bottom, function () {
-                                    	if(zoom != 1.0) {
+                                    	if(zoom !== 1.0) {
                                     		console.log("alignControls", control._name, control);
                                         	cr.bottom += (control._height / zoom);
                                     	} else {
@@ -177,6 +163,7 @@ define(function (require) {
                                     });
                                 }
                             }
+                            // console.log(thisObj._name, align, js.mixIn(cr));
                         } else {
                             controls.splice(i, 1);
                             next();
@@ -251,11 +238,11 @@ define(function (require) {
 					cr = {
 	                    left: parseFloat(cs.getPropertyValue("padding-left")) || 0,
 	                    top: parseFloat(cs.getPropertyValue("padding-top")) || 0,
-	                    right: w - (w * (1 / this._zoom) * f),
-	                    bottom: h - (h * (1 / this._zoom) * f)
-	                    // TODO, Erhm, what about the padding?
-	                    // right: f * (parseFloat(cs.getPropertyValue("padding-right")) || 0),
-	                    // bottom: f * (parseFloat(cs.getPropertyValue("padding-bottom")) || 0)
+	                    // right: w - (w * (1 / this._zoom) * f),
+	                    // bottom: h - (h * (1 / this._zoom) * f)
+	                    // TODO, Erhm, what about the padding? #CVLN-20211228-1
+	                    right: f * (parseFloat(cs.getPropertyValue("padding-right")) || 0),
+	                    bottom: f * (parseFloat(cs.getPropertyValue("padding-bottom")) || 0)
     	            };
 				}
             // console.log(this._name, JSON.stringify(cr));
@@ -478,7 +465,7 @@ define(function (require) {
                         height: this._node.clientHeight
                     });
                 }
-
+// console.log(this, "setBounds", bounds);
                 this.alignControls();
             },
             setBoundsValidated: function (left, top, right, bottom, width, height) {

package/src/ui/Tabs.js

@@ -14,13 +14,13 @@ define(function(require) {
 	            "background-color": "#f0f0f0",
 	            'height': "26px",
 	            "padding-left": "2px",
-	            "padding-top": "3px",
 	            // "border-top": "1px solid silver",
 	            
 	            "&.gradient":{
 	                "background-image": "-webkit-gradient(linear, 0% 0%, 0% 100%, from(#F5F5F5), to(#E5E5E5))",
 	            },
 	            "&:not(.bottom)": {
+		            "padding-top": "3px",
 	                "border-bottom": "1px solid silver"
 	            },
 	            "&.bottom.inset": {