From 394dcd73161a244e9a110aaffd7b2a6dfc168002 Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Thu, 29 Nov 2012 07:40:23 -0800 Subject: [PATCH] Avoid multiple click bindings on data layer --- app/assets/javascripts/index/browse.js | 404 ++++++++++++------------- 1 file changed, 202 insertions(+), 202 deletions(-) diff --git a/app/assets/javascripts/index/browse.js b/app/assets/javascripts/index/browse.js index e7788be18..5ca29e568 100644 --- a/app/assets/javascripts/index/browse.js +++ b/app/assets/javascripts/index/browse.js @@ -3,7 +3,12 @@ //= require templates/browse/feature_history $(document).ready(function () { + var browseBounds; + var layersById; + var selectedLayer; + var browseObjectList; var areasHidden = false; + var locationFilter; var dataLayer = new L.OSM.DataLayer(null, { styles: { @@ -26,6 +31,10 @@ $(document).ready(function () { return !areasHidden && L.OSM.DataLayer.prototype.isWayArea.apply(this, arguments); }; + dataLayer.on("click", function (e) { + onSelect(e.layer); + }); + if (OSM.STATUS != 'api_offline' && OSM.STATUS != 'database_offline') { map.layersControl.addOverlay(dataLayer, I18n.t("browse.start_rjs.data_layer_name")); } @@ -45,12 +54,7 @@ $(document).ready(function () { }); function startBrowse(sidebarHtml) { - var browseBounds; - var layersById; - var selectedLayer; - var browseObjectList; - - var locationFilter = new L.LocationFilter({ + locationFilter = new L.LocationFilter({ enableButton: false, adjustButton: false }).addTo(map); @@ -70,261 +74,257 @@ $(document).ready(function () { $("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.hide_areas')); $("#browse_hide_areas_box").toggle(hideAreas, showAreas); - function updateData() { - if (!locationFilter.isEnabled()) { - if (map.getZoom() >= 15) { - var bounds = map.getBounds(); - if (!browseBounds || !browseBounds.contains(bounds)) { - browseBounds = bounds; - getData(); - } - } else { - setStatus(I18n.t('browse.start_rjs.zoom_or_select')); - } - } - } - $("#sidebar").one("closed", function () { map.removeLayer(dataLayer); map.removeLayer(locationFilter); map.off("moveend", updateData); locationFilter.off("change", getData); }); + } - function enableFilter() { - $("#browse_filter_toggle").html(I18n.t('browse.start_rjs.view_data')); - locationFilter.setBounds(map.getBounds().pad(-0.2)); - locationFilter.enable(); - getData(); + function updateData() { + if (!locationFilter.isEnabled()) { + if (map.getZoom() >= 15) { + var bounds = map.getBounds(); + if (!browseBounds || !browseBounds.contains(bounds)) { + browseBounds = bounds; + getData(); + } + } else { + setStatus(I18n.t('browse.start_rjs.zoom_or_select')); + } } + } - function disableFilter() { - $("#browse_filter_toggle").html(I18n.t('browse.start_rjs.manually_select')); - locationFilter.disable(); - getData(); - } + function enableFilter() { + $("#browse_filter_toggle").html(I18n.t('browse.start_rjs.view_data')); + locationFilter.setBounds(map.getBounds().pad(-0.2)); + locationFilter.enable(); + getData(); + } - function hideAreas() { - $("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.show_areas')); - areasHidden = true; - getData(); - } + function disableFilter() { + $("#browse_filter_toggle").html(I18n.t('browse.start_rjs.manually_select')); + locationFilter.disable(); + getData(); + } - function showAreas() { - $("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.hide_areas')); - areasHidden = false; - getData(); - } + function hideAreas() { + $("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.show_areas')); + areasHidden = true; + getData(); + } + + function showAreas() { + $("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.hide_areas')); + areasHidden = false; + getData(); + } - function displayFeatureWarning(count, limit, callback) { - clearStatus(); + function displayFeatureWarning(count, limit, callback) { + clearStatus(); - var div = document.createElement("div"); + var div = document.createElement("div"); - var p = document.createElement("p"); - p.appendChild(document.createTextNode(I18n.t("browse.start_rjs.loaded_an_area_with_num_features", { num_features: count, max_features: limit }))); - div.appendChild(p); + var p = document.createElement("p"); + p.appendChild(document.createTextNode(I18n.t("browse.start_rjs.loaded_an_area_with_num_features", { num_features: count, max_features: limit }))); + div.appendChild(p); - var input = document.createElement("input"); - input.type = "submit"; - input.value = I18n.t('browse.start_rjs.load_data'); - input.onclick = callback; - div.appendChild(input); + var input = document.createElement("input"); + input.type = "submit"; + input.value = I18n.t('browse.start_rjs.load_data'); + input.onclick = callback; + div.appendChild(input); - $("#browse_content").html(""); - $("#browse_content").append(div); - } + $("#browse_content").html(""); + $("#browse_content").append(div); + } - function getData() { - var bounds = locationFilter.isEnabled() ? locationFilter.getBounds() : map.getBounds(); - var size = bounds.getSize(); + function getData() { + var bounds = locationFilter.isEnabled() ? locationFilter.getBounds() : map.getBounds(); + var size = bounds.getSize(); - if (size > OSM.MAX_REQUEST_AREA) { - setStatus(I18n.t("browse.start_rjs.unable_to_load_size", { max_bbox_size: OSM.MAX_REQUEST_AREA, bbox_size: size })); - return; - } + if (size > OSM.MAX_REQUEST_AREA) { + setStatus(I18n.t("browse.start_rjs.unable_to_load_size", { max_bbox_size: OSM.MAX_REQUEST_AREA, bbox_size: size })); + return; + } - setStatus(I18n.t('browse.start_rjs.loading')); + setStatus(I18n.t('browse.start_rjs.loading')); - var url = "/api/" + OSM.API_VERSION + "/map?bbox=" + bounds.toBBOX(); + var url = "/api/" + OSM.API_VERSION + "/map?bbox=" + bounds.toBBOX(); - /* - * Modern browsers are quite happy showing far more than 100 features in - * the data browser, so increase the limit to 2000 by default, but keep - * it restricted to 500 for IE8 and 100 for older IEs. - */ - var maxFeatures = 2000; + /* + * Modern browsers are quite happy showing far more than 100 features in + * the data browser, so increase the limit to 2000 by default, but keep + * it restricted to 500 for IE8 and 100 for older IEs. + */ + var maxFeatures = 2000; - /*@cc_on - if (navigator.appVersion < 8) { - maxFeatures = 100; - } else if (navigator.appVersion < 9) { - maxFeatures = 500; - } - @*/ + /*@cc_on + if (navigator.appVersion < 8) { + maxFeatures = 100; + } else if (navigator.appVersion < 9) { + maxFeatures = 500; + } + @*/ - $.ajax({ - url: url, - success: function (xml) { - clearStatus(); + $.ajax({ + url: url, + success: function (xml) { + clearStatus(); - $("#browse_content").empty(); - dataLayer.clearLayers(); - selectedLayer = null; + $("#browse_content").empty(); + dataLayer.clearLayers(); + selectedLayer = null; - var features = dataLayer.buildFeatures(xml); + var features = dataLayer.buildFeatures(xml); - function addFeatures() { - dataLayer.addData(features); + function addFeatures() { + dataLayer.addData(features); - layersById = {}; + layersById = {}; - dataLayer.eachLayer(function (layer) { - var feature = layer.feature; - layersById[feature.id] = layer; - $.extend(feature, { - typeName: featureTypeName(feature), - url: "/browse/" + feature.type + "/" + feature.id, - name: featureName(feature) - }); + dataLayer.eachLayer(function (layer) { + var feature = layer.feature; + layersById[feature.id] = layer; + $.extend(feature, { + typeName: featureTypeName(feature), + url: "/browse/" + feature.type + "/" + feature.id, + name: featureName(feature) }); + }); - browseObjectList = $(JST["templates/browse/feature_list"]({ - features: features, - url: url - }))[0]; + browseObjectList = $(JST["templates/browse/feature_list"]({ + features: features, + url: url + }))[0]; - loadObjectList(); - } - - if (features.length < maxFeatures) { - addFeatures(); - } else { - displayFeatureWarning(features.length, maxFeatures, addFeatures); - } + loadObjectList(); } - }); - } - function viewFeatureLink() { - var layer = layersById[$(this).data("feature-id")]; + if (features.length < maxFeatures) { + addFeatures(); + } else { + displayFeatureWarning(features.length, maxFeatures, addFeatures); + } + } + }); + } - onSelect(layer); + function viewFeatureLink() { + var layer = layersById[$(this).data("feature-id")]; - if (locationFilter.isEnabled()) { - map.panTo(layer.getBounds().getCenter()); - } + onSelect(layer); - return false; + if (locationFilter.isEnabled()) { + map.panTo(layer.getBounds().getCenter()); } - function loadObjectList() { - $("#browse_content").html(browseObjectList); - $("#browse_content").find("a[data-feature-id]").click(viewFeatureLink); + return false; + } - return false; - } + function loadObjectList() { + $("#browse_content").html(browseObjectList); + $("#browse_content").find("a[data-feature-id]").click(viewFeatureLink); - function onSelect(layer) { - // Unselect previously selected feature - if (selectedLayer) { - selectedLayer.setStyle(selectedLayer.originalStyle); - } + return false; + } - // Redraw in selected style - layer.originalStyle = layer.options; - layer.setStyle({color: '#0000ff', weight: 8}); + function onSelect(layer) { + // Unselect previously selected feature + if (selectedLayer) { + selectedLayer.setStyle(selectedLayer.originalStyle); + } - // If the current object is the list, don't innerHTML="", since that could clear it. - if ($("#browse_content").firstChild == browseObjectList) { - $("#browse_content").removeChild(browseObjectList); - } else { - $("#browse_content").empty(); - } + // Redraw in selected style + layer.originalStyle = layer.options; + layer.setStyle({color: '#0000ff', weight: 8}); - var feature = layer.feature; + // If the current object is the list, don't innerHTML="", since that could clear it. + if ($("#browse_content").firstChild == browseObjectList) { + $("#browse_content").removeChild(browseObjectList); + } else { + $("#browse_content").empty(); + } - $("#browse_content").html(JST["templates/browse/feature"]({ - name: featureNameSelect(feature), - url: "/browse/" + feature.type + "/" + feature.id, - attributes: feature.tags - })); + var feature = layer.feature; - $("#browse_content").find("a.browse_show_list").click(loadObjectList); - $("#browse_content").find("a.browse_show_history").click(loadHistory); + $("#browse_content").html(JST["templates/browse/feature"]({ + name: featureNameSelect(feature), + url: "/browse/" + feature.type + "/" + feature.id, + attributes: feature.tags + })); - // Stash the currently drawn feature - selectedLayer = layer; - } + $("#browse_content").find("a.browse_show_list").click(loadObjectList); + $("#browse_content").find("a.browse_show_history").click(loadHistory); - dataLayer.on("click", function (e) { - onSelect(e.layer); - }); + // Stash the currently drawn feature + selectedLayer = layer; + } - function loadHistory() { - $(this).attr("href", "").text(I18n.t('browse.start_rjs.wait')); + function loadHistory() { + $(this).attr("href", "").text(I18n.t('browse.start_rjs.wait')); - var feature = selectedLayer.feature; + var feature = selectedLayer.feature; - $.ajax({ - url: "/api/" + OSM.API_VERSION + "/" + feature.type + "/" + feature.id + "/history", - success: function (xml) { - if (selectedLayer.feature != feature || $("#browse_content").firstChild == browseObjectList) { - return; - } + $.ajax({ + url: "/api/" + OSM.API_VERSION + "/" + feature.type + "/" + feature.id + "/history", + success: function (xml) { + if (selectedLayer.feature != feature || $("#browse_content").firstChild == browseObjectList) { + return; + } - $(this).remove(); + $(this).remove(); - var history = []; - var nodes = xml.getElementsByTagName(feature.type); - for (var i = nodes.length - 1; i >= 0; i--) { - history.push({ - user: nodes[i].getAttribute("user") || I18n.t('browse.start_rjs.private_user'), - timestamp: nodes[i].getAttribute("timestamp") - }); - } + var history = []; + var nodes = xml.getElementsByTagName(feature.type); + for (var i = nodes.length - 1; i >= 0; i--) { + history.push({ + user: nodes[i].getAttribute("user") || I18n.t('browse.start_rjs.private_user'), + timestamp: nodes[i].getAttribute("timestamp") + }); + } - $("#browse_content").append(JST["templates/browse/feature_history"]({ - name: featureNameHistory(feature), - url: "/browse/" + feature.type + "/" + feature.id, - history: history - })); - }.bind(this) - }); + $("#browse_content").append(JST["templates/browse/feature_history"]({ + name: featureNameHistory(feature), + url: "/browse/" + feature.type + "/" + feature.id, + history: history + })); + }.bind(this) + }); - return false; - } + return false; + } - function featureTypeName(feature) { - return I18n.t('browse.start_rjs.object_list.type.' + feature.type); - } + function featureTypeName(feature) { + return I18n.t('browse.start_rjs.object_list.type.' + feature.type); + } - function featureName(feature) { - return feature.tags['name:' + $('html').attr('lang')] || - feature.tags.name || - feature.id; - } + function featureName(feature) { + return feature.tags['name:' + $('html').attr('lang')] || + feature.tags.name || + feature.id; + } - function featureNameSelect(feature) { - return feature.tags['name:' + $('html').attr('lang')] || - feature.tags.name || - I18n.t("browse.start_rjs.object_list.selected.type." + feature.type, { id: feature.id }); - } + function featureNameSelect(feature) { + return feature.tags['name:' + $('html').attr('lang')] || + feature.tags.name || + I18n.t("browse.start_rjs.object_list.selected.type." + feature.type, { id: feature.id }); + } - function featureNameHistory(feature) { - return feature.tags['name:' + $('html').attr('lang')] || - feature.tags.name || - I18n.t("browse.start_rjs.object_list.history.type." + feature.type, { id: feature.id }); - } + function featureNameHistory(feature) { + return feature.tags['name:' + $('html').attr('lang')] || + feature.tags.name || + I18n.t("browse.start_rjs.object_list.history.type." + feature.type, { id: feature.id }); + } - function setStatus(status) { - $("#browse_status").html(status); - $("#browse_status").show(); - } + function setStatus(status) { + $("#browse_status").html(status); + $("#browse_status").show(); + } - function clearStatus() { - $("#browse_status").html(""); - $("#browse_status").hide(); - } + function clearStatus() { + $("#browse_status").html(""); + $("#browse_status").hide(); } }); -- 2.43.2