Skip to content

X
x3domlet
Commit 12ea2a07 authored by Oleg Dzhimiev's avatar Oleg Dzhimiev
Browse files
Options

scrolling + dragging the list

parent 6e8ea621
Hide whitespace changes
Inline Side-by-side
Showing with 99 additions and 31 deletions
index.html
View file @ 12ea2a07
......@@ -15,6 +15,7 @@
<!-- bower:js -->
<script src='bower_components/jquery/dist/jquery.js'></script>
<!-- endbower -->
<script type='text/javascript' src='js/jquery-ui/jquery-ui.js'></script>
<script type='text/javascript' src='js/leaflet/leaflet-src.js'></script>
<script type='text/javascript' src='js/index.js'></script>
<!-- endbuild -->
......@@ -23,11 +24,6 @@
<body>
<div id="table_div">
<table id='model_table'>
<tr>
<th></th>
<th>Model name</th>
<th>Versions</th>
</tr>
</table>
</div>
<div id="leaflet_map"></div>
......
js/index.css
View file @ 12ea2a07
table{
border-collapse:collapse;
border: 0px solid rgba(220,220,220,1);
}
tr, th, td{
......@@ -8,8 +9,14 @@ tr, th, td{
min-width: 80px;
}
#model_table{
position:relative;
top:0px;
left:0px;
}
#model_table td{
padding: 5px;
padding: 3px 3px 3px 3px;
}
ul {
......@@ -33,13 +40,15 @@ body {
#table_div{
position:absolute;
top:2px;
left:2px;
top:0px;
left:0px;
z-index:1000;
background:white;
background:black;
border-radius: 3px;
overflow:hidden;
padding:2px;
padding:0px;
overflow:hidden;
height:100%;
}
.odd{
......@@ -47,5 +56,15 @@ body {
}
.arow:hover td{
background:rgba(220,220,220,0.4);
background:rgba(220,220,220,0.0);
}
.acell{
padding:0px;
margin:0px;
}
img{
border-spacing:0px;
display: block;
}
\ No newline at end of file
js/index.js
View file @ 12ea2a07
......@@ -23,6 +23,7 @@ $(function(){
List = response;
parse_list(response);
$(".arow")[0].click();
init_dragging();
}
......@@ -34,6 +35,25 @@ var SETTINGS = {
'showall':false
};
var Dragged = false;
function init_dragging(){
var list = document.getElementById('model_table');
if (list.addEventListener) list.addEventListener('DOMMouseScroll', wheelEvent_list, false);
list.onmousewheel = wheelEvent_list;
$("#model_table").draggable({
axis: "y",
containment:[0,-($("#model_table").height()),0,2],
drag: function(){
Dragged = true;
}
});
}
// no comments
function parseURL(){
var parameters=location.href.replace(/\?/ig,"&").split("&");
......@@ -56,12 +76,12 @@ function parse_list(res){
var thumb = $(this).attr("thumb");
if (thumb.length!=""){
row.append("<td class='acell' valign='top'><img alt='n/a' src='models/"+name+"/thumb.jpeg'></img></td>");
row.append("<td class='acell' title='"+name+"' ><div><img alt='n/a' src='models/"+name+"/thumb.jpeg'></img></div></td>");
}else{
row.append("<td class='acell' valign='top' align='center'>&ndash;</td>");
row.append("<td class='acell' title='"+name+"' valign='top' align='center'>&ndash;</td>");
}
row.append("<td class='acell' valign='top'>"+name+"</td>");
//row.append("<td class='acell' valign='top'>"+name+"</td>");
var vlist = "";
$(this).find("version").each(function(i,v){
......@@ -77,7 +97,7 @@ function parse_list(res){
vlist = vlist.slice(0,-7);
row.append("<td class='acell' valign='top'><div>"+vlist+"</div></td>");
//row.append("<td class='acell' valign='top'><div>"+vlist+"</div></td>");
row.attr("index",index);
......@@ -121,26 +141,31 @@ function register_row_events(elem){
$(elem).on("click",function(){
$(".arow").css({
background: "white"
});
//center map;
$(this).css({
background: "rgba(100,200,255,0.7)"
});
if (!Dragged){
$(".arow").css({
background: "black"
});
//center map;
$(this).css({
background: "rgba(100,200,255,1)"
});
var index = $(this).attr("index");
var list = $(List).find("model");
var item = list[index];
var index = $(this).attr("index");
var list = $(List).find("model");
var item = list[index];
var lat = $($(item).find("latitude")[0]).text();
var lng = $($(item).find("longitude")[0]).text();
var lat = $($(item).find("latitude")[0]).text();
var lng = $($(item).find("longitude")[0]).text();
map.panTo(new L.LatLng(lat, lng));
map.panTo(new L.LatLng(lat, lng));
if (markers[lat+lng]!=undefined){
markers[lat+lng].openPopup();
}
if (markers[lat+lng]!=undefined){
markers[lat+lng].openPopup();
}
Dragged = false;
});
......@@ -162,7 +187,7 @@ function init_maps(){
'https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
{
maxZoom: 21,
attribution: 'Many thanks to Google for our happy childhood',
attribution: 'Google Imagery',
subdomains:['mt0','mt1','mt2','mt3'],
}
);
......@@ -197,4 +222,32 @@ function init_maps(){
}
function wheelEvent_list(event){
shiftKey= (event.shiftKey==1);
var delta = 0;
if (!event) event = window.event; // IE
if (event.wheelDelta) { //IE+Opera
delta = event.wheelDelta/120;
if (window.opera) delta = -delta;
} else if (event.detail) { // Mozilla
delta = -event.detail;
}
if (delta)
handleWheel_list(event,delta,shiftKey);
if (event.preventDefault)
event.preventDefault();
event.returnValue = false;
}
function handleWheel_list(event,delta,move) {
var tmp = $("#model_table").position().top;
var tmp2 = +tmp+20*delta;
if (tmp2 > 0) tmp2=0;
if (tmp2 < -$("#model_table").height() ) tmp2=-$("#model_table").height();
$("#model_table").css({top:tmp2+'px'});
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment