diff --git a/source/Ox.UI/js/Core/Ox.Element.js b/source/Ox.UI/js/Core/Ox.Element.js index c22b0bfb..fc080031 100644 --- a/source/Ox.UI/js/Core/Ox.Element.js +++ b/source/Ox.UI/js/Core/Ox.Element.js @@ -9,7 +9,9 @@ Ox.Element Basic UI element object options the options of the element # Properties element tagname or CSS selector - tooltip tooltip (not implemented) + tooltip tooltip title or function that returns one + (e) -> tooltip title + e mouse event options tagname or CSS selector self shared private variable # Events ------------------------------------------------------------------- @@ -48,13 +50,6 @@ Ox.Element 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) diff --git a/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js b/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js index 0427bb7d..689828e1 100644 --- a/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js +++ b/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js @@ -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 = $('
') .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 ? '' + Ox.highlight( + subtitle.text, self.options.find, 'OxHighlight' + ).replace(/\n/g, '
') + '
' + + 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 ? - '' + - Ox.highlight(subtitle.text, self.options.find, 'OxHighlight').replace(/\n/g, '
') + - '
' + - 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( diff --git a/source/Ox.UI/js/Video/Ox.VideoPlayer.js b/source/Ox.UI/js/Video/Ox.VideoPlayer.js index 88b487db..a1872ab6 100644 --- a/source/Ox.UI/js/Video/Ox.VideoPlayer.js +++ b/source/Ox.UI/js/Video/Ox.VideoPlayer.js @@ -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 = $('
') + 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 = $('
') .css({ diff --git a/source/Ox.UI/js/Window/Ox.Tooltip.js b/source/Ox.UI/js/Window/Ox.Tooltip.js index 99899976..52e0befe 100644 --- a/source/Ox.UI/js/Window/Ox.Tooltip.js +++ b/source/Ox.UI/js/Window/Ox.Tooltip.js @@ -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) {