dbm 1.0.6 → 1.1.1

package/react/area/List.js

@@ -0,0 +1,46 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class List extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _renderMainElement() {
+        //console.log("List::_renderMainElement");
+        //console.log(this);
+        
+        let items = this.getPropValue("items");
+        let children = this.getPropValue("children");
+        let keyField = this.getPropValue("keyField");
+        if(!keyField) {
+            keyField = "id";
+        }
+        let as = this.getPropValue("as");
+        if(!as) {
+            as = "item";
+        }
+        
+        let slots = Dbm.react.ChildFunctions.splitIntoSlots(children);
+
+        let spacingElement = slots.spacing;
+        let mainChildren = slots.main;
+
+        let currentArray = items;
+        let currentArrayLength = currentArray.length;
+        let newChildren = [];
+        for(let i = 0; i < currentArrayLength; i++) {
+            if(spacingElement && i > 0) {
+                newChildren.push(React.createElement(React.Fragment, {key: "spacing" + (i-1)}, spacingElement));
+            }
+            let currentItem = currentArray[i];
+            let values = {};
+            values[as] = currentItem;
+            let key = Dbm.objectPath(currentItem, keyField);
+            newChildren.push(React.createElement(Dbm.react.context.AddContextVariables, {key: key, values: values}, mainChildren));
+        }
+
+        return React.createElement(React.Fragment, {}, newChildren);
+    }
+}
+

package/react/area/OpenCloseExpandableArea.js

@@ -7,17 +7,22 @@ export default class OpenCloseExpandableArea extends Dbm.react.BaseObject {
 		
 		let startValue = this.getPropValue("startState") === "open";
 		let openProperty = this.getDynamicProp("open", startValue);
+
+		let invert = Dbm.flow.updatefunctions.logic.invert(openProperty);
+		this.item.requireProperty("ariaHidden", !openProperty.value);
 		
 		let switchValue = Dbm.flow.updatefunctions.logic.switchValue(openProperty).addCase(false, 0).addCase(true, 1);
 		let animateValueObject = Dbm.flow.animateValue(switchValue.output.properties.value);
 		let transformToStyle = Dbm.flow.updatefunctions.basic.transformValue(animateValueObject.properties.output, this._transformToStyle.bind(this));
 		
 		this.item.requireProperty("animationStyle", {}).connectInput(transformToStyle.output.properties.value);
+
+		this.item.setValue("animation", Dbm.react.animation.connectedAnimation(transformToStyle.output.properties.value));
 	}
 	
 	_transformToStyle(aEnvelope) {
-		console.log("_transformToStyle");
-		console.log(aEnvelope, this, this.item.element);
+		//console.log("_transformToStyle");
+		//console.log(aEnvelope, this, this.item.element);
 		
 		if(aEnvelope === 0) {
 			return {"height": "0px", "overflow": "hidden"};
@@ -32,10 +37,14 @@ export default class OpenCloseExpandableArea extends Dbm.react.BaseObject {
 	_renderMainElement() {
         //console.log("OpenCloseExpandableArea::_renderMainElement");
         //console.log(this);
+
+		let openProperty = this.getDynamicProp("open");
 		
-		return this._createMainElement(Dbm.react.BaseObject, {"className": "animation-element", "style": this.item.properties.animationStyle},
-			React.createElement("div", {"ref": this.createRef("element")},
-				this.getPropValue("children")
+		return this._createMainElement(Dbm.react.animation.AnimatedElement, {"className": "animation-element", "controller": this.item.animation.item, "aria-hidden": this.item.properties.ariaHidden},
+			React.createElement(Dbm.react.context.AddContextVariables, {"values": {"open": openProperty}},
+				React.createElement("div", {"ref": this.createRef("element")},
+					this.getPropValue("children")
+				)
 			)
 		);
 		

package/react/area/ResponsiveLayout.js

@@ -0,0 +1,48 @@
+import Dbm from "../../index.js";
+import React from "react";
+
+export default class ResponsiveLayout extends Dbm.core.BaseObject {
+    _construct() {
+        super._construct();
+
+        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);
+
+        this.item.setValue("layoutSwitch", layoutSwitch)
+
+        this.item.setValue("element", null);
+        this.item.properties.element.connectInput(layoutSwitch.output.properties.value);
+
+        let refToProperty = new Dbm.react.RefToProperty();
+        refToProperty.property = this.item.properties.widthElement;
+        this.item.setValue("ref/widthElement", refToProperty);
+
+        this.item.setValue("mainElement", React.createElement("div", {ref: refToProperty},
+            React.createElement(Dbm.react.area.InsertElement, {element: this.item.properties.element})
+        ));
+    }
+
+    setDefaultLayout(aElement) {
+        this.item.layoutSwitch.input.defaultValue = React.createElement(React.Fragment, {"key": "default"}, aElement);
+
+        return this;
+    }
+
+    addLayout(aElement, aMinSize = null, aMaxSize = null) {
+        this.item.layoutSwitch.addValueForRange(React.createElement(React.Fragment, {"key": "layout_" + this.item.layoutSwitch.input.ranges.length}, aElement), aMinSize, aMaxSize);
+
+        return this;
+    }
+
+    get mainElement() {
+        return this.item.mainElement;
+    }
+}

package/react/area/index.js

@@ -1,4 +1,15 @@
+import Dbm from "../../index.js";
+
 export {default as InsertElement} from "./InsertElement.js";
 export {default as HasData} from "./HasData.js";
 export {default as ScrollActivatedArea} from "./ScrollActivatedArea.js";
-export {default as OpenCloseExpandableArea} from "./OpenCloseExpandableArea.js";
+export {default as OpenCloseExpandableArea} from "./OpenCloseExpandableArea.js";
+export {default as ResponsiveLayout} from "./ResponsiveLayout.js";
+export {default as List} from "./List.js";
+
+export let responsiveLayout = function(aDefaultLayout) {
+    let newResponsiveLayout = new Dbm.react.area.ResponsiveLayout();
+    newResponsiveLayout.setDefaultLayout(aDefaultLayout);
+
+    return newResponsiveLayout;
+}

package/react/blocks/Image.js

@@ -0,0 +1,17 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class Image extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _renderMainElement() {
+
+        let url = Dbm.utils.UrlFunctions.createScaledImageUrl(Dbm.objectPath(this.context, "blockData.file"), 800);
+
+        return this._createMainElement("div", {},
+            React.createElement(Dbm.react.image.Image, {elementType: "img", className: "full-width", src: url, alt: Dbm.react.source.blockData("caption")} )
+        )
+    }
+}

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

@@ -0,0 +1,92 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+
+export default class FileDropArea extends Dbm.react.BaseObject {
+
+	_construct() {
+		super._construct();
+
+		this._id = "dropField" + Dbm.getInstance().getNextId();
+		this.item.requireProperty("dropHighlightClass", "");
+		let classNameAdd = Dbm.flow.updatefunctions.logic.add("file-drop-area display-block cursor-pointer", this.item.properties.dropHighlightClass)
+
+		this.item.setValue("classNameAdd", classNameAdd);
+		this.item.requireProperty("fullClass", "").connectInput(classNameAdd.output.properties.result);
+	}
+	
+	_handleFiles(aFiles) {
+		console.log("_handleFiles");
+		console.log(aFiles);
+		
+		let command = this.getPropValue("changeCommands");
+		
+		command.perform(this, aFiles);
+	}
+	
+	_highlight(aEvent) {
+		aEvent.preventDefault()
+		aEvent.stopPropagation()
+		
+		this.item.setValue("dropHighlightClass", "drop-file-highlight");
+	}
+
+	_unhighlight(aEvent) {
+		aEvent.preventDefault()
+		aEvent.stopPropagation()
+		
+		this.item.setValue("dropHighlightClass", "");
+	}
+
+	_handleDrop(aEvent) {
+		console.log("_handleDrop");
+
+		aEvent.preventDefault()
+		aEvent.stopPropagation()
+		
+		this.item.setValue("dropHighlightClass", "");
+		
+		let dataTransfer = aEvent.dataTransfer;
+		let files = dataTransfer.files;
+
+		this._handleFiles(files);
+	}
+
+	_handleChange(aEvent) {
+		console.log("_handleChange");
+
+		this._handleFiles(aEvent.target.files);
+	}
+
+	_selectFiles() {
+		var input = document.createElement('input');
+		input.type = 'file';
+
+		let accept = this.getPropValue("accept");
+		if(accept) {
+			input.accept = accept;
+		}
+		
+		input.addEventListener("change", (aEvent) => {this._handleChange(aEvent)});
+		input.click();
+	}
+	
+	_renderMainElement() {
+
+		return this._createMainElement(Dbm.react.BaseObject, {
+			role: "button",
+			tabIndex: 0,
+			className: this.item.properties.fullClass,
+			onDragEnter: (aEvent) => {this._highlight(aEvent);},
+			onDragOver: (aEvent) => {this._highlight(aEvent);},
+			onDragLeave: (aEvent) => {this._unhighlight(aEvent);}, 
+			onDrop: (aEvent) => {this._handleDrop(aEvent);},
+			onKeyDown: function(aEvent) {console.log(aEvent); if(aEvent.key === "Enter") aEvent.target.click()},
+			onClick: (aEvent) => {this._selectFiles();}
+		},
+			this.getPropValue("children")
+		);
+	}
+}
+
+

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,4 @@
 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";
+export {default as FileDropArea} from "./FileDropArea.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/LocalImage.js

@@ -0,0 +1,42 @@
+import Dbm from "../../index.js";
+
+export default class LocalImage extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        this.item.requireProperty("url", null);
+        let fileProp = this.getDynamicProp("file");
+
+        Dbm.flow.addUpdateCommand(fileProp, Dbm.commands.callFunction(this._fileChanged.bind(this)));
+    }
+
+    _fileChanged() {
+
+        let file = this.getPropValue("file");
+
+        if(file) {
+            let fileReader = new FileReader();
+            fileReader.onload = (function(aEvent) {
+                this._fileLoaded(file, fileReader.result);
+            }).bind(this);
+            fileReader.readAsDataURL(file);
+        }
+        else {
+            this.item.setValue("url", null);
+        }
+    }
+
+    _fileLoaded(aFile, aData) {
+        this.item.setValue("url", aData);
+    }
+
+    _removedUsedProps(aProps) {
+        delete aProps["file"];
+    }
+
+    _renderMainElement() {
+
+        return this._createMainElement(Dbm.react.image.Image, {src: this.item.properties.url}, this.getPropValue("children"));
+        
+    }
+}

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,4 @@
+export {default as Image} from "./Image.js";
+export {default as WidthScaledImage} from "./WidthScaledImage.js";
+export {default as CoverScaledImage} from "./CoverScaledImage.js";
+export {default as LocalImage} from "./LocalImage.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";
+export * as interaction from "./interaction/index.js";