dbm 1.1.3 → 1.1.5

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,3 @@
 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";

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/graphapi/webclient/decode/index.js

@@ -93,4 +93,12 @@ export const fullSetup = function() {
         currentDecoder.item.setValue("encodingType", name);
         currentDecoder.item.register(decodePrefix + name);
     }
+
+    {
+        let name = "visibility";
+        let currentDecoder = new Dbm.graphapi.webclient.decode.DecodeBaseObject();
+        currentDecoder.item.setValue("copyFields", ["visibility"]);
+        currentDecoder.item.setValue("encodingType", name);
+        currentDecoder.item.register(decodePrefix + name);
+    }
 }

package/package.json

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

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

@@ -6,6 +6,7 @@ export default class Controller extends Dbm.core.BaseObject {
         super._construct();
 
         this.item.setValue("trackers", []);
+        this.item.setValue("currency", "EUR");
 
         Dbm.flow.addDirectUpdateCommand(this.item.requireProperty("active", false), Dbm.commands.callFunction(this._updateActiveStatus.bind(this)));
 
@@ -154,4 +155,84 @@ export default class Controller extends Dbm.core.BaseObject {
             }
         }
     }
+
+    _getValueFromItems(aItems) {
+        let value = 0;
+
+        let currentArray = aItems;
+        let currentArrayLength = currentArray.length;
+        for(let i = 0; i < currentArrayLength; i++) {
+            let currentItem = currentArray[i];
+
+            let quantity = currentItem.quantity ? currentItem.quantity : 1;
+            value += quantity*currentItem.price;
+        }
+
+        return value; 
+    }
+
+    trackProductView(aProduct) {
+
+        let items = [aProduct];
+
+        let data = {
+            currency: this.item.currency,
+            value: this._getValueFromItems(items),
+            items: items
+        }
+
+        this.trackEvent("Product view", data);
+    }
+
+    trackAddedToCart(aProductOrProducts) {
+        let items = Dbm.utils.ArrayFunctions.singleOrArray(aProductOrProducts);
+
+        let data = {
+            currency: this.item.currency,
+            value: this._getValueFromItems(items),
+            items: items
+        }
+
+        this.trackEvent("Added to cart", data);
+
+    }
+
+    trackCheckoutStarted(aProductOrProducts) {
+        let items = Dbm.utils.ArrayFunctions.singleOrArray(aProductOrProducts);
+
+        let data = {
+            currency: this.item.currency,
+            value: this._getValueFromItems(items),
+            items: items
+        }
+
+        this.trackEvent("Checkout started", data);
+    }
+
+    trackPurchase(aTransactionId, aProductOrProducts) {
+        let items = Dbm.utils.ArrayFunctions.singleOrArray(aProductOrProducts);
+
+        let data = {
+            transaction_id: aTransactionId,
+            currency: this.item.currency,
+            value: this._getValueFromItems(items),
+            items: items
+        }
+
+        this.trackEvent("Purchase", data);
+    }
+
+    createProductItemData(aId, aName, aPrice, aQuantity = 1, aAddtionalData = {}) {
+
+        let returnObject = {
+            ...aAddtionalData,
+            id: aId,
+            item_id: aId,
+            item_name: aName,
+            price: aPrice,
+            quantity: aQuantity
+        }
+
+        return returnObject;
+    }
 }

package/tracking/DataLayerTracker.js

@@ -1,7 +1,6 @@
 import Dbm from "../index.js";
-import Cookies from "js-cookie";
 
-export default class Controller extends Dbm.core.BaseObject {
+export default class DataLayerTracker extends Dbm.core.BaseObject {
     _construct() {
         super._construct();
     }
@@ -68,6 +67,7 @@ export default class Controller extends Dbm.core.BaseObject {
         console.log(aEventName, aData);
 
         this.addToDataLayer({"event": "trackEvent", "value": {"name": aEventName, "data": aData}});
+		this._gtag("event", aEventName, aData);
     }
 
     trackCurrentPage() {

package/tracking/MetaPixelTracker.js

@@ -0,0 +1,112 @@
+import Dbm from "../index.js";
+
+export default class MetaPixelTracker extends Dbm.core.BaseObject {
+    _construct() {
+        super._construct();
+
+		this.item.requireProperty("pixelId")
+    }
+
+    _setupFunction() {
+		
+		if(window.fbq) return;
+		
+		let fbq = function() {
+			fbq.callMethod ? fbq.callMethod.apply(fbq, arguments) : fbq.queue.push(arguments);
+		}
+		window.fbq = fbq;
+		
+		if(!window._fbq) {
+			window._fbq = fbq;
+		}
+		
+		fbq.push = fbq;
+		fbq.loaded = true;
+		fbq.version = "2.0";
+		fbq.queue = [];
+		fbq.disablePushState = true;
+		
+		return this;
+	}
+
+    startTracking() {
+
+		//MENOTE: do nothing
+		
+		return this;
+	}
+
+    startStatisticsTracking() {
+
+		//MENOTE: do nothing
+		
+		return this;
+	}
+	
+	startMarketingTracking() {
+
+		this._setupFunction();
+		Dbm.loading.loadScript("https://connect.facebook.net/en_US/fbevents.js");
+
+		let pixelId = this.item.pixelId;
+		
+		if(this.item.pixelId) {
+			window.fbq("init", this.item.pixelId);
+			window.fbq("track", "PageView");
+		}
+		
+		return this;
+	}
+	
+	stopTracking() {
+		
+		return this;
+	}
+
+	_convertGooogleAnalyctisData(aData) {
+
+		let data = {
+			content_type: "product",
+			value: aData.value,
+			currency: aData.currency,
+			contents: aData.items,
+			num_items: aData.items.length,
+			content_ids: Dbm.utils.ArrayFunctions.mapField(aData.items, "id")
+		};
+
+		if(aData.items.length === 1) {
+			data["content_name"] = aData.items[0]["item_name"];
+		}
+
+		return data;
+	}
+
+    trackEvent(aEventName, aData) {
+        console.log("trackEvent");
+        console.log(aEventName, aData);
+
+		if(aEventName === "Purchase") {
+			window.fbq('track', 'Purchase', this._convertGooogleAnalyctisData(aData), {eventID: aData.transaction_id});
+		}
+		else if(aEventName === "Product view") {
+			window.fbq('track', 'ViewContent', this._convertGooogleAnalyctisData(aData));
+		}
+		else if(aEventName === "Added to cart") {
+			window.fbq('track', 'AddToCart', this._convertGooogleAnalyctisData(aData));
+		}
+		else if(aEventName === "Checkout started") {
+			window.fbq('track', 'InitiateCheckout', this._convertGooogleAnalyctisData(aData));
+		}
+		else {
+			window.fbq("trackCustom", aEventName, aData);
+		}
+    }
+
+    trackCurrentPage() {
+        window.fbq("track", "PageView");
+    }
+
+    trackPage(aUrl) {
+        window.fbq("track", "PageView");
+    }
+}

package/tracking/index.js

@@ -2,8 +2,9 @@ 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 let setup = function() {
+export const setup = function() {
     
     let controller = new Dbm.tracking.Controller();
     controller.item.register("trackingController");
@@ -13,4 +14,14 @@ export let setup = function() {
 
     let dataLayerTracker = new Dbm.tracking.DataLayerTracker();
     controller.addTracker(dataLayerTracker.item);
+}
+
+export const addMetaPixel = function(aPixelId) {
+    let tracker = new Dbm.tracking.MetaPixelTracker();
+    tracker.item.pixelId = aPixelId;
+    Dbm.getInstance().repository.getItem("trackingController").controller.addTracker(tracker.item);
+}
+
+export const setCurrency = function(aCurrency) {
+    Dbm.getInstance().repository.getItem("trackingController").currency = aCurrency;
 }

package/utils/ArrayFunctions.js

@@ -130,5 +130,18 @@ export const filterByField = function(aArray, aField, aValue) {
         }
     }
 
+    return returnArray;
+}
+
+export const mapField = function(aArray, aField) {
+   
+
+    let currentArray = aArray;
+    let currentArrayLength = currentArray.length;
+    let returnArray = new Array(currentArrayLength);
+    for(let i = 0; i < currentArrayLength; i++) {
+        returnArray[i] = Dbm.objectPath(aArray[i], aField);
+    }
+
     return returnArray;
 }