first commit

helix/javascript/array_summary/zoom_control.js

@@ -0,0 +1,48 @@
+import $ from "jquery";
+
+class ZoomControl {
+  constructor(arrayVisualization) {
+    this.visualization = arrayVisualization;
+    this.zooms = [1, 2, 3, 4, 5, 6, 7];
+    this.zoomLevel = 0;
+  }
+
+  init(zoomSelector) {
+    let self = this;
+    zoomSelector.find("#increase_zoom").click(function () {
+      if (self.zoomLevel != (self.zooms.length - 1)) {
+        self.setZoom(self.zoomLevel + 1, zoomSelector);
+      }
+    });
+
+    zoomSelector.find("#decrease_zoom").click(function () {
+      if (self.zoomLevel != 0) {
+        self.setZoom(self.zoomLevel - 1, zoomSelector);
+      }
+    });
+
+    for (let i = 0; i < self.zooms.length; i++) {
+      zoomSelector.find("#zoom_indicator_" + i).click(function () {
+        self.setZoom(i, zoomSelector);
+      });
+    }
+
+    self.setZoom(0, zoomSelector);
+  }
+
+  setZoom(zoomLevel, zoomSelector) {
+    const oldZoom = this.zoomLevel;
+    const totalZooms = this.zooms.length;
+    this.zoomLevel = zoomLevel % totalZooms;
+
+    const zoom = this.zooms[this.zoomLevel];
+    const zoom_percentage = Math.round((100 / (totalZooms - 1)) * this.zoomLevel);
+    this.visualization.setZoom(zoom);
+
+    zoomSelector.find("#zoom_indicator_" + oldZoom).removeClass("zoom_active");
+    zoomSelector.find("#zoom_indicator_" + this.zoomLevel).addClass("zoom_active");
+    zoomSelector.find("#zoom_level").text(zoom_percentage + "%");
+  }
+}
+
+export default ZoomControl;