dbm 1.0.0 → 1.0.2

package/flow/updatefunctions/dom/HorizontalFlip.js

@@ -0,0 +1,67 @@
+import Dbm from "../../../index.js";
+
+export default class HorizontalFlip extends Dbm.flow.FlowUpdateFunction {
+
+    _construct() {
+        super._construct();
+        
+        this.input.register("envelope", 0);
+        console.log(this.input.properties.envelope);
+        this.input.register("perspective", "3000px");
+
+        this.output.register("style1", {});
+        this.output.register("style2", {"opacity": 0, "position": "absolute", "top": 0, "left": 0, "width": "100%", "dispaly": "none"});
+        this.output.register("inDom1", true);
+        this.output.register("inDom2", false);
+    }
+
+    _update() {
+        //console.log("_update");
+
+        let envelope = this.input.envelope;
+        let perspective = this.input.perspective;
+
+        let inDom1 = (Math.round(Math.abs(180*envelope)+180)%360 !== 0);
+        let inDom2 = (Math.round(Math.abs(180*envelope))%360 !== 0);
+
+        this.output.inDom1 = inDom1;
+        this.output.inDom2 = inDom2;
+
+        if(!inDom1) {
+            this.output.style1 = {"opacity": 0, "position": "absolute", "top": 0, "left": 0, "width": "100%", "dispaly": "none"};
+            this.output.style2 = {};
+        }
+        else if(!inDom2) {
+            this.output.style1 = {};
+            this.output.style2 = {"opacity": 0, "position": "absolute", "top": 0, "left": 0, "width": "100%", "dispaly": "none"};
+        }
+        else {
+            let angle1 = 180*envelope;
+            let angle2 = angle1-180;
+            let localAngle = Dbm.utils.NumberFunctions.floatMod(angle1, 360);
+    
+            let styleObject1 = {"transform": "perspective(" + perspective + ") rotateY(" + angle1 + "deg)"};
+            let styleObject2 = {"transform": "perspective(" + perspective + ") rotateY(" + angle2 + "deg)"};
+            
+            if(localAngle < 90 || localAngle >= 3*90) {
+                styleObject1["opacity"] = 1;
+                styleObject2["opacity"] = 0;
+                styleObject2["position"] = "absolute";
+                styleObject2["top"] = 0;
+                styleObject2["left"] = 0;
+                styleObject2["width"] = 0;
+            }
+            else {
+                styleObject1["opacity"] = 0;
+                styleObject2["opacity"] = 1;
+                styleObject1["position"] = "absolute";
+                styleObject1["top"] = 0;
+                styleObject1["left"] = 0;
+                styleObject1["width"] = 0;
+            }
+
+            this.output.style1 = styleObject1;
+            this.output.style2 = styleObject2;
+        }
+    }
+}

package/flow/updatefunctions/dom/index.js

@@ -1,2 +1,3 @@
 export {default as ElementSize} from "./ElementSize.js";
-export {default as StyleObject} from "./StyleObject.js";
+export {default as StyleObject} from "./StyleObject.js";
+export {default as HorizontalFlip} from "./HorizontalFlip.js";

package/flow/updatefunctions/logic/All.js

@@ -0,0 +1,44 @@
+import Dbm from "../../../index.js";
+
+export default class All extends Dbm.flow.FlowUpdateFunction {
+
+    _construct() {
+        super._construct();
+        
+        this.input.register("checks", []);
+
+        this.output.register("value", false);
+    }
+
+    addCheck(aValue) {
+
+        let checks = [].concat(this.input.checks);
+
+        let property = this.input.register("property_" + checks.length, null).setOrConnect(aValue);
+
+        checks.push(property);
+
+        this.input.checks = checks;
+
+        return this;
+    }
+
+    _update() {
+        //console.log("_update");
+
+        let returnValue = true;
+
+        let currentArray = this.input.checks;
+        let currentArrayLength = currentArray.length;
+        for(let i = 0; i < currentArrayLength; i++) {
+            let currentProperty = currentArray[i];
+
+            if(!currentProperty.value) {
+                returnValue = false;
+                break;
+            }
+        }
+
+        this.output.value = returnValue;
+    }
+}

package/flow/updatefunctions/logic/AllAtValue.js

@@ -0,0 +1,46 @@
+import Dbm from "../../../index.js";
+
+export default class AllAtValue extends Dbm.flow.FlowUpdateFunction {
+
+    _construct() {
+        super._construct();
+        
+        this.input.register("matchValue", 1);
+        this.input.register("checks", []);
+
+        this.output.register("value", false);
+    }
+
+    addCheck(aValue) {
+
+        let checks = [].concat(this.input.checks);
+
+        let property = this.input.register("property_" + checks.length, null).setOrConnect(aValue);
+
+        checks.push(property);
+
+        this.input.checks = checks;
+
+        return this;
+    }
+
+    _update() {
+        //console.log("_update");
+
+        let matchValue = this.input.matchValue;
+        let returnValue = true;
+
+        let currentArray = this.input.checks;
+        let currentArrayLength = currentArray.length;
+        for(let i = 0; i < currentArrayLength; i++) {
+            let currentProperty = currentArray[i];
+
+            if(currentProperty.value !== matchValue) {
+                returnValue = false;
+                break;
+            }
+        }
+
+        this.output.value = returnValue;
+    }
+}

package/flow/updatefunctions/logic/Any.js

@@ -0,0 +1,44 @@
+import Dbm from "../../../index.js";
+
+export default class Any extends Dbm.flow.FlowUpdateFunction {
+
+    _construct() {
+        super._construct();
+        
+        this.input.register("checks", []);
+
+        this.output.register("value", false);
+    }
+
+    addCheck(aValue) {
+
+        let checks = [].concat(this.input.checks);
+
+        let property = this.input.register("property_" + checks.length, null).setOrConnect(aValue);
+
+        checks.push(property);
+
+        this.input.checks = checks;
+
+        return this;
+    }
+
+    _update() {
+        //console.log("_update");
+
+        let returnValue = false;
+
+        let currentArray = this.input.checks;
+        let currentArrayLength = currentArray.length;
+        for(let i = 0; i < currentArrayLength; i++) {
+            let currentProperty = currentArray[i];
+
+            if(currentProperty.value) {
+                returnValue = true;
+                break;
+            }
+        }
+
+        this.output.value = returnValue;
+    }
+}

package/flow/updatefunctions/logic/Condition.js

@@ -0,0 +1,20 @@
+import Dbm from "../../../index.js";
+
+export default class Condition extends Dbm.flow.FlowUpdateFunction {
+
+    _construct() {
+        super._construct();
+        
+        this.input.register("input1", null);
+        this.input.register("operation", function(aA, aB) {return aA === aB;});
+        this.input.register("input2", null);
+
+        this.output.register("result", true);
+    }
+
+    _update() {
+        //console.log("_update");
+
+        this.output.result = this.input.operation.call(this, this.input.input1, this.input.input2);
+    }
+}

package/flow/updatefunctions/logic/RangeSwitch.js

@@ -15,6 +15,7 @@ export default class RangeSwitch extends Dbm.flow.FlowUpdateFunction {
     addValueForRange(aOutputValue, aMinInputValue = null, aMaxInputValue = null) {
 
         let rangeData = {value: aOutputValue, min: aMinInputValue, max: aMaxInputValue};
+        //METODO: connect values to flow
 
         let newRanges = [].concat(this.input.ranges);
 

package/flow/updatefunctions/logic/Switch.js

@@ -0,0 +1,47 @@
+import Dbm from "../../../index.js";
+
+export default class Switch extends Dbm.flow.FlowUpdateFunction {
+
+    _construct() {
+        super._construct();
+        
+        this.input.register("value", 0);
+        this.input.register("defaultValue", null);
+        this.input.register("cases", []);
+
+        this.output.register("value", null);
+    }
+
+    addCase(aKey, aOutputValue) {
+
+        let newCase = {key: aKey, value: aOutputValue};
+        //METODO: connect key and value to flow
+
+        let newCases = [].concat(this.input.cases);
+
+        newCases.push(newCase);
+
+        this.input.cases = newCases;
+
+        return this;
+    }
+
+    _update() {
+        //console.log("_update");
+
+        let value = this.input.value;
+
+        let currentArray = this.input.ranges;
+        let currentArrayLength = currentArray.length;
+        for(let i = 0; i < currentArrayLength; i++) {
+            let currentCase = currentArray[i];
+
+            if(value === currentCase["key"]) {
+                this.output.value = currentRange["value"];
+                return;
+            }
+        }
+
+        this.output.value = this.input.defaultValue;
+    }
+}

package/flow/updatefunctions/logic/index.js

@@ -4,6 +4,11 @@ export {default as Addition} from "./Addition.js";
 export {default as Multiplication} from "./Multiplication.js";
 export {default as RangeSwitch} from "./RangeSwitch.js";
 export {default as Subtraction} from "./Subtraction.js";
+export {default as Switch} from "./Switch.js";
+export {default as Condition} from "./Condition.js";
+export {default as All} from "./All.js";
+export {default as Any} from "./Any.js";
+export {default as AllAtValue} from "./AllAtValue.js";
 
 export let subtract = function(aInput1 = 0, aInput2 = 0) {
     let updateFunction = new Dbm.flow.updatefunctions.logic.Subtraction();
@@ -34,5 +39,52 @@ export let multiply = function(aInput1 = 1, aInput2 = 1) {
     updateFunction.input.properties.input1.setOrConnect(aInput1);
     updateFunction.input.properties.input2.setOrConnect(aInput2);
 
+    return updateFunction;
+}
+
+export let condition = function(aInput1 = null, aOperationFunction = null, aInput2 = null) {
+    let updateFunction = new Dbm.flow.updatefunctions.logic.Condition();
+    updateFunction.input.properties.input1.setOrConnect(aInput1);
+    updateFunction.input.properties.operation.setOrConnect(aOperationFunction);
+    updateFunction.input.properties.input2.setOrConnect(aInput2);
+
+    return updateFunction;
+}
+
+export let all = function(...aValues) {
+    let updateFunction = new Dbm.flow.updatefunctions.logic.All();
+    
+    let currentArray = aValues;
+    let currentArrayLength = currentArray.length;
+    for(let i = 0; i < currentArrayLength; i++) {
+        updateFunction.addCheck(currentArray[i]);
+    }
+
+    return updateFunction;
+}
+
+export let any = function(...aValues) {
+    let updateFunction = new Dbm.flow.updatefunctions.logic.Any();
+    
+    let currentArray = aValues;
+    let currentArrayLength = currentArray.length;
+    for(let i = 0; i < currentArrayLength; i++) {
+        updateFunction.addCheck(currentArray[i]);
+    }
+
+    return updateFunction;
+}
+
+export let allAtValue = function(aMatchValue, ...aValues) {
+    let updateFunction = new Dbm.flow.updatefunctions.logic.AllAtValue();
+
+    updateFunction.input.matchValue = aMatchValue;
+    
+    let currentArray = aValues;
+    let currentArrayLength = currentArray.length;
+    for(let i = 0; i < currentArrayLength; i++) {
+        updateFunction.addCheck(currentArray[i]);
+    }
+
     return updateFunction;
 }

package/graphapi/admin/EditGroup.js

@@ -0,0 +1,50 @@
+import Dbm from "../../index.js";
+
+export default class EditGroup extends Dbm.core.BaseObject {
+    _construct() {
+        this.item.setValue("status", 0);
+        let changedProperty = this.item.requireProperty("changed", false);
+        this.item.setValue("showSavedMessageTimer", 0);
+        this.item.setValue("editors", []);
+
+        let any = Dbm.flow.updatefunctions.logic.any();
+        this.item.setValue("any", any);
+
+        changedProperty.connectInput(any.output.properties.value);
+        
+    }
+
+    createEditor(aSavedValue) {
+        let newChangeObject = null; //METODO
+
+        newChangeObject.setValue("changed", false);
+
+        newChangeObject.item; //METODO: connect saved value
+        //METODO: setup edited value
+        //METODO: set up condition
+
+        this.item.any.addCheck(newChangeObject.item.properties.changed); //METODO: add to any
+
+
+        let editors = [].concat(this.item.editors);
+        editors.push(newChangeObject);
+        this.item.editors = editors;
+    }
+
+    save() {
+
+        let saveOperations = [];
+
+        let currentArray = editors;
+        let currentArrayLength = currentArray.length;
+        for(let i = 0; i < currentArrayLength; i++) {
+            let currentChangeObject = currentArray[i];
+            if(currentChangeObject.item.changed) {
+                let saveOperation = null; //METODO: get save operation
+                saveOperations.push(saveOperation);
+            }
+        }
+
+        //METODO: trigger save operations
+    }
+}

package/graphapi/admin/index.js

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

package/graphapi/index.js

@@ -1 +1,2 @@
-export * as webclient from "./webclient/index.js";
+export * as webclient from "./webclient/index.js";
+export * as admin from "./admin/index.js";

package/graphapi/webclient/ApiConnection.js

@@ -0,0 +1,110 @@
+import Dbm from "../../index.js";
+
+export default class ApiConnection extends Dbm.core.BaseObject {
+    _construct() {
+        super._construct();
+
+        this._url = null;
+		this._setupItemResponseBound = this._setupItemResponse.bind(this);
+    }
+
+    setup(aUrl) {
+		
+        this._url = aUrl;
+		
+		return this;
+    }
+
+    _getRequestItem() {
+
+        let request = new Dbm.graphapi.webclient.ApiRequest();
+        request.item.setValue("status", Dbm.loading.LoadingStatus.NOT_STARTED);
+        request.item.setValue("connection", this.item); 
+
+        return request.item;
+    }
+
+    requestRange(aSelect, aEncode) {
+        let item = this._getRequestItem();
+        
+        
+        return item;
+    }
+
+    requestItem(aId, aEncode) {
+        let item = this._getRequestItem();
+        
+        
+        return item;
+    }
+
+    requestData(aFunctionName, aData) {
+        let item = this._getRequestItem();
+        
+        
+        return item;
+    }
+
+    createItem(aTypes, aVisibility = "draft", aChanges = [], aEncode = []) {
+        let item = this._getRequestItem();
+        
+
+        return item;
+    }
+
+    editItem(aId, aChanges, aEncode = []) {
+        let item = this._getRequestItem();
+        
+
+        return item;
+    }
+	
+	_updateObjects(aObjects) {
+		let repository = Dbm.getInstance().repository;
+		
+		let currentArray = aObjects;
+		let currentArrayLength = currentArray.length;
+		for(let i = 0; i < currentArrayLength; i++) {
+			let data = currentArray[i];
+            let item = repository.getItem(data["id"]);
+            let decoder = repository.getItemIfExists("graphApi/decode/" + data["encoding"]);
+            if(decoder) {
+                decoder.controller.updateItemWithEncoding(item, data["data"]);
+            }
+            else {
+                console.warn("No decoder for " + data["encoding"]);
+            }
+		}
+	}
+	
+	_setupItemResponse(aRequestItem, aData) {
+		this._updateObjects(aData.objects);
+		
+		let repository = Dbm.getInstance().repository;
+		
+		let id = aData.data.id;
+		if(id) {
+			aRequestItem.setValue("item", repository.getItem(id));
+		}
+		else {
+			aRequestItem.setValue("item", null);
+		}
+		
+		aRequestItem.status = 1;
+	}
+
+    requestUrl(aUrl) {
+		
+        let item = this._getRequestItem();
+        
+		let fullUrl = this._url + "url?url=" + encodeURIComponent(aUrl);
+		fetch(fullUrl).then((aRequest) => {
+			return aRequest.json();
+		}).then((aData) => {
+			this._setupItemResponseBound(item, aData);
+		});
+        
+        return item;
+    }
+
+}

package/graphapi/webclient/ApiRequest.js

@@ -0,0 +1,30 @@
+import Dbm from "../../index.js";
+
+export default class ApiRequest extends Dbm.core.BaseObject {
+    _construct() {
+        super._construct();
+
+    }
+
+    get processPromise() {
+        if(this.item.status === Dbm.loading.LoadingStatus.LOADED) {
+            return Promise.resolve(this.item);
+        }
+        if(this.item.status === Dbm.loading.LoadingStatus.LOADING || this.item.status === Dbm.loading.LoadingStatus.NOT_STARTED) {
+            if(!this.item.processPromise) {
+                let resolveCommand = Dbm.commands.resolvePromise(this.item);
+                this.item.setValue("doneCommands", [resolveCommand]);
+                let rejectCommand = Dbm.commands.callFunction(resolveCommand.item.reject, []);
+                this.item.setValue("errorCommands", [rejectCommand]);
+    
+                //METODO: change these to addToArray
+
+                this.item.setValue("processPromise", resolveCommand.item.promise);
+            }
+            
+            return this.item.processPromise;
+        }
+        
+        return Promise.reject();
+    }
+}

package/graphapi/webclient/GraphApi.js

@@ -0,0 +1,61 @@
+import Dbm from "../../index.js";
+
+export default class GraphApi extends Dbm.core.BaseObject {
+    _construct() {
+        super._construct();
+
+		this._websocketConnection = null;
+		this._apiConnection = null;
+    }
+	
+	setWebsocketConnection(aConnection) {
+		this._websocketConnection = aConnection;
+		
+		return this;
+	}
+	
+	setApiConnection(aConnection) {
+		this._apiConnection = aConnection;
+		
+		return this;
+	}
+	
+    requestRange(aSelect, aEncode) {
+        return this._websocketConnection.requestRange(aSelect, aEncode);
+    }
+
+    requestItem(aId, aEncode) {
+        return this._websocketConnection.requestItem(aId, aEncode);
+    }
+
+    requestData(aFunctionName, aData) {
+        return this._websocketConnection.requestData(aFunctionName, aData);
+    }
+
+    createItem(aTypes, aVisibility = "draft", aChanges = [], aEncode = []) {
+        return this._websocketConnection.createItem(aTypes, aVisibility, aChanges, aEncode);
+    }
+
+    editItem(aId, aChanges, aEncode = []) {
+        return this._websocketConnection.editItem(aId, aChanges, aEncode);
+    }
+
+	requestUrl(aUrl) {
+		//console.log("requestUrl");
+		//console.log(aUrl);
+		
+		if(this._websocketConnection && this._websocketConnection.item.status === 1) {
+			return this._websocketConnection.requestUrl(aUrl);
+		}
+		
+		return this._apiConnection.requestUrl(aUrl);
+	}
+	
+    signIn(aToken) {
+        return this._websocketConnection.signIn(aToken);
+    }
+
+    signOut() {
+        return this._websocketConnection.signOut();
+    }
+}

package/graphapi/webclient/WebSocketConnection.js

@@ -60,7 +60,7 @@ export default class WebSocketConnection extends Dbm.core.BaseObject {
     }
 
     requestData(aFunctionName, aData) {
-        console.log("requestData");
+        //console.log("requestData");
         let item = this._getRequestItem();
         item.setValue("requestData", {"type": "data", "functionName": aFunctionName, "data": aData, "requestId": item.id});
         this._runRequest(item);
@@ -85,6 +85,7 @@ export default class WebSocketConnection extends Dbm.core.BaseObject {
     }
 
     requestUrl(aUrl) {
+		
         let item = this._getRequestItem();
         item.setValue("requestData", {"type": "url", "url": aUrl, "requestId": item.id});
         this._runRequest(item);

package/graphapi/webclient/decode/index.js

@@ -47,6 +47,14 @@ let fullSetup = function() {
         currentDecoder.item.register(decodePrefix + name);
     }
 
+    {
+        let name = "url";
+        let currentDecoder = new Dbm.graphapi.webclient.decode.DecodeBaseObject();
+        currentDecoder.item.setValue("copyFields", ["url"]);
+        currentDecoder.item.setValue("encodingType", name);
+        currentDecoder.item.register(decodePrefix + name);
+    }
+
     {
         let name = "urlRequest";
         let currentDecoder = new Dbm.graphapi.webclient.decode.DecodeBaseObject();

package/graphapi/webclient/index.js

@@ -1,4 +1,7 @@
 export {default as WebSocketConnection} from "./WebSocketConnection.js";
 export {default as WebSocketRequest} from "./WebSocketRequest.js";
+export {default as GraphApi} from "./GraphApi.js";
+export {default as ApiConnection} from "./ApiConnection.js";
+export {default as ApiRequest} from "./ApiRequest.js";
 
 export * as decode from "./decode/index.js";

package/package.json

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

package/react/BaseObject.js

@@ -60,6 +60,15 @@ export default class BaseObject extends Component {
         return this._dynamicProps[aName];
     }
 
+    getDynamicPropWithoutState(aName, aInitialValue = null) {
+        if(!this._dynamicProps[aName]) {
+            let newProperty = new Dbm.flow.FlowProperty();
+            newProperty.value = aInitialValue;
+            this._dynamicProps[aName] = newProperty;
+        }
+        return this._dynamicProps[aName];
+    }
+
     get item() {
         if(!this._item) {
             this._item = new Dbm.repository.Item();

package/react/admin/CreatePage.js

@@ -0,0 +1,119 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class CreatePage extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        this.item.requireProperty("title", "");
+        this.item.requireProperty("url", "");
+        this.item.requireProperty("freeUrl", "");
+        this.item.requireProperty("updateSlugFromTitle", true);
+
+        this._titleFieldId = "dbmField" + Dbm.getInstance().getNextId();
+        this._urlFieldId = "dbmField" + Dbm.getInstance().getNextId();
+
+        Dbm.flow.addUpdateCommand(this.item.properties.title, Dbm.commands.callFunction(this._titleChanged.bind(this)));
+        Dbm.flow.addUpdateCommand(this.item.properties.url, Dbm.commands.callFunction(this._urlChanged.bind(this)));
+    }
+
+    _titleChanged() {
+        console.log("_titleChanged");
+        console.log(this.item.updateSlugFromTitle);
+
+        if(this.item.updateSlugFromTitle) {
+            this.item.url = Dbm.utils.StringFunctions.createNiceFilePath(this.item.title);
+        }
+        
+    }
+
+    _urlChanged() {
+        console.log("_urlChanged");
+
+        let currentUrl = this.item.url;
+
+        if(currentUrl !== "") {
+            let request = Dbm.getInstance().repository.getItem("graphApi").controller.requestData("admin/freeUrl", {"url": "/" + currentUrl});
+
+            Dbm.flow.addUpdateCommand(request.properties.status, Dbm.commands.callFunction(this._freeUrlStatusChanged.bind(this), [currentUrl, request]));
+        }
+        else {
+            currentUrl = Dbm.utils.StringFunctions.createNiceFilePath(this.item.title);
+            let request = Dbm.getInstance().repository.getItem("graphApi").controller.requestData("admin/freeUrl", {"url": "/" + currentUrl});
+
+            Dbm.flow.addUpdateCommand(request.properties.status, Dbm.commands.callFunction(this._freeUrlStatusChanged.bind(this), [currentUrl, request]));
+
+            this.item.updateSlugFromTitle = true;
+        }
+    }
+
+    _freeUrlStatusChanged(aUrl, aRequest) {
+        console.log("_freeUrlStatusChanged");
+        if(aRequest.status === 1) {
+            let currentUrl = this.item.url;
+            if(!currentUrl) {
+                currentUrl = Dbm.utils.StringFunctions.createNiceFilePath(this.item.title);
+                this.item.url = currentUrl;
+            }
+            if(currentUrl === aUrl) {
+                this.item.freeUrl = aRequest.data.url;
+            }
+        }
+    }
+
+    _callback_urlUpdatedManually(aEvent) {
+        this.item.updateSlugFromTitle = false;
+    }
+
+    _create() {
+        console.log("_create");
+
+        let fullUrl = this.item.freeUrl + "/";
+
+        let changes = [
+            {"type": "setField", "data": {"value": this.item.title, "field": "title"}},
+            {"type": "setUrl", "data": {"value": fullUrl}}
+        ]
+
+        let request = Dbm.getInstance().repository.getItem("graphApi").controller.createItem(["page"], "public", changes);
+
+        Dbm.flow.addUpdateCommand(request.properties.status, Dbm.commands.callFunction(this._pageCreated.bind(this), [fullUrl]));
+    }
+
+    _pageCreated(aUrl) {
+        Dbm.getInstance().repository.getItem("siteNavigation").controller.navigate(aUrl);
+    }
+
+    _renderMainElement() {
+
+        let domain = document.location.protocol + "//" + document.location.host;
+
+        return React.createElement("div", {},
+            React.createElement("div", {},
+                React.createElement("label", {className: "standard-field-label"},
+                    "Page title"
+                ),
+                React.createElement(Dbm.react.form.FormField, {"value": this.item.properties.title, "id": this._titleFieldId, className: "standard-field standard-field-padding full-width"}),
+            ),
+            React.createElement("div", {className: "spacing standard"}),
+            React.createElement("div", {},
+                React.createElement("label", {className: "standard-field-label"},
+                    "Url"
+                ),
+                React.createElement(Dbm.react.form.FormField, {"value": this.item.properties.url, "id": this._urlFieldId, onFocus: this._callback_urlUpdatedManually.bind(this), className: "standard-field standard-field-padding full-width"}),
+            ),
+            React.createElement("div", {className: "spacing micro"}),
+            React.createElement("div", {"className": "small-description"},
+                Dbm.react.text.text(domain),
+                Dbm.react.text.text(this.item.properties.freeUrl),
+            ),
+            React.createElement("div", {className: "spacing standard"}),
+            React.createElement("div", {className: "flex-row justify-center"},
+                React.createElement("div", {"className": "standard-button standard-button-padding", "onClick": () => {this._create()}},
+                    "Create"
+                )
+            )
+        );
+    }
+}
+

package/react/admin/EditPage.js

@@ -0,0 +1,78 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class EditPage extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        let page = this.context.page;
+
+        this.item.setValue("title", page.title);
+        this.item.setValue("content", page.content);
+        this.item.setValue("description", page["meta/description"]);
+        this.item.setValue("url", page.url);
+
+        //METODO: add editors
+    }
+
+    _save() {
+        console.log("_save");
+
+        let page = this.context.page;
+        let id = page.id;
+        let graphApi = Dbm.getInstance().repository.getItem("graphApi").controller;
+
+        graphApi.editItem(id, [
+            {"type": "setField", "data": {"value": this.item.content, "field": "content"}},
+            {"type": "setField", "data": {"value": this.item.title, "field": "title"}},
+            {"type": "setField", "data": {"value": this.item.description, "field": "meta/description"}},
+            {"type": "setUrl", "data": {"value": this.item.url}}
+        ], ["content", "title", "url", "meta/description"]);
+    }
+
+    _renderMainElement() {
+
+        return React.createElement("div", {},
+            React.createElement("div", {"className": "dbm-admin-box dbm-admin-box-padding"},
+                React.createElement("div", {},
+                    React.createElement("label", {className: "standard-field-label"},
+                        "Page title"
+                    ),
+                    React.createElement(Dbm.react.form.FormField, {"value": this.item.properties.title, className: "standard-field standard-field-padding full-width page-title-form-field", placeholder: "Title"}),
+                ),
+                React.createElement("div", {className: "spacing standard"}),
+                React.createElement("div", {},
+                    React.createElement("label", {className: "standard-field-label"},
+                        "Url"
+                    ),
+                    React.createElement(Dbm.react.form.FormField, {"value": this.item.properties.url, className: "standard-field standard-field-padding full-width", placeholder: "Url"}),
+                ),
+            ),
+            React.createElement("div", {className: "spacing standard"}),
+            React.createElement("div", {"className": "dbm-admin-box dbm-admin-box-padding"},
+                React.createElement("label", {className: "standard-field-label"},
+                    "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 standard"}),
+            React.createElement("div", {"className": "dbm-admin-box dbm-admin-box-padding"},
+                React.createElement("label", {className: "standard-field-label"},
+                    "Content"
+                ),
+                React.createElement("div", {},
+                    React.createElement(Dbm.react.admin.Editor, {"value": this.item.properties.content}),
+                )
+            ),
+            React.createElement("div", {className: "spacing standard"}),
+            React.createElement("div", {className: "flex-row justify-center"},
+                React.createElement("div", {className: "flex-row-item"},
+                    React.createElement("div", {"className": "standard-button standard-button-padding", "onClick": () => {this._save()}},
+                        "Save"
+                    )
+                )
+            )
+        );
+    }
+}
+

package/react/admin/Editor.js

@@ -7,21 +7,32 @@ export default class Editor extends Dbm.react.BaseObject {
     _construct() {
         super._construct();
 
-        Dbm.loading.loadScript("https://cdn.jsdelivr.net/npm/@editorjs/image@latest");
-        Dbm.loading.loadScript("https://cdn.jsdelivr.net/npm/@editorjs/header@latest");
-        Dbm.loading.loadScript("https://cdn.jsdelivr.net/npm/@editorjs/image@latest");
+        let all = Dbm.flow.updatefunctions.logic.allAtValue(1);
+
+        all.addCheck(Dbm.loading.loadScript("https://cdn.jsdelivr.net/npm/@editorjs/image@latest").item.properties.status);
+        all.addCheck(Dbm.loading.loadScript("https://cdn.jsdelivr.net/npm/@editorjs/header@latest").item.properties.status);
+        all.addCheck(Dbm.loading.loadScript("https://cdn.jsdelivr.net/npm/@editorjs/image@latest").item.properties.status);
+        all.addCheck(Dbm.loading.loadScript("https://cdn.jsdelivr.net/npm/@editorjs/list@latest").item.properties.status);
+        all.addCheck(Dbm.loading.loadScript("https://cdn.jsdelivr.net/npm/@editorjs/raw@latest").item.properties.status);
+        
+        
         //METODO: select which tools should be used
 
-        let scriptLoader = Dbm.loading.loadScript("https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest");
+        all.addCheck(Dbm.loading.loadScript("https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest").item.properties.status);
 
         this.item.setValue("element", document.createElement("div"));
 
         let updateFunction = new Dbm.flow.updatefunctions.basic.RunCommand();
         
-        updateFunction.input.command = Dbm.commands.callFunction(this._scriptStatus.bind(this), [scriptLoader]);
+        updateFunction.input.command = Dbm.commands.callFunction(this._scriptStatus.bind(this), [all]);
 
         updateFunction.output.properties.value.startUpdating();
-        updateFunction.input.properties.value.connectInput(scriptLoader.item.properties.status);
+        updateFunction.input.properties.value.connectInput(all.output.properties.value);
+
+        this.getDynamicPropWithoutState("value", {});
+
+        this._callback_saveDataUpdatedBound = this._callback_saveDataUpdated.bind(this);
+        this._callback_editorChangeBound = this._callback_editorChange.bind(this);
     }
 
     uploadImage(aFile) {
@@ -58,16 +69,27 @@ export default class Editor extends Dbm.react.BaseObject {
         }
     }
 
+    _callback_saveDataUpdated(aData) {
+        console.log("_callback_saveDataUpdated");
+        console.log(aData);
+
+        this.getDynamicProp("value").getMostUpstreamProperty().setValue(aData);
+    }
+
+    _callback_editorChange(aApi, aEvent) {
+        this.item.editor.save().then(this._callback_saveDataUpdatedBound);
+    }
+
     _scriptStatus(aLoader) {
         //console.log("_scriptStatus");
         //console.log(aLoader);
 
-        if(aLoader.item.status === 1) {
+        if(aLoader.output.value) {
 
             let element = this.item.element;
             element.classList.add("full-size");
 
-            let content = Dbm.getInstance().repository.getItem("siteDataLoader").currentPage.page.content;
+            let content = this.getDynamicProp("value").value;
 
             let tools = {
                 image: window.ImageTool,
@@ -84,26 +106,36 @@ export default class Editor extends Dbm.react.BaseObject {
                             }
                         }
                     }
-                }
+                },
+                list: {
+                    class: window.EditorjsList,
+                    inlineToolbar: true,
+                    config: {
+                      defaultStyle: 'unordered'
+                    },
+                },
+                raw: window.RawTool
             };
 
 
             let editorConfigItem = Dbm.getInstance().repository.getItem("editorjs");
             let toolsFromConfig = editorConfigItem.tools;
 
-            tools = {...tools, ...toolsFromConfig}
+            tools = {...tools, ...toolsFromConfig};
 		
 		    const editor = new window.EditorJS({ 
                 minHeight: 0,
                 holder: element,
                 tools: tools,
-                data: content
+                data: content,
+                onChange: this._callback_editorChangeBound
             });
 
             this.item.setValue("editor", editor);
         }
     }
 
+    /*
     _save() {
         this.item.editor.save().then((aOutputData) => {
             console.log('Article data: ', aOutputData);
@@ -119,6 +151,7 @@ export default class Editor extends Dbm.react.BaseObject {
             console.log('Saving failed: ', error)
           });
     }
+    */
 
     componentDidMount() {
         //console.log("componentDidMount");
@@ -135,19 +168,8 @@ export default class Editor extends Dbm.react.BaseObject {
     _renderMainElement() {
 
         return React.createElement("div", {style: {"position": "relative", "zIndex": 0}},
-            React.createElement("div", {"ref": this.createRef("holder")}),
-            React.createElement("div", {"className": "standard-button standard-button-padding", "onClick": () => {this._save()}},
-                "Save"
-            )
+            React.createElement("div", {"ref": this.createRef("holder")})
         );
-        /*
-        return <div>
-            <div ref={this.createRef("holder")} />
-            <div className="standard-button standard-button-padding" onClick={() => {this._save()}}>
-                Save
-            </div>
-        </div>;
-        */
     }
 }
 

package/react/admin/index.js

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

package/react/blocks/index.js

@@ -10,6 +10,7 @@ let createToolConfiguration = function(aId, aName, aInitialData = {}, aIcon = nu
             "name": aName,
         },
         "data": aInitialData,
+        "inlineToolbar": true,
         "toolbox": {
             title: aName,
             icon: aIcon
@@ -57,5 +58,32 @@ export let registerAllBlocks = function() {
         tools[moduleName] = createToolConfiguration(moduleName, "Login form");
     }
 
+    {
+        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");
+    }
+
     editorConfigItem.setValue("tools", tools);
 }

package/react/form/FormField.js

@@ -5,6 +5,7 @@ export default class FormField extends Dbm.react.BaseObject {
         super._construct();
 
         this.getDynamicProp("value", "");
+        this.state["formUpdate"] = 0;
 
         this._callback_changeBound = this._callback_change.bind(this);
     }
@@ -16,6 +17,7 @@ export default class FormField extends Dbm.react.BaseObject {
         let value = aEvent.target.value;
 
         this.getDynamicProp("value").getMostUpstreamProperty().setValue(value);
+        this.setState({"formUpdate": this.state.formUpdate}); //MENOTE: trigger change direct to not lose focus on input
     }
 
     _renderMainElement() {

package/react/login/LoginForm.js

@@ -90,18 +90,18 @@ export default class LoginForm extends Dbm.react.BaseObject {
         return this._createMainElement("div", {}, 
             React.createElement("div", {className: "body-text"},
                 React.createElement("div", {"className": ""},
-                    React.createElement("label", {className: ""},
+                    React.createElement("label", {className: "standard-field-label"},
                         "Email"
                     )
                 ),
-                React.createElement(Dbm.react.form.FormField, {value: this.item.properties.username}),
+                React.createElement(Dbm.react.form.FormField, {value: this.item.properties.username, className: "standard-field standard-field-padding full-width"}),
                 React.createElement("div", {"className": "spacing standard"}),
                 React.createElement("div", {"className": ""},
-                    React.createElement("label", {className: ""},
+                    React.createElement("label", {className: "standard-field-label"},
                         "Password"
                     )
                 ),
-                React.createElement(Dbm.react.form.FormField, {type: "password", value: this.item.properties.password})
+                React.createElement(Dbm.react.form.FormField, {type: "password", value: this.item.properties.password, className: "standard-field standard-field-padding full-width"})
             ),
             React.createElement("div", {"className": "spacing standard"}),
             React.createElement("div", {"className": "flex-row justify-center"}, 

package/startup/index.js

@@ -3,13 +3,13 @@ import Dbm from "../index.js";
 export {default as Runner} from "./Runner.js";
 export {default as Controller} from "./Controller.js";
 
-export let runStartup = function() {
-    if(!window.dbmstartup.modules.isSetup) {
+export let runStartup = function(aGlobalScope = "dbmstartup", aModulesName = "modules") {
+    if(!window[aGlobalScope][aModulesName].isSetup) {
         let controller = new Dbm.startup.Controller();
 
-        let currentArray = globalThis.dbmstartup.modules._;
+        let currentArray = globalThis[aGlobalScope][aModulesName]._;
 
-        globalThis.dbmstartup.modules = controller;
+        globalThis[aGlobalScope][aModulesName] = controller;
 
         let currentArrayLength = currentArray.length;
         for(let i = 0; i < currentArrayLength; i++) {

package/utils/ArrayFunctions.js

@@ -1,20 +1,9 @@
+export let range = function(aStartValue, aEndValue, aStep = 1) {
+    let returnArray = [];
 
-    let range = function(aStartValue, aEndValue, aStep = 1) {
-        let returnArray = [];
-    
-        return returnArray;
-    }
+    return returnArray;
+}
 
-    export {range};
-
-    let removeDuplicates = function(aArray) {
-        return aArray;
-    }
-
-    export {removeDuplicates};
-
-    let removeDuplicates2 = function(aArray) {
-        return aArray;
-    }
-
-    export {removeDuplicates2};
+export let removeDuplicates = function(aArray) {
+    return aArray;
+}

package/utils/NumberFunctions.js

@@ -0,0 +1,8 @@
+export let floatMod = function(aValue, aDivisor) {
+    
+    let times = Math.floor(aValue/aDivisor);
+
+    let returnValue = aValue-(times*aDivisor);
+
+    return returnValue;
+}

package/utils/StringFunctions.js

@@ -0,0 +1,25 @@
+export let createNiceFileName = function(aFileName) {
+    let fileName = aFileName.toLowerCase();
+
+    fileName = fileName.replace(/[åäã]/gi, 'a');
+    fileName = fileName.replace(/[ö]/gi, 'o');
+    fileName = fileName.replace(/ /gi, '-');
+    fileName = fileName.replace(/[\(\),\*']/gi, '');
+    fileName = fileName.replace(/[^a-z0-9\-_\.]/gi, '-');
+    fileName = fileName.replace(/\-+/gi, '-');
+
+    return fileName;
+}
+
+export let createNiceFilePath = function(aFileName) {
+    let fileName = aFileName.toLowerCase();
+
+    fileName = fileName.replace(/[åäã]/gi, 'a');
+    fileName = fileName.replace(/[ö]/gi, 'o');
+    fileName = fileName.replace(/ /gi, '-');
+    fileName = fileName.replace(/[\(\),\*']/gi, '');
+    fileName = fileName.replace(/[^a-z0-9\-_\.\/]/gi, '-');
+    fileName = fileName.replace(/\-+/gi, '-');
+
+    return fileName;
+}

package/utils/index.js

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