feat: lock overlay

Author: MHA

dist/slider-button-card.js

@@ -13,7 +13,7 @@ import {
 } from 'lit-element';
 import { HomeAssistant, fireEvent, LovelaceCardEditor, stateIcon, computeDomain } from 'custom-card-helpers';
 import { localize } from './localize/localize';
-import { ActionButtonConfig, ActionButtonConfigDefault, ActionButtonMode, Domain, IconConfig, IconConfigDefault, SliderBackground, SliderButtonCardConfig, SliderConfig, SliderConfigDefault, SliderDirections } from './types';
+import { ActionButtonConfig, ActionButtonConfigDefault, ActionButtonMode, Domain, IconConfig, IconConfigDefault, LockConfigDefault, SliderBackground, SliderButtonCardConfig, SliderConfig, SliderConfigDefault, SliderDirections } from './types';
 import { applyPatch, getEnumValues, getSliderDefaultForEntity } from './utils';
 
 @customElement('slider-button-card-editor')
@@ -237,6 +237,33 @@ export class SliderButtonCardEditor extends LitElement implements LovelaceCardEd
                   ></ha-switch>
                 </ha-formfield>
               </div>
+              <div class="side-by-side">
+                <ha-formfield .label=${localize('tabs.slider.lock.enabled')}>
+                  <ha-switch
+                    .checked=${this._slider.lock?.enabled}
+                    .configValue=${'slider.lock.enabled'}
+                    @change=${this._valueChanged}
+                  ></ha-switch>
+                </ha-formfield>
+                ${this._slider.lock?.enabled
+                  ? html`
+                    <paper-input
+                      pattern="[0-9]+([\\\\.][0-9]+)?"
+                      .label=${localize('tabs.slider.lock.duration')}
+                      .noLabelFloat=${false}
+                      .min=${1}
+                      .max=${10}
+                      .value=${this._slider.lock?.duration || LockConfigDefault.duration}
+                      .step=${0.1}
+                      type="number"
+                      auto-validate
+                      .configValue=${'slider.lock.duration'}
+                      @value-changed=${this._numberChanged}
+                    ></paper-input>
+                `
+                  :
+                  ''}
+              </div>
             </div>
           </div>
           
@@ -381,6 +408,15 @@ export class SliderButtonCardEditor extends LitElement implements LovelaceCardEd
     this._changeValue(target.configValue, target.checked !== undefined ? target.checked : value);
   }
 
+  private _numberChanged(ev): void {
+    ev.stopPropagation();
+    const target = ev.target;
+    const value = target.value === '' || isNaN(target.value)
+      ? LockConfigDefault.duration as number
+      : Number(target.value);
+    this._changeValue(target.configValue, value);
+  }
+
   private _changeValue(configValue: string, value: string | boolean | number): void {
     if (!this._config || !this.hass) {
       return;
@@ -471,7 +507,7 @@ export class SliderButtonCardEditor extends LitElement implements LovelaceCardEd
       input.tab-checkbox:checked ~ .tab-content {
         max-height: 100vh;
         padding: 1em;
-      }      
+      }
     `;
   }
 }

src/editor.ts

@@ -28,7 +28,11 @@
       "use_brightness": "Use brightness?",
       "show_track": "Show track?",
       "toggle_on_click": "Act as a toggle (disable sliding)",
-      "force_square": "Force square?"
+      "force_square": "Force square?",
+      "lock": {
+        "enabled": "Lock enabled?",
+        "duration": "Lock duration in seconds"
+      }
     },
     "action_button": {
       "title": "Action button",

src/localize/languages/en.json

@@ -42,6 +42,7 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
   @query('.button') button;
   @query('.action') action;
   @query('.slider') slider;
+  @query('.type-custom-slider-button-card') card;
   private changing = false;
   private changed = false;
   private ctrl!: Controller;
@@ -148,9 +149,9 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
       <ha-card
         tabindex="0"
         .label=${`SliderButton: ${this.config.entity || 'No Entity Defined'}`}
-        class="${classMap({ 'square': this.config.slider?.force_square || false, 'hide-name': !this.config.show_name, 'hide-state': !this.config.show_state, 'hide-action': !this.config.action_button?.show , 'compact': this.config.compact === true })}"
+        class="${classMap({ 'square': this.config.slider?.force_square || false, 'hide-name': !this.config.show_name, 'hide-state': !this.config.show_state, 'hide-action': !this.config.action_button?.show , 'compact': this.config.compact === true, 'locked': this.locked })}"
       >
-        <div class="button ${classMap({ off: this.ctrl.isOff, unavailable: this.ctrl.isUnavailable, 'locked': this.locked})}"
+        <div class="button ${classMap({ off: this.ctrl.isOff, unavailable: this.ctrl.isUnavailable})}"
              data-lock-layout="${this.config.slider?.lock?.layout || LockLayout.CORNER}"
              style=${styleMap({
                '--slider-value': `${this.ctrl.percentage}%`,
@@ -314,13 +315,13 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
   private lockCard(): void {
     clearTimeout(this.lockTimeout);
     this.locked = true;
-    this.button.classList.add('locked');
+    this.card.classList.add('locked');
   }
 
   private unlockCard(): void {
     clearTimeout(this.lockTimeout);
     this.locked = false;
-    this.button.classList.remove('locked');
+    this.card.classList.remove('locked');
     this.lockTimeout = setTimeout(()=> {
       this.lockCard();
     }, (this.config.slider?.lock?.duration || 5) * 1000)
@@ -419,8 +420,8 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
   }
 
   private onPointerDown(event: PointerEvent): void {
-    /*event.preventDefault();*/
-    /*event.stopPropagation();*/
+    event.preventDefault();
+    event.stopPropagation();
     if (this.ctrl.isSliderDisabled) {
       return;
     }
@@ -474,7 +475,10 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
     }
     ha-card.compact {
       min-height: 3rem !important;
-    }    
+    }
+    ha-card.locked {
+      touch-action: auto;
+    }
     :host {
       --slider-bg-default-color: var(--primary-color, rgb(95, 124, 171));
       --slider-bg: var(--slider-color);
@@ -519,7 +523,10 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
     .button.off {
       background-color: var(--btn-bg-color-off);
     }
-    
+    ha-card.locked .button {
+      touch-action: auto;
+    }
+
     /* --- ICON --- */
     
     .icon {
@@ -638,14 +645,11 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
       background-color: var( --ha-card-background, var(--card-background-color, var(--btn-bg-color-on, black)) );
       cursor: ew-resize;
       z-index: 0;
-      /*touch-action: pan-x;*/
     }
     .slider[data-mode="bottom-top"] {
-      /*touch-action: pan-y;*/
-      cursor: ns-resize;     
+      cursor: ns-resize;
     }
     .slider[data-mode="top-bottom"] {
-      /*touch-action: pan-y;*/
       cursor: ns-resize;
     }
     .slider:active {
@@ -683,6 +687,15 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
     [data-lock-layout="corner"] .lock-overlay ha-icon {
       margin: 0.4rem;
     }     
+    .compact [data-lock-layout="corner"] .lock-overlay ha-icon {
+      margin: 0;
+      bottom: unset;
+      top: 1.2rem;
+      right: 3.2rem;
+    }     
+    .compact.hide-action [data-lock-layout="corner"] .lock-overlay ha-icon {
+      right: 1.2rem;
+    }     
     [data-lock-layout="overlay"] .lock-overlay ha-icon {
       --mdc-icon-size: 30px;
       bottom: unset;

src/slider-button-card.ts

@@ -55,7 +55,6 @@ export interface SliderConfig {
 
 export interface LockConfig {
   enabled?: boolean;
-  show_icon?: boolean;
   layout?: LockLayout;
   duration?: number;
 }
@@ -113,6 +112,12 @@ export const IconConfigDefault: IconConfig = {
   },
 };
 
+export const LockConfigDefault: LockConfig = {
+  enabled: false,
+  duration: 5,
+  layout: LockLayout.CORNER,
+};
+
 export const SliderConfigDefault: SliderConfig = {
   direction: SliderDirections.LEFT_RIGHT,
   background: SliderBackground.SOLID,
@@ -121,6 +126,7 @@ export const SliderConfigDefault: SliderConfig = {
   show_track: false,
   toggle_on_click: false,
   force_square: false,
+  lock: LockConfigDefault,
 };
 
 export const SliderConfigDefaultDomain: Map<string, SliderConfig> = new Map([