tyler.durden/pandorafms
1
0
Fork 0
mirror of https://github.com/pandorafms/pandorafms.git synced 2025-07-31 01:35:36 +02:00
Code Issues Packages Projects Releases Wiki Activity

Starting to working in the zoom bar controller.

Browse Source
This commit is contained in:
mdtrooper 2016-02-22 18:54:19 +01:00
parent 952dd081ab
commit 967aac57ef
2 changed files with 97 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
pandora_console/include/class/Map.class.php
View File

@ -130,6 +130,63 @@ abstract class Map {
?>
<div id="map" data-id="<?php echo $this->id;?>" style="border: 1px red solid;">
<div class="zoom_controller" style="">
<style type="text/css">
.zoom_controller {
width: 30px;
height: 210px;
background: blue;
border-radius: 15px;
top: 60px;
left: 10px;
position: absolute;
}
.vertical_range {
padding: 0;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
transform: rotate(270deg);
width: 200px;
height: 20px;
position: relative;
background: transparent !important;
border: 0px !important;
}
.vertical_range {
left: -92px;
top: 93px;
}
@media screen and (-webkit-min-device-pixel-ratio:0)
{
/* Only for chrome */
.vertical_range {
left: -87px;
top: 93px;
}
}
.home_zoom {
position: absolute;
top: 215px;
left: 1px;
font-weight: bolder;
font-size: 20px;
background: blue;
color: white;
border-radius: 10px;
padding: 5px;
}
</style>
<input class="vertical_range" type="range" name="range" min="-666" max="666" step="1" value="666" />
<span class="home_zoom">H</span>
</div>
<?php
if ($this->width == 0) {
$width = "100%";

41
pandora_console/include/javascript/map/MapController.js
View File

@ -50,14 +50,53 @@ MapController.prototype.init_map = function() {
function zoom() {
self.tooltip_map_close();
var zoom_level = d3.event.scale;
if (zoom_level == 1) {
zoom_level = 0;
}
else if (zoom_level < 1) {
zoom_level = (-zoom_level) * 100;
}
slider.property("value", zoom_level);
self._viewport
.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
function home_zoom(d) {
console.log(888);
}
function slided(d) {
//~ var zoom_level = d3.select(this).property("value");
//~
//~ if (zoom_level == 0) {
//~ zoom_level = 1;
//~ }
//~ else if (zoom_level < 0) {
//~ zoom_level = 1 / (-zoom_level);
//~ }
//~
//~ self._zoomManager.scale(zoom_level)
//~ .event(svg);
}
var slider = d3.select("#map .zoom_controller .vertical_range")
.attr("value", self._zoomManager.scaleExtent()[0])
.attr("min", -self._zoomManager.scaleExtent()[1])
.attr("max", self._zoomManager.scaleExtent()[1])
.attr("step", (self._zoomManager.scaleExtent()[1] - self._zoomManager.scaleExtent()[0]) / 100)
.on("input", slided);
d3.select("#map .zoom_controller .home_zoom")
.on("onclick", home_zoom);
self.paint_nodes();
this.init_events();
};