dbm 1.1.0 → 1.1.1

package/flow/controllers/index.js

@@ -0,0 +1 @@
+export * as select from "./select/index.js";

package/flow/controllers/select/SingleSelection.js

@@ -0,0 +1,65 @@
+import Dbm from "../../../index.js";
+
+export default class SingleSelection extends Dbm.core.BaseObject {
+    _construct() {
+        super._construct();
+
+        let valueUpdatedCommand = Dbm.commands.callFunction(this._valueUpdated.bind(this));
+
+        this._selectionChangedBound = this._selectionChanged.bind(this);
+
+        Dbm.flow.addUpdateCommand(this.item.requireProperty("value", null), valueUpdatedCommand);
+        Dbm.flow.addUpdateCommand(this.item.requireProperty("selections", []), valueUpdatedCommand);
+
+        this.item.requireProperty("matched", false);
+    }
+
+    addSelectionValue(aValue) {
+        let selections = [].concat(this.item.selections);
+
+        let property = new Dbm.flow.FlowProperty();
+        property.setValue(false);
+        Dbm.flow.addUpdateCommand(property, Dbm.commands.callFunction(this._selectionChangedBound, [property, aValue]));
+
+        selections.push({"value": aValue, "property": property});
+        this.item.selections = selections;
+
+        return property;
+    }
+
+    _selectionChanged(aSelected, aValue) {
+        //console.log("_selectionChanged");
+        //console.log(aSelected, aValue);
+
+        if(aSelected) {
+            this.item.properties.value.getMostUpstreamProperty().setValue(aValue);
+        }
+        else {
+            if(this.item.properties.value === aValue) {
+                this.item.properties.value.getMostUpstreamProperty().setValue(null);
+            }
+        }
+    }
+
+    _valueUpdated() {
+        //console.log("_valueUpdated");
+        let value = this.item.value;
+
+        let matched = false;
+
+        let currentArray = this.item.selections;
+        let currentArrayLength = currentArray.length;
+        for(let i = 0; i < currentArrayLength; i++) {
+            let currentSelection = currentArray[i];
+            if(currentSelection.value === value) {
+                currentSelection.property.value = true;
+                matched = true;
+            }
+            else {
+                currentSelection.property.value = false;
+            }
+        }
+
+        this.item.matched = matched;
+    }
+}

package/flow/controllers/select/index.js

@@ -0,0 +1 @@
+export {default as SingleSelection} from "./SingleSelection.js";

package/flow/index.js

@@ -9,6 +9,7 @@ export {default as DirtyCommands} from "./DirtyCommands.js";
 export {default as FlowPropertyWithExternalInput} from "./FlowPropertyWithExternalInput.js";
 
 export * as updatefunctions from "./updatefunctions/index.js";
+export * as controllers from "./controllers/index.js";
 
 export let addUpdateCommand = function(aProperty, aCommand) {
     let updateFunction = new Dbm.flow.updatefunctions.basic.RunCommand();

package/flow/updatefunctions/basic/Length.js

@@ -0,0 +1,20 @@
+import Dbm from "../../../index.js";
+
+export default class Length extends Dbm.flow.FlowUpdateFunction {
+
+    _construct() {
+        super._construct();
+        
+        this.input.register("value", "");
+
+        this.output.register("length", 0);
+    }
+
+    _update() {
+        //console.log("_update");
+
+        let value = this.input.value;
+        
+        this.output.length = value ? value.length : 0;
+    }
+}

package/flow/updatefunctions/basic/PropertyOf.js

@@ -0,0 +1,21 @@
+import Dbm from "../../../index.js";
+
+export default class Length extends Dbm.flow.FlowUpdateFunction {
+
+    _construct() {
+        super._construct();
+        
+        this.input.register("value", "");
+        this.input.register("propertyName", "");
+
+        this.output.register("value", null);
+    }
+
+    _update() {
+        //console.log("_update");
+
+        let value = this.input.value;
+        
+        this.output.value = Dbm.objectPath(value, this.input.propertyName);
+    }
+}

package/flow/updatefunctions/basic/index.js

@@ -2,6 +2,8 @@ import Dbm from "../../../index.js";
 
 export {default as RunCommand} from "./RunCommand.js";
 export {default as CombineString} from "./CombineString.js";
+export {default as Length} from "./Length.js";
+export {default as PropertyOf} from "./PropertyOf.js";
 
 export const runCommand = function(aValue, aCommand) {
 	let updateFunction = new Dbm.flow.updatefunctions.basic.RunCommand();
@@ -15,4 +17,19 @@ export const transformValue = function(aValue, aFunction) {
 	let command = Dbm.commands.callFunction(aFunction, [Dbm.core.source.event()]);
 	
 	return Dbm.flow.updatefunctions.basic.runCommand(aValue, command);
+}
+
+export const length = function(aValue) {
+	let updateFunction = new Dbm.flow.updatefunctions.basic.Length();
+	updateFunction.input.properties.value.setOrConnect(aValue);
+	
+	return updateFunction;
+}
+
+export const propertyOf = function(aValue, aPropertyName) {
+	let updateFunction = new Dbm.flow.updatefunctions.basic.PropertyOf();
+	updateFunction.input.properties.value.setOrConnect(aValue);
+	updateFunction.input.properties.propertyName.setOrConnect(aPropertyName);
+	
+	return updateFunction;
 }

package/flow/updatefunctions/logic/Condition.js

@@ -15,6 +15,17 @@ export default class Condition extends Dbm.flow.FlowUpdateFunction {
     _update() {
         //console.log("_update");
 
-        this.output.result = this.input.operation.call(this, this.input.input1, this.input.input2);
+        let operation = this.input.operation;
+        if(typeof(operation) === "string") {
+            if(operation === "!==") {
+                operation = function(aA, aB) {return aA !== aB;}
+            }
+            else {
+                //METODO: add more operations
+                operation = function(aA, aB) {return aA === aB;}
+            }
+        }
+
+        this.output.result = operation.call(this, this.input.input1, this.input.input2);
     }
 }

package/flow/updatefunctions/logic/Invert.js

@@ -0,0 +1,18 @@
+import Dbm from "../../../index.js";
+
+export default class Invert extends Dbm.flow.FlowUpdateFunction {
+
+    _construct() {
+        super._construct();
+        
+        this.input.register("input", false);
+
+        this.output.register("result", true);
+    }
+
+    _update() {
+        //console.log("_update");
+
+        this.output.result = !this.input.input;
+    }
+}

package/flow/updatefunctions/logic/index.js

@@ -10,6 +10,7 @@ export {default as All} from "./All.js";
 export {default as Any} from "./Any.js";
 export {default as AllAtValue} from "./AllAtValue.js";
 export {default as WhenMatched} from "./WhenMatched.js";
+export {default as Invert} from "./Invert.js";
 
 export let subtract = function(aInput1 = 0, aInput2 = 0) {
     let updateFunction = new Dbm.flow.updatefunctions.logic.Subtraction();
@@ -19,6 +20,13 @@ export let subtract = function(aInput1 = 0, aInput2 = 0) {
     return updateFunction;
 }
 
+export let invert = function(aValue = false) {
+    let updateFunction = new Dbm.flow.updatefunctions.logic.Invert();
+    updateFunction.input.properties.input.setValue(aValue);
+
+    return updateFunction;
+}
+
 export let invertP = function(aP = 0) {
     let updateFunction = new Dbm.flow.updatefunctions.logic.Subtraction();
     updateFunction.input.properties.input1.setValue(1);

package/graphapi/webclient/GraphApi.js

@@ -32,6 +32,10 @@ export default class GraphApi extends Dbm.core.BaseObject {
         return this._websocketConnection.requestData(aFunctionName, aData);
     }
 
+    performAction(aFunctionName, aData) {
+        return this._websocketConnection.performAction(aFunctionName, aData);
+    }
+
     createItem(aTypes, aVisibility = "draft", aChanges = [], aEncode = []) {
         return this._websocketConnection.createItem(aTypes, aVisibility, aChanges, aEncode);
     }

package/graphapi/webclient/WebSocketConnection.js

@@ -87,6 +87,15 @@ export default class WebSocketConnection extends Dbm.core.BaseObject {
         return item;
     }
 
+    performAction(aFunctionName, aData) {
+        //console.log("performAction");
+        let item = this._getRequestItem();
+        item.setValue("requestData", {"type": "action", "functionName": aFunctionName, "data": aData, "requestId": item.id});
+        this._runRequest(item);
+        
+        return item;
+    }
+
     createItem(aTypes, aVisibility = "draft", aChanges = [], aEncode = []) {
         let item = this._getRequestItem();
         item.setValue("requestData", {"type": "admin/createObject", "types": aTypes, "visibility": aVisibility, "changes": aChanges, "encode": aEncode, "requestId": item.id});
@@ -212,6 +221,7 @@ export default class WebSocketConnection extends Dbm.core.BaseObject {
                 }
                 break;
             case "data/response":
+            case "action/response":
                 {
                     let item = repository.getItem(data["requestId"]);
                     item.setValue("data", data["data"]);

package/package.json

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

package/react/admin/EditPage.js

@@ -13,6 +13,10 @@ export default class EditPage extends Dbm.react.BaseObject {
         this.item.setValue("description", page["meta/description"]);
         this.item.setValue("url", page.url);
 
+        let descriptionLength = Dbm.flow.updatefunctions.basic.length(this.item.properties.description);
+
+        this.item.requireProperty("descriptionLength", 0).connectInput(descriptionLength.output.properties.length);
+
         //METODO: add editors
     }
 
@@ -22,8 +26,8 @@ export default class EditPage extends Dbm.react.BaseObject {
         let page = this.context.page;
         let id = page.id;
         let graphApi = Dbm.getInstance().repository.getItem("graphApi").controller;
-        console.log(this.item.content);
-        console.log(this.item.content.blocks[1].data.text);
+        //console.log(this.item.content);
+        //console.log(this.item.content.blocks[1].data.text);
 
         graphApi.editItem(id, [
             {"type": "setField", "data": {"value": this.item.content, "field": "content"}},
@@ -35,6 +39,20 @@ export default class EditPage extends Dbm.react.BaseObject {
         ], ["content", "title", "url", "meta/description"]);
     }
 
+    _generateSeoSummary() {
+        let graphApi = Dbm.getInstance().repository.getItem("graphApi").controller;
+
+        let request = graphApi.requestData("admin/seoSummary", {"value": {"title": this.item.title, "content": this.item.content}});
+        Dbm.flow.addUpdateCommandWhenMatched(request.properties.status, Dbm.loading.LoadingStatus.LOADED, Dbm.commands.callFunction(this._dataLoaded.bind(this), [request]));
+
+    }
+
+    _dataLoaded(aRequest) {
+        let summary = Dbm.objectPath(aRequest, "data.seoSummary");
+
+        this.item.description = summary;
+    }
+
     _renderMainElement() {
 
         return React.createElement("div", {},
@@ -66,6 +84,17 @@ export default class EditPage extends Dbm.react.BaseObject {
                     "Seo description"
                 ),
                 React.createElement(Dbm.react.form.FormField, {"value": this.item.properties.description, className: "standard-field standard-field-padding full-width", placeholder: "Description"}),
+                React.createElement("div", {className: "spacing micro"}),
+                React.createElement("div", {className: "flex-row justify-between"},
+                    React.createElement("div", {className: "flex-row-item"},
+                        React.createElement("div", {onClick: () => {this._generateSeoSummary()}}, "Generate"),
+                    ),
+                    React.createElement("div", {className: "flex-row-item"},
+                        Dbm.react.text.text(this.item.properties.descriptionLength),
+                        " / ",
+                        "155"
+                    )
+                )
             ),
             React.createElement("div", {className: "spacing standard"}),
             React.createElement("div", {"className": "dbm-admin-box dbm-admin-box-padding"},

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

@@ -19,7 +19,7 @@ export default class ImageField extends Dbm.react.BaseObject {
 
         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(Dbm.react.image.WidthScaledImage, {"image": Dbm.react.source.contextVariable("moduleData.editorData.data." + fieldName), targetWidth: 120, 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"))

package/react/area/OpenCloseExpandableArea.js

@@ -7,6 +7,9 @@ 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);
@@ -34,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.animation.AnimatedElement, {"className": "animation-element", "controller": this.item.animation.item},
-			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/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/index.js

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

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

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

package/react/index.js

@@ -15,4 +15,4 @@ export * as text from "./text/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";

package/react/interaction/CommandButton.js

@@ -0,0 +1,97 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class CommandButton extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        this._callback_clickBound = this._callback_click.bind(this);
+    }
+
+    _callback_click(aEvent) {
+        //console.log("_callback_click");
+        //console.log(aEvent);
+
+        let command = this.getPropValue("command");
+
+        command.perform(this, aEvent);
+
+    }
+
+    _performClone(aChild, aProps) {
+		
+		if(aChild instanceof Array) {
+			let returnArray = [];
+			
+			let currentArray = aChild;
+			let currentArrayLength = currentArray.length;
+			for(let i = 0; i < currentArrayLength; i++) {
+				let currentChild = currentArray[i];
+				returnArray.push(this._performClone(currentChild, aProps));
+			}
+			
+			return returnArray;
+		}
+		
+		let newProps = aProps;
+        /*
+        //MENOTE: this is a more generalized version, but we never pass in className in this function
+        if(aChild && aChild.props && aChild.props.className) {
+			newProps = {...aProps};
+            
+			if(aProps.className) {
+				newProps.className = aProps.className + " " + aChild.props.className;
+			} 
+			else {
+				newProps.className = aChild.props.className;
+			}
+		}
+        */
+		
+		
+		let callArray = [aChild, newProps];
+		
+		if(aChild && aChild.props) {
+			let firstChildChildren = aChild.props.children;
+			if(!firstChildChildren) {
+				//MENOTE: do nothing
+			}
+			else if(firstChildChildren instanceof Array) {
+				callArray = callArray.concat(firstChildChildren);
+			}
+			else {
+				callArray.push(firstChildChildren);
+			}
+		}
+		
+		return React.cloneElement.apply(React, callArray);
+	}
+
+    _renderMainElement() {
+
+        let children = Dbm.utils.ArrayFunctions.singleOrArray(this.getPropValue("children"));
+
+        let replacedChildren = [];
+
+        let currentArray = children;
+        let currentArrayLength = currentArray.length;
+        for(let i = 0; i < currentArrayLength; i++) {
+            let currentChild = currentArray[i];
+            if(currentChild) {
+                if(typeof(currentChild) === "string") {
+                    replacedChildren.push(React.createElement("span"), {"onClick": this._callback_clickBound, onKeyDown: function(aEvent) {if(aEvent.key === "Enter") aEvent.target.click()}}, currentChild);
+                }
+                else {
+                    replacedChildren.push(this._performClone(currentChild, {"onClick": this._callback_clickBound, onKeyDown: function(aEvent) {if(aEvent.key === "Enter") aEvent.target.click()}}));
+                }
+            }
+            else {
+                replacedChildren.push(currentChild);
+            }
+        }
+        
+
+        return React.createElement(React.Fragment, {}, replacedChildren);
+    }
+}
+

package/react/interaction/index.js

@@ -0,0 +1,3 @@
+import Dbm from "../../index.js";
+
+export {default as CommandButton} from "./CommandButton.js";

package/utils/ArrayFunctions.js

@@ -1,3 +1,5 @@
+import Dbm from "../index.js";
+
 export const range = function(aStartValue, aEndValue, aStepValue = 1, aIncludeEndValue = true) {
 		
     let returnArray = new Array();
@@ -60,4 +62,74 @@ export const singleOrArray = function(aData) {
     }
     
     return [aData];
+}
+
+export const removeValues = function(aArray, aRemoveValues) {
+    let returnArray = new Array();
+    
+    let currentArray = aArray;
+    let currentArrayLength = currentArray.length;
+    for(let i = 0; i < currentArrayLength; i++) {
+        let currentValue = currentArray[i];
+        if(aRemoveValues.indexOf(currentValue) === -1) {
+            returnArray.push(currentValue);
+        }
+    }
+    
+    return returnArray;
+}
+
+export const trimArray = function(aArray, aMode = 3) {
+		
+    if(aMode > 0) {
+        //METODO: use mode
+        if(aArray) {
+            let currentArray = aArray;
+            let currentArrayLength = currentArray.length;
+            for(let i = 0; i < currentArrayLength; i++) {
+                let currentString = currentArray[i];
+                
+                if(typeof(currentString) === "string") {
+                    currentArray[i] = currentString.trim();
+                }
+            }
+        }
+    }
+    
+    return aArray;
+}
+
+export const arrayOrSeparatedString = function(aData, aSeparator = ",", aTrim = 3) {
+    if(aData === null || aData === undefined) {
+        return [];
+    }
+    else if(aData instanceof Array) {
+        return aData;
+    }
+    else if(typeof(aData) === "string") {
+        if(aData === "") {
+            return [];
+        }
+        return trimArray(aData.split(aSeparator));
+    }
+    
+    console.error(aData + " is not array or string.");
+    return [];
+}
+
+export const filterByField = function(aArray, aField, aValue) {
+    let returnArray = [];
+
+    let currentArray = aArray;
+    let currentArrayLength = currentArray.length;
+    for(let i = 0; i < currentArrayLength; i++) {
+        let currentItem = aArray[i];
+        let currentValue = Dbm.objectPath(aArray[i], aField);
+        console.log(currentValue, aValue);
+        if(currentValue === aValue) {
+            returnArray.push(currentItem);
+        }
+    }
+
+    return returnArray;
 }