dbm 1.0.0

package/graphapi/webclient/decode/DecodeBaseObject.js

@@ -0,0 +1,48 @@
+import Dbm from "../../../index.js";
+
+export default class DecodeBaseObject extends Dbm.core.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    updateItemWithEncoding(aItem, aData) {
+        this.updateItem(aItem, aData);
+        aItem.setValue("has/encoding/" +  this.item.encodingType, true);
+    }
+
+    updateItem(aItem, aData) {
+        if(this.item.copyFields) {
+            let currentArray = this.item.copyFields;
+            let currentArrayLength = currentArray.length;
+            for(let i = 0; i < currentArrayLength; i++) {
+                let currentField = currentArray[i];
+                aItem.setValue(currentField, aData[currentField]);
+            }
+        }
+
+        if(this.item.copyLink) {
+            let currentArray = this.item.copyLink;
+            let currentArrayLength = currentArray.length;
+            for(let i = 0; i < currentArrayLength; i++) {
+                let currentField = currentArray[i];
+                let currentId = aData[currentField];
+                if(currentId) {
+                    aItem.setValue(currentField, Dbm.getInstance().repository.getItem(currentId));
+                }
+                else {
+                    aItem.setValue(currentField, null);
+                }
+            }
+        }
+
+        if(this.item.copyLinks) {
+            let currentArray = this.item.copyLinks;
+            let currentArrayLength = currentArray.length;
+            for(let i = 0; i < currentArrayLength; i++) {
+                let currentField = currentArray[i];
+                let currentIds = aData[currentField];
+                aItem.setValue(currentField, Dbm.getInstance().repository.getItems(currentIds));
+            }
+        }
+    }
+}

package/graphapi/webclient/decode/index.js

@@ -0,0 +1,59 @@
+import Dbm from "../../../index.js";
+
+export {default as DecodeBaseObject} from "./DecodeBaseObject.js";
+
+let fullSetup = function() {
+    let decodePrefix = "graphApi/decode/";
+
+    if(process.env.NODE_ENV === "development") {
+        {
+            let name = "example";
+            let currentDecoder = new Dbm.graphapi.webclient.decode.DecodeBaseObject();
+            currentDecoder.item.setValue("copyFields", ["identifier"]);
+            currentDecoder.item.setValue("encodingType", name);
+            currentDecoder.item.register(decodePrefix + name);
+        }
+    }
+
+    {
+        let name = "identifier";
+        let currentDecoder = new Dbm.graphapi.webclient.decode.DecodeBaseObject();
+        currentDecoder.item.setValue("copyFields", ["identifier"]);
+        currentDecoder.item.setValue("encodingType", name);
+        currentDecoder.item.register(decodePrefix + name);
+    }
+
+    {
+        let name = "name";
+        let currentDecoder = new Dbm.graphapi.webclient.decode.DecodeBaseObject();
+        currentDecoder.item.setValue("copyFields", ["name"]);
+        currentDecoder.item.setValue("encodingType", name);
+        currentDecoder.item.register(decodePrefix + name);
+    }
+
+    {
+        let name = "content";
+        let currentDecoder = new Dbm.graphapi.webclient.decode.DecodeBaseObject();
+        currentDecoder.item.setValue("copyFields", ["content"]);
+        currentDecoder.item.setValue("encodingType", name);
+        currentDecoder.item.register(decodePrefix + name);
+    }
+
+    {
+        let name = "title";
+        let currentDecoder = new Dbm.graphapi.webclient.decode.DecodeBaseObject();
+        currentDecoder.item.setValue("copyFields", ["title"]);
+        currentDecoder.item.setValue("encodingType", name);
+        currentDecoder.item.register(decodePrefix + name);
+    }
+
+    {
+        let name = "urlRequest";
+        let currentDecoder = new Dbm.graphapi.webclient.decode.DecodeBaseObject();
+        currentDecoder.item.setValue("copyFields", ["meta/description"]);
+        currentDecoder.item.setValue("encodingType", name);
+        currentDecoder.item.register(decodePrefix + name);
+    }
+}
+
+export {fullSetup};

package/graphapi/webclient/index.js

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

package/index.js

@@ -0,0 +1 @@
+export * as default from "./dbm.js";

package/loading/JsonLoader.js

@@ -0,0 +1,128 @@
+import Dbm from "../index.js";
+
+export default class JsonLoader extends Dbm.core.BaseObject {
+
+	_construct() {
+		
+		super._construct();
+		
+		this.item.setValue("url", null);
+		this.item.setValue("method", "GET");
+		this.item.setValue("mode", null);
+		this.item.setValue("credentials", "same-origin");
+		this.item.setValue("headers", {});
+		
+		this.item.setValue("status", Dbm.loading.LoadingStatus.NOT_STARTED);
+        this.item.setValue("data", null);
+        this.item.setValue("body", null);
+	}
+	
+	get completed() {
+		let status = this.item.status;
+		return (status === Dbm.loading.LoadingStatus.LOADED || status === Dbm.loading.LoadingStatus.ERROR);
+	}
+	
+	setMethod(aMethod) {
+		this.item.method = aMethod;
+		
+		return this;
+	}
+	
+	setUrl(aUrl) {
+		this.item.url = aUrl;
+		
+		return this;
+	}
+	
+	setupPost(aUrl, aBody) {
+		this.item.url = aUrl;
+		this.item.method = "POST";
+		this.setBody(aBody);
+		
+		return this;
+	}
+	
+	setupJsonPost(aUrl, aBody) {
+		this.item.url = aUrl;
+		
+		return this.setJsonPostBody(aBody);
+	}
+	
+	setJsonPostBody(aBody) {
+		this.item.method = "POST";
+		this.item.body = JSON.stringify(aBody);
+		
+		this.addHeader("Content-Type", "application/json");
+		
+		return this;
+	}
+	
+	addHeader(aName, aValue) {
+		this.item.headers[aName] = aValue;
+		
+		return this;
+	}
+	
+	setBody(aBody) {
+		this.item.body = (aBody instanceof String || aBody instanceof FormData) ? aBody : JSON.stringify(aBody);
+		
+		return this;
+	}
+	
+	setData(aData) {
+		//console.log("wprr/utils/loading/JsonLoader::setData");
+		//console.log(aData);
+		
+		this._loadedAt = (new Date()).valueOf();
+		this.item.data = aData;
+	}
+	
+	setStatus(aStatus) {
+		//console.log("wprr/utils/loading/JsonLoader::setStatus");
+		//console.log(aStatus);
+		
+		this.item.status = aStatus;
+		
+		return this;
+	}
+	
+	load() {
+		
+		if(this.item.status !== Dbm.loading.LoadingStatus.NOT_STARTED) {
+			return this;
+		}
+		
+        this.item.status = Dbm.loading.LoadingStatus.LOADING;
+		let sendParameters =  {"credentials": this.item.credentials, "method": this.item.method, headers: this.item.headers};
+		if(this.item.mode) {
+			sendParameters["mode"] = this.item.mode;
+		}
+		if(this.item.method !== "GET" && this.item.method !== "HEAD" && this.item.body) {
+			sendParameters["body"] = this.item.body;
+		}
+		
+		fetch(this.item.url, sendParameters)
+		.then( (response) => {
+			if(response.ok) {
+				return response.json();
+			}
+			else {
+				return response.text().then(function(aText) {
+					throw(new Error("Server response: " + response.status + " " + response.statusText + " (" + response.type + "): " + aText));
+				})
+			}
+		})
+		.then( (data) => {
+			this.setData(data);
+			this.setStatus(Dbm.loading.LoadingStatus.LOADED);
+		})
+		.catch( (error) => {
+			console.error("Error submitting");
+			console.log(error);
+			
+			this.setStatus(Dbm.loading.LoadingStatus.ERROR);
+		});
+		
+		return this;
+	}
+}

package/loading/LoadingStatus.js

@@ -0,0 +1,4 @@
+export const NOT_STARTED = 0;
+export const LOADED = 1;
+export const LOADING = 2;
+export const ERROR = -1;

package/loading/ScriptLoader.js

@@ -0,0 +1,40 @@
+import Dbm from "../index.js";
+
+export default class ScriptLoader extends Dbm.core.BaseObject {
+    constructor() {
+        super();
+
+        this._url = null;
+        this._script = null;
+
+        this.item.setValue("status", Dbm.loading.LoadingStatus.NOT_STARTED);
+
+        this._callback_scriptLoadedBound = this._callback_scriptLoaded.bind(this);
+    }
+
+    setUrl(aUrl) {
+        this._url = aUrl;
+        return this;
+    }
+
+    load() {
+
+        if(!this._script) {
+            this.item.setValue("status", Dbm.loading.LoadingStatus.LOADING);
+
+            let scriptElement = document.createElement("script");
+            this._script = scriptElement;
+            scriptElement.addEventListener("load", this._callback_scriptLoadedBound, false);
+            
+            scriptElement.async = true;
+            scriptElement.src = this._url;
+            document.head.appendChild(scriptElement);
+        }
+        
+        return this;
+    }
+
+    _callback_scriptLoaded(aEvent) {
+        this.item.setValue("status", Dbm.loading.LoadingStatus.LOADED);
+    }
+}

package/loading/index.js

@@ -0,0 +1,24 @@
+import Dbm from "../index.js";
+export {default as ScriptLoader} from "./ScriptLoader.js";
+export {default as JsonLoader} from "./JsonLoader.js";
+export * as LoadingStatus from "./LoadingStatus.js";
+
+export let loadScript = function(aUrl) {
+
+    let loaderName = "loader-" + aUrl;
+    let loaderItem = Dbm.getInstance().repository.getItemIfExists(loaderName);
+    
+    let loader;
+    if(!loaderItem) {
+        loader = new Dbm.loading.ScriptLoader();
+        loader.item.register(loaderName);
+        loader.setUrl(aUrl);
+    }
+    else {
+        loader = loaderItem.controller;
+    }
+
+    loader.load();
+
+    return loader;
+}

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "dbm",
+  "version": "1.0.0",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {},
+  "keywords": [],
+  "author": "",
+  "license": "",
+  "description": "",
+  "dependencies": {
+    "@tweenjs/tween.js": "^25.0.0",
+    "js-cookie": "^3.0.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  }
+}

package/react/BaseObject.js

@@ -0,0 +1,179 @@
+import Dbm from "../index.js";
+import {Component, createElement} from "react";
+import Context from "./context/Context.js";
+
+export default class BaseObject extends Component {
+    constructor(aProps, aContext) {
+        super(aProps, aContext);
+        this.state = {"dynamicUpdate": 0};
+        this._dynamicProps = {}
+        this._construct();
+
+        this._prepareProps();
+    }
+
+    _construct() {
+
+    }
+
+    _prepareProps() {
+        //console.log("_prepareProps");
+        let props = this.props;
+        for(let objectName in props) {
+            let currentProp = props[objectName];
+
+            if(currentProp && currentProp.isSource) {
+                currentProp = currentProp.getSource(this);
+                let currentDynamicProperty = this.getDynamicProp(objectName);
+                currentDynamicProperty.setValue(currentProp);
+            }
+            
+            if(currentProp && currentProp.isFlowProperty) {
+                let currentDynamicProperty = this.getDynamicProp(objectName);
+                currentDynamicProperty.connectInput(currentProp);
+            }
+        }
+
+        //METODO: remove unused connections
+    }
+
+    _getStateUpdate() {
+        let updateState = this.item.updateState;
+        if(!updateState) {
+            updateState = new Dbm.flow.updatefunctions.react.UpdateState();
+            this.item.setValue("updateState", updateState);
+            updateState.input.owner = this;
+            updateState.output.properties.dynamicUpdate.startUpdating();
+        }
+        return updateState;
+    }
+
+    getDynamicProp(aName, aInitialValue = null) {
+        if(!this._dynamicProps[aName]) {
+            let newProperty = new Dbm.flow.FlowProperty();
+            newProperty.value = aInitialValue;
+            this._dynamicProps[aName] = newProperty;
+            let updateState = this._getStateUpdate();
+            let stateProperty = updateState.input.register(aName, aInitialValue);
+            stateProperty.connectInput(newProperty);
+        }
+        return this._dynamicProps[aName];
+    }
+
+    get item() {
+        if(!this._item) {
+            this._item = new Dbm.repository.Item();
+            this._item.setValue("controller", this);
+        }
+        return this._item;
+    }
+
+    getProp(aName) {
+        if(this._dynamicProps[aName]) {
+            return this._dynamicProps[aName];
+        }
+
+        return this.props[aName];
+    }
+
+    getPropValue(aName) {
+        let currentProp = this.getProp(aName);
+
+        if(currentProp && currentProp.isFlowProperty) {
+            return currentProp.value;
+        }
+
+        return currentProp;
+    }
+
+    createRef(aName) {
+        let refToProperty = this.item["ref/" + aName];
+
+        if(!refToProperty) {
+            this.item.setValue(aName, null);
+            let property = this.item.properties[aName];
+            refToProperty = new Dbm.react.RefToProperty();
+            refToProperty.property = property;
+            this.item.setValue("ref/" + aName, refToProperty);
+        }
+        
+        return refToProperty;
+    }
+
+    render() {
+        return this._renderMainElement();
+    }
+
+    _renderMainElement() {
+        return this._createMainElement("div", {}, this.props.children);
+    }
+
+    _mainElement(aReactElement) {
+        let returnObject = this._performCreateMainElement(aReactElement.type, aReactElement.props, aReactElement.props.children);
+        return returnObject;
+    }
+
+    _createMainElement(aType, aProps, ...children) {
+        return this._performCreateMainElement(aType, aProps, children);
+    }
+
+    _performCreateMainElement(aType, aProps, children) {
+
+        let newProps = {...aProps};
+
+        let elementType = this.getProp("elementType");
+        if(elementType) {
+            aType = elementType;
+        }
+
+        for(let objectName in this.props) {
+            let currentValue = this.getPropValue(objectName);
+            switch(objectName) {
+                case "className":
+                    {
+                        if(newProps[objectName]) {
+                            newProps[objectName] += " " + currentValue;
+                        }
+                        else {
+                            newProps[objectName] = currentValue;
+                        }
+                    }
+                    break;
+                case "style":
+                    {
+                        
+                        let newStyleObject = {...newProps[objectName]};
+                        for(let styleProperty in currentValue) {
+                            if(!newStyleObject[styleProperty]) {
+                                newStyleObject[styleProperty] = currentValue[styleProperty];
+                            }
+                        }
+                        
+                        newProps[objectName] = newStyleObject;
+                    }
+                    break;
+                case "ref":
+                case "children":
+                case "elementType":
+                case "key":
+                    //MENOTE: do nothing
+                    break;
+                default:
+                    if(!newProps[objectName]) {
+                        newProps[objectName] = currentValue;
+                    }
+                    break;
+            }
+        }
+
+        if(!children.length) {
+            return createElement(aType, newProps);
+        }
+
+        let callArray = [aType, newProps].concat(children);
+
+        return createElement.apply(null, callArray);
+    }
+}
+
+BaseObject.contextType = Context;

package/react/RefToProperty.js

@@ -0,0 +1,20 @@
+export default class RefToProperty {
+    constructor() {
+        this.property = null;
+    }
+
+    get current() {
+        return this.property.value;
+    }
+
+    set current(aValue) {
+        this.property.value = aValue;
+    }
+
+    hasOwnProperty(aKey) {
+        if(aKey === "current") {
+            return true;
+        }
+        return super.hasOwnProperty(aKey);
+    }
+}

package/react/admin/Editor.js

@@ -0,0 +1,153 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+import EditorBlock from "./EditorBlock.js";
+
+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");
+        //METODO: select which tools should be used
+
+        let scriptLoader = Dbm.loading.loadScript("https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest");
+
+        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.output.properties.value.startUpdating();
+        updateFunction.input.properties.value.connectInput(scriptLoader.item.properties.status);
+    }
+
+    uploadImage(aFile) {
+        return new Promise((resolve, reject) => {
+            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, resolve]));
+        });
+    }
+
+    _statusChanged(aPreSign, aFile, resolve) {
+        console.log("_statusChanged");
+        console.log(aPreSign, aFile);
+
+        if(aPreSign.status === 1) {
+            let url = aPreSign.data.url;
+            console.log(url);
+
+            const myHeaders = new Headers({
+                'Content-Type': aFile.type,
+                'x-amz-acl': 'public-read'
+            });
+            fetch(url, {
+                method: 'PUT',
+                headers: myHeaders,
+                body: aFile
+             }).then(() => {
+                resolve({success: true, file: {url: aPreSign.data.publicUrl}});
+             })
+
+            
+        }
+    }
+
+    _scriptStatus(aLoader) {
+        //console.log("_scriptStatus");
+        //console.log(aLoader);
+
+        if(aLoader.item.status === 1) {
+
+            let element = this.item.element;
+            element.classList.add("full-size");
+
+            let content = Dbm.getInstance().repository.getItem("siteDataLoader").currentPage.page.content;
+
+            let tools = {
+                image: window.ImageTool,
+                heading: window.Header,
+                image: {
+                    "class": window.ImageTool,
+                    config: {
+                        uploader: {
+                            uploadByFile: (aFile) => {
+                                return this.uploadImage(aFile);
+                            },
+                            uploadByUrl: function(aUrl) {
+                                console.log(aUrl);
+                            }
+                        }
+                    }
+                }
+            };
+
+
+            let editorConfigItem = Dbm.getInstance().repository.getItem("editorjs");
+            let toolsFromConfig = editorConfigItem.tools;
+
+            tools = {...tools, ...toolsFromConfig}
+		
+		    const editor = new window.EditorJS({ 
+                minHeight: 0,
+                holder: element,
+                tools: tools,
+                data: content
+            });
+
+            this.item.setValue("editor", editor);
+        }
+    }
+
+    _save() {
+        this.item.editor.save().then((aOutputData) => {
+            console.log('Article data: ', aOutputData);
+            
+            let id = Dbm.getInstance().repository.getItem("siteDataLoader").currentPage.page.id;
+            let graphApi = Dbm.getInstance().repository.getItem("graphApi").controller;
+
+            console.log(graphApi, Dbm.getInstance().repository.getItem("siteDataLoader"));
+
+            graphApi.editItem(id, [{"type": "setField", "data": {"value": aOutputData, "field": "content"}}], ["content"]);
+
+          }).catch((error) => {
+            console.log('Saving failed: ', error)
+          });
+    }
+
+    componentDidMount() {
+        //console.log("componentDidMount");
+        let parentElement = this.item.holder;
+        parentElement.appendChild(this.item.element);
+    }
+
+    componentDidUpdate() {
+        //console.log("componentDidUpdate");
+        let parentElement = this.item.holder;
+        parentElement.appendChild(this.item.element);
+    }
+
+    _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"
+            )
+        );
+        /*
+        return <div>
+            <div ref={this.createRef("holder")} />
+            <div className="standard-button standard-button-padding" onClick={() => {this._save()}}>
+                Save
+            </div>
+        </div>;
+        */
+    }
+}
+