dbm 1.4.15 → 1.4.16

package/react/blocks/content/Buttons.js

@@ -0,0 +1,33 @@
+import React from "react";
+import Dbm from "../../../index.js";
+
+export default class Buttons extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+
+    _renderMainElement() {
+
+      let element = Dbm.getInstance().repository.getItem("linkListCard").element;
+
+        return React.createElement("div", {"className": "content-narrow"},
+          React.createElement("div", {"className": "flex-row small-item-spacing"},
+            React.createElement(Dbm.react.area.List, {items: this.context.blockData.buttons},
+              React.createElement("div", {"className": "flex-row-item"},
+                React.createElement(Dbm.react.text.Link, {"href": Dbm.react.source.item("url"), "className": "custom-styled-link"},
+                  React.createElement(Dbm.react.area.SwitchableArea, {"area": Dbm.react.source.item("type")},
+                    React.createElement(Dbm.react.design.buttons.PrimaryButton, {"data-slot": "primary"},
+                      Dbm.react.text.text(Dbm.react.source.item("text"))
+                    ),
+                    React.createElement(Dbm.react.design.buttons.SecondaryButton, {"data-slot": "secondary"},
+                      Dbm.react.text.text(Dbm.react.source.item("text"))
+                    )
+                  )
+                )
+              )
+            )
+          )
+        );
+    }
+}

package/react/blocks/content/SectionsGrid.js

@@ -0,0 +1,19 @@
+import React from "react";
+import Dbm from "dbm";
+
+export default class SectionsGrid extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+    }
+
+    _renderMainElement() {
+        return this._createMainElement("div", {className: "content-narrow"},
+            React.createElement("div", {className: "section-grid section-grid-gap"},
+                React.createElement(Dbm.react.area.List, {"items": Dbm.react.source.blockData("sections")},
+                    React.createElement(Dbm.react.design.content.GridSectionCard, {})
+                )
+            )
+        );
+    }
+}

package/react/blocks/content/Spacing.js

@@ -0,0 +1,13 @@
+import React from "react";
+import Dbm from "dbm";
+
+export default class Spacing extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+    }
+
+    _renderMainElement() {
+        return this._createMainElement("div", {className: "spacing standard"});
+    }
+}

package/react/blocks/content/SpacingLine.js

@@ -0,0 +1,18 @@
+import React from "react";
+import Dbm from "dbm";
+
+export default class SpacingLine extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+    }
+
+    _renderMainElement() {
+
+        return this._createMainElement("div", {className: "content-narrow"}, 
+            React.createElement("div", {className: "spacing medium"}),
+            React.createElement("div", {className: "spacer-line"}),
+            React.createElement("div", {className: "spacing medium"})
+        );
+    }
+}

package/react/blocks/content/index.js

@@ -2,4 +2,8 @@ export {default as Card} from "./Card.js";
 export {default as ContentBlock} from "./ContentBlock.js";
 export {default as AnchorPosition} from "./AnchorPosition.js";
 export {default as LinkList} from "./LinkList.js";
-export {default as LinkListCard} from "./LinkListCard.js";
+export {default as LinkListCard} from "./LinkListCard.js";
+export {default as Spacing} from "./Spacing.js";
+export {default as SpacingLine} from "./SpacingLine.js";
+export {default as Buttons} from "./Buttons.js";
+export {default as SectionsGrid} from "./SectionsGrid.js";

package/react/blocks/index.js

@@ -151,6 +151,7 @@ export let registerAllBlocks = function() {
     }
     
     registerBlock("admin/objects/edit", "Admin / Edit object", createElement(Dbm.react.blocks.admin.objects.Edit));
+    registerBlock("admin/objects/explore", "Admin / Explore object", createElement(Dbm.react.blocks.admin.objects.Explore));
     registerBlock("admin/objects/apiCommands", "Admin / Object API commands", createElement(Dbm.react.blocks.admin.objects.RunObjectCommands));
     registerBlock("admin/users", "Admin / Users", createElement(Dbm.react.blocks.admin.objects.Users));
     registerBlock("admin/users/user", "Admin / User", createElement(Dbm.react.blocks.admin.objects.User));
@@ -233,6 +234,32 @@ export let registerAllBlocks = function() {
         registerBlock("content/linkList", "Link list", createElement(Dbm.react.blocks.content.LinkList, {}), editor, {}, {});
     }
 
+    {
+        let editor = createElement(Dbm.react.admin.editor.EditorBlockName, {},
+            createElement(Dbm.react.form.LabelledArea, {label: "Sections"},
+                createElement(Dbm.react.admin.editor.fields.ArrayField, {name: "sections"},
+                    createElement("div", {},
+                        createElement(Dbm.react.form.EditObjectProperty, {"value": Dbm.react.source.item("properties.value"), "path": "image"},
+                            createElement(Dbm.react.form.GraphApiImageWithAltText, {"value": Dbm.react.source.contextVariable("value"), "className": "standard-field standard-field-padding full-width"})
+                        ),
+                        createElement(Dbm.react.form.EditObjectProperty, {"value": Dbm.react.source.item("properties.value"), "path": "title"},
+                            createElement(Dbm.react.form.FormField, {"value": Dbm.react.source.contextVariable("value"), "className": "standard-field standard-field-padding full-width"})
+                        ),
+                        createElement(Dbm.react.form.EditObjectProperty, {"value": Dbm.react.source.item("properties.value"), "path": "link", initialValue: {}},
+                            createElement("div", {"className": "standard-field"}, 
+                                createElement(Dbm.react.form.Link, {"value": Dbm.react.source.contextVariable("value")})
+                            )
+                        ),
+                        createElement(Dbm.react.form.EditObjectProperty, {"value": Dbm.react.source.item("properties.value"), "path": "content"},
+                            createElement(Dbm.react.form.EditableContent, {"value": Dbm.react.source.contextVariable("value"), "className": "standard-field standard-field-padding full-width"})
+                        )
+                    )
+                )
+            )
+        );
+        registerBlock("content/sectionsGrid", "Sections grid", createElement(Dbm.react.blocks.content.SectionsGrid, {}), editor, {}, {"sections": true, "content": true});
+    }
+
     {
         let editor = createElement(Dbm.react.admin.editor.EditorBlockName, {},
             createElement(Dbm.react.form.LabelledArea, {label: "Link name"},
@@ -309,6 +336,20 @@ export let registerAllBlocks = function() {
         block.displayBlock.setValue("endSection", true);
     }
 
+    {
+        let editor = createElement(Dbm.react.admin.editor.EditorBlockName, {},
+            
+        );
+        let block = registerBlock("content/spacing", "Spacing", createElement(Dbm.react.blocks.content.Spacing), editor, {}, {});
+    }
+
+    {
+        let editor = createElement(Dbm.react.admin.editor.EditorBlockName, {},
+            
+        );
+        let block = registerBlock("content/spacingLine", "Spacing line", createElement(Dbm.react.blocks.content.SpacingLine), editor, {}, {});
+    }
+
     {
         let editor = createElement(Dbm.react.admin.editor.EditorBlockName, {},
             
@@ -316,7 +357,55 @@ export let registerAllBlocks = function() {
         let block = registerBlock("content/skipSpacing", "Skip spacing", createElement("div", {"data-skip-spacing": "1"}), editor, {}, {});
     }
 
+    {
+        let buttonTypes = [];
+        {
+            let button = new Dbm.repository.Item();
+            button.setValue("type", "primary");
+            button.setValue("name", "Primary");
+            buttonTypes.push(button);
+        }
+        {
+            let button = new Dbm.repository.Item();
+            button.setValue("type", "secondary");
+            button.setValue("name", "Secondary");
+            buttonTypes.push(button);
+        }
 
+        let editor = createElement(Dbm.react.admin.editor.EditorBlockName, {},
+            createElement(Dbm.react.form.LabelledArea, {label: "Buttons"}, 
+                createElement(Dbm.react.admin.editor.fields.ArrayField, {name: "buttons"},
+                    createElement("div", {"className": "standard-field flex-row vertically-center-items"},
+                        createElement("div", {"className": "flex-row-item flex-no-resize"},
+                            createElement(Dbm.react.form.EditObjectProperty, {"value": Dbm.react.source.item("properties.value"), "path": "type"},
+                                createElement(Dbm.react.form.CustomSelection, {"value": Dbm.react.source.contextVariable("value"), "items": buttonTypes, "path": "type"},
+                                    createElement("div", {"data-slot": "button", "className": "standard-field-padding"}, "Select type"),
+                                    createElement("div", {},
+                                        createElement(Dbm.react.area.List, {items: Dbm.react.source.contextVariable("rows"), as: "row"},
+                                            createElement(Dbm.react.context.AddItemToContext, {
+                                            item: Dbm.react.source.contextVariable("row.forItem"),
+                                            children: createElement(Dbm.react.interaction.CommandButton, {
+                                                commands: [Dbm.commands.setProperty(Dbm.react.source.contextVariable("row.properties.selected"), true), Dbm.react.source.contextVariable("closeCommand")],
+                                                children: createElement("div", {
+                                                children: Dbm.react.text.text(Dbm.react.source.item("name"))
+                                                })
+                                            })
+                                            })
+                                        )
+                                    )
+                                )
+                            )
+                        ),
+                        createElement("div", {"className": "flex-row-item flex-resize"},
+                            createElement(Dbm.react.form.Link, {"value": Dbm.react.source.item("properties.value")})
+                        )
+                    )
+                    
+                )
+            ),
+        );
+        let block = registerBlock("content/buttons", "Buttons", createElement(Dbm.react.blocks.content.Buttons), editor, {}, {});
+    }
 
     {
         let itemEditor = Dbm.getInstance().repository.getItem("admin/itemEditors/title");
@@ -611,6 +700,25 @@ export let registerAllBlocks = function() {
         objectTypeEditor.editors = newArray;
     }
 
+    {
+        let objectTypeEditor = Dbm.getInstance().repository.getItem("admin/objectTypeEditors/textMessageTemplate");
+        if(!objectTypeEditor.editors) {
+            objectTypeEditor.setValue("editors", []);
+        }
+
+        let newArray = [].concat(objectTypeEditor.editors);
+        newArray.push(Dbm.getInstance().repository.getItem("admin/itemEditors/name"));
+        newArray.push(Dbm.getInstance().repository.getItem("admin/itemEditors/identifier"));
+
+        {
+            let itemEditor = new Dbm.repository.Item();
+            itemEditor.setValue("element", createElement(Dbm.react.admin.objects.itemeditors.TextAreaField, {"label": "Content", "fieldName": "content"}));
+            newArray.push(itemEditor);
+        }
+        
+        objectTypeEditor.editors = newArray;
+    }
+
     {
         let objectTypeEditor = Dbm.getInstance().repository.getItem("admin/objectTypeEditors/group/reviewGroup");
         if(!objectTypeEditor.editors) {

package/react/context/AddContextVariables.js

@@ -6,17 +6,22 @@ export default class AddContextVariables extends Dbm.react.BaseObject {
         super._construct();
     }
 
-    render() {
-        //console.log("AddContextVariables::render");
-        //console.log(this);
+    _removedUsedProps(aProps) {
+        super._removedUsedProps(aProps);
+        
+        delete aProps["values"];
+    }
+
+    _renderMainElement() {
         
         let newContext = {...this.context};
 
-        let values = this.props.values;
+        let values = this.getPropValue("values");
         for(let objectName in values) {
             newContext[objectName] = values[objectName];
         }
 
+        //METODO: pass down props to children
         return React.createElement(Dbm.react.context.Context.Provider, {"value": newContext}, this.props.children);
     }
 }

package/react/cookies/CookieBar.js

@@ -202,7 +202,7 @@ export default class CookieBar extends Dbm.react.BaseObject {
 
     _renderMainElement() {
 
-        return this._createMainElement("div", {className: "cookie-bar-position no-pointer-events", "data-non-static": 1, ref: this.createRef("widthElement")},
+        return this._createMainElement("div", {className: "cookie-bar-position no-pointer-events cookie-bar-layer", "data-non-static": 1, ref: this.createRef("widthElement")},
             React.createElement(Dbm.react.area.HasData, {"check": this.item.properties.inDom},
                 React.createElement(Dbm.react.text.TranslationGroup, {"path": "cookies/notice/bar"},
                     React.createElement("div", {className: "overflow-hidden"},	

package/react/cookies/CookieOverlayMessage.js

@@ -78,15 +78,15 @@ export default class CookieOverlayMessage extends Dbm.react.BaseObject {
         let desktopLayout = React.createElement("div", {className: "centered-site"},
             React.createElement("div", {className: "cookie-overlay-message-box cookie-overlay-message-box-padding all-pointer-events"},
                 React.createElement("div", {"className": "flex-row small-item-spacing"}, 
-                    React.createElement("div", {"className": "flex-row-item half"},
+                    React.createElement("div", {"className": "flex-row-item half flex-resize"},
                         React.createElement("div", {"className": "cookie-bar-title"},
                             Dbm.react.text.translatedText("Your privacy is important to us", "text/title")
                         ),
+                        React.createElement("div", {"className": "spacing small"}),
                         React.createElement("div", {"className": "cookie-bar-description"},
                             Dbm.react.text.translatedText("We use cookies to make our site work properly and to improve your experience. You can choose to accept all cookies, allow only those that are necessary, or manage your preferences in the settings.", "text/description")
                         )
                     ),
-                    React.createElement("div", {"className": "flex-row-item quarter"}),
                     React.createElement("div", {"className": "flex-row-item quarter"}, 
                         React.createElement("div", {"className": "standard-button standard-button-padding big full-width text-align-center",  onClick: () => this._acceptAll()},
                             Dbm.react.text.translatedText("Allow all", "allowAll")

package/react/dynamic/DesignRepositoryProxy.js

@@ -0,0 +1,22 @@
+import Dbm from "../../index.js";
+import React from "react";
+
+export default class DesignRepositoryProxy extends Dbm.repository.proxy.RepositoryProxy {
+    
+    _setupDefaults() {
+        this.reposityPrefix = "react/design/";
+        this.propertyName = "reactClass";
+    }
+
+    _setupItem(aItem, aFullPath) {
+        console.log("_setupItem");
+        console.log(aItem, aFullPath);
+
+        let className = aFullPath.split("/").pop();
+        let element = React.createElement("div", {"className": "missing-design-element", "data-repository-path": aFullPath}, className)
+
+        let DynamicDesignElement = Dbm.react.dynamic.setupDesignItem(aItem, element, [], []);
+
+        aItem.requireProperty(this.propertyName, DynamicDesignElement);
+    }
+}

package/react/dynamic/DynamicDesignElement.js

@@ -0,0 +1,24 @@
+import Dbm from "../../index.js";
+import React from "react";
+
+export default class DynamicDesignElement extends Dbm.react.BaseObject {
+
+    _construct() {
+        super._construct();
+        this.item.requireProperty("structure", null);
+        this._setupDesignElements();
+
+        //METODO: setup dynamic props
+    }
+
+    _setupDesignElements() {
+        //MENOTE: dynamically overridden
+    }
+
+    _renderMainElement() {
+        //METODO: link dynamic props
+        return React.createElement(Dbm.react.context.AddContextVariables, {"values": {"children": this.getPropValue("children")}},
+            this._mainElement(this.item.structure.element)
+        )
+    }
+}

package/react/dynamic/index.js

@@ -0,0 +1,60 @@
+import Dbm from "../../index.js";
+import React from "react";
+
+export {default as DesignRepositoryProxy} from "./DesignRepositoryProxy.js";
+export {default as DynamicDesignElement} from "./DynamicDesignElement.js";
+
+export const setupDesignItem = function(aItem, aElement, aPropNames = [], aSlots = []) {
+    let DynamicDesignElement = class DynamicDesignElement extends Dbm.react.dynamic.DynamicDesignElement {
+        _setupDesignElements() {
+            this.item.setValue("structure", aItem);
+        }
+    }
+    
+    aItem.setValue("element", aElement);
+    aItem.setValue("propNames", aPropNames);
+    aItem.setValue("slots", aSlots);
+
+    return DynamicDesignElement;
+}
+
+export const addDesign = function(aPath, aElement, aPropNames = [], aSlots = []) {
+    let prefix = "react/design/";
+    let fullPath = prefix+aPath;
+    let item = Dbm.repository.getItem(fullPath);
+    let DynamicDesignElement = setupDesignItem(item, aElement, aPropNames, aSlots);
+    item.setValue("reactClass", DynamicDesignElement);
+
+    return item;
+}
+
+export const setupDefaultDesignElements = function() {
+    addDesign("buttons/PrimaryButton", React.createElement("div", {"className": "standard-button standard-button-padding"},
+        React.createElement(Dbm.react.area.InsertElement, {"element": Dbm.react.source.contextVariable("children")})
+    ));
+
+    addDesign("buttons/SecondaryButton", React.createElement("div", {"className": "secondary-button standard-button-padding"},
+        React.createElement(Dbm.react.area.InsertElement, {"element": Dbm.react.source.contextVariable("children")})
+    ));
+
+    addDesign("content/GridSectionCard", React.createElement("div", {"className": "grid-section-card"},
+        React.createElement(Dbm.react.text.OptionalLink, {"href": Dbm.react.source.item("link.url"), "className": "custom-styled-link"},
+            React.createElement("div", {"className": ""},
+                React.createElement("div", {"className": "flex-row"},
+                    React.createElement("div", {"className": "flex-row-item flex-no-ressize"},
+                        "Icon"
+                    ),
+                    React.createElement("div", {"className": "flex-row-item flex-resize"},
+                        React.createElement("div", {"className": "grid-section-card-title"},
+                            Dbm.react.text.text(Dbm.react.source.item("title"))
+                        )
+                    )
+                ),
+                React.createElement("div", {"className": "spacing small"}),
+                React.createElement("div", {"className": "grid-section-card-content"},
+                    Dbm.react.text.htmlText(Dbm.react.source.item("content"), "div", {"className": "no-margins-around"})
+                )
+            )
+        )
+    ));
+}

package/react/form/EditObjectProperty.js

@@ -8,10 +8,23 @@ export default class EditObjectProperty extends Dbm.react.BaseObject {
         this._valueSelector = new Dbm.flow.controllers.transform.PartOfObject();
 
         this._valueSelector.item.properties.object.connectInput(this.getDynamicPropWithoutState("value", {}));
-        this._valueSelector.item.properties.path.connectInput(this.getDynamicPropWithoutState("path", {}));
+        this._valueSelector.item.properties.path.connectInput(this.getDynamicPropWithoutState("path", null));
 
-        this.item.requireProperty("value", []).connectInput(this._valueSelector.item.properties.value);
+        this.item.requireProperty("value", {}).connectInput(this._valueSelector.item.properties.value);
+    }
 
+    _constructAfterProps() {
+        super._constructAfterProps();
+
+        this._valueSelector._objectUpdated();
+        let initialValue = this.getPropValue("initialValue");
+        let currentValue = this.item.value;
+        if(this.item.value === null || this.item.value === undefined) {
+            if(initialValue !== null && initialValue !== undefined) {
+                this._valueSelector.item.value = initialValue;
+                this._valueSelector._valueUpdated();
+            }
+        }
     }
 
     _renderMainElement() {

package/react/form/EditableContent.js

@@ -0,0 +1,71 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class EditableContent extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        let valueProperty = this.getDynamicPropWithoutState("value", "");
+        this.getDynamicPropWithoutState("editing", false);
+        this.state["formUpdate"] = 0;
+        this._currentValue = "";
+
+        this._callback_focusBound = this._callback_focus.bind(this);
+        this._callback_blurBound = this._callback_blur.bind(this);
+
+        this._elementChangedBound = this._elementChanged.bind(this);
+        this._callback_inputBound = this._callback_input.bind(this);
+    
+        this.createRef("contentElement");
+        Dbm.flow.addUpdateCommand(this.item.properties.contentElement, Dbm.commands.callFunction(this._elementChangedBound));
+
+        valueProperty.addUpdate(this._getScopedCallFunctionCommand(this._valueChanged));
+    }
+
+    _callback_focus(aEvent) {
+        //console.log("_callback_focus");
+        //console.log(aEvent);
+
+        this.getDynamicProp("editing").getMostUpstreamProperty().setValue(true);
+    }
+
+    _callback_blur(aEvent) {
+        //console.log("_callback_blur");
+        //console.log(aEvent);
+
+        this.getDynamicProp("editing").getMostUpstreamProperty().setValue(false);
+    }
+
+    _valueChanged() {
+        //console.log("_elementChanged");
+
+        if(this.item.contentElement) {
+            let value = this.getPropValueWithoutNull("value", "");
+            if(value !== this._currentValue) {
+                this.item.contentElement.innerHTML = value;
+            }
+        }
+    }
+    
+    _elementChanged() {
+        //console.log("_elementChanged");
+
+        this.item.contentElement.innerHTML = this.getPropValueWithoutNull("value", "");
+        this.item.contentElement.addEventListener("input", this._callback_inputBound, false);
+
+    }
+    
+    _callback_input(aEvent) {
+        //console.log("_callback_input");
+
+        let value = "" + this.item.contentElement.innerHTML;
+        this._currentValue = value;
+        this.getDynamicProp("value").getMostUpstreamProperty().setValue(value);
+        this.setState({"formUpdate": this.state.formUpdate}); //MENOTE: trigger change direct to not lose focus on input
+    }
+    
+    _renderMainElement() {
+        return this._createMainElement("div", {contentEditable: true, ref: this.createRef("contentElement"), className: "standard-field standard-field-padding"});
+    }
+}
+