dbm 1.1.23 → 1.2.1

package/react/area/FixedWidthInfiniteSlideshow.js

@@ -0,0 +1,50 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class FixedWidthInfiniteSlideshow extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+		
+		
+	}
+
+    _renderMainElement() {
+        //console.log("FixedWidthInfiniteSlideshow::render");
+        //console.log(this);
+
+        let viewWidth = this.getPropValueWithDefault("viewWidth", 1000);
+        let prepLength = this.getPropValueWithDefault("prepareLength", 20);
+        let elementWidth = this.getPropValueWithDefault("elementWidth", 200);
+        let spacing = this.getPropValueWithDefault("spacing", 0);
+
+        let index = this.getPropValue("index");
+
+        let elements = this.getPropValue("children");;
+
+		let numberOfElements = elements.length;
+
+        let stepLength = elementWidth+spacing;
+        let movedLength = index*stepLength;
+        
+        let startPosition = movedLength-prepLength;
+        let startIndex = Math.floor(startPosition/stepLength);
+
+        let endPosition = (startPosition + viewWidth + 2*prepLength);
+        let endIndex = Math.floor(endPosition/stepLength);
+
+        let children = [];
+        for(let i = startIndex; i <= endIndex; i++) {
+            let currentPosition = i*stepLength-movedLength;
+            let elementIndex = Dbm.utils.NumberFunctions.floatMod(i, numberOfElements);
+
+            //METODO: send in styles instead of forcing full size
+            let style = {"transform": "translateX(" + currentPosition + "px)", position: "absolute", left: 0, top: 0};
+            let child = React.createElement("div", {"key": i, "className": "full-size", "style": style}, elements[elementIndex])
+            children.push(child);
+        }
+        
+		return this._createMainElement("div", {},
+			children
+		);
+    }
+}

package/react/area/List.js

@@ -43,9 +43,13 @@ export default class List extends Dbm.react.BaseObject {
             if(keyField !== "(root)") {
                 key = Dbm.objectPath(currentItem, keyField);
             }
+            else if(keyField !== "(index)") {
+                key = i;
+            }
 
             let values = {};
             values[as] = currentItem;
+            values[as + "/index"] = i;
             newChildren.push(React.createElement(Dbm.react.context.AddContextVariables, {key: key, values: values}, mainChildren));
         }
 

package/react/area/index.js

@@ -7,6 +7,7 @@ export {default as ScrollActivatedArea} from "./ScrollActivatedArea.js";
 export {default as OpenCloseExpandableArea} from "./OpenCloseExpandableArea.js";
 export {default as ResponsiveLayout} from "./ResponsiveLayout.js";
 export {default as List} from "./List.js";
+export {default as FixedWidthInfiniteSlideshow} from "./FixedWidthInfiniteSlideshow.js";
 
 export const responsiveLayout = function(aDefaultLayout) {
     let newResponsiveLayout = new Dbm.react.area.ResponsiveLayout();

package/react/blocks/content/LinkList.js

@@ -0,0 +1,67 @@
+import React from "react";
+import Dbm from "../../../index.js";
+
+export default class LinkList extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        let listId = this.context.blockData.list;
+
+        this.item.requireProperty("loaded", false);
+        this.item.requireProperty("items", []);
+
+        let graphApi = Dbm.getInstance().repository.getItem("cachedGraphApi").controller;
+        {
+            let request = graphApi.requestRange(
+                [
+                    {type: "objectRelationQuery", "path": "in:in:linkPreview", "fromIds": [listId]}
+                ],
+                ["linkPreview"]
+            );
+            
+            this.item.requireProperty("loadedStatus", 0);
+            Dbm.flow.addUpdateCommandWhenMatched(this.item.properties.loadedStatus, Dbm.loading.LoadingStatus.LOADED, Dbm.commands.callFunction(this._loaded.bind(this), [request]));
+            this.item.properties.loadedStatus.connectInput(request.properties.status);
+        }
+    }
+
+    _loaded(aRequest) {
+      console.log("LinkList::_loaded");
+      console.log(aRequest);
+
+      let items = aRequest.items;
+
+      let today = (new Date()).toISOString().split("T")[0];
+      items = Dbm.utils.ArrayFunctions.filterByField(items, "page", null, function(aItem) {
+        if(aItem && aItem.publishDate) {
+          if(aItem.publishDate > today) {
+            return false;
+          }
+          return true;
+        }
+        
+        return false;
+      });
+
+      Dbm.utils.ArrayFunctions.sortOnField(items, "page.publishDate");
+      items.reverse();
+
+      this.item.items = items;
+      this.item.loaded = true;
+    }
+
+    _renderMainElement() {
+
+      let element = Dbm.getInstance().repository.getItem("linkListCard").element;
+
+        return React.createElement("div", {"className": "content-narrow"},
+          React.createElement(Dbm.react.area.HasData, {check: this.item.properties.loaded},
+            React.createElement(Dbm.react.area.List, {items: this.item.properties.items},
+              element,
+              React.createElement("div", {"data-slot": "spacing", "className": "spacing small"})
+            )
+          )
+
+        );
+    }
+}

package/react/blocks/content/LinkListCard.js

@@ -0,0 +1,83 @@
+import React from "react";
+import Dbm from "../../../index.js";
+
+export default class LinkListCard extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        let mobileLayout = React.createElement(Dbm.react.text.Link, {"href": Dbm.core.source.first(Dbm.react.source.contextVariable("item.link"), Dbm.react.source.contextVariable("item.page.url")), "className": "custom-styled-link"},
+          React.createElement("div", {"className": "standard-card standard-card-padding"},
+            React.createElement(Dbm.react.image.WidthScaledImage, {image: Dbm.core.source.first(Dbm.react.source.contextVariable("item.image"), Dbm.react.source.contextVariable("item.page.image")), targetWidth: 300, className: "card-image-mobile background-cover"}),
+            React.createElement("div", {"className": "spacing small"}),
+            React.createElement("div", {},
+              React.createElement("h3", {"className": "no-margins"},
+                Dbm.react.text.text(Dbm.core.source.first(Dbm.react.source.contextVariable("item.title"), Dbm.react.source.contextVariable("item.page.title")))
+              ),
+              React.createElement("div", {"className": "body-text"},
+                Dbm.react.text.htmlText(Dbm.react.source.contextVariable("item.description")),
+              ),
+              React.createElement("div", {"className": "flex-row justify-between"},
+                React.createElement("div", {"className": "flex-row-item"}),
+                React.createElement("div", {"className": "flex-row-item standard-card-read-more-link"},
+                  React.createElement("div", {className: "flex-row micro-item-spacing vertically-center-items"},
+                      React.createElement("div", {className: "flex-row-item flex-resize"},
+                        Dbm.react.text.text(Dbm.react.source.blockData("buttonText"))
+                      ),
+                      React.createElement("div", {className: "flex-row-item flex-no-resize"},
+                          React.createElement(Dbm.react.image.Image, {src: "/assets/img/read-more-right-arrow.svg", className: "right-arrow-read-more-link-icon background-contain"})
+                      )
+                  )
+                )
+              )
+            )
+          )
+        );
+
+        let desktopLayout = React.createElement(Dbm.react.text.Link, {"href": Dbm.core.source.first(Dbm.react.source.contextVariable("item.link"), Dbm.react.source.contextVariable("item.page.url")), "className": "custom-styled-link"},
+          React.createElement("div", {"className": "standard-card standard-card-padding"}, 
+          React.createElement("div", {"className": "flex-row small-item-spacing"},
+            React.createElement("div", {"className": "flex-row-item flex-no-resize"},
+              React.createElement(Dbm.react.image.WidthScaledImage, {image: Dbm.core.source.first(Dbm.react.source.contextVariable("item.image"), Dbm.react.source.contextVariable("item.page.image")), targetWidth: 200, className: "card-image-desktop background-cover"})
+            ),
+            React.createElement("div", {"className": "flex-row-item flex-resize"},
+              React.createElement("h3", {"className": "no-margins"},
+                Dbm.react.text.text(Dbm.core.source.first(Dbm.react.source.contextVariable("item.title"), Dbm.react.source.contextVariable("item.page.title")))
+              ),
+              React.createElement("div", {"className": "spacing small"}),
+              React.createElement("div", {"className": "body-text"},
+                Dbm.react.text.htmlText(Dbm.react.source.contextVariable("item.description")),
+              ),
+              
+              React.createElement("div", {"className": "spacing small"}),
+              React.createElement("div", {"className": "flex-row justify-between"},
+                React.createElement("div", {"className": "flex-row-item"}),
+                React.createElement("div", {"className": "flex-row-item standard-card-read-more-link"},
+                  React.createElement("div", {className: "flex-row micro-item-spacing vertically-center-items"},
+                    React.createElement("div", {className: "flex-row-item flex-resize"},
+                      Dbm.react.text.text(Dbm.core.source.firstWithDefault(Dbm.react.source.contextVariable("item.linkText"), "Read more"))
+                    ),
+                    React.createElement("div", {className: "flex-row-item flex-no-resize"},
+                        React.createElement(Dbm.react.image.Image, {src: "/assets/img/read-more-right-arrow.svg", className: "right-arrow-read-more-link-icon background-contain"})
+                    )
+                )
+                )
+              )
+            )
+          )
+          )
+        );
+
+        
+      
+      
+
+        this.responsiveLayout = Dbm.react.area.responsiveLayout(mobileLayout).addLayout(desktopLayout, 600);
+    }
+
+    _renderMainElement() {
+
+        return React.createElement("div", {}, React.createElement("div", {
+            ref: this.createRef("mainElement")
+          }, this.responsiveLayout.mainElement));
+    }
+}

package/react/blocks/content/index.js

@@ -1,3 +1,5 @@
 export {default as Card} from "./Card.js";
 export {default as ContentBlock} from "./ContentBlock.js";
-export {default as AnchorPosition} from "./AnchorPosition.js";
+export {default as AnchorPosition} from "./AnchorPosition.js";
+export {default as LinkList} from "./LinkList.js";
+export {default as LinkListCard} from "./LinkListCard.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 list"},
+                createElement(Dbm.react.admin.editor.fields.SelectObjectField, {name: "list", "objectType": "linkList"})
+            )
+        );
+        registerBlock("content/linkList", "Link list", createElement(Dbm.react.blocks.content.LinkList, {}), editor, {}, {});
+    }
+
     {
         let editor = createElement(Dbm.react.admin.editor.EditorBlockName, {},
             createElement(Dbm.react.form.LabelledArea, {label: "Link name"},
@@ -380,11 +389,24 @@ export let registerAllBlocks = function() {
 
     let pageEditors = [].concat(admin.pageEditors);
 
+    {
+        let newEditor = Dbm.getInstance().repository.getItem("admin/pageEditors/linkPreviews");
+        newEditor.setValue("element", React.createElement(Dbm.react.admin.pageeditors.LinkPreviews));
+        pageEditors.push(newEditor);
+    }
+
     {
         let newEditor = Dbm.getInstance().repository.getItem("admin/pageEditors/helpSections");
         newEditor.setValue("element", React.createElement(Dbm.react.admin.pageeditors.HelpSections));
         pageEditors.push(newEditor);
     }
 
+
+
     admin.pageEditors = pageEditors;
+
+    {
+        let elementItem = Dbm.getRepositoryItem("linkListCard");
+        elementItem.setValue("element", React.createElement(Dbm.react.blocks.content.LinkListCard));
+    }
 }

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/Option.js

@@ -0,0 +1,18 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class Option extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        this.getDynamicProp("value", "");
+    }
+
+    _renderMainElement() {
+
+        let value = this.getDynamicProp("value").value;
+
+        return this._createMainElement("option", {"value": value,}, this.getPropValue("children"));
+    }
+}
+

package/react/form/index.js

@@ -8,4 +8,6 @@ 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";
+export {default as Option} from "./Option.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/react/text/HtmlText.js

@@ -7,7 +7,12 @@ export default class HtmlText extends Dbm.react.BaseObject {
 
     _renderMainElement() {
         
-        let text = "" + this.getPropValue("text");
+        let rawText = this.getPropValue("text");;
+        let text = "";
+
+        if(rawText !== undefined && rawText !== null) {
+            text += rawText;
+        }
 
         return this._createMainElement("span", {"dangerouslySetInnerHTML": {__html: text}});;
     }

package/react/text/NumberDisplay.js

@@ -0,0 +1,30 @@
+import Dbm from "../../index.js";
+
+export default class NumberDisplay extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    render() {
+        let text = this.getPropValue("number");
+        let number = 1*text;
+
+        if(!isNaN(number)) {
+
+            let offset = this.getPropValueWithDefault("offset", 0);
+            if(offset) {
+                number += offset;
+            }
+            
+
+            if("numberOfDecimals" in this.props) {
+                text = number.toFixed(this.getPropValue("numberOfDecimals"));
+            }
+            else {
+                text = "" + number;
+            }
+        }
+
+        return text;
+    }
+}

package/react/text/OptionalLink.js

@@ -0,0 +1,21 @@
+import Dbm from "../../index.js";
+import React from "react";
+
+export default class OptionalLink extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _renderMainElement() {
+
+        let url = this.getPropValue("href");
+        let children = this.getPropValue("children");
+        if(url) {
+            return this._createMainElement(Dbm.react.text.Link, {href: url}, children);
+        }
+        else {
+            return React.createElement(React.Fragment, {}, children);
+        }
+        
+    }
+}

package/react/text/index.js

@@ -4,6 +4,8 @@ import {createElement} from "react";
 export {default as Text} from "./Text.js";
 export {default as HtmlText} from "./HtmlText.js";
 export {default as Link} from "./Link.js";
+export {default as OptionalLink} from "./OptionalLink.js";
+export {default as NumberDisplay} from "./NumberDisplay.js";
 
 export let text = function(aText) {
     if(typeof(aText) === "string") {

package/utils/ArrayFunctions.js

@@ -292,6 +292,22 @@ export const getItemIndexByIfExists = function(aArray, aField, aIdentifier) {
     return -1;
 }
 
+export const getItemByIfExists = function(aArray, aField, aIdentifier) {
+    let index = getItemIndexByIfExists(aArray, aField, aIdentifier);
+
+    return (index !== -1) ? aArray[index] : null;
+}
+
+export const getItemBy = function(aArray, aField, aIdentifier) {
+    let index = getItemIndexByIfExists(aArray, aField, aIdentifier);
+
+    if(index === -1) {
+        console.warn("No item found", aArray, aField, aIdentifier);
+    }
+
+    return (index !== -1) ? aArray[index] : null;
+}
+
 export const sum = function(aArray) {
 		
     if(!Array.isArray(aArray)) {

package/utils/CompareFunctions.js

@@ -15,6 +15,14 @@ export const strictEquals = function(aA, aB) {
 	return aA === aB;
 }
 
+export const notEquals = function(aA, aB) {
+	return aA != aB;
+}
+
+export const strictNotEquals = function(aA, aB) {
+	return aA !== aB;
+}
+
 export const arrayContains = function(aA, aB) {
     if(aA && aA.indexOf && aA.indexOf(aB) >= 0) {
         return true
@@ -40,6 +48,12 @@ export const fullSetup = function() {
     Dbm.getInstance().repository.getItem("compareFunctions/===").setValue("compare", strictEquals);
     Dbm.getInstance().repository.getItem("compareFunctions/strictEquals").setValue("compare", strictEquals);
 
+    Dbm.getInstance().repository.getItem("compareFunctions/!=").setValue("compare", notEquals);
+    Dbm.getInstance().repository.getItem("compareFunctions/notEquals").setValue("compare", notEquals);
+
+    Dbm.getInstance().repository.getItem("compareFunctions/!==").setValue("compare", strictNotEquals);
+    Dbm.getInstance().repository.getItem("compareFunctions/strictNotEquals").setValue("compare", strictNotEquals);
+
     Dbm.getInstance().repository.getItem("compareFunctions/arrayContains").setValue("compare", arrayContains);
     Dbm.getInstance().repository.getItem("compareFunctions/inArray").setValue("compare", inArray);
 }

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) {