Player visual indicator of button pressed (#1353)

panel/models/player.ts

@@ -2,12 +2,24 @@ import * as p from "@bokehjs/core/properties"
 import {div} from "@bokehjs/core/dom"
 import {Widget, WidgetView} from "@bokehjs/models/widgets/widget"
 
+
+function press(btn_list: HTMLButtonElement[]): void {
+  btn_list.forEach((btn) => btn.style.borderStyle = 'inset')
+}
+
+function unpress(btn_list: HTMLButtonElement[]): void {
+  btn_list.forEach((btn) => btn.style.borderStyle = 'outset')
+}
+
 export class PlayerView extends WidgetView {
   model: Player
 
   protected sliderEl: HTMLInputElement
   protected loop_state: HTMLFormElement
   protected timer: any
+  protected _toggle_reverse: CallableFunction
+  protected _toogle_pause: CallableFunction
+  protected _toggle_play: CallableFunction
 
   connect_signals(): void {
     super.connect_signals()
@@ -99,6 +111,20 @@ export class PlayerView extends WidgetView {
     faster.onclick = () => this.faster()
     button_div.appendChild(faster)
 
+    // toggle
+    this._toggle_reverse = () => {
+      unpress([pause, play])
+      press([reverse])
+    }
+    this._toogle_pause = () => {
+      unpress([reverse, play])
+      press([pause])
+    }
+    this._toggle_play = () => {
+      unpress([reverse, pause])
+      press([play])
+    }
+
     // Loop control
     this.loop_state = document.createElement('form')
     this.loop_state.style.cssText = "margin: 0 auto; display: table"
@@ -240,6 +266,7 @@ export class PlayerView extends WidgetView {
   }
 
   pause_animation(): void {
+    this._toogle_pause()
     this.model.direction = 0;
     if (this.timer) {
       clearInterval(this.timer);
@@ -249,13 +276,15 @@ export class PlayerView extends WidgetView {
 
   play_animation(): void {
     this.pause_animation();
+    this._toggle_play()
     this.model.direction = 1;
     if (!this.timer)
       this.timer = setInterval(() => this.anim_step_forward(), this.model.interval);
   }
 
   reverse_animation(): void {
     this.pause_animation();
+    this._toggle_reverse()
     this.model.direction = -1;
     if (!this.timer)
       this.timer = setInterval(() => this.anim_step_reverse(), this.model.interval);