feat: time control navigation property (#1449)

EOX-A · Dec 19, 2024 · 143c413 · 143c413
1 parent 1782671
commit 143c413
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 10 deletions.
diff --git 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
@@ -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,23 +308,35 @@ export class EOxTimeControl extends LitElement {
       </style>
       <main>
         <div id="controls" part="controls">
-          <button
-            part="previous"
-            class="icon previous"
-            @click="${() => this.previous()}"
-          >
-            <
-          </button>
+          ${this.navigation
+            ? html`
+                <button
+                  part="previous"
+                  class="icon previous"
+                  @click="${() => this.previous()}"
+                >
+                  <
+                </button>
+              `
+            : nothing}
           <span part="current">
             ${this.displayFormat
               ? dayjs(this.controlValues[this._newStepIndex]).format(
                   this.displayFormat,
                 )
               : this.controlValues[this._newStepIndex]}
           </span>
-          <button part="next" class="icon next" @click="${() => this.next()}">
-            >
-          </button>
+          ${this.navigation
+            ? html`
+                <button
+                  part="next"
+                  class="icon next"
+                  @click="${() => this.next()}"
+                >
+                  >
+                </button>
+              `
+            : nothing}
           ${!this.disablePlay
             ? html`
                 <button