Widget:MapLegend - Revision history

Commando: Created page with "

2021-02-16T20:59:31Z

Created page with "<table id="map-legend-" class="map-legend"> <tr> <td></td> <td><input type="checkbox" id="map-toggle-all-" class="toggl..."

New page
<table id="map-legend-" class="map-legend">
<tr>
<td></td>
<td><input type="checkbox" id="map-toggle-all-" class="toggle-all" checked>
<label for="map-toggle-all-">Turn all on or off</label></td>
</tr>

<tr>
<td></td>
<td><input type="checkbox" id="map-toggle-cave-" class="toggle-cave" checked>
<label for="map-toggle-cave-">Turn cave on or off</label></td>
</tr>


<tr>
<td class="dots"><div class="legend obelisk-red"></div><div class="legend obelisk-green"></div><div class="legend obelisk-blue"></div></td>
<td><label>Obelisks</label></td>
</tr>



<tr>
<td class="dots"><div class="legend "></div></td>
<td><input type="checkbox" id="map-toggle--" class="toggle-one" value="" checked>
<label for="map-toggle--"></label>
<br></td>
</tr>


</table>
<script>
RLQ.push(['jquery', function () {
console.log('mw.loader and jQuery are available now', $);
var id = '';
function setVisibility(type, on) {
if (on) {
$('#map-' + id).removeClass('hide-' + type);
} else {
$('#map-' + id).addClass('hide-' + type);
}
}
$('#map-legend-' + id).on('change', 'input.toggle-one', function () {
setVisibility(this.value, this.checked);
});
$('#map-toggle-all-' + id).on('click', function () {
$('#map-legend-' + id).find('input.toggle-one').prop('checked', this.checked).each(function () {
setVisibility(this.value, this.checked);
});
});
$('#map-toggle-cave-' + id).on('click', function () {
setVisibility('cave', this.checked);
});

// shows coords near cursor
var tooltipCoords = $('<div id="tooltipCoords">').css({
textAlign: 'center',
backgroundColor: 'rgba(255, 255, 255, 0.7)',
textShadow: '1px 1px white',
color: 'black',
padding: '3px',
minWidth: '60px',
position: 'fixed',
display: 'none',
whiteSpace: 'nowrap',
border: '1px solid black'
}).appendTo('.mw-body-content');

$('.map-container').
each(function () {
var $this = $(this),
widthCoords = parseFloat($this.data('borderright')) - parseFloat($this.data('borderleft')),
heightCoords = parseFloat($this.data('borderbottom')) - parseFloat($this.data('bordertop')),
borderT = parseFloat($this.data('bordertop')),
borderL = parseFloat($this.data('borderleft'));

$this.
mousemove(function (e) {
var pos = $this.offset(),
top = pos.top,
left = pos.left,
lon = ((e.clientX + $(document).scrollLeft() - left) * widthCoords / $this.width() + borderL).toFixed(1),
lat = ((e.clientY + $(document).scrollTop() - top) * heightCoords / $this.height() + borderT).toFixed(1);

$(tooltipCoords).text(lat + ', ' + lon).css({
left: e.clientX + 20,
top: e.clientY
}).show();
}).
mouseleave(function () {
$(tooltipCoords).hide();
});
});
}]);
</script>