From 04416f7b2c5dec297ae50453688ba9b41b595e22 Mon Sep 17 00:00:00 2001
From: Philip Eichinski <phil.eichinski@gmail.com>
Date: Wed, 31 May 2017 08:47:54 +1000
Subject: [PATCH] fix(citizenScienceExamples): dealing with example
 spectrograms that are wider than the window

---
 .../annotationLibrary/annotationItem.tpl.html |  3 +-
 .../citizenScience/thumbLabels/examples.js    |  7 +--
 .../thumbLabels/examples.tpl.html             |  2 +-
 .../citizenScience/thumbLabels/label.tpl.html |  1 +
 src/components/directives/scaleToFit.js       | 48 +++++++++++++++++++
 5 files changed, 55 insertions(+), 6 deletions(-)
 create mode 100644 src/components/directives/scaleToFit.js

diff --git a/src/app/annotationLibrary/annotationItem.tpl.html b/src/app/annotationLibrary/annotationItem.tpl.html
index 35ec78ef..f61153e6 100644
--- 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
index 46c299aa..dfc8a494 100644
--- 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
index 0113230a..d5058804 100644
--- 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
index d6c2f6cd..cd2cede4 100644
--- 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
new file mode 100644
index 00000000..824492fb
--- /dev/null
+++ 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);
+
+                }
+            };
+        }]);
\ No newline at end of file