From a933f08810df7204372370bc706824d5afbdf693 Mon Sep 17 00:00:00 2001 From: Candid Dauth Date: Fri, 16 Mar 2018 07:31:52 +0100 Subject: [PATCH] Improve async behaviour of infoBox --- frontend/app/app.js | 1 + frontend/app/map/infoBox/infoBox.js | 29 ++++++++++++++++----------- frontend/app/map/lines/lines.js | 17 ++++++++++------ frontend/app/map/markers/markers.js | 21 +++++++++++-------- frontend/app/map/route/route.js | 31 ++++++++++++++++------------- frontend/app/search/search-query.js | 14 ++++++++----- frontend/package.json | 1 + frontend/yarn.lock | 12 +++++++++++ 8 files changed, 81 insertions(+), 45 deletions(-) diff --git a/frontend/app/app.js b/frontend/app/app.js index e78d9e16..cd35c230 100644 --- a/frontend/app/app.js +++ b/frontend/app/app.js @@ -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(/[^\/]*$/, "") diff --git a/frontend/app/map/infoBox/infoBox.js b/frontend/app/map/infoBox/infoBox.js index e269d6df..7fa31a16 100644 --- a/frontend/app/map/infoBox/infoBox.js +++ b/frontend/app/map/infoBox/infoBox.js @@ -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(); } }; diff --git a/frontend/app/map/lines/lines.js b/frontend/app/map/lines/lines.js index 109d8c38..4511ec1b 100644 --- a/frontend/app/map/lines/lines.js +++ b/frontend/app/map/lines/lines.js @@ -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 }; diff --git a/frontend/app/map/markers/markers.js b/frontend/app/map/markers/markers.js index 394cdae2..9f8432cc 100644 --- a/frontend/app/map/markers/markers.js +++ b/frontend/app/map/markers/markers.js @@ -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 }; diff --git a/frontend/app/map/route/route.js b/frontend/app/map/route/route.js index 051ecd55..a36a1dfd 100644 --- a/frontend/app/map/route/route.js +++ b/frontend/app/map/route/route.js @@ -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(); diff --git a/frontend/app/search/search-query.js b/frontend/app/search/search-query.js index dddf732d..d2136807 100644 --- a/frontend/app/search/search-query.js +++ b/frontend/app/search/search-query.js @@ -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(); + } }); } diff --git a/frontend/package.json b/frontend/package.json index 87d8f019..5b6630d4 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -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", diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 8c377a1d..fb062cd2 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -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"