feat(audioButtons): move components to directory under app, replacing…

… existing volume directive
QutEcoacoustics · Sep 7, 2017 · ed0fc18 · ed0fc18
1 parent 5b80107
commit ed0fc18
Show file tree

Hide file tree

Showing 14 changed files with 38 additions and 236 deletions.
diff --git 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
diff --git a/src/app/audioControl/volumeControl.tpl.html b/src/app/audioControl/volumeControl.tpl.html
diff --git a/src/app/audioControl/_volumeControl.scss → src/app/audioControls/_volumeControl.scss b/src/app/audioControl/_volumeControl.scss → 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
@@ -0,0 +1,4 @@
+angular.module("bawApp.audioControls",[
+    "bawApp.audioControls.playButton",
+    "bawApp.audioControls.volumeSlider"
+]);
diff --git a/...nts/directives/audioButtons/playButton.js → src/app/audioControls/playButton.js b/...nts/directives/audioButtons/playButton.js → 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/...rectives/audioButtons/playButton.tpl.html → src/app/audioControls/playButton.tpl.html b/...rectives/audioButtons/playButton.tpl.html → src/app/audioControls/playButton.tpl.html
diff --git a/src/app/audioControls/volumeSlider.js 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/...ctives/audioButtons/volumeSlider.tpl.html → src/app/audioControls/volumeSlider.tpl.html b/...ctives/audioButtons/volumeSlider.tpl.html → src/app/audioControls/volumeSlider.tpl.html
@@ -1,5 +1,5 @@
 
-<div class="volume-control">
+
 <div class="input-group-btn">
     <button id="volumeControl-mute"
             class="btn btn-default"
@@ -15,4 +15,3 @@
            max="1" min="0" step="0.01"
            ng-disabled="$ctrl.audioElementModel.muted"
            title="{{ 'Volume ' + ($ctrl.audioElementModel.volume * 100 | number:0) }}">
-</div>
diff --git a/src/app/citizenScience/bristlebird/listen.tpl.html b/src/app/citizenScience/bristlebird/listen.tpl.html
@@ -51,10 +51,12 @@ <h2>Eastern Bristlebird Search
                     </toggle-switch>
                 </div>
 
-                <volume-slider audio-element-model="audioElementModel"></volume-slider>
+                <volume-slider class="input-group btn-group form-group form-group-without-feedback" audio-element-model="audioElementModel"></volume-slider>
+
 
             </nav>
 
+
             <citizen-science-labels labels="labels"
                                     samples="samples"
                                     current-sample-num="currentSampleNum"

diff --git a/src/app/listen/listen.tpl.html b/src/app/listen/listen.tpl.html
@@ -90,8 +90,8 @@ <h1 id="chunkInfo" class="row">
                 </div>
 
                 <!-- form-group form-group-without-feedback required here due to a bug with ngFormGroup -->
-                <volume-control model="model.audioElement"
-                                class="input-group btn-group form-group form-group-without-feedback"></volume-control>
+                <volume-slider audio-element-model="model.audioElement"
+                                class="input-group btn-group form-group form-group-without-feedback"></volume-slider>
 
                 <toggle-switch model="model.audioElement.autoPlay" disabled="disabled" mode="push-toggle"
                                title="Enable/disable autoplay">

diff --git a/src/components/directives/audioButtons/_volumeControl.scss b/src/components/directives/audioButtons/_volumeControl.scss
diff --git a/src/components/directives/audioButtons/volumeSlider.js b/src/components/directives/audioButtons/volumeSlider.js
diff --git 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"
     ]);