0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

add tooltip option to Ox.Element

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

56
source/Ox.UI/js/Core/Ox.Element.js
View file

@ -9,7 +9,9 @@ Ox.Element <function:Ox.JQueryElement> Basic UI element object
options <object> the options of the element
# Properties
element <string> tagname or CSS selector
tooltip <object> tooltip (not implemented)
tooltip <string|function> tooltip title or function that returns one
(e) -> <string> tooltip title
e <object> mouse event
options <string> tagname or CSS selector
self <object> shared private variable
# Events -------------------------------------------------------------------
@ -48,13 +50,6 @@ Ox.Element <function:Ox.JQueryElement> Basic UI element object
Ox.Element = function() {
/*
tooltip option can be any of the following:
string
function(e), returns string
{mousemove: true, title: function(e)}
*/
return function(options, self) {
/*
@ -87,14 +82,26 @@ Ox.Element = function() {
)
.mousedown(mousedown);
/*
self.options.tooltip && that.bind(Ox.extend({
mouseenter: mouseenter,
mouseleave: mouseleave
}, self.options.tooltip.mousemove ? {
mousemove: mousemove
} : {}));
*/
if (self.options.tooltip) {
if (Ox.isString(self.options.tooltip)) {
that.$tooltip = Ox.Tooltip({
title: self.options.tooltip,
});
that.bind({
mouseenter: mouseenter
});
} else {
that.$tooltip = Ox.Tooltip({
animate: false
});
that.bind({
mousemove: mousemove
});
}
that.bind({
mouseleave: mouseleave
});
}
function bind(action, event, fn) {
self.$eventHandler[action]('ox_' + event, function(event, data) {
@ -186,25 +193,20 @@ Ox.Element = function() {
}
}
/*
function mouseenter(e) {
self.$tooltip = new Ox.Tooltip({
title: Ox.isString(self.options.tooltip) ?
self.options.tooltip : Ox.isFunction(self.options.tooltip) ?
self.options.tooltip(e) : self.options.tooltip.title(e)
}).show();
that.$tooltip.show(e);
}
function mouseleave(e) {
self.$tooltip.hide();
that.$tooltip.hide();
}
function mousemove(e) {
self.$tooltip.options({
title: self.options.tooltip.title(e)
});
Ox.print('mousemove!!')
that.$tooltip.options({
title: self.options.tooltip(e)
}).show(e);
}
*/
self.setOption = function() {
// self.setOptions(key, value)

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({
@ -131,12 +135,6 @@ Ox.SmallVideoTimeline = function(options, self) {
});
}
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({

1
source/Ox.UI/js/Window/Ox.Tooltip.js
View file

@ -45,6 +45,7 @@ Ox.Tooltip = function(options, self) {
};
// can pass event instead of x/y
// fixme: use this in widgets
that.show = function(x, y) {
var left, top, width, height;
if (arguments.length == 1) {