dbm 1.1.5 → 1.1.7

package/flow/controllers/index.js

@@ -1,3 +1,4 @@
 export * as select from "./select/index.js";
 export * as edit from "./edit/index.js";
-export * as transform from "./transform/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,176 @@
+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.properties.xParameter.getMostUpstreamProperty().value = Math.max(minX, Math.min(x, maxX));
+        this.item.properties.yParameter.getMostUpstreamProperty().value = Math.max(minY, Math.min(y, maxY));
+	}
+	
+	_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/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/graphapi/webclient/WebSocketConnection.js

@@ -65,6 +65,7 @@ export default class WebSocketConnection extends Dbm.core.BaseObject {
     requestRange(aSelect, aEncode) {
         let item = this._getRequestItem();
         item.setValue("requestData", {"type": "range", "select": aSelect, "encode": aEncode, "requestId": item.id});
+        item.requireProperty("items", []);
         this._runRequest(item);
         
         return item;

package/graphapi/webclient/decode/DecodeBaseObject.js

@@ -41,7 +41,12 @@ export default class DecodeBaseObject extends Dbm.core.BaseObject {
             for(let i = 0; i < currentArrayLength; i++) {
                 let currentField = currentArray[i];
                 let currentIds = aData[currentField];
-                aItem.setValue(currentField, Dbm.getInstance().repository.getItems(currentIds));
+                if(currentIds) {
+                    aItem.setValue(currentField, Dbm.getInstance().repository.getItems(currentIds));
+                }
+                else {
+                    aItem.setValue(currentField, []);
+                }
             }
         }
     }

package/graphapi/webclient/decode/index.js

@@ -63,6 +63,14 @@ export const fullSetup = function() {
         currentDecoder.item.register(decodePrefix + name);
     }
 
+    {
+        let name = "pageRepresentation";
+        let currentDecoder = new Dbm.graphapi.webclient.decode.DecodeBaseObject();
+        currentDecoder.item.setValue("copyLink", ["representing"]);
+        currentDecoder.item.setValue("encodingType", name);
+        currentDecoder.item.register(decodePrefix + name);
+    }
+
     {
         let name = "navigationName";
         let currentDecoder = new Dbm.graphapi.webclient.decode.DecodeBaseObject();
@@ -101,4 +109,12 @@ export const fullSetup = function() {
         currentDecoder.item.setValue("encodingType", name);
         currentDecoder.item.register(decodePrefix + name);
     }
+
+    {
+        let name = "representingPage";
+        let currentDecoder = new Dbm.graphapi.webclient.decode.DecodeBaseObject();
+        currentDecoder.item.setValue("copyLink", ["representingPage"]);
+        currentDecoder.item.setValue("encodingType", name);
+        currentDecoder.item.register(decodePrefix + name);
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dbm",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "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/EditPage.js

@@ -22,6 +22,8 @@ export default class EditPage extends Dbm.react.BaseObject {
         let descriptionEditor = itemEditor.addFieldEditor("meta/description", page["meta/description"], "meta/description");
         let descriptionLength = Dbm.flow.updatefunctions.basic.length(descriptionEditor.item.editValue.value);
         this.item.requireProperty("descriptionLength", 0).connectInput(descriptionLength.output.properties.length);
+
+        this.item.requireProperty("importText", "");
     }
 
     _save() {
@@ -37,11 +39,64 @@ export default class EditPage extends Dbm.react.BaseObject {
         itemSaveData.setField("lastModified", (new Date()).toISOString());
         itemSaveData.createChange("clearCache", {});
 
-        console.log(editorGroup, saveData);
-
         saveData.save();
     }
 
+    _export() {
+        let editorGroup = this.item.editorGroup;
+
+        let page = this.context.page;
+        let id = page.id;
+        let itemEditor = editorGroup.getItemEditor(id);
+        let url = itemEditor.addFieldEditor("url").item.editValue.value.value;   
+        let content = itemEditor.addFieldEditor("content").item.editValue.value.value;
+
+        let blob = new Blob([JSON.stringify(content, null, 2)], { type: 'application/json' });
+        let downloadUrl = URL.createObjectURL(blob);
+
+        let fileName = id  + Dbm.utils.StringFunctions.createNiceFilePath(url) + ".json";
+        let a = document.createElement('a');
+        a.href = downloadUrl;
+        a.download = fileName;
+        document.body.appendChild(a);
+        a.click();
+
+        document.body.removeChild(a);
+        URL.revokeObjectURL(downloadUrl);
+    }
+
+    _import() {
+
+        let editorGroup = this.item.editorGroup;
+
+        let page = this.context.page;
+        let id = page.id;
+        let itemEditor = editorGroup.getItemEditor(id); 
+        
+
+        let data = JSON.parse(this.item.importText);
+        console.log(data);
+
+        let newContent = {...itemEditor.addFieldEditor("content").item.editValue.value.value};
+        if(!newContent) {
+            newContent = {};
+        }
+        if(!newContent.blocks) {
+            newContent.blocks = [];
+        }
+
+        let currentArray = data.blocks;
+        let currentArrayLength = currentArray.length;
+        for(let i = 0; i < currentArrayLength; i++) {
+            let currentBlock = currentArray[i];
+            delete currentBlock["id"];
+            newContent.blocks.push(currentBlock);
+        }
+        
+        itemEditor.addFieldEditor("content").item.editValue.value.value = newContent;
+        this.item.editor.contentUpdatedExternally();
+    }
+
     _generateSeoSummary() {
 
         let page = this.context.page;
@@ -122,7 +177,15 @@ export default class EditPage extends Dbm.react.BaseObject {
                         "Content"
                     ),
                     React.createElement("div", {},
-                        React.createElement(Dbm.react.admin.editor.Editor, {"value": itemEditor.getEditor("content").item.editValue.value}),
+                        React.createElement(Dbm.react.admin.editor.Editor, {"value": itemEditor.getEditor("content").item.editValue.value, "ref": this.createRef("editor")}),
+                    ),
+                    React.createElement("div", {className: "spacing small"}),
+                    React.createElement("div", {"className": "standard-button standard-button-padding", "onClick": () => {this._export()}},
+                        "Export"
+                    ),
+                    React.createElement(Dbm.react.form.FormField, {value: this.item.properties.importText}),
+                    React.createElement("div", {"className": "standard-button standard-button-padding", "onClick": () => {this._import()}},
+                        "Import"
                     )
                 ),
                 React.createElement("div", {className: "spacing standard"}),

package/react/admin/editor/Editor.js

@@ -153,6 +153,14 @@ export default class Editor extends Dbm.react.BaseObject {
         }
     }
 
+    contentUpdatedExternally() {
+
+        let data = this.getDynamicProp("value").value;
+        this.item.editor.render(data);
+
+        return this;
+    }
+
     /*
     _save() {
         this.item.editor.save().then((aOutputData) => {

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

@@ -0,0 +1,57 @@
+import React from "react";
+import Dbm from "../../../../index.js";
+
+export default class SelectObjectField extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        this._valueChangedBound = this._valueChanged.bind(this);
+        this._objectChangedBound = this._objectChanged.bind(this);
+
+        Dbm.flow.addUpdateCommand(this.item.requireProperty("value", this._getObjectData()), Dbm.commands.callFunction(this._valueChangedBound));
+
+        let editorData = Dbm.objectPath(this.context, "moduleData.editorData");
+        Dbm.flow.addUpdateCommand(editorData.properties.data, Dbm.commands.callFunction(this._objectChangedBound));
+    }
+
+    _getObjectData() {
+        let fieldName = this.getPropValue("name");
+
+        let editorData = Dbm.objectPath(this.context, "moduleData.editorData");
+
+        console.log(">>>>>", editorData);
+
+        let returnData = editorData.data[fieldName];
+        if(!returnData) {
+            returnData = 0;
+        }
+
+        return returnData;
+    }
+
+
+    _valueChanged() {
+        //console.log("_valueChanged");
+
+        let fieldName = this.getPropValue("name");
+        let newValue = this.item.value;
+        let editorData = Dbm.objectPath(this.context, "moduleData.editorData");
+
+        let newData = {...editorData.data};
+        newData[fieldName] = newValue;
+
+        editorData.data = newData;
+
+        this.context.moduleData.editorData.editorBlock.dataUpdated();
+    }
+
+    _objectChanged() {
+        //console.log("_objectChanged");
+
+        this.item.value = this._getObjectData();
+    }
+
+    _renderMainElement() {
+        return this._createMainElement(Dbm.react.form.GraphApiObjectSelection, {value: this.item.properties.value, objectType: this.getPropValue("objectType"), className: "standard-field standard-field-padding full-width"});
+    }
+}

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

@@ -1,4 +1,5 @@
 export {default as TextField} from "./TextField.js";
 export {default as RichTextField} from "./RichTextField.js";
 export {default as ImageField} from "./ImageField.js";
-export {default as CheckboxField} from "./CheckboxField.js";
+export {default as CheckboxField} from "./CheckboxField.js";
+export {default as SelectObjectField} from "./SelectObjectField.js";

package/react/area/List.js

@@ -27,6 +27,10 @@ export default class List extends Dbm.react.BaseObject {
         let mainChildren = slots.main;
 
         let currentArray = items;
+        if(!currentArray || isNaN(currentArray.length)) {
+            console.error("Items is not an array", this);
+            return null;
+        }
         let currentArrayLength = currentArray.length;
         let newChildren = [];
         for(let i = 0; i < currentArrayLength; i++) {

package/react/context/AddItemToContext.js

@@ -0,0 +1,24 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class AddItemToContext extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    render() {
+        
+        let item = this.getPropValue("item");
+        let id = Dbm.objectPath(item, "id");
+
+        let as = this.getPropValue("as");
+        if(!as) {
+            as = "item";
+        }
+
+        let values = {};
+        values[as] = item;
+
+        return React.createElement(Dbm.react.context.AddContextVariables, {"values": values, "key": id}, this.props.children);
+    }
+}

package/react/context/index.js

@@ -1,2 +1,3 @@
 export {default as Context} from "./Context.js";
-export {default as AddContextVariables} from "./AddContextVariables.js";
+export {default as AddContextVariables} from "./AddContextVariables.js";
+export {default as AddItemToContext} from "./AddItemToContext.js";

package/react/form/GraphApiObjectSelection.js

@@ -0,0 +1,53 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class GraphApiObjectSelection extends Dbm.react.form.Selection {
+    _construct() {
+        super._construct();
+
+        this.getDynamicProp("value", "");
+        this.item.requireProperty("items", []);
+
+        let objectType = this.getPropValue("objectType")
+
+        let graphApi = Dbm.getInstance().repository.getItem("graphApi").controller;
+        {
+            let request = graphApi.requestRange(
+                [
+                    {"type": "byObjectType", "objectType": objectType},
+                    {"type": "includeDraft"},
+                    {"type": "includePrivate"}
+                ],
+                ["name"]
+            );
+
+    
+           Dbm.flow.addUpdateCommandWhenMatched(request.properties.status, Dbm.loading.LoadingStatus.LOADED, Dbm.commands.callFunction(this._itemsLoaded.bind(this), [request]));
+        }
+    }
+
+    _itemsLoaded(aRequest) {
+        let options = [];
+
+        options.push(React.createElement("option", {key: 0, value: 0}, "None"));
+
+        let currentArray = [].concat(aRequest.items);
+        Dbm.utils.ArrayFunctions.sortOnField(currentArray, "name");
+
+        let currentArrayLength = currentArray.length;
+        for(let i = 0; i < currentArrayLength; i++) {
+            let currentItem = currentArray[i];
+            options.push(React.createElement("option", {key: currentItem["id"], value: currentItem["id"]}, currentItem["name"] + " (id: " + currentItem["id"] + ")"));
+        }
+
+        this.item.items = options;
+    }
+
+    _renderMainElement() {
+
+        let value = this.getDynamicProp("value");
+
+        return this._createMainElement(Dbm.react.form.Selection, {"value": value}, this.item.properties.items);
+    }
+}
+

package/react/form/Selection.js

@@ -0,0 +1,29 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class Selection extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        this.getDynamicProp("value", "");
+
+        this._callback_changeBound = this._callback_change.bind(this);
+    }
+
+    _callback_change(aEvent) {
+        //console.log("_callback_change");
+        //console.log(aEvent);
+
+        let value = aEvent.target.value;
+
+        this.getDynamicProp("value").getMostUpstreamProperty().setValue(value);
+    }
+
+    _renderMainElement() {
+
+        let value = this.getDynamicProp("value").value;
+
+        return this._createMainElement("select", {"value": value, onChange: this._callback_changeBound}, this.getPropValue("children"));
+    }
+}
+

package/react/form/index.js

@@ -1,4 +1,6 @@
 export {default as Checkbox} from "./Checkbox.js";
 export {default as FormField} from "./FormField.js";
 export {default as LabelledArea} from "./LabelledArea.js";
-export {default as FileDropArea} from "./FileDropArea.js";
+export {default as FileDropArea} from "./FileDropArea.js";
+export {default as Selection} from "./Selection.js";
+export {default as GraphApiObjectSelection} from "./GraphApiObjectSelection.js";

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() {
     
@@ -24,4 +25,11 @@ export const addMetaPixel = function(aPixelId) {
 
 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

@@ -117,6 +117,17 @@ export const arrayOrSeparatedString = function(aData, aSeparator = ",", aTrim =
     return [];
 }
 
+export const numericArrayOrSeparatedString = function(aData, aSeparator = ",", aTrim = 3) {
+    let returnArray = new Array();
+    let currentArray = arrayOrSeparatedString(aData, aSeparator, aTrim);
+    let currentarrayLength = currentArray.length;
+    for(let i = 0; i < currentarrayLength; i++) {
+        returnArray.push(parseFloat(currentArray[i]));
+    }
+    
+    return returnArray;
+}
+
 export const filterByField = function(aArray, aField, aValue) {
     let returnArray = [];
 
@@ -144,4 +155,117 @@ export const mapField = function(aArray, aField) {
     }
 
     return returnArray;
+}
+
+export const group = function(aArray, aField) {
+   
+    let groups = new Map();
+
+    let currentArray = aArray;
+    let currentArrayLength = currentArray.length;
+    for(let i = 0; i < currentArrayLength; i++) {
+        let currentObject = aArray[i];
+        let groupValue = Dbm.objectPath(aArray[i], aField);
+
+        if(!groups.has(groupValue)) {
+            groups.set(groupValue, []);
+        }
+
+        groups.get(groupValue).push(currentObject);
+    }
+
+    let returnArray = [];
+
+    for (const value of groups.entries()) {
+        returnArray.push({"key": value[0], "value": value[1]});
+    }
+
+    return returnArray;
+}
+
+export const makeFlat = function(aArray) {
+    let returnArray = [];
+
+    let currentArray = aArray;
+    let currentArrayLength = currentArray.length;
+    for(let i = 0; i < currentArrayLength; i++) {
+        returnArray = returnArray.concat(currentArray[i]);
+    }
+
+    return returnArray;
+}
+
+export const getUnselectedItems = function(aSelectedItems, aAllItems) {
+    let returnItems = new Array();
+    
+    let currentArray = aAllItems;
+    let currentArrayLength = currentArray.length;
+    for(let i = 0; i < currentArrayLength; i++) {
+        let currentItem = currentArray[i];
+        if(aSelectedItems.indexOf(currentItem) === -1) {
+            returnItems.push(currentItem);
+        }
+    }
+    
+    return returnItems;
+}
+
+export const sortOnField = function(aArray, aField) {
+    let sortFunction = function(aA, aB) {
+        let aValue = Dbm.objectPath(aA, aField);
+        let bValue = Dbm.objectPath(aB, aField);
+
+        if(aValue < bValue) {
+            return -1;
+        }
+        else if(aValue > bValue) {
+            return 1;
+        }
+
+        return 0;
+    }
+
+    aArray.sort(sortFunction);
+    
+    return aArray;
+}
+
+export const sortOnNumericField = function(aArray, aField) {
+    let sortFunction = function(aA, aB) {
+        let aValue = 1*Dbm.objectPath(aA, aField);
+        let bValue = 1*Dbm.objectPath(aB, aField);
+
+        if(aValue < bValue) {
+            return -1;
+        }
+        else if(aValue > bValue) {
+            return 1;
+        }
+
+        return 0;
+    }
+
+    aArray.sort(sortFunction);
+    
+    return aArray;
+}
+
+export const getItemIndexByIfExists = function(aArray, aField, aIdentifier) {
+		
+    if(!Array.isArray(aArray)) {
+        console.warn("No array provided", aArray);
+        return -1;
+    }
+    
+    let currentArray = aArray;
+    let currentArrayLength = currentArray.length;
+    for(let i = 0; i < currentArrayLength; i++) {
+        let currentItem = currentArray[i];
+        let currentValue = Dbm.objectPath(currentItem, aField);
+        if(currentValue == aIdentifier) {
+            return i;
+        }
+    }
+    
+    return -1;
 }