Moved zoomer files to ui-scripts.

Author: hzr

src/client-en.xml

@@ -203,6 +203,7 @@ window.load_screen_timeout = window.setTimeout(function()
 <link rel="stylesheet" href="./screenshot/style.css"/>
 <link rel="stylesheet" href="./profiler/profiler_style.css"/>
 <link rel="stylesheet" href="./ui-scripts/tooltip/tooltip.css"/>
+<link rel="stylesheet" href="./ui-scripts/zoomer/zoomer.css"/>
 
 
 <!-- This will turn off including of the UI strings if the exclude_uistrings var is set -->
@@ -213,7 +214,6 @@ window.load_screen_timeout = window.setTimeout(function()
 <!-- command concat_js "./script/dragonfly.js" -->
 
 <script src="./scripts/ini.js"/>
-<script src="./lib/zoomer.js"/>
 <script src="./lib/elementprototype.js"/>
 <script src="./lib/arrayprototype.js"/>
 <script src="./lib/canvasrenderingcontext2dprototype.js"/>
@@ -328,6 +328,7 @@ window.load_screen_timeout = window.setTimeout(function()
 <script src="./ui-scripts/contextmenu.js"/>
 <script src="./ui-scripts/sidepanels/view.js"/>
 <script src="./ui-scripts/sidepanels/templates.js"/>
+<script src="./ui-scripts/zoomer/zoomer.js"/>
 
 <script src="./ui-scripts/fontselection/monospacefontselection.js"/>
 <script src="./ui-scripts/fontselection/templates.js"/>

src/profiler/profiler_style.css

@@ -331,59 +331,3 @@
   color: #333;
 }
 
-
-
-
-
-
-.zoomer-element.overlay-size-change,
-.zoomer-element.overlay-size-change .zoomer-overlay,
-.zoomer-element.overlay-size-change .zoomer-overlay-handle
-{
-    cursor: ew-resize;
-}
-
-.zoomer-element.overlay-drag,
-.zoomer-element.overlay-drag .zoomer-overlay,
-.zoomer-element.overlay-drag .zoomer-overlay-handle
-{
-    cursor: move;
-}
-
-.zoomer-overlay
-{
-    position: absolute;
-    background-color: rgba(197, 218, 241, .5);
-    cursor: move;
-    display: none;
-}
-
-.zoomer-overlay-handle
-{
-    position: absolute;
-    top: 0;
-    width: 1px;
-    height: 100%;
-    background-color: #C5DAF1;
-    cursor: ew-resize;
-}
-
-/* Make bigger handle areas for easier grabbing */
-.zoomer-overlay-handle::before
-{
-    content: "";
-    display: block;
-    height: 100%;
-    width: 5px;
-    margin-left: -2px;
-}
-
-.zoomer-overlay-handle-left
-{
-    left: 0;
-}
-
-.zoomer-overlay-handle-right
-{
-    right: 0;
-}

src/ui-scripts/zoomer/zoomer.css

@@ -0,0 +1,52 @@
+.overlay-size-change,
+.overlay-size-change .zoomer-overlay,
+.overlay-size-change .zoomer-overlay-handle
+{
+    cursor: ew-resize;
+}
+
+.overlay-drag,
+.overlay-drag .zoomer-overlay,
+.overlay-drag .zoomer-overlay-handle
+{
+    cursor: move;
+}
+
+.zoomer-overlay
+{
+    position: absolute;
+    background-color: rgba(197, 218, 241, .5);
+    cursor: move;
+    display: none;
+}
+
+.zoomer-overlay-handle
+{
+    position: absolute;
+    top: 0;
+    width: 1px;
+    height: 100%;
+    background-color: #C5DAF1;
+    cursor: ew-resize;
+}
+
+/* Make bigger handle areas for easier grabbing */
+.zoomer-overlay-handle::before
+{
+    content: "";
+    display: block;
+    height: 100%;
+    width: 5px;
+    margin-left: -2px;
+}
+
+.zoomer-overlay-handle-left
+{
+    left: 0;
+}
+
+.zoomer-overlay-handle-right
+{
+    right: 0;
+}
+

src/lib/zoomer.js renamed to src/ui-scripts/zoomer/zoomer.js

@@ -86,7 +86,7 @@ var ZoomerPrototype = function()
   this._set_up_overlay_ele = function()
   {
     this._overlay_ele = document.createElement("div");
-    this._overlay_ele.classList.add("zoomer-overlay");
+    this._overlay_ele.className = "zoomer-overlay";
     this._overlay_handle_left_ele = document.createElement("div");
     this._overlay_handle_right_ele = document.createElement("div");
     this._overlay_handle_left_ele.className = "zoomer-overlay-handle zoomer-overlay-handle-left";
@@ -132,7 +132,7 @@ var ZoomerPrototype = function()
 
   this.zoomer_ele_onmousemove = function(event)
   {
-    this._zoomer_ele.classList.add("overlay-size-change");
+    document.documentElement.classList.add("overlay-size-change");
     var mouse_x = event.clientX - this._zoomer_ele_left;
     var diff = mouse_x - this._overlay_start_left;
     if (diff < 0)
@@ -164,7 +164,7 @@ var ZoomerPrototype = function()
 
   this.zoomer_ele_onmouseup = function(event)
   {
-    this._zoomer_ele.classList.remove("overlay-size-change");
+    document.documentElement.classList.remove("overlay-size-change");
     document.removeEventListener("mousemove",
       this._zoomer_ele_onmousemove_bound);
     document.removeEventListener("mouseup",
@@ -213,7 +213,7 @@ var ZoomerPrototype = function()
   {
     if (event.which != 1)
       return;
-    this._zoomer_ele.classList.add("overlay-drag");
+    document.documentElement.classList.add("overlay-drag");
     document.addEventListener("mousemove",
       this._overlay_ele_onmousemove_bound);
     document.addEventListener("mouseup",
@@ -269,7 +269,7 @@ var ZoomerPrototype = function()
 
   this.overlay_ele_onmouseup = function(event)
   {
-    this._zoomer_ele.classList.remove("overlay-drag");
+    document.documentElement.classList.remove("overlay-drag");
     document.removeEventListener("mousemove",
       this._overlay_ele_onmousemove_bound);
     document.removeEventListener("mouseup",
@@ -286,7 +286,7 @@ var ZoomerPrototype = function()
   {
     if (event.which != 1)
       return;
-    this._zoomer_ele.classList.add("overlay-size-change");
+    document.documentElement.classList.add("overlay-size-change");
     document.addEventListener("mousemove",
       this._overlay_handle_ele_onmousemove_bound);
     document.addEventListener("mouseup",
@@ -365,7 +365,7 @@ var ZoomerPrototype = function()
 
   this.overlay_handle_ele_onmouseup = function(event)
   {
-    this._zoomer_ele.classList.remove("overlay-size-change");
+    document.documentElement.classList.remove("overlay-size-change");
     document.removeEventListener("mousemove",
       this._overlay_handle_ele_onmousemove_bound);
     document.removeEventListener("mouseup",
@@ -387,7 +387,7 @@ var ZoomerPrototype = function()
       var time_since_last_update = now - this._last_update;
       if (time_since_last_update > UPDATE_THRESHOLD)
       {
-        var ms_unit = this._model_duration / this._model_ele_width;
+        var ms_unit = this._model.get_duration() / this._model.get_model_element_width();
         var x0 = this._overlay_left * ms_unit;
         var x1 = this._to_right_x(this._overlay_right) * ms_unit;
         this._model.set_area(x0, x1);
@@ -397,7 +397,7 @@ var ZoomerPrototype = function()
       // Set a timeout to set the area. This makes sure that the last update
       // always happens, even if it was within the UPDATE_THRESHOLD.
       this._update_timeout = window.setTimeout(function() {
-        var ms_unit = this._model_duration / this._model_ele_width;
+        var ms_unit = this._model.get_duration() / this._model.get_model_element_width();
         var x0 = this._overlay_left * ms_unit;
         var x1 = this._to_right_x(this._overlay_right) * ms_unit;
         this._model.set_area(x0, x1);
@@ -409,7 +409,7 @@ var ZoomerPrototype = function()
       // Set a timeout to set the area. This makes sure that the last update
       // always happens, even if it was within the UPDATE_THRESHOLD.
       this._update_timeout = window.setTimeout(function() {
-        var ms_unit = this._model_duration / this._model_ele_width;
+        var ms_unit = this._model.get_duration() / this._model.get_model_element_width();
         var x0 = this._overlay_left * ms_unit;
         var x1 = this._to_right_x(this._overlay_right) * ms_unit;
         this._model.set_area(x0, x1);
@@ -437,7 +437,7 @@ var ZoomerPrototype = function()
    */
   this.set_current_area = function()
   {
-    var ms_unit = this._zoomer_ele_width / this._model_duration;
+    var ms_unit = this._model.get_model_element_width() / this._model.get_duration();
     var area = this._model.get_current_area();
     this._overlay_left = Math.floor(area.x0 * ms_unit);
     this._overlay_right = this._to_right_x(Math.floor(area.x1 * ms_unit));
@@ -477,21 +477,23 @@ var ZoomerPrototype = function()
       this._overlay_ele.style.right = right_pos + "px";
   };
 
-  this.set_zoomer_ele = function(ele)
+  /**
+   * Sets the zoomer element.
+   */
+  this.set_zoomer_element = function(ele)
   {
     this._zoomer_ele = ele;
     this._set_up_zoomer_ele();
     this._set_up_overlay_ele();
   };
 
-  this.set_model_ele_width = function(width)
-  {
-    this._model_ele_width = width;
-  };
-
-  this.set_model_duration = function(duration)
+  /**
+   * Re-adds the overlay element in case it has been overwritten by other
+   * content in the zoomer element.
+   */
+  this.attach_overlay_element = function()
   {
-    this._model_duration = duration;
+    this._zoomer_ele.appendChild(this._overlay_ele);
   };
 };