dbm 1.2.9 → 1.4.1

package/loading/index.js

@@ -1,11 +1,12 @@
 import Dbm from "../index.js";
 export {default as ScriptLoader} from "./ScriptLoader.js";
 export {default as JsonLoader} from "./JsonLoader.js";
+export {default as ImageLoader} from "./ImageLoader.js";
 export * as LoadingStatus from "./LoadingStatus.js";
 
 export * as node from "./node/index.js";
 
-export let loadScript = function(aUrl) {
+export const loadScript = function(aUrl) {
 
     let loaderName = "loader-" + aUrl;
     let loaderItem = Dbm.getInstance().repository.getItemIfExists(loaderName);
@@ -22,5 +23,30 @@ export let loadScript = function(aUrl) {
 
     loader.load();
 
+    return loader;
+}
+
+export const getImageLoader = function(aUrl) {
+    let loaderName = "imageLoader-" + aUrl;
+    let loaderItem = Dbm.getInstance().repository.getItemIfExists(loaderName);
+    
+    let loader;
+    if(!loaderItem) {
+        loader = new Dbm.loading.ImageLoader();
+        loader.item.register(loaderName);
+        loader.setUrl(aUrl);
+    }
+    else {
+        loader = loaderItem.controller;
+    }
+
+    return loader;
+}
+
+export const loadImage = function(aUrl) {
+    
+    let loader = getImageLoader(aUrl);
+    loader.load();
+
     return loader;
 }

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "dbm",
-  "version": "1.2.9",
+  "version": "1.4.1",
   "main": "index.js",
   "type": "module",
+  "exports": {
+    ".": "./index.js",
+    "./css/all.css": "./css/all.css"
+  },
   "scripts": {},
   "keywords": [],
   "author": "",
@@ -10,8 +14,10 @@
   "description": "",
   "dependencies": {
     "@tweenjs/tween.js": "^25.0.0",
-    "js-cookie": "^3.0.5",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "js-cookie": "^3.0.5"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
   }
 }

package/react/BaseObject.js

@@ -164,7 +164,10 @@ export default class BaseObject extends Component {
     _copyProps(aProps) {
         let newProps = {...aProps};
 
-        for(let objectName in this.props) {
+        let incomingProps = {...this.props};
+        this._removedUsedProps(incomingProps);
+
+        for(let objectName in incomingProps) {
             let currentValue = this.getPropValue(objectName);
             switch(objectName) {
                 case "className":
@@ -203,8 +206,7 @@ export default class BaseObject extends Component {
                     break;
             }
         }
-
-        this._removedUsedProps(newProps);
+        
         return newProps;
     }
 

package/react/admin/CreatePage.js

@@ -101,13 +101,13 @@ export default class CreatePage extends Dbm.react.BaseObject {
             {"type": "setUrl", "data": {"value": fullUrl}}
         ]
 
-        let request = Dbm.getInstance().repository.getItem("graphApi").controller.createItem(["page"], "public", changes);
+        let request = Dbm.getGraphApi().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);
+        Dbm.getRepositoryItem("siteNavigation").controller.navigate(aUrl);
     }
 
     _renderMainElement() {

package/react/admin/objects/itemeditors/FormattedField.js

@@ -0,0 +1,21 @@
+import React from "react";
+import Dbm from "../../../../index.js";
+
+export default class FormattedField extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _renderMainElement() {
+
+        let label = this.getPropValue("label");
+        let fieldName = this.getPropValue("fieldName");
+
+        return React.createElement("div", {},
+            React.createElement(Dbm.react.form.LabelledArea, {label: label}),
+            React.createElement(Dbm.react.admin.editorsgroup.EditField, {"fieldName": fieldName},
+                React.createElement(Dbm.react.thirdparty.tinymce.InlineEditor, {value: Dbm.react.source.contextVariable("valueEditor.editValue.value"), className: "standard-field standard-field-padding full-width"})
+            )
+        )
+    }
+}

package/react/admin/objects/itemeditors/FormattedFieldWithTranslations.js

@@ -0,0 +1,38 @@
+import React from "react";
+import Dbm from "../../../../index.js";
+
+export default class FormattedFieldWithTranslations extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _renderMainElement() {
+
+        let label = this.getPropValue("label");
+        let fieldName = this.getPropValue("fieldName");
+
+        let fieldNameSource = Dbm.react.source.contextVariable("fieldName");
+        let editorValueSource = Dbm.react.source.contextVariable("valueEditor.editValue.value");
+
+        return React.createElement("div", {},
+            React.createElement("label", {className: "standard-field-label"}, label),
+            React.createElement(Dbm.react.context.AddContextVariables, {values: {"fieldName": fieldName}},
+                React.createElement(Dbm.react.admin.editorsgroup.EditField, {"fieldName": fieldNameSource},
+                    React.createElement(Dbm.react.thirdparty.tinymce.InlineEditor, {value: editorValueSource, className: "standard-field standard-field-padding full-width"})
+                ),
+                React.createElement(Dbm.react.area.List, {items: Dbm.getRepositoryItem("site").properties.availableLanguages, as: "language"},
+                    React.createElement("div", {className: "flex-row small-item-spacing vertically-center-items"},
+                        React.createElement("div", {className: "flex-row-item flex-no-resize"},
+                            Dbm.react.text.text(Dbm.react.source.contextVariable("language.code"))
+                        ),
+                        React.createElement("div", {className: "flex-row-item flex-resize"},
+                            React.createElement(Dbm.react.admin.editorsgroup.EditFieldTranslation, {"fieldName": fieldNameSource, "language": Dbm.react.source.contextVariable("language.code")},
+                                React.createElement(Dbm.react.thirdparty.tinymce.InlineEditor, {value: editorValueSource, className: "standard-field standard-field-padding full-width"})
+                            ),
+                        )
+                    )
+                )
+            )
+        )
+    }
+}

package/react/admin/objects/itemeditors/MultipleRelations.js

@@ -0,0 +1,147 @@
+import React from "react";
+import Dbm from "../../../../index.js";
+
+export default class MultipleRelations extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        let objectType = this.getPropValue("objectType");
+        let encodings = this.getPropValueWithDefault("encodings", ["name"]);
+        let visibility = this.getPropValueWithDefault("visibility", "private");
+
+        this.item.requireProperty("items", []);
+        this.item.requireProperty("loaded", false);
+
+        {
+            let request = Dbm.getGraphApi().requestRange(
+                [
+                    {"type": "byObjectType", "objectType": objectType},
+                    {"type": "includeDraft"},
+                    {"type": "includePrivate"}
+                ],
+                encodings
+            );
+
+    
+           Dbm.flow.addUpdateCommandWhenMatched(request.properties.status, Dbm.loading.LoadingStatus.LOADED, Dbm.commands.callFunction(this._itemsLoaded.bind(this), [request]));
+        }
+
+        //console.log(this._getEditor());
+    }
+
+    _itemsLoaded(aRequest) {
+        console.log("_itemsLoaded");
+        console.log(aRequest);
+
+        let nameField = this.getPropValueWithDefault("nameField", "name");
+
+        let currentArray = [].concat(aRequest.items);
+        Dbm.utils.ArrayFunctions.sortOnField(currentArray, nameField);
+
+        this.item.items = currentArray;
+        this.item.loaded = true;
+    }
+
+    _getEditor() {
+        let itemEditor = this.context.itemEditor;
+
+        let direction = this.getPropValue("direction");
+        let relationType = this.getPropValue("relationType");
+        let objectType = this.getPropValue("objectType");
+
+        let editor = null;
+        if(direction === "in") {
+            editor = itemEditor.getAdminMultipleIncomingRelationsEditor(relationType, objectType);
+        }
+        else if(direction === "out") {
+            editor = itemEditor.getAdminMultipleOutgoingRelationsEditor(relationType, objectType);
+        }
+        else {
+            console.error("Unknown direction", direction, this);
+        }
+
+        return editor;
+    }
+
+    _add(aItem) {
+        console.log("_add");
+        console.log(aItem);
+
+        let editor = this._getEditor();
+
+        let newValues = [].concat(editor.value);
+        newValues.push(aItem.id);
+        editor.value = newValues;
+    }
+
+    _remove(aId) {
+        console.log("_remove");
+        console.log(aId);
+
+        let editor = this._getEditor();
+
+        let newValues = [].concat(editor.value);
+
+        let index = newValues.indexOf(aId);
+        if(index >= 0) {
+            newValues.splice(index, 1);
+        }
+
+        editor.value = newValues;
+    }
+
+    _renderMainElement() {
+
+        let label = this.getPropValue("label");
+        let direction = this.getPropValue("direction");
+        let relationType = this.getPropValue("relationType");
+        let objectType = this.getPropValue("objectType");
+
+        return React.createElement("div", {},
+            React.createElement(Dbm.react.form.LabelledArea, {label: label}), 
+            React.createElement(Dbm.react.area.HasData, {check: this.item.properties.loaded},
+                React.createElement("div", {},
+                    React.createElement("div", {"className": "standard-alternating-rows"},
+                        React.createElement(Dbm.react.admin.editorsgroup.EditMultipleRelations, {"direction": direction, "relationType": relationType, "objectType": objectType},
+                            React.createElement(Dbm.react.area.List, {items: Dbm.react.source.contextVariable("valueEditor.editValue.value")},
+                                React.createElement("div", {"className": "flex-row small-item-spacing justify-between"},
+                                    React.createElement("div", {"className": "flex-row"},
+                                        React.createElement(Dbm.react.context.AddItemByIdToContext, {id: Dbm.react.source.item()},
+                                            Dbm.react.text.text(Dbm.react.source.item("name"))
+                                        )
+                                    ),
+                                    React.createElement("div", {"className": "flex-row"},  
+                                        React.createElement(Dbm.react.interaction.CommandButton, {"commands": [Dbm.commands.callFunction(this._remove.bind(this), [Dbm.react.source.item()])]},
+                                            React.createElement(Dbm.react.image.Image, {"src": "/assets/img/icons/remove.svg", "className": "background-contain cursor-pointer action-icon-color field-icon"})
+                                        )
+                                    )
+                                )
+                            )
+                        )
+                    ),
+                    React.createElement("div", {"className": "spacing small"}),
+                    React.createElement("div", {"className": "flex-row"},
+                        React.createElement(Dbm.react.form.Dropdown, {"position": "right"},
+                            React.createElement("div", {"data-slot": "button", "className": "action-button action-button-padding"},
+                                "Add"
+                            ),
+                            React.createElement("div", {"className": "dropdown-menu-max-height standard-dropdown"},
+                                React.createElement(Dbm.react.area.List, {items: this.item.properties.items, "as": "relatedItem"},
+                                    React.createElement(Dbm.react.interaction.CommandButton, {"commands": [
+                                        Dbm.commands.callFunction(this._add.bind(this), [Dbm.react.source.contextVariable("relatedItem")]),
+                                        Dbm.commands.setProperty(Dbm.react.source.contextVariable("open"), false)
+                                    ]},
+                                        React.createElement("div", {className: "standard-dropdown-row standard-dropdown-row-padding hover-row cursor-pointer"},
+                                            Dbm.react.text.text(Dbm.react.source.contextVariable("relatedItem.name"))
+                                        )
+                                    ),
+                                )
+                            )
+                        )
+                    )
+                )
+            ),
+            
+        )
+    }
+}

package/react/admin/objects/itemeditors/RichTextField.js

@@ -0,0 +1,21 @@
+import React from "react";
+import Dbm from "../../../../index.js";
+
+export default class RichTextField extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _renderMainElement() {
+
+        let label = this.getPropValue("label");
+        let fieldName = this.getPropValue("fieldName");
+
+        return React.createElement("div", {},
+            React.createElement(Dbm.react.form.LabelledArea, {label: label}),
+            React.createElement(Dbm.react.admin.editorsgroup.EditField, {"fieldName": fieldName},
+                React.createElement(Dbm.react.thirdparty.tinymce.Editor, {value: Dbm.react.source.contextVariable("valueEditor.editValue.value"), className: "standard-field standard-field-padding full-width"})
+            )
+        )
+    }
+}

package/react/admin/objects/itemeditors/RichTextFieldWithTranslations.js

@@ -0,0 +1,38 @@
+import React from "react";
+import Dbm from "../../../../index.js";
+
+export default class RichTextFieldWithTranslations extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _renderMainElement() {
+
+        let label = this.getPropValue("label");
+        let fieldName = this.getPropValue("fieldName");
+
+        let fieldNameSource = Dbm.react.source.contextVariable("fieldName");
+        let editorValueSource = Dbm.react.source.contextVariable("valueEditor.editValue.value");
+
+        return React.createElement("div", {},
+            React.createElement("label", {className: "standard-field-label"}, label),
+            React.createElement(Dbm.react.context.AddContextVariables, {values: {"fieldName": fieldName}},
+                React.createElement(Dbm.react.admin.editorsgroup.EditField, {"fieldName": fieldNameSource},
+                    React.createElement(Dbm.react.thirdparty.tinymce.Editor, {value: editorValueSource, className: "standard-field standard-field-padding full-width"})
+                ),
+                React.createElement(Dbm.react.area.List, {items: Dbm.getRepositoryItem("site").properties.availableLanguages, as: "language"},
+                    React.createElement("div", {className: "flex-row small-item-spacing vertically-center-items"},
+                        React.createElement("div", {className: "flex-row-item flex-no-resize"},
+                            Dbm.react.text.text(Dbm.react.source.contextVariable("language.code"))
+                        ),
+                        React.createElement("div", {className: "flex-row-item flex-resize"},
+                            React.createElement(Dbm.react.admin.editorsgroup.EditFieldTranslation, {"fieldName": fieldNameSource, "language": Dbm.react.source.contextVariable("language.code")},
+                                React.createElement(Dbm.react.thirdparty.tinymce.Editor, {value: editorValueSource, className: "standard-field standard-field-padding full-width"})
+                            ),
+                        )
+                    )
+                )
+            )
+        )
+    }
+}

package/react/admin/objects/itemeditors/index.js

@@ -15,3 +15,8 @@ export {default as Url} from "./Url.js";
 export {default as RelationsList} from "./RelationsList.js";
 export {default as HierarchyOrderedRelationsList} from "./HierarchyOrderedRelationsList.js";
 export {default as DraggableHierarchyDisplay} from "./DraggableHierarchyDisplay.js";
+export {default as MultipleRelations} from "./MultipleRelations.js";
+export {default as RichTextField} from "./RichTextField.js";
+export {default as RichTextFieldWithTranslations} from "./RichTextFieldWithTranslations.js";
+export {default as FormattedField} from "./FormattedField.js";
+export {default as FormattedFieldWithTranslations} from "./FormattedFieldWithTranslations.js";

package/react/area/InsertElement.js

@@ -7,6 +7,7 @@ export default class InsertElement extends Dbm.react.BaseObject {
     }
 
     _removedUsedProps(aProps) {
+        //console.log("_removedUsedProps");
         delete aProps["element"];
     }
 
@@ -20,7 +21,7 @@ export default class InsertElement extends Dbm.react.BaseObject {
             return React.createElement("div", {}, "No element set");
         }
 
-        let props = this._copyProps(this.props);
+        let props = this._copyProps(element.props);
 
         let returnElement = Dbm.react.ChildFunctions.clone(element, props);
         return returnElement;

package/react/blocks/faq/AskAQuestion.js

@@ -66,6 +66,7 @@ export default class AskAQuestion extends Dbm.react.BaseObject {
         let currentRow = new Dbm.repository.Item();
         currentRow.setId("_dbmInternal/row" + Dbm.getInstance().getNextId());
         currentRow.setValue("item", currentItem);
+        console.log(">>>>>>>", this._getOpenProperty(i));
         currentRow.setValue("element", React.createElement(Dbm.react.blocks.faq.HelpSectionRowItem, {"open": this._getOpenProperty(i), "startState": (i === 0 ? "open" : "close")}));
         rows.push(currentRow);
       }

package/react/image/gallery/ImageGallery.js

@@ -0,0 +1,84 @@
+import Dbm from "../../../index.js";
+import React from "react";
+
+export default class ImageGallery extends Dbm.react.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();
+        this.item.requireProperty("width", 0).connectInput(elementSize.output.properties.width);
+
+        let images = this.getPropValue("images");
+        
+
+        this.item.requireProperty("sections", []);
+
+        let allLoaded = Dbm.flow.updatefunctions.logic.allAtValue(Dbm.loading.LoadingStatus.LOADED);
+        this.item.requireProperty("loaded", false);
+        Dbm.flow.runWhenMatched(this.item.properties.loaded, true, Dbm.commands.callFunction(this._loaded.bind(this)));
+
+        let urlPath = this.getPropValueWithDefault("urlPath", "url");
+
+        let imageLoaders = [];
+        let currentArray = images;
+        let currentArrayLength = currentArray.length;
+        for(let i = 0; i < currentArrayLength; i++) {
+            let currentData = currentArray[i];
+            console.log(currentData);
+            let currentUrl = Dbm.objectPath(currentData, urlPath);
+            console.log(currentUrl);
+            let loader = Dbm.loading.loadImage(currentUrl);
+            imageLoaders.push(loader.item);
+            allLoaded.addCheck(loader.item.properties.status);
+        }
+        this.item.setValue("images", imageLoaders);
+        
+        this.item.properties.loaded.connectInput(allLoaded.output.properties.value);
+    }
+
+    _removedUsedProps(aProps) {
+        delete aProps["images"];
+        delete aProps["urlPath"];
+    }
+
+    _loaded() {
+        console.log("loaded");
+        console.log(this.item.images);
+
+        let groups = Dbm.utils.ArrayFunctions.splitArray(this.item.images, 4);
+
+        let length = groups.length;
+		if(length > 1 && groups[length - 1].length === 1) {
+			let last = groups[length-1];
+			let prev = groups[length-2];
+
+			let lastInPrevious = prev.pop();
+			last.unshift(lastInPrevious);
+		}
+
+        let sections = [];
+        let currentArray = groups;
+        let currentArrayLength = currentArray.length;
+        for(let i = 0; i < currentArrayLength; i++) {
+            let section = React.createElement(Dbm.react.image.gallery.ImageGallerySection, {"images": currentArray[i], width: this.item.properties.width, spacing: 20});
+            sections.push({"id": i, "element": section});
+        }
+
+        this.item.sections = sections;
+    }
+
+    _renderMainElement() {
+
+        return this._createMainElement("div", {ref: this.createRef("widthElement")},
+            React.createElement(Dbm.react.area.List, {items: this.item.properties.sections},
+                React.createElement(Dbm.react.area.InsertElement, {"element": Dbm.react.source.item("element")}),
+                React.createElement("div", {"data-slot": "spacing", "className": "spacing", "style": {"height": 20}})
+            )
+        );
+    }
+}