[linterna-magica-commit] [370] Added progress bar for the time and volume sliders as part of the

[Ivaylo Valkov]

Revision: 370
          
http://svn.sv.gnu.org/viewvc/?view=rev&root=linterna-magica&revision=370
Author:   valkov
Date:     2012-12-29 15:39:05 +0000 (Sat, 29 Dec 2012)
Log Message:
-----------
Added progress bar for the time and volume sliders as part of the
interface changes for 0.0.13. 

Removed volume slider text (deprecated).

#future_release_0.0.13

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

Modified: trunk/data/style/template.css
===================================================================
--- trunk/data/style/template.css       2012-12-29 09:10:37 UTC (rev 369)
+++ trunk/data/style/template.css       2012-12-29 15:39:05 UTC (rev 370)
@@ -402,10 +402,6 @@
     line-height: 10px !important;
 }
 
-.linterna-magica-controls-volume-slider-text {
-    display: none !important;
-}
-
 .linterna-magica-controls-time-slider-text {
     top: 6px !important;
     color: #ffffff !important;
@@ -777,6 +773,15 @@
     height: 22px !important;
 }
 
+.linterna-magica-controls-horizontal-slider-progress-bar {
+    background-color: #e84ead !important;
+    /* Initial value must be zero */
+    width: 0 !important;
+    height: 8px !important;
+    position:relative !important;
+    display: block !important;
+}
+
 .linterna-magica-lower {
     /* border: 1px solid red !important; */
 }

Modified: trunk/src/lm_constructors.js
===================================================================
--- trunk/src/lm_constructors.js        2012-12-29 09:10:37 UTC (rev 369)
+++ trunk/src/lm_constructors.js        2012-12-29 15:39:05 UTC (rev 370)
@@ -303,7 +303,6 @@
            return null;
        }
 
-       var text = knob.nextSibling;
        var slider = knob.parentNode;
        var vol = null;
 
@@ -347,8 +346,6 @@
 
            knob.style.setProperty("left", pos+"px", "important");
 
-           text.textContent = vol+"%";
-
            clearInterval(volume_interval);
        }
     }

Modified: trunk/src/lm_interface_player_web_buttons.js
===================================================================
--- trunk/src/lm_interface_player_web_buttons.js        2012-12-29 09:10:37 UTC 
(rev 369)
+++ trunk/src/lm_interface_player_web_buttons.js        2012-12-29 15:39:05 UTC 
(rev 370)
@@ -185,8 +185,7 @@
        controls.appendChild(mute);
 
        var volume_slider  = this.create_volume_slider(object_data);
-       var volume_text = volume_slider.getElementsByTagName("span")[0];
-
+ 
        var volume_slider_scroll_function = function(ev)
        {
            var el = this;
@@ -524,6 +523,14 @@
     {
        time_knob_move = "left";
     }
+ 
+    var progress_bar = document.createElement("div");
+    progress_bar.setAttribute("title", this._("Time"));
+    progress_bar.setAttribute("class", "linterna-magica-controls-horizontal-"+
+                          "slider-progress-bar");
+    progress_bar.setAttribute("id", "linterna-magica-controls-"+
+                          "time-slider-progress-bar-"+lm_id);
+ 
 
     var time_knob = document.createElement("a");
     time_knob.setAttribute("title", this._("Time"));
@@ -537,6 +544,8 @@
 
     time_slider.appendChild(time_knob);
 
+    time_slider_outer.appendChild(progress_bar);
+
     time_slider_outer.appendChild(time_slider);
 
     return time_slider_outer;
@@ -571,9 +580,15 @@
     var self = this;
 
     // Linterna Magica object id
-    var id = element.getAttribute("id").
-       replace(/linterna-magica-controls-time-slider-outer-frame-/,"");
+    var raw_id = element.getAttribute("id");
+    var id = raw_id.split('-');
+    id = id[id.length-1];
 
+    if (!id)
+    {
+       return;
+    }
+
     // Stop the time ticker
     clearInterval(this.player_timers[id]);
     delete this.player_timers[id];
@@ -624,6 +639,13 @@
     volume_slider.setAttribute("title", this._("Volume control"));
 
 
+    var progress_bar = document.createElement("div");
+    progress_bar.setAttribute("title", this._("Volume"));
+    progress_bar.setAttribute("class", "linterna-magica-controls-horizontal-"+
+                          "slider-progress-bar");
+    progress_bar.setAttribute("id", "linterna-magica-controls-"+
+                          "volume-slider-progress-bar-"+lm_id);
+ 
     var volume_knob_move = null;
 
     var doc_dir = this.get_document_direction();
@@ -649,16 +671,7 @@
 
     volume_slider.appendChild(volume_knob);
 
-    var volume_text = document.createElement("span");
-    volume_text.setAttribute("class",
-                            "linterna-magica-controls-slider-text "+
-                           " linterna-magica-controls-volume-slider-text");
-    volume_text.setAttribute("id", "linterna-magica-controls-"+
-                            "volume-slider-text-"+lm_id);
-
-    volume_text.textContent = "--";
-    volume_slider.appendChild(volume_text);
-
+    volume_slider_outer.appendChild(progress_bar);
     volume_slider_outer.appendChild(volume_slider);
 
     return volume_slider_outer;
@@ -678,12 +691,6 @@
     var pos = self.slider_control.apply(self, [event]);
 
     this.player.set_volume.apply(self, [id, pos.val]);
-
-    var volume_text =
-       document.getElementById("linterna-magica-controls-"+
-                               "volume-slider-text-"+id);
-
-    volume_text.textContent = pos.val;
 }
 
 // The function executed on DOM click event for the volume slider
@@ -700,11 +707,6 @@
     var pos = self.slider_control.apply(self, [event]);
 
     this.player.set_volume.apply(self, [id, pos.val]);
-
-    var volume_text =
-       document.getElementById("linterna-magica-controls-"+
-                               "volume-slider-text-"+id);
-    volume_text.textContent = pos.val;
 }
 
 // Create mute button
@@ -773,9 +775,9 @@
        document.getElementById("linterna-magica-controls-"+
                            "volume-slider-knob-"+id);
 
-    var volume_text =
-       document.getElementById("linterna-magica-controls-"+
-                           "volume-slider-text-"+id);
+    var volume_progress =
+       document.getElementById("linterna-magica-controls-"+
+                               "volume-slider-progress-bar-"+id);
 
     if (/M/i.test(mute.textContent))
     {
@@ -790,11 +792,6 @@
                          "buttons-unmute");
 
        // TRANSLATORS: This is showed as tooltip when the mouse
-       // cursor is above the text in volume slider and the sound is
-       // muted.
-       volume_text.setAttribute("title", this._("Muted"));
-
-       // TRANSLATORS: This is showed as tooltip when the mouse
        // cursor is above the volume slider and the sound is muted.
        volume_slider.setAttribute("title",this._("Muted"));
 
@@ -802,7 +799,6 @@
        // cursor is above the volume slider knob and the sound is
        // muted.
        volume_knob.setAttribute("title",this._("Muted"));
-       volume_text.textContent = "0%";
 
        mute.lm_volume_knob_direction = 
            volume_knob.style.getPropertyValue('left') ? "left" : "right";
@@ -813,6 +809,7 @@
 
        volume_knob.style.setProperty(mute.lm_volume_knob_direction,
                                      "0px", "important");
+       volume_progress.style.setProperty("width", "0px", "important");
     }
     else
     {
@@ -822,9 +819,6 @@
        mute.setAttribute("title", this._("Mute"));
        mute.textContent = "M";
 
-       volume_text.textContent = volume;
-
-       volume_text.removeAttribute("title");
        mute.setAttribute("class", "linterna-magica-controls-buttons "+
                          "linterna-magica-controls-buttons-mute");
 
@@ -841,6 +835,11 @@
        volume_knob.style.setProperty(mute.lm_volume_knob_direction,
                                      mute.lm_volume_knob_position,
                                      "important");
+       volume_progress.style.setProperty("width", 
+                                         (mute.lm_volume_knob_position ? 
+                                          
parseInt(mute.lm_volume_knob_position)+3 :
+                                          0)+"px",
+                                         "important");
     }
 }
 

Modified: trunk/src/lm_player_button_functions.js
===================================================================
--- trunk/src/lm_player_button_functions.js     2012-12-29 09:10:37 UTC (rev 
369)
+++ trunk/src/lm_player_button_functions.js     2012-12-29 15:39:05 UTC (rev 
370)
@@ -661,6 +661,7 @@
 {
     var knob  = null;
     var slider = null;
+    var progress = null;
 
     // find the konb and the slider
     if (event.target.nodeType == 3)
@@ -693,6 +694,9 @@
        slider = event.target;
     }
 
+    progress = slider.previousSibling;
+
+
     if (!knob)
     {
        return null;
@@ -826,6 +830,11 @@
                           position +"px",
                           "important");
 
+    progress.style.setProperty("width",
+                          (position ? 
+                           position+3:0) +"px",
+                          "important");
+
     var percent = (parseInt((
        position/(slider.clientWidth-knob.clientWidth))*100));
 
@@ -884,7 +893,11 @@
     }
 
 
-    // Move the knob while playing
+    // Move the knob and the progress bar while playing
+    var progress_bar  = document.
+       getElementById("linterna-magica-controls-time-"+
+                      "slider-progress-bar-"+id);
+
     var knob  = document.
        getElementById("linterna-magica-controls-time-slider-knob-"+id);
 
@@ -914,5 +927,9 @@
        knob.style.setProperty(move,
                               pos+"px",
                               "important");
+
+       progress_bar.style.setProperty("width",
+                                      (pos+3)+"px",
+                              "important");
     }
 }