EOX-A · silvester-pari · Dec 19, 2024 · Dec 19, 2024
diff --git a/elements/layercontrol/src/components/layer-datetime.js b/elements/layercontrol/src/components/layer-datetime.js
@@ -39,7 +39,7 @@ export class EOxLayerControlLayerDatetime extends LitElement {
      * Layer config for eox-jsonform
      *
      * @type {{
-     *   disablePlay?: boolean;
+     *   play?: boolean;
      *   slider?: boolean;
      *   navigation?: boolean;
      *   currentStep: string|number;
@@ -110,7 +110,7 @@ export class EOxLayerControlLayerDatetime extends LitElement {
             .layer=${undefined}
             .navigation=${this.layerDatetime.navigation ?? false}
             .slider=${this.layerDatetime.slider ?? false}
-            .disablePlay=${this.layerDatetime.disablePlay ?? false}
+            .play=${this.layerDatetime.play ?? false}
             .controlValues=${this.layerDatetime.controlValues}
             .controlProperty=${undefined}
             current-step=${this.layerDatetime.currentStep}

diff --git a/elements/layercontrol/src/enums/stories/index.js b/elements/layercontrol/src/enums/stories/index.js
@@ -445,7 +445,7 @@ export const STORIES_LAYER_VESSEL_DENSITY_CARGO = {
       range: ["#C3EBDC", "#0ADC00", "#FEF500", "#F29300", "#800303"],
     },
     layerDatetime: {
-      disablePlay: true,
+      play: false,
       slider: true,
       currentStep: "2021-03-01",
       displayFormat: "DD.MM.YYYY",

diff --git a/elements/layercontrol/stories/layercontrol.stories.js b/elements/layercontrol/stories/layercontrol.stories.js
@@ -70,7 +70,7 @@ export const LayerStylesConfig = LayerStylesConfigStory;
 /**
  * By adding "datetime" as tool, the time for a specific layer can be modified.
  * The `layerDatetime` property of the layer allows passing the following properties of eox-timecontrol:
- * `disablePlay`: allows disabling the timecontrol play button.
+ * `play`: allows disabling the timecontrol play button.
  * `slider`: show/hide timecontrol slider.
  * `currentStep`: current datetime string.
  * `controlValues`: The list of available values.

diff --git a/elements/timecontrol/src/enums/stories.js b/elements/timecontrol/src/enums/stories.js
@@ -21,6 +21,8 @@ export const DEFAULT_ARGS = {
     "2023-04-17",
     "2023-04-24",
   ],
+  navigation: true,
+  play: true,
   // map
   layers: [
     {

diff --git a/elements/timecontrol/src/main.js b/elements/timecontrol/src/main.js
@@ -54,7 +54,7 @@ export class EOxTimeControl extends LitElement {
       /**
        * Hides the play button if set
        */
-      disablePlay: { type: Boolean, attribute: "disable-play" },
+      play: { type: Boolean, attribute: "play" },
 
       /**
        * Date format string for displaying the current step
@@ -82,7 +82,7 @@ export class EOxTimeControl extends LitElement {
     /** @type {boolean} */
     this.unstyled = false;
     /** @type {boolean} */
-    this.disablePlay = false;
+    this.play = false;
     /** @type {boolean} */
     this.navigation = true;
     /** @type {boolean} */
@@ -337,7 +337,7 @@ export class EOxTimeControl extends LitElement {
                 </button>
               `
             : nothing}
-          ${!this.disablePlay
+          ${this.play
             ? html`
                 <button
                   part="play"

diff --git a/...mecontrol/stories/disabled-play-button.js → ...s/timecontrol/stories/disabled-buttons.js b/...mecontrol/stories/disabled-play-button.js → ...s/timecontrol/stories/disabled-buttons.js
@@ -1,11 +1,12 @@
 import { html } from "lit";
 import { DEFAULT_ARGS } from "../src/enums/stories";
 
-export const DisabledPlayButton = {
+export const DisabledButtons = {
   args: {
     ...DEFAULT_ARGS,
     for: "eox-map#disabled-play",
-    disablePlay: true,
+    play: false,
+    navigation: false,
   },
   render: (args) => html`
     <eox-map
@@ -20,11 +21,12 @@ export const DisabledPlayButton = {
       .layer=${args.layer}
       .controlProperty=${args.controlProperty}
       .controlValues=${args.controlValues}
+      .navigation=${args.navigation}
       .slider=${args.slider}
-      .disablePlay=${args.disablePlay}
+      .play=${args.play}
       style="margin-top: 8px"
     ></eox-timecontrol>
   `,
 };
 
-export default DisabledPlayButton;
+export default DisabledButtons;
diff --git a/elements/timecontrol/stories/format.js b/elements/timecontrol/stories/format.js
@@ -4,12 +4,13 @@ import { DEFAULT_ARGS } from "../src/enums/stories";
 export const Format = {
   args: {
     ...DEFAULT_ARGS,
-    for: "eox-map#primary",
+    for: "eox-map#format",
     displayFormat: "MMMM DD, YYYY",
+    play: false,
   },
   render: (args) => html`
     <eox-map
-      id="primary"
+      id="format"
       style="width: 1005; height: 300px;"
       .zoom=${args.zoom}
       .center=${args.center}
@@ -20,6 +21,8 @@ export const Format = {
       .layer=${args.layer}
       .controlProperty=${args.controlProperty}
       .controlValues=${args.controlValues}
+      .navigation=${args.navigation}
+      .play=${args.play}
       .slider=${args.slider}
       style="margin-top: 10px;"
       .displayFormat=${args.displayFormat}

diff --git a/elements/timecontrol/stories/index.js b/elements/timecontrol/stories/index.js
@@ -4,6 +4,6 @@
 export { default as PrimaryStory } from "./primary"; // Primary story
 export { default as SliderStory } from "./slider"; // Slider story
 export { default as ProgrammaticTimeSelectionStory } from "./programmatic-time-selection"; // Programmatic time selection story
-export { default as DisabledPlayButtonStory } from "./disabled-play-button"; // Disabled play button story
+export { default as DisabledButtonsStory } from "./disabled-buttons"; // Disabled play button story
 export { default as NoMapStory } from "./no-map"; // No map provided story
 export { default as FormatStory } from "./format"; // Date-Time Format story
diff --git a/elements/timecontrol/stories/no-map.js b/elements/timecontrol/stories/no-map.js
@@ -4,7 +4,7 @@ import { DEFAULT_ARGS } from "../src/enums/stories";
 const NoMap = {
   args: {
     ...DEFAULT_ARGS,
-    disablePlay: true,
+    play: true,
     layer: undefined,
     for: undefined,
     controlProperty: undefined,
@@ -19,8 +19,9 @@ const NoMap = {
       .layer=${args.layer}
       .controlProperty=${args.controlProperty}
       .controlValues=${args.controlValues}
+      .navigation=${args.navigation}
       .slider=${args.slider}
-      .disablePlay=${args.disablePlay}
+      .play=${args.play}
       @stepchange=${args.onStepChange}
     ></eox-timecontrol>
   `,

diff --git a/elements/timecontrol/stories/primary.js b/elements/timecontrol/stories/primary.js
@@ -19,6 +19,8 @@ export const Primary = {
       .layer=${args.layer}
       .controlProperty=${args.controlProperty}
       .controlValues=${args.controlValues}
+      .navigation=${args.navigation}
+      .play=${args.play}
       .slider=${args.slider}
       style="margin-top: 8px"
     ></eox-timecontrol>

diff --git a/elements/timecontrol/stories/programmatic-time-selection.js b/elements/timecontrol/stories/programmatic-time-selection.js
@@ -6,6 +6,8 @@ export const ProgrammaticTimeSelection = {
     ...DEFAULT_ARGS,
     for: "eox-map#programmatic-time-selection",
     slider: true,
+    navigation: false,
+    play: false,
   },
   render: (args) => html`
     <eox-map
@@ -33,6 +35,8 @@ export const ProgrammaticTimeSelection = {
       .layer=${args.layer}
       .controlProperty=${args.controlProperty}
       .controlValues=${args.controlValues}
+      .navigation=${args.navigation}
+      .play=${args.play}
       .slider=${args.slider}
       style="margin-top: 8px"
     ></eox-timecontrol>

diff --git a/elements/timecontrol/stories/slider.js b/elements/timecontrol/stories/slider.js
@@ -6,6 +6,8 @@ export const Slider = {
     ...DEFAULT_ARGS,
     for: "eox-map#slider",
     slider: true,
+    navigation: false,
+    play: false,
   },
   render: (args) => html`
     <eox-map
@@ -20,6 +22,8 @@ export const Slider = {
       .layer=${args.layer}
       .controlProperty=${args.controlProperty}
       .controlValues=${args.controlValues}
+      .navigation=${args.navigation}
+      .play=${args.play}
       .slider=${args.slider}
       style="margin-top: 8px"
     ></eox-timecontrol>

diff --git a/elements/timecontrol/stories/timecontrol.stories.js b/elements/timecontrol/stories/timecontrol.stories.js
@@ -3,7 +3,7 @@ import {
   PrimaryStory,
   SliderStory,
   ProgrammaticTimeSelectionStory,
-  DisabledPlayButtonStory,
+  DisabledButtonsStory,
   NoMapStory,
   FormatStory,
 } from "./index";
@@ -20,7 +20,7 @@ export const Slider = SliderStory;
 
 export const ProgrammaticTimeSelection = ProgrammaticTimeSelectionStory;
 
-export const DisabledPlayButton = DisabledPlayButtonStory;
+export const DisabledButtons = DisabledButtonsStory;
 
 export const NoMap = NoMapStory;