dbm 1.0.2 → 1.0.3

package/flow/updatefunctions/dom/ElementPosition.js

@@ -0,0 +1,89 @@
+import Dbm from "../../../index.js";
+
+export default class ElementPosition extends Dbm.flow.FlowUpdateFunction {
+
+    _construct() {
+        super._construct();
+        
+        this.input.register("element", null);
+		this.input.register("prepareX", 0);
+		this.input.register("prepareY", 0);
+		
+		this.output.register("screenX", NaN);
+		this.output.register("screenY", NaN);
+		
+		this.output.register("parameterX", NaN);
+		this.output.register("parameterY", NaN);
+		
+		this.output.register("visible", false);
+		this.output.register("prepare", false);
+
+        this._callback_scrollBound = this._callback_scroll.bind(this);
+    }
+
+    start() {
+		window.addEventListener("resize", this._callback_scrollBound, false);
+		window.addEventListener("scroll", this._callback_scrollBound, false);
+
+        return this;
+    }
+
+    _update() {
+        //console.log("_update");
+
+        let element = this.input.element;
+
+        if(element) {
+			console.log(element);
+            //this.output.width = element.clientWidth;
+            //this.output.height = element.clientHeight;
+        }
+        else {
+            //this.output.width = 0;
+            //this.output.height = 0;
+        }
+    }
+
+    _callback_scroll(aEvent) {
+        console.log("_callback_scroll");
+
+        let element = this.input.element;
+
+        if(element) {
+			
+			//let thePageXOffset = window.pageXOffset;
+			let theInnerWidth = window.innerWidth;
+			//let thePageYOffset = window.pageYOffset;
+			let theInnerHeight = window.innerHeight;
+			
+			//console.log(theInnerWidth, theInnerHeight);
+			
+			let rect = element.getBoundingClientRect();
+			//console.log(rect);
+			
+			let prepareX = this.input.prepareX;
+			let prepareY = this.input.prepareY;
+			
+			let screenX = rect.x;
+			let screenY = rect.y;
+			
+			let elementWidth = rect.width;
+			let elementHeight = rect.height;
+			
+			let visible = ((screenX < theInnerWidth) && (screenX+elementWidth > 0)) && ((screenY < theInnerHeight) && (screenY+elementHeight > 0));
+			let prepare = ((screenX-prepareX < theInnerWidth) && (screenX+elementWidth+prepareX > 0)) && ((screenY-prepareY < theInnerHeight) && (screenY+elementHeight+prepareY > 0));
+			
+			let parameterX = (screenX+elementWidth)/(theInnerWidth+elementWidth);
+			let parameterY = (screenY+elementHeight)/(theInnerHeight+elementHeight);
+			
+			this.output.properties.screenX._internal_setValueInFlowOutsideOfUpdate(screenX);
+			this.output.properties.screenY._internal_setValueInFlowOutsideOfUpdate(screenY);
+			
+			this.output.properties.parameterX._internal_setValueInFlowOutsideOfUpdate(parameterX);
+			this.output.properties.parameterY._internal_setValueInFlowOutsideOfUpdate(parameterY);
+			
+			this.output.properties.visible._internal_setValueInFlowOutsideOfUpdate(visible);
+			this.output.properties.prepare._internal_setValueInFlowOutsideOfUpdate(prepare);
+        }
+    }
+}

package/flow/updatefunctions/dom/index.js

@@ -1,3 +1,4 @@
 export {default as ElementSize} from "./ElementSize.js";
 export {default as StyleObject} from "./StyleObject.js";
-export {default as HorizontalFlip} from "./HorizontalFlip.js";
+export {default as HorizontalFlip} from "./HorizontalFlip.js";
+export {default as ElementPosition} from "./ElementPosition.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dbm",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "main": "index.js",
   "type": "module",
   "scripts": {},

package/react/BaseObject.js

@@ -175,7 +175,7 @@ export default class BaseObject extends Component {
             }
         }
 
-        if(!children.length) {
+        if(!children || !children.length) {
             return createElement(aType, newProps);
         }
 

package/react/admin/EditPage.js

@@ -26,6 +26,7 @@ export default class EditPage extends Dbm.react.BaseObject {
             {"type": "setField", "data": {"value": this.item.content, "field": "content"}},
             {"type": "setField", "data": {"value": this.item.title, "field": "title"}},
             {"type": "setField", "data": {"value": this.item.description, "field": "meta/description"}},
+			{"type": "setField", "data": {"value": (new Date()).toISOString(), "field": "lastModified"}},
             {"type": "setUrl", "data": {"value": this.item.url}}
         ], ["content", "title", "url", "meta/description"]);
     }

package/react/area/ScrollActivatedArea.js

@@ -0,0 +1,44 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class ScrollActivatedArea extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+		
+		let elementProperty = this.item.requireProperty("element", null);
+		this.item.requireProperty("activated", false);
+		
+		let position = new Dbm.flow.updatefunctions.dom.ElementPosition();
+		this.item.setValue("position", position);
+		position.input.properties.element.connectInput(elementProperty);
+		
+		let prepareProperty = this.item.requireProperty("prepare", 100);
+		position.input.properties.prepareY.connectInput(prepareProperty);
+		
+		position.start();
+		
+		Dbm.flow.addUpdateCommand(position.output.properties.prepare, Dbm.commands.callFunction(this._prepareChanged.bind(this)));
+    }
+	
+	_prepareChanged() {
+		//console.log("_prepareChanged");
+		
+		if(this.item.position.output.prepare) {
+			this.item.setValue("activated", true);
+		}
+	}
+
+    _renderMainElement() {
+        //console.log("ScrollActivatedArea::render");
+        //console.log(this);
+        
+		return this._createMainElement("div", {"ref": this.createRef("element")},
+			React.createElement(Dbm.react.area.HasData, {"check": this.item.properties.activated},
+				this.getPropValue("children")
+			)
+		);
+
+        return null;
+    }
+}
+

package/react/area/index.js

@@ -1,2 +1,3 @@
 export {default as InsertElement} from "./InsertElement.js";
-export {default as HasData} from "./HasData.js";
+export {default as HasData} from "./HasData.js";
+export {default as ScrollActivatedArea} from "./ScrollActivatedArea.js";