[linterna-magica-commit] [349] Added an additional frame around the time and volume sliders as part

[Ivaylo Valkov]

Revision: 349
          
http://svn.sv.gnu.org/viewvc/?view=rev&root=linterna-magica&revision=349
Author:   valkov
Date:     2012-12-21 11:47:15 +0000 (Fri, 21 Dec 2012)
Log Message:
-----------
Added an additional frame around the time and volume sliders as part
of the interface changes in tasks #12203.

Ticket Links:
------------
    http://savannah.gnu.org/task/?12203

Modified Paths:
--------------
    trunk/data/style/template.css
    trunk/src/lm_interface_player_web_buttons.js

Modified: trunk/data/style/template.css
===================================================================
--- trunk/data/style/template.css       2012-12-21 09:07:08 UTC (rev 348)
+++ trunk/data/style/template.css       2012-12-21 11:47:15 UTC (rev 349)
@@ -729,3 +729,14 @@
 }
 
 
+.linterna-magica-controls-time-slider-outer-frame {
+    height: 22px !important;
+}
+
+.linterna-magica-controls-volume-slider-outer-frame {
+    display: block !important;
+    position: relative !important;
+    float: left !important;
+    width: 80px !important;
+    height: 22px !important;
+}

Modified: trunk/src/lm_interface_player_web_buttons.js
===================================================================
--- trunk/src/lm_interface_player_web_buttons.js        2012-12-21 09:07:08 UTC 
(rev 348)
+++ trunk/src/lm_interface_player_web_buttons.js        2012-12-21 11:47:15 UTC 
(rev 349)
@@ -553,6 +553,14 @@
     var lm_id = object_data.linterna_magica_id;
     var self = this;
 
+    var time_slider_outer = document.createElement("div");
+    time_slider_outer.setAttribute("title", this._("Time"));
+
+    time_slider_outer.setAttribute("class",
+                            
"linterna-magica-controls-time-slider-outer-frame");
+    time_slider_outer.setAttribute("id",
+                            
"linterna-magica-controls-time-slider-outer-frame-"+lm_id);
+
     var time_slider = document.createElement("div");
 
     time_slider.setAttribute("title", this._("Time"));
@@ -588,7 +596,9 @@
 
     time_slider.appendChild(time_knob);
 
-    return time_slider;
+    time_slider_outer.appendChild(time_slider);
+
+    return time_slider_outer;
 }
 
 // The function executed on DOM scroll event for the time slider
@@ -599,7 +609,7 @@
 
     // Linterna Magica object id
     var id = element.getAttribute("id").
-       replace(/linterna-magica-controls-time-slider-/,"");
+       replace(/linterna-magica-controls-time-slider-outer-frame-/,"");
 
     var pos = this.slider_control.apply(self, [event]);
     
@@ -621,7 +631,7 @@
 
     // Linterna Magica object id
     var id = element.getAttribute("id").
-       replace(/linterna-magica-controls-time-slider-/,"");
+       replace(/linterna-magica-controls-time-slider-outer-frame-/,"");
 
     // Stop the time ticker
     clearInterval(this.player_timers[id]);
@@ -652,6 +662,17 @@
     var lm_id = object_data.linterna_magica_id;
     var self = this;
 
+    var volume_slider_outer = document.createElement("div");
+
+    volume_slider_outer.setAttribute("class", 
"linterna-magica-controls-volume-"+
+                                    "slider-outer-frame");
+    volume_slider_outer.setAttribute("id", "linterna-magica-controls-"+
+                              "volume-slider-outer-frame-"+lm_id);
+    volume_slider_outer.setAttribute("title", this._("Volume control"));
+
+    volume_slider_outer.style.setProperty("display", "none", "important");
+
+
     var volume_slider = document.createElement("div");
 
     volume_slider.setAttribute("class",
@@ -661,7 +682,6 @@
                               "volume-slider-"+lm_id);
     volume_slider.setAttribute("title", this._("Volume control"));
 
-    volume_slider.style.setProperty("display", "none", "important");
 
     var volume_knob_move = null;
 
@@ -698,7 +718,9 @@
     volume_text.textContent = "--";
     volume_slider.appendChild(volume_text);
 
-    return volume_slider;
+    volume_slider_outer.appendChild(volume_slider);
+
+    return volume_slider_outer;
 }
 
 // The function executed on DOM scroll event for the volume slider
@@ -731,7 +753,7 @@
 
     // Linterna Magica object id
     var id = element.getAttribute("id").
-       replace(/linterna-magica-controls-volume-slider-/,"");
+       replace(/linterna-magica-controls-volume-slider-outer-frame-/,"");
     
     event.preventDefault();
     var pos = self.slider_control.apply(self, [event]);
@@ -772,7 +794,7 @@
     var id = element.getAttribute("id").
        replace(/linterna-magica-controls-button-mute-/,"");
 
-    var id_string = "linterna-magica-controls-volume-slider-"+id;
+    var id_string = "linterna-magica-controls-volume-slider-outer-frame-"+id;
 
     var volume_slider = 
        document.getElementById(id_string);
@@ -893,7 +915,7 @@
 
     var volume_slider = 
        document.getElementById("linterna-magica-controls-"+
-                               "volume-slider-"+id);
+                               "volume-slider-outer-frame-"+id);
 
     if (!volume_slider)
     {