sanj/oxjs
1
0
Fork 0
forked from 0x2620/oxjs
Code Pull requests Activity

add tooltip option to Ox.Element

Browse source
This commit is contained in:
rolux 2011-05-17 20:44:53 +02:00
commit 2842ec8d09
4 changed files with 54 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

54
source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js
View file

@ -39,7 +39,9 @@ Ox.SmallVideoTimeline = function(options, self) {
self.$image = getTimelineImage().appendTo(that);
self.$interface = Ox.Element()
self.$interface = Ox.Element({
tooltip: getTooltip
})
.addClass('OxInterface')
.css({
position: 'absolute',
@ -50,9 +52,7 @@ Ox.SmallVideoTimeline = function(options, self) {
zIndex: 11
})
.bind({
mousedown: mousedown,
mouseleave: mouseleave,
mousemove: mousemove
mousedown: mousedown
})
.bindEvent({
drag: function(event, e) {
@ -65,6 +65,10 @@ Ox.SmallVideoTimeline = function(options, self) {
})
.appendTo(that);
self.$interface.$tooltip.css({
textAlign: 'center'
});
if (self.options.type == 'player') {
self.$positionMarker = $('<div>')
.css({
@ -130,12 +134,6 @@ Ox.SmallVideoTimeline = function(options, self) {
setPointMarker(point);
});
}
self.$tooltip = Ox.Tooltip({
animate: false
}).css({
textAlign: 'center'
});
function getPosition(e) {
var position =
@ -176,6 +174,17 @@ Ox.SmallVideoTimeline = function(options, self) {
});
}
function getTooltip(e) {
var position = getPosition(e),
subtitle = getSubtitle(position);
return subtitle ? '<span class=\'OxBright\'>' + Ox.highlight(
subtitle.text, self.options.find, 'OxHighlight'
).replace(/\n/g, '<br/>') + '</span><br/>' +
Ox.formatDuration(subtitle['in'], self.options.showMilliseconds) + ' - ' +
Ox.formatDuration(subtitle['out'], self.options.showMilliseconds) :
Ox.formatDuration(position, self.options.showMilliseconds);
}
function mousedown(e) {
if ($(e.target).is('.OxInterface')) {
self.options.position = getPosition(e);
@ -192,31 +201,6 @@ Ox.SmallVideoTimeline = function(options, self) {
}
}
function mouseleave() {
self.$tooltip.hide();
}
function mousemove(e) {
var position, subtitle;
if ($(e.target).is('.OxInterface')) {
position = getPosition(e);
subtitle = getSubtitle(position);
self.$tooltip.options({
title: subtitle ?
'<span class=\'OxBright\'>' +
Ox.highlight(subtitle.text, self.options.find, 'OxHighlight').replace(/\n/g, '<br/>') +
'</span><br/>' +
Ox.formatDuration(subtitle['in'], self.options.showMilliseconds) + ' - ' +
Ox.formatDuration(subtitle['out'], self.options.showMilliseconds) :
Ox.formatDuration(position, self.options.showMilliseconds)
})
.show(e.clientX, e.clientY);
} else {
self.$tooltip.hide();
}
}
function setPointMarker(point) {
self.$pointMarker[point].css({
left: self.imageLeft + Math.round(