Non puoi selezionare più di 25 argomenti
Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.
635 righe
25 KiB
635 righe
25 KiB
/** |
|
MIT License http://www.opensource.org/licenses/mit-license.php |
|
Author Igor Vladyka <igor.vladyka@gmail.com> (https://github.com/Igor-Vladyka/leaflet.browser.print) |
|
**/ |
|
|
|
L.Control.BrowserPrint = L.Control.extend({ |
|
options: { |
|
title: 'Stampa', |
|
documentTitle: '', |
|
position: 'topleft', |
|
printLayer: null, |
|
printModes: ["Portrait", "Landscape", "Auto", "Custom"], |
|
closePopupsOnPrint: true, |
|
contentSelector: "[leaflet-browser-print-content]", |
|
pagesSelector: "[leaflet-browser-print-pages]", |
|
manualMode: false, |
|
customPrintStyle: { color: "gray", dashArray: '5, 10', pane: "customPrintPane" } |
|
}, |
|
|
|
onAdd: function (map) { |
|
|
|
if (this.options.customPrintStyle.pane && !map.getPane(this.options.customPrintStyle.pane)) { |
|
map.createPane(this.options.customPrintStyle.pane).style.zIndex = 9999; |
|
} |
|
|
|
var container = L.DomUtil.create('div', 'leaflet-control-browser-print leaflet-bar leaflet-control'); |
|
L.DomEvent.disableClickPropagation(container); |
|
|
|
this._appendControlStyles(container); |
|
|
|
if (this.options.printModes.length > 1) { |
|
L.DomEvent.addListener(container, 'mouseover', this._displayPageSizeButtons, this); |
|
L.DomEvent.addListener(container, 'mouseout', this._hidePageSizeButtons, this); |
|
} else { |
|
container.style.cursor = "pointer"; |
|
} |
|
|
|
if (this.options.position.indexOf("left") > 0) { |
|
this._createIcon(container); |
|
this._createMenu(container); |
|
} else { |
|
this._createMenu(container); |
|
this._createIcon(container); |
|
} |
|
|
|
map.printControl = this; // Make control available from the map object itself; |
|
return container; |
|
}, |
|
|
|
_createIcon: function (container) { |
|
this.__link__ = L.DomUtil.create('a', '', container); |
|
this.__link__.className = "leaflet-browser-print"; |
|
if (this.options.title) { |
|
this.__link__.title = this.options.title; |
|
} |
|
return this.__link__; |
|
}, |
|
|
|
_createMenu: function (container) { |
|
var domPrintModes = []; |
|
|
|
for (var i = 0; i < this.options.printModes.length; i++) { |
|
var mode = this.options.printModes[i]; |
|
|
|
/* |
|
Mode: |
|
Mode: Portrait/Landscape/Auto/Custom |
|
Title: 'Portrait'/'Landscape'/'Auto'/'Custom' |
|
PageSize: 'A3'/'A4' |
|
Action: '_printPortrait'/... |
|
InvalidateBounds: true/false |
|
*/ |
|
if (mode.length) { |
|
var key = mode[0].toUpperCase() + mode.substring(1).toLowerCase(); |
|
|
|
mode = L.control.browserPrint.mode[mode.toLowerCase()](this._getDefaultTitle(key)); |
|
|
|
} else if (mode instanceof L.Control.BrowserPrint.Mode) { |
|
// Looks like everythin is fine. |
|
} else { |
|
throw "Invalid Print Mode. Can't construct logic to print current map." |
|
} |
|
|
|
if (this.options.printModes.length == 1) { |
|
mode.Element = container; |
|
} else { |
|
mode.Element = L.DomUtil.create('li', 'browser-print-mode', L.DomUtil.create('ul', 'browser-print-holder', container)); |
|
mode.Element.innerHTML = mode.Title; |
|
} |
|
|
|
L.DomEvent.addListener(mode.Element, 'click', mode.Action(this, mode), this); |
|
|
|
domPrintModes.push(mode); |
|
} |
|
|
|
this.options.printModes = domPrintModes; |
|
}, |
|
|
|
_getDefaultTitle: function(key) { |
|
return this.options.printModesNames && this.options.printModesNames[key] || key; |
|
}, |
|
|
|
_displayPageSizeButtons: function() { |
|
if (this.options.position.indexOf("left") > 0) { |
|
this.__link__.style.borderTopRightRadius = "0px"; |
|
this.__link__.style.borderBottomRightRadius = "0px"; |
|
} else { |
|
this.__link__.style.borderTopLeftRadius = "0px"; |
|
this.__link__.style.borderBottomLeftRadius = "0px"; |
|
} |
|
|
|
this.options.printModes.forEach(function(mode){ |
|
mode.Element.style.display = "inline-block"; |
|
}); |
|
}, |
|
|
|
_hidePageSizeButtons: function () { |
|
if (this.options.position.indexOf("left") > 0) { |
|
this.__link__.style.borderTopRightRadius = ""; |
|
this.__link__.style.borderBottomRightRadius = ""; |
|
} else { |
|
this.__link__.style.borderTopLeftRadius = ""; |
|
this.__link__.style.borderBottomLeftRadius = ""; |
|
} |
|
|
|
this.options.printModes.forEach(function(mode){ |
|
mode.Element.style.display = ""; |
|
}); |
|
}, |
|
|
|
_getMode: function(expectedOrientation, mode) { |
|
return new L.control.browserPrint.mode(expectedOrientation, mode.Title, mode.PageSize, mode.Action, mode.InvalidateBounds); |
|
}, |
|
|
|
_printLandscape: function (mode) { |
|
this._addPrintClassToContainer(this._map, "leaflet-browser-print--landscape"); |
|
this._print(mode); |
|
}, |
|
|
|
_printPortrait: function (mode) { |
|
this._addPrintClassToContainer(this._map, "leaflet-browser-print--portrait"); |
|
this._print(mode); |
|
}, |
|
|
|
_printAuto: function (mode) { |
|
this._addPrintClassToContainer(this._map, "leaflet-browser-print--auto"); |
|
|
|
var autoBounds = this._getBoundsForAllVisualLayers(); |
|
var orientation = this._getPageSizeFromBounds(autoBounds); |
|
|
|
this._print(this._getMode(orientation, mode), autoBounds); |
|
}, |
|
|
|
_printCustom: function (mode) { |
|
this._addPrintClassToContainer(this._map, "leaflet-browser-print--custom"); |
|
this.options.custom = { mode: mode}; |
|
this._map.on('mousedown', this._startAutoPoligon, this); |
|
}, |
|
|
|
_addPrintClassToContainer: function (map, printClassName) { |
|
var container = map.getContainer(); |
|
|
|
if (container.className.indexOf(printClassName) === -1) { |
|
container.className += " " + printClassName; |
|
} |
|
}, |
|
|
|
_removePrintClassFromContainer: function (map, printClassName) { |
|
var container = map.getContainer(); |
|
|
|
if (container.className && container.className.indexOf(printClassName) > -1) { |
|
container.className = container.className.replace(" " + printClassName, ""); |
|
} |
|
}, |
|
|
|
_startAutoPoligon: function (e) { |
|
e.originalEvent.preventDefault(); |
|
e.originalEvent.stopPropagation(); |
|
|
|
this._map.dragging.disable(); |
|
|
|
this.options.custom.start = e.latlng; |
|
|
|
this._map.off('mousedown', this._startAutoPoligon, this); |
|
this._map.on('mousemove', this._moveAutoPoligon, this); |
|
this._map.on('mouseup', this._endAutoPoligon, this); |
|
}, |
|
|
|
_moveAutoPoligon: function (e) { |
|
if (this.options.custom) { |
|
e.originalEvent.preventDefault(); |
|
e.originalEvent.stopPropagation(); |
|
if (this.options.custom.rectangle) { |
|
this.options.custom.rectangle.setBounds(L.latLngBounds(this.options.custom.start, e.latlng)); |
|
} else { |
|
this.options.custom.rectangle = L.rectangle([this.options.custom.start, e.latlng], this.options.customPrintStyle); |
|
this.options.custom.rectangle.addTo(this._map); |
|
} |
|
} |
|
}, |
|
|
|
_endAutoPoligon: function (e) { |
|
|
|
e.originalEvent.preventDefault(); |
|
e.originalEvent.stopPropagation(); |
|
|
|
this._map.off('mousemove', this._moveAutoPoligon, this); |
|
this._map.off('mouseup', this._endAutoPoligon, this); |
|
|
|
this._map.dragging.enable(); |
|
|
|
if (this.options.custom && this.options.custom.rectangle) { |
|
var autoBounds = this.options.custom.rectangle.getBounds(); |
|
|
|
this._map.removeLayer(this.options.custom.rectangle); |
|
|
|
var orientation = this._getPageSizeFromBounds(autoBounds); |
|
this._print(this._getMode(orientation, this.options.custom.mode), autoBounds); |
|
|
|
delete this.options.custom; |
|
} else { |
|
this._clearPrint(); |
|
} |
|
}, |
|
|
|
_getPageSizeFromBounds: function(bounds) { |
|
var height = Math.abs(bounds.getNorth() - bounds.getSouth()); |
|
var width = Math.abs(bounds.getEast() - bounds.getWest()); |
|
if (height > width) { |
|
return "Portrait"; |
|
} else { |
|
return "Landscape"; |
|
} |
|
}, |
|
|
|
_setupPrintPagesWidth: function(pagesContainer, size, pageOrientation) { |
|
pagesContainer.style.width = pageOrientation === "Landscape" ? size.Height : size.Width; |
|
}, |
|
|
|
_setupPrintMapHeight: function(mapContainer, size, pageOrientation) { |
|
mapContainer.style.height = pageOrientation === "Landscape" ? size.Width : size.Height; |
|
}, |
|
|
|
/* Intended to cancel next printing*/ |
|
cancel: function(cancelNextPrinting){ |
|
this.cancelNextPrinting = cancelNextPrinting; |
|
}, |
|
|
|
print: function(pageMode) { |
|
pageMode.Action(this, pageMode)(); |
|
}, |
|
|
|
_print: function (printMode, autoBounds) { |
|
this._map.fire(L.Control.BrowserPrint.Event.PrintInit, { mode: printMode }); |
|
L.Control.BrowserPrint.Utils.initialize(); |
|
|
|
var self = this; |
|
var mapContainer = this._map.getContainer(); |
|
var pageOrientation = printMode.Mode; |
|
|
|
var origins = { |
|
bounds: autoBounds || this._map.getBounds(), |
|
width: mapContainer.style.width, |
|
height: mapContainer.style.height, |
|
documentTitle: document.title, |
|
printLayer: L.Control.BrowserPrint.Utils.cloneLayer(this.options.printLayer), |
|
panes: [] |
|
}; |
|
|
|
var mapPanes = this._map.getPanes(); |
|
for (var pane in mapPanes) { |
|
origins.panes.push({name: pane, container: undefined}); |
|
} |
|
|
|
origins.printObjects = this._getPrintObjects(origins.printLayer); |
|
|
|
this._map.fire(L.Control.BrowserPrint.Event.PrePrint, { printLayer: origins.printLayer, printObjects: origins.printObjects, pageOrientation: pageOrientation, printMode: printMode.Mode, pageBounds: origins.bounds}); |
|
|
|
if (this.cancelNextPrinting) { |
|
delete this.cancelNextPrinting; |
|
return; |
|
} |
|
|
|
var overlay = this._addPrintMapOverlay(printMode.PageSize, printMode.getPageMargin("mm"), printMode.getSize(), pageOrientation, origins); |
|
|
|
if (this.options.documentTitle) { |
|
document.title = this.options.documentTitle; |
|
} |
|
|
|
this._map.fire(L.Control.BrowserPrint.Event.PrintStart, { printLayer: origins.printLayer, printMap: overlay.map, printObjects: overlay.objects }); |
|
|
|
if (printMode.InvalidateBounds) { |
|
overlay.map.fitBounds(origins.bounds); |
|
overlay.map.invalidateSize({reset: true, animate: false, pan: false}); |
|
} else { |
|
overlay.map.setView(this._map.getCenter(), this._map.getZoom()); |
|
} |
|
|
|
var interval = setInterval(function(){ |
|
if (!self._isTilesLoading(overlay.map)) { |
|
clearInterval(interval); |
|
if (self.options.manualMode) { |
|
self._setupManualPrintButton(overlay.map, origins, overlay.objects); |
|
} else { |
|
self._completePrinting(overlay.map, origins, overlay.objects); |
|
} |
|
} |
|
}, 50); |
|
}, |
|
|
|
_completePrinting: function (overlayMap, origins, printObjects) { |
|
var self = this; |
|
setTimeout(function(){ |
|
self._map.fire(L.Control.BrowserPrint.Event.Print, { printLayer: origins.printLayer, printMap: overlayMap, printObjects: printObjects }); |
|
var printPromise = window.print(); |
|
if (printPromise) { |
|
Promise.all([printPromise]).then(function(){ |
|
self._printEnd(origins); |
|
self._map.fire(L.Control.BrowserPrint.Event.PrintEnd, { printLayer: origins.printLayer, printMap: overlayMap, printObjects: printObjects }); |
|
}) |
|
} else { |
|
self._printEnd(origins); |
|
self._map.fire(L.Control.BrowserPrint.Event.PrintEnd, { printLayer: origins.printLayer, printMap: overlayMap, printObjects: printObjects }); |
|
} |
|
}, 1000); |
|
}, |
|
|
|
_getBoundsForAllVisualLayers: function () { |
|
var fitBounds = null; |
|
|
|
// Getting all layers without URL -> not tiles. |
|
for (var layerId in this._map._layers){ |
|
var layer = this._map._layers[layerId]; |
|
if (!layer._url && !layer._mutant) { |
|
if (fitBounds) { |
|
if (layer.getBounds) { |
|
fitBounds.extend(layer.getBounds()); |
|
} else if(layer.getLatLng){ |
|
fitBounds.extend(layer.getLatLng()); |
|
} |
|
} else { |
|
if (layer.getBounds) { |
|
fitBounds = layer.getBounds(); |
|
} else if(layer.getLatLng){ |
|
fitBounds = L.latLngBounds(layer.getLatLng(), layer.getLatLng()); |
|
} |
|
} |
|
} |
|
} |
|
|
|
if (!fitBounds || fitBounds._southWest == undefined) { |
|
fitBounds = this._map.getBounds(); |
|
} |
|
|
|
return fitBounds; |
|
}, |
|
|
|
_clearPrint: function () { |
|
this._removePrintClassFromContainer(this._map, "leaflet-browser-print--landscape"); |
|
this._removePrintClassFromContainer(this._map, "leaflet-browser-print--portrait"); |
|
this._removePrintClassFromContainer(this._map, "leaflet-browser-print--auto"); |
|
this._removePrintClassFromContainer(this._map, "leaflet-browser-print--custom"); |
|
}, |
|
|
|
_printEnd: function (origins) { |
|
this._clearPrint(); |
|
|
|
document.body.removeChild(this.__overlay__); |
|
this.__overlay__ = null; |
|
|
|
document.body.className = document.body.className.replace(" leaflet--printing", ""); |
|
if (this.options.documentTitle) { |
|
document.title = origins.documentTitle; |
|
} |
|
|
|
this._map.invalidateSize({reset: true, animate: false, pan: false}); |
|
}, |
|
|
|
_getPrintObjects: function(printLayer) { |
|
var printObjects = {}; |
|
for (var id in this._map._layers){ |
|
var layer = this._map._layers[id]; |
|
if (!printLayer || !layer._url || layer instanceof L.TileLayer.WMS) { |
|
var type = L.Control.BrowserPrint.Utils.getType(layer); |
|
if (type) { |
|
if (!printObjects[type]) { |
|
printObjects[type] = []; |
|
} |
|
printObjects[type].push(layer); |
|
} |
|
} |
|
} |
|
|
|
return printObjects; |
|
}, |
|
|
|
_addPrintCss: function (pageSize, pageMargin, pageOrientation) { |
|
|
|
var printStyleSheet = document.createElement('style'); |
|
printStyleSheet.className = "leaflet-browser-print-css"; |
|
printStyleSheet.setAttribute('type', 'text/css'); |
|
printStyleSheet.innerHTML = ' @media print { .leaflet-popup-content-wrapper, .leaflet-popup-tip { box-shadow: none; }'; |
|
printStyleSheet.innerHTML += ' .leaflet-browser-print--manualMode-button { display: none; }'; |
|
printStyleSheet.innerHTML += ' * { -webkit-print-color-adjust: exact!important; printer-colors: exact!important; color-adjust: exact!important; }'; |
|
if (pageMargin) { |
|
printStyleSheet.innerHTML += ' @page { margin: ' + pageMargin + '; }'; |
|
} |
|
printStyleSheet.innerHTML += ' @page :first { page-break-after: always; }'; |
|
|
|
switch (pageOrientation) { |
|
case "Landscape": |
|
printStyleSheet.innerText += " @page { size : " + pageSize + " landscape; }"; |
|
break; |
|
default: |
|
case "Portrait": |
|
printStyleSheet.innerText += " @page { size : " + pageSize + " portrait; }"; |
|
break; |
|
} |
|
|
|
return printStyleSheet; |
|
}, |
|
|
|
_appendControlStyles: function (container) { |
|
var printControlStyleSheet = document.createElement('style'); |
|
printControlStyleSheet.setAttribute('type', 'text/css'); |
|
|
|
printControlStyleSheet.innerHTML += " .leaflet-control-browser-print { display: flex; } .leaflet-control-browser-print a { background: #fff url('data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ4Mi41IDQ4Mi41IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0ODIuNSA0ODIuNTsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0zOTkuMjUsOTguOWgtMTIuNFY3MS4zYzAtMzkuMy0zMi03MS4zLTcxLjMtNzEuM2gtMTQ5LjdjLTM5LjMsMC03MS4zLDMyLTcxLjMsNzEuM3YyNy42aC0xMS4zICAgIGMtMzkuMywwLTcxLjMsMzItNzEuMyw3MS4zdjExNWMwLDM5LjMsMzIsNzEuMyw3MS4zLDcxLjNoMTEuMnY5MC40YzAsMTkuNiwxNiwzNS42LDM1LjYsMzUuNmgyMjEuMWMxOS42LDAsMzUuNi0xNiwzNS42LTM1LjYgICAgdi05MC40aDEyLjVjMzkuMywwLDcxLjMtMzIsNzEuMy03MS4zdi0xMTVDNDcwLjU1LDEzMC45LDQzOC41NSw5OC45LDM5OS4yNSw5OC45eiBNMTIxLjQ1LDcxLjNjMC0yNC40LDE5LjktNDQuMyw0NC4zLTQ0LjNoMTQ5LjYgICAgYzI0LjQsMCw0NC4zLDE5LjksNDQuMyw0NC4zdjI3LjZoLTIzOC4yVjcxLjN6IE0zNTkuNzUsNDQ3LjFjMCw0LjctMy45LDguNi04LjYsOC42aC0yMjEuMWMtNC43LDAtOC42LTMuOS04LjYtOC42VjI5OGgyMzguMyAgICBWNDQ3LjF6IE00NDMuNTUsMjg1LjNjMCwyNC40LTE5LjksNDQuMy00NC4zLDQ0LjNoLTEyLjRWMjk4aDE3LjhjNy41LDAsMTMuNS02LDEzLjUtMTMuNXMtNi0xMy41LTEzLjUtMTMuNWgtMzMwICAgIGMtNy41LDAtMTMuNSw2LTEzLjUsMTMuNXM2LDEzLjUsMTMuNSwxMy41aDE5Ljl2MzEuNmgtMTEuM2MtMjQuNCwwLTQ0LjMtMTkuOS00NC4zLTQ0LjN2LTExNWMwLTI0LjQsMTkuOS00NC4zLDQ0LjMtNDQuM2gzMTYgICAgYzI0LjQsMCw0NC4zLDE5LjksNDQuMyw0NC4zVjI4NS4zeiIgZmlsbD0iIzAwMDAwMCIvPgoJCTxwYXRoIGQ9Ik0xNTQuMTUsMzY0LjRoMTcxLjljNy41LDAsMTMuNS02LDEzLjUtMTMuNXMtNi0xMy41LTEzLjUtMTMuNWgtMTcxLjljLTcuNSwwLTEzLjUsNi0xMy41LDEzLjVTMTQ2Ljc1LDM2NC40LDE1NC4xNSwzNjQuNCAgICB6IiBmaWxsPSIjMDAwMDAwIi8+CgkJPHBhdGggZD0iTTMyNy4xNSwzOTIuNmgtMTcyYy03LjUsMC0xMy41LDYtMTMuNSwxMy41czYsMTMuNSwxMy41LDEzLjVoMTcxLjljNy41LDAsMTMuNS02LDEzLjUtMTMuNVMzMzQuNTUsMzkyLjYsMzI3LjE1LDM5Mi42eiIgZmlsbD0iIzAwMDAwMCIvPgoJCTxwYXRoIGQ9Ik0zOTguOTUsMTUxLjloLTI3LjRjLTcuNSwwLTEzLjUsNi0xMy41LDEzLjVzNiwxMy41LDEzLjUsMTMuNWgyNy40YzcuNSwwLDEzLjUtNiwxMy41LTEzLjVTNDA2LjQ1LDE1MS45LDM5OC45NSwxNTEuOXoiIGZpbGw9IiMwMDAwMDAiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K') no-repeat 5px; background-size: 24px 24px; display: block; border-radius: 2px; }"; |
|
|
|
printControlStyleSheet.innerHTML += " .leaflet-control-browser-print a.leaflet-browser-print { background-position: center; }"; |
|
printControlStyleSheet.innerHTML += " .browser-print-holder { background-color: #919187; margin: 0px; padding: 0px; list-style: none; white-space: nowrap; align-items: center; display: flex; } .browser-print-holder-left li:last-child { border-top-right-radius: 2px; border-bottom-right-radius: 2px; } .browser-print-holder-right li:first-child { border-top-left-radius: 2px; border-bottom-left-radius: 2px; }"; |
|
printControlStyleSheet.innerHTML += " .browser-print-mode { display: none; color: #FFF; text-decoration: none; padding: 0 10px; text-align: center; } .browser-print-holder:hover { background-color: #757570; cursor: pointer; }"; |
|
printControlStyleSheet.innerHTML += " .leaflet-browser-print--custom, .leaflet-browser-print--custom path { cursor: crosshair!important; }"; |
|
printControlStyleSheet.innerHTML += " .leaflet-print-overlay { width: 100%; height:auto; min-height: 100%; position: absolute; top: 0; background-color: white!important; left: 0; z-index: 1001; display: block!important; } "; |
|
printControlStyleSheet.innerHTML += " .leaflet--printing { height:auto; min-height: 100%; margin: 0px!important; padding: 0px!important; } body.leaflet--printing > * { display: none; box-sizing: border-box; }"; |
|
printControlStyleSheet.innerHTML += " .grid-print-container { grid-template: 1fr / 1fr; box-sizing: border-box; } .grid-map-print { grid-row: 1; grid-column: 1; } body.leaflet--printing .grid-print-container [leaflet-browser-print-content]:not(style) { display: unset!important; }"; |
|
printControlStyleSheet.innerHTML += " .pages-print-container { box-sizing: border-box; }"; |
|
|
|
container.appendChild(printControlStyleSheet); |
|
}, |
|
|
|
_setupManualPrintButton: function(map, origins, objects) { |
|
var manualPrintButton = document.createElement('button'); |
|
manualPrintButton.className = "leaflet-browser-print--manualMode-button"; |
|
manualPrintButton.innerHTML = "Print"; |
|
manualPrintButton.style.position = "absolute"; |
|
manualPrintButton.style.top = "20px"; |
|
manualPrintButton.style.right = "20px"; |
|
this.__overlay__.appendChild(manualPrintButton); |
|
|
|
var self = this; |
|
L.DomEvent.addListener(manualPrintButton, 'click', function () { |
|
self._completePrinting(map, origins, objects); |
|
}); |
|
}, |
|
|
|
_addPrintMapOverlay: function (pageSize, pageMargin, printSize, pageOrientation, origins) { |
|
this.__overlay__ = document.createElement("div"); |
|
this.__overlay__.className = this._map.getContainer().className + " leaflet-print-overlay"; |
|
document.body.appendChild(this.__overlay__); |
|
|
|
this.__overlay__.appendChild(this._addPrintCss(pageSize, pageMargin, pageOrientation)); |
|
|
|
var gridContainer = document.createElement("div"); |
|
gridContainer.className = "grid-print-container"; |
|
gridContainer.style.width = "100%"; |
|
gridContainer.style.display = "grid"; |
|
this._setupPrintMapHeight(gridContainer, printSize, pageOrientation); |
|
|
|
if (this.options.contentSelector) { |
|
var content = document.querySelectorAll(this.options.contentSelector); |
|
if (content && content.length) { |
|
for (var i = 0; i < content.length; i++) { |
|
var printContentItem = content[i].cloneNode(true); |
|
gridContainer.appendChild(printContentItem); |
|
} |
|
} |
|
} |
|
|
|
var isMultipage = this.options.pagesSelector && document.querySelectorAll(this.options.pagesSelector).length; |
|
if (isMultipage) { |
|
var pagesContainer = document.createElement("div"); |
|
pagesContainer.className = "pages-print-container"; |
|
pagesContainer.style.margin = "0!important"; |
|
this._setupPrintPagesWidth(pagesContainer, printSize, pageOrientation); |
|
|
|
this.__overlay__.appendChild(pagesContainer); |
|
pagesContainer.appendChild(gridContainer); |
|
|
|
var pages = document.querySelectorAll(this.options.pagesSelector); |
|
if (pages && pages.length) { |
|
for (var i = 0; i < pages.length; i++) { |
|
var printPageItem = pages[i].cloneNode(true); |
|
pagesContainer.appendChild(printPageItem); |
|
} |
|
} |
|
} else { |
|
this._setupPrintPagesWidth(gridContainer, printSize, pageOrientation); |
|
this.__overlay__.appendChild(gridContainer); |
|
} |
|
|
|
var overlayMapDom = document.createElement("div"); |
|
overlayMapDom.id = this._map.getContainer().id + "-print"; |
|
overlayMapDom.className = "grid-map-print"; |
|
overlayMapDom.style.width = "100%"; |
|
overlayMapDom.style.height = "100%"; |
|
gridContainer.appendChild(overlayMapDom); |
|
|
|
document.body.className += " leaflet--printing"; |
|
|
|
var newMapOptions = L.Control.BrowserPrint.Utils.cloneBasicOptionsWithoutLayers(this._map.options); |
|
newMapOptions.maxZoom = this._map.getMaxZoom(); |
|
return this._setupPrintMap(overlayMapDom.id, newMapOptions, origins.printLayer, origins.printObjects, origins.panes); |
|
}, |
|
|
|
_setupPrintMap: function (id, options, printLayer, printObjects, panes) { |
|
options.zoomControl = false; |
|
options.dragging = false; |
|
options.zoomAnimation = false; |
|
options.fadeAnimation = false; |
|
options.markerZoomAnimation = false; |
|
options.keyboard = false; |
|
options.scrollWheelZoom = false; |
|
options.tap = false; |
|
options.touchZoom = false; |
|
var overlayMap = L.map(id, options); |
|
|
|
if (printLayer) { |
|
printLayer.addTo(overlayMap); |
|
} |
|
|
|
panes.forEach(function(p) { overlayMap.createPane(p.name, p.container); }); |
|
var clones = {}; |
|
var popupsToOpen = []; |
|
for (var type in printObjects){ |
|
var closePopupsOnPrint = this.options.closePopupsOnPrint; |
|
printObjects[type] = printObjects[type].map(function(pLayer){ |
|
var clone = L.Control.BrowserPrint.Utils.cloneLayer(pLayer); |
|
|
|
if (clone) { |
|
/* Workaround for apropriate handling of popups. */ |
|
if (pLayer instanceof L.Popup){ |
|
if(!pLayer.isOpen) { |
|
pLayer.isOpen = function () { return this._isOpen; }; |
|
} |
|
if (pLayer.isOpen() && !closePopupsOnPrint) { |
|
popupsToOpen.push({source: pLayer._source, popup: clone}); |
|
} |
|
} else { |
|
clone.addTo(overlayMap); |
|
} |
|
|
|
clones[pLayer._leaflet_id] = clone; |
|
|
|
if (pLayer instanceof L.Layer) { |
|
var tooltip = pLayer.getTooltip(); |
|
if (tooltip) { |
|
clone.bindTooltip(tooltip.getContent(), tooltip.options); |
|
if (pLayer.isTooltipOpen()) { |
|
clone.openTooltip(tooltip.getLatLng()); |
|
} |
|
} |
|
} |
|
|
|
return clone; |
|
} |
|
}); |
|
} |
|
|
|
for (var p = 0; p < popupsToOpen.length; p++) { |
|
var popupModel = popupsToOpen[p]; |
|
if (popupModel.source) { |
|
var element = clones[popupModel.source._leaflet_id]; |
|
if (element && element.bindPopup && element.openPopup) { |
|
clones[popupModel.source._leaflet_id].bindPopup(popupModel.popup).openPopup(popupModel.popup.getLatLng()); |
|
} |
|
} |
|
} |
|
|
|
return {map: overlayMap, objects: printObjects}; |
|
}, |
|
|
|
// Get all layers that is tile layers and is still loading; |
|
_isTilesLoading: function(overlayMap){ |
|
var isLoading = false; |
|
var mapMajorVersion = parseFloat(L.version); |
|
if (mapMajorVersion > 1) { |
|
isLoading = this._getLoadingLayers(overlayMap); |
|
} else { |
|
isLoading = overlayMap._tilesToLoad || overlayMap._tileLayersToLoad; |
|
} |
|
|
|
return isLoading; |
|
}, |
|
|
|
_getLoadingLayers: function(map) { |
|
for (var l in map._layers) { |
|
var layer = map._layers[l]; |
|
if ((layer._url || layer._mutant) && layer._loading) { |
|
return true; |
|
} |
|
} |
|
|
|
return false; |
|
} |
|
}); |
|
|
|
L.Control.BrowserPrint.Event = { |
|
PrintInit: 'browser-print-init', |
|
PrePrint: 'browser-pre-print', |
|
PrintStart: 'browser-print-start', |
|
Print: 'browser-print', |
|
PrintEnd: 'browser-print-end' |
|
}, |
|
|
|
L.control.browserPrint = function(options) { |
|
if (!options || !options.printModes) { |
|
options = options || {}; |
|
options.printModes = [ |
|
L.control.browserPrint.mode.portrait(), |
|
L.control.browserPrint.mode.landscape(), |
|
L.control.browserPrint.mode.auto(), |
|
L.control.browserPrint.mode.custom() |
|
] |
|
} |
|
|
|
if (options && options.printModes && (!options.printModes.filter || !options.printModes.length)) { |
|
throw "Please specify valid print modes for Print action. Example: printModes: [L.control.browserPrint.mode.portrait(), L.control.browserPrint.mode.auto('Automatico'), 'Custom']"; |
|
} |
|
|
|
if (options.printModesNames) { |
|
console.warn("'printModesNames' option is obsolete. Please use 'L.control.browserPrint.mode.*(/*Title*/)' shortcut instead. Please check latest release and documentation."); |
|
} |
|
|
|
return new L.Control.BrowserPrint(options); |
|
};
|
|
|