cavalion-blocks - npm Package Compare versions

Comparing version 0.9.37 to 0.9.38

.md

 * [CHANGELOG.md]() - [README.md]() - [package.json]()
 
 > 
-* [Hover.closex](src/cavalion-blocks/:.js) close moet wegfaden indien niet hovered
+* [Container.closex]([prototypes/:]) close moet wegfaden indien niet hovered
 
@@ -6,0 +6,0 @@ # cavalion-blocks

CHANGELOG.md

@@ -0,1 +1,9 @@
+### 2024/05/20 - 0.9.38
+
+* **Hover**:
+	- Improves drag/drop- and persistent/size-behaviour
+	- Instantiated block components are owned by the Hover-component
+- Gets rid of dependency to blocks.less
+
+
 ### 2023/09/30 - 0.9.37
@@ -2,0 +10,0 @@

package.json

 {
   "name": "cavalion-blocks",
-  "version": "0.9.37",
+  "version": "0.9.38",
   "description": "`blocks-dot-js` `[].js`",
@@ -5,0 +5,0 @@ "main": "README.js",

src/Blocks.js

 define(function(require) {
 	
-	require("stylesheet!./blocks.less");
-	
-	// var PouchDB = require("pouchdb");
 	var Factory;
@@ -7,0 +4,0 @@

src/Factory.js

@@ -597,3 +597,4 @@ define(function(require) {
 				
-				// TODO maybe reject() should not be the fallback but rather resolve(null)
+				// TODO maybe reject() should not be the fallback but rather resolve(null) 
+				//	+ also: ".fallback" could be added (nice!y) to the uri
 				this.fetch(name).then(instantiate).catch(fallback);
@@ -600,0 +601,0 @@ },

src/prototypes/.md

@@ -7,3 +7,3 @@ # [prototypes](./)
 
-> * [.closex](Container:.js) [.dialog](Container:.js) [.glassy](Container:.js) [.zoomy](Container:.js)
+> * Container [.closex](Container:.js) [.dialog](Container:.js) [.glassy](Container:.js) [.zoomy](Container:.js)
 
@@ -24,2 +24,14 @@ > # [Executable](:.js)
 
+# `2023/10/30` Enter: dropzone
 
+Let's see how fast we can get this to work. First, what do I need?
+
+* upload 3 sets of 2 pictures (1-, 2-, 3-A&B)
+* backend is Veldoffice (ofcourse)
+	* document or "real" photo?
+
+# `2023/10/28` Container, Hover, .glassy, .zoomy
+
+Ok, so hovering containers. Type up some Markdown fast and get the hovers floating above it by clicking the links that were just created out of nothing, euh pixels.
+
+* [devtools/Alphaview](<<[]>>) 

src/prototypes/App.js

 "use strict";
 
+console.log("using cavalion-blocks:prototypes/App");
+
 ["vcl:Application", {}, [
@@ -4,0 +6,0 @@

src/prototypes/Container.glassy.js

@@ -29,3 +29,3 @@ "use util/HtmlElement";
 			// 'backdrop-filter': "blur(10px)",
-			'transition': "box-shadow 0.45s ease 0s, transform 0.45s ease 0s, left 0.45s ease 0s, right 0.45s ease 0s, top 0.45s ease 0s, bottom 0.45s ease 0s, width 0.45s ease 0s, height 0.45s ease 0s, border-width 0.45s ease 0s"
+			'transition': "box-shadow 0.45s ease 0s, transform 0.45s ease 0s, left 0.45s ease 0s, right 0.45s ease 0s, top 0.45s ease 0s, bottom 0.45s ease 0s, width 0.45s ease 0s, height 0.45s ease 0s, border-width 0.45s ease 0s",
 		},
@@ -54,2 +54,10 @@ '&:hover': {
 
+			// "&.right": {
+			// 	'': "right: 5%; transform-origin: top right;",
+			// 	"&:not(:hover)": "margin-left:1px; transform: translate3d(75%, 0, 0);"
+			// },
+			// "&.left": {
+			// 	'': "left: 5%; transform-origin: top left;",
+			// },
+
 		'&.shrink-to-corner:not(:hover)': {
@@ -100,3 +108,12 @@ 'width': 175 + "px",
 		},
-		'.seperator.seperator.seperator': "border-top: 1px solid rgba(155, 155, 155, 0.55);"
+		'.seperator.seperator.seperator': "border-top: 1px solid rgba(155, 155, 155, 0.55);",
+		
+		'&.phone': {
+			'': "width: 389px; border-radius:20px; box-shadow: 0 0 20px 10px rgba(0,0,0,.2);",
+			">.client": {
+				'': "border-radius: 20px;",
+				'iframe': "border-radius: 20px;"
+			}
+		}
+		
 	},
@@ -122,2 +139,3 @@
 				let transform;
+				
 	    		dragger.override({
@@ -135,2 +153,15 @@ createHandles(evt) {
 	    			updateHandles(evt) {
+
+						if(evt.clientX === undefined) {
+							evt.clientX = dragger.clientX;
+							evt.clientY = dragger.clientY;
+							if(evt.clientX === undefined) {
+								this._control.print("ignoring drop without evt.clientX");
+								return;
+							}
+						}
+
+						dragger.clientX = evt.clientX; 
+						dragger.clientY = evt.clientY;
+
 	    				const style = this._control._node.style;
@@ -145,2 +176,3 @@ let cursor = style.cursor;
 	    				} else {
+	    					
 	    					var dx = evt.clientX - this._sx, dy = evt.clientY - this._sy;
@@ -153,2 +185,3 @@ var ar = js.mi(ar1);
 							cursor = cursor.split("-")[0].split("");
+// this._control.print(js.sf("%s - _sx: %s, _sy: %s, evt: %s %s | dx: %s, dy: %s", cursor, this._sx, this._sy, dx, dy, ar.left, ar.top, undefined, undefined, ar.width, ar.height))
 							
@@ -168,3 +201,3 @@ if(cursor.includes("w")) {
 							}
-
+// this._control.print(js.sf("dx: %s, dy: %s - setBounds(%s, %s, %s, %s, %s, %s)", dx, dy, ar.left, ar.top, undefined, undefined, ar.width, ar.height))
     						this._control.setBounds(ar.left, ar.top, undefined, undefined, ar.width, ar.height);
@@ -208,7 +241,9 @@ }
 	    				var cursor = this._control._node.style.cursor;
+	    				var clientX = evt.hasOwnProperty("clientX") ? evt.clientX : dragger.clientX;
+	    				var clientY = evt.hasOwnProperty("clientY") ? evt.clientY : dragger.clientY;
 	    				if(cursor === "") {
 							/** This will just move the control, override to change behaviour */
 							this._control.setBounds(
-								evt.clientX - this._sx + this._control.getLeft(), 
-								evt.clientY - this._sy + this._control.getTop()
+								clientX - this._sx + this._control.getLeft(), 
+								clientY - this._sy + this._control.getTop()
 							);
@@ -241,2 +276,5 @@ } else {
 		this.readStorage("bounds", (bounds) => {
+			if(typeof bounds === "string") {
+				try { bounds = JSON.parse(bounds); } catch(e) { bounds = null; }
+			}
 			if(bounds) {
@@ -272,3 +310,3 @@ this._width = bounds.width;
 		this.removeClass("dragging");
-		this.writeStorage("bounds", this.getAbsoluteRect());
+		this.update(_=> this.writeStorage("bounds", js.sj(this.getAbsoluteRect())));
 	},
@@ -292,4 +330,3 @@ onMouseMove(evt) {
 	},
-	
-	
+
 }, []];
@@ -296,0 +333,0 @@

src/prototypes/Container.zoomy.js

@@ -32,52 +32,3 @@ var WIDTH = 985, HEIGHT = 600, ZOOM_C = 2;
 	classes: "right -shrink-to-corner",
-	css: {
-		'': {
-			'flex-shrink': "0",
-			'box-shadow': "0 0 20px 10px rgba(0,0,0,.2)",
-			'height': HEIGHT + "px",
-			'width': WIDTH + "px",
-			'top': "5%", 
-			'border-radius': "25px",
-			'background': "transparent",
-			'align-self': "center",
-			'box-sizing': "border-box",
-			'z-index': "1999",
-			// "border': "3px solid rgba(0,0,0,0.05)",
-			'transition': "transform 0.45s ease 0s, left 0.45s ease 0s, right 0.45s ease 0s, top 0.45s ease 0s, bottom 0.45s ease 0s, width 0.45s ease 0s, height 0.45s ease 0s, border-width 0.45s ease 0s"
-		},
-		'.wrapper': {
-			'position': "relative",
-			'border-radius': "20px",
-			'border': "7px solid rgba(0,0,0,0)",
-			'overflow': "hidden",
-			'height': "100%",
-			'transition': "border-color 0.45s ease 0s",
-			// '&:hover': {
-			// 	'border-color': "gold"
-			// }
-		},
-		"&.glassy-overlay > .wrapper.no-margin": "margin:0;",
-		"&.right": "right: 40px; transform-origin: top right;",
-		"&.left": "left: 40px; transform-origin: top left;",
-		
-		'&.shrink-to-corner:not(:hover)': {
-			'width': 175 + "px",
-			'height': 175 + "px"
-		},
 
-		'&:not(.no-transparent-effects)': {		
-			'.{List}': "border-radius:5px;",
-			'.{ListHeader}': {
-				"": "background-color:transparent;transition:background-color 1s ease 0s;", 
-				"&.scrolled": "background-color:rgba(255,255,255,0.75);", 
-				">div": "background-image:none;border:none;font-weight:bold;"
-			},
-			'*': "text-shadow: none;",
-			'.{Input}': {
-				'input': 'background-color: rgba(255,255,255,0.2);',
-				'input:focus': 'background-color: rgba(255,255,255,0.9);'
-			}
-		}
-	},
-	
 	onLoad() {
@@ -84,0 +35,0 @@ this.addClasses("glassy glassy-overlay"); // so that classes-property be used

src/prototypes/Hover.js

@@ -21,2 +21,3 @@ // getStorageKey might solve the problem/challenge with a not being able to specify (specializer) the (automagically created) Hover<>-instance (since it would lead to many implicit bases when dealing with long uri paths) embedding the actual blocks component of interest
 			parent: this,
+			owner: this,
 			zoom: this.vars("zoom") || 1
@@ -23,0 +24,0 @@ }));

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

95916

decreased by-6.36%

Number of package files

52

decreased by-11.86%

Lines of code

2426

decreased by-5.53%

No dependency changes