dbm 1.1.2 → 1.1.4

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.2",
+  "version": "1.1.4",
   "main": "index.js",
   "type": "module",
   "scripts": {},

package/react/admin/EditPage.js

@@ -107,7 +107,7 @@ export default class EditPage extends Dbm.react.BaseObject {
                     React.createElement("div", {className: "spacing micro"}),
                     React.createElement("div", {className: "flex-row justify-between"},
                         React.createElement("div", {className: "flex-row-item"},
-                            React.createElement("div", {onClick: () => {this._generateSeoSummary()}}, "Generate"),
+                            React.createElement("div", {onClick: () => {this._generateSeoSummary()}, className: "action-button action-button-padding"}, "Generate"),
                         ),
                         React.createElement("div", {className: "flex-row-item"},
                             Dbm.react.text.text(this.item.properties.descriptionLength),

package/react/admin/editor/fields/ImageField.js

@@ -35,7 +35,7 @@ export default class ImageField extends Dbm.react.BaseObject {
                 React.createElement("div", {},
                     React.createElement(Dbm.react.area.HasData, {check: Dbm.react.source.contextVariable("moduleData.editorData.data." + fieldName + ".id"), checkType: "invert/default"},
                         React.createElement(Dbm.react.interaction.CommandButton, {command: Dbm.commands.callFunction(this._addToLibrary.bind(this))},
-                            React.createElement("div", {},
+                            React.createElement("div", {className: "action-button action-button-padding"},
                                 "Add to library"
                             )
                         )
@@ -43,17 +43,18 @@ export default class ImageField extends Dbm.react.BaseObject {
                     ),
                     React.createElement(Dbm.react.area.HasData, {check: Dbm.react.source.contextVariable("moduleData.editorData.data." + fieldName + ".id")},
                         React.createElement(Dbm.react.form.FormField, {value: this.item.properties.altText, className: "standard-field standard-field-padding full-width"}),
+                        React.createElement("div", {className: "spacing micro"}),
                         React.createElement("div", {className: "flex-row small-item-spacing"},
                             React.createElement("div", {className: "flex-row-item"},
                                 React.createElement(Dbm.react.interaction.CommandButton, {command: Dbm.commands.callFunction(this._generateAltText.bind(this))},
-                                    React.createElement("div", {},
+                                    React.createElement("div", {className: "action-button action-button-padding"},
                                         "Generate"
                                     )
                                 )
                             ),
                             React.createElement("div", {className: "flex-row-item"},
                                 React.createElement(Dbm.react.interaction.CommandButton, {command: Dbm.commands.callFunction(this._saveAltTextToLibrary.bind(this))},
-                                    React.createElement("div", {},
+                                    React.createElement("div", {className: "action-button action-button-padding"},
                                         "Save to library"
                                     )
                                 )

package/react/image/CoverScaledImage.js

@@ -21,6 +21,11 @@ export default class CoverScaledImage extends Dbm.react.BaseObject {
 
         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;

package/react/image/Image.js

@@ -11,6 +11,7 @@ export default class Image extends Dbm.react.BaseObject {
         let isDiv = (elementType !== "img");
         if(isDiv) {
             delete aProps["src"];
+            delete aProps["alt"];
         }
     }
 
@@ -26,7 +27,15 @@ export default class Image extends Dbm.react.BaseObject {
             };
             let className = "image";
 
-            return this._createMainElement("div", {style: imageStyle, className: className}, this.getPropValue("children"));
+            let props = {style: imageStyle, className: className};
+
+            let altText = this.getPropValue("alt");
+            if(altText) {
+                props["role"] = "img";
+                props["aria-label"] = altText;
+            }
+
+            return this._createMainElement("div", props, this.getPropValue("children"));
         }
         else {
             let className = "image";

package/react/image/WidthScaledImage.js

@@ -19,6 +19,11 @@ export default class WidthScaledImage extends Dbm.react.BaseObject {
 
         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;

package/site/BrowserUpdater.js

@@ -29,11 +29,29 @@ export default class BrowserUpdater extends Dbm.core.BaseObject {
 
 		let title = Dbm.objectPath(this.item.pageData, "page.title") + this.item.titleSuffix;
 		document.title = title;
-		document.querySelector('meta[property="og:title"]').setAttribute("content", title);
+		{
+			let element = document.querySelector('meta[property="og:title"]');
+			if(element) {
+				element.setAttribute("content", title);
+			}
+		}
+		
 
 		let description = Dbm.objectPath(this.item.pageData, "page.meta/description");
-		document.querySelector('meta[name="description"]').setAttribute("content", description);
-		document.querySelector('meta[property="og:description"]').setAttribute("content", description);
+		{
+			let element = document.querySelector('meta[name="description"]');
+			if(element) {
+				element.setAttribute("content", description);
+			}
+		}
+		
+		{
+			let element = document.querySelector('meta[property="og:description"]');
+			if(element) {
+				element.setAttribute("content", description);
+			}
+		}
+		
 
 		//METODO: set canonical
 

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);
+
+    }
+
+    trackCheckoutStrated(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,10 @@ 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();
 }

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(acurrentArrayLength);
+    for(let i = 0; i < currentArrayLength; i++) {
+        returnArray[i] = Dbm.objectPath(aArray[i], aField);
+    }
+
     return returnArray;
 }

package/utils/UrlFunctions.js

@@ -16,7 +16,15 @@ export let createScaledImageUrl = function(aImageData, aWantedWidth) {
                 100*Math.round(window.devicePixelRatio*window.innerWidth/100)
             )
         );
-        url = aImageData["resizeUrl"].split("{scale}").join("width=" + scaleToWidth);
+
+        let scaleString =  "width=" + scaleToWidth;
+
+        let format = "webp";
+        if(format) {
+            scaleString += ",format=" + format;
+        }
+
+        url = aImageData["resizeUrl"].split("{scale}").join(scaleString);
     }
 
     return url;
@@ -43,7 +51,14 @@ export let createCoverScaledImageUrl = function(aImageData, aWantedWidth, aWante
 
         let scaleToHeight = Math.round(aWantedHeight*scaleToWidth/aWantedWidth);
 
-        url = aImageData["resizeUrl"].split("{scale}").join("width=" + scaleToWidth + ",height=" + scaleToHeight + ",fit=cover");
+        let scaleString = "width=" + scaleToWidth + ",height=" + scaleToHeight + ",fit=cover";
+
+        let format = "webp";
+        if(format) {
+            scaleString += ",format=" + format;
+        }
+
+        url = aImageData["resizeUrl"].split("{scale}").join(scaleString);
     }
 
     return url;
@@ -60,7 +75,14 @@ export const getContainScaledImageUrl = function(aUrl, aWantedWidth, aWantedHeig
 
     let scaleToHeight = Math.round(aWantedHeight*scaleToWidth/aWantedWidth);
 
-    return aUrl.split("{scale}").join("width=" + scaleToWidth + ",height=" + scaleToHeight + ",fit=contain");
+    let scaleString = "width=" + scaleToWidth + ",height=" + scaleToHeight + ",fit=contain";
+
+    let format = "webp";
+    if(format) {
+        scaleString += ",format=" + format;
+    }
+
+    return aUrl.split("{scale}").join(scaleString);
 }
 
 export let createContainScaledImageUrl = function(aImageData, aWantedWidth, aWantedHeight) {