Use new round sliders for light card (#3634)

* Use new round sliders for light card

* Remove _roundSliderstyle

package.json

@@ -64,6 +64,7 @@
     "@polymer/paper-toggle-button": "^3.0.1",
     "@polymer/paper-tooltip": "^3.0.1",
     "@polymer/polymer": "3.1.0",
+    "@thomasloven/round-slider": "^0.2.2",
     "@vaadin/vaadin-combo-box": "^4.2.8",
     "@vaadin/vaadin-date-picker": "^3.3.3",
     "@webcomponents/shadycss": "^1.9.0",

src/panels/lovelace/cards/hui-light-card.ts

@@ -7,6 +7,7 @@ import {
   customElement,
 } from "lit-element";
 import "@polymer/paper-icon-button/paper-icon-button";
+import "@thomasloven/round-slider";
 
 import stateIcon from "../../../common/entity/state_icon";
 import computeStateName from "../../../common/entity/compute_state_name";
@@ -22,25 +23,9 @@ import { styleMap } from "lit-html/directives/style-map";
 import { HomeAssistant, LightEntity } from "../../../types";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
-import { loadRoundslider } from "../../../resources/jquery.roundslider.ondemand";
 import { toggleEntity } from "../common/entity/toggle-entity";
 import { LightCardConfig } from "./types";
 
-const lightConfig = {
-  radius: 80,
-  step: 1,
-  circleShape: "pie",
-  startAngle: 315,
-  width: 5,
-  min: 1,
-  max: 100,
-  sliderType: "min-range",
-  lineCap: "round",
-  handleSize: "+12",
-  showTooltip: false,
-  animation: false,
-};
-
 @customElement("hui-light-card")
 export class HuiLightCard extends LitElement implements LovelaceCard {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
@@ -55,10 +40,6 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
 
   @property() private _config?: LightCardConfig;
 
-  @property() private _roundSliderStyle?: TemplateResult;
-
-  @property() private _jQuery?: any;
-
   private _brightnessTimout?: number;
 
   public getCardSize(): number {
@@ -79,6 +60,8 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
     }
 
     const stateObj = this.hass.states[this._config!.entity] as LightEntity;
+    const brightness =
+      Math.round((stateObj.attributes.brightness / 254) * 100) || 0;
 
     if (!stateObj) {
       return html`
@@ -107,7 +90,13 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
           class="more-info"
           @click="${this._handleMoreInfo}"
         ></paper-icon-button>
-        <div id="light"></div>
+        <div id="light">
+          <round-slider
+            .value=${brightness}
+            @value-changing=${this._dragEvent}
+            @value-changed=${this._setBrightness}
+          ></round-slider>
+        </div>
         <div id="tooltip">
           <div class="icon-state">
             <ha-icon
@@ -120,7 +109,9 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
               })}"
               @click="${this._handleTap}"
             ></ha-icon>
-            <div class="brightness" @ha-click="${this._handleTap}"></div>
+            <div class="brightness" @ha-click="${this._handleTap}">
+              ${brightness} %
+            </div>
             <div class="name">
               ${this._config.name || computeStateName(stateObj)}
             </div>
@@ -134,35 +125,9 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
     return hasConfigOrEntityChanged(this, changedProps);
   }
 
-  protected async firstUpdated(): Promise<void> {
-    const loaded = await loadRoundslider();
-
-    this._roundSliderStyle = loaded.roundSliderStyle;
-    this._jQuery = loaded.jQuery;
-
-    const stateObj = this.hass!.states[this._config!.entity] as LightEntity;
-
-    if (!stateObj) {
-      // Card will require refresh to work again
-      return;
-    }
-
-    const brightness = stateObj.attributes.brightness || 0;
-
-    this._jQuery("#light", this.shadowRoot).roundSlider({
-      ...lightConfig,
-      change: (value) => this._setBrightness(value),
-      drag: (value) => this._dragEvent(value),
-      start: () => this._showBrightness(),
-      stop: () => this._hideBrightness(),
-    });
-    this.shadowRoot!.querySelector(".brightness")!.innerHTML =
-      (Math.round((brightness / 254) * 100) || 0) + "%";
-  }
-
   protected updated(changedProps: PropertyValues): void {
     super.updated(changedProps);
-    if (!this._config || !this.hass || !this._jQuery) {
+    if (!this._config || !this.hass) {
       return;
     }
 
@@ -172,12 +137,6 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
       return;
     }
 
-    const attrs = stateObj.attributes;
-
-    this._jQuery("#light", this.shadowRoot).roundSlider({
-      value: Math.round((attrs.brightness / 254) * 100) || 0,
-    });
-
     const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
     if (!oldHass || oldHass.themes !== this.hass.themes) {
       applyThemesOnElement(this, this.hass.themes, this._config.theme);
@@ -186,7 +145,6 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
 
   private renderStyle(): TemplateResult {
     return html`
-      ${this._roundSliderStyle}
       <style>
         :host {
           display: block;
@@ -220,45 +178,20 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
 
         #light {
           margin: 0 auto;
-          padding-top: 16px;
+          padding-top: 0;
-          padding-bottom: 16px;
+          padding-bottom: 32px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          height: 160px;
+          width: 160px;
         }
-
+        #light round-slider {
-        #light .rs-bar.rs-transition.rs-first,
-        .rs-bar.rs-transition.rs-second {
           z-index: 20 !important;
-        }
+          margin: 0 auto;
-
+          display: inline-block;
-        #light .rs-range-color {
+          --round-slider-path-color: var(--disabled-text-color);
-          background-color: var(--primary-color);
+          --round-slider-bar-color: var(--primary-color);
-        }
-
-        #light .rs-path-color {
-          background-color: var(--disabled-text-color);
-        }
-
-        #light .rs-handle {
-          background-color: var(--paper-card-background-color, white);
-          padding: 7px;
-          border: 2px solid var(--disabled-text-color);
-        }
-
-        #light .rs-handle.rs-focus {
-          border-color: var(--primary-color);
-        }
-
-        #light .rs-handle:after {
-          border-color: var(--primary-color);
-          background-color: var(--primary-color);
-        }
-
-        #light .rs-border {
-          border-color: var(--rail-border-color);
-        }
-
-        #light .rs-inner.rs-bg-color.rs-border,
-        #light .rs-overlay.rs-transition.rs-bg-color {
-          background-color: var(--paper-card-background-color, white);
         }
 
         .light-icon {
@@ -278,7 +211,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
         }
 
         .name {
-          padding-top: 40px;
+          padding-top: 32px;
           font-size: var(--name-font-size);
         }
 
@@ -287,7 +220,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
           position: absolute;
           margin: 0 auto;
           left: 50%;
-          top: 50%;
+          top: 45%;
           transform: translate(-50%);
           opacity: 0;
           transition: opacity 0.5s ease-in-out;
@@ -314,7 +247,10 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
   }
 
   private _dragEvent(e: any): void {
-    this.shadowRoot!.querySelector(".brightness")!.innerHTML = e.value + "%";
+    this.shadowRoot!.querySelector(".brightness")!.innerHTML =
+      e.detail.value + "%";
+    this._showBrightness();
+    this._hideBrightness();
   }
 
   private _showBrightness(): void {
@@ -335,7 +271,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
   private _setBrightness(e: any): void {
     this.hass!.callService("light", "turn_on", {
       entity_id: this._config!.entity,
-      brightness_pct: e.value,
+      brightness_pct: e.detail.value,
     });
   }
 

yarn.lock

@@ -1509,6 +1509,13 @@
   resolved "https://registry.yarnpkg.com/@sinonjs/text-encoding/-/text-encoding-0.7.1.tgz#8da5c6530915653f3a1f38fd5f101d8c3f8079c5"
   integrity sha512-+iTbntw2IZPb/anVDbypzfQa+ay64MW0Zo8aJ8gZPWMMK6/OubMVb6lUPMagqjOPnmtauXnFCACVl3O7ogjeqQ==
 
+"@thomasloven/round-slider@^0.2.2":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@thomasloven/round-slider/-/round-slider-0.2.2.tgz#498e2d0b545cefd457c1249e3f90dec9b91dd91b"
+  integrity sha512-nh4Um3srnTnWaOWkq6sMaXsSgn07MfV/u5rjFZAoSETJrLCBkwWM5IToN3Tqy9SSQk6Zonk1/wpcY5tdACq2lg==
+  dependencies:
+    lit-element "^2.2.1"
+
 "@types/babel-generator@^6.25.1":
   version "6.25.3"
   resolved "https://registry.yarnpkg.com/@types/babel-generator/-/babel-generator-6.25.3.tgz#8f06caa12d0595a0538560abe771966d77d29286"
@@ -8588,6 +8595,13 @@ lit-element@^2.0.1, lit-element@^2.2.0:
   dependencies:
     lit-html "^1.0.0"
 
+lit-element@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-2.2.1.tgz#79c94d8cfdc2d73b245656e37991bd1e4811d96f"
+  integrity sha512-ipDcgQ1EpW6Va2Z6dWm79jYdimVepO5GL0eYkZrFvdr0OD/1N260Q9DH+K5HXHFrRoC7dOg+ZpED2XE0TgGdXw==
+  dependencies:
+    lit-html "^1.0.0"
+
 lit-html@^1.0.0, lit-html@^1.1.0, lit-html@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-1.1.2.tgz#2e3560a7075210243649c888ad738eaf0daa8374"