зеркало из https://github.com/mozilla/lightbeam.git
removed the UI elements for zooming and panning
This commit is contained in:
Родитель
7fce472001
Коммит
07c6d15eda
|
@ -40,14 +40,6 @@
|
|||
</div>
|
||||
</div>
|
||||
<ul class="controls_options">
|
||||
<li class="zooming">
|
||||
<a class="move-up"><i class="icon-circle-arrow-up"></i></a>
|
||||
<a class="move-left"><i class="icon-circle-arrow-left"></i></a>
|
||||
<a class="move-right"><i class="icon-circle-arrow-right"></i></a>
|
||||
<a class="zoom-in"><i class="icon-plus-sign"></i></a>
|
||||
<a class="zoom-out"><i class="icon-minus-sign"></i></a>
|
||||
<a class="move-down"><i class="icon-circle-arrow-down"></i></a>
|
||||
</li>
|
||||
<li class="upload"><a><i class="icon-arrow-up"></i>Share Data</a></li>
|
||||
<li class="download"><a><i class="icon-arrow-down"></i>Download data</a></li>
|
||||
<li class="reset-data"><a><i class="icon-refresh"></i>Reset data</a></li>
|
||||
|
@ -66,14 +58,6 @@
|
|||
<header class="subhead">Location</header>
|
||||
<div class="map-section">
|
||||
<div><span id="country"> </span></div>
|
||||
<div class="map-control zooming">
|
||||
<a class="move-up"><i class="icon-circle-arrow-up"></i></a>
|
||||
<a class="move-left"><i class="icon-circle-arrow-left"></i></a>
|
||||
<a class="move-right"><i class="icon-circle-arrow-right"></i></a>
|
||||
<a class="zoom-in"><i class="icon-plus-sign"></i></a>
|
||||
<a class="zoom-out"><i class="icon-minus-sign"></i></a>
|
||||
<a class="move-down"><i class="icon-circle-arrow-down"></i></a>
|
||||
</div>
|
||||
|
||||
<!-- SVG world map code starts; based on BlankMap-World6,_compact.svg by Canuckguy et al. ========================= -->
|
||||
<div class="world-map">
|
||||
|
|
|
@ -147,51 +147,6 @@ h3 {
|
|||
color: white;
|
||||
}
|
||||
|
||||
.controls .zooming{
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
line-height: 10px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.zooming a{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.zooming .move-up{
|
||||
float: left;
|
||||
margin-left: 11px;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.zooming .move-left{
|
||||
float: left;
|
||||
clear: left;
|
||||
}
|
||||
|
||||
.zooming .move-right{
|
||||
float: left;
|
||||
}
|
||||
|
||||
.zooming .move-down{
|
||||
float: left;
|
||||
margin-left: 11px;
|
||||
clear: left;
|
||||
position: relative;
|
||||
top: -5px;
|
||||
}
|
||||
|
||||
.zooming .zoom-in{
|
||||
float: right;
|
||||
}
|
||||
.zooming .zoom-out{
|
||||
float: right;
|
||||
}
|
||||
|
||||
#content{
|
||||
position: relative;
|
||||
margin-left: 200px;
|
||||
|
|
113
data/ui.js
113
data/ui.js
|
@ -159,63 +159,6 @@ function setZoom(box,canvas){
|
|||
}
|
||||
}
|
||||
|
||||
document.querySelector('.controls_options .move-up').addEventListener('click', function(){
|
||||
var box = getZoom('vizcanvas');
|
||||
var dY = Math.floor(box.h / 10);
|
||||
box.y += dY;
|
||||
setZoom(box,'vizcanvas');
|
||||
return false;
|
||||
});
|
||||
|
||||
document.querySelector('.controls_options .move-down').addEventListener('click', function(){
|
||||
var box = getZoom('vizcanvas');
|
||||
var dY = Math.floor(box.h / 10);
|
||||
box.y -= dY;
|
||||
setZoom(box,'vizcanvas');
|
||||
return false;
|
||||
});
|
||||
|
||||
document.querySelector('.controls_options .move-left').addEventListener('click', function(){
|
||||
var box = getZoom('vizcanvas');
|
||||
var dX = Math.floor(box.w / 10);
|
||||
box.x += dX;
|
||||
setZoom(box,'vizcanvas');
|
||||
return false;
|
||||
});
|
||||
|
||||
document.querySelector('.controls_options .move-right').addEventListener('click', function(){
|
||||
var box = getZoom('vizcanvas');
|
||||
var dX = Math.floor(box.w / 10);
|
||||
box.x -= dX;
|
||||
setZoom(box,'vizcanvas');
|
||||
return false;
|
||||
});
|
||||
|
||||
document.querySelector('.controls_options .zoom-in').addEventListener('click', function(){
|
||||
var box = getZoom('vizcanvas');
|
||||
var dX = Math.floor(box.w / 5);
|
||||
var dY = Math.floor(box.h / 5);
|
||||
// box.x -= dX;
|
||||
// box.h -= dY;
|
||||
box.w /= 1.1;
|
||||
box.h /= 1.1;
|
||||
setZoom(box,'vizcanvas');
|
||||
return false;
|
||||
});
|
||||
|
||||
document.querySelector('.controls_options .zoom-out').addEventListener('click', function(){
|
||||
var box = getZoom('vizcanvas');
|
||||
var dX = Math.floor(box.w / 5);
|
||||
var dY = Math.floor(box.h / 5);
|
||||
// box.x += dX;
|
||||
// box.h += dY;
|
||||
box.w *= 1.1;
|
||||
box.h *= 1.1;
|
||||
setZoom(box,'vizcanvas');
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
|
||||
/* Scroll over visualization to zoom in/out ========================= */
|
||||
|
||||
|
@ -309,7 +252,7 @@ function vizZooming(target,ratio){
|
|||
box.w = box.w / ratio;
|
||||
box.h = box.h / ratio;
|
||||
box.x = box.x - offsetX;
|
||||
box.y = ( currentVisualization.name == "graph") ? (box.y - offsetY) : -1 * (box.h - 5);
|
||||
box.y = box.y - offsetY;;
|
||||
|
||||
setZoom(box,"mapcanvas");
|
||||
|
||||
|
@ -409,60 +352,6 @@ document.querySelector(".world-map").addEventListener("mousemove",mousemoveHandl
|
|||
document.querySelector(".world-map").addEventListener("mouseup",mouseupHandler,false);
|
||||
document.querySelector(".world-map").addEventListener("mouseleave",mouseleaveHandler,false);
|
||||
|
||||
|
||||
/* Map Controls ========================= */
|
||||
|
||||
document.querySelector('.map-control .move-up').addEventListener('click', function(){
|
||||
var box = getZoom('mapcanvas');
|
||||
var dY = Math.floor(box.h / 10);
|
||||
box.y += dY;
|
||||
setZoom(box,'mapcanvas');
|
||||
return false;
|
||||
});
|
||||
|
||||
document.querySelector('.map-control .move-down').addEventListener('click', function(){
|
||||
var box = getZoom('mapcanvas');
|
||||
var dY = Math.floor(box.h / 10);
|
||||
box.y -= dY;
|
||||
setZoom(box,'mapcanvas');
|
||||
return false;
|
||||
});
|
||||
|
||||
document.querySelector('.map-control .move-left').addEventListener('click', function(){
|
||||
var box = getZoom('mapcanvas');
|
||||
var dX = Math.floor(box.w / 10);
|
||||
box.x += dX;
|
||||
setZoom(box,'mapcanvas');
|
||||
return false;
|
||||
});
|
||||
|
||||
document.querySelector('.map-control .move-right').addEventListener('click', function(){
|
||||
var box = getZoom('mapcanvas');
|
||||
var dX = Math.floor(box.w / 10);
|
||||
box.x -= dX;
|
||||
setZoom(box,'mapcanvas');
|
||||
return false;
|
||||
});
|
||||
|
||||
document.querySelector('.map-control .zoom-in').addEventListener('click', function(){
|
||||
// TODO: zoom in/out adjustment
|
||||
var box = getZoom('mapcanvas');
|
||||
box.w /= 1.5;
|
||||
box.h /= 1.5;
|
||||
setZoom(box,'mapcanvas');
|
||||
return false;
|
||||
});
|
||||
|
||||
document.querySelector('.map-control .zoom-out').addEventListener('click', function(){
|
||||
// TODO: zoom in/out adjustment
|
||||
var box = getZoom('mapcanvas');
|
||||
box.w *= 1.5;
|
||||
box.h *= 1.5;
|
||||
setZoom(box,'mapcanvas');
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
/* Help Mode ========================= */
|
||||
document.querySelector(".help-mode").checked = false;
|
||||
document.querySelector(".help-mode").addEventListener("click", function(){
|
||||
|
|
Загрузка…
Ссылка в новой задаче