Merge pull request #84 from breakthestatic/main

Add option to prevent swipe navigation within subviews

.hass/config/dashboards.yaml

@@ -108,6 +108,13 @@
       show_in_sidebar: true
       filename: ./dashboards/subview-noskip.yaml
 
+    subview-noswipe:
+      mode: yaml
+      title: Subview no swipe
+      icon: mdi:subdirectory-arrow-right
+      show_in_sidebar: true
+      filename: ./dashboards/subview-noswipe.yaml
+
     one-tile:
       mode: yaml
       title: One tile

.hass/config/dashboards/subview-noswipe.yaml

@@ -0,0 +1,67 @@
+swipe_nav:
+  logger_level: verbose
+  enable_on_subviews: false
+
+views:
+
+  - title: View 1
+    cards:
+      - type: markdown
+        title: View 1
+        content: Content...
+      - type: button
+        name: Go to subview
+        icon: mdi:chevron-right
+        icon_height: 32px
+        show_name: true
+        show_icon: true
+        tap_action:
+          action: navigate
+          navigation_path: /subview-noswipe/1
+
+
+  - title: Subview
+    subview: true
+    cards:
+      - type: markdown
+        title: Subview
+        content: Content...
+      - type: button
+        name: Go to subview
+        icon: mdi:subdirectory-arrow-right
+        icon_height: 32px
+        show_name: true
+        show_icon: true
+        tap_action:
+          action: navigate
+          navigation_path: /subview-noswipe/1
+
+  - title: View 3
+    cards:
+      - type: markdown
+        title: View 3
+        content: Content...
+      - type: button
+        name: Go to subview
+        icon: mdi:chevron-right
+        icon_height: 32px
+        show_name: true
+        show_icon: true
+        tap_action:
+          action: navigate
+          navigation_path: /subview-noswipe/1
+
+  - title: View 4
+    cards:
+      - type: markdown
+        title: View 4
+        content: Content...
+      - type: button
+        name: Go to subview
+        icon: mdi:chevron-right
+        icon_height: 32px
+        show_name: true
+        show_icon: true
+        tap_action:
+          action: navigate
+          navigation_path: /subview-noswipe/1

README.md

@@ -54,19 +54,20 @@ If you want to modify the configuration, place it in the root of your dashboard
 
 **Config Options:**
 
-| Name               |  Type   | Default | Description                                                                                                                                                           |
-|--------------------|:-------:|:-------:|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| animate            | string  | `none`  | Swipe animations. Can be: `none`, `swipe`, `fade`, `flip`. The swipe animation should be considered experimental and depending on your setup may appear buggy.        |
-| animate_duration   | number  |  `200`  | Swipe animation's duration in milliseconds.                                                                                                                           |
-| enable             | boolean | `true`  | Enable or disable the swipe navigation.                                                                                                                               |
-| enable_mouse_swipe | boolean | `false` | Enable or disable the swipe navigation via mouse.                                                                                                                     |
-| logger_level       | string  | `warn`  | Set logging level. Possible values are: `verbose`, `debug`, `info`, `warn`, `error`.                                                                                  |
-| prevent_default    | boolean | `false` | Prevent the browsers default horizontal swipe actions.                                                                                                                |
-| skip_subviews      | boolean | `true`  | Automatically skip subviews.                                                                                                                                          |
-| skip_tabs          | string  |         | A comma separated list of views to skip when swiping. e.g., `1,3,5`.<br>⚠️ _Note that tabs count starts at `0`, so the first is `0`, second is `1`, and so on._        |
-| swipe_amount       | number  |  `15`   | Minimum percent of screen needed to be swiped in order to navigate.                                                                                                   |
-| wrap               | boolean | `true`  | Wrap from first tab to last tab and vice versa.                                                                                                                       |
-| ~~skip_hidden~~    | boolean | `true`  | Automatically skip hidden tabs.<br>⚠️ _Setting this to `false` is deprecated and poses a security risk as it allows a user to reveal a tab they don't have access to._ |
+| Name               |  Type   | Default | Description                                                                                                                                                                  |
+|--------------------|:-------:|:-------:|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| animate            | string  | `none`  | Swipe animations. Can be: `none`, `swipe`, `fade`, `flip`. The swipe animation should be considered experimental and depending on your setup may appear buggy.               |
+| animate_duration   | number  |  `200`  | Swipe animation's duration in milliseconds.                                                                                                                                  |
+| enable             | boolean | `true`  | Enable or disable the swipe navigation.                                                                                                                                      |
+| enable_mouse_swipe | boolean | `false` | Enable or disable the swipe navigation via mouse.                                                                                                                            |
+| enable_on_subviews | boolean | `true`  | Enables swipe navigation while on subviews. <br>⚠️ _Note the difference between this and `skip_subviews`, which skips over subviews while navigating **from** regular views._ |
+| logger_level       | string  | `warn`  | Set logging level. Possible values are: `verbose`, `debug`, `info`, `warn`, `error`.                                                                                         |
+| prevent_default    | boolean | `false` | Prevent the browsers default horizontal swipe actions.                                                                                                                       |
+| skip_subviews      | boolean | `true`  | Automatically skip subviews.                                                                                                                                                 |
+| skip_tabs          | string  |         | A comma separated list of views to skip when swiping. e.g., `1,3,5`.<br>⚠️ _Note that tabs count starts at `0`, so the first is `0`, second is `1`, and so on._               |
+| swipe_amount       | number  |  `15`   | Minimum percent of screen needed to be swiped in order to navigate.                                                                                                          |
+| wrap               | boolean | `true`  | Wrap from first tab to last tab and vice versa.                                                                                                                              |
+| ~~skip_hidden~~    | boolean | `true`  | Automatically skip hidden tabs.<br>⚠️ _Setting this to `false` is deprecated and poses a security risk as it allows a user to reveal a tab they don't have access to._        |
 
 
 **Example:**

src/config.ts

@@ -7,6 +7,7 @@ class Config {
   private animate_duration = 200;
   private enable = true;
   private enable_mouse_swipe = false;
+  private enable_on_subviews = true;
   // Note that this is the level that is in force before the config is parsed.
   // This means that all logs below this level will be ignored until the config is parsed.
   private logger_level: LogLevel = LogLevel.WARN;
@@ -33,6 +34,10 @@ class Config {
     return this.enable_mouse_swipe;
   }
 
+  public getEnableOnSubviews(): boolean {
+    return this.enable_on_subviews;
+  }
+
   public getLoggerLevel(): LogLevel {
     return this.logger_level;
   }
@@ -80,6 +85,8 @@ class Config {
 
     if (rawConfig.enable_mouse_swipe != null) { newConfig.enable_mouse_swipe = rawConfig.enable_mouse_swipe; }
 
+    if (rawConfig.enable_on_subviews != null) { newConfig.enable_on_subviews = rawConfig.enable_on_subviews; }
+
     switch (rawConfig.logger_level) {
       case "verbose":
         newConfig.logger_level = LogLevel.VERBOSE;
@@ -133,6 +140,7 @@ const SwipeNavigationConfigSchema = z.object({
   animate_duration: z.number().optional(),
   enable: z.boolean().optional(),
   enable_mouse_swipe: z.boolean().optional(),
+  enable_on_subviews: z.boolean().optional(),
   logger_level: z
     .union([
       z.literal("verbose"),

src/swipeManager.ts

@@ -72,6 +72,16 @@ class SwipeManager {
       return; // Ignore swipe: Swipe is disabled in the config
     }
 
+    if (ConfigManager.getCurrentConfig().getEnableOnSubviews() == false) {
+      const views = ConfigManager.getViews();
+      const activeTabIndex = ConfigManager.getCurrentViewIndex();
+
+      if (views != null && activeTabIndex != null && views[activeTabIndex].subview) {
+        Logger.logd(LOG_TAG, "Ignoring " + interactionType + ": Swipe navigation on subviews is disabled in the config.");
+        return; // Ignore swipe: Swipe on subviews is disabled in the config
+      }
+    }
+
     if (window.TouchEvent != null && event instanceof TouchEvent && event.touches.length > 1) {
       this.#xDown = null;
       this.#yDown = null;

tests/dashboards/individual-dashboards/subview-noswipe.test.ts

@@ -0,0 +1,28 @@
+import { test, expect } from "@playwright/test";
+import { SwipeHelper } from "../../helpers/touchHelpers";
+
+test("shouldn't change, no swipe on subview", async ({ page }) => {
+  const dashboardPath = "/subview-noswipe"
+  await page.goto(dashboardPath + "/1");
+  await expect(page).toHaveURL(dashboardPath + "/1");
+
+  const haAppLayout = page.locator("[id='view']");
+
+  const consoleLogs: string[] = [];
+  page.on("console", (message) => {
+    consoleLogs.push(message.text());
+  });
+
+  await SwipeHelper.swipeLeft(haAppLayout);
+  await expect(page).toHaveURL(dashboardPath + "/1");
+
+  await SwipeHelper.swipeRight(haAppLayout);
+  await expect(page).toHaveURL(dashboardPath + "/1");
+
+  let matches = 0;
+  const regexp = /.*Ignoring touch: Swipe navigation on subviews is disabled in the config.*/;
+  for (const log of consoleLogs) {
+    if (regexp.test(log)) { matches++; }
+  }
+  expect(matches).toBe(2);
+});