From b95f9115d7edf13ccdf8aac5e91251bf05d3084f Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Fri, 5 Oct 2012 16:13:46 -0700 Subject: [PATCH] Move browse-related JS to browse.js --- app/assets/javascripts/index.js | 7 - app/assets/javascripts/index/browse.js | 881 +++++++++++++------------ 2 files changed, 445 insertions(+), 443 deletions(-) diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js index e18c89536..85f5dab0d 100644 --- a/app/assets/javascripts/index.js +++ b/app/assets/javascripts/index.js @@ -38,13 +38,6 @@ $(document).ready(function () { handleResize(); - $("#show_data").click(function (e) { - $.ajax({ url: $(this).attr('href'), success: function (sidebarHtml) { - startBrowse(sidebarHtml); - }}); - e.preventDefault(); - }); - $("body").on("click", "a.set_position", function () { var data = $(this).data(); var centre = new OpenLayers.LonLat(data.lon, data.lat); diff --git a/app/assets/javascripts/index/browse.js b/app/assets/javascripts/index/browse.js index 769cc112e..891e1c9bc 100644 --- a/app/assets/javascripts/index/browse.js +++ b/app/assets/javascripts/index/browse.js @@ -1,549 +1,558 @@ -function startBrowse(sidebarHtml) { - var browseBoxControl; - var browseMode = "auto"; - var browseBounds; - var browseFeatureList; - var browseActiveFeature; - var browseDataLayer; - var browseSelectControl; - var browseObjectList; - var areasHidden = false; - - OpenLayers.Feature.Vector.style['default'].strokeWidth = 3; - OpenLayers.Feature.Vector.style['default'].cursor = "pointer"; - - map.dataLayer.active = true; - - $("#sidebar_title").html(I18n.t('browse.start_rjs.data_frame_title')); - $("#sidebar_content").html(sidebarHtml); - - openSidebar(); - - var vectors = new OpenLayers.Layer.Vector(); - - browseBoxControl = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, { - handlerOptions: { - sides: 4, - snapAngle: 90, - irregular: true, - persist: true - } +$(document).ready(function () { + $("#show_data").click(function (e) { + $.ajax({ url: $(this).attr('href'), success: function (sidebarHtml) { + startBrowse(sidebarHtml); + }}); + e.preventDefault(); }); - browseBoxControl.handler.callbacks.done = endDrag; - map.addControl(browseBoxControl); - map.events.register("moveend", map, updateData); - map.events.triggerEvent("moveend"); + function startBrowse(sidebarHtml) { + var browseBoxControl; + var browseMode = "auto"; + var browseBounds; + var browseFeatureList; + var browseActiveFeature; + var browseDataLayer; + var browseSelectControl; + var browseObjectList; + var areasHidden = false; - $("#browse_select_view").click(useMap); + OpenLayers.Feature.Vector.style['default'].strokeWidth = 3; + OpenLayers.Feature.Vector.style['default'].cursor = "pointer"; - $("#browse_select_box").click(startDrag); + map.dataLayer.active = true; - $("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.hide_areas')); - $("#browse_hide_areas_box").show(); - $("#browse_hide_areas_box").click(hideAreas); + $("#sidebar_title").html(I18n.t('browse.start_rjs.data_frame_title')); + $("#sidebar_content").html(sidebarHtml); - function updateData() { - if (browseMode == "auto") { - if (map.getZoom() >= 15) { - useMap(false); - } else { - setStatus(I18n.t('browse.start_rjs.zoom_or_select')); - } - } - } + openSidebar(); - $("#sidebar").one("closed", function () { - if (map.dataLayer.active) { - map.dataLayer.active = false; + var vectors = new OpenLayers.Layer.Vector(); - if (browseSelectControl) { - browseSelectControl.destroy(); - browseSelectControl = null; + browseBoxControl = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, { + handlerOptions: { + sides: 4, + snapAngle: 90, + irregular: true, + persist: true } + }); + browseBoxControl.handler.callbacks.done = endDrag; + map.addControl(browseBoxControl); - if (browseBoxControl) { - browseBoxControl.destroy(); - browseBoxControl = null; - } + map.events.register("moveend", map, updateData); + map.events.triggerEvent("moveend"); - if (browseActiveFeature) { - browseActiveFeature.destroy(); - browseActiveFeature = null; - } + $("#browse_select_view").click(useMap); - if (browseDataLayer) { - browseDataLayer.destroy(); - browseDataLayer = null; - } + $("#browse_select_box").click(startDrag); + + $("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.hide_areas')); + $("#browse_hide_areas_box").show(); + $("#browse_hide_areas_box").click(hideAreas); - map.dataLayer.setVisibility(false); - map.events.unregister("moveend", map, updateData); + function updateData() { + if (browseMode == "auto") { + if (map.getZoom() >= 15) { + useMap(false); + } else { + setStatus(I18n.t('browse.start_rjs.zoom_or_select')); + } + } } - }); - function startDrag() { - $("#browse_select_box").html(I18n.t('browse.start_rjs.drag_a_box')); + $("#sidebar").one("closed", function () { + if (map.dataLayer.active) { + map.dataLayer.active = false; - browseBoxControl.activate(); + if (browseSelectControl) { + browseSelectControl.destroy(); + browseSelectControl = null; + } - return false; - } + if (browseBoxControl) { + browseBoxControl.destroy(); + browseBoxControl = null; + } - function useMap(reload) { - var bounds = map.getExtent(); - var projected = bounds.clone().transform(map.getProjectionObject(), epsg4326); + if (browseActiveFeature) { + browseActiveFeature.destroy(); + browseActiveFeature = null; + } + + if (browseDataLayer) { + browseDataLayer.destroy(); + browseDataLayer = null; + } - if (!browseBounds || !browseBounds.containsBounds(projected)) { - var center = bounds.getCenterLonLat(); - var tileWidth = bounds.getWidth() * 1.2; - var tileHeight = bounds.getHeight() * 1.2; - var tileBounds = new OpenLayers.Bounds(center.lon - (tileWidth / 2), - center.lat - (tileHeight / 2), - center.lon + (tileWidth / 2), - center.lat + (tileHeight / 2)); + map.dataLayer.setVisibility(false); + map.events.unregister("moveend", map, updateData); + } + }); - browseBounds = tileBounds; - getData(tileBounds, reload); + function startDrag() { + $("#browse_select_box").html(I18n.t('browse.start_rjs.drag_a_box')); - browseMode = "auto"; + browseBoxControl.activate(); - $("#browse_select_view").hide(); + return false; } - return false; - } + function useMap(reload) { + var bounds = map.getExtent(); + var projected = bounds.clone().transform(map.getProjectionObject(), epsg4326); - function hideAreas() { - $("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.show_areas')); - $("#browse_hide_areas_box").show(); - $("#browse_hide_areas_box").click(showAreas); + if (!browseBounds || !browseBounds.containsBounds(projected)) { + var center = bounds.getCenterLonLat(); + var tileWidth = bounds.getWidth() * 1.2; + var tileHeight = bounds.getHeight() * 1.2; + var tileBounds = new OpenLayers.Bounds(center.lon - (tileWidth / 2), + center.lat - (tileHeight / 2), + center.lon + (tileWidth / 2), + center.lat + (tileHeight / 2)); - areasHidden = true; + browseBounds = tileBounds; + getData(tileBounds, reload); - useMap(true); - } + browseMode = "auto"; - function showAreas() { - $("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.hide_areas')); - $("#browse_hide_areas_box").show(); - $("#browse_hide_areas_box").click(hideAreas); + $("#browse_select_view").hide(); + } - areasHidden = false; + return false; + } - useMap(true); - } + function hideAreas() { + $("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.show_areas')); + $("#browse_hide_areas_box").show(); + $("#browse_hide_areas_box").click(showAreas); - function endDrag(bbox) { - var bounds = bbox.getBounds(); - var projected = bounds.clone().transform(map.getProjectionObject(), epsg4326); + areasHidden = true; - browseBoxControl.deactivate(); - browseBounds = projected; - getData(bounds); + useMap(true); + } - browseMode = "manual"; + function showAreas() { + $("#browse_hide_areas_box").html(I18n.t('browse.start_rjs.hide_areas')); + $("#browse_hide_areas_box").show(); + $("#browse_hide_areas_box").click(hideAreas); - $("#browse_select_box").html(I18n.t('browse.start_rjs.manually_select')); - $("#browse_select_view").show(); - } + areasHidden = false; - function displayFeatureWarning(count, limit, callback) { - clearStatus(); + useMap(true); + } - var div = document.createElement("div"); + function endDrag(bbox) { + var bounds = bbox.getBounds(); + var projected = bounds.clone().transform(map.getProjectionObject(), epsg4326); - 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); + browseBoxControl.deactivate(); + browseBounds = projected; + getData(bounds); - var input = document.createElement("input"); - input.type = "submit"; - input.value = I18n.t('browse.start_rjs.load_data'); - input.onclick = callback; - div.appendChild(input); + browseMode = "manual"; - $("#browse_content").html(""); - $("#browse_content").append(div); - } + $("#browse_select_box").html(I18n.t('browse.start_rjs.manually_select')); + $("#browse_select_view").show(); + } - function customDataLoader(resp, options) { - if (map.dataLayer.active) { - var request = resp.priv; - var doc = request.responseXML; + function displayFeatureWarning(count, limit, callback) { + clearStatus(); - if (!doc || !doc.documentElement) { - doc = request.responseText; - } + var div = document.createElement("div"); - resp.features = this.format.read(doc); + 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); - if (!this.maxFeatures || resp.features.length <= this.maxFeatures) { - options.callback.call(options.scope, resp); - } else { - displayFeatureWarning(resp.features.length, this.maxFeatures, function () { + 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); + } + + function customDataLoader(resp, options) { + if (map.dataLayer.active) { + var request = resp.priv; + var doc = request.responseXML; + + if (!doc || !doc.documentElement) { + doc = request.responseText; + } + + resp.features = this.format.read(doc); + + if (!this.maxFeatures || resp.features.length <= this.maxFeatures) { options.callback.call(options.scope, resp); - }); + } else { + displayFeatureWarning(resp.features.length, this.maxFeatures, function () { + options.callback.call(options.scope, resp); + }); + } } } - } - function getData(bounds, reload) { - var projected = bounds.clone().transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326")); - var size = projected.getWidth() * projected.getHeight(); + function getData(bounds, reload) { + var projected = bounds.clone().transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326")); + var size = projected.getWidth() * projected.getHeight(); - 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 })); - } else { - loadData("/api/" + OSM.API_VERSION + "/map?bbox=" + projected.toBBOX(), reload); + 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 })); + } else { + loadData("/api/" + OSM.API_VERSION + "/map?bbox=" + projected.toBBOX(), reload); + } } - } - function loadData(url, reload) { - setStatus(I18n.t('browse.start_rjs.loading')); + function loadData(url, reload) { + setStatus(I18n.t('browse.start_rjs.loading')); - $("#browse_content").empty(); + $("#browse_content").empty(); - var formatOptions = { - checkTags: true, - interestingTagsExclude: ['source','source_ref','source:ref','history','attribution','created_by','tiger:county','tiger:tlid','tiger:upload_uuid'] - }; + var formatOptions = { + checkTags: true, + interestingTagsExclude: ['source','source_ref','source:ref','history','attribution','created_by','tiger:county','tiger:tlid','tiger:upload_uuid'] + }; + + if (areasHidden) formatOptions.areaTags = []; + + if (!browseDataLayer || reload) { + var style = new OpenLayers.Style(); + + style.addRules([new OpenLayers.Rule({ + symbolizer: { + Polygon: { fillColor: '#ff0000', strokeColor: '#ff0000' }, + Line: { fillColor: '#ffff00', strokeColor: '#000000', strokeOpacity: '0.4' }, + Point: { fillColor: '#00ff00', strokeColor: '#00ff00' } + } + })]); + + if (browseDataLayer) browseDataLayer.destroyFeatures(); + + /* + * 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; + } + @*/ + + browseDataLayer = new OpenLayers.Layer.Vector("Data", { + strategies: [ + new OpenLayers.Strategy.Fixed() + ], + protocol: new OpenLayers.Protocol.HTTP({ + url: url, + format: new OpenLayers.Format.OSM(formatOptions), + maxFeatures: maxFeatures, + handleRead: customDataLoader + }), + projection: new OpenLayers.Projection("EPSG:4326"), + displayInLayerSwitcher: false, + styleMap: new OpenLayers.StyleMap({ + 'default': style, + 'select': { strokeColor: '#0000ff', strokeWidth: 8 } + }) + }); + browseDataLayer.events.register("loadend", browseDataLayer, dataLoaded ); + map.addLayer(browseDataLayer); + + browseSelectControl = new OpenLayers.Control.SelectFeature(browseDataLayer, { onSelect: onFeatureSelect }); + browseSelectControl.handlers.feature.stopDown = false; + browseSelectControl.handlers.feature.stopUp = false; + map.addControl(browseSelectControl); + browseSelectControl.activate(); + } else { + browseDataLayer.destroyFeatures(); + browseDataLayer.refresh({ url: url }); + } - if (areasHidden) formatOptions.areaTags = []; + browseActiveFeature = null; + } - if (!browseDataLayer || reload) { - var style = new OpenLayers.Style(); + function dataLoaded() { + if (this.map.dataLayer.active) { + clearStatus(); - style.addRules([new OpenLayers.Rule({ - symbolizer: { - Polygon: { fillColor: '#ff0000', strokeColor: '#ff0000' }, - Line: { fillColor: '#ffff00', strokeColor: '#000000', strokeOpacity: '0.4' }, - Point: { fillColor: '#00ff00', strokeColor: '#00ff00' } - } - })]); - - if (browseDataLayer) browseDataLayer.destroyFeatures(); - - /* - * 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; - } - @*/ - - browseDataLayer = new OpenLayers.Layer.Vector("Data", { - strategies: [ - new OpenLayers.Strategy.Fixed() - ], - protocol: new OpenLayers.Protocol.HTTP({ - url: url, - format: new OpenLayers.Format.OSM(formatOptions), - maxFeatures: maxFeatures, - handleRead: customDataLoader - }), - projection: new OpenLayers.Projection("EPSG:4326"), - displayInLayerSwitcher: false, - styleMap: new OpenLayers.StyleMap({ - 'default': style, - 'select': { strokeColor: '#0000ff', strokeWidth: 8 } - }) - }); - browseDataLayer.events.register("loadend", browseDataLayer, dataLoaded ); - map.addLayer(browseDataLayer); - - browseSelectControl = new OpenLayers.Control.SelectFeature(browseDataLayer, { onSelect: onFeatureSelect }); - browseSelectControl.handlers.feature.stopDown = false; - browseSelectControl.handlers.feature.stopUp = false; - map.addControl(browseSelectControl); - browseSelectControl.activate(); - } else { - browseDataLayer.destroyFeatures(); - browseDataLayer.refresh({ url: url }); - } + browseObjectList = document.createElement("div"); - browseActiveFeature = null; - } + var heading = document.createElement("p"); + heading.className = "browse_heading"; + heading.appendChild(document.createTextNode(I18n.t('browse.start_rjs.object_list.heading'))); + browseObjectList.appendChild(heading); - function dataLoaded() { - if (this.map.dataLayer.active) { - clearStatus(); + var list = document.createElement("ul"); - browseObjectList = document.createElement("div"); + for (var i = 0; i < this.features.length; i++) { + var feature = this.features[i]; - var heading = document.createElement("p"); - heading.className = "browse_heading"; - heading.appendChild(document.createTextNode(I18n.t('browse.start_rjs.object_list.heading'))); - browseObjectList.appendChild(heading); + // Type, for linking + var type = featureType(feature); + var typeName = featureTypeName(feature); + var li = document.createElement("li"); + li.appendChild(document.createTextNode(typeName + " ")); - var list = document.createElement("ul"); + // Link, for viewing in the tab + var link = document.createElement("a"); + link.href = "/browse/" + type + "/" + feature.osm_id; + var name = featureName(feature); + link.appendChild(document.createTextNode(name)); + link.feature = feature; + link.onclick = OpenLayers.Function.bind(viewFeatureLink, link); + li.appendChild(link); - for (var i = 0; i < this.features.length; i++) { - var feature = this.features[i]; + list.appendChild(li); + } - // Type, for linking - var type = featureType(feature); - var typeName = featureTypeName(feature); - var li = document.createElement("li"); - li.appendChild(document.createTextNode(typeName + " ")); + browseObjectList.appendChild(list); - // Link, for viewing in the tab var link = document.createElement("a"); - link.href = "/browse/" + type + "/" + feature.osm_id; - var name = featureName(feature); - link.appendChild(document.createTextNode(name)); - link.feature = feature; - link.onclick = OpenLayers.Function.bind(viewFeatureLink, link); - li.appendChild(link); - - list.appendChild(li); + link.href = this.protocol.url; + link.appendChild(document.createTextNode(I18n.t('browse.start_rjs.object_list.api'))); + browseObjectList.appendChild(link); + + $("#browse_content").html(browseObjectList); } + } - browseObjectList.appendChild(list); + function viewFeatureLink() { + var layer = this.feature.layer; - var link = document.createElement("a"); - link.href = this.protocol.url; - link.appendChild(document.createTextNode(I18n.t('browse.start_rjs.object_list.api'))); - browseObjectList.appendChild(link); + for (var i = 0; i < layer.selectedFeatures.length; i++) { + var f = layer.selectedFeatures[i]; + layer.drawFeature(f, layer.styleMap.createSymbolizer(f, "default")); + } - $("#browse_content").html(browseObjectList); - } - } + onFeatureSelect(this.feature); - function viewFeatureLink() { - var layer = this.feature.layer; + if (browseMode != "auto") { + map.setCenter(this.feature.geometry.getBounds().getCenterLonLat()); + } - for (var i = 0; i < layer.selectedFeatures.length; i++) { - var f = layer.selectedFeatures[i]; - layer.drawFeature(f, layer.styleMap.createSymbolizer(f, "default")); + return false; } - onFeatureSelect(this.feature); + function loadObjectList() { + $("#browse_content").empty(); + $("#browse_content").append(browseObjectList); - if (browseMode != "auto") { - map.setCenter(this.feature.geometry.getBounds().getCenterLonLat()); + return false; } - return false; - } + function onFeatureSelect(feature) { + // Unselect previously selected feature + if (browseActiveFeature) { + browseActiveFeature.layer.drawFeature( + browseActiveFeature, + browseActiveFeature.layer.styleMap.createSymbolizer(browseActiveFeature, "default") + ); + } - function loadObjectList() { - $("#browse_content").empty(); - $("#browse_content").append(browseObjectList); + // Redraw in selected style + feature.layer.drawFeature( + feature, feature.layer.styleMap.createSymbolizer(feature, "select") + ); - return false; - } + // 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(); + } - function onFeatureSelect(feature) { - // Unselect previously selected feature - if (browseActiveFeature) { - browseActiveFeature.layer.drawFeature( - browseActiveFeature, - browseActiveFeature.layer.styleMap.createSymbolizer(browseActiveFeature, "default") - ); - } + // Create a link back to the object list + var div = document.createElement("div"); + div.style.textAlign = "center"; + div.style.marginBottom = "20px"; + $("#browse_content").append(div); + var link = document.createElement("a"); + link.href = "#"; + link.onclick = loadObjectList; + link.appendChild(document.createTextNode(I18n.t('browse.start_rjs.object_list.back'))); + div.appendChild(link); - // Redraw in selected style - feature.layer.drawFeature( - feature, feature.layer.styleMap.createSymbolizer(feature, "select") - ); + var table = document.createElement("table"); + table.width = "100%"; + table.className = "browse_heading"; + $("#browse_content").append(table); - // 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(); - } + var tr = document.createElement("tr"); + table.appendChild(tr); - // Create a link back to the object list - var div = document.createElement("div"); - div.style.textAlign = "center"; - div.style.marginBottom = "20px"; - $("#browse_content").append(div); - var link = document.createElement("a"); - link.href = "#"; - link.onclick = loadObjectList; - link.appendChild(document.createTextNode(I18n.t('browse.start_rjs.object_list.back'))); - div.appendChild(link); - - var table = document.createElement("table"); - table.width = "100%"; - table.className = "browse_heading"; - $("#browse_content").append(table); - - var tr = document.createElement("tr"); - table.appendChild(tr); - - var heading = document.createElement("td"); - heading.appendChild(document.createTextNode(featureNameSelect(feature))); - tr.appendChild(heading); - - var td = document.createElement("td"); - td.align = "right"; - tr.appendChild(td); - - var type = featureType(feature); - var link = document.createElement("a"); - link.href = "/browse/" + type + "/" + feature.osm_id; - link.appendChild(document.createTextNode(I18n.t('browse.start_rjs.object_list.details'))); - td.appendChild(link); - - var div = document.createElement("div"); - div.className = "browse_details"; - - $("#browse_content").append(div); - - // Now the list of attributes - var ul = document.createElement("ul"); - for (var key in feature.attributes) { - var li = document.createElement("li"); - var b = document.createElement("b"); - b.appendChild(document.createTextNode(key)); - li.appendChild(b); - li.appendChild(document.createTextNode(": " + feature.attributes[key])); - ul.appendChild(li); - } + var heading = document.createElement("td"); + heading.appendChild(document.createTextNode(featureNameSelect(feature))); + tr.appendChild(heading); - div.appendChild(ul); + var td = document.createElement("td"); + td.align = "right"; + tr.appendChild(td); - var link = document.createElement("a"); - link.href = "/browse/" + type + "/" + feature.osm_id + "/history"; - link.appendChild(document.createTextNode(I18n.t('browse.start_rjs.show_history'))); - link.onclick = OpenLayers.Function.bind(loadHistory, { - type: type, feature: feature, link: link - }); + var type = featureType(feature); + var link = document.createElement("a"); + link.href = "/browse/" + type + "/" + feature.osm_id; + link.appendChild(document.createTextNode(I18n.t('browse.start_rjs.object_list.details'))); + td.appendChild(link); - div.appendChild(link); + var div = document.createElement("div"); + div.className = "browse_details"; - // Stash the currently drawn feature - browseActiveFeature = feature; - } + $("#browse_content").append(div); - function loadHistory() { - this.link.href = ""; - this.link.innerHTML = I18n.t('browse.start_rjs.wait'); + // Now the list of attributes + var ul = document.createElement("ul"); + for (var key in feature.attributes) { + var li = document.createElement("li"); + var b = document.createElement("b"); + b.appendChild(document.createTextNode(key)); + li.appendChild(b); + li.appendChild(document.createTextNode(": " + feature.attributes[key])); + ul.appendChild(li); + } - $.ajax("/api/" + OSM.API_VERSION + "/" + this.type + "/" + this.feature.osm_id + "/history", { - complete: OpenLayers.Function.bind(displayHistory, this) - }); + div.appendChild(ul); - return false; - } + var link = document.createElement("a"); + link.href = "/browse/" + type + "/" + feature.osm_id + "/history"; + link.appendChild(document.createTextNode(I18n.t('browse.start_rjs.show_history'))); + link.onclick = OpenLayers.Function.bind(loadHistory, { + type: type, feature: feature, link: link + }); - function displayHistory(request) { - if (browseActiveFeature.osm_id != this.feature.osm_id || $("#browse_content").firstChild == browseObjectList) { - return false; + div.appendChild(link); + + // Stash the currently drawn feature + browseActiveFeature = feature; } - this.link.parentNode.removeChild(this.link); + function loadHistory() { + this.link.href = ""; + this.link.innerHTML = I18n.t('browse.start_rjs.wait'); + + $.ajax("/api/" + OSM.API_VERSION + "/" + this.type + "/" + this.feature.osm_id + "/history", { + complete: OpenLayers.Function.bind(displayHistory, this) + }); - var doc = request.responseXML; + return false; + } - var table = document.createElement("table"); - table.width = "100%"; - table.className = "browse_heading"; - $("#browse_content").append(table); + function displayHistory(request) { + if (browseActiveFeature.osm_id != this.feature.osm_id || $("#browse_content").firstChild == browseObjectList) { + return false; + } - var tr = document.createElement("tr"); - table.appendChild(tr); + this.link.parentNode.removeChild(this.link); - var heading = document.createElement("td"); - heading.appendChild(document.createTextNode(I18n.t("browse.start_rjs.history_for_feature", { feature: featureNameHistory(this.feature) }))); - tr.appendChild(heading); + var doc = request.responseXML; - var td = document.createElement("td"); - td.align = "right"; - tr.appendChild(td); + var table = document.createElement("table"); + table.width = "100%"; + table.className = "browse_heading"; + $("#browse_content").append(table); - var link = document.createElement("a"); - link.href = "/browse/" + this.type + "/" + this.feature.osm_id + "/history"; - link.appendChild(document.createTextNode(I18n.t('browse.start_rjs.details'))); - td.appendChild(link); + var tr = document.createElement("tr"); + table.appendChild(tr); - var div = document.createElement("div"); - div.className = "browse_details"; + var heading = document.createElement("td"); + heading.appendChild(document.createTextNode(I18n.t("browse.start_rjs.history_for_feature", { feature: featureNameHistory(this.feature) }))); + tr.appendChild(heading); - var nodes = doc.getElementsByTagName(this.type); - var history = document.createElement("ul"); - for (var i = nodes.length - 1; i >= 0; i--) { - var user = nodes[i].getAttribute("user") || I18n.t('browse.start_rjs.private_user'); - var timestamp = nodes[i].getAttribute("timestamp"); - var item = document.createElement("li"); - item.appendChild(document.createTextNode(I18n.t("browse.start_rjs.edited_by_user_at_timestamp", { user: user, timestamp: timestamp }))); - history.appendChild(item); - } - div.appendChild(history); + var td = document.createElement("td"); + td.align = "right"; + tr.appendChild(td); - $("#browse_content").append(div); - } + var link = document.createElement("a"); + link.href = "/browse/" + this.type + "/" + this.feature.osm_id + "/history"; + link.appendChild(document.createTextNode(I18n.t('browse.start_rjs.details'))); + td.appendChild(link); + + var div = document.createElement("div"); + div.className = "browse_details"; + + var nodes = doc.getElementsByTagName(this.type); + var history = document.createElement("ul"); + for (var i = nodes.length - 1; i >= 0; i--) { + var user = nodes[i].getAttribute("user") || I18n.t('browse.start_rjs.private_user'); + var timestamp = nodes[i].getAttribute("timestamp"); + var item = document.createElement("li"); + item.appendChild(document.createTextNode(I18n.t("browse.start_rjs.edited_by_user_at_timestamp", { user: user, timestamp: timestamp }))); + history.appendChild(item); + } + div.appendChild(history); - function featureType(feature) { - if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") { - return "node"; - } else { - return "way"; + $("#browse_content").append(div); } - } - function featureTypeName(feature) { - if (featureType(feature) == "node") { - return I18n.t('browse.start_rjs.object_list.type.node'); - } else if (featureType(feature) == "way") { - return I18n.t('browse.start_rjs.object_list.type.way'); + function featureType(feature) { + if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") { + return "node"; + } else { + return "way"; + } } - } - function featureName(feature) { - var lang = $('html').attr('lang'); - if (feature.attributes['name:' + lang]) { - return feature.attributes['name:' + lang]; - } else if (feature.attributes.name) { - return feature.attributes.name; - } else { - return feature.osm_id; + function featureTypeName(feature) { + if (featureType(feature) == "node") { + return I18n.t('browse.start_rjs.object_list.type.node'); + } else if (featureType(feature) == "way") { + return I18n.t('browse.start_rjs.object_list.type.way'); + } } - } - function featureNameSelect(feature) { - var lang = $('html').attr('lang'); - if (feature.attributes['name:' + lang]) { - return feature.attributes['name:' + lang]; - } else if (feature.attributes.name) { - return feature.attributes.name; - } else if (featureType(feature) == "node") { - return I18n.t("browse.start_rjs.object_list.selected.type.node", { id: feature.osm_id }); - } else if (featureType(feature) == "way") { - return I18n.t("browse.start_rjs.object_list.selected.type.way", { id: feature.osm_id }); + function featureName(feature) { + var lang = $('html').attr('lang'); + if (feature.attributes['name:' + lang]) { + return feature.attributes['name:' + lang]; + } else if (feature.attributes.name) { + return feature.attributes.name; + } else { + return feature.osm_id; + } } - } - function featureNameHistory(feature) { - var lang = $('html').attr('lang'); - if (feature.attributes['name:' + lang]) { - return feature.attributes['name:' + lang]; - } else if (feature.attributes.name) { - return feature.attributes.name; - } else if (featureType(feature) == "node") { - return I18n.t("browse.start_rjs.object_list.history.type.node", { id: feature.osm_id }); - } else if (featureType(feature) == "way") { - return I18n.t("browse.start_rjs.object_list.history.type.way", { id: feature.osm_id }); + function featureNameSelect(feature) { + var lang = $('html').attr('lang'); + if (feature.attributes['name:' + lang]) { + return feature.attributes['name:' + lang]; + } else if (feature.attributes.name) { + return feature.attributes.name; + } else if (featureType(feature) == "node") { + return I18n.t("browse.start_rjs.object_list.selected.type.node", { id: feature.osm_id }); + } else if (featureType(feature) == "way") { + return I18n.t("browse.start_rjs.object_list.selected.type.way", { id: feature.osm_id }); + } } - } - function setStatus(status) { - $("#browse_status").html(status); - $("#browse_status").show(); - } + function featureNameHistory(feature) { + var lang = $('html').attr('lang'); + if (feature.attributes['name:' + lang]) { + return feature.attributes['name:' + lang]; + } else if (feature.attributes.name) { + return feature.attributes.name; + } else if (featureType(feature) == "node") { + return I18n.t("browse.start_rjs.object_list.history.type.node", { id: feature.osm_id }); + } else if (featureType(feature) == "way") { + return I18n.t("browse.start_rjs.object_list.history.type.way", { id: feature.osm_id }); + } + } - function clearStatus() { - $("#browse_status").html(""); - $("#browse_status").hide(); + function setStatus(status) { + $("#browse_status").html(status); + $("#browse_status").show(); + } + + function clearStatus() { + $("#browse_status").html(""); + $("#browse_status").hide(); + } } -} +}); \ No newline at end of file -- 2.43.2