354 lines
11 KiB
JavaScript
354 lines
11 KiB
JavaScript
// JavaScript Document
|
|
(function ($) {
|
|
var isAction = true;
|
|
var width = 0;
|
|
var thewidth = 0;
|
|
var CurrTime = 0;
|
|
var t;
|
|
var addHour = 0,
|
|
addMinute = 0,
|
|
addSecond = 0,
|
|
TheHour = 0,
|
|
TheMinute = 0,
|
|
TheSecond = 0;
|
|
var flag = 0;
|
|
var alltime = 0;
|
|
var addwidth = 0;
|
|
var offsetW = 0;
|
|
var times = 0;
|
|
var rwidth = 0;
|
|
var valueChanged = false;
|
|
|
|
jQuery.playBar = {
|
|
addBar: function (DOM, allTime) {
|
|
CleanAll();
|
|
alltime = allTime;
|
|
DOM.empty();
|
|
DOM.append("<div class='BarControl'><div class='BarBeginTime'>00:00</div></div>");
|
|
$(".BarControl").append('<div class="TheBar"><div class="TimeBall"></div><div class="TheColorBar"></div><div class="TheWhiteBar"></div></div><div class="BarFinishTime">10:35</div><div id="btnPlay" class="BarPlay"></div><div id="btnPlayEnd" class="BarPlayEnd">');
|
|
width = $('.TheBar').width();
|
|
times = allTime / 1000;
|
|
rwidth = width - 8;
|
|
addwidth = (width - 10) / times;
|
|
var t = TransitionTime(allTime);
|
|
$('.BarFinishTime').html(t.StringTime);
|
|
|
|
$('#btnPlay').click(function () {
|
|
if ($.playBar.onPlayClick)
|
|
$.playBar.onPlayClick(false);
|
|
}).attr("title", GetTextByKey("P_MV_PLAYBACK", "Playback"));
|
|
$('#btnPlayEnd').click(function () {
|
|
if ($.playBar.onPlayClick)
|
|
$.playBar.onPlayClick(true);
|
|
}).attr("title", GetTextByKey("P_MV_QUICKLOADSKIPTOEND", "Quick Load/Skip to End"));
|
|
|
|
OpenBar();
|
|
},
|
|
restTime: function (allTime, valuechanged, jump) {
|
|
CleanAll();
|
|
StopBar();
|
|
alltime = allTime;
|
|
width = $('.TheBar').width();
|
|
times = allTime / 1000;
|
|
rwidth = width - 8;
|
|
addwidth = (width - 10) / times;
|
|
var t = TransitionTime(allTime);
|
|
$('.BarFinishTime').html(t.StringTime);
|
|
$('.TheColorBar').css("width", 0);
|
|
$('.TimeBall').css("left", 0);
|
|
|
|
if (valuechanged === undefined)
|
|
valueChanged = false;
|
|
else
|
|
valueChanged = valuechanged;
|
|
|
|
if (allTime > 0) {
|
|
if (jump) {
|
|
thewidth = rwidth;
|
|
timechange();
|
|
changeBar();
|
|
} else {
|
|
OpenBar();
|
|
}
|
|
}
|
|
},
|
|
Play: function () {
|
|
if (isAction)
|
|
jQuery.playBar.Stop();
|
|
else
|
|
jQuery.playBar.Begin();
|
|
},
|
|
PlayEnd: function () {
|
|
jQuery.playBar.restTime(alltime, true, true);
|
|
},
|
|
Stop: function () {
|
|
StopBar();
|
|
},
|
|
Clear: function () {
|
|
StopBar();
|
|
this.restTime(0);
|
|
$('#btnPlay').removeClass("BarPause");
|
|
$('#btnPlay').addClass("BarPlay");
|
|
},
|
|
Begin: function () {
|
|
if (CurrTime >= alltime) {
|
|
this.restTime(alltime, true);
|
|
}
|
|
else
|
|
OpenBar()
|
|
},
|
|
changeBarColor: function (COLOR) {
|
|
var color = typeof (COLOR) != "undefined" ? COLOR : '#3498DB';
|
|
$('.TheColorBar').css("background", color);
|
|
$('.TimeBall').css("background", color)
|
|
},
|
|
changeFontColor: function (COLOR) {
|
|
var color = typeof (COLOR) != "undefined" ? COLOR : '#3498DB';
|
|
$('.BarBeginTime,.BarFinishTime').css("color", color)
|
|
},
|
|
getAllTime: function () {
|
|
return alltime;
|
|
},
|
|
getTheTime: function () {
|
|
return CurrTime
|
|
},
|
|
onBarChanged: undefined,
|
|
onPlayClick: undefined
|
|
};
|
|
|
|
function CleanAll() {
|
|
isAction = true;
|
|
thewidth = 0;
|
|
CurrTime = 0;
|
|
addHour = 0;
|
|
addMinute = 0;
|
|
addSecond = 0;
|
|
TheHour = 0;
|
|
TheMinute = 0;
|
|
TheSecond = 0;
|
|
offsetW = 0;
|
|
thewidth = 0;
|
|
flag = 0
|
|
}
|
|
var down = false;
|
|
var BarMove = false;
|
|
var lastX = 0,
|
|
NewX = 0;
|
|
$(document).on("mousedown", '.TimeBall', function (event) {
|
|
lastX = event.clientX;
|
|
//event.preventDefault();
|
|
down = true;
|
|
BarMove = true;
|
|
if (isAction) {
|
|
StopBar()
|
|
}
|
|
|
|
$(document).mousemove(dragmove);
|
|
$(document).mouseup(dragup);
|
|
});
|
|
|
|
function dragmove(event) {
|
|
//event.preventDefault();
|
|
NewX = event.clientX;
|
|
if (BarMove) {
|
|
var mcs = NewX - lastX;
|
|
lastX = NewX;
|
|
if (mcs < 0) {
|
|
if (thewidth - (-mcs) > 0) {
|
|
thewidth = thewidth - (-mcs)
|
|
}
|
|
} else {
|
|
if (thewidth + mcs < rwidth) {
|
|
thewidth = thewidth + mcs
|
|
} else {
|
|
thewidth = rwidth
|
|
}
|
|
}
|
|
timechange();
|
|
$('.TheColorBar').css("width", thewidth + 1);
|
|
$('.TimeBall').css("left", thewidth)
|
|
}
|
|
}
|
|
|
|
function dragup() {
|
|
if (BarMove) {
|
|
BarMove = false;
|
|
down = false;
|
|
NewX = 0;
|
|
var xo = parseInt(CurrTime / 1000);
|
|
offsetW = thewidth - xo * addwidth;
|
|
if (isAction) {
|
|
OpenBar()
|
|
}
|
|
valueChanged = true;
|
|
}
|
|
|
|
$(document).unbind('mousemove', dragmove);
|
|
$(document).unbind('mouseup', dragup);
|
|
};
|
|
|
|
function timechange() {
|
|
CurrTime = parseInt(thewidth / rwidth * alltime);
|
|
var ltx = TransitionTime(CurrTime);
|
|
if (TheHour > 0) {
|
|
if (ltx.hHour) {
|
|
$('.BarBeginTime').html(ltx.StringTime)
|
|
} else {
|
|
$('.BarBeginTime').html("00:" + ltx.StringTime)
|
|
}
|
|
} else {
|
|
$('.BarBeginTime').html(ltx.StringTime)
|
|
}
|
|
addSecond = ltx.Tsec;
|
|
addMinute = ltx.Tmin;
|
|
addHour = ltx.Thour
|
|
}
|
|
|
|
function changeBar() {
|
|
var second, minute, hour;
|
|
thewidth = thewidth * 1 + addwidth - offsetW;
|
|
if (offsetW > 0) {
|
|
offsetW = 0
|
|
}
|
|
if (thewidth < rwidth && CurrTime < alltime) {
|
|
CurrTime = CurrTime + 1 * 1000;
|
|
addSecond = addSecond + 1;
|
|
if (addSecond > 59) {
|
|
addSecond = 0;
|
|
addMinute = addMinute + 1;
|
|
if (addMinute > 59) {
|
|
addMinute = 0;
|
|
addHour = addHour + 1
|
|
}
|
|
}
|
|
if (addSecond > 9) {
|
|
second = "" + addSecond
|
|
} else {
|
|
second = "0" + addSecond
|
|
} if (addMinute > 9) {
|
|
minute = "" + addMinute
|
|
} else {
|
|
minute = "0" + addMinute
|
|
} if (addHour > 9) {
|
|
hour = "" + addHour
|
|
} else {
|
|
hour = "0" + addHour
|
|
} if (addHour > 0) {
|
|
flag = 1
|
|
}
|
|
if (flag == 0) {
|
|
$('.BarBeginTime').html(minute + ":" + second)
|
|
} else {
|
|
$('.BarBeginTime').html(hour + ":" + minute + ":" + second)
|
|
}
|
|
} else {
|
|
thewidth = rwidth;
|
|
StopBar();
|
|
}
|
|
$('.TheColorBar').css("width", thewidth + 1);
|
|
$('.TimeBall').css("left", thewidth)
|
|
|
|
if ($.playBar.onBarChanged)
|
|
$.playBar.onBarChanged(CurrTime, valueChanged);
|
|
valueChanged = false;
|
|
}
|
|
|
|
function TransitionTime(str) {
|
|
var m = parseFloat(str) / 1000;
|
|
var time = "";
|
|
var second, minute, hour;
|
|
var haveHour = false;
|
|
var ch = 0,
|
|
csx = 0,
|
|
cm = 0;
|
|
if (m >= 60 && m < 60 * 60) {
|
|
if (parseInt(m / 60.0) < 10) {
|
|
minute = "0" + parseInt(m / 60.0)
|
|
} else {
|
|
minute = parseInt(m / 60.0)
|
|
}
|
|
var cs = parseInt(m - parseInt(m / 60.0) * 60);
|
|
if (cs < 10) {
|
|
second = "0" + cs
|
|
} else {
|
|
second = "" + cs
|
|
}
|
|
TheMinute = parseInt(m / 60.0);
|
|
TheSecond = cs;
|
|
cm = TheMinute;
|
|
TheHour = 0;
|
|
csx = cs;
|
|
time = minute + ":" + second;
|
|
$('.BarBeginTime').html("00:00")
|
|
} else if (m >= 60 * 60) {
|
|
flag = 1;
|
|
haveHour = true;
|
|
ch = parseInt(m / 3600.0);
|
|
cm = parseInt((parseFloat(m / 3600.0) - parseInt(m / 3600.0)) * 60);
|
|
csx = parseInt((parseFloat((parseFloat(m / 3600.0) - parseInt(m / 3600.0)) * 60) - parseInt((parseFloat(m / 3600.0) - parseInt(m / 3600.0)) * 60)) * 60);
|
|
if (ch < 10) {
|
|
hour = "0" + ch
|
|
} else {
|
|
hour = "" + ch
|
|
} if (cm < 10) {
|
|
minute = "0" + cm
|
|
} else {
|
|
minute = "" + cm
|
|
} if (csx < 10) {
|
|
second = "0" + csx
|
|
} else {
|
|
second = "" + csx
|
|
}
|
|
TheHour = ch;
|
|
TheMinute = cm;
|
|
TheSecond = csx;
|
|
time = hour + ":" + minute + ":" + second;
|
|
$('.BarBeginTime').html("00:00:00")
|
|
} else {
|
|
$('.BarBeginTime').html("00:00");
|
|
csx = parseInt(m);
|
|
if (parseInt(m) > 9) {
|
|
second = "" + parseInt(m)
|
|
} else {
|
|
second = "0" + parseInt(m)
|
|
}
|
|
TheMinute = 0;
|
|
TheSecond = parseInt(m);
|
|
TheHour = 0;
|
|
time = "00:" + second
|
|
}
|
|
var tt = {
|
|
hHour: haveHour,
|
|
Thour: ch,
|
|
Tmin: cm,
|
|
Tsec: csx,
|
|
StringTime: time
|
|
};
|
|
return tt
|
|
}
|
|
|
|
function StopBar() {
|
|
if (!down) {
|
|
isAction = false
|
|
}
|
|
clearInterval(t)
|
|
$('#btnPlay').removeClass("BarPause");
|
|
$('#btnPlay').addClass("BarPlay");
|
|
}
|
|
|
|
function OpenBar() {
|
|
if (CurrTime <= alltime) {
|
|
if (valueChanged && $.playBar.onBarChanged) {
|
|
$.playBar.onBarChanged(CurrTime, valueChanged);
|
|
valueChanged = false;
|
|
}
|
|
|
|
isAction = true;
|
|
if (t) clearInterval(t);
|
|
t = setInterval(changeBar, 1000);
|
|
|
|
$('#btnPlay').removeClass("BarPlay");
|
|
$('#btnPlay').addClass("BarPause");
|
|
}
|
|
}
|
|
})(jQuery); |