nakarte

commit ad0fb5564b9b06120ce39e2ee7ecf461379d6157
parent e1819d8594f5cc577596c23acaea865ac84db4f7
Author: Sergej Orlov <wladimirych@gmail.com>
Date:   Sun, 27 Nov 2016 13:27:46 +0300

[print control] show page format name instead of size when available

Diffstat:
M
src/lib/leaflet.control.printPages/control.css
 | 
6
++++++
M
src/lib/leaflet.control.printPages/control.js
 | 
21
+++++++++++++++++++++
M
src/lib/leaflet.control.printPages/form.html
 | 
12
+++++-------

3 files changed, 32 insertions(+), 7 deletions(-)
diff --git a/src/lib/leaflet.control.printPages/control.css b/src/lib/leaflet.control.printPages/control.css
@@ -98,3 +98,8 @@
     vertical-align: middle;
 }
 
+.preset-values .selected {
+    /*background-color: #ddd;*/
+    border-bottom: 1px solid #333;
+    color: #333;
+}
+\ No newline at end of file
diff --git a/src/lib/leaflet.control.printPages/control.js b/src/lib/leaflet.control.printPages/control.js
@@ -25,6 +25,15 @@ ko.extenders.checkNumberRange = function(target, range) {
 
 L.Control.PrintPages = L.Control.extend({
         options: {position: 'bottomleft'},
+
+        pageSizes: [
+            {'name': 'A1', width: 594, height: 841},
+            {'name': 'A2', width: 420, height: 594},
+            {'name': 'A3', width: 297, height: 420},
+            {'name': 'A4', width: 210, height: 297},
+            {'name': 'A5', width: 594, height: 210}
+        ],
+
         initialize: function(options) {
             L.Control.prototype.initialize.call(this, options);
             this.pages = [];
@@ -46,6 +55,7 @@ L.Control.PrintPages = L.Control.extend({
             this.printSize.subscribe(this.onPageSizeChanged, this);
             this.scale.subscribe(this.onPageSizeChanged, this);
             this.resolution.subscribe(this.onPageSizeChanged, this);
+            this.pageSizeDescription = ko.pureComputed(this._displayPageSize, this);
         },
 
         onAdd: function(map) {
@@ -202,6 +212,17 @@ L.Control.PrintPages = L.Control.extend({
 
         updateFormZooms: function() {
             this.autoZoomLevels(this.suggestZooms());
+        },
+
+        _displayPageSize: function() {
+            const width = this.pageWidth(),
+                height = this.pageHeight();
+            for (let size of this.pageSizes) {
+                if (size.width === width && size.height === height) {
+                    return size.name;
+                }
+            }
+            return `${width} x ${height} mm`;
         }
     }
 );
 \ No newline at end of file
diff --git a/src/lib/leaflet.control.printPages/form.html b/src/lib/leaflet.control.printPages/form.html
@@ -22,12 +22,10 @@
     <tr data-bind="visible: settingsExpanded">
         <td class="label">Page size</td>
         <td>
-            <div class="preset-values">
-                <a data-bind="click: function() {$root.pageWidth(594); $root.pageHeight(841)}">A1</a>
-                <a data-bind="click: function() {$root.pageWidth(420); $root.pageHeight(594)}">A2</a>
-                <a data-bind="click: function() {$root.pageWidth(297); $root.pageHeight(420)}">A3</a>
-                <a data-bind="click: function() {$root.pageWidth(210); $root.pageHeight(297)}">A4</a>
-                <a data-bind="click: function() {$root.pageWidth(148); $root.pageHeight(210)}">A5</a>
+            <div class="preset-values" data-bind="foreach: {data: pageSizes, as: 'size'}">
+                <a data-bind="click: function() {$root.pageWidth(size.width); $root.pageHeight(size.height)},
+                              text: size.name,
+                              css: {selected: size.name === $root.pageSizeDescription() }"></a>
             </div>
             <input type="text" maxlength="4" title="width" placeholder="width" class="page-size" data-bind="value: pageWidth">
             x <input type="text" maxlength="4" title="height" placeholder="height" class="page-size" data-bind="value: pageHeight"> mm
@@ -65,7 +63,7 @@
     <tr><td colspan="2">
         <a class="button-settings image-button" data-bind="click: function() {settingsExpanded(!settingsExpanded())}"></a>
         <div class="settings-summary">
-            <span data-bind="text: pageWidth"></span>&nbsp;x&nbsp;<span data-bind="text: pageHeight"></span>&nbsp;mm,<br/>
+            <span data-bind="text: pageSizeDescription"></span><br/>
             <span data-bind="text: resolution"></span>&nbsp;dpi,
             zoom&nbsp;<span data-bind="text: zoomLevel"></span>
             <!-- ko if: zoomLevel()=== "auto" -->