cleanup

js/canvas.js

@@ -49,9 +49,6 @@ function Canvas() {
         .on("zoomend", zoomend)
         .on("zoomstart", zoomstart);
 
-  // d3.select("body")
-  //     .on("keydown", keydown);
-
     var canvas;
     var config;
     var container;
@@ -60,7 +57,6 @@ function Canvas() {
     var data;
     var rangeBand = 0;
     var rangeBandImage = 0;
-  // var imageSize = 50;
     var imageSize = 256;
     var imageSize2 = 1024;
     var imageSize3 = 4000;
@@ -73,6 +69,7 @@ function Canvas() {
     var selectedImage = null;
 
     var drag = false;
+    var sleep = false
 
     var stagePadding = 40;
     var imgPadding;
@@ -102,7 +99,7 @@ function Canvas() {
     var detailContainer = d3.select(".sidebar")
     var timelineData;
     var stage, stage1, stage2, stage3, stage4, stage5;
-
+    var timelineHover = false;
 
     function canvas() {}
 
@@ -116,13 +113,10 @@ function Canvas() {
 
     canvas.resize = function() {
         if (!state.init) return;
-      // console.log("resize")
         width = window.innerWidth - margin.left - margin.right;
         height = window.innerHeight < minHeight ? minHeight : window.innerHeight;
         widthOuter = window.innerWidth;
-
         renderer.resize(width + margin.left + margin.right, height);
-
         canvas.makeScales();
         canvas.project();
     }
@@ -163,7 +157,6 @@ function Canvas() {
         container = d3.select(".page").append("div").classed("viz", true);
         detailVue._data.structure = config.detail.structure
 
-
         collumns = config.projection.columns;
         imageSize = config.loader.textures.medium.size;
         imageSize2 = config.loader.textures.detail.size;
@@ -195,7 +188,6 @@ function Canvas() {
         stage2.addChild(stage4);
         stage2.addChild(stage5);
 
-      // timeline cleaning
         _timeline.forEach(function(d) {
             d.type = "timeline";
         });
@@ -204,7 +196,6 @@ function Canvas() {
             .key(function(d) { return d.year; })
             .entries(_data.concat(_timeline))
             .sort(function(a, b) { return a.key - b.key; })
-        // .sort(function(a, b) { return d3.descending(a.key, b.key) })
             .map(function(d) { return d.key; })
 
         timeDomain = canvasDomain.map(function(d) {
@@ -264,7 +255,6 @@ function Canvas() {
                 if (timelineHover) return;
                 // console.log(selectedImage)
 
-
                 if (Math.abs(zoomedToImageScale - scale) < 0.1) {
                     canvas.resetZoom();
                 } else {
@@ -276,7 +266,6 @@ function Canvas() {
         canvas.project();
         animate();
 
-
         // selectedImage = data.find(d => d.id == 88413)
         // showDetail(selectedImage)
         state.init = true;
@@ -297,7 +286,6 @@ function Canvas() {
         selectedImageDistance = best.d;
 
         if (bottomZooming && best.p && best.p.ii < 3 && selectedImageDistance > 7) {
-        // console.log("bottom");
             selectedImage = null;
             zoom.center(null);
             container.style("cursor", "default");
@@ -307,7 +295,6 @@ function Canvas() {
                 // todo iprove that bitch
                 var center = [((d.x + imgPadding) * scale) + translate[0], (height + d.y + imgPadding) * scale + translate[1]];
                 zoom.center(center);
-
                 selectedImage = d;
             }
 
@@ -325,7 +312,6 @@ function Canvas() {
             .key(function(d) {
                 return d.year;
             })
-          // .sortKeys(d3.ascending)
             .entries(data)
 
         years.forEach(function(year) {
@@ -334,7 +320,6 @@ function Canvas() {
             year.values.sort(function(a, b) {
                 return b.keywords.length - a.keywords.length;
             })
-          //console.log(year.values)
 
             year.values.forEach(function(d, i) {
                 var row = (Math.floor(i / collumns) + 2);
@@ -368,8 +353,6 @@ function Canvas() {
     function toScreenPoint(p) {
         var p2 = [0, 0];
 
-      // console.log("t",translate,scale)
-
         p2[0] = p[0] / scale - translate[0] / scale;
         p2[1] = (p[1] / scale - height) - translate[1] / scale;
 
@@ -415,7 +398,7 @@ function Canvas() {
         return sleep
     }
 
-  var sleep = false
+    
     canvas.wakeup = function() { sleep = false }
 
     function animate(time) {
@@ -440,25 +423,15 @@ function Canvas() {
     }
 
     function zoomToImage(d, duration) {
-
-      // console.log("detail", d)
-
         state.zoomingToImage = true;
-
         zoom.center(null);
-
         loadMiddleImage(d);
-
         d3.select(".tagcloud").classed("hide", true);
-
         var padding = x.rangeBand() / collumns / 2;
         var sidbar = width / 8;
-      // var padding = 0;
         var scale = 0.8 / (x.rangeBand() / collumns / width);
         var translateNow = [(-scale * (d.x - padding / 2)) - sidbar, -scale * (height + d.y)];
 
-      //console.log(scale, translateNow);
-
         zoomedToImageScale = scale;
 
         setTimeout(function() {
@@ -470,16 +443,11 @@ function Canvas() {
             .transition().duration(duration)
             .call(zoom.scale(scale).translate(translateNow).event)
             .each("end", function() {
-
                 zoomedToImage = true;
                 selectedImage = d;
-
                 hideTheRest(d);
-
                 showDetail(d);
-
                 loadBigImage(d, "click");
-
                 state.zoomingToImage = false;
             })
     }
@@ -521,11 +489,8 @@ function Canvas() {
 
 
     function hideTheRest(d) {
-      // c("hide", d.id)
         data.forEach(function(d2) {
             if (d2.id !== d.id) {
-              // d2.sprite.alpha = 0;
-              // d2.sprite.visible = false;
                 d2.alpha = 0;
                 d2.alpha2 = 0;
 
@@ -536,38 +501,19 @@ function Canvas() {
     function showAllImages() {
         data.forEach(function(d) {
             d.alpha = d.active ? 1 : 0.2;;
-          //d.visible = d.active;
             d.alpha2 = d.visible ? 1 : 0;
-          //d.sprite.visible = true;  
-
         })
     }
 
-
-  var timelineHover = false;
-
-
     function zoomed() {
-
         translate = d3.event.translate;
         scale = d3.event.scale;
         if (!startTranslate) startTranslate = translate
         drag = startTranslate && translate !== startTranslate;
         // check borders
-
         var x1 = -1 * translate[0] / scale;
         var x2 = (x1 + (widthOuter / scale));
 
-      var y1 = (translate[1] + height * scale);
-
-      var e1 = -extent[1] - bottomPadding;
-      var y2 = (e1 - height) * scale + height;
-
-      var e2 = extent[0] - bottomPadding;
-      var y3 = (e2 + height) * -scale;
-
-      // console.log(translate[1],e2, y3);
-
         if (d3.event.sourceEvent != null) {
             if (x1 < 0) {
                 translate[0] = 0;
@@ -575,10 +521,6 @@ function Canvas() {
                 translate[0] = ((widthOuter * scale) - widthOuter) * -1;
             }
 
-          if (translate[1] < y2) {
-              // translate[1] = y2;
-          }
-
             zoom.translate([translate[0], translate[1]]);
 
             x1 = -1 * translate[0] / scale;
@@ -637,7 +579,6 @@ function Canvas() {
         filterVisible();
 
         if (zoomedToImage && !selectedImage.big && state.lastZoomed != selectedImage.id && !state.zoomingToImage) {
-          //c("loadbig after zoom")
             loadBigImage(selectedImage, "zoom");
         }
     }
@@ -661,16 +602,12 @@ function Canvas() {
         extent = d3.extent(data, function(d) { return d.y; });
 
         var y = -extent[1] - bottomPadding;
-      // console.log(extent, y)
         y = (extent[1] / -3) - bottomPadding
-      // y =  - bottomPadding
-      //bottomZooming = (y<-30 && y>-40);      
 
         vizContainer
             .call(zoom.translate(translate).event)
             .transition().duration(duration)
             .call(zoom.translate([0, y]).scale(1).event)
-          //.each("end", canvas.split)
     }
 
     canvas.split = function() {
@@ -678,22 +615,15 @@ function Canvas() {
             return d.active;
         })
         stackLayout(active, false);
-
         var inactive = data.filter(function(d) {
             return !d.active;
         })
         stackLayout(inactive, true);
-
-      // console.time("Quadtree")
         quadtree = Quadtree(data);
-      // console.timeEnd("Quadtree");
- 
     }
 
     function filterVisible() {
-
         var zoomScale = scale;
-
         if (zoomedToImage) return;
 
         data.forEach(function(d, i) {
@@ -702,24 +632,16 @@ function Canvas() {
             var y = ((p.y / scale1) + (translate[1]) / zoomScale);
             var padding = 5;
 
-          // c(x,y,p, translate, zoomScale, scale, height/zoomScale, y+height)
-
             if (x > (-padding) && x < ((width / zoomScale) + padding) && y + height < (height / zoomScale + padding) && y > (height * -1) - padding) {
-              //d.sprite.alpha = 1;
                 d.visible = true;
-              // d.alpha = 1;
             } else {
-              //d.sprite.alpha = 0.5;
                 d.visible = false;
-              // d.alpha = 0;
             }
         });
 
         var visible = data.filter(function(d) {
             return d.visible;
         });
-      //c(visible.length);
-
 
         if (visible.length < 40) {
             data.forEach(function(d) {
@@ -730,11 +652,8 @@ function Canvas() {
         } else {
             data.forEach(function(d) {
                 d.alpha2 = 0;
-              //if(d.sprite2) d.sprite2.visible = false;
             })
         }
-
-
     }
 
     function loadMiddleImage(d) {
@@ -762,13 +681,9 @@ function Canvas() {
         sprite.position.x = d.x * scale2 + imageSize2 / 2;
         sprite.position.y = d.y * scale2 + imageSize2 / 2;
         sprite._data = d;
-
         stage4.addChild(sprite);
-
         d.sprite2 = sprite;
         d.alpha2 = d.highlight;
-   
-
         d.loaded = true;
         sleep = false
     }
@@ -809,7 +724,6 @@ function Canvas() {
                 var pos = s.data.getLocalPosition(s.currentTarget)
                 var dir = pos.x > 0 ? 1 : -1
                 var page = d.page + dir
-          // var nextPage = Math.min(Math.max(page, 0), d.imagenum-1)
                 var nextPage = page
                 if (page > d.imagenum - 1) nextPage = 0
                 if (page < 0) nextPage = d.imagenum - 1
@@ -825,9 +739,6 @@ function Canvas() {
         sprite.position.y = d.y * scale3 + imageSize3 / 2;
         sprite._data = d;
         d.big = true;
-
-      // console.log(sprite, "done")
-
         stage5.addChild(sprite);
         sleep = false
     }
@@ -852,26 +763,6 @@ function Canvas() {
         }
     }
 
-
-  // function translateUpDown(dir) {
-
-  //     var translateNow = [translate[0], translate[1] + dir * 10 * scale];
-
-  //     svg
-  //         .call(zoom.translate(translate).event)
-  //         .transition().duration(1000)
-  //         .call(zoom.translate(translateNow).event)
-  // }
-
-  // function getSiblingImage(active, dir) {
-  //     if (!active) return;
-
-  //     return data.filter(function(d) {
-  //         return (d.order == active.order + dir && d.year == active.year);
-  //     })[0];
-
-  // }
-
     function nearest(x, y, best, node) {
         // mike bostock https://bl.ocks.org/mbostock/4343214
         var x1 = node.x1,

js/viz.js

-
 //                            ,--.                                     
 //                ,---,   ,--/  /|               .--.--.               
 //        ,---.,`--.' |,---,': / '         ,--, /  /    '.             
@@ -99,8 +98,6 @@ function init() {
 						tags.reset();
 						canvas.split();
 				})
-}
-
 
 		d3.select(".slidebutton")
 				.on("click", function() {
@@ -113,6 +110,6 @@ d3.select(".infobutton")
 						var s = !d3.select(".infobar").classed("sneak");
 						d3.select(".infobar").classed("sneak", s)
 				})
-
+}
 
 d3.select(".browserInfo").classed("show", utils.isMobile());
\ No newline at end of file