diff --git a/elements/layercontrol/src/components/layer-datetime.js b/elements/layercontrol/src/components/layer-datetime.js index 93989eb40..8b859b2e4 100644 --- a/elements/layercontrol/src/components/layer-datetime.js +++ b/elements/layercontrol/src/components/layer-datetime.js @@ -41,6 +41,7 @@ export class EOxLayerControlLayerDatetime extends LitElement { * @type {{ * disablePlay?: boolean; * slider?: boolean; + * navigation?: boolean; * currentStep: string|number; * controlValues: (string|number)[]; * displayFormat?: string; @@ -107,6 +108,7 @@ export class EOxLayerControlLayerDatetime extends LitElement { ?unstyled=${this.unstyled} .for=${undefined} .layer=${undefined} + .navigation=${this.layerDatetime.navigation ?? false} .slider=${this.layerDatetime.slider ?? false} .disablePlay=${this.layerDatetime.disablePlay ?? false} .controlValues=${this.layerDatetime.controlValues} diff --git a/elements/timecontrol/src/main.js b/elements/timecontrol/src/main.js index 6c8db722a..76fdea8e7 100644 --- a/elements/timecontrol/src/main.js +++ b/elements/timecontrol/src/main.js @@ -41,6 +41,11 @@ export class EOxTimeControl extends LitElement { */ slider: { type: Boolean }, + /** + * Display left & right navigation buttons for the values + */ + navigation: { type: Boolean }, + /** * Original params of layer source */ @@ -79,6 +84,8 @@ export class EOxTimeControl extends LitElement { /** @type {boolean} */ this.disablePlay = false; /** @type {boolean} */ + this.navigation = true; + /** @type {boolean} */ this.slider = false; /** * Query selector of an `eox-map` (`String`, passed as an attribute or property) @@ -301,13 +308,17 @@ export class EOxTimeControl extends LitElement {
- + ${this.navigation + ? html` + + ` + : nothing} ${this.displayFormat ? dayjs(this.controlValues[this._newStepIndex]).format( @@ -315,9 +326,17 @@ export class EOxTimeControl extends LitElement { ) : this.controlValues[this._newStepIndex]} - + ${this.navigation + ? html` + + ` + : nothing} ${!this.disablePlay ? html`