Fixed navbar bug. created specialised binding and styles to ensure co…

…nsitent visuals
QutEcoacoustics · Jan 17, 2014 · b9e948d · b9e948d
1 parent 97b92e4
commit b9e948d
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 1 deletion.
diff --git a/src/app/listen/_listen.scss b/src/app/listen/_listen.scss
@@ -3,6 +3,8 @@
 
   input[type="range"] {
     width: 300px;
+
+
   }
 
   &>span {
@@ -11,6 +13,20 @@
   }
 }
 
+.hide-thumb {
+
+  &::-ms-thumb {
+    opacity: 0;
+  }
+  &::-moz-range-thumb {
+    opacity: 0;
+  }
+  &::-webkit-slider-thumb {
+    opacity: 0;
+  }
+
+}
+
 
 .position {
   & span {

diff --git a/src/app/listen/listen.js b/src/app/listen/listen.js
@@ -72,6 +72,7 @@ angular.module('bawApp.listen', ['decipher.tags', 'ui.bootstrap.typeahead'])
 
 
                 // set up some dummy objects for use later
+                $scope.jumpToHide = true;
                 $scope.model = {
                     audioElement: {},
                     audioEvents: [],
@@ -153,6 +154,7 @@ angular.module('bawApp.listen', ['decipher.tags', 'ui.bootstrap.typeahead'])
                         var maxMinutes = Math.floor(parseFloat($scope.model.audioRecording.durationSeconds) / 60);
                         $scope.jumpToMax = maxMinutes;
                         $scope.jumpToMinute = Math.floor( parseFloat($routeParams.start) / 60);
+                        $scope.jumpToHide = false;
                     },
                     function audioRecordingGetFailure() {
                         console.error("retrieval of audioRecording json failed");

diff --git a/src/app/listen/listen.tpl.html b/src/app/listen/listen.tpl.html
@@ -11,7 +11,7 @@ <h4 id="chunkInfo" class="row">
                 </span>
             <span class="col-md-4">
                 Jump to minute:
-                <input type="range" ng-model="jumpToMinute" min="0" max="{{jumpToMax}}" step="1" ></input>
+                <input ng-class="{'hide-thumb' : jumpToHide}" type="range" min="0" max="{{jumpToMax}}" ng-slider="jumpToMinute"  step="1"  ></input>
                 <span>{{jumpToMinute}}</span>
                 <button class="btn btn-default" ng-click="jumpTo()" >Go</button>
             </span>

diff --git a/src/components/directives/input[type=range].js b/src/components/directives/input[type=range].js
@@ -0,0 +1,26 @@
+var bawds = bawds || angular.module('bawApp.directives', ['bawApp.configuration']);
+
+bawds.directive("ngSlider", function () {
+    return {
+        restrict: 'A',
+        link: function (scope, $element, attrs) {
+            var element = $element[0];
+
+            var updateScope = function () {
+                scope.$apply(function () {
+                    scope[attrs.ngSlider] = element.value;
+                });
+            };
+
+            $element.bind("change", updateScope);
+
+            scope.$watch(function () {
+                return scope[attrs.ngSlider];
+            }, function (newValue) {
+                element.value = newValue;
+            });
+
+
+        }
+    };
+});