fix(citizenScienceExamples): dealing with example spectrograms that a…

…re wider than the window
QutEcoacoustics · May 30, 2017 · 04416f7 · 04416f7
1 parent b67b418
commit 04416f7
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 6 deletions.
diff --git a/src/app/annotationLibrary/annotationItem.tpl.html b/src/app/annotationLibrary/annotationItem.tpl.html
@@ -13,8 +13,7 @@
 </div>
 <div class="audio-wrapper">
     <audio id="annoSingleAudio{{$index}}" controls
-           ng-audio="$ctrl.audioElement"
-           ng-style="{width:$ctrl.annotation.bounds.enforcedImageWidth}">
+           ng-audio="$ctrl.audioElement">
         <source ng-repeat="key in $ctrl.annotation.media.available.audioOrder"
                 ng-src="{{$ctrl.annotation.media.available.audio[key].url}}" src=""
                 type="{{$ctrl.annotation.media.available.audio[key].mediaType}}">

diff --git a/src/app/citizenScience/thumbLabels/examples.js b/src/app/citizenScience/thumbLabels/examples.js
@@ -1,6 +1,7 @@
 angular.module("bawApp.components.citizenScienceThumbLabels.examples",
     [
-        "bawApp.citizenScience.common"
+        "bawApp.citizenScience.common",
+        "bawApp.directives.scaleToFit"
     ])
     .component("citizenScienceLabelExamples", {
         templateUrl: "citizenScience/thumbLabels/examples.tpl.html",
@@ -56,8 +57,8 @@ angular.module("bawApp.components.citizenScienceThumbLabels.examples",
 
             }],
         bindings: {
-            examples: "=examples",
-            label: "=label"
+            examples: "=",
+            name: "="
         }
     }).directive("centerInWindow", ["$window", function ($window) {
 

diff --git a/src/app/citizenScience/thumbLabels/examples.tpl.html b/src/app/citizenScience/thumbLabels/examples.tpl.html
@@ -3,7 +3,7 @@
 
     <h3>
         <i class="fa fa-arrow-left arrow prev" aria-hidden="true" ng-click="changeCurExample(key, -1)"  ng-if="annotations.length>1"></i>
-        <span>{{label}} example{{(annotations.length) > 1 ? 's' : ''}}</span>
+        <span>{{$ctrl.name}} example{{(annotations.length) > 1 ? 's' : ''}}</span>
         <i class="fa fa-arrow-right arrow next" aria-hidden="true" ng-click="changeCurExample(key, 1)" ng-if="annotations.length>1"></i>
     </h3>
 

diff --git a/src/app/citizenScience/thumbLabels/label.tpl.html b/src/app/citizenScience/thumbLabels/label.tpl.html
@@ -7,6 +7,7 @@
 
     <citizen-science-label-examples
             center-in-window
+            name="$ctrl.label.name"
             examples="$ctrl.label.examples"
             ng-if="selected()"
     ></citizen-science-label-examples>

diff --git a/src/components/directives/scaleToFit.js b/src/components/directives/scaleToFit.js
@@ -0,0 +1,48 @@
+var scaleToFit = angular.module("bawApp.directives.scaleToFit", []);
+
+
+scaleToFit.directive("scaleToFit",
+    ["$window",
+        function ($window) {
+
+            return {
+                restrict: "A",
+                link: function (scope, $element) {
+
+
+                    var el = $element[0];
+
+                    // var realWidth = el.clientWidth;
+                    // var realHeight = el.clientHeight;
+
+                    function scale () {
+
+                        if (!el || !el.offsetParent) {
+                            return;
+                        }
+
+                        var parentWidth = el.offsetParent.clientWidth;
+                        var parentHeight = el.offsetParent.clientHeight;
+
+                        var realWidth = el.clientWidth;
+                        var realHeight = el.clientHeight;
+
+                        var widthRatio = realWidth / parentWidth;
+                        var heightRatio = realHeight / parentHeight;
+
+                        var ratio = Math.min(heightRatio, widthRatio, 1);
+
+                        el.style.transform = "scale("+ratio+")";
+                        el.style.transformOrigin = "left";
+
+                    }
+
+                    console.log("resize to fit scope id", scope.$id, el);
+
+                    //scale();
+
+                    angular.element($window).bind("resize", scale);
+
+                }
+            };
+        }]);