dbm 1.2.0 → 1.2.1

package/core/source/FirstSource.js

@@ -0,0 +1,36 @@
+import Dbm from "../../index.js";
+
+export default class FirstSource extends Dbm.core.source.SourceBaseObject {
+	
+    _construct() {
+        super._construct();
+
+        this.item.setValue("defaultValue", null);
+        this.item.setValue("sources", []);
+    }
+	
+	getSource(aFromObject, aEventData = null) {
+        //console.log("getSource");
+        
+        let currentArray = this.item.sources;
+        let currentArrayLength = currentArray.length;
+        for(let i = 0; i < currentArrayLength; i++) {
+            let currentSource = currentArray[i];
+
+            let value = currentSource.getSource(aFromObject, aEventData);
+            if(this._log) {
+                console.log("Source first>>>>>", i, currentSource, value);
+            }
+
+            if(value) {
+                return value;
+            }
+        }
+
+        if(this._log) {
+            console.log("Source first>>>>> default", this.item.defaultValue);
+        }
+        
+        return this.item.defaultValue;
+    }
+}

package/core/source/index.js

@@ -4,6 +4,7 @@ export {default as SourceBaseObject} from "./SourceBaseObject.js";
 export {default as EventSource} from "./EventSource.js";
 export {default as FromObject} from "./FromObject.js";
 export {default as StaticSource} from "./StaticSource.js";
+export {default as FirstSource} from "./FirstSource.js";
 
 export const event = function(aPath = null) {
 	let newSource = new Dbm.core.source.EventSource();
@@ -29,3 +30,23 @@ export const staticObject = function(aObject, aPath = null) {
 	
 	return newSource;
 }
+
+export const first = function(...aSources) {
+	let newSource = new Dbm.core.source.FirstSource();
+	
+	newSource.item.sources = [].concat(aSources);
+	
+	return newSource;
+}
+
+export const firstWithDefault = function(...aSourcesAndDefault) {
+	let newSource = new Dbm.core.source.FirstSource();
+
+	let sources = [].concat(aSourcesAndDefault);
+	let defaultValue = sources.pop();
+	
+	newSource.item.sources = sources;
+	newSource.item.properties.defaultValue.setOrConnect(defaultValue);
+	
+	return newSource;
+}

package/dbm.js

@@ -85,6 +85,14 @@ export const setAtObjectPath = function(aObject, aPath, aValue) {
     }
 }
 
+export const getRepositoryItem = function(aName) {
+    return getInstance().repository.getItem(aName);
+}
+
+export const getGraphApi = function() {
+    return getRepositoryItem("graphApi").controller;
+}
+
 export * as utils from "./utils/index.js";
 export * as core from "./core/index.js";
 export * as loading from "./loading/index.js";

package/flow/controllers/index.js

@@ -1,4 +1,5 @@
 export * as select from "./select/index.js";
 export * as edit from "./edit/index.js";
 export * as transform from "./transform/index.js";
-export * as interaction from "./interaction/index.js";
+export * as interaction from "./interaction/index.js";
+export * as timing from "./timing/index.js";

package/flow/controllers/timing/IntervalStep.js

@@ -0,0 +1,60 @@
+import Dbm from "../../../index.js";
+
+export default class IntervalStep extends Dbm.core.BaseObject {
+    _construct() {
+        super._construct();
+
+        this.item.requireProperty("value", 0);
+        this.item.requireProperty("step", 1);
+        Dbm.flow.addUpdateCommand(this.item.requireProperty("interval", 1), Dbm.commands.callFunction(this.resetInterval.bind(this)));
+
+        this._started = false;
+        this._intervalId = -1;
+        this._callback_nextStepBound = this._callback_nextStep.bind(this);
+    }
+
+    start() {
+        this._started = true;
+        this._startInterval();
+
+        return this;
+    }
+
+    stop() {
+        this._started = false;
+        this._stopInterval();
+
+        return this;
+    }
+
+    setValue(aValue) {
+        this.item.properties.value.getMostUpstreamProperty().value = aValue;
+        this.resetInterval();
+
+        return this;
+    }
+
+    _callback_nextStep() {
+        this.item.properties.value.getMostUpstreamProperty().value += this.item.step;
+    }
+
+    _startInterval() {
+        if(this._intervalId === -1) {
+            this._intervalId = setInterval(this._callback_nextStepBound, this.item.interval*1000);
+        }
+    }
+
+    _stopInterval() {
+        if(this._intervalId !== -1) {
+            clearInterval(this._intervalId);
+            this._intervalId = -1;
+        }
+    }
+
+    resetInterval() {
+        if(this._started) {
+            this._stopInterval();
+            this._startInterval();
+        }
+    }
+}

package/flow/controllers/timing/index.js

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

package/flow/updatefunctions/animation/AnimateValue.js

@@ -0,0 +1,39 @@
+import Dbm from "../../../index.js";
+
+export default class AnimateValue extends Dbm.flow.FlowUpdateFunction {
+
+    _construct() {
+        super._construct();
+
+		this._animationInputValue = new Dbm.flow.FlowProperty();
+		this._animationInputValue.value = 0;
+		Dbm.flow.addUpdateCommand(this._animationInputValue, Dbm.commands.callFunction(this._updateAnimation.bind(this)));
+
+		this._animatedValue = new Dbm.flow.FlowProperty();
+		this._animatedValue.value = 0;
+		Dbm.flow.addUpdateCommand(this._animatedValue, Dbm.commands.callFunction(this._animationUpdated.bind(this)));
+        
+        this.input.register("value", 0);
+		this._animationInputValue.connectInput(this.input.properties.value);
+		this.input.register("time", 0.5);
+		this.input.register("easing", null);
+		this.input.register("delay", 0);
+		this.output.register("value", 0);
+    }
+
+    _update() {
+        //console.log("_update");
+
+        //this._animationInputValue.value = this.input.value;
+    }
+
+	_updateAnimation() {
+		//console.log("_updateAnimation");
+		this._animatedValue.animateValue(this._animationInputValue.value, this.input.time, this.input.delay, this.input.easing);
+	}
+
+	_animationUpdated() {
+		//console.log("_animationUpdated");
+		this.output.properties.value._internal_setValueInFlowOutsideOfUpdate(this._animatedValue.value);
+	}
+}

package/flow/updatefunctions/animation/index.js

@@ -0,0 +1,13 @@
+import Dbm from "../../../index.js";
+
+export {default as AnimateValue} from "./AnimateValue.js";
+
+export let animateValue = function(aValue = 0, aTime = 0.5, aDelay = 0, aEasing = null) {
+    let updateFunction = new Dbm.flow.updatefunctions.animation.AnimateValue();
+    updateFunction.input.properties.value.setOrConnect(aValue);
+    updateFunction.input.properties.time.setOrConnect(aTime);
+    updateFunction.input.properties.delay.setOrConnect(aDelay);
+    updateFunction.input.properties.easing.setOrConnect(aEasing);
+
+    return updateFunction;
+}

package/flow/updatefunctions/index.js

@@ -3,4 +3,5 @@ export * as debug from "./debug/index.js";
 export * as react from "./react/index.js";
 export * as basic from "./basic/index.js";
 export * as dom from "./dom/index.js";
+export * as animation from "./animation/index.js";
 export * as thirdparty from "./thirdparty/index.js";

package/flow/updatefunctions/logic/FloatMod.js

@@ -0,0 +1,26 @@
+import Dbm from "../../../index.js";
+
+export default class FloatMod extends Dbm.flow.FlowUpdateFunction {
+
+    _construct() {
+        super._construct();
+        
+        this.input.register("input", 0);
+        this.input.register("min", 0);
+        this.input.register("max", 1);
+
+        this.output.register("result", 0);
+    }
+
+    _update() {
+        //console.log("_update");
+
+        let relativeValue = this.input.input-this.input.min;
+        let length = this.input.max-this.input.min;
+
+        let times = Math.floor(relativeValue/length);
+        let clampledValue = relativeValue-(length*times);
+
+        this.output.result = this.input.min+clampledValue;
+    }
+}

package/flow/updatefunctions/logic/PositionedItems.js

@@ -1,6 +1,6 @@
 import Dbm from "../../../index.js";
 
-export default class PoisitonedItems extends Dbm.flow.FlowUpdateFunction {
+export default class PositionedItems extends Dbm.flow.FlowUpdateFunction {
 
     _construct() {
         super._construct();

package/flow/updatefunctions/logic/index.js

@@ -12,6 +12,7 @@ export {default as AllAtValue} from "./AllAtValue.js";
 export {default as WhenMatched} from "./WhenMatched.js";
 export {default as Invert} from "./Invert.js";
 export {default as PositionedItems} from "./PositionedItems.js";
+export {default as FloatMod} from "./FloatMod.js";
 
 export let subtract = function(aInput1 = 0, aInput2 = 0) {
     let updateFunction = new Dbm.flow.updatefunctions.logic.Subtraction();
@@ -111,5 +112,22 @@ export let switchValue = function(aValue = null) {
     let updateFunction = new Dbm.flow.updatefunctions.logic.Switch();
     updateFunction.input.properties.value.setOrConnect(aValue);
 	
+	return updateFunction;
+}
+
+export let floatMod = function(aValue = null, aMax = 1) {
+    let updateFunction = new Dbm.flow.updatefunctions.logic.FloatMod();
+    updateFunction.input.properties.input.setOrConnect(aValue);
+    updateFunction.input.properties.max.setOrConnect(aMax);
+	
+	return updateFunction;
+}
+
+export let floatModRange = function(aValue = null, aMin = 0, aMax = 1) {
+    let updateFunction = new Dbm.flow.updatefunctions.logic.FloatMod();
+    updateFunction.input.properties.input.setOrConnect(aValue);
+    updateFunction.input.properties.min.setOrConnect(aMin);
+    updateFunction.input.properties.max.setOrConnect(aMax);
+	
 	return updateFunction;
 }

package/flow/updatefunctions/thirdparty/google/index.js

@@ -0,0 +1,3 @@
+import Dbm from "../../../../index.js";
+
+export * as maps from "./maps/index.js";

package/flow/updatefunctions/thirdparty/google/maps/AutoComplete.js

@@ -0,0 +1,132 @@
+import Dbm from "../../../../../index.js";
+
+export default class AutoComplete extends Dbm.flow.FlowUpdateFunction {
+
+    _construct() {
+        super._construct();
+        
+        this.input.register("text", "");
+        this.input.register("countries", []);
+        this.input.register("types", ["geocode"]);
+        this.input.register("language", "en");
+
+        this._loadedScript = false;
+        this._currentText = "";
+
+        this.output.register("updated", true);
+        this.output.register("results", []);
+    }
+
+    loadScript() {
+        let key = Dbm.getRepositoryItem("googleMapsApi").apiKey;
+        let scriptLoader = Dbm.loading.loadScript("https://maps.googleapis.com/maps/api/js?key=" + key + "&libraries=places");
+
+        if(scriptLoader.item.properties.status === 1) {
+            this._scriptLoaded();
+        }
+        else {
+            Dbm.flow.addUpdateCommandWhenMatched(scriptLoader.item.properties.status, 1, Dbm.commands.callFunction(this._scriptLoaded.bind(this)));
+        }
+
+        return this;
+    }
+
+    _scriptLoaded() {
+        console.log("_scriptLoaded");
+        if(!this._loadedScript) {
+            this._loadedScript = true;
+            this._update();
+        }
+    }
+
+    setLanguage(aLanguageCode) {
+        this.input.language = aLanguageCode;
+
+        return this;
+    }
+
+    setCountryRestrictions(aCountryCode) {
+        this.input.countries = Dbm.utils.ArrayFunctions.arrayOrSeparatedString(aCountryCode);
+
+        return this;
+    }
+
+    _update() {
+        console.log("_update");
+
+        
+        let text = this.input.text;
+        this._currentText = text;
+        this.output.updated = false;
+
+        if(text) {
+            this.output.properties.results.isDirty = false;
+            this.output.properties.updated.isDirty = false;
+
+            if(this._loadedScript) {
+                
+                let requestData = {
+                    input: text,
+                    language: this.input.language,
+                };
+
+                if(this.input.countries) {
+                    requestData["includedRegionCodes"] = this.input.countries;
+                }
+                if(this.input.types) {
+                    requestData["includedPrimaryTypes"] = this.input.types;
+                }
+
+                let request = google.maps.places.AutocompleteSuggestion.fetchAutocompleteSuggestions(requestData);
+
+                request.then((aResult) => {
+                    let suggestions = aResult.suggestions;
+                    this._resultsLoaded(text, Dbm.utils.ArrayFunctions.mapField(suggestions, "placePrediction"));
+                });
+            }
+            else {
+                this.loadScript();
+            }
+        }
+        else {
+            this.output.results = [];
+            this.output.updated = true;
+        }
+        
+        
+    }
+
+    _getResultDetails(aPlaceId) {
+
+        let place = new google.maps.places.Place({"id": aPlaceId});
+
+        let loadPromise = place.fetchFields({"fields": ["addressComponents"]});
+
+        loadPromise.then((aResult) => {
+            //console.log(place);
+        })
+    }
+
+    _resultsLoaded(aText, aPredictions) {
+        console.log("_resultsLoaded");
+        /*
+        for(let i = 0; i < aPredictions.length; i++) {
+            let currentPredition = aPredictions[i];
+            
+            //console.log(currentPredition.text.text, currentPredition.mainText.text, currentPredition.secondaryText.text, currentPredition.placeId);
+            this._getResultDetails(currentPredition.placeId);
+            break;
+        }
+        */
+
+        //console.log(this.isDirty, this.output.properties.results.isDirty, this._currentText, aText);
+
+        if(this._currentText === aText) {
+            this.output.properties.results._internal_setValueInFlowOutsideOfUpdate(aPredictions);
+            this.output.properties.updated._internal_setValueInFlowOutsideOfUpdate(true);
+        }
+    }
+}
+
+
+

package/flow/updatefunctions/thirdparty/google/maps/index.js

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

package/flow/updatefunctions/thirdparty/index.js

@@ -1 +1,2 @@
-export * as threejs from "./threejs/index.js";
+export * as threejs from "./threejs/index.js";
+export * as google from "./google/index.js";

package/graphapi/webclient/ApiConnection.js

@@ -28,6 +28,7 @@ export default class ApiConnection extends Dbm.core.BaseObject {
 
     requestRange(aSelect, aEncode) {
         let item = this._getRequestItem();
+        item.requireProperty("items", []);
 
         let selectArray = [];
         let encodeString = aEncode.join(",");

package/graphapi/webclient/decode/index.js

@@ -3,6 +3,19 @@ import Dbm from "../../../index.js";
 export {default as DecodeBaseObject} from "./DecodeBaseObject.js";
 export {default as Relations} from "./Relations.js";
 
+export const setupDefaultDecoder = function(aName, aFields = [], aSingleLinks = [], aMultipleLinks = []) {
+    let decodePrefix = "graphApi/decode/";
+
+    let decoder = new Dbm.graphapi.webclient.decode.DecodeBaseObject();
+    decoder.item.setValue("copyFields", aFields);
+    decoder.item.setValue("copyLink", aSingleLinks);
+    decoder.item.setValue("copyLinks", aMultipleLinks);
+    decoder.item.setValue("encodingType", aName);
+    decoder.item.register(decodePrefix + aName);
+
+    return decoder;
+}
+
 export const fullSetup = function() {
     let decodePrefix = "graphApi/decode/";
 
@@ -185,4 +198,7 @@ export const fullSetup = function() {
         currentDecoder.item.setValue("encodingType", name);
         currentDecoder.item.register(decodePrefix + name);
     }
+
+    setupDefaultDecoder("linkPreview", ["title", "description", "link", "linkText"], ["page"]);
+    setupDefaultDecoder("publishDate", ["publishDate"], []);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dbm",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "main": "index.js",
   "type": "module",
   "scripts": {},

package/react/admin/EditPage.js

@@ -55,6 +55,8 @@ export default class EditPage extends Dbm.react.BaseObject {
         itemSaveData.setField("contentPreloadTags", preloadImages);
         itemSaveData.setField("lastModified", (new Date()).toISOString());
         itemSaveData.createChange("clearCache", {});
+        itemSaveData.createChange("addAction", {"type": "pageUpdates/updateCategoryListing"});
+        
 
         saveData.save();
     }

package/react/admin/objects/EditObject.js

@@ -39,6 +39,9 @@ export default class EditObject extends Dbm.react.BaseObject {
             
             React.createElement(Dbm.react.area.HasData, {check: this.item.properties.loaded},
                 React.createElement(Dbm.react.context.AddContextVariables, {"values": {"item": item, "itemEditor": itemEditor}},
+                    React.createElement(Dbm.react.area.List, {items: Dbm.react.source.contextVariable("item.objectTypes"), "as": "objectType", "keyField": "(root)"},
+                        Dbm.react.text.text(Dbm.react.source.contextVariable("objectType"))
+                    ),
                     React.createElement(Dbm.react.area.List, {items: Dbm.react.source.contextVariable("item.objectTypes"), "as": "objectType", "keyField": "(root)"},
                         React.createElement(Dbm.react.admin.objects.InjectObjectTypeEditor, {type: Dbm.react.source.contextVariable("objectType")})
                     )

package/react/admin/pageeditors/LinkPreviews.js

@@ -0,0 +1,98 @@
+import React from "react";
+import Dbm from "../../../index.js";
+
+export default class LinkPreview extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        let item = this.context.item;
+        let itemEditor = this.context.itemEditor;
+
+        {
+            let direction = "in";
+            let relationType = "for";
+            let objectType = "linkPreview";
+            let relations = Dbm.utils.ArrayFunctions.filterByField(Dbm.objectPath(item, "relations/" + direction + "." + relationType + ".objects"), "objectTypes", objectType, "arrayContains");
+            let editor = itemEditor.addMultipleIncomingRelationsEditor(relationType, objectType, Dbm.utils.ArrayFunctions.mapField(relations, "id"), ["relations"]);
+            console.log(relations, editor);
+        }
+    }
+
+    _addArrayRow(aArrayEditor) {
+        console.log("_addArrayRow");
+
+        let changes = [
+            {"type": "addOutgoingRelation", "data": {"value": this.context.item.id, "type": "for"}}
+        ];
+
+        //METODO: set update date
+
+        let request = Dbm.getInstance().repository.getItem("graphApi").controller.createItem(["linkPreview"], "public", changes, ["id"]);
+
+        Dbm.flow.addUpdateCommandWhenMatched(request.properties.status, 1, Dbm.commands.callFunction(this._created.bind(this), [request, aArrayEditor]));
+    }
+
+    _created(aRequest, aArrayEditor) {
+        console.log("_created");
+        console.log(aRequest);
+
+        aArrayEditor.push(aRequest.item.id);
+    }
+
+    _removeArrayRow(aArrayEditor, aItem) {
+        aArrayEditor.removeItem(aItem);
+    }
+
+    _renderMainElement() {
+
+        let direction = "in";
+        let relationType = "for";
+        let objectType = "linkPreview";
+
+        return React.createElement("div", {},
+            React.createElement("h2", {}, "Preview in list"),
+                        
+                React.createElement(Dbm.react.form.EditArray, {"value": Dbm.react.source.contextVariable("itemEditor.item.editor_multipleRelations_" + direction + "_" + relationType + "_" + objectType + ".item.editValue.item.properties.value")},
+                    React.createElement("div", {},
+                        React.createElement(Dbm.react.admin.EditObjectById, {id: Dbm.react.source.contextVariable("item.value")},
+                                React.createElement("div", {},
+                                    React.createElement(Dbm.react.form.LabelledArea, {label: "Image (if different from page main image)"}), 
+                                    React.createElement(Dbm.react.admin.editorsgroup.EditRelation, {"direction": "in", "relationType": "isMainImageFor", "objectType": "image"},
+                                        React.createElement(Dbm.react.form.GraphApiImage, {value: Dbm.react.source.contextVariable("valueEditor.editValue.value"), "encoding": "title", nameField: "title", className: "standard-field standard-field-padding full-width"})
+                                    ),
+                                    React.createElement("div", {className: "spacing small"}), 
+                                    React.createElement(Dbm.react.form.LabelledArea, {label: "Title (if different from page title)"}), 
+                                    React.createElement(Dbm.react.admin.editorsgroup.EditField, {"fieldName": "title"},
+                                        React.createElement(Dbm.react.form.FormField, {value: Dbm.react.source.contextVariable("valueEditor.editValue.value"), className: "standard-field standard-field-padding full-width", placeholder: "Same as page title"})
+                                    ),
+                                    React.createElement("div", {className: "spacing small"}), 
+                                    React.createElement(Dbm.react.form.LabelledArea, {label: "Excerpt"}), 
+                                    React.createElement(Dbm.react.admin.editorsgroup.EditField, {"fieldName": "description"},
+                                        React.createElement(Dbm.react.form.TextArea, {value: Dbm.react.source.contextVariable("valueEditor.editValue.value"), className: "standard-field standard-field-padding full-width"})
+                                    ),
+                                    React.createElement("div", {className: "spacing small"}), 
+                                    React.createElement(Dbm.react.form.LabelledArea, {label: "Link text (optional)"}), 
+                                    React.createElement(Dbm.react.admin.editorsgroup.EditField, {"fieldName": "linkText"},
+                                        React.createElement(Dbm.react.form.FormField, {value: Dbm.react.source.contextVariable("valueEditor.editValue.value"), className: "standard-field standard-field-padding full-width", placeholder: "Read more"})
+                                    )
+                                ),
+                            ),
+                    ),
+                    /*
+                    React.createElement("div", {"data-slot": "after"},
+                        React.createElement("div", {"className": "spacing standard"}),
+                        React.createElement(Dbm.react.interaction.CommandButton, {command: Dbm.commands.callFunction(this._addArrayRow.bind(this), [Dbm.react.source.contextVariable("arrayEditor")])},
+                            React.createElement("div", {"className": "flex-row"},
+                                React.createElement("div", {"className": "flex-row-item"},
+                                    React.createElement("div", {"className": "action-button action-button-padding"}, "Add")
+                                )
+                            ),
+                            
+                        )
+                    )
+                        */
+                ),
+        );
+    }
+}
+

package/react/admin/pageeditors/index.js

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

package/react/area/FixedWidthInfiniteSlideshow.js

@@ -0,0 +1,50 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class FixedWidthInfiniteSlideshow extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+		
+		
+	}
+
+    _renderMainElement() {
+        //console.log("FixedWidthInfiniteSlideshow::render");
+        //console.log(this);
+
+        let viewWidth = this.getPropValueWithDefault("viewWidth", 1000);
+        let prepLength = this.getPropValueWithDefault("prepareLength", 20);
+        let elementWidth = this.getPropValueWithDefault("elementWidth", 200);
+        let spacing = this.getPropValueWithDefault("spacing", 0);
+
+        let index = this.getPropValue("index");
+
+        let elements = this.getPropValue("children");;
+
+		let numberOfElements = elements.length;
+
+        let stepLength = elementWidth+spacing;
+        let movedLength = index*stepLength;
+        
+        let startPosition = movedLength-prepLength;
+        let startIndex = Math.floor(startPosition/stepLength);
+
+        let endPosition = (startPosition + viewWidth + 2*prepLength);
+        let endIndex = Math.floor(endPosition/stepLength);
+
+        let children = [];
+        for(let i = startIndex; i <= endIndex; i++) {
+            let currentPosition = i*stepLength-movedLength;
+            let elementIndex = Dbm.utils.NumberFunctions.floatMod(i, numberOfElements);
+
+            //METODO: send in styles instead of forcing full size
+            let style = {"transform": "translateX(" + currentPosition + "px)", position: "absolute", left: 0, top: 0};
+            let child = React.createElement("div", {"key": i, "className": "full-size", "style": style}, elements[elementIndex])
+            children.push(child);
+        }
+        
+		return this._createMainElement("div", {},
+			children
+		);
+    }
+}

package/react/area/List.js

@@ -43,9 +43,13 @@ export default class List extends Dbm.react.BaseObject {
             if(keyField !== "(root)") {
                 key = Dbm.objectPath(currentItem, keyField);
             }
+            else if(keyField !== "(index)") {
+                key = i;
+            }
 
             let values = {};
             values[as] = currentItem;
+            values[as + "/index"] = i;
             newChildren.push(React.createElement(Dbm.react.context.AddContextVariables, {key: key, values: values}, mainChildren));
         }
 

package/react/area/index.js

@@ -7,6 +7,7 @@ export {default as ScrollActivatedArea} from "./ScrollActivatedArea.js";
 export {default as OpenCloseExpandableArea} from "./OpenCloseExpandableArea.js";
 export {default as ResponsiveLayout} from "./ResponsiveLayout.js";
 export {default as List} from "./List.js";
+export {default as FixedWidthInfiniteSlideshow} from "./FixedWidthInfiniteSlideshow.js";
 
 export const responsiveLayout = function(aDefaultLayout) {
     let newResponsiveLayout = new Dbm.react.area.ResponsiveLayout();

package/react/blocks/content/LinkList.js

@@ -0,0 +1,67 @@
+import React from "react";
+import Dbm from "../../../index.js";
+
+export default class LinkList extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        let listId = this.context.blockData.list;
+
+        this.item.requireProperty("loaded", false);
+        this.item.requireProperty("items", []);
+
+        let graphApi = Dbm.getInstance().repository.getItem("cachedGraphApi").controller;
+        {
+            let request = graphApi.requestRange(
+                [
+                    {type: "objectRelationQuery", "path": "in:in:linkPreview", "fromIds": [listId]}
+                ],
+                ["linkPreview"]
+            );
+            
+            this.item.requireProperty("loadedStatus", 0);
+            Dbm.flow.addUpdateCommandWhenMatched(this.item.properties.loadedStatus, Dbm.loading.LoadingStatus.LOADED, Dbm.commands.callFunction(this._loaded.bind(this), [request]));
+            this.item.properties.loadedStatus.connectInput(request.properties.status);
+        }
+    }
+
+    _loaded(aRequest) {
+      console.log("LinkList::_loaded");
+      console.log(aRequest);
+
+      let items = aRequest.items;
+
+      let today = (new Date()).toISOString().split("T")[0];
+      items = Dbm.utils.ArrayFunctions.filterByField(items, "page", null, function(aItem) {
+        if(aItem && aItem.publishDate) {
+          if(aItem.publishDate > today) {
+            return false;
+          }
+          return true;
+        }
+        
+        return false;
+      });
+
+      Dbm.utils.ArrayFunctions.sortOnField(items, "page.publishDate");
+      items.reverse();
+
+      this.item.items = items;
+      this.item.loaded = true;
+    }
+
+    _renderMainElement() {
+
+      let element = Dbm.getInstance().repository.getItem("linkListCard").element;
+
+        return React.createElement("div", {"className": "content-narrow"},
+          React.createElement(Dbm.react.area.HasData, {check: this.item.properties.loaded},
+            React.createElement(Dbm.react.area.List, {items: this.item.properties.items},
+              element,
+              React.createElement("div", {"data-slot": "spacing", "className": "spacing small"})
+            )
+          )
+
+        );
+    }
+}

package/react/blocks/content/LinkListCard.js

@@ -0,0 +1,83 @@
+import React from "react";
+import Dbm from "../../../index.js";
+
+export default class LinkListCard extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        let mobileLayout = React.createElement(Dbm.react.text.Link, {"href": Dbm.core.source.first(Dbm.react.source.contextVariable("item.link"), Dbm.react.source.contextVariable("item.page.url")), "className": "custom-styled-link"},
+          React.createElement("div", {"className": "standard-card standard-card-padding"},
+            React.createElement(Dbm.react.image.WidthScaledImage, {image: Dbm.core.source.first(Dbm.react.source.contextVariable("item.image"), Dbm.react.source.contextVariable("item.page.image")), targetWidth: 300, className: "card-image-mobile background-cover"}),
+            React.createElement("div", {"className": "spacing small"}),
+            React.createElement("div", {},
+              React.createElement("h3", {"className": "no-margins"},
+                Dbm.react.text.text(Dbm.core.source.first(Dbm.react.source.contextVariable("item.title"), Dbm.react.source.contextVariable("item.page.title")))
+              ),
+              React.createElement("div", {"className": "body-text"},
+                Dbm.react.text.htmlText(Dbm.react.source.contextVariable("item.description")),
+              ),
+              React.createElement("div", {"className": "flex-row justify-between"},
+                React.createElement("div", {"className": "flex-row-item"}),
+                React.createElement("div", {"className": "flex-row-item standard-card-read-more-link"},
+                  React.createElement("div", {className: "flex-row micro-item-spacing vertically-center-items"},
+                      React.createElement("div", {className: "flex-row-item flex-resize"},
+                        Dbm.react.text.text(Dbm.react.source.blockData("buttonText"))
+                      ),
+                      React.createElement("div", {className: "flex-row-item flex-no-resize"},
+                          React.createElement(Dbm.react.image.Image, {src: "/assets/img/read-more-right-arrow.svg", className: "right-arrow-read-more-link-icon background-contain"})
+                      )
+                  )
+                )
+              )
+            )
+          )
+        );
+
+        let desktopLayout = React.createElement(Dbm.react.text.Link, {"href": Dbm.core.source.first(Dbm.react.source.contextVariable("item.link"), Dbm.react.source.contextVariable("item.page.url")), "className": "custom-styled-link"},
+          React.createElement("div", {"className": "standard-card standard-card-padding"}, 
+          React.createElement("div", {"className": "flex-row small-item-spacing"},
+            React.createElement("div", {"className": "flex-row-item flex-no-resize"},
+              React.createElement(Dbm.react.image.WidthScaledImage, {image: Dbm.core.source.first(Dbm.react.source.contextVariable("item.image"), Dbm.react.source.contextVariable("item.page.image")), targetWidth: 200, className: "card-image-desktop background-cover"})
+            ),
+            React.createElement("div", {"className": "flex-row-item flex-resize"},
+              React.createElement("h3", {"className": "no-margins"},
+                Dbm.react.text.text(Dbm.core.source.first(Dbm.react.source.contextVariable("item.title"), Dbm.react.source.contextVariable("item.page.title")))
+              ),
+              React.createElement("div", {"className": "spacing small"}),
+              React.createElement("div", {"className": "body-text"},
+                Dbm.react.text.htmlText(Dbm.react.source.contextVariable("item.description")),
+              ),
+              
+              React.createElement("div", {"className": "spacing small"}),
+              React.createElement("div", {"className": "flex-row justify-between"},
+                React.createElement("div", {"className": "flex-row-item"}),
+                React.createElement("div", {"className": "flex-row-item standard-card-read-more-link"},
+                  React.createElement("div", {className: "flex-row micro-item-spacing vertically-center-items"},
+                    React.createElement("div", {className: "flex-row-item flex-resize"},
+                      Dbm.react.text.text(Dbm.core.source.firstWithDefault(Dbm.react.source.contextVariable("item.linkText"), "Read more"))
+                    ),
+                    React.createElement("div", {className: "flex-row-item flex-no-resize"},
+                        React.createElement(Dbm.react.image.Image, {src: "/assets/img/read-more-right-arrow.svg", className: "right-arrow-read-more-link-icon background-contain"})
+                    )
+                )
+                )
+              )
+            )
+          )
+          )
+        );
+
+        
+      
+      
+
+        this.responsiveLayout = Dbm.react.area.responsiveLayout(mobileLayout).addLayout(desktopLayout, 600);
+    }
+
+    _renderMainElement() {
+
+        return React.createElement("div", {}, React.createElement("div", {
+            ref: this.createRef("mainElement")
+          }, this.responsiveLayout.mainElement));
+    }
+}

package/react/blocks/content/index.js

@@ -1,3 +1,5 @@
 export {default as Card} from "./Card.js";
 export {default as ContentBlock} from "./ContentBlock.js";
-export {default as AnchorPosition} from "./AnchorPosition.js";
+export {default as AnchorPosition} from "./AnchorPosition.js";
+export {default as LinkList} from "./LinkList.js";
+export {default as LinkListCard} from "./LinkListCard.js";

package/react/blocks/index.js

@@ -215,6 +215,15 @@ export let registerAllBlocks = function() {
         registerBlock("content/contentBlock", "Content block", createElement(Dbm.react.blocks.content.ContentBlock, {}), editor, {}, {});
     }
 
+    {
+        let editor = createElement(Dbm.react.admin.editor.EditorBlockName, {},
+            createElement(Dbm.react.form.LabelledArea, {label: "Link list"},
+                createElement(Dbm.react.admin.editor.fields.SelectObjectField, {name: "list", "objectType": "linkList"})
+            )
+        );
+        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: "Link name"},
@@ -380,11 +389,24 @@ export let registerAllBlocks = function() {
 
     let pageEditors = [].concat(admin.pageEditors);
 
+    {
+        let newEditor = Dbm.getInstance().repository.getItem("admin/pageEditors/linkPreviews");
+        newEditor.setValue("element", React.createElement(Dbm.react.admin.pageeditors.LinkPreviews));
+        pageEditors.push(newEditor);
+    }
+
     {
         let newEditor = Dbm.getInstance().repository.getItem("admin/pageEditors/helpSections");
         newEditor.setValue("element", React.createElement(Dbm.react.admin.pageeditors.HelpSections));
         pageEditors.push(newEditor);
     }
 
+
+
     admin.pageEditors = pageEditors;
+
+    {
+        let elementItem = Dbm.getRepositoryItem("linkListCard");
+        elementItem.setValue("element", React.createElement(Dbm.react.blocks.content.LinkListCard));
+    }
 }

package/react/form/Option.js

@@ -0,0 +1,18 @@
+import React from "react";
+import Dbm from "../../index.js";
+
+export default class Option extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+
+        this.getDynamicProp("value", "");
+    }
+
+    _renderMainElement() {
+
+        let value = this.getDynamicProp("value").value;
+
+        return this._createMainElement("option", {"value": value,}, this.getPropValue("children"));
+    }
+}
+

package/react/form/index.js

@@ -9,4 +9,5 @@ export {default as GraphApiImage} from "./GraphApiImage.js";
 export {default as EditArray} from "./EditArray.js";
 export {default as TextArea} from "./TextArea.js";
 export {default as EditObjectProperty} from "./EditObjectProperty.js";
-export {default as Form} from "./Form.js";
+export {default as Form} from "./Form.js";
+export {default as Option} from "./Option.js";

package/react/text/HtmlText.js

@@ -7,7 +7,12 @@ export default class HtmlText extends Dbm.react.BaseObject {
 
     _renderMainElement() {
         
-        let text = "" + this.getPropValue("text");
+        let rawText = this.getPropValue("text");;
+        let text = "";
+
+        if(rawText !== undefined && rawText !== null) {
+            text += rawText;
+        }
 
         return this._createMainElement("span", {"dangerouslySetInnerHTML": {__html: text}});;
     }

package/react/text/NumberDisplay.js

@@ -0,0 +1,30 @@
+import Dbm from "../../index.js";
+
+export default class NumberDisplay extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    render() {
+        let text = this.getPropValue("number");
+        let number = 1*text;
+
+        if(!isNaN(number)) {
+
+            let offset = this.getPropValueWithDefault("offset", 0);
+            if(offset) {
+                number += offset;
+            }
+            
+
+            if("numberOfDecimals" in this.props) {
+                text = number.toFixed(this.getPropValue("numberOfDecimals"));
+            }
+            else {
+                text = "" + number;
+            }
+        }
+
+        return text;
+    }
+}

package/react/text/OptionalLink.js

@@ -0,0 +1,21 @@
+import Dbm from "../../index.js";
+import React from "react";
+
+export default class OptionalLink extends Dbm.react.BaseObject {
+    _construct() {
+        super._construct();
+    }
+
+    _renderMainElement() {
+
+        let url = this.getPropValue("href");
+        let children = this.getPropValue("children");
+        if(url) {
+            return this._createMainElement(Dbm.react.text.Link, {href: url}, children);
+        }
+        else {
+            return React.createElement(React.Fragment, {}, children);
+        }
+        
+    }
+}

package/react/text/index.js

@@ -4,6 +4,8 @@ import {createElement} from "react";
 export {default as Text} from "./Text.js";
 export {default as HtmlText} from "./HtmlText.js";
 export {default as Link} from "./Link.js";
+export {default as OptionalLink} from "./OptionalLink.js";
+export {default as NumberDisplay} from "./NumberDisplay.js";
 
 export let text = function(aText) {
     if(typeof(aText) === "string") {

package/utils/ArrayFunctions.js

@@ -292,6 +292,22 @@ export const getItemIndexByIfExists = function(aArray, aField, aIdentifier) {
     return -1;
 }
 
+export const getItemByIfExists = function(aArray, aField, aIdentifier) {
+    let index = getItemIndexByIfExists(aArray, aField, aIdentifier);
+
+    return (index !== -1) ? aArray[index] : null;
+}
+
+export const getItemBy = function(aArray, aField, aIdentifier) {
+    let index = getItemIndexByIfExists(aArray, aField, aIdentifier);
+
+    if(index === -1) {
+        console.warn("No item found", aArray, aField, aIdentifier);
+    }
+
+    return (index !== -1) ? aArray[index] : null;
+}
+
 export const sum = function(aArray) {
 		
     if(!Array.isArray(aArray)) {

package/utils/CompareFunctions.js

@@ -15,6 +15,14 @@ export const strictEquals = function(aA, aB) {
 	return aA === aB;
 }
 
+export const notEquals = function(aA, aB) {
+	return aA != aB;
+}
+
+export const strictNotEquals = function(aA, aB) {
+	return aA !== aB;
+}
+
 export const arrayContains = function(aA, aB) {
     if(aA && aA.indexOf && aA.indexOf(aB) >= 0) {
         return true
@@ -40,6 +48,12 @@ export const fullSetup = function() {
     Dbm.getInstance().repository.getItem("compareFunctions/===").setValue("compare", strictEquals);
     Dbm.getInstance().repository.getItem("compareFunctions/strictEquals").setValue("compare", strictEquals);
 
+    Dbm.getInstance().repository.getItem("compareFunctions/!=").setValue("compare", notEquals);
+    Dbm.getInstance().repository.getItem("compareFunctions/notEquals").setValue("compare", notEquals);
+
+    Dbm.getInstance().repository.getItem("compareFunctions/!==").setValue("compare", strictNotEquals);
+    Dbm.getInstance().repository.getItem("compareFunctions/strictNotEquals").setValue("compare", strictNotEquals);
+
     Dbm.getInstance().repository.getItem("compareFunctions/arrayContains").setValue("compare", arrayContains);
     Dbm.getInstance().repository.getItem("compareFunctions/inArray").setValue("compare", inArray);
 }