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

scrolling + dragging the list

parent 6e8ea621

index.html

+1 −5
Original line number Diff line number Diff line
@@ -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

+25 −6
Original line number Diff line number Diff line 


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

+73 −20
Original line number Diff line number Diff line
@@ -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,12 +141,14 @@ function register_row_events(elem){ 


    $(elem).on("click",function(){



        if (!Dragged){



          $(".arow").css({

            background: "white"

              background: "black"

          });

          //center map;

          $(this).css({

            background: "rgba(100,200,255,0.7)"

              background: "rgba(100,200,255,1)"

          });



          var index = $(this).attr("index");
@@ -142,6 +164,9 @@ function register_row_events(elem){ 
              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'});



}