dbm 1.4.18 → 1.4.19

package/css/form-field.css

@@ -43,4 +43,9 @@
     border: none;
     display: block;
     font-size: var(--standard-body-font, sans-serif);
+}
+
+.number-text-field {
+    text-align: right;
+    width: 80px;
 }

package/css/icons.css

@@ -13,30 +13,12 @@
     height: var(--field-icon-size, 16px);
 }
 
-/*
-.standard-icon-color {
-    filter: url("#standard-icon-color");
-}
-
-.action-icon-color {
-    filter: url("#action-icon-color");
-}
-
-.text-icon-color {
-    filter: url("#text-icon-color");
-}
-
-.white-icon-color {
-    filter: url("#white-icon-color");
-}
-
-.hover-item:hover .remove-action-icon-color,
-.hover-icon.remove-action-icon-color:hover {
-    filter: url("#remove-action-icon-hover-color");
-}
-*/
-
 .drag-handle-icon {
     width: 8px;
     height: 12px;
+}
+
+.big-status-icon {
+    width: var(--big-status-icon-size, 64px);
+    height: var(--big-status-icon-size, 64px);
 }

package/flow/controllers/interaction/SpeechRecognition.js

@@ -0,0 +1,83 @@
+import Dbm from "../../../index.js";
+
+export default class SpeechRecognition extends Dbm.core.BaseObject {
+    _construct() {
+        super._construct();
+
+        this.item.requireProperty("record", false).addUpdate(this._getScopedCallFunctionCommand(this._recordChanged));
+        this.item.requireProperty("startValue", "");
+        this.item.requireProperty("value", "");
+        this.item.requireProperty("language", "en-GB");
+        this.item.requireProperty("state", "waiting");
+
+        let SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+
+        let dictationRecorder = null;
+        if(SpeechRecognition) {
+            dictationRecorder = new SpeechRecognition();
+
+            dictationRecorder.continuous = true;
+            dictationRecorder.interimResults = true;
+
+            dictationRecorder.addEventListener("result", this._callback_result.bind(this));
+            dictationRecorder.addEventListener("error", this._callback_error.bind(this));
+            dictationRecorder.addEventListener("start", this._callback_started.bind(this));
+            dictationRecorder.addEventListener("end", this._callback_ended.bind(this));
+        }
+
+        this.item.requireProperty("dictationRecorder", dictationRecorder);
+        this.item.requireProperty("isAvailable", dictationRecorder ? true : false);
+    }
+
+    _recordChanged() {
+        if(this.item.record) {
+            this.item.dictationRecorder.lang = this.item.language;
+            this.item.startValue = this.item.value;
+            this.item.state = "checkingPermissions";
+            this.item.dictationRecorder.start();
+        }
+        else {
+            this.item.dictationRecorder.stop();
+        }
+    }
+
+    _callback_result(aEvent) {
+        console.log("_callback_result");
+        console.log(aEvent);
+
+
+        let transcripts = [this.item.startValue];
+
+        let currentArray = aEvent.results;
+        let currentArrayLength = currentArray.length;
+
+        for (let i = 0; i < currentArrayLength; i++) {
+            transcripts.push(currentArray[i][0].transcript);
+        }
+
+        console.log(transcripts.join(" "));
+
+        this.item.properties.value.getMostUpstreamProperty().value = transcripts.join(" ");
+
+    }
+
+    _callback_error(aEvent) {
+        console.log("_callback_error");
+        console.log(aEvent);
+    }
+
+    _callback_started(aEvent) {
+        console.log("_callback_started");
+        console.log(aEvent);
+
+        this.item.state = "recording";
+    }
+
+    _callback_ended(aEvent) {
+        console.log("_callback_ended");
+        console.log(aEvent);
+
+        this.item.properties.record.getMostUpstreamProperty().value = false;
+        this.item.state = "waiting";
+    }
+}

package/flow/controllers/interaction/index.js

@@ -1 +1,2 @@
-export {default as MoveElement} from "./MoveElement.js";
+export {default as MoveElement} from "./MoveElement.js";
+export {default as SpeechRecognition} from "./SpeechRecognition.js";

package/graphapi/webclient/index.js

@@ -67,13 +67,14 @@ export const performAction = function(aType, aData, aCallback = null) {
     return request.properties.data;
 }
 
-export const loadRange = function(aSelects, aEncodings, aCommand) {
+export const loadRange = function(aSelects, aEncodings, aCallback = null) {
     let graphApi = Dbm.getRepositoryItem("cachedGraphApi").controller;
         
     let request = graphApi.requestRange(aSelects, aEncodings);
     
-    if(aCommand) {
-        Dbm.flow.runWhenMatched(request.properties.status, Dbm.loading.LoadingStatus.LOADED, aCommand);
+    if(aCallback) {
+        let callbackCommand = Dbm.commands.callFunction(aCallback, [Dbm.core.source.staticObject(request, "items")]);
+        Dbm.flow.runWhenMatched(request.properties.status, Dbm.loading.LoadingStatus.LOADED, callbackCommand);
     }
 
     return request.properties.items;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dbm",
-  "version": "1.4.18",
+  "version": "1.4.19",
   "main": "index.js",
   "type": "module",
   "exports": {

package/react/admin/editor/fields/ArrayField.js

@@ -73,9 +73,9 @@ export default class ArrayField extends Dbm.react.BaseObject {
                 React.createElement("div", {"className": "flex-row-item flex-no-resize"},
                     React.createElement("div", {className: "spacing small"}),
                     React.createElement(Dbm.react.interaction.ConfirmButton, {"command": this._getScopedCallFunctionCommand(this._removeItem, [Dbm.react.source.contextVariable("arrayEditor"), Dbm.react.source.contextVariable("item")])},
-                        React.createElement(Dbm.react.image.Image, {"src": "/assets/img/icons/delete.svg", "className": "background-contain text-row-icon action-icon-color cursor-pointer"}),
+                        React.createElement(Dbm.react.image.Image, {"src": "/assets/img/icons/delete.svg", "className": "background-contain text-row-icon icon-color:action cursor-pointer"}),
                         React.createElement("div", {"data-slot": "confirm", className: "absolute-container cursor-pointer", title: "Click to remove"},
-                            React.createElement(Dbm.react.image.Image, {"src": "/assets/img/icons/delete.svg", "className": "background-contain text-row-icon hover-icon remove-action-icon-color cursor-pointer"}),
+                            React.createElement(Dbm.react.image.Image, {"src": "/assets/img/icons/delete.svg", "className": "background-contain text-row-icon hover-icon icon-color:remove-action cursor-pointer"}),
                             React.createElement("div", {className:"centered-tip-text no-pointer-events"},
                                 "Remove?"
                             )

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

@@ -31,7 +31,7 @@ export default class DraggableHierarchyDisplay extends Dbm.react.BaseObject {
                     React.createElement("div", {className: "flex-row micro-item-spacing"},
                         React.createElement("div", {className: "flex-row-item flex-no-resize cursor-grab", draggable: true},
                             React.createElement("div", {className: "spacing small"}),
-                            React.createElement(Dbm.react.image.Image, {"src": "/assets/img/icons/drag-handle.svg", "className": "background-contain drag-handle-icon action-icon-color"})
+                            React.createElement(Dbm.react.image.Image, {"src": "/assets/img/icons/drag-handle.svg", "className": "background-contain drag-handle-icon icon-color:action"})
                         ),
                         React.createElement("div", {className: "flex-row-item flex-resize"},
                             children
@@ -39,9 +39,9 @@ export default class DraggableHierarchyDisplay extends Dbm.react.BaseObject {
                         React.createElement("div", {className: "flex-row-item flex-no-resize"},
                             React.createElement("div", {className: "spacing small"}),
                             React.createElement(Dbm.react.interaction.ConfirmButton, {"command": this._getScopedCallFunctionCommand(this._remove)},
-                                React.createElement(Dbm.react.image.Image, {"src": "/assets/img/icons/delete.svg", "className": "background-contain text-row-icon action-icon-color cursor-pointer"}),
+                                React.createElement(Dbm.react.image.Image, {"src": "/assets/img/icons/delete.svg", "className": "background-contain text-row-icon icon-color:action cursor-pointer"}),
                                 React.createElement("div", {"data-slot": "confirm", className: "absolute-container cursor-pointer", title: "Click to remove"},
-                                    React.createElement(Dbm.react.image.Image, {"src": "/assets/img/icons/delete.svg", "className": "background-contain text-row-icon hover-icon remove-action-icon-color cursor-pointer"}),
+                                    React.createElement(Dbm.react.image.Image, {"src": "/assets/img/icons/delete.svg", "className": "background-contain text-row-icon hover-icon icon-color:remove-action cursor-pointer"}),
                                     React.createElement("div", {className:"centered-tip-text no-pointer-events"},
                                         "Remove?"
                                     )

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

@@ -112,7 +112,7 @@ export default class MultipleRelations extends Dbm.react.BaseObject {
                                     ),
                                     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(Dbm.react.image.Image, {"src": "/assets/img/icons/remove.svg", "className": "background-contain cursor-pointer icon-color:action field-icon"})
                                         )
                                     )
                                 )

package/react/cookies/CookieOverlayMessage.js

@@ -68,7 +68,7 @@ export default class CookieOverlayMessage extends Dbm.react.BaseObject {
                     Dbm.react.text.translatedText("Take full control over how we use cookies:", "text/settingsLinkDescription")
                 ),
                 React.createElement("div", {"className": "spacing small"}),
-                React.createElement("a", {"href": settingsUrl, className:"custom-styled-link"},
+                React.createElement(Dbm.react.text.Link, {"href": settingsUrl, className:"custom-styled-link"},
                     React.createElement("div", {"className": "secondary-button standard-button-padding text-align-center"},
                         Dbm.react.text.translatedText("Settings", "settings")
                     )
@@ -108,7 +108,7 @@ export default class CookieOverlayMessage extends Dbm.react.BaseObject {
                         Dbm.react.text.translatedText("Take full control over how we use cookies:", "text/settingsLinkDescription")
                     ),
                     React.createElement("div", {"className": "flex-row-item"},
-                        React.createElement("a", {"href": settingsUrl, className:"custom-styled-link"},
+                        React.createElement(Dbm.react.text.Link, {"href": settingsUrl, className:"custom-styled-link"},
                             React.createElement("div", {"className": "cookie-settings-link"}, 
                                 Dbm.react.text.translatedText("Settings", "settings")
                             )

package/react/svg/AddGlobalFilterClasses.js

@@ -1,34 +1,16 @@
 import Dbm from "../../index.js";
 
-export default class GlobalFilters extends Dbm.core.BaseObject {
+export default class AddGlobalFilterClasses extends Dbm.utils.css.AddStyles {
+
     _construct() {
+        //METODO: this does not need to be it's own class
         super._construct();
 
-        this._styleTag = null;
+        this.createHeadElement();
 
         let colorFilters = Dbm.getRepositoryItem("globalSvg");
         let filtersProperty = colorFilters.requireProperty("filters", []);
 
-        filtersProperty.addUpdate(this._getScopedCallFunctionCommand(this._updateStyles));
-        this._updateStyles();
-    }
-
-    _updateStyles() {
-        console.log("_updateStyles");
-
-        let colorFilters = Dbm.getRepositoryItem("globalSvg");
-
-        if(colorFilters.filters.length) {
-
-            if(!this._styleTag) {
-                this._styleTag = document.createElement("style");
-                document.head.appendChild(this._styleTag);
-            }
-
-            let declarations = Dbm.utils.ArrayFunctions.mapField(colorFilters.filters, "classDeclaration");
-            this._styleTag.innerHTML = declarations.join("\n");
-            
-            
-        }
+        this.item.properties.styles.connectInput(filtersProperty);
     }
 }

package/react/svg/index.js

@@ -12,8 +12,14 @@ export const addGlobalRgbColorFilter = function(aName, aR, aG, aB) {
     colorFilters.requireProperty("filters", []);
 
     let item = Dbm.getRepositoryItem("globalSvg/filters/" + aName);
-    item.setValue("element", React.createElement(Dbm.react.svg.MatrixFilter, {"id": aName, "matrix": Dbm.utils.svg.ColorMatrixFunctions.floodColor(aR, aG, aB)}));
-    item.setValue("classDeclaration", "." + aName + "{filter:url(\"#" + aName + "\")}");
+    let filterId = aName + "-color-filter";
+    item.setValue("element", React.createElement(Dbm.react.svg.MatrixFilter, {"id": filterId, "matrix": Dbm.utils.svg.ColorMatrixFunctions.floodColor(aR, aG, aB)}));
+    let selectors = [
+        "." + CSS.escape("icon-color:" + aName),
+        "." + CSS.escape("group(icon-color:" + aName + ")") + " " + "." + CSS.escape("use(icon-color)"),
+    ];
+
+    item.setValue("cssDeclaration", selectors.join(", ") + "{filter:url(\"#" + filterId + "\")}");
 
     let filters = [].concat(colorFilters.filters);
     filters.push(item);
@@ -51,7 +57,7 @@ export const createGlobalHexBlendFilter = function(aName, aColor, aBlendMode = "
 
     let item = Dbm.getRepositoryItem("globalSvg/filters/" + aName);
     item.setValue("element", React.createElement(Dbm.react.svg.BlendColorFilter, {"id": aName, "color": aColor, "blendMode": aBlendMode, "saturation": aSaturation, "min": aMin, "max": aMax}));
-    item.setValue("classDeclaration", "." + aName + "{filter:url(\"#" + aName + "\")}");
+    item.setValue("cssDeclaration", "." + aName + "{filter:url(\"#" + aName + "\")}");
 
     let filters = [].concat(colorFilters.filters);
     filters.push(item);

package/utils/css/AddStyles.js

@@ -0,0 +1,60 @@
+import Dbm from "../../index.js";
+
+export default class AddStyles extends Dbm.core.BaseObject {
+    _construct() {
+        super._construct();
+
+        this._updateCommand = this._getScopedCallFunctionCommand(this.updateStyles);
+
+        this.item.requireProperty("element", null).addUpdate(this._updateCommand);
+        this.item.requireProperty("styles", []).addUpdate(this._updateCommand);
+    }
+
+    setElement(aElement) {
+        this.item.element = aElement;
+
+        return this;
+    }
+
+    createHeadElement() {
+        let element = document.createElement("style");
+        document.head.appendChild(element);
+        this.setElement(element);
+
+        return this;
+    }
+
+    updateStyles() {
+
+        let declarations = Dbm.utils.ArrayFunctions.mapField(this.item.styles, "cssDeclaration");
+
+        if(this.item.element) {
+            this.item.element.innerHTML = declarations.join("\n");
+        }
+    }
+
+    createStyle(aName, aDeclaration) {
+        let styleItem = new Dbm.repository.Item();
+        styleItem.requireProperty("name", aName);
+        styleItem.requireProperty("cssDeclaration", "." + CSS.escape(aName) + "{" + aDeclaration + "}").addUpdate(this._updateCommand);
+
+        this.item.addToArray("styles", styleItem);
+
+        return styleItem;
+    }
+
+    createGroupedStyle(aGroupName, aName, aDeclaration) {
+        let styleItem = new Dbm.repository.Item();
+        styleItem.requireProperty("groupName", aGroupName);
+        styleItem.requireProperty("name", aName);
+        let selectors = [
+            "." + CSS.escape(aGroupName + ":" + aName),
+            "." + CSS.escape("group(" + aGroupName + ":" + aName + ")") + " " + "." + CSS.escape("use(" + aGroupName + ")")
+        ];
+        styleItem.requireProperty("cssDeclaration", selectors.join(", ") + "{" + aDeclaration + "}").addUpdate(this._updateCommand);
+
+        this.item.addToArray("styles", styleItem);
+
+        return styleItem;
+    }
+}

package/utils/css/index.js

@@ -0,0 +1,41 @@
+import Dbm from "../../index.js";
+
+export {default as AddStyles} from "./AddStyles.js";
+
+export const getGlobalCss = function() {
+
+    let globalStyling = Dbm.repository.getControllerIfExists("globalCss");
+    
+    if(!globalStyling) {
+        globalStyling = new Dbm.utils.css.AddStyles();
+        globalStyling.item.register("globalCss");
+    }
+    
+    return globalStyling;
+}
+
+export const setupGlobalColoring = function() {
+    let globalStyling = getGlobalCss();
+    globalStyling.createHeadElement();
+    globalStyling.item.element.id = "dbm-global-styles";
+
+    let colorFilters = Dbm.getRepositoryItem("globalSvg");
+    let filtersProperty = colorFilters.requireProperty("filters", []);
+    
+    let globalFilterStyling = new Dbm.utils.css.AddStyles();
+    globalFilterStyling.item.properties.styles.connectInput(filtersProperty);
+    globalFilterStyling.createHeadElement();
+    globalFilterStyling.item.element.id = "dbm-global-filter-styles";
+}
+
+export const addGlobalHexColor = function(aName, aColor) {
+    let globalStyling = getGlobalCss();
+
+    //METODO: add css variable
+
+    globalStyling.createGroupedStyle("text-color", aName, "color: " + aColor);
+    globalStyling.createGroupedStyle("background-color", aName, "background-color: " + aColor);
+    globalStyling.createGroupedStyle("border-color", aName, "border-color: " + aColor);
+
+    Dbm.react.svg.addGlobalHexColorFilter(aName, aColor);
+}

package/utils/index.js

@@ -15,4 +15,5 @@ export {default as KeywordReplace} from "./KeywordReplace.js";
 export {default as NamedArray} from "./NamedArray.js";
 
 export * as thirdparty from "./thirdparty/index.js";
-export * as svg from "./svg/index.js";
+export * as svg from "./svg/index.js";
+export * as css from "./css/index.js";