From 291df7588f7b59f42143e8143a2e151a745af2de Mon Sep 17 00:00:00 2001 From: Anthony Truskinger Date: Tue, 17 Dec 2013 20:05:51 +1000 Subject: [PATCH] Finished work on volume control. It is bound correctly and styled. Ready for review. --- src/app/app.js | 1 + src/app/audioControl/_volumeControl.scss | 125 ++++++++++++++++++++ src/app/audioControl/volumeControl.js | 48 +++++--- src/app/audioControl/volumeControl.tpl.html | 19 +-- src/app/listen/listen.tpl.html | 2 + src/components/directives/ngAudio.js | 33 +++++- src/index.html | 124 +++++++++---------- src/sass/application.tpl.scss | 1 + 8 files changed, 265 insertions(+), 88 deletions(-) create mode 100644 src/app/audioControl/_volumeControl.scss diff --git a/src/app/app.js b/src/app/app.js index 11f0ae08..42caa7f7 100644 --- a/src/app/app.js +++ b/src/app/app.js @@ -70,6 +70,7 @@ var app = angular.module('baw', 'bawApp.filters', /* our filters.js */ 'bawApp.services', /* our services.js */ 'bawApp.services.unitConverter', + 'audio-control', 'http-auth-interceptor', /* the auth module */ 'angular-auth', /* the auth module */ diff --git a/src/app/audioControl/_volumeControl.scss b/src/app/audioControl/_volumeControl.scss new file mode 100644 index 00000000..cf941662 --- /dev/null +++ b/src/app/audioControl/_volumeControl.scss @@ -0,0 +1,125 @@ +//noinspection CssInvalidHtmlTagReference +volume-control { + + width: 150px; + + #volumeControl-mute { + + span { + @extend .glyphicon; + + &:before { + @extend .glyphicon-volume-up:before; + } + + } + + &.muted { + span { + &:before { + @extend .glyphicon-volume-off:before; + } + } + } + + } + + + + + #volumeControl-slider { + + -webkit-appearance: none; + + // track + $track-height : 2px; + $thumb-size: 10px; + @mixin track { + background-color: $btn-default-color; + border: none; + height: $track-height; + + } + + &::-ms-track { + + color: transparent; + border: none; + @include track; + } + &::-moz-range-track { + @include track; + } + &::-webkit-slider-runnable-track { + @include track; + } + + + // thumb + @mixin thumb { + background: none ; + //background-color: blue; + background-color: $btn-default-bg; + width: $thumb-size; + height: $thumb-size; + border: solid $btn-default-color 1px; + @include rounded-corners(50%); + @include vendor-prefix(box-sizing, border-box); + } + + &::-ms-thumb { + @include thumb; + } + &::-moz-range-thumb { + @include thumb; + } + &::-webkit-slider-thumb { + -webkit-appearance: none; + margin-top: - ($thumb-size / 2 ) + ($track-height/2); + @include thumb; + + } + + // before + &::-ms-fill-lower { + border: none; + background:none; + } + + &::-ms-ticks-before { + display: none; + border: none; + background:none; + } + + // after + &::-ms-fill-upper { + border: none; + background:none; + + } + + &::-ms-ticks-after { + display: none; + border: none; + background:none; + } + } + + +} + +/* + +glyphicon glyphicon-volume-down +glyphicon glyphicon-volume-off +glyphicon glyphicon-volume-up + +.decipher-tags-taglist .icon-remove { + @extend .glyphicon; + + &:before { + @extend .glyphicon-remove:before; + } +} +*/ \ No newline at end of file diff --git a/src/app/audioControl/volumeControl.js b/src/app/audioControl/volumeControl.js index 225308bf..eab939c1 100644 --- a/src/app/audioControl/volumeControl.js +++ b/src/app/audioControl/volumeControl.js @@ -1,39 +1,53 @@ -var acds = acds || angular.module('audio-control', []); +var acds = acds || angular.module("audio-control", []); /** * A directive for binding the volume of an audio element to some DOM. * */ -bawds.directive('volumeControl', ['$parse', function ($parse) { +acds.directive("volumeControl", ["$parse", function ($parse) { return { restrict: "E", scope: { - ngAudio: "=" + model: "=" }, templateUrl: "audioControl/volumeControl.tpl.html", - link: function(scope, element, attrs, controller, transcludeFunc) { + link: function(scope, $element, attrs, controller, transcludeFunc) { // get instances of the mute button and the slider - var muteButton = null, - slider = null; + var element = $element[0], + muteButton = element.querySelector("#volumeControl-mute"), + slider = element.querySelector("#volumeControl-slider") + ; // set up binding - scope.$watch("expression", function volumeChanged(newValue, oldValue) { - + // volume + scope.$watch(function(){ + return scope.model ? scope.model.volume : null; + }, function volumeChanged(newValue, oldValue) { + scope.volume = newValue ? newValue * 100 : null; }); - scope.$watch("expression", function mutedChanged(newValue, oldValue) { - + // muted + scope.$watch(function(){ + return scope.model ? scope.model.muted : null; + }, function mutedChanged(newValue, oldValue) { + scope.muted = newValue; }); // bind from the inputs to the model - muteButton.click = function() { - - }; - - slider.click(function() { - + muteButton.addEventListener('click', function() { + scope.$apply(function() { + scope.model.muted = !scope.model.muted; + }); }); + + function sliderChanged() { + scope.$apply(function() { + scope.model.volume = parseFloat(slider.value) / 100; + }); + } + slider.addEventListener('input', sliderChanged); + //slider.click(); } - } + }; }]); \ No newline at end of file diff --git a/src/app/audioControl/volumeControl.tpl.html b/src/app/audioControl/volumeControl.tpl.html index 92336091..dcbcebf3 100644 --- a/src/app/audioControl/volumeControl.tpl.html +++ b/src/app/audioControl/volumeControl.tpl.html @@ -1,8 +1,13 @@ -
- +
+
-
- - - -
\ No newline at end of file + diff --git a/src/app/listen/listen.tpl.html b/src/app/listen/listen.tpl.html index b1275762..247a7fb9 100644 --- a/src/app/listen/listen.tpl.html +++ b/src/app/listen/listen.tpl.html @@ -31,7 +31,9 @@

Site: {{model.audioRecording.siteId}}, +

+
diff --git a/src/components/directives/ngAudio.js b/src/components/directives/ngAudio.js index e17e6b68..105d826e 100644 --- a/src/components/directives/ngAudio.js +++ b/src/components/directives/ngAudio.js @@ -16,6 +16,31 @@ bawds.directive('ngAudio', ['$parse', function ($parse) { throw 'Cannot put ngAudio element on an element that is not a
-
-
- -

- Go back to the parent website and sign in again please. -

- - - - - - + + + + + + + + + + + + + + - - - + + + - - - + + + - - - - + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/sass/application.tpl.scss b/src/sass/application.tpl.scss index e5241091..f5a3c803 100644 --- a/src/sass/application.tpl.scss +++ b/src/sass/application.tpl.scss @@ -31,6 +31,7 @@ $DEBUG: '<%= build_configs.current.key === "development" %>' == 'true'; /* C:\Work\GitHub\baw-client\src\sass [master +0 ~1 -0]> ls ../app/ -Recurse -Include "*.scss" | Resolve-Path -Relative | %{ '@import "' + $_ + '";' } | % {$_ -replace '\\', '/'} | % {$_ -replace '/_(.*).scss', '/$1'} | Out-Clipboard */ +@import "../app/audioControl/_volumeControl.scss"; @import "../app/annotationViewer/annotation_viewer"; @import "../app/audioEvents/audio_events"; @import "../app/bookmarks/bookmarks";