dbm 1.4.16 → 1.4.17

package/commands/index.js

@@ -57,7 +57,7 @@ export const trackEvent = function(aEventName, aAdditionalData = {}) {
 }
 
 export const performCommands = function(aCommands, aFromObject = null, aEventData = null) {
-    let currentArray = aCommands;
+    let currentArray = Dbm.utils.ArrayFunctions.singleOrArray(aCommands);
     let currentArrayLength = currentArray.length;
     for(let i = 0; i < currentArrayLength; i++) {
         let currentCommand = currentArray[i];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dbm",
-  "version": "1.4.16",
+  "version": "1.4.17",
   "main": "index.js",
   "type": "module",
   "exports": {

package/react/area/ModalDialog.js

@@ -0,0 +1,89 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class ModalDialog extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        this._isOpen = false;
+        let updateCommand = this._getScopedCallFunctionCommand(this._updateOpen);
+        
+        let startValue = this.getPropValue("startState") === "open";
+        let openProperty = this.getDynamicPropWithoutState("open", startValue);
+        openProperty.addUpdate(updateCommand);
+
+        let elementProperty = this.item.requireProperty("ref/mainElement", null);
+        elementProperty.addUpdate(updateCommand);
+        elementProperty.addUpdate(this._getScopedCallFunctionCommand(this._addCancelListener));
+    }
+
+    _removedUsedProps(aProps) {
+        delete aProps["startState"];
+        delete aProps["open"];
+        delete aProps["preventKeyboardClosing"];
+    }
+
+    _updateOpen() {
+        console.log("_updateOpen");
+        let open = this.getPropValue("open");
+
+        let element = this.item.mainElement;
+        if(element) {
+            console.log(this.item.mainElement, this.item);
+            if(open && !this._isOpen) {
+                element.showModal();
+                this._isOpen = true;
+            }
+            else if(this._isOpen) {
+                element.close();
+                this._isOpen = false;
+            }
+        }
+    }
+
+    _addCancelListener() {
+        console.log("_addCancelListener");
+        let element = this.item.mainElement;
+        if(element) {
+            element.addEventListener("cancel", this._callback_cancel.bind(this), true);
+        }
+    }
+
+    _callback_cancel(aEvent) {
+        console.log("_callback_cancel");
+        let preventKeyboardClosing = this.getPropValueWithoutNull("preventKeyboardClosing", false);
+        console.log(preventKeyboardClosing);
+
+        if(preventKeyboardClosing) {
+            aEvent.preventDefault();
+            aEvent.stopImmediatePropagation();
+
+            if(!aEvent.defaultPrevented) {
+                this._isOpen = false;
+                this.item.properties["props/open"].getMostUpstreamProperty().value = false;
+            }
+        }
+        else {
+            this._isOpen = false;
+            this.item.properties["props/open"].getMostUpstreamProperty().value = false;
+        }
+    }
+
+    componentDidMount() {
+        this._updateOpen();
+    }
+    
+    _renderMainElement() {
+        console.log("ModalDialog::_renderMainElement");
+        console.log(this);
+        
+        return this._createMainElement("dialog", {"className": "modal-dialog", "ref": this.createRef("mainElement")},
+            React.createElement(Dbm.react.area.HasData, {check: this.item.properties["props/open"]},
+                React.createElement(Dbm.react.context.AddContextVariables, {"values": {"open": this.item.properties["props/open"]}},
+                    this.getPropValue("children")
+                )
+            )
+        );
+    }
+}
+

package/react/area/index.js

@@ -18,6 +18,7 @@ export {default as SingleItemSlideshow} from "./SingleItemSlideshow.js";
 export {default as SlideshowSteps} from "./SlideshowSteps.js";
 export {default as RepeatedSlider} from "./RepeatedSlider.js";
 export {default as Layout} from "./Layout.js";
+export {default as ModalDialog} from "./ModalDialog.js";
 
 export const responsiveLayout = function(aDefaultLayout) {
     let newResponsiveLayout = new Dbm.react.area.ResponsiveLayout();

package/react/blocks/content/ContentBlock.js

@@ -5,9 +5,14 @@ export default class ContentBlock extends Dbm.react.BaseObject {
     _construct() {
         super._construct();
 
-        let contentBlockId = this.context.blockData.contentBlock;
-
         this.item.requireProperty("item", null);
+    }
+
+    _constructAfterProps() {
+      super._constructAfterProps();
+
+        let contentBlockId = this.getPropValueWithDefault("id", this.context.blockData.contentBlock);
+        console.log(contentBlockId);
 
         let graphApi = Dbm.getInstance().repository.getItem("cachedGraphApi").controller;
         {

package/react/cookies/CookieBar.js

@@ -37,6 +37,8 @@ export default class CookieBar extends Dbm.react.BaseObject {
         elementSize.input.properties.element.connectInput(this.item.properties.widthElement);
         elementSize.start();
 
+        let settingsUrl = this.getDynamicPropWithoutState("settingsUrl", "/cookie-settings/");
+
         let layoutSwitch = new Dbm.flow.updatefunctions.logic.RangeSwitch();
         layoutSwitch.input.properties.value.connectInput(elementSize.output.properties.width);
 
@@ -59,7 +61,7 @@ export default class CookieBar extends Dbm.react.BaseObject {
                 Dbm.react.text.translatedText("Only necessary", "onlyNecessary")
             ),
             React.createElement("div", {"className": "spacing small"}),
-            React.createElement(Dbm.react.text.Link, {"href": "/cookie-settings/", className:"custom-styled-link"},
+            React.createElement(Dbm.react.text.Link, {"href": settingsUrl, className:"custom-styled-link"},
                 React.createElement("div", {"className": "secondary-button standard-button-padding text-align-center"},
                     Dbm.react.text.translatedText("Settings", "settings")
                 )
@@ -81,7 +83,7 @@ export default class CookieBar extends Dbm.react.BaseObject {
             
             React.createElement("div", {"className": "flex-row small-item-spacing"}, 
                 React.createElement("div", {"className": "flex-row-item"},
-                    React.createElement(Dbm.react.text.Link, {"href": "/cookie-settings/", className:"custom-styled-link"},
+                    React.createElement(Dbm.react.text.Link, {"href": settingsUrl, className:"custom-styled-link"},
                         React.createElement("div", {"className": "secondary-button standard-button-padding"},
                             Dbm.react.text.translatedText("Settings", "settings")
                         )
@@ -115,7 +117,7 @@ export default class CookieBar extends Dbm.react.BaseObject {
                 React.createElement("div", {"className": "flex-row-item"}, 
                     React.createElement("div", {"className": "flex-row small-item-spacing"}, 
                         React.createElement("div", {"className": "flex-row-item"},
-                            React.createElement(Dbm.react.text.Link, {"href": "/cookie-settings/", className:"custom-styled-link"},
+                            React.createElement(Dbm.react.text.Link, {"href": settingsUrl, className:"custom-styled-link"},
                                 React.createElement("div", {"className": "secondary-button standard-button-padding"}, 
                                     Dbm.react.text.translatedText("Settings", "settings")
                                 )

package/react/cookies/CookieOverlayMessage.js

@@ -37,6 +37,8 @@ export default class CookieOverlayMessage extends Dbm.react.BaseObject {
         elementSize.input.properties.element.connectInput(this.item.properties.widthElement);
         elementSize.start();
 
+        let settingsUrl = this.getDynamicPropWithoutState("settingsUrl", "/cookie-settings/");
+
         let layoutSwitch = new Dbm.flow.updatefunctions.logic.RangeSwitch();
         layoutSwitch.input.properties.value.connectInput(elementSize.output.properties.width);
 
@@ -66,7 +68,7 @@ export default class CookieOverlayMessage extends Dbm.react.BaseObject {
                     Dbm.react.text.translatedText("Take full control over how we use cookies:", "text/settingsLinkDescription")
                 ),
                 React.createElement("div", {"className": "spacing small"}),
-                React.createElement("a", {"href": "/cookie-settings/", className:"custom-styled-link"},
+                React.createElement("a", {"href": settingsUrl, className:"custom-styled-link"},
                     React.createElement("div", {"className": "secondary-button standard-button-padding text-align-center"},
                         Dbm.react.text.translatedText("Settings", "settings")
                     )
@@ -106,7 +108,7 @@ export default class CookieOverlayMessage extends Dbm.react.BaseObject {
                         Dbm.react.text.translatedText("Take full control over how we use cookies:", "text/settingsLinkDescription")
                     ),
                     React.createElement("div", {"className": "flex-row-item"},
-                        React.createElement("a", {"href": "/cookie-settings/", className:"custom-styled-link"},
+                        React.createElement("a", {"href": settingsUrl, className:"custom-styled-link"},
                             React.createElement("div", {"className": "cookie-settings-link"}, 
                                 Dbm.react.text.translatedText("Settings", "settings")
                             )

package/tracking/Controller.js

@@ -187,6 +187,18 @@ export default class Controller extends Dbm.core.BaseObject {
         this.trackEvent("Product view", data, "ecommerce");
     }
 
+    trackProductListView(aProducts, aListId = null) {
+
+        let additionalData = {};
+        if(aListId) {
+            additionalData["item_list_id"] = aListId;
+        }
+
+        let data = this.createProductItemsSummary(aProducts, additionalData);
+
+        this.trackEvent("Product list view", data, "ecommerce");
+    }
+
     trackAddedToCart(aProductOrProducts) {
         let data = this.createProductItemsSummary(aProductOrProducts);
 

package/tracking/ConversionLinker.js

@@ -0,0 +1,53 @@
+import Dbm from "../index.js";
+
+export default class ConversionLinker extends Dbm.core.BaseObject {
+    _construct() {
+        super._construct();
+
+		this.item.setValue("linkerDomains", [document.location.host]);
+    }
+	
+	_gtag() {
+		window.dataLayer.push(arguments);
+		
+		return this;
+	}
+
+    startTracking() {
+		if(!window.dataLayer) {
+			window.dataLayer = [];
+		}
+		
+		return this;
+	}
+
+    startStatisticsTracking() {
+		
+		return this;
+	}
+	
+	startMarketingTracking() {
+		
+		this._gtag("set", "linker", {"domains": this.item.linkerDomains})
+		
+		return this;
+	}
+	
+	stopTracking() {
+		
+		
+		return this;
+	}
+
+    trackEvent(aEventName, aData, aDataStructure = null) {
+        
+    }
+
+    trackCurrentPage() {
+        
+    }
+
+    trackPage(aUrl, aTitle = null) {
+		
+    }
+}

package/tracking/PageListTracker.js

@@ -0,0 +1,46 @@
+import Dbm from "../index.js";
+
+export default class PageListTracker extends Dbm.core.BaseObject {
+    _construct() {
+        super._construct();
+
+		this.item.requireProperty("items", []);
+        this.item.requireProperty("listId", null);
+
+        let allLoaded = Dbm.flow.updatefunctions.logic.allAtValue(true);
+        this.item.requireProperty("allLoaded", allLoaded);
+
+        let rendered = this.item.requireProperty("rendered", false);
+        allLoaded.addCheck(rendered);
+
+        this.item.requireProperty("ready", false).addUpdateWhenMatched(true, this._getScopedCallFunctionCommand(this._readyToSend));
+        this.item.properties.ready.connectInput(allLoaded.output.properties.value);
+    }
+
+    startRenderTime(aTime = 0.2) {
+        this.item.properties.rendered.delayValue(true, aTime);
+    }
+
+    createItem() {
+        let newItem = new Dbm.repository.Item();
+
+        let readyProperty = newItem.requireProperty("ready", false);
+        newItem.setValue("item", null);
+        this.item.addToArray("items", newItem);
+
+        this.item.allLoaded.addCheck(readyProperty);
+
+        return newItem;
+    }
+
+    _readyToSend() {
+        console.log("_readyToSend");
+
+        let products = Dbm.utils.ArrayFunctions.removeValues(Dbm.utils.ArrayFunctions.mapField(this.item.items, "item"), [null, undefined]);
+
+        if(products.length) {
+            let trackingController = Dbm.repository.getControllerIfExists("trackingController");
+            trackingController.trackProductListView(products, this.item.listId);
+        }
+    }
+}

package/tracking/index.js

@@ -6,6 +6,8 @@ export {default as MetaPixelTracker} from "./MetaPixelTracker.js";
 export {default as TagManagerTracker} from "./TagManagerTracker.js";
 export {default as GtagTracker} from "./GtagTracker.js";
 export {default as SingleAccountMetaPixelTracker} from "./SingleAccountMetaPixelTracker.js";
+export {default as PageListTracker} from "./PageListTracker.js";
+export {default as ConversionLinker} from "./ConversionLinker.js";
 
 export const addStartTagManagerMarker = function() {
     window.dataLayer=window.dataLayer || [];
@@ -26,6 +28,8 @@ export const setup = function() {
     let dataLayerTracker = new Dbm.tracking.DataLayerTracker();
     dataLayerTracker.item.register("tracking/dataLayerTracker");
     controller.addTracker(dataLayerTracker.item);
+
+    return controller;
 }
 
 export const setupExternalTagManager = function() {
@@ -40,6 +44,8 @@ export const setupExternalTagManager = function() {
     dataLayerTracker.item.setConsent = false;
     dataLayerTracker.item.register("tracking/dataLayerTracker");
     controller.addTracker(dataLayerTracker.item);
+
+    return controller;
 }
 
 export const addMetaPixel = function(aPixelId) {
@@ -47,6 +53,17 @@ export const addMetaPixel = function(aPixelId) {
     tracker.item.pixelId = aPixelId;
     tracker.item.register("tracking/metaPixelTracker");
     Dbm.getRepositoryItem("trackingController").controller.addTracker(tracker.item);
+
+    return tracker;
+}
+
+export const addSingleAccountMetaPixel = function(aPixelId) {
+    let tracker = new Dbm.tracking.SingleAccountMetaPixelTracker();
+    tracker.item.pixelId = aPixelId;
+    tracker.item.register("tracking/metaPixelTracker/" + aPixelId);
+    Dbm.getRepositoryItem("trackingController").controller.addTracker(tracker.item);
+
+    return tracker;
 }
 
 export const setCurrency = function(aCurrency) {
@@ -58,4 +75,21 @@ export const addTagManagerTracking = function(aId) {
     let tracker = new Dbm.tracking.TagManagerTracker();
     tracker.item.tagManagerId = aId;
     Dbm.getRepositoryItem("trackingController").controller.addTracker(tracker.item);
+
+    return tracker;
+}
+
+export const addGtagTracker = function(aId) {
+    let tracker = new Dbm.tracking.GtagTracker();
+    tracker.item.tagId = aId;
+    Dbm.getRepositoryItem("trackingController").controller.addTracker(tracker.item);
+
+    return tracker;
+}
+
+export const setupDefaultConversionLinker = function() {
+    let tracker = new Dbm.tracking.ConversionLinker();
+    Dbm.getRepositoryItem("trackingController").controller.addTracker(tracker.item);
+
+    return tracker;
 }