diff --git a/src/main/resources/eu/simstadt/regionchooser/website/script/simstadt_openlayers.js b/src/main/resources/eu/simstadt/regionchooser/website/script/simstadt_openlayers.js index 4d4759926659d54a66f16c0249701f9d29955bde..f9655b2cce2fd4ddee481c9a4e862b5ad6c12c55 100644 --- a/src/main/resources/eu/simstadt/regionchooser/website/script/simstadt_openlayers.js +++ b/src/main/resources/eu/simstadt/regionchooser/website/script/simstadt_openlayers.js @@ -1,4 +1,10 @@ -var regionChooser = (function(){ +const styles = {}; + +styles.original = utils.polygon_style('#447744', 0.2); +styles.highlighted = utils.polygon_style("#ff44a2", 0.7); +styles.selected = utils.polygon_style("#ffff00", 0.8); + +const regionChooser = (function(){ //TODO: Somehow split in classes. This file is getting too big and mixed var publicScope = {}; const fromJavaFX = navigator.userAgent.indexOf('JavaFX') !== -1; @@ -26,7 +32,7 @@ var regionChooser = (function(){ var kml_layer = new ol.layer.Vector({ source : kml_source, - style : utils.polygon_style('#447744', 0.2) + style : styles.original }); var intersections = new ol.source.Vector(); @@ -74,7 +80,7 @@ var regionChooser = (function(){ feature["project"] = feature.get("project"); feature["name"] = feature.get("name"); feature["source"] = "CityGML"; - feature["originalStyle"] = feature.getStyle(); + feature["status"] = "original"; }); var features = Array.from(kml_source.getFeatures()); @@ -160,22 +166,26 @@ var regionChooser = (function(){ publicScope.highlightPolygon = function(i) { var feature = kml_source.getFeatureById(i); - feature.setStyle(utils.polygon_style("#ff44a2", 0.7)); + feature.setStyle(styles.highlighted); } publicScope.resetHighlight = function(i) { var feature = kml_source.getFeatureById(i); - feature.setStyle(feature.originalStyle); + refreshStyle(feature); + } + + refreshStyle = function(feature){ + feature.setStyle(styles[feature.status]); } publicScope.isDownloadPossible = function(){ - kml_source.getFeatures().forEach(f => f.setStyle(f.originalStyle)); + kml_source.getFeatures().forEach(f => {f.status = "original"; refreshStyle(f)}); //TODO: Dry var checkedBoxes = Array.from(document.querySelectorAll("input.select_citygml")).filter(c => c.checked); var checkbox_ids = checkedBoxes.map(c => c.id); var features = getCheckedPolygons(checkbox_ids); - features.forEach(f => f.setStyle(utils.polygon_style("#ffff00", 0.8))); + features.forEach(f => {f.status = "selected"; refreshStyle(f)}); document.getElementById("download_region_button").disabled = (checkedBoxes.length == 0); }