dbm 1.2.7 → 1.2.8

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

@@ -11,4 +11,7 @@ export {default as MainImage} from "./MainImage.js";
 export {default as Identifier} from "./Identifier.js";
 export {default as SingleRelation} from "./SingleRelation.js";
 export {default as Field} from "./Field.js";
-export {default as Url} from "./Url.js";
+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";

package/react/animation/AnimatedElement.js

@@ -10,6 +10,10 @@ export default class AnimatedElement extends Dbm.react.BaseObject {
         controller.propertyInput("element", this.item.requireProperty("animationElement", null));
     }
 
+    _removedUsedProps(aProps) {
+        delete aProps["controller"];
+    }
+
     _renderMainElement() {
         //console.log("AnimatedElement::_renderMainElement");
         //console.log(this);

package/react/area/FixedWidthInfiniteSlideshow.js

@@ -8,6 +8,13 @@ export default class FixedWidthInfiniteSlideshow extends Dbm.react.BaseObject {
 		
 	}
 
+    _removedUsedProps(aProps) {
+        delete aProps["viewWidth"];
+        delete aProps["prepareLength"];
+        delete aProps["elementWidth"];
+        delete aProps["spacing"];
+    }
+
     _renderMainElement() {
         //console.log("FixedWidthInfiniteSlideshow::render");
         //console.log(this);
@@ -19,7 +26,7 @@ export default class FixedWidthInfiniteSlideshow extends Dbm.react.BaseObject {
 
         let index = this.getPropValue("index");
 
-        let elements = this.getPropValue("children");;
+        let elements = this.getPropValue("children");
 
 		let numberOfElements = elements.length;
 

package/react/area/HasData.js

@@ -26,7 +26,7 @@ export default class HasData extends Dbm.react.BaseObject {
 
         let compareFunction = Dbm.getInstance().repository.getItem("compareFunctions/" + checkType).compare;
         if(!compareFunction) {
-            console.warn("No copmare function registered for: " + checkType + ". Using default", this, data, checkType, compareValue);
+            console.warn("No compare function registered for: " + checkType + ". Using default", this, data, checkType, compareValue);
             compareFunction = Dbm.utils.CompareFunctions.objectExists;
         }
 

package/react/area/InsertElement.js

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

package/react/area/OpenCloseExpandableArea.js

@@ -22,19 +22,23 @@ export default class OpenCloseExpandableArea extends Dbm.react.BaseObject {
 
 		this.item.setValue("animation", Dbm.react.animation.connectedAnimation(transformToStyle.output.properties.value));
 	}
+
+	_removedUsedProps(aProps) {
+        delete aProps["open"];
+    }
 	
 	_transformToStyle(aEnvelope) {
 		//console.log("_transformToStyle");
 		//console.log(aEnvelope, this, this.item.element);
 		
 		if(aEnvelope === 0) {
-			return {"height": "0px", "overflow": "hidden", "display": "none", "visibility": "hidden"};
+			return {"height": "0px", "overflow-x": "visible", "overflow-y": "clip", "display": "none", "visibility": "hidden"};
 		}
 		else if(aEnvelope === 1 || !this.item.element) {
 			return {};
 		}
 		
-		return {"height": (this.item.element.clientHeight*aEnvelope) + "px", "overflow": "hidden"};
+		return {"height": (this.item.element.clientHeight*aEnvelope) + "px", "overflow-x": "visible","overflow-y": "clip"};
 	}
 	
 	_renderMainElement() {

package/react/area/PopoverLayer.js

@@ -31,9 +31,8 @@ export default class PopoverLayer extends Dbm.react.BaseObject {
     }
 
     _updateOpen() {
-        console.log("_updateOpen");
+        //console.log("_updateOpen");
         let open = this.getPropValue("open");
-        console.log(open, this.item.popoverElement);
 
         this.item.position._callback_scroll(null);
         this.item.size._callback_sizeChanged(null);

package/react/blocks/admin/objects/Edit.js

@@ -25,7 +25,7 @@ export default class Edit extends Dbm.react.BaseObject {
         let url = new URL(document.location.href);
         let id = url.searchParams.get("id");
 
-        return React.createElement("div", {className: "content-narrow"},
+        return React.createElement("div", {className: "content-narrow admin-font-settings"},
             React.createElement(Dbm.react.context.AddContextVariables, {values: {"editorGroup": this.item.editorGroup}},
                 React.createElement(Dbm.react.admin.objects.EditObject, {id: id}),
                 React.createElement("div", {className: "spacing standard"}),

package/react/blocks/index.js

@@ -334,10 +334,15 @@ export let registerAllBlocks = function() {
     }
 
     {
-        let itemEditor = Dbm.getInstance().repository.getItem("admin/itemEditors/name");
+        let itemEditor = Dbm.getInstance().repository.getItem("admin/itemEditors/nameWithTranslations");
         itemEditor.setValue("element", createElement(Dbm.react.admin.objects.itemeditors.Name, {}));
     }
 
+    {
+        let itemEditor = Dbm.getInstance().repository.getItem("admin/itemEditors/name");
+        itemEditor.setValue("element", createElement(Dbm.react.admin.objects.itemeditors.Field, {"label": "Name", "fieldName": "name"}));
+    }
+
     {
         let itemEditor = Dbm.getInstance().repository.getItem("admin/itemEditors/link");
         itemEditor.setValue("element", createElement(Dbm.react.admin.objects.itemeditors.Link, {}));
@@ -389,6 +394,61 @@ export let registerAllBlocks = function() {
             nameField: "identifier"
         }));
     }
+
+    {
+        let itemEditor = Dbm.getInstance().repository.getItem("admin/itemEditors/language");
+        itemEditor.setValue("element", createElement(Dbm.react.admin.objects.itemeditors.SingleRelation, {
+            "label": "Language",
+            "direction": "in",
+            "relationType": "for",
+            "objectType": "language",
+            encoding: "name",
+            nameField: "name"
+        }));
+    }
+
+    {
+        let itemEditor = Dbm.getInstance().repository.getItem("admin/itemEditors/menuItems");
+        itemEditor.setValue("element", createElement(Dbm.react.admin.objects.itemeditors.HierarchyOrderedRelationsList, {
+            "label": "Menu items",
+            "direction": "in",
+            "relationType": "in",
+            "objectType": "menuItem",
+            "orderFieldName": "order"
+        },
+        createElement("div", {"className": ""}, 
+            createElement(Dbm.react.admin.EditObject, {"item": Dbm.react.source.item()},
+                createElement("div", {"className": "flex-row small-item-spacing halfs"},
+                    createElement("div", {"className": "flex-row-item"},
+                        createElement(Dbm.react.admin.editorsgroup.EditField, {fieldName: "label"},
+                            createElement(Dbm.react.form.FormField, {"placeholder": "Label", "value": Dbm.react.source.contextVariable("valueEditor.editValue.value"), className: "standard-field standard-field-padding full-width"})
+                        )
+                    ),
+                    createElement("div", {"className": "flex-row-item"},
+                        createElement(Dbm.react.admin.editorsgroup.EditField, {fieldName: "link"},
+                            createElement(Dbm.react.admin.editorsgroup.EditPartOfObject, {"value": Dbm.react.source.contextVariable("valueEditor.editValue.value"), path: "url"},
+                                createElement(Dbm.react.form.FormField, {"placeholder": "Url", "value": Dbm.react.source.contextVariable("value"), className: "standard-field standard-field-padding full-width"})
+                            )
+                        )
+                    )
+                )
+                
+            )
+        )
+        ));
+    }
+
+    {
+        let itemEditor = Dbm.getInstance().repository.getItem("admin/itemEditors/menuLocation/menu");
+        itemEditor.setValue("element", createElement(Dbm.react.admin.objects.itemeditors.SingleRelation, {
+            "label": "Menu",
+            "direction": "in",
+            "relationType": "at",
+            "objectType": "menu",
+            encoding: "name",
+            nameField: "name"
+        }));
+    }
     
     {
         let objectTypeEditor = Dbm.getInstance().repository.getItem("admin/objectTypeEditors/page");
@@ -485,6 +545,34 @@ export let registerAllBlocks = function() {
         objectTypeEditor.editors = newArray;
     }
 
+    {
+        let objectTypeEditor = Dbm.getInstance().repository.getItem("admin/objectTypeEditors/menu");
+        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/language"));
+        newArray.push(Dbm.getInstance().repository.getItem("admin/itemEditors/menuItems"));
+        
+        objectTypeEditor.editors = newArray;
+    }
+
+    {
+        let objectTypeEditor = Dbm.getInstance().repository.getItem("admin/objectTypeEditors/menuLocation");
+        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"));
+        newArray.push(Dbm.getInstance().repository.getItem("admin/itemEditors/menuLocation/menu"));
+        
+        objectTypeEditor.editors = newArray;
+    }
+
 
     let admin = Dbm.getInstance().repository.getItem("admin");
     admin.requireProperty("pageEditors", []);

package/react/form/Dropdown.js

@@ -26,7 +26,7 @@ export default class Dropdown extends Dbm.react.BaseObject {
             dropClassName += " " + "top-right";
         }
 
-        return this._createMainElement("div", {className: "absolute-container overflow-hidden"},
+        return this._createMainElement("div", {className: "absolute-container"},
             React.createElement(Dbm.react.interaction.CommandButton, {"command": Dbm.commands.setProperty(openProperty, true)},
                 React.createElement("div", {"className": "cursor-pointer"},
                     React.createElement(Dbm.react.area.InsertElement, {"element": buttonElement})
@@ -36,9 +36,7 @@ export default class Dropdown extends Dbm.react.BaseObject {
                 React.createElement("div", {className: dropClassName},
                     React.createElement(Dbm.react.area.OpenCloseExpandableArea, {"open": openProperty},
                         React.createElement(Dbm.react.interaction.ClickOutsideTrigger, {"command": Dbm.commands.setProperty(openProperty, false)},
-                            React.createElement("div", {className: ""},
-                                React.createElement(Dbm.react.area.InsertElement, {"element": mainChildren})
-                            )
+                            React.createElement(Dbm.react.area.InsertElement, {"element": mainChildren})
                         )
                     )
                 )

package/react/interaction/CommandButton.js

@@ -18,74 +18,13 @@ export default class CommandButton extends Dbm.react.BaseObject {
         }
         if(commands) {
             commands = Dbm.utils.ArrayFunctions.singleOrArray(commands);
-
-            let currentArray = commands;
-            let currentArrayLength = currentArray.length;
-            for(let i = 0; i < currentArrayLength; i++) {
-                let command = currentArray[i];
-                try {
-                    command.perform(this, aEvent);
-                }
-                catch(theError) {
-                    console.error("Error while running command", theError, command);
-                }
-                
-            }
+            Dbm.commands.performCommands(commands, this, aEvent);
         }
         else{
             console.warn("Button doesn't have any commands", this);
         }
     }
 
-    _performClone(aChild, aProps) {
-		
-		if(aChild instanceof Array) {
-			let returnArray = [];
-			
-			let currentArray = aChild;
-			let currentArrayLength = currentArray.length;
-			for(let i = 0; i < currentArrayLength; i++) {
-				let currentChild = currentArray[i];
-				returnArray.push(this._performClone(currentChild, aProps));
-			}
-			
-			return returnArray;
-		}
-		
-		let newProps = aProps;
-        /*
-        //MENOTE: this is a more generalized version, but we never pass in className in this function
-        if(aChild && aChild.props && aChild.props.className) {
-			newProps = {...aProps};
-            
-			if(aProps.className) {
-				newProps.className = aProps.className + " " + aChild.props.className;
-			} 
-			else {
-				newProps.className = aChild.props.className;
-			}
-		}
-        */
-		
-		
-		let callArray = [aChild, newProps];
-		
-		if(aChild && aChild.props) {
-			let firstChildChildren = aChild.props.children;
-			if(!firstChildChildren) {
-				//MENOTE: do nothing
-			}
-			else if(firstChildChildren instanceof Array) {
-				callArray = callArray.concat(firstChildChildren);
-			}
-			else {
-				callArray.push(firstChildChildren);
-			}
-		}
-		
-		return React.cloneElement.apply(React, callArray);
-	}
-
     _renderMainElement() {
 
         let children = Dbm.utils.ArrayFunctions.singleOrArray(this.getPropValue("children"));
@@ -98,10 +37,10 @@ export default class CommandButton extends Dbm.react.BaseObject {
             let currentChild = currentArray[i];
             if(currentChild) {
                 if(typeof(currentChild) === "string") {
-                    replacedChildren.push(React.createElement("span"), {"onClick": this._callback_clickBound, onKeyDown: function(aEvent) {if(aEvent.key === "Enter") aEvent.target.click()}}, currentChild);
+                    replacedChildren.push(React.createElement("span", {"onClick": this._callback_clickBound, onKeyDown: CommandButton.callback_keyDown}, currentChild));
                 }
                 else {
-                    replacedChildren.push(this._performClone(currentChild, {"onClick": this._callback_clickBound, onKeyDown: function(aEvent) {if(aEvent.key === "Enter") aEvent.target.click()}}));
+                    replacedChildren.push(Dbm.react.ChildFunctions.clone(currentChild, {"onClick": this._callback_clickBound, onKeyDown: CommandButton.callback_keyDown}));
                 }
             }
             else {
@@ -109,8 +48,17 @@ export default class CommandButton extends Dbm.react.BaseObject {
             }
         }
         
+        if(currentArrayLength === 1) {
+            return replacedChildren[0];
+        }
 
         return React.createElement(React.Fragment, {}, replacedChildren);
     }
+
+    static callback_keyDown(aEvent) {
+        if(aEvent.key === "Enter") {
+            aEvent.target.click();
+        }
+    }
 }
 

package/react/interaction/HoverArea.js

@@ -0,0 +1,77 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class HoverArea extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        this.getDynamicPropWithoutState("over", false);
+
+        this._callback_overBound = this._callback_over.bind(this);
+        this._callback_outBound = this._callback_out.bind(this);
+    }
+
+    _callback_over(aEvent) {
+        //console.log("_callback_over");
+        //console.log(aEvent);
+
+        this.getDynamicProp("over").getMostUpstreamProperty().setValue(true);
+
+        let commands = this.getPropValue("overCommands");
+        if(!commands) {
+            commands = this.getPropValue("overCommand");
+        }
+        if(commands) {
+            commands = Dbm.utils.ArrayFunctions.singleOrArray(commands);
+            Dbm.commands.performCommands(commands, this, aEvent);
+        }
+    }
+
+    _callback_out(aEvent) {
+        //console.log("_callback_out");
+        //console.log(aEvent);
+
+        this.getDynamicProp("over").getMostUpstreamProperty().setValue(false);
+
+        let commands = this.getPropValue("outCommands");
+        if(!commands) {
+            commands = this.getPropValue("outCommand");
+        }
+        if(commands) {
+            commands = Dbm.utils.ArrayFunctions.singleOrArray(commands);
+            Dbm.commands.performCommands(commands, this, aEvent);
+        }
+    }
+
+    _renderMainElement() {
+
+        let children = Dbm.utils.ArrayFunctions.singleOrArray(this.getPropValue("children"));
+
+        let replacedChildren = [];
+
+        let currentArray = children;
+        let currentArrayLength = currentArray.length;
+        for(let i = 0; i < currentArrayLength; i++) {
+            let currentChild = currentArray[i];
+            if(currentChild) {
+                if(typeof(currentChild) === "string") {
+                    replacedChildren.push(React.createElement("span", {"onMouseEnter": this._callback_overBound, onMouseLeave: this._callback_outBound}, currentChild));
+                }
+                else {
+                    replacedChildren.push(Dbm.react.ChildFunctions.clone(currentChild, {"onMouseEnter": this._callback_overBound, onMouseLeave: this._callback_outBound}));
+                }
+            }
+            else {
+                replacedChildren.push(currentChild);
+            }
+        }
+
+
+        if(currentArrayLength === 1) {
+            return replacedChildren[0];
+        }
+
+        return React.createElement(React.Fragment, {}, replacedChildren);
+    }
+}
+

package/react/interaction/HoverDropdown.js

@@ -0,0 +1,38 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class HoverDropdown extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        let startValue = this.getPropValue("startState") === "open";
+		let openProperty = this.getDynamicPropWithoutState("open", startValue);
+    }
+
+    _renderMainElement() {
+
+        let children = Dbm.utils.ArrayFunctions.singleOrArray(this.getPropValue("children"));
+        
+        let slots = Dbm.react.ChildFunctions.splitIntoSlots(children);
+
+        let buttonElement = slots["button"];
+        let mainChildren = slots.main;
+
+        let openProperty = this.getDynamicProp("open");
+
+        let dropClassName = "position-absolute full-width";
+
+        return React.createElement(Dbm.react.interaction.HoverArea, {"over": openProperty},
+            this._createMainElement("div", {className: "absolute-container"},
+                React.createElement(Dbm.react.area.InsertElement, {"element": buttonElement}),
+                React.createElement(Dbm.react.area.PopoverLayer, {className: "position-absolute bottom-left full-width", "open": openProperty},
+                    React.createElement("div", {className: dropClassName},
+                        React.createElement(Dbm.react.area.OpenCloseExpandableArea, {"open": openProperty},
+                            React.createElement(Dbm.react.area.InsertElement, {"element": mainChildren})
+                        )
+                    )
+                )
+            )
+        );
+    }
+}

package/react/interaction/drag/DraggableItem.js

@@ -0,0 +1,94 @@
+import React from "react";
+import Dbm from "../../../index.js";
+
+export default class DraggableItem extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+		this._callback_dragStartBound = this._callback_dragStart.bind(this);
+		this._callback_dragOverBound = this._callback_dragOver.bind(this);
+		this._callback_dragOutBound = this._callback_dragOut.bind(this);
+		this._callback_dragEndBound = this._callback_dragEnd.bind(this);
+		this._callback_dropBound = this._callback_drop.bind(this);
+
+        this.item.requireProperty("dragged", false);
+        this.item.requireProperty("over", false);
+	    
+	}
+	
+	_callback_dragStart(aEvent) {
+		console.log("_dragStart");
+		//console.log(aEvent, aIndex);
+		
+		let currentNode = this.item.mainElement;
+		
+		aEvent.dataTransfer.effectAllowed = "move";
+		aEvent.dataTransfer.setDragImage(currentNode, 0, 0);
+		
+		let dragData = this.getPropValueWithDefault("dragData", {});
+		
+		aEvent.dataTransfer.setData("text/plain", JSON.stringify(dragData));
+		
+		this.item.dragged = true;
+		
+		let dragController = this.context.dragController;
+		if(dragController) {
+			dragController.startDrag(this);
+		}
+	}
+	
+	_callback_dragOver(aEvent) {
+		console.log("_dragOver");
+		//console.log(aEvent, aIndex);
+		
+		aEvent.preventDefault();
+		
+		this.item.over = true;
+	}
+	
+	_callback_dragOut(aEvent) {
+		console.log("_callback_dragOut");
+		//console.log(aEvent, aIndex);
+		
+		aEvent.preventDefault();
+		
+		this.item.over = false;
+	}
+	
+	_callback_dragEnd(aEvent) {
+		console.log("_dragEnd");
+		//console.log(aEvent, aIndex);
+		
+		this.item.dragged = false;
+	}
+	
+	_callback_drop(aEvent) {
+		console.log("_callback_drop");
+		this.item.over = false;
+		
+		console.log(aEvent, aEvent.dataTransfer.getData("text"));
+		
+		let data = null;
+		let dataString = aEvent.dataTransfer.getData("text");
+		if(dataString) {
+			data = JSON.parse(dataString);
+		}
+		
+		let dragController = this.context.dragController;
+		if(dragController) {
+			dragController.itemDroppedOn(this, data);
+		}
+	}
+
+    _renderMainElement() {
+
+        let children = this.getPropValue("children");
+
+		let draggable = !this.getPropValue("skipDraggable");
+		
+        return this._createMainElement("div", {"ref": this.createRef("mainElement"), "draggable": draggable, "onDragStart": this._callback_dragStartBound, "onDragOver": this._callback_dragOverBound, "onDragLeave": this._callback_dragOutBound, "onDragEnd": this._callback_dragEndBound, "onDrop": this._callback_dropBound},
+			children
+		);
+    }
+}
+

package/react/interaction/drag/index.js

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

package/react/interaction/index.js

@@ -1,5 +1,9 @@
 import Dbm from "../../index.js";
 
+export * as drag from "./drag/index.js";
+
 export {default as CommandButton} from "./CommandButton.js";
 export {default as ConfirmButton} from "./ConfirmButton.js";
-export {default as ClickOutsideTrigger} from "./ClickOutsideTrigger.js";
+export {default as ClickOutsideTrigger} from "./ClickOutsideTrigger.js";
+export {default as HoverArea} from "./HoverArea.js";
+export {default as HoverDropdown} from "./HoverDropdown.js";

package/react/source/index.js

@@ -2,14 +2,22 @@ import Dbm from "../../index.js";
 
 export {default as ContextVariableSource} from "./ContextVariableSource.js";
 
-export let contextVariable = function(aPath) {
+export const contextVariable = function(aPath) {
     let newSource = new Dbm.react.source.ContextVariableSource();
     newSource.item.path = aPath;
 
     return newSource;
 }
 
-export let blockData = function(aPath) {
+export const item = function(aPath = null) {
+    let fullPath = "item";
+    if(aPath) {
+        fullPath += "." + aPath;
+    }
+    return contextVariable(fullPath);
+}
+
+export const blockData = function(aPath) {
     //METODO: check if blockdata is a source
     return contextVariable("blockData." + aPath);
 }

package/site/translation/TranslationLoader.js

@@ -12,7 +12,7 @@ export default class TranslationLoader extends Dbm.core.BaseObject {
     }
 
     _loadTranslation() {
-        console.log("_loadTranslation");
+        //console.log("_loadTranslation");
 
         let language = this.item.language;
 
@@ -39,8 +39,8 @@ export default class TranslationLoader extends Dbm.core.BaseObject {
     }
 
     _translationLoaded(aLanguage, aLoader) {
-        console.log("_translationLoaded");
-        console.log(aLanguage, aLoader);
+        //console.log("_translationLoaded");
+        //console.log(aLanguage, aLoader);
 
         let data = aLoader.item.data;
         aLanguage.setValue("translations", data);

package/tracking/index.js

@@ -28,7 +28,7 @@ export const setCurrency = function(aCurrency) {
 }
 
 export const addTagManagerTracking = function(aId) {
-    console.log("addTagManagerTracking");
+    //console.log("addTagManagerTracking");
     let tracker = new Dbm.tracking.TagManagerTracker();
     tracker.item.tagManagerId = aId;
     Dbm.getInstance().repository.getItem("trackingController").controller.addTracker(tracker.item);