From 293fb9946705417b1d313feb8c65beadaf92a5d3 Mon Sep 17 00:00:00 2001
From: Tom Hughes <tom@compton.nu>
Date: Wed, 1 Mar 2017 18:07:22 +0000
Subject: [PATCH] Remove inline javascript from id views

---
 app/assets/javascripts/edit/id.js.erb | 35 ++++++++++++++
 app/assets/javascripts/id.js          | 55 ++++++++++++++++++++++
 app/views/site/_id.html.erb           | 57 ++++------------------
 app/views/site/id.html.erb            | 68 +++++----------------------
 4 files changed, 112 insertions(+), 103 deletions(-)
 create mode 100644 app/assets/javascripts/edit/id.js.erb

diff --git a/app/assets/javascripts/edit/id.js.erb b/app/assets/javascripts/edit/id.js.erb
new file mode 100644
index 000000000..bedabb1f9
--- /dev/null
+++ b/app/assets/javascripts/edit/id.js.erb
@@ -0,0 +1,35 @@
+$(document).ready(function () {
+  var id = $("#id-embed");
+
+  if (id.data("key")) {
+    var hashParams = OSM.params(location.hash.substring(1)),
+        mapParams = OSM.mapParams(),
+        params = {};
+
+    if (mapParams.object) {
+      params.id = mapParams.object.type[0] + mapParams.object.id;
+      mapParams = OSM.parseHash(location.hash);
+      if (mapParams.center) {
+        params.map = mapParams.zoom + '/' + mapParams.center.lat + '/' + mapParams.center.lng;
+      }
+    } else if (id.data("lat") && id.data("lon")) {
+      params.map = "16/" + id.data("lat") + "/" + id.data("lon");
+    } else {
+      params.map = (mapParams.zoom || 17) + '/' + mapParams.lat + '/' + mapParams.lon;
+    }
+
+    if (hashParams.background) params.background = hashParams.background;
+    if (hashParams.comment) params.comment = hashParams.comment;
+    if (hashParams.offset) params.offset = hashParams.offset;
+
+    if (id.data("gpx")) {
+      params.gpx = id.data("gpx");
+    } else if (hashParams.gpx) {
+      params.gpx = hashParams.gpx;
+    }
+
+    id.attr("src", id.data("url") + "#" + querystring.stringify(params));
+  } else {
+    alert(I18n.t("site.edit.id_not_configured"));
+  }
+});
diff --git a/app/assets/javascripts/id.js b/app/assets/javascripts/id.js
index 185717b32..e1fea1768 100644
--- a/app/assets/javascripts/id.js
+++ b/app/assets/javascripts/id.js
@@ -1 +1,56 @@
 //= require iD
+
+document.addEventListener("DOMContentLoaded", function(e) {
+  var container = document.getElementById("id-container");
+
+  if (typeof iD == 'undefined' || !iD.Detect().support) {
+    container.innerHTML = 'This editor is supported ' +
+      'in Firefox, Chrome, Safari, Opera, Edge, and Internet Explorer 11. ' +
+      'Please upgrade your browser or use Potlatch 2 to edit the map.';
+    container.className = 'unsupported';
+  } else {
+    var id = iD.Context()
+      .embed(true)
+      .assetPath("iD/")
+      .assetMap(container.dataset.assetMap)
+      .locale(container.dataset.locale, container.dataset.localePath)
+      .preauth({
+        urlroot: location.protocol + "//" + location.host,
+        oauth_consumer_key: container.dataset.consumerKey,
+        oauth_secret: container.dataset.consumerSecret,
+        oauth_token: container.dataset.token,
+        oauth_token_secret: container.dataset.tokenSecret
+      });
+
+    id.map().on('move.embed', parent.$.throttle(250, function() {
+      if (id.inIntro()) return;
+      var zoom = ~~id.map().zoom(),
+        center = id.map().center(),
+        llz = { lon: center[0], lat: center[1], zoom: zoom };
+
+      parent.updateLinks(llz, zoom);
+
+      // Manually resolve URL to avoid iframe JS context weirdness.
+      // http://bl.ocks.org/jfirebaugh/5439412
+      var hash = parent.OSM.formatHash(llz);
+      if (hash !== parent.location.hash) {
+        parent.location.replace(parent.location.href.replace(/(#.*|$)/, hash));
+      }
+    }));
+
+    parent.$("body").on("click", "a.set_position", function (e) {
+      e.preventDefault();
+      var data = parent.$(this).data();
+
+      // 0ms timeout to avoid iframe JS context weirdness.
+      // http://bl.ocks.org/jfirebaugh/5439412
+      setTimeout(function() {
+        id.map().centerZoom(
+          [data.lon, data.lat],
+          Math.max(data.zoom || 15, 13));
+      }, 0);
+    });
+
+    id.ui()(container);
+  }
+});
diff --git a/app/views/site/_id.html.erb b/app/views/site/_id.html.erb
index d93ee091e..867b148fd 100644
--- a/app/views/site/_id.html.erb
+++ b/app/views/site/_id.html.erb
@@ -1,47 +1,10 @@
-<% if defined? ID_KEY %>
-  <div id="map">
-    <iframe frameBorder="0" id="id-embed" class="id-embed" allowfullscreen></iframe>
-  </div>
-  <script>
-    var params = {};
-
-    var mapParams = OSM.mapParams();
-    if (mapParams.object) {
-      params.id = mapParams.object.type[0] + mapParams.object.id;
-      mapParams = OSM.parseHash(location.hash);
-      if (mapParams.center) {
-        params.map = mapParams.zoom + '/' + mapParams.center.lat + '/' + mapParams.center.lng;
-      }
-    } else {
-<% if @lat && @lon -%>
-      params.map = '16/<%= @lat %>/<%= @lon %>';
-<% else -%>
-      params.map = (mapParams.zoom || 17) + '/' + mapParams.lat + '/' + mapParams.lon;
-<% end -%>
-    }
-
-    var hashParams = OSM.params(location.hash.substring(1));
-
-    if (hashParams.background) {
-      params.background = hashParams.background;
-    }
-    if (hashParams.comment) {
-      params.comment = hashParams.comment;
-    }
-    if (hashParams.offset) {
-      params.offset = hashParams.offset;
-    }
-
-<% if params[:gpx] -%>
-    params.gpx = '<%= trace_data_url(params[:gpx], :format => :xml) %>';
-<% else -%>
-    if (hashParams.gpx) {
-      params.gpx = hashParams.gpx;
-    }
-<% end -%>
-
-    $('#id-embed').attr('src', '<%= id_url :locale => params[:locale] %>#' + querystring.stringify(params));
-  </script>
-<% else %>
-  <script type="text/javascript">alert("<%= t 'site.edit.id_not_configured' %>")</script>
-<% end %>
+<%= javascript_include_tag "edit/id" %>
+
+<div id="map">
+  <% data = { :key => ID_KEY } -%>
+  <% data[:lat] = @lat if @lat -%>
+  <% data[:lon] = @lon if @lon -%>
+  <% data[:gpx] = trace_data_url(params[:gpx], :format => :xml) if params[:gpx] -%>
+  <% data[:url] = id_url(:locale => params[:locale]) -%>
+  <%= content_tag :iframe, "", :frameBorder => 0, :id => "id-embed", :class => "id-embed", :allowfullscreen => "", :data => data %>
+</div>
diff --git a/app/views/site/id.html.erb b/app/views/site/id.html.erb
index d1ac6b02f..a38a81534 100644
--- a/app/views/site/id.html.erb
+++ b/app/views/site/id.html.erb
@@ -8,61 +8,17 @@
   <!-- <![endif]-->
 </head>
 <body>
-<div id='id-container'></div>
-<script>
-  if (typeof iD == 'undefined' || !iD.Detect().support) {
-    document.getElementById('id-container').innerHTML = 'This editor is supported ' +
-      'in Firefox, Chrome, Safari, Opera, Edge, and Internet Explorer 11. ' +
-      'Please upgrade your browser or use Potlatch 2 to edit the map.';
-    document.getElementById('id-container').className = 'unsupported';
-  } else {
-    <% locale = ID::LOCALES.preferred(preferred_languages).to_s %>
-
-    var id = iD.Context()
-      .embed(true)
-      .assetPath("iD/")
-      .assetMap(<%= assets("iD").to_json.html_safe %>)
-      .locale("<%= locale %>", "<%= asset_path("iD/locales/#{locale}.json") %>")
-      .preauth({
-        <% token = @user.access_token(ID_KEY) %>
-        urlroot: "<%= request.protocol + request.host_with_port %>",
-        oauth_consumer_key: "<%= token.client_application.key %>",
-        oauth_secret: "<%= token.client_application.secret %>",
-        oauth_token: "<%= token.token %>",
-        oauth_token_secret: "<%= token.secret %>"
-      });
-
-    id.map().on('move.embed', parent.$.throttle(250, function() {
-      if (id.inIntro()) return;
-      var zoom = ~~id.map().zoom(),
-        center = id.map().center(),
-        llz = { lon: center[0], lat: center[1], zoom: zoom };
-
-      parent.updateLinks(llz, zoom);
-
-      // Manually resolve URL to avoid iframe JS context weirdness.
-      // http://bl.ocks.org/jfirebaugh/5439412
-      var hash = parent.OSM.formatHash(llz);
-      if (hash !== parent.location.hash) {
-        parent.location.replace(parent.location.href.replace(/(#.*|$)/, hash));
-      }
-    }));
-
-    parent.$("body").on("click", "a.set_position", function (e) {
-      e.preventDefault();
-      var data = parent.$(this).data();
-
-      // 0ms timeout to avoid iframe JS context weirdness.
-      // http://bl.ocks.org/jfirebaugh/5439412
-      setTimeout(function() {
-        id.map().centerZoom(
-          [data.lon, data.lat],
-          Math.max(data.zoom || 15, 13));
-      }, 0);
-    });
-
-    id.ui()(document.getElementById("id-container"));
-  }
-</script>
+<% data = {} -%>
+<% if defined? ID_KEY %>
+<% token = @user.access_token(ID_KEY) %>
+<% data[:token] = token.token -%>
+<% data[:token_secret] = token.secret -%>
+<% data[:consumer_key] = token.client_application.key -%>
+<% data[:consumer_secret] = token.client_application.secret -%>
+<% end %>
+<% data[:locale] = ID::LOCALES.preferred(preferred_languages).to_s -%>
+<% data[:locale_path] = asset_path("iD/locales/#{data[:locale]}.json") -%>
+<% data[:asset_map] = assets("iD").to_json -%>
+<%= content_tag :div, "", :id => "id-container", :data => data %>
 </body>
 </html>
-- 
2.43.2