add tooltip option to Ox.Element
This commit is contained in:
rolux
parent
1d13caaf88
commit
2842ec8d09
4 changed files with 54 additions and 66 deletions
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue