kopia lustrzana https://github.com/FacilMap/facilmap
Improve async behaviour of infoBox
Candid Dauth
rodzic
49fe5ab637
commit
a933f08810
|
|
@ -3,6 +3,7 @@ import ng from 'angular';
|
|||
import 'bootstrap';
|
||||
import 'angular-ui-bootstrap';
|
||||
import 'angular-ui-sortable';
|
||||
import 'babel-polyfill';
|
||||
|
||||
const fm = {
|
||||
URL_PREFIX: location.protocol + "//" + location.host + location.pathname.replace(/[^\/]*$/, "")
|
||||
|
|
|
|||
|
|
@ -37,13 +37,15 @@ fm.app.factory("fmInfoBox", function($rootScope, $compile, $timeout) {
|
|||
};
|
||||
|
||||
let infoBox = {
|
||||
show(html, htmlScope, onClose) {
|
||||
if(currentObj)
|
||||
currentObj.onClose && currentObj.onClose();
|
||||
show({template, scope, onCloseStart, onCloseEnd}) {
|
||||
if(currentObj) {
|
||||
currentObj.onCloseStart && currentObj.onCloseStart();
|
||||
currentObj.onCloseEnd && currentObj.onCloseEnd();
|
||||
}
|
||||
|
||||
let htmlEl = $(".html", el).empty().append(html);
|
||||
if(htmlScope !== false)
|
||||
$compile(htmlEl)(htmlScope);
|
||||
let htmlEl = $(".html", el).empty().append(template);
|
||||
if(scope !== false)
|
||||
$compile(htmlEl)(scope);
|
||||
|
||||
if(!el.is(":visible")) {
|
||||
let legendSize = getLegendSize();
|
||||
|
|
@ -82,7 +84,8 @@ fm.app.factory("fmInfoBox", function($rootScope, $compile, $timeout) {
|
|||
}
|
||||
|
||||
let thisCurrentObj = currentObj = {
|
||||
onClose
|
||||
onCloseStart,
|
||||
onCloseEnd
|
||||
};
|
||||
|
||||
return {
|
||||
|
|
@ -94,14 +97,16 @@ fm.app.factory("fmInfoBox", function($rootScope, $compile, $timeout) {
|
|||
}
|
||||
};
|
||||
},
|
||||
hide() {
|
||||
async hide() {
|
||||
if(!currentObj)
|
||||
return Promise.resolve();
|
||||
return;
|
||||
|
||||
let obj = currentObj;
|
||||
currentObj = null;
|
||||
|
||||
return new Promise((resolve) => {
|
||||
obj.onCloseStart && obj.onCloseStart();
|
||||
|
||||
await new Promise((resolve) => {
|
||||
let legendSize = getLegendSize();
|
||||
|
||||
if(legendSize) {
|
||||
|
|
@ -123,9 +128,9 @@ fm.app.factory("fmInfoBox", function($rootScope, $compile, $timeout) {
|
|||
resolve();
|
||||
});
|
||||
}
|
||||
}).then(() => {
|
||||
obj.onClose && obj.onClose();
|
||||
});
|
||||
|
||||
obj.onCloseEnd && obj.onCloseEnd();
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -138,13 +138,18 @@ fm.app.factory("fmMapLines", function(fmUtils, $uibModal, $compile, $timeout, $r
|
|||
let template = $(require("./view-line.html"));
|
||||
|
||||
openLine = {
|
||||
hide: map.infoBox.show(template, scope, () => {
|
||||
openLine = null;
|
||||
if(linesById[line.id]) { // Does not exist anymore after line was deleted
|
||||
linesById[line.id].setStyle({ highlight: false });
|
||||
hide: map.infoBox.show({
|
||||
template,
|
||||
scope,
|
||||
onCloseStart: () => {
|
||||
openLine = null;
|
||||
if(linesById[line.id]) { // Does not exist anymore after line was deleted
|
||||
linesById[line.id].setStyle({ highlight: false });
|
||||
}
|
||||
},
|
||||
onCloseEnd: () => {
|
||||
scope.$destroy();
|
||||
}
|
||||
|
||||
scope.$destroy();
|
||||
}).hide,
|
||||
id: line.id
|
||||
};
|
||||
|
|
|
|||
|
|
@ -90,16 +90,21 @@ fm.app.factory("fmMapMarkers", function($uibModal, fmUtils, $compile, $timeout,
|
|||
};
|
||||
|
||||
openMarker = {
|
||||
hide: map.infoBox.show(require("./view-marker.html"), scope, () => {
|
||||
openMarker = null;
|
||||
hide: map.infoBox.show({
|
||||
template: require("./view-marker.html"),
|
||||
scope,
|
||||
onCloseStart: () => {
|
||||
openMarker = null;
|
||||
|
||||
if(markersById[marker.id]) {
|
||||
markersById[marker.id].setStyle({
|
||||
highlight: false
|
||||
});
|
||||
if(markersById[marker.id]) {
|
||||
markersById[marker.id].setStyle({
|
||||
highlight: false
|
||||
});
|
||||
}
|
||||
},
|
||||
onCloseEnd: () => {
|
||||
scope.$destroy();
|
||||
}
|
||||
|
||||
scope.$destroy();
|
||||
}).hide,
|
||||
id: marker.id
|
||||
};
|
||||
|
|
|
|||
|
|
@ -166,9 +166,6 @@ fm.app.factory("fmMapRoute", function(fmUtils, $uibModal, $compile, $timeout, $r
|
|||
|
||||
let routeUi = {
|
||||
showRouteInfoBox() {
|
||||
if(openInfoBox)
|
||||
return;
|
||||
|
||||
let scope = $rootScope.$new();
|
||||
scope.client = map.client;
|
||||
|
||||
|
|
@ -200,19 +197,25 @@ fm.app.factory("fmMapRoute", function(fmUtils, $uibModal, $compile, $timeout, $r
|
|||
|
||||
let template = $(require("./view-route.html"));
|
||||
|
||||
routeLayer.setStyle({
|
||||
highlight: true
|
||||
openInfoBox = map.infoBox.show({
|
||||
template,
|
||||
scope,
|
||||
onCloseStart: () => {
|
||||
openInfoBox = null;
|
||||
|
||||
if(routeLayer) {
|
||||
routeLayer.setStyle({
|
||||
highlight: false
|
||||
});
|
||||
}
|
||||
},
|
||||
onCloseEnd: () => {
|
||||
scope.$destroy();
|
||||
}
|
||||
});
|
||||
|
||||
openInfoBox = map.infoBox.show(template, scope, () => {
|
||||
scope.$destroy();
|
||||
openInfoBox = null;
|
||||
|
||||
if(routeLayer) {
|
||||
routeLayer.setStyle({
|
||||
highlight: false
|
||||
});
|
||||
}
|
||||
routeLayer.setStyle({
|
||||
highlight: true
|
||||
});
|
||||
|
||||
elevationPlot.clear();
|
||||
|
|
|
|||
|
|
@ -346,13 +346,17 @@ fm.app.directive("fmSearchQuery", function($rootScope, $compile, fmUtils, $timeo
|
|||
map.searchUi.setRouteDestination(query, mode, results, result);
|
||||
};
|
||||
|
||||
let thisCurrentInfoBox = currentInfoBox = map.infoBox.show(require("./result-popup.html"), popupScope, () => {
|
||||
popupScope.$destroy();
|
||||
currentInfoBox = map.infoBox.show({
|
||||
template: require("./result-popup.html"),
|
||||
scope: popupScope,
|
||||
onCloseStart: () => {
|
||||
onClose && onClose();
|
||||
|
||||
onClose && onClose();
|
||||
|
||||
if(currentInfoBox === thisCurrentInfoBox) // Some other infobox might have opened during the animation
|
||||
currentInfoBox = null;
|
||||
},
|
||||
onCloseEnd: () => {
|
||||
popupScope.$destroy();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@
|
|||
"angular": "^1.6.8",
|
||||
"angular-ui-bootstrap": "^2.5.6",
|
||||
"angular-ui-sortable": "^0.18.0",
|
||||
"babel-polyfill": "^6.26.0",
|
||||
"blob": "^0.0.4",
|
||||
"bootstrap": "3.x.x",
|
||||
"bootstrap-touchspin": "^3.1.1",
|
||||
|
|
|
|||
|
|
@ -706,6 +706,14 @@ babel-plugin-transform-strict-mode@^6.24.1:
|
|||
babel-runtime "^6.22.0"
|
||||
babel-types "^6.24.1"
|
||||
|
||||
babel-polyfill@^6.26.0:
|
||||
version "6.26.0"
|
||||
resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.26.0.tgz#379937abc67d7895970adc621f284cd966cf2153"
|
||||
dependencies:
|
||||
babel-runtime "^6.26.0"
|
||||
core-js "^2.5.0"
|
||||
regenerator-runtime "^0.10.5"
|
||||
|
||||
babel-preset-env@^1.6.1:
|
||||
version "1.6.1"
|
||||
resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.6.1.tgz#a18b564cc9b9afdf4aae57ae3c1b0d99188e6f48"
|
||||
|
|
@ -5276,6 +5284,10 @@ regenerate@^1.2.1:
|
|||
version "1.3.3"
|
||||
resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.3.tgz#0c336d3980553d755c39b586ae3b20aa49c82b7f"
|
||||
|
||||
regenerator-runtime@^0.10.5:
|
||||
version "0.10.5"
|
||||
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658"
|
||||
|
||||
regenerator-runtime@^0.11.0:
|
||||
version "0.11.1"
|
||||
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue