form.html (5300B)
1 <div class="leaflet-control-button-toggle" title="Print map" 2 data-bind="click: setExpanded, css: {'icon-spinner-nuclear': makingPdf, 'icon-printer': !makingPdf()}"> 3 </div> 4 <div class="leaflet-control-content"> 5 <table class="layout"> 6 <tbody> 7 <tr><td colspan="2"> 8 <a title="Add page in portrait orientation" class="button-add-page-vert image-button" 9 data-bind="click: addPortraitPage"></a> 10 <a title="Add page in landscape orientation" class="button-add-page-horiz image-button" 11 data-bind="click: addLandscapePage"></a> 12 <span class="pages-num" data-bind="text: pagesNumLabel, click: onPagesNumLabelClick, css: {'pages-not-null': pagesNum() > 0}"></span> 13 <a title="Remove all pages" class="button-remove-pages image-button" 14 data-bind="click: removePages"></a> 15 </td></tr> 16 <tr> 17 <td class="label">Print scale</td> 18 <td> 19 <div class="preset-values" > 20 <a data-bind="click: function() {scale(100)}, css: {selected: scale() === 100}">100 m</a> 21 <a data-bind="click: function() {scale(250)}, css: {selected: scale() === 250}">250 m</a> 22 <a data-bind="click: function() {scale(500)}, css: {selected: scale() === 500}">500 m</a> 23 <a data-bind="click: function() {scale(1000)}, css: {selected: scale() === 1000}">1 km</a> 24 </div> 25 <input type="text" class="scale" maxlength="6" data-bind="value: scale"> m in 1 cm 26 </td> 27 </tr> 28 <tr data-bind="visible: settingsExpanded"> 29 <td class="label">Page size</td> 30 <td> 31 <div class="preset-values" data-bind="foreach: {data: pageSizes, as: 'size'}"> 32 <a data-bind="click: function() {$root.pageWidth(size.width); $root.pageHeight(size.height)}, 33 text: size.name, 34 css: {selected: size.name === $root.pageSizeDescription() }"></a> 35 </div> 36 <input type="text" maxlength="4" title="width" placeholder="width" class="page-size" data-bind="value: pageWidth"> 37 x <input type="text" maxlength="4" title="height" placeholder="height" class="page-size" data-bind="value: pageHeight"> mm 38 </td> 39 </tr> 40 <tr data-bind="visible: settingsExpanded"> 41 <td class="label-high">Margins</td> 42 <td> 43 <table class="margins"> 44 <tr> 45 <td></td> 46 <td><input type="text" maxlength="2" value="3" data-bind="value: marginTop"></td> 47 <td></td> 48 </tr> 49 <tr> 50 <td><input type="text" maxlength="2" value="3" data-bind="value: marginLeft"></td> 51 <td></td><td><input type="text" maxlength="2" value="3" data-bind="value: marginRight"> mm</td> 52 </tr> 53 <tr><td></td><td><input type="text" maxlength="2" value="3" data-bind="value: marginBottom"></td><td></td></tr> 54 </table> 55 </td> 56 </tr> 57 <tr data-bind="visible: settingsExpanded"> 58 <td class="label">Resolution</td> 59 <td><input type="text" maxlength="4" class="resolution" data-bind="value: resolution"> dpi</td> 60 </tr> 61 <tr data-bind="visible: settingsExpanded"> 62 <td class="label">Source zoom<br />level</td> 63 <td> 64 <select name="srczoom" 65 data-bind="options: zoomLevels, value: zoomLevel"> 66 </select> 67 </td> 68 </tr> 69 <tr> 70 <td colspan="2"> 71 <label><input type="checkbox" data-bind="checked: magneticMeridiansOn"> Magnetic meridians</label> 72 <label><input type="checkbox" data-bind="checked: gridOn"> Kilometers grid</label> 73 </td> 74 </tr> 75 <tr><td colspan="2"> 76 <a class="button-settings image-button" data-bind="click: function() {settingsExpanded(!settingsExpanded())}" 77 title="More settings"></a> 78 <div class="settings-summary"> 79 <span data-bind="text: pageSizeDescription"></span><br/> 80 <span data-bind="text: resolution"></span> dpi, 81 zoom <span data-bind="text: zoomLevel"></span> 82 <!-- ko if: zoomLevel()=== "auto" --> 83 (<span title="Zoom for satellite and scanned imagery" data-bind="text: autoZoomLevels().satZoom"></span> 84 / <span title="Zoom for maps like OSM and Google" data-bind="text: autoZoomLevels().mapZoom"></span>) 85 <!-- /ko --> 86 </div> 87 </td></tr> 88 <tr><td colspan="2"> 89 <div class="download-button-row"> 90 <div class="button-minimize" data-bind="click: setMinimized"></div> 91 <a class="text-button button-save" data-bind=" 92 click: onSavePdfClicked, 93 visible: !makingPdf()">Save PDF</a> 94 <div data-bind=" 95 component: { 96 name: 'progress-indicator', 97 params: {progressRange: downloadProgressRange, progressDone: downloadProgressDone} 98 }, 99 visible: makingPdf()"></div> 100 </div> 101 </td></tr> 102 </tbody> 103 </table> 104 </div>