[Maposmatic-dev] [PATCH 1/8] Implement the paper orientation selection

[Thomas Petazzoni]

 * The MapRenderingJob model has been modified: the paper size is no
   longer stored as a string identifying a particular paper format,
   but rather two IntegerFields are used to store the width/height in
   millimeters of the paper. This allows to support "Best fit" paper
   size.

 * The MapRenderingJobForm is extended to offer a paper orientation
   selection form, with portrait/landscape selection.

 * The /apis/papersize/ service now returns all informations given by
   OCitySMap on allowed paper sizes, and not only the name of the
   allowed paper formats.

 * As the "paper size" panel is now used to also select the paper
   orientation, it is renamed to "step-paper" instead of
   "step-paper-size".

 * A bunch of Javascript code is used to update the orientation
   selector depending on the selected paper format.

Signed-off-by: Thomas Petazzoni <address@hidden>
---
 scripts/render.py                 |    8 +--
 www/maposmatic/forms.py           |    5 ++
 www/maposmatic/models.py          |    3 +-
 www/maposmatic/views.py           |    3 +-
 www/media/map_rendering_form.css  |   12 +++++
 www/media/map_rendering_form.js   |   99 ++++++++++++++++++++++++++++++-------
 www/templates/maposmatic/new.html |   12 +++--
 7 files changed, 110 insertions(+), 32 deletions(-)

diff --git a/scripts/render.py b/scripts/render.py
index 9384723..0faba21 100755
--- a/scripts/render.py
+++ b/scripts/render.py
@@ -163,12 +163,8 @@ class JobRenderer(threading.Thread):
 
             config.language = self.job.map_language
             config.stylesheet = 
renderer.get_stylesheet_by_name(self.job.stylesheet)
-
-            for paper in renderers.Renderer.PAPER_SIZES:
-                if paper[0] == self.job.papersize:
-                    config.paper_width_mm = paper[1]
-                    config.paper_height_mm = paper[2]
-                    break
+            config.paper_width_mm = self.job.paper_width_mm
+            config.paper_height_mm = self.job.paper_height_mm
         except KeyboardInterrupt:
             self.result = RESULT_KEYBOARD_INTERRUPT
             LOG.info("Rendering of job #%d interrupted!" % self.job.id)
diff --git a/www/maposmatic/forms.py b/www/maposmatic/forms.py
index 8166b68..c620ebe 100644
--- a/www/maposmatic/forms.py
+++ b/www/maposmatic/forms.py
@@ -57,11 +57,16 @@ class MapRenderingJobForm(forms.ModelForm):
     MODES = (('admin', _('Administrative boundary')),
              ('bbox', _('Bounding box')))
 
+    ORIENTATION = (('landscape', _('Landscape')),
+                   ('portrait', _('Portrait')))
+
     mode = forms.ChoiceField(choices=MODES, initial='admin',
                              widget=forms.RadioSelect)
     layout = forms.ChoiceField(choices=(), widget=forms.RadioSelect)
     stylesheet = forms.ChoiceField(choices=(), widget=forms.RadioSelect)
     papersize = forms.ChoiceField(choices=(), widget=forms.RadioSelect)
+    paperorientation = forms.ChoiceField(choices=ORIENTATION,
+                                         widget=forms.RadioSelect)
     maptitle = forms.CharField(max_length=256, required=False)
     bbox = widgets.AreaField(label=_("Area"),
                              fields=(forms.FloatField(), forms.FloatField(),
diff --git a/www/maposmatic/models.py b/www/maposmatic/models.py
index 15f0a3f..acc2900 100644
--- a/www/maposmatic/models.py
+++ b/www/maposmatic/models.py
@@ -84,7 +84,8 @@ class MapRenderingJob(models.Model):
     maptitle = models.CharField(max_length=256)
     stylesheet = models.CharField(max_length=256)
     layout = models.CharField(max_length=256)
-    papersize = models.CharField(max_length=256)
+    paper_width_mm = models.IntegerField()
+    paper_height_mm = models.IntegerField()
 
     # When rendering through administrative city is selected, the
     # following three fields must be non empty
diff --git a/www/maposmatic/views.py b/www/maposmatic/views.py
index d6b33bb..b886ef4 100644
--- a/www/maposmatic/views.py
+++ b/www/maposmatic/views.py
@@ -226,8 +226,7 @@ def query_papersize(request):
             paper_sizes = renderer_cls.get_compatible_paper_sizes(
                     bbox, OCitySMap.DEFAULT_ZOOM_LEVEL)
 
-            contents = map(lambda p: p[0], paper_sizes)
-            return HttpResponse(content=json_encode(contents),
+            return HttpResponse(content=json_encode(paper_sizes),
                                 mimetype='text/json')
 
     return HttpResponseBadRequest("ERROR: Invalid arguments")
diff --git a/www/media/map_rendering_form.css b/www/media/map_rendering_form.css
index 2657d2f..65d478b 100644
--- a/www/media/map_rendering_form.css
+++ b/www/media/map_rendering_form.css
@@ -87,6 +87,18 @@ div#step-location {
   display: block;
 }
 
+table#paperselection {
+  width: 100%;
+}
+
+table#paperselection td {
+  width: 50%;
+}
+
+td#paperorientationselection li.disabled {
+  color: grey;
+}
+
 table#summary td.summary-label {
   width: 300px;
   font-weight: bold;
diff --git a/www/media/map_rendering_form.js b/www/media/map_rendering_form.js
index 2ea76c2..5a4548d 100644
--- a/www/media/map_rendering_form.js
+++ b/www/media/map_rendering_form.js
@@ -26,8 +26,6 @@
  * See the file COPYING for details.
  */
 
-var currentPanel = 1;
-
 function mapTitleChange()
 {
     if ($("#id_maptitle").val().length != 0)
@@ -50,23 +48,86 @@ function prepareTitlePanel()
     $('#id_maptitle').keyup(mapTitleChange);
 }
 
-function filterAllowedPaperSizes(papersizelist)
+/* Given a list of allowed paper sizes (paperlist), find the element
+ * that correspond to a given paper name (paper) */
+function getPaperDef(paperlist, paper)
+{
+    for each (var item in paperlist)
+    {
+        if (paper == item[0])
+            return item;
+    }
+
+    return null;
+}
+
+/* This function updates the landscape/portrait selectors according to
+ * the portraitOk/landscapeOk booleans telling whether portrait and
+ * landscape are possible. */
+function filterAllowedOrientations(portraitOk, landscapeOk)
 {
-  $.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");
+    landscape = $("input[value='landscape']");
+    portrait  = $("input[value='portrait']");
+
+    if (landscapeOk) {
+        landscape.attr("disabled", "");
+        landscape.attr("checked", "checked");
+        landscape.parent().parent().removeClass("disabled");
+    }
+    else {
+        landscape.attr("disabled", "disabled");
+        landscape.parent().parent().addClass("disabled");
+    }
+
+    if (portraitOk) {
+        portrait.attr("disabled", "");
+        if (! landscapeOk) {
+            portrait.attr("checked", "checked");
+        }
+        portrait.parent().parent().removeClass("disabled");
+    }
+    else {
+        portrait.attr("disabled", "disabled");
+        portrait.parent().parent().addClass("disabled");
+    }
+}
+
+function bindPaperClickCallback(fn, portraitOk, landscapeOk)
+{
+    return (function(e) {
+        fn(portraitOk, landscapeOk);
+    });
+}
+
+function filterAllowedPaper(paperlist)
+{
+    /* Iterate through all paper lists, and hide those that do not
+     * apply to the selected rendering, and bind click callbacks on
+     * those that are available. The callback is in charge of updating
+     * the available orientation for the choosen paper size */
+    $.each($("#papersizeselection ul li"), function(id, item) {
+        paper = $('label input[value]', item).val();
+        paperDef = getPaperDef(paperlist, paper);
+        if (paperDef != null) {
+            $(item).bind('click',
+                         bindPaperClickCallback(filterAllowedOrientations,
+                                                paperDef[3], paperDef[4]));
+            $(item).show();
+        }
+        else
+            $(item).hide();
+    });
+
+    $("#paperselection").show();
+
+    /* Make sure that default paper size and orientation are selected
+     * by simulating a click on the first available paper */
+    $("label input", $($("#papersizeselection ul li:visible")[0])).click();
 }
 
-function preparePaperSizePanel()
+function preparePaperPanel()
 {
-    $("#step-papersize ul").hide();
+    $("#paperselection").hide();
     if (getCurrentMode() == 'bbox')
     {
       $.post("/apis/papersize/", {
@@ -77,7 +138,7 @@ function preparePaperSizePanel()
                 layout           : $("input[name='layout']:checked").val()
              },
              function(data) {
-                filterAllowedPaperSizes(data);
+                filterAllowedPaper(data);
              }
             );
     }
@@ -88,7 +149,7 @@ function preparePaperSizePanel()
                 layout           : $("input[name='layout']:checked").val()
              },
              function(data) {
-                filterAllowedPaperSizes(data);
+                filterAllowedPaper(data);
              }
             );
     }
@@ -161,8 +222,8 @@ function prepareNextPage(next)
 {
     if (next == "step-title")
         prepareTitlePanel();
-    else if (next == "step-papersize")
-        preparePaperSizePanel();
+    else if (next == "step-paper")
+        preparePaperPanel();
     else if (next == "step-summary")
         prepareSummaryPanel();
     else if (next == "step-language")
diff --git a/www/templates/maposmatic/new.html 
b/www/templates/maposmatic/new.html
index e35f611..860fafa 100644
--- a/www/templates/maposmatic/new.html
+++ b/www/templates/maposmatic/new.html
@@ -43,7 +43,7 @@
    <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-paper-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>
@@ -88,9 +88,13 @@
     {{form.layout}}
   </div>
 
-  <div id="step-papersize"  class="wizardstep">
-    <h3>{% trans "Paper size" %}</h3>
-    {{ form.papersize }}
+  <div id="step-paper"  class="wizardstep">
+    <h3>{% trans "Paper" %}</h3>
+    <table id="paperselection">
+      <tr>
+       <td id="papersizeselection">{{ form.papersize }}</td>
+       <td id="paperorientationselection">{{ form.paperorientation }}</td></tr>
+    </table>
   </div>
 
   <div id="step-stylesheet"  class="wizardstep">
-- 
1.7.0.4