cavalion-vcl 1.1.67 → 1.1.68

package/.md

@@ -1,5 +1,17 @@
 * [CHANGELOG.md]() - [README.md]() - [package.json]()
-* [Workspace<vcl>](/Library/vcl-comps/devtools/Workspace$/vcl.js)
+* [Workspace<vcl>](/Library/vcl-comps/devtools/Workspace$/vcl.js) - [.js]()
+
+# `0728` Control.prototype.makeVisible
+
+Been working on coding in Markdown documents, basically in order to be able print results in the workspace console. Therefore the method `p()` has been introduced. It cancels the behaviour of opening a document while linking a link. Instead it evaluates the code and print its result in the workspace console. 
+
+So, now we can do something like:
+
+* ```[`123`](`${p(:)}`)```  ==>  [`123`](`${p(:)}`) - check the console after clicking 123
+
+However, the console doesn't show yet automatically. Therefore the method `Control.prototype.makeVisible` is introduced. It will call the method `Control.prototype.show` and travel up in the parent-hierarchy and call more in case necessary.
+
+* makeVisible() already exists in vcl/ui/Tab.prototype.
 
 # `0519` vcl/Factory `#CVLN-20220519-1`
 
@@ -57,8 +69,12 @@
 				* [Popup](src/ui/:.js) - [Ace](src/ui/:.js) - [Console](src/ui/:.js)
 				* [Form](src/ui/:.js) - [FormContainer](src/ui/:.js)
 				* [List](src/ui/:.js) | [ListColumn](src/ui/:.js) - [ListBody](src/ui/:.js) - [ListFooter](src/ui/:.js) - [ListHeader](src/ui/:.js) - [ListRow](src/ui/:.js)
-		* [Node](src/ui/:.js) [.closeable](src/ui/Node:.js)
-		* [Sizer](src/ui/:.js) - [Tab](src/ui/:.js) - [Tabs](src/ui/:.js) - [Tree](src/ui/:.js)
+		* [Sizer](src/ui/:.js)
+		* [Tabs](src/ui/:.js) 
+			* [Tab](src/ui/:.js)
+		* [Tree](src/ui/:.js)
+			* [Node](src/ui/:.js)
+				* [.closeable](src/ui/Node:.js)
 
 
 # resources

package/CHANGELOG.md

@@ -1,10 +1,19 @@
-* ### 2022/07/04 - 1.1.67
+### 2022/07/28 - 1.1.68
+
+* 768156d - fixes an issue where the vertical scrollbar was not accesible on macOS
+* cd60d4b - introduces new methods for vcl/Control: 
+	* reflectStates, 
+	* makeVisible and 
+	* selectVisible 
+* cd60d4b - changing some css/rendering details for Tree and Node 
+
+### 2022/07/04 - 1.1.67
 
 * 7dc04fb - adds Component.prototype.getTimeout
 * 52bebc9 - introducing Query.prototype.error
 * 18cd481 - destroying element upon remove (seems decent)
 
-* ### 2022/06/27 - 1.1.66
+### 2022/06/27 - 1.1.66
 
 * 07c6e83 - introducing onError event-property
 

package/package.json

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

package/src/Control.js

@@ -958,6 +958,25 @@ define(function(require) {
 					}
 				}
 			},
+			reflectStates: function(states) {
+				if(typeof states === "string") {
+					states = states.split(",").map(state => ControlState[state]);
+				}
+				
+				states.forEach(state => {
+					switch(state) {
+						case ControlState.showing:
+							this.makeVisible();
+							break;
+							
+						case ControlState.selected:
+							this.setSelected(true);
+							break;
+					}
+					
+				})
+				
+			},
 
 			// scrollIntoView: function() {
 			// 	this.nodeNeeded();
@@ -1084,6 +1103,21 @@ define(function(require) {
 			hide: function() {
 				this.setVisible(false);
 			},
+			makeVisible: function(control) {
+				var parent = this._parent;
+				if(this._parent && !this._parent.isVisible()) {
+					this._parent.makeVisible();
+					this._parent.update(() => this.makeVisible());
+					return;
+				}
+				if(!this.isVisible()) {
+					this.show();
+				}
+			},
+			selectVisible: function() {
+				this.setSelected(true);
+				this.makeVisible();
+			},
 
 			allowsUpdateChildren: function() {
 				return this.isShowing();

package/src/ui/List.js

@@ -58,7 +58,8 @@ define(function(require) {
 						position: "absolute",
 						width: "1px",
 						height: "1px",
-						overflow: "hidden"
+						overflow: "hidden",
+						'z-index': 2
 					}
 				},
 				"&.header-invisible .{./ListHeader}": "height:0;"

package/src/ui/Tab.js

@@ -168,7 +168,14 @@ define(function(require) {
 					this.setState("invalidated", true);
 				}
 			},
-		
+			
+			makeVisible: function(control) {
+				this.inherited(arguments);
+				if(!control && this._parent) {
+					this._parent.makeVisible(this);
+				}
+			},
+
 			getControl: function() {
 				return this._control;
 			},

package/src/ui/Tabs.js

@@ -210,17 +210,21 @@ define(function(require) {
 				// }
 	   // 	},
 	    	makeVisible: function(control) {
-	    		/*- this assumes horizontal scrolling only */
-	    	    control.scrollIntoView(); 
-	    	    // HACK
-	    		this._node.scrollTop = 0;
-	    	    this.nextTick("position-scrollbar", function() {
-		    		if(this._node.scrollLeft < 100) {
-		    			this._node.scrollLeft = 0;
-		    		} else {
-		    			this._node.scrollLeft += 100;
-		    		}
-	    	    }.bind(this));
+	    		if(control) {
+		    		/*- this assumes horizontal scrolling only */
+		    	    control.scrollIntoView(); 
+		    	    // HACK
+		    		this.nodeNeeded().scrollTop = 0;
+		    	    this.nextTick("position-scrollbar", function() {
+			    		if(this._node.scrollLeft < 100) {
+			    			this._node.scrollLeft = 0;
+			    		} else {
+			    			this._node.scrollLeft += 100;
+			    		}
+		    	    }.bind(this));
+	    		} else {
+					return this.inherited(arguments);
+	    		}
 	    	},
     		initializeNodes: function(control) {
 	    		/** @overrides ../Control.prototype.initializeNodes */

package/src/ui/Tree.js

@@ -74,13 +74,14 @@ define(function (require) {
                         }
                     },
                     ">.text": {
-                        "input[type=checkbox]": `position:relative;top:${checkbox_top}px;`,
+                        'input[type=checkbox]': `position:relative;top:${checkbox_top}px;`,
                     	cursor: "pointer",
                         position: "relative",
 //        				width: "100%",
                         display: 'inline-block',
-                        "margin-left": "2px",
+                        'margin-left': "2px",
                         padding: "3px 4px 3px 4px",
+                        // 'vertical-align': "top"
                     },
                     "&.selected": {
                         ">.selection": {
@@ -231,10 +232,14 @@ define(function (require) {
                 this.dispatch("nodesneeded", null);
             },
 			makeVisible: function(childNode) {
-			    var node = this.nodeNeeded();
-			    var pos = jquery(childNode.nodeNeeded()).position();
-			    var top = this.getAbsoluteRect().height / 3;
-			    node.scrollTop -= (top - pos.top);
+				if(childNode) {
+				    var node = this.nodeNeeded();
+				    var pos = jquery(childNode.nodeNeeded()).position();
+				    var top = this.getAbsoluteRect().height / 3;
+				    node.scrollTop -= (top - pos.top);
+				} else {
+					return this.inherited(arguments);
+				}
             },
             
             do_keyup: function(evt) {