dbm 1.1.4 → 1.1.6

package/dbm.js

@@ -57,6 +57,31 @@ export let objectPath = function(aObject, aPath) {
     return currentObject;
 }
 
+export let setAtObjectPath = function(aObject, aPath, aValue) {
+    aPath += "";
+    if(aPath.length === 0) {
+        return 0;
+    }
+
+    let baseObject = aObject;
+    let propertyName = aPath;
+
+    let paths = aPath.split(".");
+    if(paths.length > 1) {
+        propertyName = paths.pop();
+
+        baseObject = objectPath(baseObject, paths.join("."));
+    }
+
+    if(baseObject) {
+        let partAsInt = parseInt(propertyName, 10);
+        if(partAsInt.toString() === propertyName) {
+            propertyName = partAsInt;
+        }
+        baseObject[propertyName] = aValue;
+    }
+}
+
 export * as utils from "./utils/index.js";
 export * as core from "./core/index.js";
 export * as loading from "./loading/index.js";

package/flow/controllers/index.js

@@ -1,2 +1,4 @@
 export * as select from "./select/index.js";
-export * as edit from "./edit/index.js";
+export * as edit from "./edit/index.js";
+export * as transform from "./transform/index.js";
+export * as interaction from "./interaction/index.js";

package/flow/controllers/interaction/MoveElement.js

@@ -0,0 +1,179 @@
+import Dbm from "../../../index.js";
+
+export default class MoveElement extends Dbm.core.BaseObject {
+    _construct() {
+        super._construct();
+
+        this._element = null;
+        this._startX = 0;
+		this._startY = 0;
+        this._startXParameter = 0;
+        this._startYParameter = 0;
+
+        this._callback_mouseMoveBound = this._callback_mouseMove.bind(this);
+        this._callback_mouseUpBound = this._callback_mouseUp.bind(this);
+        this._callback_startDragBound = this._callback_startDrag.bind(this);
+
+        this.item.requireProperty("element", null);
+        Dbm.flow.addUpdateCommand(this.item.properties.element, Dbm.commands.callFunction(this._elementUpdated.bind(this)));
+
+        let updateXCommand = Dbm.commands.callFunction(this._updateX.bind(this));
+        let updateYCommand = Dbm.commands.callFunction(this._updateY.bind(this));
+
+        let clampXCommand = Dbm.commands.callFunction(this._clampX.bind(this));
+        let clampYCommand = Dbm.commands.callFunction(this._clampY.bind(this));
+
+        this.item.requireProperty("minX", 0);
+        Dbm.flow.addUpdateCommand(this.item.properties.minX, updateXCommand);
+        Dbm.flow.addUpdateCommand(this.item.properties.minX, clampXCommand);
+        this.item.requireProperty("maxX", 0);
+        Dbm.flow.addUpdateCommand(this.item.properties.maxX, updateXCommand);
+        Dbm.flow.addUpdateCommand(this.item.properties.maxX, clampXCommand);
+
+        this.item.requireProperty("minY", 0);
+        Dbm.flow.addUpdateCommand(this.item.properties.minY, updateYCommand);
+        Dbm.flow.addUpdateCommand(this.item.properties.minY, clampYCommand);
+        this.item.requireProperty("maxY", 0);
+        Dbm.flow.addUpdateCommand(this.item.properties.maxY, updateYCommand);
+        Dbm.flow.addUpdateCommand(this.item.properties.maxY, clampYCommand);
+
+        this.item.requireProperty("xParameter", 0);
+        Dbm.flow.addUpdateCommand(this.item.properties.xParameter, updateXCommand);
+        this.item.requireProperty("yParameter", 0);
+        Dbm.flow.addUpdateCommand(this.item.properties.yParameter, updateYCommand);
+
+        this.item.requireProperty("scaleX", 1);
+        Dbm.flow.addUpdateCommand(this.item.properties.scaleX, updateXCommand);
+        this.item.requireProperty("scaleY", 1);
+        Dbm.flow.addUpdateCommand(this.item.properties.scaleY, updateYCommand);
+
+        this.item.requireProperty("invertX", 1);
+        this.item.requireProperty("invertY", 1);
+
+        this.item.requireProperty("x", 0);
+        this.item.requireProperty("y", 0);
+
+        this.item.requireProperty("isDragging", false);
+    }
+
+    _elementUpdated() {
+        console.log("_elementUpdated");
+
+        if(this._element) {
+            let element = this._element;
+            element.removeEventListener("mousedown", this._callback_startDragBound);
+            element.removeEventListener("touchstart", this._callback_startDragBound);
+        }
+
+        if(this.item.element) {
+            let element = this.item.element;
+            element.addEventListener("mousedown", this._callback_startDragBound);
+            element.addEventListener("touchstart", this._callback_startDragBound);
+        }
+        this._element = this.item.element;
+    }
+
+    _updateX() {
+        this.item.x = this.item.xParameter*this.item.scaleX;
+    }
+
+    _clampX() {
+        let minX = this.item.minX;
+		let maxX = this.item.maxX;
+		
+		this.item.xParameter = Math.max(minX, Math.min(this.item.xParameter, maxX));
+    }
+
+    _clampY() {
+        let minY = this.item.minY;
+		let maxY = this.item.maxY;
+		
+		this.item.yParameter = Math.max(minY, Math.min(this.item.yParameter, maxY));
+    }
+
+    _updateY() {
+        this.item.y = this.item.yParameter*this.item.scaleY;
+    }
+
+
+    _startMove(aX, aY) {
+		//console.log(aX, aY);
+		
+		this._startXParameter = this.item.xParameter;
+        this._startYParameter = this.item.yParameter;
+		this._startX = aX;
+		this._startY = aY;
+	}
+	
+	_updateMove(aX, aY) {
+		console.log("_updateMove");
+		//console.log(aX, aY);
+		
+		let x = this._startXParameter + this.item.invertX*(aX-this._startX)/this.item.scaleX;
+		let y = this._startYParameter + this.item.invertY*(aY-this._startY)/this.item.scaleY;
+        
+		let minX = this.item.minX;
+		let maxX = this.item.maxX;
+		
+		let minY = this.item.minY;
+		let maxY = this.item.maxY;
+		
+		this.item.xParameter = Math.max(minX, Math.min(x, maxX));
+        this.item.yParameter = Math.max(minY, Math.min(y, maxY));
+		
+        console.log(this.item.xParameter);
+        console.log(this.item.yParameter);
+	}
+	
+	_callback_mouseUp(aEvent) {
+		console.log("_callback_mouseUp");
+		//console.log(aEvent);
+		
+		if(aEvent.type === "touchend") {
+			this._updateMove(aEvent.touches[0].pageX, aEvent.touches[0].pageY);
+		}
+		else {
+			this._updateMove(aEvent.pageX, aEvent.pageY);
+		}
+		
+		document.removeEventListener("mousemove", this._callback_mouseMoveBound, false);
+		document.removeEventListener("mouseup", this._callback_mouseUpBound, false);
+		
+		document.removeEventListener("touchmove", this._callback_mouseMoveBound, false);
+		document.removeEventListener("touchup", this._callback_mouseUpBound, false);
+
+        this.item.isDragging = false;
+	}
+	
+	_callback_mouseMove(aEvent) {
+		console.log("_callback_mouseMove");
+		//console.log(aEvent);
+		
+		if(aEvent.type === "touchmove") {
+			this._updateMove(aEvent.touches[0].pageX, aEvent.touches[0].pageY);
+		}
+		else {
+			this._updateMove(aEvent.pageX, aEvent.pageY);
+		}
+	}
+	
+	_callback_startDrag(aEvent) {
+		console.log("_callback_startDrag");
+		//console.log(aEvent, aEvent.type);
+		
+		if(aEvent.type === "touchstart") {
+			this._startMove(aEvent.touches[0].pageX, aEvent.touches[0].pageY);
+		}
+		else {
+			this._startMove(aEvent.pageX, aEvent.pageY);
+		}
+		
+		document.addEventListener("mousemove", this._callback_mouseMoveBound, false);
+		document.addEventListener("mouseup", this._callback_mouseUpBound, false);
+		
+		document.addEventListener("touchmove", this._callback_mouseMoveBound, false);
+		document.addEventListener("touchup", this._callback_mouseUpBound, false);
+
+        this.item.isDragging = true;
+	}
+}

package/flow/controllers/interaction/index.js

@@ -0,0 +1 @@
+export {default as MoveElement} from "./MoveElement.js";

package/flow/controllers/transform/PartOfObject.js

@@ -0,0 +1,51 @@
+import Dbm from "../../../index.js";
+
+export default class PartOfObject extends Dbm.core.BaseObject {
+    _construct() {
+        super._construct();
+
+        this.item.requireProperty("object", null);
+        this.item.requireProperty("path", null);
+        this.item.requireProperty("value", null);
+
+        this._lastUpdatedValue = null;
+
+        let objectUpdatedCommand = Dbm.commands.callFunction(this._objectUpdated.bind(this));
+        Dbm.flow.addUpdateCommand(this.item.properties.object, objectUpdatedCommand);
+        Dbm.flow.addUpdateCommand(this.item.properties.path, objectUpdatedCommand);
+
+        Dbm.flow.addUpdateCommand(this.item.properties.value, Dbm.commands.callFunction(this._valueUpdated.bind(this)));
+    }
+
+    _objectUpdated() {
+        console.log("_objectUpdated");
+
+        if(this.item.path !== null) {
+            let stringValue = JSON.stringify(Dbm.objectPath(this.item.object, this.item.path));
+            
+            if(stringValue !== this._lastUpdatedValue) {
+                this._lastUpdatedValue = stringValue;
+                let newValue = JSON.parse(stringValue);
+                this.item.value = newValue;
+            }
+        }
+    }
+
+    _valueUpdated() {
+        console.log("_valueUpdated");
+
+        if(this.item.path !== null) {
+            let stringValue = JSON.stringify(this.item.value);
+
+            if(stringValue !== this._lastUpdatedValue) {
+                this._lastUpdatedValue = stringValue;
+                let object = JSON.parse(JSON.stringify(this.item.object));
+                Dbm.setAtObjectPath(object, this.item.path, JSON.parse(stringValue));
+        
+                this.item.properties.object.getMostUpstreamProperty().value = object;
+            }
+            
+        }
+        
+    }
+}

package/flow/controllers/transform/index.js

@@ -0,0 +1 @@
+export {default as PartOfObject} from "./PartOfObject.js";

package/flow/updatefunctions/dom/ElementPosition.js

@@ -11,7 +11,7 @@ export default class ElementPosition extends Dbm.flow.FlowUpdateFunction {
 		
 		this.output.register("screenX", NaN);
 		this.output.register("screenY", NaN);
-		
+
 		this.output.register("parameterX", NaN);
 		this.output.register("parameterY", NaN);
 		

package/flow/updatefunctions/logic/PositionedItems.js

@@ -0,0 +1,68 @@
+import Dbm from "../../../index.js";
+
+export default class PoisitonedItems extends Dbm.flow.FlowUpdateFunction {
+
+    _construct() {
+        super._construct();
+        
+        this.input.register("elementWidth", 0);
+        this.input.register("itemWidth", 0);
+        this.input.register("itemSpacing", 0);
+        this.input.register("padding", 0);
+        this.input.register("numberOfItems", 0);
+
+        this.output.register("startPosition", 0);
+        this.output.register("parameterLength", 0);
+
+        this.output.register("minParameter", 0);
+        this.output.register("maxParameter", 0);
+
+        /*
+        let parameter = minParameter;
+
+        let x = padding+startPosition-parameter*parameterLength;
+
+        console.log(minParameter, maxParameter, fullWidth, startPosition);
+        console.log(x);
+
+        parameter = maxParameter;
+
+        x = padding+startPosition-parameter*parameterLength;
+
+        console.log(x);
+        */
+    }
+
+    _update() {
+        //console.log("_update");
+
+        let elementWidth = this.input.elementWidth;
+        let itemWidth = this.input.itemWidth;
+        let itemSpacing = this.input.itemSpacing;
+        let padding = this.input.padding;
+
+        let visualWidth = elementWidth-2*padding;
+        let startPosition = (visualWidth-itemWidth)/2;
+
+        let parameterLength = itemWidth+itemSpacing;
+        let fullWidth = this.input.numberOfItems*parameterLength-itemSpacing;
+
+        let minParameter = 0;
+        let maxParameter = 0;
+
+        if(fullWidth > visualWidth) {
+            minParameter = startPosition/parameterLength;
+            maxParameter = (fullWidth-(visualWidth-startPosition))/parameterLength;
+        }
+        else {
+            startPosition = (visualWidth-fullWidth)/2;
+            parameterLength = 0;
+        }
+
+        this.output.startPosition = startPosition;
+        this.output.parameterLength = parameterLength;
+
+        this.output.minParameter = minParameter;
+        this.output.maxParameter = maxParameter;
+    }
+}

package/flow/updatefunctions/logic/index.js

@@ -11,6 +11,7 @@ export {default as Any} from "./Any.js";
 export {default as AllAtValue} from "./AllAtValue.js";
 export {default as WhenMatched} from "./WhenMatched.js";
 export {default as Invert} from "./Invert.js";
+export {default as PositionedItems} from "./PositionedItems.js";
 
 export let subtract = function(aInput1 = 0, aInput2 = 0) {
     let updateFunction = new Dbm.flow.updatefunctions.logic.Subtraction();

package/package.json

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

package/react/BaseObject.js

@@ -112,6 +112,10 @@ export default class BaseObject extends Component {
         return refToProperty;
     }
 
+    componentWillUnmount() {
+        
+    }
+
     render() {
         return this._renderMainElement();
     }

package/react/admin/index.js

@@ -2,4 +2,5 @@ export {default as CreatePage} from "./CreatePage.js";
 export {default as EditPage} from "./EditPage.js";
 export {default as SelectImageFromLibrary} from "./SelectImageFromLibrary.js";
 
-export * as editor from "./editor/index.js";
+export * as editor from "./editor/index.js";
+export * as pages from "./pages/index.js";

package/react/admin/pages/PageList.js

@@ -0,0 +1,66 @@
+import React from "react";
+import Dbm from "../../../index.js";
+
+export default class PageList extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        let graphApi = Dbm.getInstance().repository.getItem("graphApi").controller;
+
+        this.item.requireProperty("items", []);
+
+        let request = graphApi.requestRange(
+            [
+                {"type": "includePrivate"},
+                {"type": "includeDraft"},
+                {"type": "byObjectType", "objectType": "page"},
+            ],
+            ["urlRequest"]
+        );
+        Dbm.flow.addUpdateCommandWhenMatched(request.properties.status, Dbm.loading.LoadingStatus.LOADED, Dbm.commands.callFunction(this._loaded.bind(this), [request]));
+        
+    }
+
+    _loaded(aRequest) {
+        console.log("_loaded");
+        console.log(aRequest);
+
+        let items = [...aRequest.items];
+        let field = "url";
+        items.sort(function(aA, aB) {
+
+            let aValue = Dbm.objectPath(aA, field);
+            let bValue = Dbm.objectPath(aB, field);
+
+            if(aValue < bValue) {
+                return -1;
+            }
+            else if(aValue < bValue) {
+                return 1;
+            }
+            else {
+                return 0;
+            }
+        });
+
+        console.log(items);
+
+        this.item.setValue("items", items);
+    }
+
+    _renderMainElement() {
+
+        return React.createElement("div", {"className": "centered-site"},
+            React.createElement(Dbm.react.area.List, {"items": this.item.properties.items},
+                React.createElement("div", {},
+                    React.createElement(Dbm.react.text.Link, {"href": Dbm.react.source.contextVariable("item.url")}, 
+                        Dbm.react.text.text(Dbm.react.source.contextVariable("item.url")),
+                        " - ",
+                        Dbm.react.text.text(Dbm.react.source.contextVariable("item.title")),
+                    )
+                )
+            )
+        );
+    }
+}
+

package/react/admin/pages/index.js

@@ -0,0 +1 @@
+export {default as PageList} from "./PageList.js";

package/react/blocks/index.js

@@ -100,4 +100,5 @@ export let getDefaultEditorModule = function() {
 export let registerAllBlocks = function() {
     registerBlock("cookie/settings", "Cookie settings", createElement(Dbm.react.cookies.CookieSettings));
     registerBlock("login/loginForm", "Login form", createElement(Dbm.react.login.LoginForm));
+    registerBlock("admin/pageList", "Admin / Page list", createElement(Dbm.react.admin.pages.PageList), createElement(Dbm.react.admin.pages.PageList));
 }

package/react/image/ContainScaledImage.js

@@ -0,0 +1,37 @@
+import Dbm from "../../index.js";
+import React from "react";
+
+export default class ContainedScaledImage extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _removedUsedProps(aProps) {
+        delete aProps["image"];
+        delete aProps["targetWidth"];
+        delete aProps["targetHeight"];
+    }
+
+    _renderMainElement() {
+
+        let image = this.getPropValue("image");
+        let width = this.getPropValue("targetWidth");
+        let height = this.getPropValue("targetHeight");
+        let url = Dbm.utils.UrlFunctions.createContainScaledImageUrl(image, width, height);
+
+        let newProps = this._copyProps({src: url});
+
+        let altText = Dbm.objectPath(image, "altText");
+        if(altText) {
+            newProps["alt"] = altText;
+        }
+
+        let elementType = this.getPropValue("elementType");
+        if(elementType) {
+            newProps["elementType"] = elementType;
+        }
+        
+        return React.createElement(Dbm.react.image.Image, newProps, this.getPropValue("children"));
+        
+    }
+}

package/react/image/index.js

@@ -1,4 +1,5 @@
 export {default as Image} from "./Image.js";
 export {default as WidthScaledImage} from "./WidthScaledImage.js";
 export {default as CoverScaledImage} from "./CoverScaledImage.js";
+export {default as ContainScaledImage} from "./ContainScaledImage.js";
 export {default as LocalImage} from "./LocalImage.js";

package/site/SiteNavigation.js

@@ -172,7 +172,7 @@ export default class SiteNavigation extends Dbm.core.BaseObject {
 			}
 		}
 		
-		history.pushState({}, "Page", aUrl);
+		history.pushState({}, "", aUrl);
 		this.item.url = aUrl;
 		
 		this._addUrlToPath(aUrl);
@@ -201,9 +201,13 @@ export default class SiteNavigation extends Dbm.core.BaseObject {
 		}
     }
 
+	updateQueryString(aUrl) {
+		history.replaceState({}, "", aUrl);
+	}
+
     setUrlFromLocation() {
 		let url = document.location.href;
-		this.item.url = url
+		this.item.url = url;
 		
 		this._addUrlToPath(url);
 		

package/tracking/Controller.js

@@ -197,7 +197,7 @@ export default class Controller extends Dbm.core.BaseObject {
 
     }
 
-    trackCheckoutStrated(aProductOrProducts) {
+    trackCheckoutStarted(aProductOrProducts) {
         let items = Dbm.utils.ArrayFunctions.singleOrArray(aProductOrProducts);
 
         let data = {

package/tracking/MetaPixelTracker.js

@@ -4,7 +4,8 @@ export default class MetaPixelTracker extends Dbm.core.BaseObject {
     _construct() {
         super._construct();
 
-		this.item.requireProperty("pixelId")
+		this._isStarted = false;
+		this.item.requireProperty("pixelId");
     }
 
     _setupFunction() {
@@ -45,6 +46,7 @@ export default class MetaPixelTracker extends Dbm.core.BaseObject {
 	
 	startMarketingTracking() {
 
+		this._isStarted = true;
 		this._setupFunction();
 		Dbm.loading.loadScript("https://connect.facebook.net/en_US/fbevents.js");
 
@@ -85,6 +87,8 @@ export default class MetaPixelTracker extends Dbm.core.BaseObject {
         console.log("trackEvent");
         console.log(aEventName, aData);
 
+		if(!this._isStarted) return;
+
 		if(aEventName === "Purchase") {
 			window.fbq('track', 'Purchase', this._convertGooogleAnalyctisData(aData), {eventID: aData.transaction_id});
 		}
@@ -103,10 +107,12 @@ export default class MetaPixelTracker extends Dbm.core.BaseObject {
     }
 
     trackCurrentPage() {
+		if(!this._isStarted) return;
         window.fbq("track", "PageView");
     }
 
     trackPage(aUrl) {
+		if(!this._isStarted) return;
         window.fbq("track", "PageView");
     }
 }

package/tracking/TagManagerTracker.js

@@ -0,0 +1,58 @@
+import Dbm from "../index.js";
+
+export default class TagManagerTracker extends Dbm.core.BaseObject {
+    _construct() {
+        super._construct();
+
+		this.item.requireProperty("tagManagerId");
+		this.item.requireProperty("customDataLayerName");
+
+    }
+
+    loadTagManager() {
+
+		let id = this.item.tagManagerId;
+
+		let url = "https://www.googletagmanager.com/gtm.js?id="+id;
+		if(this.item.customDataLayerName) {
+			url += "&l=" + this.customDataLayerName;
+		}
+		Dbm.loading.loadScript(url);
+		
+		return this;
+	}
+
+	startTracking() {
+
+	}
+
+    startStatisticsTracking() {
+		console.log("TagManagerTracker::startStatisticsTracking");
+		this.loadTagManager();
+		
+		return this;
+	}
+	
+	startMarketingTracking() {
+		
+		this.loadTagManager();
+		
+		return this;
+	}
+
+	stopTracking() {
+		
+	}
+
+	trackEvent(aEventName, aData) {
+        
+    }
+
+    trackCurrentPage() {
+        
+    }
+
+    trackPage(aUrl) {
+        
+    }
+}

package/tracking/index.js

@@ -3,6 +3,7 @@ import Dbm from "../index.js";
 export {default as Controller} from "./Controller.js";
 export {default as DataLayerTracker} from "./DataLayerTracker.js";
 export {default as MetaPixelTracker} from "./MetaPixelTracker.js";
+export {default as TagManagerTracker} from "./TagManagerTracker.js";
 
 export const setup = function() {
     
@@ -19,5 +20,16 @@ export const setup = function() {
 export const addMetaPixel = function(aPixelId) {
     let tracker = new Dbm.tracking.MetaPixelTracker();
     tracker.item.pixelId = aPixelId;
-    Dbm.getInstance().repository.getItem("trackingController").controller.addTracker();
+    Dbm.getInstance().repository.getItem("trackingController").controller.addTracker(tracker.item);
+}
+
+export const setCurrency = function(aCurrency) {
+    Dbm.getInstance().repository.getItem("trackingController").currency = aCurrency;
+}
+
+export const addTagManagerTracking = function(aId) {
+    console.log("addTagManagerTracking");
+    let tracker = new Dbm.tracking.TagManagerTracker();
+    tracker.item.tagManagerId = aId;
+    Dbm.getInstance().repository.getItem("trackingController").controller.addTracker(tracker.item);
 }

package/utils/ArrayFunctions.js

@@ -138,7 +138,7 @@ export const mapField = function(aArray, aField) {
 
     let currentArray = aArray;
     let currentArrayLength = currentArray.length;
-    let returnArray = new Array(acurrentArrayLength);
+    let returnArray = new Array(currentArrayLength);
     for(let i = 0; i < currentArrayLength; i++) {
         returnArray[i] = Dbm.objectPath(aArray[i], aField);
     }