dbm 1.0.5 → 1.1.0

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

@@ -0,0 +1,137 @@
+import React from "react";
+import Dbm from "../../../../index.js";
+
+export default class ImageField extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        this._valueChangedBound = this._valueChanged.bind(this);
+        this._objectChangedBound = this._objectChanged.bind(this);
+        this._callback_fileChangedBound = this._callback_fileChanged.bind(this);
+
+        let fieldName = this.getPropValue("name");
+
+        let editorData = Dbm.objectPath(this.context, "moduleData.editorData");
+
+        Dbm.flow.addUpdateCommand(this.item.requireProperty("value", this._getObjectData()), Dbm.commands.callFunction(this._valueChangedBound));
+
+        Dbm.flow.addUpdateCommand(editorData.properties.data, Dbm.commands.callFunction(this._objectChangedBound));
+
+        let imageElement = React.createElement("div", {className: "flex-row small-item-spacing"},
+            React.createElement("div", {className: "flex-row-item flex-no-resize"},
+                React.createElement(Dbm.react.image.Image, {"src": Dbm.react.source.contextVariable("moduleData.editorData.data." + fieldName + ".url"), className: "editor-preview background-contain"}),
+            ),
+            React.createElement("div", {className: "flex-row-item flex-resize"},
+                Dbm.react.text.text(Dbm.react.source.contextVariable("moduleData.editorData.data." + fieldName + ".url"))
+            ),
+            React.createElement("div", {className: "flex-row-item flex-no-resize"},
+                React.createElement("div", {onClick: () => {this.removeImage()}}, "Remove")
+            )
+        );
+
+        let uploadElement = React.createElement("input", {"type": "file", onChange: this._callback_fileChangedBound, className: "full-width"});
+
+        let elementSwitch =Dbm.flow.updatefunctions.logic.switchValue(this.item.properties.value).setDefaultValue(imageElement).addCase(null, uploadElement);
+
+        this.item.requireProperty("element", null).connectInput(elementSwitch.output.properties.value);
+    }
+
+    _getObjectData() {
+        let fieldName = this.getPropValue("name");
+
+        let editorData = Dbm.objectPath(this.context, "moduleData.editorData");
+
+        let returnData = editorData.data[fieldName];
+        if(!returnData) {
+            returnData = null;
+        }
+
+        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");
+
+        let fieldName = this.getPropValue("name");
+        let editorData = Dbm.objectPath(this.context, "moduleData.editorData");
+
+        this.item.value = this._getObjectData();
+    }
+
+    _callback_fileChanged(aEvent) {
+        console.log("_callback_fileChanged");
+        console.log(aEvent, aEvent.target.files);
+
+        let files = aEvent.target.files;
+        if(files.length > 0) {
+            this.uploadImage(files[0]);
+        }
+    }
+
+    removeImage() {
+        this.item.value = null;
+
+        return this;
+    }
+
+    uploadImage(aFile) {
+            
+                let graphApi = Dbm.getInstance().repository.getItem("graphApi").controller;
+    
+                let preSign = graphApi.requestData("fileUpload", {"fileName": aFile.name, "mimeType": aFile.type});
+        
+                Dbm.flow.addDirectUpdateCommand(preSign.getProperty("status"), Dbm.commands.callFunction(this._statusChanged.bind(this), [preSign, aFile]));
+            
+        }
+    
+        _statusChanged(aPreSign, aFile) {
+            console.log("_statusChanged");
+            console.log(aPreSign, aFile);
+    
+            if(aPreSign.status === 1) {
+                let url = aPreSign.data.url;
+                console.log(url, aPreSign.data);
+    
+                let headers = {
+                    'Content-Type': aFile.type,
+                    'Cache-Control': 'no-cache',
+                };
+
+                let additionalHeaders = aPreSign.data.additionalHeaders;
+                for(let objectName in additionalHeaders) {
+                    headers[objectName] = additionalHeaders[objectName];
+                }
+
+                fetch(url, {
+                    method: 'PUT',
+                    headers: new Headers(headers),
+                    body: aFile
+                 }).then(() => {
+                    this.item.value = {url: aPreSign.data.publicUrl, resizeUrl: aPreSign.data.publicResizeUrl, identifier: aPreSign.data.identifier};
+                    console.log("Uploaded", this.item.value);
+                    //METODO: send update to editor
+                 })
+    
+            }
+        }
+
+    _renderMainElement() {
+        return this._createMainElement("div", {},
+            React.createElement(Dbm.react.area.InsertElement, {element: this.item.properties.element})
+        );
+    }
+}

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

@@ -0,0 +1,75 @@
+import React from "react";
+import Dbm from "../../../../index.js";
+
+export default class RichTextField extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        this._valueChangedBound = this._valueChanged.bind(this);
+        this._objectChangedBound = this._objectChanged.bind(this);
+        this._elementChangedBound = this._elementChanged.bind(this);
+        this._callback_inputBound = this._callback_input.bind(this);
+
+        this.createRef("contentElement");
+        Dbm.flow.addUpdateCommand(this.item.properties.contentElement, Dbm.commands.callFunction(this._elementChangedBound));
+
+        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");
+
+        let returnData = editorData.data[fieldName];
+        if(!returnData) {
+            returnData = "";
+        }
+
+        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;
+
+        if(this.item.contentElement && newValue !== this.item.contentElement.innerHTML) {
+            this.item.contentElement.innerHTML = newValue;
+        }
+    }
+
+    _objectChanged() {
+        //console.log("_objectChanged");
+
+        this.item.value = this._getObjectData();
+    }
+
+    _elementChanged() {
+        //console.log("_elementChanged");
+
+        this.item.contentElement.innerHTML = this.item.value;
+        this.item.contentElement.addEventListener("input", this._callback_inputBound, false);
+
+    }
+
+    _callback_input(aEvent) {
+        //console.log("_callback_input");
+
+        this.item.value = "" + this.item.contentElement.innerHTML;
+    }
+
+    _renderMainElement() {
+        return this._createMainElement("div", {contentEditable: true, ref: this.createRef("contentElement"), className: "standard-field standard-field-padding"});
+    }
+}

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

@@ -0,0 +1,53 @@
+import React from "react";
+import Dbm from "../../../../index.js";
+
+export default class TextField 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");
+
+        let returnData = editorData.data[fieldName];
+        if(!returnData) {
+            returnData = "";
+        }
+
+        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;
+    }
+
+    _objectChanged() {
+        //console.log("_objectChanged");
+
+        this.item.value = this._getObjectData();
+    }
+
+    _renderMainElement() {
+        return this._createMainElement(Dbm.react.form.FormField, {value: this.item.properties.value, className: "standard-field standard-field-padding full-width"});
+    }
+}

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

@@ -0,0 +1,4 @@
+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";

package/react/admin/editor/index.js

@@ -0,0 +1,6 @@
+export {default as Editor} from "./Editor.js";
+export {default as EditorBlock} from "./EditorBlock.js";
+export {default as EditorBlockName} from "./EditorBlockName.js";
+export {default as EditorBlockFields} from "./EditorBlockFields.js";
+
+export * as fields from "./fields/index.js";

package/react/admin/index.js

@@ -1,5 +1,4 @@
-export {default as Editor} from "./Editor.js";
-export {default as EditorBlock} from "./EditorBlock.js";
-export {default as EditorBlockName} from "./EditorBlockName.js";
 export {default as CreatePage} from "./CreatePage.js";
-export {default as EditPage} from "./EditPage.js";
+export {default as EditPage} from "./EditPage.js";
+
+export * as editor from "./editor/index.js";

package/react/animation/AnimatedElement.js

@@ -0,0 +1,22 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class AnimatedElement extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        let controller = this.getPropValue("controller");
+
+        controller.propertyInput("element", this.item.requireProperty("animationElement", null));
+    }
+
+    _renderMainElement() {
+        //console.log("AnimatedElement::_renderMainElement");
+        //console.log(this);
+        
+        let controller = this.getPropValue("controller");
+        let children = this.getPropValue("children");
+
+        return this._createMainElement("div", {"ref": this.createRef("animationElement"), "style": controller.jsxStyle}, children);
+    }
+}

package/react/animation/AnimationController.js

@@ -0,0 +1,53 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class AnimationController extends Dbm.core.BaseObject {
+    _construct() {
+        super._construct();
+
+        let updateStyleCommand = Dbm.commands.callFunction(this._updateStyle.bind(this));
+
+        Dbm.flow.addUpdateCommand(this.item.requireProperty("element", null), updateStyleCommand);
+        Dbm.flow.addUpdateCommand(this.item.requireProperty("style", {}), updateStyleCommand);
+
+        //METODO: add conversion to jsx
+
+        this.item.requireProperty("jsxStyle", {});
+    }
+
+    _updateStyle() {
+        //console.log("_updateStyle");
+        let element = this.item.element;
+
+        
+
+        if(element) {
+            
+            let styleArray = [];
+            
+            let styleObject = this.item.style;
+            for(let objectName in styleObject) {
+                styleArray.push(objectName + ": " + styleObject[objectName]);
+            }
+
+            element.style = styleArray.join("; ");
+        }
+
+        
+    }
+
+    _convertStyleToJsx() {
+
+    }
+
+    insertElement(aChildren) {
+
+        let reactElement = this.item.reactElement;
+        if(!reactElement) {
+            reactElement = React.createElement(Dbm.react.animation.AnimatedElement, {controller: this.item}, aChildren);
+            this.item.setValue("reactElement", reactElement);
+        }
+
+        return reactElement;
+    }
+}

package/react/animation/index.js

@@ -0,0 +1,22 @@
+import Dbm from "../../index.js";
+
+export {default as AnimatedElement} from "./AnimatedElement.js";
+export {default as AnimationController} from "./AnimationController.js";
+
+export const freeStyleAnimation = function() {
+    let newAnimationController = new Dbm.react.animation.AnimationController();
+
+    let styleObject = new Dbm.flow.updatefunctions.dom.StyleObject();
+    newAnimationController.item.propertyInput("style", styleObject.output.properties.style);
+    newAnimationController.item.setValue("styleProperties", styleObject);
+
+    return newAnimationController;
+}
+
+export const connectedAnimation = function(aStyleProperty) {
+    let newAnimationController = new Dbm.react.animation.AnimationController();
+
+    newAnimationController.item.propertyInput("style", aStyleProperty);
+
+    return newAnimationController;
+}

package/react/area/HasData.js

@@ -11,6 +11,11 @@ export default class HasData extends Dbm.react.BaseObject {
         //console.log(this);
         
         let data = this.getPropValue("check");
+        let checkType = this.getPropValue("checkType");
+
+        if(checkType === "invert/default") {
+            data = !data;
+        }
 
         if(data) {
             return React.createElement(React.Fragment, {}, this.getPropValue("children"));

package/react/area/InsertElement.js

@@ -10,7 +10,7 @@ export default class InsertElement extends Dbm.react.BaseObject {
         //console.log("InsertElement::render");
         //console.log(this);
         
-        let element = this.getDynamicProp("element").value;
+        let element = this.getPropValue("element");
 
         if(!element) {
             return React.createElement("div", {}, "No element set");

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

@@ -13,11 +13,13 @@ export default class OpenCloseExpandableArea extends Dbm.react.BaseObject {
 		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"};
@@ -33,7 +35,7 @@ export default class OpenCloseExpandableArea extends Dbm.react.BaseObject {
         //console.log("OpenCloseExpandableArea::_renderMainElement");
         //console.log(this);
 		
-		return this._createMainElement(Dbm.react.BaseObject, {"className": "animation-element", "style": this.item.properties.animationStyle},
+		return this._createMainElement(Dbm.react.animation.AnimatedElement, {"className": "animation-element", "controller": this.item.animation.item},
 			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")} )
+        )
+    }
+}