dbm 1.1.22 → 1.2.0

package/dbm.js

@@ -1,16 +1,19 @@
 import {GlobalObject} from "./core/index.js";
 
-if(!globalThis.dbm) {
-    globalThis.dbm = new GlobalObject();
+export const setupGlobalInstance = function(aObject, aPath) {
+    if(!globalThis.dbm) {
+        globalThis.dbm = new GlobalObject();
+    }
 }
 
-export let getInstance = function() {
+
+export const getInstance = function() {
     return globalThis.dbm;
 }
 
 //export {getInstance};
 
-export let objectPath = function(aObject, aPath) {
+export const objectPath = function(aObject, aPath) {
     //console.log("objectPath");
     
     let currentObject = aObject;
@@ -57,7 +60,7 @@ export let objectPath = function(aObject, aPath) {
     return currentObject;
 }
 
-export let setAtObjectPath = function(aObject, aPath, aValue) {
+export const setAtObjectPath = function(aObject, aPath, aValue) {
     aPath += "";
     if(aPath.length === 0) {
         return 0;

package/flow/updatefunctions/dom/ElementPosition.js

@@ -30,12 +30,10 @@ export default class ElementPosition extends Dbm.flow.FlowUpdateFunction {
     }
 
     _update() {
-        console.log("_update");
+        //console.log("_update");
 
         let element = this.input.element;
 
-		console.log(element, this.input.prepareX, this.input.prepareY);
-
         if(element) {
 			
             //this.output.width = element.clientWidth;
@@ -85,7 +83,7 @@ export default class ElementPosition extends Dbm.flow.FlowUpdateFunction {
     }
 
     _callback_scroll(aEvent) {
-        console.log("_callback_scroll");
+        //console.log("_callback_scroll");
 
         let element = this.input.element;
 

package/package.json

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

package/react/blocks/content/AnchorPosition.js

@@ -0,0 +1,12 @@
+import React from "react";
+import Dbm from "../../../index.js";
+
+export default class AnchorPosition extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _renderMainElement() {
+      return React.createElement("div", {"id": this.context.blockData.linkName});
+    }
+}

package/react/blocks/content/index.js

@@ -1,2 +1,3 @@
 export {default as Card} from "./Card.js";
-export {default as ContentBlock} from "./ContentBlock.js";
+export {default as ContentBlock} from "./ContentBlock.js";
+export {default as AnchorPosition} from "./AnchorPosition.js";

package/react/blocks/index.js

@@ -215,6 +215,15 @@ export let registerAllBlocks = function() {
         registerBlock("content/contentBlock", "Content block", createElement(Dbm.react.blocks.content.ContentBlock, {}), editor, {}, {});
     }
 
+    {
+        let editor = createElement(Dbm.react.admin.editor.EditorBlockName, {},
+            createElement(Dbm.react.form.LabelledArea, {label: "Link name"},
+                createElement(Dbm.react.admin.editor.fields.TextField, {name: "linkName"})
+            )
+        );
+        registerBlock("content/anchorPosition", "Anchor position", createElement(Dbm.react.blocks.content.AnchorPosition, {}), editor, {}, {});
+    }
+
     {
         let editor = createElement(Dbm.react.admin.editor.EditorBlockName, {},
             createElement(Dbm.react.form.LabelledArea, {label: "Initial sections"}, 

package/react/cookies/CookieOverlayMessage.js

@@ -0,0 +1,188 @@
+import React from "react";
+import Dbm from "../../index.js";
+import Cookies from "js-cookie";
+
+export default class CookieOverlayMessage extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        let openProperty = this.getDynamicProp("open", false);
+        this.item.requireProperty("envelope", 0);
+
+        let stateToEnvelope = Dbm.flow.updatefunctions.logic.switchValue(openProperty).setDefaultValue(100).addCase(true, 0);
+        let inDomCase = Dbm.flow.updatefunctions.logic.switchValue(this.item.properties.envelope).setDefaultValue(true).addCase(100, false);
+
+        this.item.requireProperty("inDom", false).connectInput(inDomCase.output.properties.value);
+
+        let animation = new Dbm.flow.animateValue(stateToEnvelope.output.properties.value);
+        
+        this.item.properties.envelope.connectInput(animation.properties.output);
+
+        let transform = new Dbm.flow.updatefunctions.dom.TransformStyle();
+        transform.translateY(animation.properties.output, "%");
+
+        let style = new Dbm.flow.updatefunctions.dom.StyleObject();
+        style.addProperty("transform", transform.output.properties.value);
+        this.item.requireProperty("style", null).connectInput(style.output.properties.style);
+
+        let shouldShow = Cookies.get("cookie/hideCookieBar") !== "1";
+
+        this.getDynamicProp("open").getMostUpstreamProperty().setValue(shouldShow);
+
+        this.item.setValue("widthElement", null);
+
+        let elementSize = new Dbm.flow.updatefunctions.dom.ElementSize();
+        this.item.setValue("elementSize", elementSize);
+
+        elementSize.input.properties.element.connectInput(this.item.properties.widthElement);
+        elementSize.start();
+
+        let layoutSwitch = new Dbm.flow.updatefunctions.logic.RangeSwitch();
+        layoutSwitch.input.properties.value.connectInput(elementSize.output.properties.width);
+
+        layoutSwitch.input.defaultValue = React.createElement("div", {},
+                React.createElement("div", {className: "cookie-bar cookie-bar-padding all-pointer-events"},
+                
+                React.createElement("div", {},
+                    React.createElement("div", {"className": "cookie-bar-title"},
+                        "Your privacy is important to us"
+                    ),
+                    React.createElement("div", {"className": "cookie-bar-description"},
+                        "We use cookies to make our site work properly and to improve your experience. You can choose to accept all cookies, allow only those that are necessary, or manage your preferences in the settings."
+                    )
+                ),
+                React.createElement("div", {"className": "spacing small"}),
+                React.createElement("div", {"className": "standard-button standard-button-padding big text-align-center",  onClick: () => this._acceptAll()}, "Allow all"),
+                React.createElement("div", {"className": "spacing small"}),
+                React.createElement("div", {"className": "secondary-button standard-button-padding text-align-center", onClick: () => this._rejectAll()}, "Only necessary"),
+                React.createElement("div", {"className": "spacing small"}),
+                React.createElement("div", {"className": "cookie-overlay-message-divider"}),
+                React.createElement("div", {"className": "spacing small"}),
+                React.createElement("div", {"className": "text-align-center"},
+                    "Take full control over how we use cookies:"
+                ),
+                React.createElement("div", {"className": "spacing small"}),
+                React.createElement("a", {"href": "/cookie-settings/", className:"custom-styled-link"},
+                    React.createElement("div", {"className": "secondary-button standard-button-padding text-align-center"}, "Settings")
+                )
+            
+            )
+        );
+
+        let desktopLayout = React.createElement("div", {className: "centered-site"},
+            React.createElement("div", {className: "cookie-overlay-message-box cookie-overlay-message-box-padding all-pointer-events"},
+                React.createElement("div", {"className": "flex-row small-item-spacing"}, 
+                    React.createElement("div", {"className": "flex-row-item half"},
+                        React.createElement("div", {"className": "cookie-bar-title"},
+                            "Your privacy is important to us"
+                        ),
+                        React.createElement("div", {"className": "cookie-bar-description"},
+                            "We use cookies to make our site work properly and to improve your experience. You can choose to accept all cookies, allow only those that are necessary, or manage your preferences in the settings."
+                        )
+                    ),
+                    React.createElement("div", {"className": "flex-row-item quarter"}),
+                    React.createElement("div", {"className": "flex-row-item quarter"}, 
+                        React.createElement("div", {"className": "standard-button standard-button-padding big full-width text-align-center",  onClick: () => this._acceptAll()}, "Allow all"),
+                        React.createElement("div", {"className": "spacing medium"}),
+                        React.createElement("div", {"className": "secondary-button standard-button-padding full-width text-align-center", onClick: () => this._rejectAll()}, "Only necessary")
+                        
+                    )
+                ),
+                React.createElement("div", {"className": "spacing standard"}),
+                React.createElement("div", {"className": "cookie-overlay-message-divider"}),
+                React.createElement("div", {"className": "spacing standard"}),
+                React.createElement("div", {"className": "flex-row small-item-spacing justify-between"},
+                    React.createElement("div", {"className": "flex-row-item"},
+                        "Take full control over how we use cookies:"
+                    ),
+                    React.createElement("div", {"className": "flex-row-item"},
+                        React.createElement("a", {"href": "/cookie-settings/", className:"custom-styled-link"},
+                            React.createElement("div", {"className": "cookie-settings-link"}, "Settings >")
+                        )
+                    ),
+                )
+            ),
+            React.createElement("div", {"className": "spacing double"}),
+            React.createElement("div", {"className": "spacing double"}),
+        );
+
+        layoutSwitch.addValueForRange(desktopLayout, 700);
+
+        this.item.setValue("element", null);
+        this.item.properties.element.connectInput(layoutSwitch.output.properties.value);
+    }
+
+    _getDomain() {
+
+        let parts = document.location.hostname.split('.');
+
+        let length = parts.length;
+        if (length === 1) {
+            return parts[0];
+        }
+        else if(parts[length-2] === "co" && parts[length-1] === "uk") {
+            return '.' + parts.slice(-3).join('.');
+        }
+        
+        return '.' + parts.slice(-2).join('.');
+    }
+
+    _acceptAll() {
+        console.log("_acceptAll");
+
+        let options = {"expires": 365, "domain": this._getDomain()};
+
+        Cookies.set("cookie/allowPreferences", "1", options);
+        Cookies.set("cookie/allowStatistics", "1", options);
+        Cookies.set("cookie/allowMarketing", "1", options);
+        Cookies.set("cookie/hideCookieBar", "1", options);
+
+        let consentTime = (new Date()).toISOString();
+
+        Cookies.set("cookie/consentTime", consentTime, options);
+
+        Dbm.getInstance().repository.getItem("trackingController").allowStatistics = true;
+        Dbm.getInstance().repository.getItem("trackingController").allowMarketing = true;
+
+        Dbm.getInstance().repository.getItem("userSettings").setValue("hideCookieBar", true);
+
+        this.getDynamicProp("open").getMostUpstreamProperty().setValue(false);
+    }
+
+    _rejectAll() {
+
+        let options = {"expires": 365, "domain": this._getDomain()};
+
+        Cookies.set("cookie/allowPreferences", "0", options);
+        Cookies.set("cookie/allowStatistics", "0", options);
+        Cookies.set("cookie/allowMarketing", "0", options);
+        Cookies.set("cookie/hideCookieBar", "1", options);
+
+        let consentTime = (new Date()).toISOString();
+
+        Cookies.set("cookie/consentTime", consentTime, options);
+
+        Dbm.getInstance().repository.getItem("trackingController").allowStatistics = false;
+        Dbm.getInstance().repository.getItem("trackingController").allowMarketing = false;
+
+        Dbm.getInstance().repository.getItem("userSettings").setValue("hideCookieBar", true);
+
+        this.getDynamicProp("open").getMostUpstreamProperty().setValue(false);
+    }
+
+    _renderMainElement() {
+
+        return this._createMainElement("div", {className: "cookie-bar-position no-pointer-events cookie-overlay-message-layer", ref: this.createRef("widthElement")},
+            React.createElement(Dbm.react.area.HasData, {"check": this.item.properties.inDom},
+                React.createElement("div", {className: "overflow-hidden"},	
+                    React.createElement(Dbm.react.BaseObject, {style: this.item.properties.style},
+                        React.createElement("div", {},
+                            React.createElement(Dbm.react.area.InsertElement, {element: this.item.properties.element})
+                        )
+                    )
+                )
+            )
+        );
+    }
+}
+

package/react/cookies/index.js

@@ -1,2 +1,3 @@
 export {default as CookieSettings} from "./CookieSettings.js";
-export {default as CookieBar} from "./CookieBar.js";
+export {default as CookieBar} from "./CookieBar.js";
+export {default as CookieOverlayMessage} from "./CookieOverlayMessage.js";

package/react/form/Form.js

@@ -0,0 +1,49 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class Form extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        this._callback_submitBound = this._callback_submit.bind(this);
+    }
+
+    _callback_submit(aEvent) {
+        //console.log("_callback_submit");
+        //console.log(aEvent);
+
+        let preventSubmit = this.getPropValue("preventSubmit");
+        if(preventSubmit) {
+            aEvent.preventDefault();
+        }
+
+        let commands = this.getPropValue("commands");
+        if(!commands) {
+            commands = this.getPropValue("command");
+        }
+        if(commands) {
+            aEvent.preventDefault();
+            commands = Dbm.utils.ArrayFunctions.singleOrArray(commands);
+
+            let currentArray = commands;
+            let currentArrayLength = currentArray.length;
+            for(let i = 0; i < currentArrayLength; i++) {
+                let command = currentArray[i];
+                command.perform(this, aEvent);
+            }
+        }
+        else{
+            return !preventSubmit;
+        }
+
+        return false;
+    }
+
+    _renderMainElement() {
+
+        let children = this.getPropValue("children");
+
+        return this._createMainElement("form", {onSubmit: this._callback_submitBound}, children);
+    }
+}
+

package/react/form/index.js

@@ -8,4 +8,5 @@ export {default as GraphApiSelectOrCreateObject} from "./GraphApiSelectOrCreateO
 export {default as GraphApiImage} from "./GraphApiImage.js";
 export {default as EditArray} from "./EditArray.js";
 export {default as TextArea} from "./TextArea.js";
-export {default as EditObjectProperty} from "./EditObjectProperty.js";
+export {default as EditObjectProperty} from "./EditObjectProperty.js";
+export {default as Form} from "./Form.js";

package/react/image/CoverScaledImage.js

@@ -10,6 +10,7 @@ export default class CoverScaledImage extends Dbm.react.BaseObject {
         delete aProps["image"];
         delete aProps["targetWidth"];
         delete aProps["targetHeight"];
+        delete aProps["skipWindowSize"];
     }
 
     _renderMainElement() {
@@ -17,7 +18,15 @@ export default class CoverScaledImage extends Dbm.react.BaseObject {
         let image = this.getPropValue("image");
         let width = this.getPropValue("targetWidth");
         let height = this.getPropValue("targetHeight");
-        let url = Dbm.utils.UrlFunctions.createCoverScaledImageUrl(image, width, height);
+        let url;
+        
+        if(this.getPropValue("skipWindowSize")) {
+            url = Dbm.utils.UrlFunctions.createCoverScaledImageUrlWithPixelDensity(image, width, height, Math.floor(window.devicePixelRatio), 10000);
+        }
+        else {
+            url = Dbm.utils.UrlFunctions.createCoverScaledImageUrl(image, width, height);
+        }
+        
 
         let newProps = this._copyProps({src: url});
 
@@ -29,6 +38,16 @@ export default class CoverScaledImage extends Dbm.react.BaseObject {
         let elementType = this.getPropValue("elementType");
         if(elementType) {
             newProps["elementType"] = elementType;
+
+            if(elementType === "img" && Dbm.utils.UrlFunctions.imageShouldScale(image)) {
+
+                let images = [];
+                images.push(Dbm.utils.UrlFunctions.createCoverScaledImageUrlWithPixelDensity(image, width, height, 1, 10000) + " 1x");
+                images.push(Dbm.utils.UrlFunctions.createCoverScaledImageUrlWithPixelDensity(image, width, height, 2, 10000) + " 2x");
+                images.push(Dbm.utils.UrlFunctions.createCoverScaledImageUrlWithPixelDensity(image, width, height, 3, 10000) + " 3x");
+
+                newProps["srcset"] = images.join(", ");
+            }
         }
         
         return React.createElement(Dbm.react.image.Image, newProps, this.getPropValue("children"));

package/react/interaction/CommandButton.js

@@ -12,10 +12,23 @@ export default class CommandButton extends Dbm.react.BaseObject {
         //console.log("_callback_click");
         //console.log(aEvent);
 
-        let command = this.getPropValue("command");
-
-        command.perform(this, aEvent);
+        let commands = this.getPropValue("commands");
+        if(!commands) {
+            commands = this.getPropValue("command");
+        }
+        if(commands) {
+            commands = Dbm.utils.ArrayFunctions.singleOrArray(commands);
 
+            let currentArray = commands;
+            let currentArrayLength = currentArray.length;
+            for(let i = 0; i < currentArrayLength; i++) {
+                let command = currentArray[i];
+                command.perform(this, aEvent);
+            }
+        }
+        else{
+            console.warn("Button doesn't have any commands", this);
+        }
     }
 
     _performClone(aChild, aProps) {

package/site/SiteNavigation.js

@@ -127,6 +127,11 @@ export default class SiteNavigation extends Dbm.core.BaseObject {
 					if(hardNavigation) {
 						shouldSkip = true;
 					}
+
+					let target = currentNode.getAttribute("target");
+					if(target === "_blank") {
+						shouldSkip = true;
+					}
 					break;
 				}
 			}

package/utils/UrlFunctions.js

@@ -31,7 +31,7 @@ export let createScaledImageUrlWithPixelDensity = function(aImageData, aWantedWi
 }
 
 export let createScaledImageUrl = function(aImageData, aWantedWidth) {
-    return createScaledImageUrlWithPixelDensity(aImageData, aWantedWidth, window.devicePixelRatio, window.innerWidth);
+    return createScaledImageUrlWithPixelDensity(aImageData, aWantedWidth, Math.floor(window.devicePixelRatio), window.innerWidth);
 }
 
 export let getCoverScaledImageUrlWithPixelDensity = function(aUrl, aWantedWidth, aWantedHeight, aPixelDensity, aMaxSize) {
@@ -56,7 +56,24 @@ export let getCoverScaledImageUrlWithPixelDensity = function(aUrl, aWantedWidth,
 }
 
 export const getCoverScaledImageUrl = function(aUrl, aWantedWidth, aWantedHeight) {
-    return getCoverScaledImageUrlWithPixelDensity(aUrl, aWantedWidth, aWantedHeight, window.devicePixelRatio, window.innerWidth);
+    return getCoverScaledImageUrlWithPixelDensity(aUrl, aWantedWidth, aWantedHeight, Math.floor(window.devicePixelRatio), window.innerWidth);
+}
+
+export const imageShouldScale = function(aImageData) {
+    if(!aImageData || !aImageData["url"]) {
+        return false;
+    }
+
+    let url = aImageData["url"];
+    if(url.substring(url.length-4).toLowerCase() === ".svg") {
+        return false;
+    }
+
+    if(!aImageData["resizeUrl"]) {
+        return false;
+    }
+
+    return true;
 }
 
 export let createCoverScaledImageUrlWithPixelDensity = function(aImageData, aWantedWidth, aWantedHeight, aPixelDensity, aMaxSize) {
@@ -70,14 +87,14 @@ export let createCoverScaledImageUrlWithPixelDensity = function(aImageData, aWan
     }
 
     if(aImageData["resizeUrl"]) {
-        url = getCoverScaledImageUrl(aImageData["resizeUrl"], aWantedWidth, aWantedHeight);
+        url = getCoverScaledImageUrlWithPixelDensity(aImageData["resizeUrl"], aWantedWidth, aWantedHeight, aPixelDensity, aMaxSize);
     }
 
     return url;
 }
 
 export let createCoverScaledImageUrl = function(aImageData, aWantedWidth, aWantedHeight) {
-    return createCoverScaledImageUrlWithPixelDensity(aImageData, aWantedWidth, aWantedHeight, window.devicePixelRatio, window.innerWidth);
+    return createCoverScaledImageUrlWithPixelDensity(aImageData, aWantedWidth, aWantedHeight, Math.floor(window.devicePixelRatio), window.innerWidth);
 }
 
 export const getContainScaledImageUrlWithPixelDensity = function(aUrl, aWantedWidth, aWantedHeight, aPixelDensity, aMaxSize) {
@@ -102,7 +119,7 @@ export const getContainScaledImageUrlWithPixelDensity = function(aUrl, aWantedWi
 }
 
 export const getContainScaledImageUrl = function(aUrl, aWantedWidth, aWantedHeight) {
-    return getContainScaledImageUrlWithPixelDensity(aUrl, aWantedWidth, aWantedHeight, window.devicePixelRatio, window.innerWidth);
+    return getContainScaledImageUrlWithPixelDensity(aUrl, aWantedWidth, aWantedHeight, Math.floor(window.devicePixelRatio), window.innerWidth);
 }
 
 export let createContainScaledImageUrl = function(aImageData, aWantedWidth, aWantedHeight) {