dbm 1.2.9 → 1.4.1

package/react/image/gallery/ImageGallerySection.js

@@ -0,0 +1,220 @@
+import Dbm from "../../../index.js";
+import React from "react";
+
+export default class ImageGallerySection extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        let images = this.getPropValue("images");
+        console.log("images>>>>>", images);
+    }
+
+    _removedUsedProps(aProps) {
+        delete aProps["images"];
+    }
+
+    createLayout2(aImages, aSpacing = 20, aWidth = 800) {
+
+        let width1 = aImages[0].width;
+        let width2 = aImages[1].width;
+
+        let height1 = aImages[0].height;
+        let height2 = aImages[1].height;
+
+        let minHeight = Math.min(height1, height2);
+        let heightRatio1 = (minHeight / height1);
+        let heightRatio2 = (minHeight / height2);
+
+        let scaledWidth1 = width1*heightRatio1;
+        let scaledWidth2 = width2*heightRatio2;
+
+        let totalWidth = (scaledWidth1+scaledWidth2);
+        let widthRatio1 = (scaledWidth1/totalWidth);
+        let widthRatio2 = (scaledWidth2/totalWidth);
+
+        let newWidth1 = (aWidth-aSpacing)*widthRatio1;
+        let newWidth2 = (aWidth-aSpacing)*widthRatio2;
+
+        let newHeight1 = (height1/width1)*newWidth1;
+        let newHeight2 = (height2/width2)*newWidth2;
+
+        console.log(newWidth1, newHeight1, newWidth2, newHeight2);
+
+        let layout = React.createElement("div", {className: "flex-row"},
+            React.createElement("div", {className: "flex-row-item", style: {"width": newWidth1, "height": newHeight1}},
+                React.createElement(Dbm.react.image.Image, {"src": aImages[0].url, "className": "full-size background-cover"})
+            ),
+            React.createElement("div", {className: "flex-row-item", style: {"width": aSpacing}}),
+            React.createElement("div", {className: "flex-row-item", style: {"width": newWidth2, "height": newHeight2}},
+                React.createElement(Dbm.react.image.Image, {"src": aImages[1].url, "className": "full-size background-cover"})
+            ),
+        );
+
+        return layout;
+    }
+
+    createLayout3(aImages, aSpacing = 20, aWidth = 800) {
+
+        let width1 = aImages[0].width;
+        let width2 = aImages[1].width;
+        let width3 = aImages[2].width;
+
+        let height1 = aImages[0].height;
+        let height2 = aImages[1].height;
+        let height3 = aImages[2].height;
+
+        let minHeight = Math.min(height1, height2, height3);
+        let heightRatio1 = (minHeight / height1);
+        let heightRatio2 = (minHeight / height2);
+        let heightRatio3 = (minHeight / height3);
+
+        let scaledWidth1 = width1*heightRatio1;
+        let scaledWidth2 = width2*heightRatio2;
+        let scaledWidth3 = width3*heightRatio3;
+
+        let totalWidth = (scaledWidth1+scaledWidth2+scaledWidth3);
+        let widthRatio1 = (scaledWidth1/totalWidth);
+        let widthRatio2 = (scaledWidth2/totalWidth);
+        let widthRatio3 = (scaledWidth3/totalWidth);
+
+        let newWidth1 = (aWidth-2*aSpacing)*widthRatio1;
+        let newWidth2 = (aWidth-2*aSpacing)*widthRatio2;
+        let newWidth3 = (aWidth-2*aSpacing)*widthRatio3;
+
+        let newHeight1 = (height1/width1)*newWidth1;
+        let newHeight2 = (height2/width2)*newWidth2;
+        let newHeight3 = (height3/width3)*newWidth3;
+
+        console.log(newWidth1, newHeight1, newWidth2, newHeight2, newWidth3, newHeight3);
+
+        let layout = React.createElement("div", {className: "flex-row"},
+            React.createElement("div", {className: "flex-row-item", style: {"width": newWidth1, "height": newHeight1}},
+                React.createElement(Dbm.react.image.Image, {"src": aImages[0].url, "className": "full-size background-cover"})
+            ),
+            React.createElement("div", {className: "flex-row-item", style: {"width": aSpacing}}),
+            React.createElement("div", {className: "flex-row-item", style: {"width": newWidth2, "height": newHeight2}},
+                React.createElement(Dbm.react.image.Image, {"src": aImages[1].url, "className": "full-size background-cover"})
+            ),
+            React.createElement("div", {className: "flex-row-item", style: {"width": aSpacing}}),
+            React.createElement("div", {className: "flex-row-item", style: {"width": newWidth3, "height": newHeight3}},
+                React.createElement(Dbm.react.image.Image, {"src": aImages[2].url, "className": "full-size background-cover"})
+            ),
+        );
+
+        return layout;
+    }
+
+    createLayout4(aImages, aSpacing = 20, aWidth = 800) {
+        let width1 = aImages[0].width;
+        let width2 = aImages[1].width;
+        let width3 = aImages[2].width;
+        let width4 = aImages[3].width;
+
+        let height1 = aImages[0].height;
+        let height2 = aImages[1].height;
+        let height3 = aImages[2].height;
+        let height4 = aImages[3].height;
+
+        let innerP = (height3/width3)/((height2/width2)+(height3/width3));
+
+        let fullWidth = (aWidth-aSpacing);
+        let p = (fullWidth*(height1/width1)-aSpacing+innerP*aSpacing*(height2/width2))/(fullWidth*((height4/width4)+innerP*(height2/width2)+(height1/width1)))
+
+        let innerWidth = fullWidth*p-aSpacing;
+
+        let newWidth1 = (1-p)*fullWidth;
+        let newWidth2 = (innerWidth)*innerP;
+        let newWidth3 = (innerWidth)*(1-innerP);
+        let newWidth4 = (p)*fullWidth;
+
+        let newHeight1 = (height1/width1)*newWidth1;
+        let newHeight2 = (height2/width2)*newWidth2;
+        let newHeight3 = (height3/width3)*newWidth3;
+        let newHeight4 = (height4/width4)*newWidth4;
+
+        let layout = React.createElement("div", {className: "flex-row"},
+            React.createElement("div", {className: "flex-row-item", style: {"width": newWidth1, "height": newHeight1}},
+                React.createElement(Dbm.react.image.Image, {"src": aImages[0].url, "className": "full-size background-cover"})
+            ),
+            React.createElement("div", {className: "flex-row-item", style: {"width": aSpacing}}),
+            React.createElement("div", {className: "flex-row-item"},
+                React.createElement("div", {className: "flex-row"},
+                    React.createElement("div", {className: "flex-row-item", style: {"width": newWidth2, "height": newHeight2}},
+                        React.createElement(Dbm.react.image.Image, {"src": aImages[1].url, "className": "full-size background-cover"})
+                    ),
+                    React.createElement("div", {className: "flex-row-item", style: {"width": aSpacing}}),
+                    React.createElement("div", {className: "flex-row-item", style: {"width": newWidth3, "height": newHeight3}},
+                        React.createElement(Dbm.react.image.Image, {"src": aImages[2].url, "className": "full-size background-cover"})
+                    ),
+                ),
+                React.createElement("div", {style: {"height": aSpacing}}),
+                React.createElement("div", {className: "flex-row-item", style: {"width": newWidth4, "height": newHeight4}},
+                    React.createElement(Dbm.react.image.Image, {"src": aImages[3].url, "className": "full-size background-cover"})
+                ),
+            ),
+        );
+
+        return layout;
+    }
+
+    _renderMainElement() {
+
+        let images = this.getPropValue("images");
+        let width = this.getPropValueWithDefault("width", 800);
+        let spacing = this.getPropValueWithDefault("spacing", 20);
+
+        let layout = null;
+        switch(images.length) {
+            case 2:
+                layout = this.createLayout2(images, spacing, width);
+                break;
+            case 3:
+                layout = this.createLayout3(images, spacing, width);
+                break;
+            case 4:
+                layout = this.createLayout4(images, spacing, width);
+                break;
+        }
+
+        return this._createMainElement("div", {},
+            layout
+        );
+    }
+
+    /*
+    createLayout4(aImages, aSpacing = 20, aWidth = 800) {
+        let width1 = aImages[0].width;
+        let width2 = aImages[1].width;
+        let width3 = aImages[2].width;
+        let width4 = aImages[3].width;
+
+        let height1 = aImages[0].height;
+        let height2 = aImages[1].height;
+        let height3 = aImages[2].height;
+        let height4 = aImages[3].height;
+
+        let innerP = (height2/width2)/((height1/width1)+(height2/width2));
+        let innerWidth = aWidth-aSpacing;
+
+        let newWidth1 = (innerWidth)*innerP;
+        let newWidth2 = (innerWidth)*(1-innerP);
+
+        let newHeight1 = (height1/width1)*newWidth1;
+        let newHeight2 = (height2/width2)*newWidth2;
+
+        console.log(innerP);
+
+        let layout = React.createElement("div", {className: "flex-row"},
+            React.createElement("div", {className: "flex-row-item", style: {"width": newWidth1, "height": newHeight1}},
+                React.createElement(Dbm.react.image.Image, {"src": aImages[0].url, "className": "full-size background-cover"})
+            ),
+            React.createElement("div", {className: "flex-row-item", style: {"width": aSpacing}}),
+            React.createElement("div", {className: "flex-row-item", style: {"width": newWidth2, "height": newHeight2}},
+                React.createElement(Dbm.react.image.Image, {"src": aImages[1].url, "className": "full-size background-cover"})
+            ),
+        );
+
+        return layout;
+    }
+        */
+}

package/react/image/gallery/index.js

@@ -0,0 +1,2 @@
+export {default as ImageGallery} from "./ImageGallery.js";
+export {default as ImageGallerySection} from "./ImageGallerySection.js";

package/react/image/index.js

@@ -2,4 +2,6 @@ export {default as Image} from "./Image.js";
 export {default as WidthScaledImage} from "./WidthScaledImage.js";
 export {default as CoverScaledImage} from "./CoverScaledImage.js";
 export {default as ContainScaledImage} from "./ContainScaledImage.js";
-export {default as LocalImage} from "./LocalImage.js";
+export {default as LocalImage} from "./LocalImage.js";
+
+export * as gallery from "./gallery/index.js";

package/react/index.js

@@ -16,3 +16,5 @@ export * as login from "./login/index.js";
 export * as image from "./image/index.js";
 export * as animation from "./animation/index.js";
 export * as interaction from "./interaction/index.js";
+export * as thirdparty from "./thirdparty/index.js";
+export * as svg from "./svg/index.js";

package/react/svg/GlobalFilters.js

@@ -0,0 +1,22 @@
+import Dbm from "../../index.js";
+import React from "react";
+
+export default class GlobalFilters extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _renderMainElement() {
+
+        let colorFilters = Dbm.getRepositoryItem("globalSvg");
+        colorFilters.requireProperty("filters", []);
+
+        return this._createMainElement("svg", {xmlns: "http://www.w3.org/2000/svg", style: {display: "none"}},
+            React.createElement("defs", null, 
+                React.createElement(Dbm.react.area.List, {items: colorFilters.properties.filters},
+                    React.createElement(Dbm.react.area.InsertElement, {element: Dbm.react.source.item("element")})
+                )
+            )
+        );
+    }
+}

package/react/svg/MatrixFilter.js

@@ -0,0 +1,25 @@
+import Dbm from "../../index.js";
+import React from "react";
+
+export default class MatrixFilter extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _removedUsedProps(aProps) {
+        delete aProps["id"];
+        delete aProps["matrix"];
+    }
+
+    _renderMainElement() {
+
+        let id = this.getPropValue("id");
+        let matrix = this.getPropValue("matrix");
+
+        console.log(id);
+
+        return this._createMainElement("filter", {id: id},
+            React.createElement("feColorMatrix", {type: "matrix", values: matrix})
+        );
+    }
+}

package/react/svg/index.js

@@ -0,0 +1,43 @@
+import Dbm from "../../index.js";
+import React from "react";
+
+export {default as GlobalFilters} from "./GlobalFilters.js";
+export {default as MatrixFilter} from "./MatrixFilter.js";
+
+export const addGlobalRgbColorFilter = function(aName, aR, aG, aB) {
+
+    let colorFilters = Dbm.getRepositoryItem("globalSvg");
+    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)}));
+
+    let filters = [].concat(colorFilters.filters);
+    filters.push(item);
+    colorFilters.filters = filters;
+    
+    return item;
+}
+
+export const addGlobalHexColorFilter = function(aName, aColor) {
+    let value;
+
+    if (typeof aColor === "number") {
+        value = aColor;
+    }
+    else {
+        let hex = aColor.replace(/^#/, '');
+
+        if(hex.length === 3) {
+            hex = hex.split('').map(c => c + c).join('');
+        }
+
+        value = parseInt(hex, 16);
+    }
+    
+    let r = (value >> 16) & 255;
+    let g = (value >> 8) & 255;
+    let b = value & 255;
+
+    return addGlobalRgbColorFilter(aName, r, g, b)
+}

package/react/thirdparty/index.js

@@ -0,0 +1,2 @@
+export * as tinymce from "./tinymce/index.js";
+export * as vimeo from "./vimeo/index.js";

package/react/thirdparty/tinymce/Editor.js

@@ -0,0 +1,106 @@
+import React from "react";
+import Dbm from "../../../index.js";
+
+export default class Editor extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        this._element = document.createElement("div");
+        this._editor = null;
+
+        let valueProperty = this.getDynamicPropWithoutState("value", "");
+        Dbm.flow.addUpdateCommand(valueProperty, Dbm.commands.callFunction(this._valueUpdated.bind(this)));
+
+        this._callback_changeBound = this._callback_change.bind(this);
+
+        let tinymce = Dbm.getRepositoryItem("tinymce");
+        let version = tinymce.version ? tinymce.version : "8";
+
+        let scriptLoader = Dbm.loading.loadScript("https://cdn.tiny.cloud/1/" + tinymce.key + "/tinymce/" + version + "/tinymce.min.js");
+        Dbm.flow.runWhenMatched(scriptLoader.item.properties.status, Dbm.loading.LoadingStatus.LOADED, Dbm.commands.callFunction(this._scriptLoaded.bind(this)));
+    }
+
+    getSettings() {
+        let settings = {
+            menubar: false,
+            statusbar: false,
+
+            convert_urls: false,
+            relative_urls: false,
+            remove_script_host: false,
+            verify_url: false,
+
+            plugins: "link image code autoresize advlist lists",
+			toolbar: "undo redo | styleselect | bold italic | link | alignleft aligncenter alignright | numlist bullist | code removeformat | fontsizeselect"
+        };
+
+        return settings;
+    }
+
+    _scriptLoaded() {
+
+        let settings = this.getSettings();
+
+        settings["target"] = this._element;
+        settings["setup"] = this._callback_setup.bind(this);
+
+        window.tinymce.init(settings);
+    }
+
+    _callback_setup(aEditor) {
+        this._editor = aEditor;
+
+        this._editor.on('change', this._callback_change.bind(this));
+        this._editor.on('input', this._callback_change.bind(this));
+        this._editor.on('init', this._callback_init.bind(this));
+    }
+
+    _callback_init() {
+        let value = this.getDynamicProp("value").value;
+        if(value) {
+            this._editor.setContent(value);
+        }
+        
+    }
+
+    _callback_change() {
+        //console.log("_callback_change");
+
+        let value = this._editor.getContent();
+
+        this.getDynamicProp("value").getMostUpstreamProperty().setValue(value);
+    }
+
+    _valueUpdated() {
+        //console.log("_valueUpdated");
+        let value = this.getPropValue("value");
+
+        if(this._editor) {
+            let currentValue = this._editor.getContent();
+
+            if(value !== currentValue && value !== undefined && value !== null) {
+                this._editor.setContent(value);
+            }
+        }
+    }
+
+    componentDidMount() {
+        //console.log("componentDidMount");
+        let parentElement = this.item.holder;
+        parentElement.appendChild(this._element);
+    }
+
+    componentDidUpdate() {
+        //console.log("componentDidUpdate");
+        let parentElement = this.item.holder;
+        parentElement.appendChild(this._element);
+    }
+
+    _renderMainElement() {
+
+        return this._createMainElement("div", {},
+            React.createElement("div", {"ref": this.createRef("holder")})
+        );
+    }
+}
+

package/react/thirdparty/tinymce/InlineEditor.js

@@ -0,0 +1,28 @@
+import React from "react";
+import Dbm from "../../../index.js";
+
+export default class InlineEditor extends Dbm.react.thirdparty.tinymce.Editor {
+    _construct() {
+        super._construct();
+    }
+
+    getSettings() {
+        let settings = super.getSettings();
+        
+        let additionalSettings = {
+            inline: true,
+            toolbar: false,
+            plugins: 'link quickbars',
+            quickbars_selection_toolbar: 'bold italic | link',
+            quickbars_insert_toolbar: false,
+        };
+
+        settings = {
+            ...settings,
+            ...additionalSettings
+        }
+
+        return settings;
+    }
+}
+

package/react/thirdparty/tinymce/index.js

@@ -0,0 +1,2 @@
+export {default as Editor} from "./Editor.js";
+export {default as InlineEditor} from "./InlineEditor.js";

package/react/thirdparty/vimeo/Player.js

@@ -0,0 +1,65 @@
+import React from "react";
+import Dbm from "../../../index.js";
+
+export default class Player extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        this._element = document.createElement("div");
+        this._element.classList.add("vimeo-player");
+
+        let scriptLoader = Dbm.loading.loadScript("https://player.vimeo.com/api/player.js");
+        Dbm.flow.runWhenMatched(scriptLoader.item.properties.status, Dbm.loading.LoadingStatus.LOADED, Dbm.commands.callFunction(this._scriptLoaded.bind(this)));
+    }
+
+    _removedUsedProps(aProps) {
+        delete aProps["video"];
+        delete aProps["responsive"];
+    }
+
+    getSettings() {
+
+        let data = {
+            responsive: this.getPropValueWithDefault("responsive", false),
+            title: false,
+            byline: false,
+            portrait: false,
+            color: "000000"
+        };
+
+        return data;
+    }
+
+    _scriptLoaded() {
+
+        let video = this.getPropValue("video");
+
+        let data = this.getSettings();
+
+        if(typeof video === "number" || (typeof video === "string" && video.trim() !== "" && !isNaN(video))) {
+            data["id"] = video;
+        }
+        else {
+            data["url"] = video;
+        }
+
+        let player = new window.Vimeo.Player(this._element, data);
+    }
+
+    componentDidMount() {
+        //console.log("componentDidMount");
+        let parentElement = this.item.holder;
+        parentElement.appendChild(this._element);
+    }
+
+    componentDidUpdate() {
+        //console.log("componentDidUpdate");
+        let parentElement = this.item.holder;
+        parentElement.appendChild(this._element);
+    }
+
+    _renderMainElement() {
+        return this._createMainElement("div", {"className": "vimeo-player-holder", "ref": this.createRef("holder")});
+    }
+}
+

package/react/thirdparty/vimeo/index.js

@@ -0,0 +1 @@
+export {default as Player} from "./Player.js";

package/repository/Item.js

@@ -71,4 +71,32 @@ export default class Item extends Dbm.core.LifeCycleObject {
         }
         return this.properties[aName];
     }
+
+    addToArray(aName, aValue) {
+        let currentArray = this[aName];
+        if(!currentArray) {
+            this.setValue(aName, [aValue]);
+        }
+        else {
+            currentArray = [].concat(currentArray);
+            currentArray.push(aValue);
+            this[aName] = currentArray;
+        }
+
+        return this;
+    }
+
+    removeFromArray(aName, aValue) {
+        let currentArray = this[aName];
+        if(currentArray) {
+            let index = currentArray.indexOf(aValue);
+            if(index !== -1) {
+                currentArray = [].concat(currentArray);
+                currentArray.splice(index, 1);
+                this[aName] = currentArray;
+            }
+        }
+
+        return this;
+    }
 }

package/utils/ArrayFunctions.js

@@ -391,5 +391,74 @@ export const scoreItems = function(aArray, aScoreFunction) {
 
     sortOnField(returnArray, "value");
 
+    return returnArray;
+}
+
+export const splitArray = function(aArray, aGroupSize) {
+    let returnArray = [];
+    let currentGroup = null;
+    
+    let currentArray = aArray;
+    let currentArrayLength = currentArray.length;
+    for(let i = 0; i < currentArrayLength; i++) {
+        if(i % aGroupSize === 0) {
+            currentGroup = [];
+            returnArray.push(currentGroup);
+        }
+        currentGroup.push(currentArray[i]);
+    }
+    
+    return returnArray;
+}
+
+export const mapArrayToObject = function(aArray, aKeyField, aDataField = null, aKeyPrefix = "") {
+		
+    let returnObject = {};
+    
+    let currentArray = aArray;
+    let currentArrayLength = currentArray.length;
+    for(let i = 0; i < currentArrayLength; i++) {
+        let currentArrayEntry = currentArray[i];
+        let key = aKeyPrefix + Dbm.objectPath(currentArrayEntry, aKeyField);
+        let data = aDataField ? Dbm.objectPath(currentArrayEntry, aDataField) : currentArrayEntry;
+        
+        returnObject[key] = data;
+    }
+    
+    return returnObject;
+}
+	
+export const mapObjectToArray = function(aObject, aKeyField, aDataField = null, aKeyPrefix = "") {
+    let returnArray = [];
+    
+    for(let objectName in aObject) {
+        let currentEntry = aObject[objectName];
+        let newObject = {};
+        
+        if(aDataField !== null) {
+            newObject[aDataField] = currentEntry;
+        }
+        else {
+            for(let objectName2 in currentEntry) {
+                newObject[objectName2] = currentEntry[objectName2];
+            }
+        }
+        if(aKeyField) {
+            newObject[aKeyField] = objectName.substring(aKeyPrefix.length, objectName.length);
+        }
+        
+        returnArray.push(newObject);
+    }
+    
+    return returnArray;
+}
+	
+export const mapObjectToArrayWithoutKey = function(aObject) {
+    let returnArray = [];
+    
+    for(let objectName in aObject) {
+        returnArray.push(aObject[objectName]);
+    }
+    
     return returnArray;
 }

package/utils/StringFunctions.js

@@ -37,4 +37,15 @@ export const convertToCamelCase = function(aText) {
     }
     
     return returnText;
-};
+};
+
+export const getMatchingPrefix = function(aString1, aString2) {
+    let maxLength = Math.min(aString1.length, aString2.length);
+    let i = 0;
+
+    while(i < maxLength && aString1[i] === aString2[i]) {
+        i++;
+    }
+
+    return aString1.slice(0, i);
+}

package/utils/index.js

@@ -9,4 +9,5 @@ export * as LevenshteinDistance from "./LevenshteinDistance.js";
 export {default as MultidimensionalArrayHolder} from "./MultidimensionalArrayHolder.js";
 export {default as ArrayOperationResult} from "./ArrayOperationResult.js";
 
-export * as thirdparty from "./thirdparty/index.js";
+export * as thirdparty from "./thirdparty/index.js";
+export * as svg from "./svg/index.js";