diff --git a/frontend/app/map/infoBox/infoBox.html b/frontend/app/map/infoBox/infoBox.html
index 83f73ec5..b43ac003 100644
--- a/frontend/app/map/infoBox/infoBox.html
+++ b/frontend/app/map/infoBox/infoBox.html
@@ -1,9 +1,6 @@
\ No newline at end of file
diff --git a/frontend/app/map/infoBox/infoBox.js b/frontend/app/map/infoBox/infoBox.js
index d3001d5b..737b969d 100644
--- a/frontend/app/map/infoBox/infoBox.js
+++ b/frontend/app/map/infoBox/infoBox.js
@@ -7,7 +7,8 @@ fm.app.factory("fmInfoBox", function($rootScope, $compile, $timeout) {
return function(map) {
let scope = $rootScope.$new();
scope.className = css.className;
- scope.layers = [];
+
+ let currentObj = null;
let el = $(require("./infoBox.html"));
@@ -16,102 +17,86 @@ fm.app.factory("fmInfoBox", function($rootScope, $compile, $timeout) {
$compile(el)(scope);
});
- let show = () => {
- return new Promise((resolve) => {
- let legendEl = map.el.find(".fm-map-legend");
- let legendPanelEl = legendEl.find("> .panel");
-
- if(legendEl.length > 0 && !legendPanelEl.hasClass("ng-hide")) {
- let legendSize = legendPanelEl[0].getBoundingClientRect();
-
- el.show();
-
- el.css({ transform: "", "transition": "all 0s ease 0s" });
- el.css("transform", `scale(${legendSize.width/el.width()}, ${legendSize.height/el.height()})`);
-
- setTimeout(() => { // We have to run this after the transform applies
- legendEl.addClass("fm-infoBox-hidden");
- el.css("transition", "");
- el.css("transform", ""); // Gets animated by CSS transition
- el.one("transitionend", resolve);
- }, 0);
- } else {
- el.css("transition", "all 0s ease 0s");
- el.fadeIn(700, () => {
- el.css("transition", "");
- resolve();
- });
- }
- });
- };
-
- let hide = () => {
- return new Promise((resolve) => {
- let legendEl = map.el.find(".fm-map-legend");
- let legendPanelEl = legendEl.find("> .panel");
-
- if(legendEl.length > 0 && !legendPanelEl.hasClass("ng-hide")) {
- let legendSize = legendPanelEl[0].getBoundingClientRect();
-
- el.css("transform", `scale(${legendSize.width/el.width()}, ${legendSize.height/el.height()})`).one("transitionend", () => {
- el.css("transform", "").hide();
- el.hide();
- legendEl.removeClass("fm-infoBox-hidden");
- resolve();
- });
- } else {
- el.css("transition", "all 0s ease 0s");
- el.fadeOut(700, () => {
- el.css("transition", "");
- resolve();
- });
- }
- });
- };
-
let infoBox = {
- show(html, htmlScope, clearOpenLayers, onClose) {
- let obj = {
- html,
- onClose,
- scope: htmlScope || $rootScope,
- hide() {
- let newLayers = scope.layers.filter((it) => (!ng.equals(it, obj))); // Can't use !== because ng-repeat adds $$hashKey
- onClose && onClose();
- Promise.resolve().then(() => {
- if(newLayers.length == 0)
- return hide();
- }).then(() => {
- scope.layers = newLayers;
+ show(html, htmlScope, onClose) {
+ if(currentObj)
+ currentObj.onClose && currentObj.onClose();
+
+ let htmlEl = $(".html", el).empty().append(html);
+ if(htmlScope !== false)
+ $compile(htmlEl)(htmlScope);
+
+ if(!currentObj) {
+ let legendEl = map.el.find(".fm-map-legend");
+ let legendPanelEl = legendEl.find("> .panel");
+
+ if(legendEl.length > 0 && !legendPanelEl.hasClass("ng-hide")) {
+ let legendSize = legendPanelEl[0].getBoundingClientRect();
+
+ el.show();
+
+ el.css({ transform: "", "transition": "all 0s ease 0s" });
+ el.css("transform", `scale(${legendSize.width/el.width()}, ${legendSize.height/el.height()})`);
+
+ setTimeout(() => { // We have to run this after the transform applies
+ legendEl.addClass("fm-infoBox-hidden");
+ el.css("transition", "");
+ el.css("transform", ""); // Gets animated by CSS transition
+ }, 0);
+ } else {
+ el.css("transition", "all 0s ease 0s");
+ el.fadeIn(700, () => {
+ el.css("transition", "");
});
}
- };
-
- if(scope.layers.length == 0)
- scope.$evalAsync(() => { $timeout(show); });
-
- if(clearOpenLayers) {
- scope.layers.forEach((layer) => {
- layer.onClose && layer.onClose();
- });
- scope.layers = [];
}
- scope.layers.push(obj);
+ let thisCurrentObj = currentObj = {
+ onClose
+ };
- return obj;
+ return {
+ hide: () => {
+ if(currentObj !== thisCurrentObj)
+ return;
+
+ infoBox.hide();
+ }
+ };
},
- hideAll() {
- return hide().then(() => {
- scope.layers.forEach((layer) => {
- layer.onClose && layer.onClose();
- });
+ hide() {
+ if(!currentObj)
+ return Promise.resolve();
- scope.layers = [ ];
+ return new Promise((resolve) => {
+ let legendEl = map.el.find(".fm-map-legend");
+ let legendPanelEl = legendEl.find("> .panel");
+
+ if(legendEl.length > 0 && !legendPanelEl.hasClass("ng-hide")) {
+ let legendSize = legendPanelEl[0].getBoundingClientRect();
+
+ el.css("transform", `scale(${legendSize.width/el.width()}, ${legendSize.height/el.height()})`).one("transitionend", () => {
+ el.css("transform", "").hide();
+ el.hide();
+ legendEl.removeClass("fm-infoBox-hidden");
+ resolve();
+ });
+ } else {
+ el.css("transition", "all 0s ease 0s");
+ el.fadeOut(700, () => {
+ el.css("transition", "");
+ resolve();
+ });
+ }
+ }).then(() => {
+ currentObj.onClose && currentObj.onClose();
+ currentObj = null;
});
}
};
+ scope.hide = infoBox.hide;
+
return infoBox;
};
});
@@ -126,7 +111,9 @@ fm.app.directive("fmInfoBoxBind", function($compile) {
scope.$watchGroup(["layer.html", "layer.scope"], () => {
let el = $(scope.layer.html);
element.empty().append(el);
- $compile(el)(scope.layer.scope);
+
+ if(scope.layer.scope !== false)
+ $compile(el)(scope.layer.scope);
});
}
};
diff --git a/frontend/app/map/infoBox/infoBox.scss b/frontend/app/map/infoBox/infoBox.scss
index a14b3b3c..e9f3f3be 100644
--- a/frontend/app/map/infoBox/infoBox.scss
+++ b/frontend/app/map/infoBox/infoBox.scss
@@ -25,7 +25,7 @@
.close-button {
position: absolute;
top: 0;
- right: 0;
+ right: 5px;
color: #000;
text-decoration: none;
font-size: 1.5em;
@@ -37,16 +37,14 @@
height: 200px;
overflow: auto;
- /* Make space for buttons at the bottom */
- padding-bottom: 1.5em;
-
/* Replace padding by margin to move horizontal scrollbar a bit to the left so that it can be covered by .buttons */
/* Make space for close button on the top and don't cover round corners on top and bottom */
- padding-left: 0;
- margin: 20px 0 7px 15px;
+ margin: 2px 0 28px 0;
+ padding: 15px;
h2 {
margin-top: 0;
+ font-size: 1.6em;
}
/* Copy dl-horizontal styles, modify sizing, also apply for small screens (as popup size is always the same) */
diff --git a/frontend/app/map/markers/markers.js b/frontend/app/map/markers/markers.js
index 25a66349..4dad88ed 100644
--- a/frontend/app/map/markers/markers.js
+++ b/frontend/app/map/markers/markers.js
@@ -73,7 +73,7 @@ fm.app.factory("fmMapMarkers", function($uibModal, fmUtils, $compile, $timeout,
markersUi.deleteMarker(scope.marker);
};
- map.infoBox.show(require("./view-marker.html"), scope, true, () => {
+ map.infoBox.show(require("./view-marker.html"), scope, () => {
openMarkerId = null;
markersById[marker.id].setIcon(fmUtils.createMarkerIcon(marker.colour, marker.size, marker.symbol));
});