From ed0fc1869aa060985138f476e396a5f96413b0a4 Mon Sep 17 00:00:00 2001 From: Philip Eichinski Date: Thu, 7 Sep 2017 11:26:23 +1000 Subject: [PATCH] feat(audioButtons): move components to directory under app, replacing existing volume directive --- src/app/app.js | 2 +- src/app/audioControl/volumeControl.js | 53 ------- src/app/audioControl/volumeControl.tpl.html | 13 -- .../_volumeControl.scss | 2 +- src/app/audioControls/audioControls.js | 4 + .../audioControls}/playButton.js | 7 +- .../audioControls}/playButton.tpl.html | 0 src/app/audioControls/volumeSlider.js | 22 +++ .../audioControls}/volumeSlider.tpl.html | 3 +- .../bristlebird/listen.tpl.html | 4 +- src/app/listen/listen.tpl.html | 4 +- .../audioButtons/_volumeControl.scss | 131 ------------------ .../directives/audioButtons/volumeSlider.js | 26 ---- src/components/directives/directives.js | 3 +- 14 files changed, 38 insertions(+), 236 deletions(-) delete mode 100644 src/app/audioControl/volumeControl.js delete mode 100644 src/app/audioControl/volumeControl.tpl.html rename src/app/{audioControl => audioControls}/_volumeControl.scss (99%) create mode 100644 src/app/audioControls/audioControls.js rename src/{components/directives/audioButtons => app/audioControls}/playButton.js (77%) rename src/{components/directives/audioButtons => app/audioControls}/playButton.tpl.html (100%) create mode 100644 src/app/audioControls/volumeSlider.js rename src/{components/directives/audioButtons => app/audioControls}/volumeSlider.tpl.html (94%) delete mode 100644 src/components/directives/audioButtons/_volumeControl.scss delete mode 100644 src/components/directives/audioButtons/volumeSlider.js diff --git a/src/app/app.js b/src/app/app.js index 5533c239..a45aa4b1 100644 --- a/src/app/app.js +++ b/src/app/app.js @@ -89,7 +89,7 @@ angular.module("baw", "bawApp.models", - "audio-control", + "bawApp.audioControls", "draggabilly", "bawApp.d3", /* our d3 controls */ diff --git a/src/app/audioControl/volumeControl.js b/src/app/audioControl/volumeControl.js deleted file mode 100644 index bf426193..00000000 --- a/src/app/audioControl/volumeControl.js +++ /dev/null @@ -1,53 +0,0 @@ -var acds = acds || angular.module("audio-control", []); - -/** - * A directive for binding the volume of an audio element to some DOM. - * - */ -acds.directive("volumeControl", ["$parse", function ($parse) { - return { - restrict: "E", - scope: { - model: "=" - }, - templateUrl: "audioControl/volumeControl.tpl.html", - link: function(scope, $element, attrs, controller, transcludeFunc) { - - // get instances of the mute button and the slider - var element = $element[0], - muteButton = element.querySelector("#volumeControl-mute"), - slider = element.querySelector("#volumeControl-slider") - ; - - // set up binding - // volume - scope.$watch(function(){ - return scope.model ? scope.model.volume : null; - }, function volumeChanged(newValue, oldValue) { - scope.volume = newValue ? newValue * 100 : null; - }); - - // 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.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 deleted file mode 100644 index dcbcebf3..00000000 --- a/src/app/audioControl/volumeControl.tpl.html +++ /dev/null @@ -1,13 +0,0 @@ -
- -
- diff --git a/src/app/audioControl/_volumeControl.scss b/src/app/audioControls/_volumeControl.scss similarity index 99% rename from src/app/audioControl/_volumeControl.scss rename to src/app/audioControls/_volumeControl.scss index 1366a39f..0257117c 100644 --- a/src/app/audioControl/_volumeControl.scss +++ b/src/app/audioControls/_volumeControl.scss @@ -1,5 +1,5 @@ //noinspection CssInvalidHtmlTagReference -volume-control { +volume-slider { width: 150px; diff --git a/src/app/audioControls/audioControls.js b/src/app/audioControls/audioControls.js new file mode 100644 index 00000000..76cac5aa --- /dev/null +++ b/src/app/audioControls/audioControls.js @@ -0,0 +1,4 @@ +angular.module("bawApp.audioControls",[ + "bawApp.audioControls.playButton", + "bawApp.audioControls.volumeSlider" +]); \ No newline at end of file diff --git a/src/components/directives/audioButtons/playButton.js b/src/app/audioControls/playButton.js similarity index 77% rename from src/components/directives/audioButtons/playButton.js rename to src/app/audioControls/playButton.js index b0813513..54aea437 100644 --- a/src/components/directives/audioButtons/playButton.js +++ b/src/app/audioControls/playButton.js @@ -1,8 +1,7 @@ -var audioButtons = audioButtons || angular.module("bawApp.components.audioButtons", []); - -audioButtons.component("playButton", { - templateUrl: "components/directives/audioButtons/playButton.tpl.html", +angular.module("bawApp.audioControls.playButton", []) + .component("playButton", { + templateUrl: "audioControls/playButton.tpl.html", controller: [ "$scope", function ($scope) { diff --git a/src/components/directives/audioButtons/playButton.tpl.html b/src/app/audioControls/playButton.tpl.html similarity index 100% rename from src/components/directives/audioButtons/playButton.tpl.html rename to src/app/audioControls/playButton.tpl.html diff --git a/src/app/audioControls/volumeSlider.js b/src/app/audioControls/volumeSlider.js new file mode 100644 index 00000000..a62efcd6 --- /dev/null +++ b/src/app/audioControls/volumeSlider.js @@ -0,0 +1,22 @@ +angular.module("bawApp.audioControls.volumeSlider", []) + .component("volumeSlider", { + templateUrl: "audioControls/volumeSlider.tpl.html", + controller: [ + "$scope", + function ($scope) { + + var self = this; + + /** + * toggles the value for muted on the audio model + */ + $scope.toggleMute = function () { + self.audioElementModel.muted = !self.audioElementModel.muted; + }; + + }], + bindings: { + audioElementModel: "=" + } + }); + diff --git a/src/components/directives/audioButtons/volumeSlider.tpl.html b/src/app/audioControls/volumeSlider.tpl.html similarity index 94% rename from src/components/directives/audioButtons/volumeSlider.tpl.html rename to src/app/audioControls/volumeSlider.tpl.html index 55931198..04832a0e 100644 --- a/src/components/directives/audioButtons/volumeSlider.tpl.html +++ b/src/app/audioControls/volumeSlider.tpl.html @@ -1,5 +1,5 @@ -
+
\ No newline at end of file diff --git a/src/app/citizenScience/bristlebird/listen.tpl.html b/src/app/citizenScience/bristlebird/listen.tpl.html index 7ee33f3a..1a8bf6d5 100644 --- a/src/app/citizenScience/bristlebird/listen.tpl.html +++ b/src/app/citizenScience/bristlebird/listen.tpl.html @@ -51,10 +51,12 @@

Eastern Bristlebird Search

- + + + - + diff --git a/src/components/directives/audioButtons/_volumeControl.scss b/src/components/directives/audioButtons/_volumeControl.scss deleted file mode 100644 index b795b0b1..00000000 --- a/src/components/directives/audioButtons/_volumeControl.scss +++ /dev/null @@ -1,131 +0,0 @@ -//noinspection CssInvalidHtmlTagReference -.volume-control { - - width: 150px; - - #volumeControl-mute { - - span { - @extend .glyphicon; - font-size: 13.6px; - &:before { - @extend .glyphicon-volume-up:before; - } - - } - - &.muted { - span { - &:before { - @extend .glyphicon-volume-off:before; - } - } - } - - } - - - - - #volumeControl-slider { - - -webkit-appearance: none; - margin-left:-1px; - position:relative; - - &:focus{ - z-index:1; - } - - // 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/components/directives/audioButtons/volumeSlider.js b/src/components/directives/audioButtons/volumeSlider.js deleted file mode 100644 index 94fe46e1..00000000 --- a/src/components/directives/audioButtons/volumeSlider.js +++ /dev/null @@ -1,26 +0,0 @@ -var audioButtons = audioButtons || angular.module("bawApp.components.audioButtons", []); - - - -audioButtons.component("volumeSlider", { - templateUrl: "components/directives/audioButtons/volumeSlider.tpl.html", - controller: [ - "$scope", - function ($scope) { - - var self = this; - - /** - * toggles the value for muted on the audio model - */ - $scope.toggleMute = function () { - self.audioElementModel.muted = !self.audioElementModel.muted; - }; - - - }], - bindings: { - audioElementModel: "=" - } -}); - diff --git a/src/components/directives/directives.js b/src/components/directives/directives.js index f20f3b93..89a95564 100644 --- a/src/components/directives/directives.js +++ b/src/components/directives/directives.js @@ -11,7 +11,6 @@ angular.module("bawApp.directives", "bawApp.directives.ngAudio", "bawApp.directives.inputRange", "bawApp.directives.toggleSwitch", - "bawApp.directives.ngForm", - "bawApp.components.audioButtons" + "bawApp.directives.ngForm" ]);