From 67cb4a21cc639a9719ed4240650e06d2bdd0b13a Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Wed, 12 Sep 2012 18:16:39 -0400 Subject: [PATCH 1/2] First batch of changes. This significantly changes how the export dialog looks and behaves. --- app/assets/javascripts/export.js | 89 ++++++++---------------- app/assets/stylesheets/common.css.scss | 43 ++++++------ app/views/export/start.html.erb | 95 +++++++++++++------------- 3 files changed, 93 insertions(+), 134 deletions(-) diff --git a/app/assets/javascripts/export.js b/app/assets/javascripts/export.js index ae1871b502..ca79c6e614 100644 --- a/app/assets/javascripts/export.js +++ b/app/assets/javascripts/export.js @@ -30,30 +30,19 @@ function startExport(sidebarHtml) { transform.events.register("transformcomplete", transform, transformComplete); map.addControl(transform); - map.events.register("moveend", map, mapMoved); + openSidebar(); + map.events.register("changebaselayer", map, htmlUrlChanged); $("#sidebar_title").html(I18n.t('export.start_rjs.export')); $("#sidebar_content").html(sidebarHtml); - $("#maxlat,#minlon,#maxlon,#minlat").change(boundsChanged); - - $("#drag_box").click(startDrag); - - $("#add_marker").click(startMarker); - $("#format_osm,#format_mapnik,#format_html").click(formatChanged); - + $("#format_html").click(); + $("#add_marker").click(startMarker); $("#mapnik_scale").change(mapnikSizeChanged); - openSidebar(); - - if (map.baseLayer.name == "Mapnik") { - $("#format_mapnik").prop("checked", true); - } - - formatChanged(); - setBounds(map.getExtent()); + setBounds(); $("body").removeClass("site-index").addClass("site-export"); @@ -62,14 +51,13 @@ function startExport(sidebarHtml) { clearBox(); clearMarker(); - map.events.unregister("moveend", map, mapMoved); map.events.unregister("changebaselayer", map, htmlUrlChanged); map.removeLayer(vectors); }); function getMercatorBounds() { var bounds = new OpenLayers.Bounds($("#minlon").val(), $("#minlat").val(), - $("#maxlon").val(), $("#maxlat").val()); + $("#maxlon").val(), $("#maxlat").val()); return bounds.transform(epsg4326, epsg900913); } @@ -77,7 +65,6 @@ function startExport(sidebarHtml) { function boundsChanged() { var bounds = getMercatorBounds(); - map.events.unregister("moveend", map, mapMoved); map.zoomToExtent(bounds); clearBox(); @@ -87,23 +74,14 @@ function startExport(sidebarHtml) { mapnikSizeChanged(); } - function startDrag() { - $("#drag_box").html(I18n.t('export.start_rjs.drag_a_box')); - - clearBox(); - box.activate(); - }; - function endDrag(bbox) { var bounds = bbox.getBounds(); - map.events.unregister("moveend", map, mapMoved); + clearBox(); setBounds(bounds); drawBox(bounds); box.deactivate(); validateControls(); - - $("#drag_box").html(I18n.t('export.start_rjs.manually_select')); } function transformComplete(event) { @@ -166,33 +144,33 @@ function startExport(sidebarHtml) { } } - function mapMoved() { - setBounds(map.getExtent()); - validateControls(); - } - function setBounds(bounds) { var toPrecision = zoomPrecision(map.getZoom()); - bounds = bounds.clone().transform(map.getProjectionObject(), epsg4326); + if (!bounds) { + bounds = map.getExtent().clone().scale(0.8).transform(map.getProjectionObject(), epsg4326); + } else { + bounds = bounds.clone().transform(map.getProjectionObject(), epsg4326); + } $("#minlon").val(toPrecision(bounds.left)); $("#minlat").val(toPrecision(bounds.bottom)); $("#maxlon").val(toPrecision(bounds.right)); $("#maxlat").val(toPrecision(bounds.top)); + drawBox(proj(bounds)); mapnikSizeChanged(); htmlUrlChanged(); } function clearBox() { - transform.deactivate(); vectors.destroyFeatures(); } function drawBox(bounds) { var feature = new OpenLayers.Feature.Vector(bounds.toGeometry()); - + transform.deactivate(); + vectors.removeAllFeatures(); vectors.addFeatures(feature); transform.setFeature(feature); } @@ -248,7 +226,10 @@ function startExport(sidebarHtml) { escaped.push(c < 127 ? text.charAt(i) : "&#" + c + ";"); } - html += '
'+escaped.join("")+''; + html += '
' + escaped.join("") + + ''; $("#export_html_text").val(html); @@ -258,32 +239,16 @@ function startExport(sidebarHtml) { } function formatChanged() { - $("#export_commit").show(); - - if ($("#format_osm").prop("checked")) { - $("#export_osm").show(); - } else { - $("#export_osm").hide(); - } + $('.export_details div').attr('class', ''); + $(this).parent().attr('class', 'selected'); + $('#export_options').attr('class', $("input[name=format]:checked").val()); - if ($("#format_mapnik").prop("checked")) { - $("#mapnik_scale").val(roundScale(map.getScale())); - $("#export_mapnik").show(); + // legacy + $("#mapnik_scale").val(roundScale(map.getScale())); + $("#export_mapnik").show(); - mapnikSizeChanged(); - } else { - $("#export_mapnik").hide(); - } - - if ($("#format_html").prop("checked")) { - $("#export_html").show(); - $("#export_commit").hide(); - $("#export_html_text").prop("selected", true); - } else { - $("#export_html").hide(); - - clearMarker(); - } + mapnikSizeChanged(); + clearMarker(); validateControls(); } diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss index b1f494b7ff..e730c5161c 100644 --- a/app/assets/stylesheets/common.css.scss +++ b/app/assets/stylesheets/common.css.scss @@ -488,7 +488,14 @@ body.site-export #tabnav a#exportanchor { height: 29px; font-size: 14px; line-height: 15px; - background: #bbb; + background: #eee; +} + +#sidebar h3 { + margin: 0px; + padding: 2px 5px; + border-bottom: 1px solid #ccc; + font-weight: bold; } /* Rules for the map key which appears in the popout sidebar */ @@ -555,12 +562,6 @@ body.site-export #tabnav a#exportanchor { /* Rules for export information which appears in the popout sidebar */ -.export_heading { - margin: 0px; - padding: 2px 5px; - border-bottom: 1px solid #ccc; - font-weight: bold; -} .export_bounds { width: 100%; @@ -571,25 +572,21 @@ body.site-export #tabnav a#exportanchor { margin: 5px; } -.export_details { - padding: 2px 6px; +.export_details div { + padding:5px; } - -#export_osm { - display: none; -} - -#export_mapnik { - display: none; +.export_details div.selected { + background:#cbeea7; } - -#export_osmarender { - display: none; +#export_options { + #mapnik, #html, #image { + display:none; + } } - -.export_hint { - padding: 0px 12px; - font-style: italic; +#export_options.mapnik #mapnik, +#export_options.html #html, +#export_options.image #image { + display:block; } .export_buttons { diff --git a/app/views/export/start.html.erb b/app/views/export/start.html.erb index 539c6f4485..051bd5f8a0 100644 --- a/app/views/export/start.html.erb +++ b/app/views/export/start.html.erb @@ -1,6 +1,13 @@ <%= form_tag :action => "finish" do %> -

<%= t'export.start.area_to_export' %>

+
+
<%= radio_button_tag("format", "html") %> +
+
<%= radio_button_tag("format", "mapnik") %> +
+
<%= radio_button_tag("format", "osm") %> +
+
<%= text_field_tag('maxlat', nil, :size => 10, :class => "export_bound") %> @@ -9,70 +16,60 @@ <%= text_field_tag('maxlon', nil, :size => 10, :class => "export_bound") %>
<%= text_field_tag('minlat', nil, :size => 10, :class => "export_bound") %> -

- <%= t'export.start.manually_select' %> -

-

<%= t'export.start.format_to_export' %>

+

<%= t'export.start.format_to_export' %>

-
-

- <%= radio_button_tag("format", "osm") %> <%= t'export.start.osm_xml_data' %> -
- <%= radio_button_tag("format", "mapnik") %> <%= t'export.start.map_image' %> -
- <%= radio_button_tag("format", "html") %> <%= t'export.start.embeddable_html' %> -

-
-
-

<%= t'export.start.licence' %>

+
+
+

<%= t'export.start.options' %>

-
-

<%= raw t'export.start.export_details' %>

-
+
+

<%= t'export.start.format' %> <%= select_tag("mapnik_format", options_for_select([["PNG", "png"], ["JPEG", "jpeg"], ["SVG", "svg"], ["PDF", "pdf"]], "png")) %>

+

<%= t'export.start.scale' %> 1 : <%= text_field_tag("mapnik_scale", nil, :size => 8) %> (<%= t'export.start.max' %> 1 : )

+

<%= t'export.start.image_size' %> x

+
+
-
-

<%= t'export.start.too_large.heading' %>

+
+

<%= t'export.start.options' %>

-
-

<%= t'export.start.too_large.body' %>

-
-
-
+
+

<%= t'export.start.add_marker' %>

+ +
-
-

<%= t'export.start.options' %>

+

<%= t'export.start.output' %>

-
-

<%= t'export.start.format' %> <%= select_tag("mapnik_format", options_for_select([["PNG", "png"], ["JPEG", "jpeg"], ["SVG", "svg"], ["PDF", "pdf"]], "png")) %>

-

<%= t'export.start.scale' %> 1 : <%= text_field_tag("mapnik_scale", nil, :size => 8) %> (<%= t'export.start.max' %> 1 : )

-

<%= t'export.start.image_size' %> x

-
-
+
+

+

<%= t'export.start.paste_html' %>

+
+
-
-

<%= t'export.start.options' %>

+
+

<%= t'export.start.licence' %>

-
-

<%= t'export.start.add_marker' %>

- -
+
+

<%= raw t'export.start.export_details' %>

+
-

<%= t'export.start.output' %>

+
+

<%= t'export.start.too_large.heading' %>

-
-

-

<%= t'export.start.paste_html' %>

-
+
+

<%= t'export.start.too_large.body' %>

+
+
+
-

<%= submit_tag t('export.start.export_button'), :id => "export_commit" %>

+ <%= submit_tag t('export.start.export_button'), :id => "export_commit" %>
<% end %> From d21351748168fa2bd12bace8035936341943695e Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Wed, 12 Sep 2012 18:40:21 -0400 Subject: [PATCH 2/2] Further refining style and logic --- app/assets/javascripts/export.js | 2 +- app/assets/stylesheets/common.css.scss | 32 ++++++---- app/views/export/start.html.erb | 86 ++++++++++---------------- 3 files changed, 53 insertions(+), 67 deletions(-) diff --git a/app/assets/javascripts/export.js b/app/assets/javascripts/export.js index ca79c6e614..04177b92c5 100644 --- a/app/assets/javascripts/export.js +++ b/app/assets/javascripts/export.js @@ -239,7 +239,7 @@ function startExport(sidebarHtml) { } function formatChanged() { - $('.export_details div').attr('class', ''); + $('.export_buttons div').attr('class', ''); $(this).parent().attr('class', 'selected'); $('#export_options').attr('class', $("input[name=format]:checked").val()); diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss index e730c5161c..b104f7250b 100644 --- a/app/assets/stylesheets/common.css.scss +++ b/app/assets/stylesheets/common.css.scss @@ -565,6 +565,7 @@ body.site-export #tabnav a#exportanchor { .export_bounds { width: 100%; + display:none; text-align: center; } @@ -572,28 +573,37 @@ body.site-export #tabnav a#exportanchor { margin: 5px; } -.export_details div { - padding:5px; +.export_buttons { + border-bottom:1px solid #ccc; + background:#eee; +} +.export_buttons div { + padding: 5px; + &.selected { + background: #cbeea7; + } } -.export_details div.selected { - background:#cbeea7; + +.export_details { + padding: 10px; } + +#export_html_text { + width:95%; +} + #export_options { - #mapnik, #html, #image { + #mapnik, #html, #osm { display:none; } } + #export_options.mapnik #mapnik, #export_options.html #html, -#export_options.image #image { +#export_options.osm #osm { display:block; } -.export_buttons { - width: 100%; - text-align: center; -} - /* Rules for the main content area */ #content { diff --git a/app/views/export/start.html.erb b/app/views/export/start.html.erb index 051bd5f8a0..7f84d4380a 100644 --- a/app/views/export/start.html.erb +++ b/app/views/export/start.html.erb @@ -1,6 +1,6 @@ <%= form_tag :action => "finish" do %> -
+
<%= radio_button_tag("format", "html") %>
<%= radio_button_tag("format", "mapnik") %> @@ -9,6 +9,36 @@
+ +
+
+

<%= t'export.start.format' %> <%= select_tag("mapnik_format", options_for_select([["PNG", "png"], ["JPEG", "jpeg"], ["SVG", "svg"], ["PDF", "pdf"]], "png")) %>

+

<%= t'export.start.scale' %> 1 : <%= text_field_tag("mapnik_scale", nil, :size => 8) %> (<%= t'export.start.max' %> 1 : )

+

<%= t'export.start.image_size' %> x

+ <%= submit_tag t('export.start.export_button'), :id => "export_commit" %> +
+ +
+ +

<%= t'export.start.paste_html' %>

+ + +
+ +
+

<%= t'export.start.licence' %>

+
+

<%= t'export.start.too_large.heading' %>

+

<%= t'export.start.too_large.body' %>

+
+ <%= submit_tag t('export.start.export_button'), :id => "export_commit" %> +
+
+ +
<%= text_field_tag('maxlat', nil, :size => 10, :class => "export_bound") %>
@@ -18,58 +48,4 @@ <%= text_field_tag('minlat', nil, :size => 10, :class => "export_bound") %>
-

<%= t'export.start.format_to_export' %>

- - -
-
-

<%= t'export.start.options' %>

- -
-

<%= t'export.start.format' %> <%= select_tag("mapnik_format", options_for_select([["PNG", "png"], ["JPEG", "jpeg"], ["SVG", "svg"], ["PDF", "pdf"]], "png")) %>

-

<%= t'export.start.scale' %> 1 : <%= text_field_tag("mapnik_scale", nil, :size => 8) %> (<%= t'export.start.max' %> 1 : )

-

<%= t'export.start.image_size' %> x

-
-
- -
-

<%= t'export.start.options' %>

- -
-

<%= t'export.start.add_marker' %>

- -
- -

<%= t'export.start.output' %>

- -
-

-

<%= t'export.start.paste_html' %>

-
-
- -
-

<%= t'export.start.licence' %>

- -
-

<%= raw t'export.start.export_details' %>

-
- -
-

<%= t'export.start.too_large.heading' %>

- -
-

<%= t'export.start.too_large.body' %>

-
-
-
-
- -
- <%= submit_tag t('export.start.export_button'), :id => "export_commit" %> -
- <% end %>