Merge pull request #110 from Fragger/zoomslider-plugin
Zoomslider plugin
This commit is contained in:
Stefan Breunig
commit
551f0608fd
@ -9,5 +9,6 @@ This project is licensed under the permissive ISC license. Parts imported from o
|
||||
- [oms.min.js by George MacKerron; MIT](https://github.com/jawj/OverlappingMarkerSpiderfier-Leaflet)
|
||||
- [taphold.js by Rich Adams; unknown](https://github.com/richadams/jquery-taphold)
|
||||
- [L.Control.Pan.js by Kartena AB; same as Leaftlet](https://github.com/kartena/Leaflet.Pancontrol)
|
||||
- [L.Control.Zoomslider.js by Kartena AB; same as Leaftlet](https://github.com/kartena/Leaflet.zoomslider)
|
||||
- StackOverflow-CopyPasta is attributed in the source; [CC-Wiki](https://creativecommons.org/licenses/by-sa/3.0/)
|
||||
- all Ingress/Niantic related stuff obviously remains non-free and is still copyrighted by Niantic/Google
|
||||
|
||||
106
external/L.Control.Zoomslider.css
vendored
Normal file
106
external/L.Control.Zoomslider.css
vendored
Normal file
@ -0,0 +1,106 @@
|
||||
/** Slider **/
|
||||
.leaflet-control-zoomslider-slider {
|
||||
padding-top: 5px ;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.leaflet-control-zoomslider-slider-body {
|
||||
background-image: url(@@INCLUDEIMAGE:images/zoom-slider.png@@);
|
||||
background-repeat: repeat-y;
|
||||
background-position: center 0px;
|
||||
height: 100%;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.leaflet-control-zoomslider-slider-knob {
|
||||
width: 13px;
|
||||
height:5px;
|
||||
background-color: black;
|
||||
background-position: center;
|
||||
-webkit-border-radius: 15px;
|
||||
border-radius: 15px;
|
||||
margin-left: 5px;
|
||||
/*border: 5px; */
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.leaflet-control-zoomslider-slider-body:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.leaflet-control-zoomslider-slider-knob:hover {
|
||||
cursor: default;
|
||||
cursor: -webkit-grab;
|
||||
cursor: -moz-grab;
|
||||
}
|
||||
|
||||
.leaflet-dragging .leaflet-control-zoomslider,
|
||||
.leaflet-dragging .leaflet-control-zoomslider-slider,
|
||||
.leaflet-dragging .leaflet-control-zoomslider-slider-body,
|
||||
.leaflet-dragging .leaflet-control-zoomslider a,
|
||||
.leaflet-dragging .leaflet-control-zoomslider a.leaflet-control-zoomslider-disabled,
|
||||
.leaflet-dragging .leaflet-control-zoomslider-slider-knob:hover {
|
||||
cursor: move;
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
}
|
||||
|
||||
/** Leaflet Zoom Styles **/
|
||||
.leaflet-container .leaflet-control-zoomslider {
|
||||
margin-left: 13px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.leaflet-control-zoomslider a {
|
||||
width: 23px;
|
||||
height: 22px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
display: block;
|
||||
}
|
||||
.leaflet-control-zoomslider a:hover {
|
||||
background-color: #fff;
|
||||
color: #777;
|
||||
}
|
||||
.leaflet-control-zoomslider-in {
|
||||
font: bold 19px/24px Arial, Helvetica, sans-serif;
|
||||
}
|
||||
.leaflet-control-zoomslider-in:after{
|
||||
content:"+"
|
||||
}
|
||||
.leaflet-control-zoomslider-out {
|
||||
font: bold 23px/20px Tahoma, Verdana, sans-serif;
|
||||
}
|
||||
.leaflet-control-zoomslider-out:after{
|
||||
content:"-"
|
||||
}
|
||||
.leaflet-control-zoomslider a.leaflet-control-zoomslider-disabled {
|
||||
cursor: default;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
/* Touch */
|
||||
|
||||
.leaflet-touch .leaflet-control-zoomslider-slider-knob {
|
||||
width:20px;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-zoomslider a {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-zoomslider-in {
|
||||
font-size: 24px;
|
||||
line-height: 29px;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-zoomslider-out {
|
||||
font-size: 28px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-control-zoomslider {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-control-zoomslider {
|
||||
border: 4px solid rgba(0,0,0,0.3);
|
||||
}
|
||||
221
external/L.Control.Zoomslider.js
vendored
Normal file
221
external/L.Control.Zoomslider.js
vendored
Normal file
@ -0,0 +1,221 @@
|
||||
L.Control.Zoomslider = (function(){
|
||||
|
||||
var Knob = L.Draggable.extend({
|
||||
initialize: function (element, steps, stepHeight, knobHeight) {
|
||||
var sliderHeight = steps * stepHeight;
|
||||
L.Draggable.prototype.initialize.call(this, element, element);
|
||||
|
||||
this._element = element;
|
||||
this._maxValue = steps - 1;
|
||||
|
||||
// conversion parameters
|
||||
// the conversion is just a common linear function.
|
||||
this._k = -stepHeight;
|
||||
this._m = sliderHeight - (stepHeight + knobHeight) / 2;
|
||||
|
||||
this.on('predrag', function() {
|
||||
this._newPos.x = 0;
|
||||
this._newPos.y = this._adjust(this._newPos.y);
|
||||
}, this);
|
||||
},
|
||||
|
||||
_adjust: function (y) {
|
||||
var value = Math.round(this._toValue(y));
|
||||
value = Math.max(0, Math.min(this._maxValue, value));
|
||||
return this._toY(value);
|
||||
},
|
||||
|
||||
// y = k*v + m
|
||||
_toY: function (value) {
|
||||
return this._k * value + this._m;
|
||||
},
|
||||
// v = (y - m) / k
|
||||
_toValue: function (y) {
|
||||
return (y - this._m) / this._k;
|
||||
},
|
||||
|
||||
setPosition: function (y) {
|
||||
L.DomUtil.setPosition(this._element,
|
||||
L.point(0, this._adjust(y)));
|
||||
},
|
||||
|
||||
setValue: function (v) {
|
||||
this.setPosition(this._toY(v));
|
||||
},
|
||||
|
||||
getValue: function () {
|
||||
return this._toValue(L.DomUtil.getPosition(this._element).y);
|
||||
}
|
||||
});
|
||||
|
||||
var Zoomslider = L.Control.extend({
|
||||
options: {
|
||||
position: 'topleft',
|
||||
// Height of zoom-slider.png in px
|
||||
stepHeight: 9,
|
||||
// Height of the knob div in px
|
||||
knobHeight: 5,
|
||||
styleNS: 'leaflet-control-zoomslider'
|
||||
},
|
||||
|
||||
onAdd: function (map) {
|
||||
var container = L.DomUtil.create('div', this.options.styleNS + ' leaflet-bar');
|
||||
|
||||
L.DomEvent.disableClickPropagation(container);
|
||||
|
||||
this._map = map;
|
||||
|
||||
this._zoomInButton = this._createZoomButton(
|
||||
'in', 'top', container, this._zoomIn);
|
||||
|
||||
this._sliderElem = L.DomUtil.create(
|
||||
'div',
|
||||
this.options.styleNS + "-slider leaflet-bar-part",
|
||||
container);
|
||||
|
||||
this._zoomOutButton = this._createZoomButton(
|
||||
'out', 'bottom', container, this._zoomOut);
|
||||
|
||||
map .on('layeradd layerremove', this._refresh, this)
|
||||
.on("zoomend", this._updateSlider, this)
|
||||
.on("zoomend", this._updateDisabled, this)
|
||||
.whenReady(this._createSlider, this)
|
||||
.whenReady(this._createKnob, this)
|
||||
.whenReady(this._updateSlider, this)
|
||||
.whenReady(this._updateDisabled, this);
|
||||
|
||||
return container;
|
||||
},
|
||||
|
||||
onRemove: function (map) {
|
||||
map .off("zoomend", this._updateSlider)
|
||||
.off("zoomend", this._updateDisabled)
|
||||
.off('layeradd layerremove', this._refresh);
|
||||
},
|
||||
|
||||
_refresh: function () {
|
||||
// TODO: listen to zoomlevelschange-event instead in 0.6.x
|
||||
this._map
|
||||
.removeControl(this)
|
||||
.addControl(this);
|
||||
},
|
||||
_zoomLevels: function(){
|
||||
return this._map.getMaxZoom() - this._map.getMinZoom() + 1;
|
||||
},
|
||||
|
||||
_createSlider: function () {
|
||||
var zoomLevels = this._zoomLevels();
|
||||
|
||||
// No tilelayer probably
|
||||
if(zoomLevels == Infinity){
|
||||
return;
|
||||
}
|
||||
|
||||
this._sliderBody = L.DomUtil.create('div',
|
||||
this.options.styleNS + '-slider-body',
|
||||
this._sliderElem);
|
||||
this._sliderBody.style.height
|
||||
= (this.options.stepHeight * zoomLevels) + "px";
|
||||
L.DomEvent.on(this._sliderBody, 'click', this._onSliderClick, this);
|
||||
},
|
||||
|
||||
_createKnob: function () {
|
||||
var knobElem,
|
||||
zoomLevels = this._zoomLevels();
|
||||
|
||||
// No tilelayer probably
|
||||
if(zoomLevels == Infinity) {
|
||||
return;
|
||||
}
|
||||
|
||||
knobElem = L.DomUtil.create('div', this.options.styleNS + '-slider-knob',
|
||||
this._sliderBody);
|
||||
L.DomEvent.disableClickPropagation(knobElem);
|
||||
|
||||
this._knob = new Knob(knobElem,
|
||||
this._zoomLevels(),
|
||||
this.options.stepHeight,
|
||||
this.options.knobHeight)
|
||||
.on('dragend', this._updateZoom, this);
|
||||
this._knob.enable();
|
||||
},
|
||||
|
||||
_onSliderClick: function (e) {
|
||||
var first = (e.touches && e.touches.length === 1 ? e.touches[0] : e);
|
||||
var y = L.DomEvent.getMousePosition(first).y
|
||||
- L.DomUtil.getViewportOffset(this._sliderBody).y; // Cache this?
|
||||
this._knob.setPosition(y);
|
||||
this._updateZoom();
|
||||
},
|
||||
|
||||
_zoomIn: function (e) {
|
||||
this._map.zoomIn(e.shiftKey ? 3 : 1);
|
||||
},
|
||||
_zoomOut: function (e) {
|
||||
this._map.zoomOut(e.shiftKey ? 3 : 1);
|
||||
},
|
||||
|
||||
_createZoomButton: function (zoomDir, end, container, fn) {
|
||||
var barPart = 'leaflet-bar-part',
|
||||
classDef = this.options.styleNS + '-' + zoomDir
|
||||
+ ' ' + barPart
|
||||
+ ' ' + barPart + '-' + end,
|
||||
title = 'Zoom ' + zoomDir,
|
||||
link = L.DomUtil.create('a', classDef, container);
|
||||
link.href = '#';
|
||||
link.title = title;
|
||||
|
||||
L.DomEvent
|
||||
.on(link, 'click', L.DomEvent.preventDefault)
|
||||
.on(link, 'click', fn, this);
|
||||
|
||||
return link;
|
||||
},
|
||||
_toZoomLevel: function (sliderValue) {
|
||||
return sliderValue + this._map.getMinZoom();
|
||||
},
|
||||
_toSliderValue: function (zoomLevel) {
|
||||
return zoomLevel - this._map.getMinZoom();
|
||||
},
|
||||
|
||||
_updateZoom: function(){
|
||||
this._map.setZoom(this._toZoomLevel(this._knob.getValue()));
|
||||
},
|
||||
_updateSlider: function(){
|
||||
if(this._knob){
|
||||
this._knob.setValue(this._toSliderValue(this._map.getZoom()));
|
||||
}
|
||||
},
|
||||
_updateDisabled: function () {
|
||||
var map = this._map,
|
||||
className = this.options.styleNS + '-disabled';
|
||||
|
||||
L.DomUtil.removeClass(this._zoomInButton, className);
|
||||
L.DomUtil.removeClass(this._zoomOutButton, className);
|
||||
|
||||
if (map.getZoom() === map.getMinZoom()) {
|
||||
L.DomUtil.addClass(this._zoomOutButton, className);
|
||||
}
|
||||
if (map.getZoom() === map.getMaxZoom()) {
|
||||
L.DomUtil.addClass(this._zoomInButton, className);
|
||||
}
|
||||
}
|
||||
});
|
||||
return Zoomslider;
|
||||
})();
|
||||
|
||||
L.Map.mergeOptions({
|
||||
zoomControl: false,
|
||||
zoomsliderControl: true
|
||||
});
|
||||
|
||||
L.Map.addInitHook(function () {
|
||||
if (this.options.zoomsliderControl) {
|
||||
this.zoomsliderControl = new L.Control.Zoomslider();
|
||||
this.addControl(this.zoomsliderControl);
|
||||
}
|
||||
});
|
||||
|
||||
L.control.zoomslider = function (options) {
|
||||
return new L.Control.Zoomslider(options);
|
||||
};
|
||||
BIN
images/zoom-slider.png
Normal file
BIN
images/zoom-slider.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
55
plugins/zoom-slider.user.js
Normal file
55
plugins/zoom-slider.user.js
Normal file
@ -0,0 +1,55 @@
|
||||
// ==UserScript==
|
||||
// @id iitc-plugin-zoom-slider@fragger
|
||||
// @name IITC plugin: zoom slider
|
||||
// @version 0.1.0.@@DATETIMEVERSION@@
|
||||
// @namespace https://github.com/jonatkins/ingress-intel-total-conversion
|
||||
// @updateURL @@UPDATEURL@@
|
||||
// @downloadURL @@DOWNLOADURL@@
|
||||
// @description [@@BUILDNAME@@-@@BUILDDATE@@] Shows a zoom slider on the map instead of the zoom buttons
|
||||
// @include https://www.ingress.com/intel*
|
||||
// @include http://www.ingress.com/intel*
|
||||
// @match https://www.ingress.com/intel*
|
||||
// @match http://www.ingress.com/intel*
|
||||
// ==/UserScript==
|
||||
|
||||
function wrapper() {
|
||||
// ensure plugin framework is there, even if iitc is not yet loaded
|
||||
if(typeof window.plugin !== 'function') window.plugin = function() {};
|
||||
|
||||
|
||||
// PLUGIN START ////////////////////////////////////////////////////////
|
||||
|
||||
|
||||
// use own namespace for plugin
|
||||
window.plugin.zoomSlider = function() {};
|
||||
|
||||
window.plugin.zoomSlider.setup = function() {
|
||||
try { console.log('Loading Leaflet.zoomslider JS now'); } catch(e) {}
|
||||
@@INCLUDERAW:external/L.Control.Zoomslider.js@@
|
||||
try { console.log('done loading Leaflet.zoomslider JS'); } catch(e) {}
|
||||
|
||||
if(map.zoomControl._map) {
|
||||
window.map.removeControl(map.zoomControl);
|
||||
}
|
||||
window.map.addControl(L.control.zoomslider());
|
||||
|
||||
$('head').append('<style>@@INCLUDESTRING:external/L.Control.Zoomslider.css@@</style>');
|
||||
};
|
||||
|
||||
var setup = window.plugin.zoomSlider.setup;
|
||||
|
||||
// PLUGIN END //////////////////////////////////////////////////////////
|
||||
|
||||
if(window.iitcLoaded && typeof setup === 'function') {
|
||||
setup();
|
||||
} else {
|
||||
if(window.bootPlugins)
|
||||
window.bootPlugins.push(setup);
|
||||
else
|
||||
window.bootPlugins = [setup];
|
||||
}
|
||||
} // wrapper end
|
||||
// inject code into site context
|
||||
var script = document.createElement('script');
|
||||
script.appendChild(document.createTextNode('('+ wrapper +')();'));
|
||||
(document.body || document.head || document.documentElement).appendChild(script);
|
||||
Loading…
x
Reference in New Issue
Block a user