added speed control

src/leaflet-player-control.css

@@ -59,6 +59,11 @@
 .player-horizontal-control {
     min-width: 130px;
 }
+
+.player-time {
+    height: 24px;
+}
+
 .player-horizontal-timeselect {
     min-width: 200px;
 }

src/leaflet-player-control.js

@@ -212,8 +212,28 @@ var L;
                     }
                 });
                 self.slider = $(timeSliderDiv).data("ionRangeSlider");
-                self.timeSelect = L.DomUtil.create('select', 'uk-width-1-1 uk-text-bold', timeSelectDiv);
+                self.timeSelect = L.DomUtil.create('select', 'uk-width-4-6 uk-text-bold player-time', timeSelectDiv);
                 self.updateTimeSelect(self.slider.result.min, self.slider.result.max);
+                var transitionButton = L.DomUtil.create('button', 'uk-button uk-button-small uk-text-bold uk-width-2-6', timeSelectDiv);
+                var tachometerIcon = L.DomUtil.create('span', 'uk-icon-tachometer', transitionButton);
+                var transitionSpeed = 1;
+                var title = document.createTextNode(' x' + transitionSpeed);
+                transitionButton.appendChild(title);
+                transitionButton.onclick = function () {
+                    switch (transitionSpeed) {
+                        case 1:
+                            transitionSpeed = 2;
+                            break;
+                        case 2:
+                            transitionSpeed = 4;
+                            break;
+                        case 4:
+                            transitionSpeed = 1;
+                            break;
+                    }
+                    self.player.setTransitionTime(self.transitionTime / transitionSpeed);
+                    title = self.replaceText(transitionButton, ' x' + transitionSpeed, title);
+                };
                 var timeButtonGroup = L.DomUtil.create('div', 'uk-button-group', controlsDiv);
                 var stepStart = L.DomUtil.create('button', 'uk-button player-button', timeButtonGroup);
                 var stepStartIcon = L.DomUtil.create('span', 'uk-icon-step-backward', stepStart);
@@ -333,6 +353,11 @@ var L;
                     });
                 };
             };
+            Player.prototype.replaceText = function (item, newText, oldChild) {
+                var newChild = document.createTextNode(newText);
+                item.replaceChild(newChild, oldChild);
+                return newChild;
+            };
             Player.prototype.disable = function () {
                 this.playerDiv.classList.add('player-disable');
             };

src/leaflet-player-control.ts

@@ -235,9 +235,31 @@ export class Player extends L.Control {
             }  
         });
         self.slider = $(timeSliderDiv).data("ionRangeSlider");
-        self.timeSelect = <HTMLSelectElement>L.DomUtil.create('select', 'uk-width-1-1 uk-text-bold', timeSelectDiv);
+        self.timeSelect = <HTMLSelectElement>L.DomUtil.create('select', 'uk-width-4-6 uk-text-bold player-time', timeSelectDiv);
         self.updateTimeSelect(self.slider.result.min, self.slider.result.max);
 
+        var transitionButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button uk-button-small uk-text-bold uk-width-2-6', timeSelectDiv);
+        var tachometerIcon = <HTMLSpanElement>L.DomUtil.create('span', 'uk-icon-tachometer', transitionButton);
+        var transitionSpeed = 1;        
+        var title = document.createTextNode(' x'+transitionSpeed);
+        transitionButton.appendChild(title);
+        transitionButton.onclick = function() {
+            switch (transitionSpeed) {
+                case 1:
+                    transitionSpeed = 2;    
+                    break;
+                case 2:
+                    transitionSpeed = 4;                   
+                    break;
+                case 4:
+                    transitionSpeed = 1;                   
+                    break;
+            }
+            self.player.setTransitionTime(self.transitionTime/transitionSpeed);               
+            title = self.replaceText(transitionButton, ' x'+transitionSpeed, title ); 
+        };
+
+
         var timeButtonGroup = <HTMLDivElement>L.DomUtil.create('div', 'uk-button-group', controlsDiv);
         var stepStart = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button player-button', timeButtonGroup);
         var stepStartIcon = <HTMLSpanElement>L.DomUtil.create('span', 'uk-icon-step-backward', stepStart);
@@ -358,6 +380,13 @@ export class Player extends L.Control {
         };        
     }
 
+    private replaceText(item, newText, oldChild) {
+        var newChild = document.createTextNode(newText);
+        item.replaceChild(newChild, oldChild);
+        return newChild;
+    }
+
+
     public disable() {
        this.playerDiv.classList.add('player-disable');
     }
@@ -367,7 +396,9 @@ export class Player extends L.Control {
            this.playerDiv.classList.remove('player-disable');
         }
     }        
-    
+
+
+
     private updateTimeSelect(min, max) {
         var self = this;
         // clear