Through several steps, the wizard guides the user in the different parameters that can be adjusted when building a map. The wizard heavily uses Javascript and Ajax to provide a nice user experience. It can easily be modified to remove or add wizard steps as needed.
Signed-off-by: Thomas Petazzoni <[email protected]> --- www/maposmatic/forms.py | 3 + www/maposmatic/views.py | 10 +- www/media/map_rendering_form.css | 67 ++++++ www/media/map_rendering_form.js | 459 +++++++++++++++++++++++++++++++++++++ www/media/osm_map.js | 260 +-------------------- www/media/style.css | 4 - www/templates/maposmatic/new.html | 157 ++++++++------ 7 files changed, 628 insertions(+), 332 deletions(-) create mode 100644 www/media/map_rendering_form.css create mode 100644 www/media/map_rendering_form.js diff --git a/www/maposmatic/forms.py b/www/maposmatic/forms.py index 8044db2..2039591 100644 --- a/www/maposmatic/forms.py +++ b/www/maposmatic/forms.py @@ -53,6 +53,9 @@ class MapRenderingJobForm(forms.ModelForm): The main map rendering form, displayed on the 'Create Map' page. It's a ModelForm based on the MapRenderingJob model. """ + class Media: + css = { "all": ["/smedia/map_rendering_form.css"] } + js = ["/smedia/jquery.js", "/smedia/map_rendering_form.js"] class Meta: model = models.MapRenderingJob diff --git a/www/maposmatic/views.py b/www/maposmatic/views.py index 3077932..f95b25a 100644 --- a/www/maposmatic/views.py +++ b/www/maposmatic/views.py @@ -70,13 +70,9 @@ def new(request): if form.is_valid(): job = form.save(commit=False) job.administrative_osmid = form.cleaned_data.get('administrative_osmid') - - existing = helpers.rendering_already_exists(job) - if existing: - request.session['redirected'] = True - return HttpResponseRedirect(reverse('job-by-id', - args=[existing])) - + job.stylesheet = form.cleaned_data.get('stylesheet') + job.layout = form.cleaned_data.get('layout') + job.papersize = form.cleaned_data.get('papersize') job.status = 0 # Submitted job.submitterip = request.META['REMOTE_ADDR'] job.map_language = form.cleaned_data.get('map_language') diff --git a/www/media/map_rendering_form.css b/www/media/map_rendering_form.css new file mode 100644 index 0000000..6a3bf9b --- /dev/null +++ b/www/media/map_rendering_form.css @@ -0,0 +1,67 @@ +ul#steplist { + margin: 0; + padding: 10px 0; + list-style: none; + text-align: left; + background-color: #cccccc; +} + +ul#steplist li { + margin: 0; + display: inline; + padding: 10px 2px; + background-color: #cccccc; +} + +div#step-location-bbox, div#step-location-admin { + margin-top: 20px; +} + +ul#steplist li.title-current-step { + background-color: #eeeeee; + font-weight: bold; +} + +div#navlinks { + width: 100%; + font-size: 130%; +} + +a#nextlink { + float: right; +} + +a#prevlink { + float: left; +} + +span#prevlinkdisabled { + color: grey; + float: left; +} + +span#nextlinkdisabled { + color: grey; + float: right; +} + +div.wizard { + width: 900px; +} + +div.wizardstep { + width: 100%; + display: none; + padding: 20px; +} + +div#step-location { + display: block; +} + +table#summary td.summary-label { + width: 300px; + font-weight: bold; + padding-top: 5px; + padding-bottom: 5px; +} diff --git a/www/media/map_rendering_form.js b/www/media/map_rendering_form.js new file mode 100644 index 0000000..c4461d0 --- /dev/null +++ b/www/media/map_rendering_form.js @@ -0,0 +1,459 @@ +/* coding: utf-8 -*- mode: espresso; indent-tabs-mode: nil -*- + * + * maposmatic, the web front-end of the MapOSMatic city map generation system + * Copyright (C) 2009 David Decotigny + * Copyright (C) 2009 Frédéric Lehobey + * Copyright (C) 2009 David Mentré + * Copyright (C) 2009 Maxime Petazzoni + * Copyright (C) 2009 Thomas Petazzoni + * Copyright (C) 2009 Gaël Utard + * Copyright (C) 2009 Ãtienne Loks + * Copyright (C) 2010 Pierre Mauduit + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see <http://www.gnu.org/licenses/>. + * + * See the file COPYING for details. + */ + +var currentPanel = 1; + +function mapTitleChange() +{ + if ($("#id_maptitle").val().length != 0) + allowNextStep(); + else + disallowNextStep(); +} + +function prepareTitlePanel() +{ + if (getCurrentMode() == 'bbox') { + $("#id_maptitle").val(""); + disallowNextStep(); + } + else { + $("#id_maptitle").val($("#id_administrative_city").val()); + allowNextStep(); + } + + $('#id_maptitle').keyup(mapTitleChange); +} + +function filterAllowedPaperSizes(papersizelist) +{ + $.each($("#step-papersize ul li"), function(id, item) { + papersize = $('label input[value]', item).val(); + if (jQuery.inArray(papersize, papersizelist) < 0) + $(item).hide(); + else + $(item).show(); + }); + + $("#step-papersize ul").show(); + $("label input", $($("#step-papersize ul li:visible")[0])).attr("checked", "true"); +} + +function preparePaperSizePanel() +{ + $("#step-papersize ul").hide(); + if (getCurrentMode() == 'bbox') + { + $.post("/papersize/", { + lat_upper_left : $("#lat_upper_left").val(), + lon_upper_left : $("#lon_upper_left").val(), + lat_bottom_right : $("#lat_bottom_right").val(), + lon_bottom_right : $("#lon_bottom_right").val(), + layout : $("input[name='layout']:checked").val() + }, + function(data) { + filterAllowedPaperSizes(data); + } + ); + } + else + { + $.post("/papersize/", { + osmid: $("#id_administrative_osmid").val(), + layout : $("input[name='layout']:checked").val() + }, + function(data) { + filterAllowedPaperSizes(data); + } + ); + } +} + +/** When using a by admin boundary area, contains the country code of + * the location to render. */ +var selectedCountry; + +function prepareLanguagePanel() +{ + var seen = false; + $('#id_map_language').children('option').each(function() { + if (! ($(this).val().match('.._' + selectedCountry.toUpperCase() + '\..*') != null + || $(this).val() == 'C')) + { + $(this).hide(); + } + else { + $(this).show(); + if (! seen) { + $(this).attr("selected", "selected"); + seen = true; + } + } + }); +} + +function prepareSummaryPanel() +{ + if (getCurrentMode() == 'bbox') + { + $("#summary-area"). + html("(" + + $("#lat_upper_left").val() + "," + + $("#lon_upper_left").val() + ") → (" + + $("#lat_bottom_right").val() + "," + + $("#lon_bottom_right").val() + ")"); + } + else + { + osmid = $("#id_administrative_osmid").val(); + $("#summary-area"). + html($("#id_administrative_city").val() + + "<br/>(osm: <a href=\"http://www.openstreetmap.org/browse/relation/"; + + Math.abs(osmid) + "\">relation " + Math.abs(osmid) + "</a>)"); + } + + $("#summary-layout").html($("input[name='layout']:checked").parent().text().trim()); + $("#summary-papersize").html($("input[name='papersize']:checked").parent().text().trim()); + $("#summary-stylesheet").html($("input[name='stylesheet']:checked").parent().text().trim()); + $("#summary-language").html($("#id_map_language :selected").text()); +} + +/** Function called *before* showing a given panel. It gives the + * opportunity to update informations in this panel. */ +function prepareNextPage(next) +{ + if (next == "step-title") + prepareTitlePanel(); + else if (next == "step-papersize") + preparePaperSizePanel(); + else if (next == "step-summary") + prepareSummaryPanel(); + else if (next == "step-language") + prepareLanguagePanel(); +} + +/* + * Helper functions to hide/show the back/next links + */ + +function allowPrevStep() { + $("#prevlinkdisabled").hide(); + $("#prevlink").show(); +} + +function disallowPrevStep() { + $("#prevlinkdisabled").show(); + $("#prevlink").hide(); +} + +function allowNextStep() { + $("#nextlinkdisabled").hide(); + $("#nextlink").show(); +} + +function disallowNextStep() { + $("#nextlinkdisabled").show(); + $("#nextlink").hide(); +} + +/** Hide a panel and un-highlight the corresponding title in the + * progress bar */ +function hidePanel(panel) { + id = panel.attr("id"); + panel.hide(); + $("#" + id + "-title").removeClass("title-current-step"); +} + +/** Show a panel and highlight the corresponding title in the progress + * bar */ +function showPanel(panel) { + id = panel.attr("id"); + panel.show(); + $("#" + id + "-title").addClass("title-current-step"); +} + +/** Selectors used in loadNextStep() and loadPrevStep() to + * respectively find all panels and the currently visible panel */ +const STEP_PANEL_SELECTOR = "div[id|=step][class=wizardstep]"; +const VISIBLE_STEP_PANEL_SELECTOR = "div[id|=step][class=wizardstep]:visible"; + +/** Replace the panel of the current step by the panel of the next + step, after preparing it. Also makes sure that Back/Next links are + enabled/disabled as needed. */ +function loadNextStep() +{ + current = $(VISIBLE_STEP_PANEL_SELECTOR); + next = current.next(STEP_PANEL_SELECTOR); + hasafternext = (next.next(STEP_PANEL_SELECTOR).length != 0); + + prepareNextPage(next.attr("id")); + hidePanel(current); + showPanel(next); + + allowPrevStep(); + if (! hasafternext) + disallowNextStep(); +} + +/** Replace the panel of the current step by the panel of the next + step. Also makes sure that Back/Next links are enabled/disabled as + needed. */ +function loadPrevStep() +{ + current = $(VISIBLE_STEP_PANEL_SELECTOR); + prev = current.prev(STEP_PANEL_SELECTOR); + hasbeforeprev = (prev.prev(STEP_PANEL_SELECTOR).length != 0); + + hidePanel(current); + showPanel(prev); + + allowNextStep(); + if (! hasbeforeprev) + disallowPrevStep(); +} + +/** Auto-suggest feature. */ +function suggest(input, results, osm_id, options) { + var $input = $(input).attr('autocomplete', 'off'); + var $results = $(results); + var $osm_id = $(osm_id); + var timeout = false; + var shown = false; + + closeSuggest(true); + + // Setup the keyup event. + $input.keyup(processKey); + + // Disable form validation via the Enter key + $input.keypress(function(e) { if (e.keyCode == 13) return false; }); + + function appendValidResult(item) { + var id = 'rad_' + item.country_code + '_' + item.ocitysmap_params['id']; + $results.append('<li class="suggestok" id="' + id + '">' + + item.display_name + '</li>'); + + var e = $('#' + id) + e.bind('click', function(e) { setResult($(this)); }); + e.bind('mouseover', function(e) { setSelectedResultTo($(this)); }); + } + + /* Empty and close the suggestion box. */ + function closeSuggest(hide) { + $results.empty(); + + if (hide) + $results.hide(); + else + $results.show(); + + shown = !hide; + } + + /* Handle the JSON result. */ + function handleNominatimResults(data, textResult) { + var unusable_token = false; + $(input).css('cursor', 'text'); + closeSuggest(false); + + if (!data.length) { + $results.append('<li class="info">' + $('#noresultsinfo').html() + '</li>'); + return; + } + + $.each(data, function(i, item) { + if (typeof item.ocitysmap_params != 'undefined' && + item.ocitysmap_params['admin_level'] == 6) { + appendValidResult(item); + } else { + $results.append('<li class="suggestoff">' + + item.display_name + '</li>'); + unusable_token = true; + } + }); + + if (unusable_token) + $results.append('<li class="info">' + $('#noadminlimitinfo').html() + '</li>'); + } + + function doQuery() { + if (!$input.val().length) { + closeSuggest(true); + return; + } + $(input).css('cursor', 'wait'); + $.getJSON("/nominatim/", { q: $input.val() }, handleNominatimResults); + } + + function processKey(e) { + if (e.keyCode != 13) { + clearResult(); + } + + switch (e.keyCode) { + case 27: // ESC + closeSuggest(true); + break; + case 9: // TAB + case 13: // OK + var elt = getCurrentResult(); + if (elt) + setResult(elt); + return false; + break; + case 38: // UP + if (!shown) + doQuery(); + prevResult(); + break; + case 40: // DOWN + if (!shown) + doQuery(); + nextResult(); + break; + default: + if (timeout) + clearTimeout(timeout); + timeout = setTimeout(doQuery, options.timeout); + } + } + + /* Returns the currently selected result. */ + function getCurrentResult() { + var children = $results.children('li.' + options.selectedClass); + if (children.length) + return children; + return false; + } + + /* Set the form to the given result. */ + function setResult(elt) { + var temp = elt.attr('id').split('_'); + + selectedCountry = temp[1]; + $osm_id.val(temp[2]); + $input.val(elt.html()); + + closeSuggest(true); + allowNextStep(); + } + + function clearResult() { + $osm_id.val(''); + disallowNextStep(); + } + + /** Functions to manipulate the current selection. */ + + /* Set the currently selected item in the drop-down list. */ + function setSelectedResultTo(elt) { + $results.children('li').removeClass(options.selectedClass); + if (elt) + elt.addClass(options.selectedClass); + } + + /* Move to the previous valid result. */ + function prevResult() { + var current = getCurrentResult(); + var new_result; + + if (current) { + var prev_valid = current.siblings('li.suggestok'); + if (prev_valid.length) + new_result = prev_valid; + } else { + new_result = $results.children('li.suggestok:last'); + } + + setSelectedResultTo(new_result); + } + + /* Move to the next valid result. */ + function nextResult() { + var current = getCurrentResult(); + var new_result; + + if (current) { + var next_valid = current.siblings('li.suggestok'); + if (next_valid.length) + new_result = next_valid; + } else { + new_result = $results.children('li.suggestok:first'); + } + + setSelectedResultTo(new_result); + } +} + +/** Returns whether 'admin' or 'bbox' mode is currently selected */ +function getCurrentMode() { + if ($('#id_mode_1').is(':checked')) + return 'bbox'; + else + return 'admin'; +} + +function mapAreaSelectionNotifier() { + allowNextStep(); +} + +/** Page initialization. */ +$(document).ready(function() { + + function switchToAdminMode() { + $('#step-location-bbox').hide(); + $('#step-location-admin').show(); + disallowNextStep(); + selectedCountry = ""; + } + + function switchToBBoxMode() { + $('#step-location-admin').hide(); + $('#step-location-bbox').show(); + disallowNextStep(); + $('#id_administrative_city').empty(); + $('#id_administrative_osmid').empty(); + if (map == null) + mapInit(mapAreaSelectionNotifier); + selectedCountry = ""; + } + + if (getCurrentMode() == 'bbox') + switchToBBoxMode(); + else + switchToAdminMode(); + + $('#id_mode_0').bind('click', function(e) { switchToAdminMode(); }); + $('#id_mode_1').bind('click', function(e) { switchToBBoxMode(); }); + + suggest('#id_administrative_city', '#suggest', + '#id_administrative_osmid', + { selectedClass: 'selected', + timeout: 150 + }); +}); diff --git a/www/media/osm_map.js b/www/media/osm_map.js index deb0bf9..da3671a 100644 --- a/www/media/osm_map.js +++ b/www/media/osm_map.js @@ -124,8 +124,10 @@ function updateFormArea() getAreaBottomRightLon().value = bounds.right.toFixed(4); } -/* Main initialisation function. Must be called before the map is manipulated. */ -function mapInit() +/* Main initialisation function. Must be called before the map is + manipulated. areaSelectionNotifier is a function that gets called + when an area is selected. */ +function mapInit(areaSelectionNotifier) { map = new OpenLayers.Map ('map', { controls:[new OpenLayers.Control.Navigation(), @@ -167,6 +169,7 @@ function mapInit() vectorLayer.destroyFeatures() vectorLayer.addFeatures(feature); updateFormBbox(bounds); + areaSelectionNotifier(); } }); map.addControl(selectControl); @@ -175,256 +178,3 @@ function mapInit() map.events.register('moveend', map, updateFormArea); updateMap(vectorLayer); } - -function setFormActivation(active) { - if (active) { - $('#map_language').show(); - $('#id_go_next_btn').show() - .removeAttr('disabled'); - } else { - $('#map_language').hide(); - $('#id_go_next_btn').hide() - .attr('disabled', 'disabled'); - } -} - - -/** Language list management. */ -var languages; - -function resetLanguages() { - $('#id_map_language').html(languages); - $('#id_map_language').children('option').each(function() { - if ($(this).val() == 'C') - $(this).attr('selected', 'selected'); - }); -} - -function preselectLanguage(country) { - var seen = false; - - $('#id_map_language').html(languages); - $('#id_map_language').children('option').each(function() { - if (! ($(this).val().match('.._' + country.toUpperCase() + '\..*') != null - || $(this).val() == 'C')) - $(this).remove(); - else if (!seen) { - $(this).attr('selected', 'selected'); - seen = true; - } - }); -} - - -/** Auto-suggest feature. */ -function suggest(input, results, osm_id, button, options) { - var $input = $(input).attr('autocomplete', 'off'); - var $results = $(results); - var $osm_id = $(osm_id); - var $button = $(button); - var timeout = false; - var shown = false; - - closeSuggest(true); - - // Setup the keyup event. - $input.keyup(processKey); - - // Disable form validation via the Enter key - $input.keypress(function(e) { if (e.keyCode == 13) return false; }); - - function appendValidResult(item) { - var id = 'rad_' + item.country_code + '_' + item.ocitysmap_params['id']; - $results.append('<li class="suggestok" id="' + id + '">' - + item.display_name + '</li>'); - - var e = $('#' + id) - e.bind('click', function(e) { setResult($(this)); }); - e.bind('mouseover', function(e) { setSelectedResultTo($(this)); }); - } - - /* Empty and close the suggestion box. */ - function closeSuggest(hide) { - $results.empty(); - - if (hide) - $results.hide(); - else - $results.show(); - - shown = !hide; - } - - /* Handle the JSON result. */ - function handleNominatimResults(data, textResult) { - var unusable_token = false; - $(input).css('cursor', 'text'); - closeSuggest(false); - - if (!data.length) { - $results.append('<li class="info">' + $('#noresultsinfo').html() + '</li>'); - return; - } - - $.each(data, function(i, item) { - if (typeof item.ocitysmap_params != 'undefined' && - item.ocitysmap_params['admin_level'] == 8) { - appendValidResult(item); - } else { - $results.append('<li class="suggestoff">' - + item.display_name + '</li>'); - unusable_token = true; - } - }); - - if (unusable_token) - $results.append('<li class="info">' + $('#noadminlimitinfo').html() + '</li>'); - } - - function doQuery() { - if (!$input.val().length) { - closeSuggest(true); - return; - } - $(input).css('cursor', 'wait'); - $.getJSON("/nominatim/", { q: $input.val() }, handleNominatimResults); - } - - function processKey(e) { - if (e.keyCode != 13) { - clearResult(); - } else { - if ($osm_id.val() != '') - $button.click(); - } - - switch (e.keyCode) { - case 27: // ESC - closeSuggest(true); - break; - case 9: // TAB - case 13: // OK - var elt = getCurrentResult(); - if (elt) - setResult(elt); - return false; - break; - case 38: // UP - if (!shown) - doQuery(); - prevResult(); - break; - case 40: // DOWN - if (!shown) - doQuery(); - nextResult(); - break; - default: - if (timeout) - clearTimeout(timeout); - timeout = setTimeout(doQuery, options.timeout); - } - } - - /* Returns the currently selected result. */ - function getCurrentResult() { - var children = $results.children('li.' + options.selectedClass); - if (children.length) - return children; - return false; - } - - /* Set the form to the given result. */ - function setResult(elt) { - var temp = elt.attr('id').split('_'); - - preselectLanguage(temp[1]); - $osm_id.val(temp[2]); - $input.val(elt.html()); - - closeSuggest(true); - setFormActivation(true); - } - - function clearResult() { - $osm_id.val(''); - setFormActivation(false); - } - - /** Functions to manipulate the current selection. */ - - /* Set the currently selected item in the drop-down list. */ - function setSelectedResultTo(elt) { - $results.children('li').removeClass(options.selectedClass); - if (elt) - elt.addClass(options.selectedClass); - } - - /* Move to the previous valid result. */ - function prevResult() { - var current = getCurrentResult(); - var new_result; - - if (current) { - var prev_valid = current.siblings('li.suggestok'); - if (prev_valid.length) - new_result = prev_valid; - } else { - new_result = $results.children('li.suggestok:last'); - } - - setSelectedResultTo(new_result); - } - - /* Move to the next valid result. */ - function nextResult() { - var current = getCurrentResult(); - var new_result; - - if (current) { - var next_valid = current.siblings('li.suggestok'); - if (next_valid.length) - new_result = next_valid; - } else { - new_result = $results.children('li.suggestok:first'); - } - - setSelectedResultTo(new_result); - } -} - -/** Page initialization. */ -$(document).ready(function() { - languages = $('#id_map_language').html(); - - function switchToAdminMode() { - $('#mapform tbody').children('tr.bybbox').hide(); - $('#mapform tbody').children('tr.byadmin').show(); - setFormActivation(false); - } - - function switchToBBoxMode() { - $('#mapform tbody').children('tr.byadmin').hide(); - $('#mapform tbody').children('tr.bybbox').show(); - setFormActivation(true); - $('#id_administrative_city').empty(); - $('#id_administrative_osmid').empty(); - if (map == null) - mapInit(); - resetLanguages(); - } - - if ($('#id_mode_1').is(':checked')) - switchToBBoxMode(); - else - switchToAdminMode(); - - $('#id_mode_0').bind('click', function(e) { switchToAdminMode(); }); - $('#id_mode_1').bind('click', function(e) { switchToBBoxMode(); }); - - suggest('#id_administrative_city', '#suggest', - '#id_administrative_osmid', '#id_go_next_btn', - { selectedClass: 'selected', - timeout: 150 - }); -}); diff --git a/www/media/style.css b/www/media/style.css index ce960d0..f3e730a 100644 --- a/www/media/style.css +++ b/www/media/style.css @@ -358,10 +358,6 @@ div.pagination { width: 150px; } -#id_go_next_btn { - display: none; -} - #mainfrm input#id_maptitle, #mainfrm input#id_administrative_city { width: 80%; diff --git a/www/templates/maposmatic/new.html b/www/templates/maposmatic/new.html index 0da89f8..43bf5e1 100644 --- a/www/templates/maposmatic/new.html +++ b/www/templates/maposmatic/new.html @@ -28,7 +28,6 @@ {% load i18n %} {% block extralink %} -<script type="text/javascript" src="/smedia/jquery.js"></script> {{ form.media }} {% endblock %} @@ -37,79 +36,105 @@ {% block page %} <h1 id="submitmapform">{% trans "Generate your own map" %}</h1> -<p> -{% blocktrans %}<em>MapOSMatic</em> covers the whole world but we need -contributors to translate and adapt the few parts of <em>MapOSMatic</em> -that are country specific.{% endblocktrans %} -</p> - -<p> -{% blocktrans %}To select the city to be rendered, two modes are -available:{% endblocktrans %} -</p> - -<ul> - <li>{% blocktrans %}<em>Using an administrative boundary</em>. It allows - to get a map with precise boundaries of the city when such limits are - available in the database. Otherwise, you need to use a bounding - box.{% endblocktrans %}</li> - <li>{% blocktrans %}<em>Using a traditional bounding box</em>.{% endblocktrans %}</li> -</ul> - -<p> -{% blocktrans %}Once the rendering is submitted, you will be brought -to a page giving the status of your rendering request. As soon as the -rendering is completed (that might take some time depending on the queue -length), this page will contain links to the generated -map.{% endblocktrans %} -</p> - <form id="mainfrm" method="post" action="{% url new %}#submitmapform" class="submitmap"> - <table id="mapform"> - <tr class="label"><td>{% trans "Area selection mode:" %}</td></tr> - <tr class="field"><td> - {{ form.mode }} - </td></tr> - - <tr class="byadmin label"><td>{% trans "City name:" %}</td></tr> - <tr class="byadmin field"><td> +<div class="wizard"> + {{ form.errors }} + <ul id="steplist"> + <li id="step-location-title" class="title-current-step">{% trans "Location" %}</li> + <li id="step-title-title">{% trans "Title" %}</li> + <li id="step-layout-title">{% trans "Layout" %}</li> + <li id="step-papersize-title">{% trans "Paper size" %}</li> + <li id="step-stylesheet-title">{% trans "Stylesheet" %}</li> + <li id="step-language-title">{% trans "Language" %}</li> + <li id="step-summary-title">{% trans "Summary" %}</li> + </ul> + + <div id="step-location" class="wizardstep"> + + <p>{% blocktrans %}To select the city to be rendered, two modes are + available:{% endblocktrans %}</p> + + {{ form.mode }} + + <div id="step-location-bbox" style="display: none";> + {{ form.bbox }} + {{ form.bbox.errors }} + <p class="bbox_select_help">{% blocktrans %}Latitude and longitude of the top left and bottom right corners of the area to render.{% endblocktrans %}</p> + <p class="bbox_select_help">{% blocktrans %}You can use <tt>Shift+drag</tt> to zoom on a specific area of the map. If you only want to render part of what the slippy map shows, you can use <tt>Control+drag</tt> to draw the limits of the area to render.{% endblocktrans %}</p> + </div> + + <div id="step-location-admin"> {{ form.administrative_city }} <ul id="suggest"></ul> {{ form.administrative_osmid }} {{ form.administrative_osmid.errors }} {{ form.administrative_city.errors }} - </td></tr> - - <tr class="bybbox label"><td>{% trans "Title of the map:" %}</td></tr> - <tr class="bybbox field"><td> - {{ form.maptitle }} - {{ form.maptitle.errors }} - </td></tr> - - <tr class="bybbox label" id="map_language"><td> + <span id="noadminlimitinfo">{% blocktrans %}Wondering why you can't choose some of these results?<br />Their administrative boundaries are missing from the OSM database.<br />Look at the <a href="http://wiki.maposmatic.org/doku.php?id=faq";>FAQ</a> for more details.{% endblocktrans %}</span> + <span id="noresultsinfo">{% trans "No results." %}</span> + </div> + + </div> + + <div id="step-title" class="wizardstep"> + <h3>{% trans "Map title" %}</h3> + {{ form.maptitle }} + </div> + + <div id="step-layout" class="wizardstep"> + <h3>{% trans "Layout" %}</h3> + {{form.layout}} + </div> + + <div id="step-papersize" class="wizardstep"> + <h3>{% trans "Paper size" %}</h3> + {{ form.papersize }} + </div> + + <div id="step-stylesheet" class="wizardstep"> + <h3>{% trans "Stylesheet" %}</h3> + {{ form.stylesheet }} + </div> + + <div id="step-language" class="wizardstep"> + <h3>{% trans "Language" %}</h3> {% trans "Map Index Language:" %} {{ form.map_language }} - </td></tr> - - <tr class="bybbox label"><td colspan="2">{% trans "Bounding box:" %}</td></tr> - <tr class="bybbox field"><td colspan="2"> - {{ form.bbox }} - {{ form.bbox.errors }} - <ul class="errorlist" id="bboxtoolarge" style="display: none"> - <li>{% blocktrans %}Bounding Box too large{% endblocktrans %}</li> - </ul> - <p class="bbox_select_help">{% blocktrans %}Latitude and longitude of the top left and bottom right corners of the area to render.{% endblocktrans %}</p> - <p class="bbox_select_help">{% blocktrans %}You can use <tt>Shift+drag</tt> to zoom on a specific area of the map. You can use <tt>Control+drag</tt> to draw the limits of the area to render.{% endblocktrans %}</p> - </td></tr> - - <tr><td class="submit"> - <input id="id_go_next_btn" type="submit" - value="{% trans "Generate" %}" disabled="disabled" /> - </td></tr> - </table> + </div> + <div id="step-summary" class="wizardstep"> + <h3>{% trans "Summary" %}</h3> + <table id="summary"> + <tr> + <td class="summary-label">{% trans "Area" %}</td> + <td id="summary-area"></td> + </tr> + <tr> + <td class="summary-label">{% trans "Layout" %}</td> + <td id="summary-layout"></td> + </tr> + <tr> + <td class="summary-label">{% trans "Paper size" %}</td> + <td id="summary-papersize"></td> + </tr> + <tr> + <td class="summary-label">{% trans "Stylesheet" %}</td> + <td id="summary-stylesheet"></td> + </tr> + <tr> + <td class="summary-label">{% trans "Language" %}</td> + <td id="summary-language"></td> + </tr> + </table> + <input id="id_go_next_btn" type="submit" value="{% trans "Generate" %}" /> + </div> + + <div id="navlinks"> + <span id="prevlinkdisabled">Back</span> + <a id="prevlink" style="display: none;" href="javascript:loadPrevStep()">{% trans "Previous" %}</a> + <span id="nextlinkdisabled">Next</span> + <a id="nextlink" style="display: none"; href="javascript:loadNextStep()">{% trans "Next" %}</a> + <span style="clear: both;"> </span> + </div> +</div> </form> -<span id="noadminlimitinfo">{% blocktrans %}Wondering why you can't choose some of these results?<br />Their administrative boundaries are missing from the OSM database.<br />Look at the <a href="http://wiki.maposmatic.org/doku.php?id=faq";>FAQ</a> for more details.{% endblocktrans %}</span> -<span id="noresultsinfo">{% trans "No results." %}</span> - {% endblock %} -- 1.7.0.4
