scrolling + dragging the list

12ea2a07 · Oleg Dzhimiev · 6e8ea621 · 12ea2a07 · 12ea2a07 · 12ea2a07
Commit 12ea2a07 authored Jul 13, 2017 by Oleg Dzhimiev
Show whitespace changes
Inline Side-by-side

Showing with 99 additions and 31 deletions

index.html index.html +1 -5

index.css js/index.css +25 -6

index.js js/index.js +73 -20

No files found.
--- a/index.html
+++ b/index.html
@@ -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>

--- a/js/index.css
+++ b/js/index.css

 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
--- a/js/index.js
+++ b/js/index.js
@@ -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'});
+
+}