commit 58a7f91830bb7aad19e6e8d05c0db937967b42c6 parent 2803dfcba84951ccdbc09a14fca83b40e9d93b51 Author: Sergej Orlov <wladimirych@gmail.com> Date: Fri, 2 Dec 2016 19:43:30 +0300 add geature to minimize controls: layers, print, tracks Diffstat:
18 files changed, 292 insertions(+), 6 deletions(-)
diff --git a/src/App.js b/src/App.js @@ -16,6 +16,7 @@ import 'lib/leaflet.control.panoramas/panoramas'; import 'lib/leaflet.control.track-list/track-list'; import 'lib/leaflet.control.track-list/track-list.hash-state'; import enableLayersControlAdaptiveHeight from 'lib/leaflet.control.layers.adaptive-height/adaptive-height'; +import enableLayersMinimize from 'lib/leaflet.control.layers.minimize/minimize'; function raiseControlsOnMouse(controls) { @@ -64,6 +65,7 @@ function setUp() { .enableHashState('l'); enableLayersControlHotKeys (layersControl); enableLayersControlAdaptiveHeight(layersControl); + enableLayersMinimize(layersControl); new L.Control.PrintPages({position: 'bottomleft'}).addTo(map); new L.Control.Coordinates().addTo(map); diff --git a/src/lib/controls-styles/controls-styles.css b/src/lib/controls-styles/controls-styles.css @@ -58,3 +58,58 @@ .leaflet-contol-button:hover { background-color: #f4f4f4; } + +.button-minimize { + cursor: pointer; + width: 18px; + height: 18px; + border-radius: 4px; + border: 1px solid #ccc; + background-color: white; + background-position: 50% 50%; + background-repeat: no-repeat; +} + +.button-minimize:hover { + background-color: #f4f4f4; +} + +.leaflet-bottom.leaflet-left .button-minimize { + background-image: url("images/arrow_bl.png"); +} + +.leaflet-bottom.leaflet-right .button-minimize { + background-image: url("images/arrow_br.png"); +} + +.leaflet-top.leaflet-left .button-minimize { + background-image: url("images/arrow_ul.png"); +} + +.leaflet-top.leaflet-right .button-minimize { + background-image: url("images/arrow_ur.png"); +} + +.leaflet-control-button-toggle { + cursor: pointer; + width: 36px; + height: 36px; + background-position: 50% 50%; + background-repeat: no-repeat; +} + +.leaflet-control.minimized { + padding: 0; +} + +.leaflet-control-button-toggle { + display: none; +} + +.leaflet-control.minimized .leaflet-control-content { + display: none; +} + +.leaflet-control.minimized .leaflet-control-button-toggle { + display: block; +} diff --git a/src/lib/controls-styles/images/arrow_bl.png b/src/lib/controls-styles/images/arrow_bl.png Binary files differ. diff --git a/src/lib/controls-styles/images/arrow_br.png b/src/lib/controls-styles/images/arrow_br.png Binary files differ. diff --git a/src/lib/controls-styles/images/arrow_ul.png b/src/lib/controls-styles/images/arrow_ul.png Binary files differ. diff --git a/src/lib/controls-styles/images/arrow_ur.png b/src/lib/controls-styles/images/arrow_ur.png Binary files differ. diff --git a/src/lib/leaflet.control.layers.minimize/layers.png b/src/lib/leaflet.control.layers.minimize/layers.png Binary files differ. diff --git a/src/lib/leaflet.control.layers.minimize/minimize.js b/src/lib/leaflet.control.layers.minimize/minimize.js @@ -0,0 +1,53 @@ +import L from 'leaflet'; +import './style.css'; +import 'lib/controls-styles/controls-styles.css'; +import enableTopRow from 'lib/leaflet.control.layers.top-row/top-row'; + + +function enableMinimize(control) { + const originalOnAdd = control.onAdd; + if (control._minimizeEnabled) { + return; + } + enableTopRow(control); + + L.Util.extend(control, { + _minimizeEnabled: true, + + onAdd: function(map) { + const container = originalOnAdd.call(this, map); + setTimeout(() => this.__injectMinimizeButtons(), 0); + return container; + }, + + __injectMinimizeButtons: function() { + const container = this._container; + const contentsWrapper = L.DomUtil.create('div', 'leaflet-control-content'); + while (container.childNodes.length) { + contentsWrapper.appendChild(container.childNodes[0]); + } + container.appendChild(contentsWrapper); + const minimizeButton = L.DomUtil.create('div', 'button-minimize'); + this._topRow.appendChild(minimizeButton); + const expandButton = L.DomUtil.create('div', 'leaflet-control-button-toggle', container); + L.DomEvent.on(expandButton, 'click', this.setExpanded, this); + L.DomEvent.on(minimizeButton, 'click', this.setMinimized, this); + }, + + setExpanded: function() { + L.DomUtil.removeClass(this._container, 'minimized'); + }, + + setMinimized: function() { + L.DomUtil.addClass(this._container, 'minimized'); + } + } + ); + if (control._map) { + control.__injectMinimizeButtons() + } + + +} + +export default enableMinimize; +\ No newline at end of file diff --git a/src/lib/leaflet.control.layers.minimize/style.css b/src/lib/leaflet.control.layers.minimize/style.css @@ -0,0 +1,8 @@ +.button-minimize { + float: right; +} + + +.leaflet-control-layers .leaflet-control-button-toggle { + background-image: url("layers.png"); +} +\ No newline at end of file diff --git a/src/lib/leaflet.control.layers.top-row/style.css b/src/lib/leaflet.control.layers.top-row/style.css @@ -0,0 +1,3 @@ +.leaflet-control-layers-top-row { + height: 20px; +} +\ No newline at end of file diff --git a/src/lib/leaflet.control.layers.top-row/top-row.js b/src/lib/leaflet.control.layers.top-row/top-row.js @@ -0,0 +1,36 @@ +import L from 'leaflet'; +import './style.css'; + +function enableTopRow(control) { + const originalOnAdd = control.onAdd; + if (control._topRowEnabled) { + return; + } + + + + + L.Util.extend(control, { + _topRowEnabled: true, + + onAdd: function(map) { + const container = originalOnAdd.call(this, map); + setTimeout(() => this.__injectTopRow(), 0); + return container; + }, + + __injectTopRow: function() { + const container = this._container; + this._topRow = L.DomUtil.create('div', 'leaflet-control-layers-top-row'); + this._form.parentNode.insertBefore(this._topRow, this._form); + } + + }); + if (control._map) { + control.__injectTopRow() + } + + +} + +export default enableTopRow; +\ No newline at end of file diff --git a/src/lib/leaflet.control.printPages/control.css b/src/lib/leaflet.control.printPages/control.css @@ -102,4 +102,22 @@ /*background-color: #ddd;*/ border-bottom: 1px solid #333; color: #333; +} + +.control-print-pages .button-minimize { + position: absolute; + left: 0; + bottom: 0; +} + +.control-print-pages .download-button-row { + position: relative; +} + +.control-print-pages .leaflet-control-button-toggle { + background-image: url("images/printer.svg"); + width: 24px; + height: 24px; + margin: 5px; + } \ No newline at end of file diff --git a/src/lib/leaflet.control.printPages/control.js b/src/lib/leaflet.control.printPages/control.js @@ -1,7 +1,7 @@ import L from 'leaflet' import ko from 'knockout'; import 'lib/knockout.component.progress/progress'; -import 'lib/controls-styles.css'; +import 'lib/controls-styles/controls-styles.css'; import './control.css'; import PageFeature from './pageFeature'; import Contextmenu from 'lib/contextmenu/contextmenu'; @@ -74,6 +74,14 @@ L.Control.PrintPages = L.Control.extend({ return container; }, + setExpanded: function() { + L.DomUtil.removeClass(this._container, 'minimized'); + }, + + setMinimized: function() { + L.DomUtil.addClass(this._container, 'minimized'); + }, + addPage: function(isLandsacape) { let [pageWidth, pageHeight] = this.printSize(); if (isLandsacape) { diff --git a/src/lib/leaflet.control.printPages/form.html b/src/lib/leaflet.control.printPages/form.html @@ -1,3 +1,5 @@ +<div class="leaflet-control-button-toggle" data-bind="click: setExpanded"></div> +<div class="leaflet-control-content"> <table class="layout"> <tbody> <tr><td colspan="2"> @@ -74,6 +76,7 @@ </td></tr> <tr><td colspan="2"> <div class="download-button-row"> + <div class="button-minimize" data-bind="click: setMinimized"></div> <a class="text-button button-save" data-bind=" click: savePdf, visible: !makingPdf()">Save PDF</a> @@ -87,3 +90,4 @@ </td></tr> </tbody> </table> +</div> +\ No newline at end of file diff --git a/src/lib/leaflet.control.printPages/images/printer.svg b/src/lib/leaflet.control.printPages/images/printer.svg @@ -0,0 +1,52 @@ +<?xml version="1.0" encoding="iso-8859-1"?> +<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + viewBox="0 0 482.5 482.5" style="enable-background:new 0 0 482.5 482.5;" xml:space="preserve"> +<g> + <g> + <path d="M399.25,98.9h-12.4V71.3c0-39.3-32-71.3-71.3-71.3h-149.7c-39.3,0-71.3,32-71.3,71.3v27.6h-11.3 + c-39.3,0-71.3,32-71.3,71.3v115c0,39.3,32,71.3,71.3,71.3h11.2v90.4c0,19.6,16,35.6,35.6,35.6h221.1c19.6,0,35.6-16,35.6-35.6 + v-90.4h12.5c39.3,0,71.3-32,71.3-71.3v-115C470.55,130.9,438.55,98.9,399.25,98.9z M121.45,71.3c0-24.4,19.9-44.3,44.3-44.3h149.6 + c24.4,0,44.3,19.9,44.3,44.3v27.6h-238.2V71.3z M359.75,447.1c0,4.7-3.9,8.6-8.6,8.6h-221.1c-4.7,0-8.6-3.9-8.6-8.6V298h238.3 + V447.1z M443.55,285.3c0,24.4-19.9,44.3-44.3,44.3h-12.4V298h17.8c7.5,0,13.5-6,13.5-13.5s-6-13.5-13.5-13.5h-330 + c-7.5,0-13.5,6-13.5,13.5s6,13.5,13.5,13.5h19.9v31.6h-11.3c-24.4,0-44.3-19.9-44.3-44.3v-115c0-24.4,19.9-44.3,44.3-44.3h316 + c24.4,0,44.3,19.9,44.3,44.3V285.3z"/> + <path d="M154.15,364.4h171.9c7.5,0,13.5-6,13.5-13.5s-6-13.5-13.5-13.5h-171.9c-7.5,0-13.5,6-13.5,13.5S146.75,364.4,154.15,364.4 + z"/> + <path d="M327.15,392.6h-172c-7.5,0-13.5,6-13.5,13.5s6,13.5,13.5,13.5h171.9c7.5,0,13.5-6,13.5-13.5S334.55,392.6,327.15,392.6z" + /> + <path d="M398.95,151.9h-27.4c-7.5,0-13.5,6-13.5,13.5s6,13.5,13.5,13.5h27.4c7.5,0,13.5-6,13.5-13.5S406.45,151.9,398.95,151.9z" + /> + </g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +<g> +</g> +</svg> diff --git a/src/lib/leaflet.control.track-list/images/route.svg b/src/lib/leaflet.control.track-list/images/route.svg @@ -0,0 +1,8 @@ +<?xml version='1.0' encoding='iso-8859-1'?> +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30.031 30.031" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 30.031 30.031"> + <g> + <g> + <path d="m25.299,8.779c0.977-0.977 0.977-2.559 0-3.535-0.976-0.977-2.559-0.977-3.535,0-0.977,0.977-0.977,2.559 0,3.535 0.976,0.977 2.559,0.977 3.535,0zm-5.768,6.701h3.502c0.383,0.218 0.872,0.182 1.199-0.142l3.539-3.505c0.042-0.042 0.061-0.095 0.094-0.141 0.084-0.075 0.179-0.13 0.26-0.21 2.541-2.517 2.541-6.598 0-9.114-2.541-2.517-6.661-2.517-9.202,0s-2.541,6.598 0,9.114c0.081,0.08 0.176,0.135 0.26,0.21 0.033,0.046 0.052,0.099 0.094,0.141l1.695,1.679h-1.504v0.037c-2.456,0.035-4.438,2.03-4.438,4.494 0,2.485 2.015,4.438 4.5,4.438h4c1.381,0 2.5,1.15 2.5,2.531s-1.119,2.5-2.5,2.5h-14.537l1.761-1.744c0.042-0.042 0.061-0.094 0.094-0.141 0.084-0.075 0.179-0.13 0.26-0.21 2.541-2.517 2.541-6.598 0-9.114-2.541-2.517-6.661-2.517-9.202,0-2.541,2.517-2.541,6.598 0,9.114 0.081,0.08 0.176,0.135 0.26,0.21 0.033,0.047 0.052,0.099 0.094,0.141l3.539,3.505c0.265,0.263 0.638,0.332 0.975,0.239h16.82v-0.006c2.456-0.035 4.438-2.03 4.438-4.494 0-2.448-1.957-4.43-4.391-4.489v-0.011l-4.234,.019c-1.321-0.067-2.375-1.15-2.375-2.487-0.001-1.382 1.118-2.564 2.499-2.564zm.818-5.39l.001-.001c-0.003-0.004-0.007-0.006-0.011-0.009-1.759-1.742-1.759-4.567 0-6.31 1.759-1.742 4.611-1.742 6.371,0 1.759,1.742 1.759,4.567 0,6.31-0.011,0.011-0.024,0.017-0.036,0.028l.003,.004-3.153,3.122-3.175-3.144zm-13.842,17.08l-3.175-3.146v-0.001c-0.003-0.003-0.007-0.006-0.011-0.009-1.759-1.742-1.759-4.567 0-6.31 1.759-1.742 4.611-1.742 6.371,0 1.759,1.742 1.759,4.567 0,6.31-0.011,0.011-0.024,0.018-0.036,0.029l.003,.003-3.152,3.124zm-1.743-7.926c-0.977,0.977-0.977,2.559 0,3.535 0.976,0.977 2.559,0.977 3.535,0 0.977-0.977 0.977-2.559 0-3.535-0.976-0.976-2.559-0.976-3.535,0z"/> + </g> + </g> +</svg> diff --git a/src/lib/leaflet.control.track-list/track-list.css b/src/lib/leaflet.control.track-list/track-list.css @@ -4,6 +4,7 @@ border-radius: 5px 5px 5px 5px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4); padding: 8px 8px 8px 8px; +.leaflet-control-tracklist-contents { width: 310px; } @@ -234,3 +235,20 @@ .leaflet-point-placing svg * { pointer-events: none; } + +.leaflet-control-tracklist .button-minimize { + float: right; + +} + +.leaflet-control-tracklist .header { + margin-bottom: 6px; + height: 18px; +} + +.leaflet-control-tracklist .leaflet-control-button-toggle { + background-image: url("images/route.svg"); + width: 24px; + height: 24px; + margin: 5px; +} +\ No newline at end of file diff --git a/src/lib/leaflet.control.track-list/track-list.js b/src/lib/leaflet.control.track-list/track-list.js @@ -15,8 +15,9 @@ import 'lib/leaflet.polyline-measure/measured_line'; import 'lib/leaflet.layer.canvasMarkers/canvasMarkers'; import 'lib/leaflet.lineutil.simplifyLatLngs/simplify'; import iconFromBackgroundImage from 'lib/iconFromBackgroundImage/iconFromBackgroundImage'; +import 'lib/controls-styles/controls-styles.css'; -var MeasuredEditableLine = L.MeasuredLine.extend({}); +var MeasuredEditableLine = L.MeasuredLine.extend({}); MeasuredEditableLine.include(L.Polyline.EditMixin); var Waypoints = L.Layer.CanvasMarkers.extend({ @@ -72,8 +73,13 @@ L.Control.TrackList = L.Control.extend({ } container.innerHTML = ` - <div class="hint"> - GPX Ozi GoogleEarth ZIP YandexMaps + <div class="leaflet-control-button-toggle" data-bind="click: setExpanded"></div> + <div class="leaflet-control-content"> + <div class="header"> + <div class="hint"> + GPX Ozi GoogleEarth ZIP YandexMaps + </div> + <div class="button-minimize" data-bind="click: setMinimized"></div> </div> <div class="inputs-row" data-bind="visible: !readingFiles()"> <a class="button add-track" title="New track" data-bind="click: function(){this.addNewTrack()}"></a @@ -103,6 +109,7 @@ L.Control.TrackList = L.Control.extend({ </tr> </tbody></table> </div> + </div> `; ko.applyBindings(this, container); @@ -130,10 +137,18 @@ L.Control.TrackList = L.Control.extend({ maxHeight = (mapHeight - this._container.offsetTop // controls above - (this._container.parentNode.offsetHeight - this._container.offsetTop - this._container.offsetHeight) //controls below - - 85); // margin + - 100); // margin this.trackListHeight(maxHeight + 'px'); }, + setExpanded: function() { + L.DomUtil.removeClass(this._container, 'minimized'); + }, + + setMinimized: function() { + L.DomUtil.addClass(this._container, 'minimized'); + }, + onFileDraging: function(e) { L.DomEvent.stopPropagation(e); L.DomEvent.preventDefault(e); @@ -709,7 +724,7 @@ L.Control.TrackList = L.Control.extend({ }, onMouseMoveOnSegmentUpdateLineJoinCursor: function(e) { - if (!this._lineJoinCursor) { + if (!this._lineJoinCursor) { return; } var trackSegment = e.target,
