Skip to content

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

scrolling + dragging the list

parent 6e8ea621
Show whitespace changes
Inline Side-by-side
Showing with 99 additions and 31 deletions
index.html
View file @ 12ea2a07
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
<!-- bower:js --> <!-- bower:js -->
<script src='bower_components/jquery/dist/jquery.js'></script> <script src='bower_components/jquery/dist/jquery.js'></script>
<!-- endbower --> <!-- 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/leaflet/leaflet-src.js'></script>
<script type='text/javascript' src='js/index.js'></script> <script type='text/javascript' src='js/index.js'></script>
<!-- endbuild --> <!-- endbuild -->
...@@ -23,11 +24,6 @@ ...@@ -23,11 +24,6 @@
<body> <body>
<div id="table_div"> <div id="table_div">
<table id='model_table'> <table id='model_table'>
<tr>
<th></th>
<th>Model name</th>
<th>Versions</th>
</tr>
</table> </table>
</div> </div>
<div id="leaflet_map"></div> <div id="leaflet_map"></div>
......
js/index.css
View file @ 12ea2a07
table{ table{
border-collapse:collapse; border-collapse:collapse;
border: 0px solid rgba(220,220,220,1);
} }
tr, th, td{ tr, th, td{
...@@ -8,8 +9,14 @@ tr, th, td{ ...@@ -8,8 +9,14 @@ tr, th, td{
min-width: 80px; min-width: 80px;
} }
#model_table{
position:relative;
top:0px;
left:0px;
}
#model_table td{ #model_table td{
padding: 5px; padding: 3px 3px 3px 3px;
} }
ul { ul {
...@@ -33,13 +40,15 @@ body { ...@@ -33,13 +40,15 @@ body {
#table_div{ #table_div{
position:absolute; position:absolute;
top:2px; top:0px;
left:2px; left:0px;
z-index:1000; z-index:1000;
background:white; background:black;
border-radius: 3px; border-radius: 3px;
overflow:hidden; overflow:hidden;
padding:2px; padding:0px;
overflow:hidden;
height:100%;
} }
.odd{ .odd{
...@@ -47,5 +56,15 @@ body { ...@@ -47,5 +56,15 @@ body {
} }
.arow:hover td{ .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(){ ...@@ -23,6 +23,7 @@ $(function(){
List = response; List = response;
parse_list(response); parse_list(response);
$(".arow")[0].click(); $(".arow")[0].click();
init_dragging();
} }
...@@ -34,6 +35,25 @@ var SETTINGS = { ...@@ -34,6 +35,25 @@ var SETTINGS = {
'showall':false '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 // no comments
function parseURL(){ function parseURL(){
var parameters=location.href.replace(/\?/ig,"&").split("&"); var parameters=location.href.replace(/\?/ig,"&").split("&");
...@@ -56,12 +76,12 @@ function parse_list(res){ ...@@ -56,12 +76,12 @@ function parse_list(res){
var thumb = $(this).attr("thumb"); var thumb = $(this).attr("thumb");
if (thumb.length!=""){ 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{ }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 = ""; var vlist = "";
$(this).find("version").each(function(i,v){ $(this).find("version").each(function(i,v){
...@@ -77,7 +97,7 @@ function parse_list(res){ ...@@ -77,7 +97,7 @@ function parse_list(res){
vlist = vlist.slice(0,-7); 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); row.attr("index",index);
...@@ -121,12 +141,14 @@ function register_row_events(elem){ ...@@ -121,12 +141,14 @@ function register_row_events(elem){
$(elem).on("click",function(){ $(elem).on("click",function(){
if (!Dragged){
$(".arow").css({ $(".arow").css({
background: "white" background: "black"
}); });
//center map; //center map;
$(this).css({ $(this).css({
background: "rgba(100,200,255,0.7)" background: "rgba(100,200,255,1)"
}); });
var index = $(this).attr("index"); var index = $(this).attr("index");
...@@ -142,6 +164,9 @@ function register_row_events(elem){ ...@@ -142,6 +164,9 @@ function register_row_events(elem){
markers[lat+lng].openPopup(); markers[lat+lng].openPopup();
} }
}
Dragged = false;
}); });
} }
...@@ -162,7 +187,7 @@ function init_maps(){ ...@@ -162,7 +187,7 @@ function init_maps(){
'https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', 'https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
{ {
maxZoom: 21, maxZoom: 21,
attribution: 'Many thanks to Google for our happy childhood', attribution: 'Google Imagery',
subdomains:['mt0','mt1','mt2','mt3'], subdomains:['mt0','mt1','mt2','mt3'],
} }
); );
...@@ -197,4 +222,32 @@ function init_maps(){ ...@@ -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