feat: Add possibility to theme circle selector using css

caalador · Dec 27, 2021 · a559a19 · a559a19
1 parent 7bca7bb
commit a559a19
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 11 deletions.
diff --git a/TimeSelector-demo/src/main/java/org/percepta/mgrankvi/TimeSelectorDemo.java b/TimeSelector-demo/src/main/java/org/percepta/mgrankvi/TimeSelectorDemo.java
@@ -20,6 +20,7 @@
 import com.vaadin.flow.component.html.Span;
 import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
+import com.vaadin.flow.dom.Style;
 import com.vaadin.flow.router.Route;
 
 @Route("")
@@ -37,9 +38,22 @@ public TimeSelectorDemo() {
         circle.setVisibleValues(5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 0);
         circle.setValue(17);
 
-        Span circle_text = new Span("CircleSelect selection: " + circle.getValue());
-        circle.addValueChangeListener(event -> circle_text.setText("CircleSelect selection: " + circle.getValue()));
+        Span circle_text = new Span(
+                "CircleSelect selection: " + circle.getValue());
+        circle.addValueChangeListener(event -> circle_text.setText(
+                "CircleSelect selection: " + circle.getValue()));
 
         add(timeSelector, new HorizontalLayout(circle, circle_text));
+
+        CircleSelect theme = new CircleSelect();
+        theme.setSectors(24);
+        theme.setVisibleValues(2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24);
+        final Style style = theme.getElement().getStyle();
+        style.set("--circle-inside", "GhostWhite");
+        style.set("--circle-selector", "Indigo");
+        style.set("--circle-selector-dot", "RebeccaPurple");
+        style.set("--circle-text", "SpringGreen");
+
+        add(theme);
     }
 }
diff --git a/TimeSelector/src/main/resources/META-INF/frontend/CircleSelector.js b/TimeSelector/src/main/resources/META-INF/frontend/CircleSelector.js
@@ -19,6 +19,16 @@ import {html} from '@polymer/polymer/lib/utils/html-tag.js';
 class CircleSelector extends PolymerElement {
   static get template() {
     return html`
+        <style>
+            :host {
+                --circle-stroke: gray;
+                --circle-inside: white;
+                --circle-selector: mediumaquamarine;
+                --circle-selector-dot: seagreen;
+                --circle-text: black;
+            }
+        </style>
+        
         <canvas on-mousemove="_onMouseMove" on-mouseout="_onMouseOut" on-click="_onSelect"
                 id="canvas"></canvas>
         `;
@@ -77,26 +87,28 @@ class CircleSelector extends PolymerElement {
     if (!ctx)
       return;
 
+    let styles = window.getComputedStyle(this, ":host");
+
     let canvas = this.$.canvas;
     canvas.width = 250;
     canvas.height = 250;
 
-    ctx.fillStyle = "gray";
+    ctx.fillStyle = styles.getPropertyValue("--circle-stroke");
     ctx.beginPath();
     ctx.arc(this.circleX, this.circleY, this.radian, 0, 2 * Math.PI, false);
     ctx.closePath();
     ctx.stroke();
     ctx.fill();
 
     // Fill inside leaving only outside stroke.
-    ctx.fillStyle = "white";
+    ctx.fillStyle = styles.getPropertyValue("--circle-inside");
     ctx.beginPath();
     ctx.arc(this.circleX, this.circleY, this.radian, 0, 2 * Math.PI, false);
     ctx.closePath();
     ctx.fill();
 
     // Center dot
-    ctx.fillStyle = "gray";
+    ctx.fillStyle = styles.getPropertyValue("--circle-stroke");
     ctx.beginPath();
     ctx.arc(this.circleX, this.circleY, 1, 0, 2 * Math.PI, false);
     ctx.closePath();
@@ -112,12 +124,12 @@ class CircleSelector extends PolymerElement {
     }
 
     if (this.selection !== null) {
-      ctx.fillStyle = "gainsboro";
+      // ctx.fillStyle = "gainsboro";
 
       let degrees = (this.selection * (360 / (this.numSlices / 2)));
       let rad = (degrees * Math.PI / 180) - (0.5 * Math.PI);
 
-      ctx.strokeStyle = "mediumaquamarine";
+      ctx.strokeStyle = styles.getPropertyValue("--circle-selector");
       ctx.beginPath();
       ctx.moveTo(this.circleX, this.circleY);
       let radDistance = this.radian - 15;
@@ -131,22 +143,22 @@ class CircleSelector extends PolymerElement {
       ctx.stroke();
 
       ctx.beginPath();
-      ctx.fillStyle = "mediumaquamarine";
+      ctx.fillStyle = styles.getPropertyValue("--circle-selector");
       ctx.arc(x, y, Math.sqrt(textWidth * textWidth + 15 * 15) / 2, 0, 2 * Math.PI, false);
       ctx.closePath();
       ctx.fill();
 
       if(this._noNumber()) {
         ctx.beginPath();
-        ctx.fillStyle = "seagreen";
+        ctx.fillStyle = styles.getPropertyValue("--circle-selector-dot");
         ctx.arc(x, y, 2, 0, 2 * Math.PI, false);
         ctx.closePath();
         ctx.fill();
       }
     }
 
-    ctx.strokeStyle = "black";
-    ctx.fillStyle = "black";
+    ctx.strokeStyle = styles.getPropertyValue("--circle-text");
+    ctx.fillStyle = styles.getPropertyValue("--circle-text");
 
     for (var i = 0; i < this.numbers.length; i++) {
       let number = this.numbers[i];