dbm 1.0.5 → 1.1.0

package/react/blocks/index.js

@@ -1,10 +1,31 @@
 import Dbm from "../../index.js";
 import {createElement} from "react";
 
-let createToolConfiguration = function(aId, aName, aInitialData = {}, aIcon = null) {
+export {default as Image} from "./Image.js";
+
+export let createToolConfiguration = function(aId, aName, aInitialData = {}, aSanitizeSettings = {}, aIcon = null) {
+
+    class DynamicEditorBlock extends Dbm.react.admin.editor.EditorBlock {
+
+        _construct() {
+            super._construct();
+        }
+
+        static get toolbox() {
+
+            return {
+                title: aName,
+                icon: aIcon
+            };
+        }
+
+        static get sanitize() {
+            return aSanitizeSettings;
+        }
+    }
 
     let returnObject = {
-        "class": Dbm.react.admin.EditorBlock,
+        "class": DynamicEditorBlock,
         "config": {
             "module": aId,
             "name": aName,
@@ -14,76 +35,69 @@ let createToolConfiguration = function(aId, aName, aInitialData = {}, aIcon = nu
         "toolbox": {
             title: aName,
             icon: aIcon
-        }  
+        }
     }
 
     return returnObject;
 }
 
-export let registerAllBlocks = function() {
-
-    let displayNameModule = new Dbm.react.modules.ModuleCreator();
+export let registerEditorBlock = function(aModuleName, aName, aEditorModule = null, aInitialData = {}, aSanitizeSettings = {}) {
 
-    let displayNameEditor = createElement(Dbm.react.admin.EditorBlockName, {});
-    displayNameModule.setMainElement(displayNameEditor);
+    if(!aEditorModule) {
+        aEditorModule = getDefaultEditorModule();
+    }
 
     let editorConfigItem = Dbm.getInstance().repository.getItem("editorjs");
     let tools = editorConfigItem.tools ? {...editorConfigItem.tools} : {};
 
-    {
-        let moduleName = "cookie/settings";
-        
-        let editorItem = new Dbm.repository.Item();
-        editorItem.setValue("controller", displayNameModule);
-        editorItem.register("moduleCreators/blocks/editor/" + moduleName);
+    let editorItem = new Dbm.repository.Item();
+    editorItem.setValue("controller", aEditorModule);
+    editorItem.register("moduleCreators/blocks/editor/" + aModuleName);
 
-        let elementItem = new Dbm.repository.Item();
-        elementItem.setValue("element", createElement(Dbm.react.cookies.CookieSettings));
-        elementItem.register("blocks/" + moduleName);
+    tools[aModuleName] = createToolConfiguration(aModuleName, aName, aInitialData, aSanitizeSettings);
 
-        tools[moduleName] = createToolConfiguration(moduleName, "Cookie settings");
-    }
+    editorConfigItem.setValue("tools", tools);
+}
 
-    {
-        let moduleName = "login/loginForm";
-        
-        let editorItem = new Dbm.repository.Item();
-        editorItem.setValue("controller", displayNameModule);
-        editorItem.register("moduleCreators/blocks/editor/" + moduleName);
+export let registerFrontBlock = function(aModuleName, aElement) {
+    
+    let elementItem = new Dbm.repository.Item();
+    elementItem.setValue("element", aElement);
+    elementItem.register("blocks/" + aModuleName);
+}
 
-        let elementItem = new Dbm.repository.Item();
-        elementItem.setValue("element", createElement(Dbm.react.login.LoginForm));
-        elementItem.register("blocks/" + moduleName);
+export let registerBlock = function(aModuleName, aName, aElement, aEditorElement = null, aInitialData = {}, aSanitizeSettings = {}) {
 
-        tools[moduleName] = createToolConfiguration(moduleName, "Login form");
+    let editorModule;
+    if(!aEditorElement) {
+        editorModule = getDefaultEditorModule();
+    }
+    else {
+        editorModule = new Dbm.react.modules.ModuleCreator();
+        editorModule.setMainElement(aEditorElement);
     }
 
-    {
-        let moduleName = "test/test";
-
-        let displayNameModule = new Dbm.react.modules.ModuleCreator();
-
-    let displayNameEditor = createElement("div", {},
-        createElement("div", {contentEditable: true}, "test"),
-        createElement("input", {})
-    );
-    displayNameModule.setMainElement(displayNameEditor);
-        
-        let editorItem = new Dbm.repository.Item();
-        editorItem.setValue("controller", displayNameModule);
-        editorItem.register("moduleCreators/blocks/editor/" + moduleName);
-
-        let elementItem = new Dbm.repository.Item();
-        elementItem.setValue("element", 
-            createElement("div", {},
-                createElement("div", {contentEditable: true}, "test"),
-                createElement("input", {})
-            )
-        );
-        elementItem.register("blocks/" + moduleName);
-
-        tools[moduleName] = createToolConfiguration(moduleName, "Test");
+    registerEditorBlock(aModuleName, aName, editorModule, aInitialData, aSanitizeSettings);
+    registerFrontBlock(aModuleName, aElement);
+} 
+
+export let getDefaultEditorModule = function() {
+    let moduleItem = Dbm.getInstance().repository.getItem("editorjs");
+
+    let displayNameModule = moduleItem.defaultEditor;
+    if(!displayNameModule) {
+        displayNameModule = new Dbm.react.modules.ModuleCreator();
+
+        let displayNameEditor = createElement(Dbm.react.admin.editor.EditorBlockName, {});
+        displayNameModule.setMainElement(displayNameEditor);
+
+        moduleItem.setValue("defaultEditor", displayNameModule);
     }
 
-    editorConfigItem.setValue("tools", tools);
+    return displayNameModule;
+}
+
+export let registerAllBlocks = function() {
+    registerBlock("cookie/settings", "Cookie settings", createElement(Dbm.react.cookies.CookieSettings));
+    registerBlock("login/loginForm", "Login form", createElement(Dbm.react.login.LoginForm));
 }

package/react/cookies/CookieSettings.js

@@ -95,7 +95,7 @@ export default class CookieSettings extends Dbm.react.BaseObject {
             return aSetting.element;
         })
 
-        return this._createMainElement("div", {}, 
+        return this._createMainElement("div", {"className": "content-narrow"}, 
             React.createElement("div", {className: "body-text"},
                 React.createElement("div", {"className": "flex-row small-item-spacing"}, 
                     React.createElement("div", {"className": "flex-row-item"},

package/react/form/Checkbox.js

@@ -1,3 +1,4 @@
+import React from "react";
 import Dbm from "../../index.js";
 
 export default class Checkbox extends Dbm.react.BaseObject {
@@ -11,7 +12,7 @@ export default class Checkbox extends Dbm.react.BaseObject {
 
     _callback_change(aEvent) {
         //console.log("_callback_change");
-        //console.log(aEvent);
+        //console.log(aEvent, this);
 
         let checked = aEvent.target.checked;
 

package/react/form/FormField.js

@@ -1,3 +1,4 @@
+import React from "react";
 import Dbm from "../../index.js";
 
 export default class FormField extends Dbm.react.BaseObject {

package/react/form/LabelledArea.js

@@ -0,0 +1,22 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class LabelledArea extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        this.getDynamicProp("label", "");
+    }
+
+    _renderMainElement() {
+
+        return this._createMainElement("div", {},
+            React.createElement("label", {"className": "standard-field-label", "htmlFor": this.getProp("for")},
+                Dbm.react.text.text(this.getDynamicProp("label"))
+            ),
+            React.createElement("div", {"className": "spacing micro"}),
+            this.getPropValue("children")
+        );
+    }
+}
+

package/react/form/index.js

@@ -1,2 +1,3 @@
 export {default as Checkbox} from "./Checkbox.js";
-export {default as FormField} from "./FormField.js";
+export {default as FormField} from "./FormField.js";
+export {default as LabelledArea} from "./LabelledArea.js";

package/react/image/CoverScaledImage.js

@@ -0,0 +1,32 @@
+import Dbm from "../../index.js";
+import React from "react";
+
+export default class CoverScaledImage extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _removedUsedProps(aProps) {
+        delete aProps["image"];
+        delete aProps["targetWidth"];
+        delete aProps["targetHeight"];
+    }
+
+    _renderMainElement() {
+
+        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 newProps = this._copyProps({src: url});
+
+        let elementType = this.getPropValue("elementType");
+        if(elementType) {
+            newProps["elementType"] = elementType;
+        }
+        
+        return React.createElement(Dbm.react.image.Image, newProps, this.getPropValue("children"));
+        
+    }
+}

package/react/image/Image.js

@@ -0,0 +1,37 @@
+import Dbm from "../../index.js";
+
+export default class Image extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _removedUsedProps(aProps) {
+        let elementType = this.getPropValue("elementType");
+        
+        let isDiv = (elementType !== "img");
+        if(isDiv) {
+            delete aProps["src"];
+        }
+    }
+
+    _renderMainElement() {
+
+        let src = this.getPropValue("src");
+        let elementType = this.getPropValue("elementType");
+        
+        let isDiv = (elementType !== "img");
+        if(isDiv) {
+            let imageStyle = {
+                "backgroundImage": "url(" + src + ")"
+            };
+            let className = "image";
+
+            return this._createMainElement("div", {style: imageStyle, className: className}, this.getPropValue("children"));
+        }
+        else {
+            let className = "image";
+            return this._createMainElement("img", {src: src, className: className});
+        }
+        
+    }
+}

package/react/image/WidthScaledImage.js

@@ -0,0 +1,30 @@
+import Dbm from "../../index.js";
+import React from "react";
+
+export default class WidthScaledImage extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _removedUsedProps(aProps) {
+        delete aProps["image"];
+        delete aProps["targetWidth"];
+    }
+
+    _renderMainElement() {
+
+        let image = this.getPropValue("image");
+        let width = this.getPropValue("targetWidth");
+        let url = Dbm.utils.UrlFunctions.createScaledImageUrl(image, width);
+
+        let newProps = this._copyProps({src: url});
+
+        let elementType = this.getPropValue("elementType");
+        if(elementType) {
+            newProps["elementType"] = elementType;
+        }
+        
+        return React.createElement(Dbm.react.image.Image, newProps, this.getPropValue("children"));
+        
+    }
+}

package/react/image/index.js

@@ -0,0 +1,3 @@
+export {default as Image} from "./Image.js";
+export {default as WidthScaledImage} from "./WidthScaledImage.js";
+export {default as CoverScaledImage} from "./CoverScaledImage.js";

package/react/index.js

@@ -1,6 +1,8 @@
 export {default as BaseObject} from "./BaseObject.js";
 export {default as RefToProperty} from "./RefToProperty.js";
 
+export * as ChildFunctions from "./ChildFunctions.js";
+
 export * as modules from "./modules/index.js";
 export * as admin from "./admin/index.js";
 export * as blocks from "./blocks/index.js";
@@ -10,4 +12,7 @@ export * as area from "./area/index.js";
 export * as context from "./context/index.js";
 export * as source from "./source/index.js";
 export * as text from "./text/index.js";
-export * as login from "./login/index.js";
+export * as login from "./login/index.js";
+export * as image from "./image/index.js";
+export * as animation from "./animation/index.js";
+

package/react/login/LoginForm.js

@@ -87,7 +87,7 @@ export default class LoginForm extends Dbm.react.BaseObject {
 
     _renderMainElement() {
 
-        return this._createMainElement("div", {}, 
+        return this._createMainElement("div", {className: "content-narrow"}, 
             React.createElement("div", {className: "body-text"},
                 React.createElement("div", {"className": ""},
                     React.createElement("label", {className: "standard-field-label"},

package/react/source/index.js

@@ -1 +1,15 @@
-export {default as ContextVariableSource} from "./ContextVariableSource.js";
+import Dbm from "../../index.js";
+
+export {default as ContextVariableSource} from "./ContextVariableSource.js";
+
+export let contextVariable = function(aPath) {
+    let newSource = new Dbm.react.source.ContextVariableSource();
+    newSource.item.path = aPath;
+
+    return newSource;
+}
+
+export let blockData = function(aPath) {
+    //METODO: check if blockdata is a source
+    return contextVariable("blockData." + aPath);
+}

package/react/text/Link.js

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

package/react/text/index.js

@@ -3,6 +3,7 @@ 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 let text = function(aText) {
     if(typeof(aText) === "string") {

package/site/SiteDataLoader.js

@@ -16,7 +16,7 @@ export default class SiteDataLoader extends Dbm.core.BaseObject {
     }
 
 	_loadUrl() {
-		console.log("_loadUrl");
+		//console.log("_loadUrl");
 
 		let url = this.item.url;
 		if(url != null) {

package/tracking/Controller.js

@@ -44,7 +44,7 @@ export default class Controller extends Dbm.core.BaseObject {
 	}
 
     start() {
-        console.log("start");
+        //console.log("start");
         this.item.active = true;
 
         return this;

package/updater/IntervalTimer.js

@@ -0,0 +1,40 @@
+import Dbm from "../index.js";
+
+export default class IntervalTimer extends Dbm.core.BaseObject {
+    _construct() {
+        super._construct();
+
+        this.item.setValue("running", false);
+        this._requestId = -1;
+        this.item.setValue("update", function() {});
+
+        this._updateBound = this._update.bind(this);
+    }
+
+    _update(aTime) {
+
+        this.item.update(aTime);
+
+    }
+
+    start() {
+        if(!this.item.running) {
+            this.item.running = true;
+            this._requestId = setInterval(this._updateBound, 10);
+        }
+
+        return this;
+    }
+
+    stop() {
+        if(this.item.running) {
+            this.item.running = false;
+            if(this._requestId) {
+                clearInterval(this._requestId);
+                this._requestId = -1;
+            }
+        }
+        
+        return this;
+    }
+}

package/updater/index.js

@@ -2,6 +2,7 @@ import Dbm from "../index.js";
 
 export {default as PropertyUpdater} from "./PropertyUpdater.js";
 export {default as RequestAnimationFrameTimer} from "./RequestAnimationFrameTimer.js";
+export {default as IntervalTimer} from "./IntervalTimer.js";
 
 let webSetup = function() {
     let updater = new Dbm.updater.PropertyUpdater();
@@ -13,4 +14,16 @@ let webSetup = function() {
     updater.start();
 }
 
-export {webSetup};
+export {webSetup};
+
+let nodeSetup = function() {
+    let updater = new Dbm.updater.PropertyUpdater();
+    updater.item.register("propertyUpdater");
+
+    let timer = new Dbm.updater.IntervalTimer();
+    updater.setTimer(timer.item);
+
+    updater.start();
+}
+
+export {nodeSetup};

package/utils/ArrayFunctions.js

@@ -1,9 +1,63 @@
-export let range = function(aStartValue, aEndValue, aStep = 1) {
-    let returnArray = [];
+export const range = function(aStartValue, aEndValue, aStepValue = 1, aIncludeEndValue = true) {
+		
+    let returnArray = new Array();
+    
+    let loopCompare;
+     
+    if(aStepValue > 0) {
+        if(aIncludeEndValue) {
+            loopCompare = function(aIndex, aLimit) {
+                return aIndex <= aLimit;
+            };
+        }
+        else {
+            loopCompare = function(aIndex, aLimit) {
+                return aIndex < aLimit;
+            };
+        }
+    }
+    else {
+        if(aIncludeEndValue) {
+            loopCompare = function(aIndex, aLimit) {
+                return aIndex >= aLimit;
+            };
+        }
+        else {
+            loopCompare = function(aIndex, aLimit) {
+                return aIndex > aLimit;
+            };
+        }
+    }
+    
+    for(let i = aStartValue; loopCompare(i, aEndValue); i += aStepValue) {
+        returnArray.push(i);
+    }
+    
+    return returnArray;
+}
 
+export const removeDuplicates = function(aArray) {
+    let returnArray = [];
+		
+    let currentArray = aArray;
+    let currentArrayLength = currentArray.length;
+    for(let i = 0; i < currentArrayLength; i++) {
+        let currentValue = currentArray[i];
+        if(returnArray.indexOf(currentValue) === -1) {
+            returnArray.push(currentValue);
+        }
+    }
+    
     return returnArray;
 }
 
-export let removeDuplicates = function(aArray) {
-    return aArray;
+export const singleOrArray = function(aData) {
+    if(aData === null || aData === undefined) {
+        return [];
+    }
+    else if(aData instanceof Array) {
+        return aData;
+    }
+    
+    return [aData];
 }

package/utils/UrlFunctions.js

@@ -0,0 +1,77 @@
+export let createScaledImageUrl = function(aImageData, aWantedWidth) {
+    if(!aImageData || !aImageData["url"]) {
+        return null;
+    }
+
+    let url = aImageData["url"];
+    if(url.substring(url.length-4).toLowerCase() === ".svg") {
+        return url;
+    }
+
+    if(aImageData["resizeUrl"]) {
+        let scaleToWidth = Math.min(
+            Math.round(window.devicePixelRatio*aWantedWidth),
+            Math.max(
+                100,
+                100*Math.round(window.devicePixelRatio*window.innerWidth/100)
+            )
+        );
+        url = aImageData["resizeUrl"].split("{scale}").join("width=" + scaleToWidth);
+    }
+
+    return url;
+}
+
+export let createCoverScaledImageUrl = function(aImageData, aWantedWidth, aWantedHeight) {
+    if(!aImageData || !aImageData["url"]) {
+        return null;
+    }
+
+    let url = aImageData["url"];
+    if(url.substring(url.length-4).toLowerCase() === ".svg") {
+        return url;
+    }
+
+    if(aImageData["resizeUrl"]) {
+        let scaleToWidth = Math.min(
+            Math.round(window.devicePixelRatio*aWantedWidth),
+            Math.max(
+                100,
+                100*Math.round(window.devicePixelRatio*window.innerWidth/100)
+            )
+        );
+
+        let scaleToHeight = Math.round(aWantedHeight*scaleToWidth/aWantedWidth);
+
+        url = aImageData["resizeUrl"].split("{scale}").join("width=" + scaleToWidth + ",height=" + scaleToHeight + ",fit=cover");
+    }
+
+    return url;
+}
+
+export let createContainScaledImageUrl = function(aImageData, aWantedWidth, aWantedHeight) {
+    if(!aImageData || !aImageData["url"]) {
+        return null;
+    }
+
+    let url = aImageData["url"];
+    if(url.substring(url.length-4).toLowerCase() === ".svg") {
+        return url;
+    }
+
+    if(aImageData["resizeUrl"]) {
+        let scaleToWidth = Math.min(
+            Math.round(window.devicePixelRatio*aWantedWidth),
+            Math.max(
+                100,
+                100*Math.round(window.devicePixelRatio*window.innerWidth/100)
+            )
+        );
+
+        let scaleToHeight = Math.round(aWantedHeight*scaleToWidth/aWantedWidth);
+
+        url = aImageData["resizeUrl"].split("{scale}").join("width=" + scaleToWidth + ",height=" + scaleToHeight + ",fit=contain");
+    }
+
+    return url;
+}

package/utils/index.js

@@ -1,3 +1,4 @@
 export * as ArrayFunctions from "./ArrayFunctions.js";
 export * as NumberFunctions from "./NumberFunctions.js";
-export * as StringFunctions from "./StringFunctions.js";
+export * as StringFunctions from "./StringFunctions.js";
+export * as UrlFunctions from "./UrlFunctions.js";

package/react/admin/EditorBlockName.js

@@ -1,19 +0,0 @@
-import React from "react";
-import Dbm from "../../index.js";
-
-export default class EditorBlockName extends Dbm.react.BaseObject {
-    _construct() {
-        super._construct();
-    }
-
-    _renderMainElement() {
-
-        let textSource = new Dbm.react.source.ContextVariableSource();
-        textSource.item.path = "moduleData.editorData.name";
-
-        return React.createElement("div", {"className": "editor-block-box editor-block-box-padding text-align-center"},
-            Dbm.react.text.text(textSource),
-        );
-    }
-}
-