[Top][All Lists]
[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[linterna-magica-commit] [370] Added progress bar for the time and volum
From: |
Ivaylo Valkov |
Subject: |
[linterna-magica-commit] [370] Added progress bar for the time and volume sliders as part of the |
Date: |
Sat, 29 Dec 2012 15:39:06 +0000 |
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");
}
}
[Prev in Thread] |
Current Thread |
[Next in Thread] |
- [linterna-magica-commit] [370] Added progress bar for the time and volume sliders as part of the,
Ivaylo Valkov <=