|
|
|
@ -0,0 +1,241 @@ |
|
|
|
/* |
|
|
|
* Leaflet.Sleep |
|
|
|
*/ |
|
|
|
|
|
|
|
/* |
|
|
|
* Default Button (touch devices only) |
|
|
|
*/ |
|
|
|
|
|
|
|
L.Control.SleepMapControl = L.Control.extend({ |
|
|
|
|
|
|
|
initialize: function(opts) { |
|
|
|
L.setOptions(this, opts); |
|
|
|
}, |
|
|
|
|
|
|
|
options: { |
|
|
|
position: 'topright', |
|
|
|
prompt: 'Inhabilitar mapa', |
|
|
|
styles: { |
|
|
|
'backgroundColor': 'white', |
|
|
|
'padding': '5px', |
|
|
|
'border': '2px solid gray' |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
buildContainer: function() { |
|
|
|
var self = this; |
|
|
|
var container = L.DomUtil.create('p', 'sleep-button'); |
|
|
|
var boundEvent = this._nonBoundEvent.bind(this); |
|
|
|
container.appendChild(document.createTextNode(this.options.prompt)); |
|
|
|
L.DomEvent.addListener(container, 'click', boundEvent); |
|
|
|
L.DomEvent.addListener(container, 'touchstart', boundEvent); |
|
|
|
|
|
|
|
Object.keys(this.options.styles).map(function(key) { |
|
|
|
container.style[key] = self.options.styles[key]; |
|
|
|
}); |
|
|
|
|
|
|
|
return (this._container = container); |
|
|
|
}, |
|
|
|
|
|
|
|
onAdd: function() { |
|
|
|
return this._container || this.buildContainer(); |
|
|
|
}, |
|
|
|
|
|
|
|
_nonBoundEvent: function(e) { |
|
|
|
L.DomEvent.stop(e); |
|
|
|
if (this._map) this._map.sleep._sleepMap(); |
|
|
|
return false; |
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
L.Control.sleepMapControl = function() { |
|
|
|
return new L.Control.SleepMapControl(); |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
/* |
|
|
|
* The Sleep Handler |
|
|
|
*/ |
|
|
|
|
|
|
|
L.Map.mergeOptions({ |
|
|
|
sleep: true, |
|
|
|
sleepTime: 750, |
|
|
|
wakeTime: 500, |
|
|
|
wakeMessageTouch: 'Touch to wake', |
|
|
|
sleepNote: true, |
|
|
|
hoverToWake: true, |
|
|
|
sleepOpacity: .8, |
|
|
|
sleepButton: L.Control.sleepMapControl |
|
|
|
}); |
|
|
|
|
|
|
|
L.Map.Sleep = L.Handler.extend({ |
|
|
|
|
|
|
|
addHooks: function() { |
|
|
|
var self = this; |
|
|
|
this.sleepNote = L.DomUtil.create('p', 'sleep-note', this._map._container); |
|
|
|
this._enterTimeout = null; |
|
|
|
this._exitTimeout = null; |
|
|
|
|
|
|
|
/* |
|
|
|
* If the device has only a touchscreen we will never get |
|
|
|
* a mouseout event, so we add an extra button to put the map |
|
|
|
* back to sleep manually. |
|
|
|
* |
|
|
|
* a custom control/button can be provided by the user |
|
|
|
* with the map's `sleepButton` option |
|
|
|
*/ |
|
|
|
this._sleepButton = this._map.options.sleepButton(); |
|
|
|
|
|
|
|
if (this._map.tap) { |
|
|
|
this._map.addControl(this._sleepButton); |
|
|
|
} |
|
|
|
|
|
|
|
var mapStyle = this._map._container.style; |
|
|
|
mapStyle.WebkitTransition += 'opacity .2s'; |
|
|
|
mapStyle.MozTransition += 'opacity .2s'; |
|
|
|
|
|
|
|
this._setSleepNoteStyle(); |
|
|
|
this._sleepMap(); |
|
|
|
}, |
|
|
|
|
|
|
|
removeHooks: function() { |
|
|
|
if (!this._map.scrollWheelZoom.enabled()) { |
|
|
|
this._map.scrollWheelZoom.enable(); |
|
|
|
} |
|
|
|
if (this._map.tap && !this._map.tap.enabled()) { |
|
|
|
this._map.touchZoom.enable(); |
|
|
|
this._map.dragging.enable(); |
|
|
|
this._map.tap.enable(); |
|
|
|
} |
|
|
|
L.DomUtil.setOpacity(this._map._container, 1); |
|
|
|
L.DomUtil.setOpacity(this.sleepNote, 0); |
|
|
|
this._removeSleepingListeners(); |
|
|
|
this._removeAwakeListeners(); |
|
|
|
}, |
|
|
|
|
|
|
|
_setSleepNoteStyle: function() { |
|
|
|
var noteString = ''; |
|
|
|
var style = this.sleepNote.style; |
|
|
|
|
|
|
|
if (this._map.tap) { |
|
|
|
noteString = this._map.options.wakeMessageTouch; |
|
|
|
} else if (this._map.options.wakeMessage) { |
|
|
|
noteString = this._map.options.wakeMessage; |
|
|
|
} else if (this._map.options.hoverToWake) { |
|
|
|
noteString = 'Click to wake'; |
|
|
|
} else { |
|
|
|
noteString = 'click to wake'; |
|
|
|
} |
|
|
|
|
|
|
|
if (this._map.options.sleepNote) { |
|
|
|
this.sleepNote.appendChild(document.createTextNode(noteString)); |
|
|
|
style.pointerEvents = 'none'; |
|
|
|
style.maxWidth = '150px'; |
|
|
|
style.transitionDuration = '.2s'; |
|
|
|
style.zIndex = 5000; |
|
|
|
style.opacity = '.6'; |
|
|
|
style.margin = 'auto'; |
|
|
|
style.textAlign = 'center'; |
|
|
|
style.borderRadius = '4px'; |
|
|
|
style.top = '70%'; |
|
|
|
style.position = 'relative'; |
|
|
|
style.padding = '5px'; |
|
|
|
style.border = 'solid 0px #ee4d4d'; |
|
|
|
style.background = 'white'; |
|
|
|
style.color = '#505050'; |
|
|
|
|
|
|
|
if (this._map.options.sleepNoteStyle) { |
|
|
|
var noteStyleOverrides = this._map.options.sleepNoteStyle; |
|
|
|
Object.keys(noteStyleOverrides).map(function(key) { |
|
|
|
style[key] = noteStyleOverrides[key]; |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
_wakeMap: function(e) { |
|
|
|
this._stopWaiting(); |
|
|
|
this._map.scrollWheelZoom.enable(); |
|
|
|
if (this._map.tap) { |
|
|
|
this._map.touchZoom.enable(); |
|
|
|
this._map.dragging.enable(); |
|
|
|
this._map.tap.enable(); |
|
|
|
this._map.addControl(this._sleepButton); |
|
|
|
} |
|
|
|
L.DomUtil.setOpacity(this._map._container, 1); |
|
|
|
this.sleepNote.style.opacity = 0; |
|
|
|
this._addAwakeListeners(); |
|
|
|
}, |
|
|
|
|
|
|
|
_sleepMap: function() { |
|
|
|
this._stopWaiting(); |
|
|
|
this._map.scrollWheelZoom.disable(); |
|
|
|
|
|
|
|
if (this._map.tap) { |
|
|
|
this._map.touchZoom.disable(); |
|
|
|
this._map.dragging.disable(); |
|
|
|
this._map.tap.disable(); |
|
|
|
this._map.removeControl(this._sleepButton); |
|
|
|
} |
|
|
|
|
|
|
|
L.DomUtil.setOpacity(this._map._container, this._map.options.sleepOpacity); |
|
|
|
this.sleepNote.style.opacity = 0.9; |
|
|
|
this._addSleepingListeners(); |
|
|
|
}, |
|
|
|
|
|
|
|
_wakePending: function() { |
|
|
|
this._map.once('mousedown', this._wakeMap, this); |
|
|
|
if (this._map.options.hoverToWake) { |
|
|
|
var self = this; |
|
|
|
this._map.once('mouseout', this._sleepMap, this); |
|
|
|
self._enterTimeout = setTimeout(function() { |
|
|
|
self._map.off('mouseout', self._sleepMap, self); |
|
|
|
self._wakeMap(); |
|
|
|
}, self._map.options.wakeTime); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
_sleepPending: function() { |
|
|
|
var self = this; |
|
|
|
self._map.once('mouseover', self._wakeMap, self); |
|
|
|
self._exitTimeout = setTimeout(function() { |
|
|
|
self._map.off('mouseover', self._wakeMap, self); |
|
|
|
self._sleepMap(); |
|
|
|
}, self._map.options.sleepTime); |
|
|
|
}, |
|
|
|
|
|
|
|
_addSleepingListeners: function() { |
|
|
|
this._map.once('mouseover', this._wakePending, this); |
|
|
|
this._map.tap && |
|
|
|
this._map.once('click', this._wakeMap, this); |
|
|
|
}, |
|
|
|
|
|
|
|
_addAwakeListeners: function() { |
|
|
|
sixtinum
2 years ago
