feat(pushbutton): ctrl+press = hold

Author: yoavw

src/pushbutton-element.ts

@@ -38,15 +38,17 @@ export class PushbuttonElement extends LitElement {
 
   render() {
     const { color } = this;
+    const buttonFill = this.pressed ? 'url(#grad-down)' : 'url(#grad-up)';
+
     return html`
       <button
         aria-label="${color} pushbutton"
         @mousedown=${this.down}
-        @mouseup=${this.up}
+        @mouseup=${(e: MouseEvent) => !e.ctrlKey && this.up()}
         @touchstart=${this.down}
         @touchend=${this.up}
         @keydown=${(e: KeyboardEvent) => SPACE_KEYS.includes(e.key) && this.down()}
-        @keyup=${(e: KeyboardEvent) => SPACE_KEYS.includes(e.key) && this.up()}
+        @keyup=${(e: KeyboardEvent) => SPACE_KEYS.includes(e.key) && !e.ctrlKey && this.up()}
       >
         <svg
           width="18mm"
@@ -92,7 +94,7 @@ export class PushbuttonElement extends LitElement {
             />
           </g>
           <g class="clickable-element">
-            <circle class="button-circle" cx="6" cy="6" r="3.822" fill="url(#grad-up)" />
+            <circle class="button-circle" cx="6" cy="6" r="3.822" fill="${buttonFill}" />
             <circle
               cx="6"
               cy="6"