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(

9
source/Ox.UI/js/Video/Ox.VideoPlayer.js
View file

@ -144,8 +144,7 @@ Ox.VideoPlayer = function(options, self) {
self.out = self.options.playInToOut ? self.options.out : self.options.duration;
self.options.duration = self.out - self['in'];
self.options.position = Ox.limit(self.options.position, self['in'], self.out);
Ox.print('p/d', self.options.position, self.options.duration);
// fixme: this is _relative_, resizing can happen
self.millisecondsPerFrame = 1000 / self.options.fps;
self.secondsPerFrame = 1 / self.options.fps;
self.barHeight = 16;
@ -688,7 +687,9 @@ Ox.VideoPlayer = function(options, self) {
} else if (control == 'resolution') {
self.$resolutionButton = $('<div>')
self.$resolutionButton = Ox.Element({
tooltip: 'Resolution'
})
.css({
float: 'left',
width: '32px',
@ -705,7 +706,7 @@ Ox.VideoPlayer = function(options, self) {
self.$resolution.toggle();
}
})
.appendTo(self['$controls' + titlecase].$element);
.appendTo(self['$controls' + titlecase]);
self.$resolution = $('<div>')
.css({