Dynamic scale value of legend (#6)

frontend/app/map/legend/legend.css

@@ -27,7 +27,6 @@
 
 .fm-map-legend:hover {
 	opacity: 1;
-	transform: scale(1.6);
 }
 
 .fm-map-legend h3 {

frontend/app/map/legend/legend.js

@@ -79,13 +79,25 @@
 			$compile(el)(scope);
 			scope.$evalAsync(); // $compile only replaces variables on next digest
 
-			function getMaxHeight() {
-				var toolbox = map.toolboxUi.div;
-				return $(map.map.getContainer()).outerHeight() - parseInt(el.css("bottom")) - 25 - toolbox.position().top - toolbox.outerHeight(true);
+			function getMaxScale() {
+				var mapContainer = $(map.map.getContainer());
+				var toolbox = $(".fm-toolbox-content", map.el);
+				var toolboxHeight = 2 * (toolbox.offset().top - mapContainer.offset().top) + toolbox.outerHeight();
+
+				var maxHeight = mapContainer.outerHeight() - parseInt(el.css("bottom")) - toolboxHeight;
+
+				var currentScaleMatch = el.css("transform").match(/scale\((.*?)\)/);
+				var currentScale = parseFloat(currentScaleMatch ? parseFloat(currentScaleMatch[1]) : 1);
+				var currentHeight = el.outerHeight() / currentScale;
+
+				return maxHeight / currentHeight;
 			}
 
+			var style = $("<style></style>").appendTo("head");
+
 			function resize() {
-				el.css("max-height", getMaxHeight()+"px");
+				var maxScale = getMaxScale();
+				style.text(".fm-map-legend{transform:scale(" + Math.min(maxScale, 1) + ")} .fm-map-legend:hover{transform:scale(" + maxScale + ")}");
 			}
 
 			function _allCombinations(fields, cb) {
@@ -106,7 +118,7 @@
 			}
 
 			resize();
-			scope.$watch(getMaxHeight, resize);
+			scope.$watch(getMaxScale, resize);
 			$(window).resize(resize);
 
 			scope.toggleFilter = function(typeInfo, item) {

frontend/app/map/map/map.js

@@ -322,13 +322,13 @@
 			map.typesUi = fmMapTypes(map);
 			map.padUi = fmMapPad(map);
 			map.gpxUi = fmMapGpx(map);
-			map.toolboxUi = fmMapToolbox(map);
 			map.aboutUi = fmMapAbout(map);
 			map.importUi = fmMapImport(map);
 			map.searchUi = fmMapSearch(map);
 			map.hashUi = fmMapHash(map);
 			map.historyUi = fmMapHistory(map);
 
+			fmMapToolbox(map);
 			fmMapLegend(map);
 
 			if(padId) {

frontend/app/map/toolbox/toolbox.html

@@ -1,7 +1,7 @@
 <div class="fm-toolbox">
 	<button type="button" class="btn btn-default visible-xs-block mobile-menu-button" ng-click="showXs = !showXs" uib-tooltip="{{showXs ? 'Hide menu' : 'Show menu'}}" tooltip-placement="left"><span class="glyphicon glyphicon-menu-hamburger"></span></button>
 	<nav class="navbar navbar-default" ng-class="{'hidden-xs': !showXs}">
-		<div class="container-fluid" id="fm-toolbox-content">
+		<div class="container-fluid fm-toolbox-content">
 			<ul class="nav navbar-nav">
 				<li role="presentation" ng-if="!padId">
 					<a href="javascript:" ng-click="startPad()">Start collaborative map</a>

frontend/app/map/toolbox/toolbox.js

@@ -59,13 +59,8 @@
 				map.historyUi.openHistoryDialog();
 			};
 
-			var ret = {
-				div: $($templateCache.get("map/toolbox/toolbox.html"))
-			};
-			$compile(ret.div.insertAfter(map.map.getContainer()))(scope);
+			$compile($($templateCache.get("map/toolbox/toolbox.html")).insertAfter(map.map.getContainer()))(scope);
 			scope.$evalAsync(); // $compile only replaces variables on next digest
-
-			return ret;
 		}
 	});