# HG changeset patch # User Raphael Velt # Date 1355932341 -3600 # Node ID d50aeed9a54b5d6400fc480c7964b1ceae15103e # Parent 6fd82508e33fcfa6fc2de71611b3132dbfa54304 Update Tooltip diff -r 6fd82508e33f -r d50aeed9a54b web/res/metadataplayer/AnnotationsList.css --- a/web/res/metadataplayer/AnnotationsList.css Tue Dec 18 17:16:26 2012 +0100 +++ b/web/res/metadataplayer/AnnotationsList.css Wed Dec 19 16:52:21 2012 +0100 @@ -1,9 +1,6 @@ /* AnnotationsListWidget */ .Ldt-AnnotationsListWidget { - border: none; margin: 0; padding: 0; - overflow: auto; - max-height: 480px; } .Ldt-AnnotationsListWidget a { text-decoration: none; diff -r 6fd82508e33f -r d50aeed9a54b web/res/metadataplayer/LdtPlayer-core.js --- a/web/res/metadataplayer/LdtPlayer-core.js Tue Dec 18 17:16:26 2012 +0100 +++ b/web/res/metadataplayer/LdtPlayer-core.js Wed Dec 19 16:52:21 2012 +0100 @@ -119,6 +119,9 @@ _this.widgets.push(null); _this.loadWidget(widgetconf, function(widget) { _this.widgets[key] = widget; + if (widget.isLoaded()) { + _this.trigger("widget-loaded"); + } }); }); this.$.find('.Ldt-Loader').detach(); @@ -491,7 +494,8 @@ var _iexact = _iexact || false, _rgxp = Model.regexpFromTextOrArray(_text, true); return this.filter(function(_element) { - return _rgxp.test(_element.description) || _rgxp.test(_element.title); + var keywords = (_element.keywords || _element.getTagTexts() || []).join(", "); + return _rgxp.test(_element.description) || _rgxp.test(_element.title) || _rgxp.test(keywords); }); } @@ -676,7 +680,7 @@ } _res += pad(2, _hms.minutes) + ':' + pad(2, _hms.seconds); if (showCs) { - _res += "." + Math.round(_hms.milliseconds / 100) + _res += "." + Math.floor(_hms.milliseconds / 100) } return _res; } @@ -1252,12 +1256,12 @@ Model.Source.prototype.getList = function(_listId, _global) { _global = (typeof _global !== "undefined" && _global); - if (_global || typeof this.contents[_listId] === "undefined") { + if (_global) { return this.directory.getGlobalList().filter(function(_e) { return (_e.elementType === _listId); }); } else { - return this.contents[_listId]; + return this.contents[_listId] || new IriSP.Model.List(this.directory); } } @@ -1391,6 +1395,7 @@ url: this.url, dataType: dataType, data: urlparams, + traditional: true, success: function(_result) { _this.deSerialize(_result); _this.handleCallbacks(); @@ -1491,6 +1496,9 @@ noCss: true, requires: [ "popcorn" ] }, + HtmlPlayer: { + noCss: true + }, JwpPlayer: { noCss: true, requires: [ "jwplayer" ] @@ -1591,24 +1599,6 @@ */ this.player = player; - /* Getting metadata */ - this.source = player.loadMetadata(this.metadata); - - /* Call draw when loaded */ - this.source.onLoad(function() { - if (_this.media_id) { - _this.media = this.getElement(_this.media_id); - } else { - var _mediaopts = { - is_mashup: _this.is_mashup || false - } - _this.media = this.getCurrentMedia(_mediaopts); - } - - _this.draw(); - player.trigger("widget-loaded"); - }); - /* Adding classes and html attributes */ this.$ = IriSP.jQuery('#' + this.container); this.$.addClass("Ldt-TraceMe Ldt-Widget").attr("widget-type", _type); @@ -1623,6 +1613,31 @@ ) ); + /* Loading Metadata if required */ + + if (this.metadata) { + /* Getting metadata */ + this.source = player.loadMetadata(this.metadata); + + /* Call draw when loaded */ + this.source.onLoad(function() { + if (_this.media_id) { + _this.media = this.getElement(_this.media_id); + } else { + var _mediaopts = { + is_mashup: _this.is_mashup || false + } + _this.media = this.getCurrentMedia(_mediaopts); + } + + _this.draw(); + player.trigger("widget-loaded"); + }); + } else { + this.draw(); + } + + }; IriSP.Widgets.Widget.prototype.defaults = {} diff -r 6fd82508e33f -r d50aeed9a54b web/res/metadataplayer/Mediafragment.js --- a/web/res/metadataplayer/Mediafragment.js Tue Dec 18 17:16:26 2012 +0100 +++ b/web/res/metadataplayer/Mediafragment.js Wed Dec 19 16:52:21 2012 +0100 @@ -4,9 +4,10 @@ this.last_hash_value = ""; window.onhashchange = this.functionWrapper("goToHash"); if (typeof window.addEventListener !== "undefined") { + var _this = this; window.addEventListener('message', function(_msg) { if (/^#/.test(_msg.data)) { - this.setWindowHash(_msg.data); + _this.setWindowHash(_msg.data); } }) }; @@ -18,14 +19,15 @@ IriSP.Widgets.Mediafragment.prototype.draw = function() { this.onMediaEvent("pause","setHashToTime"); - this.onMediaEvent("seeked","setHashToTime"); - this.goToHash(); var _this = this; this.getWidgetAnnotations().forEach(function(_annotation) { _annotation.on("click", function() { _this.setHashToAnnotation(_annotation.id); }) - }) + }); + this.player.on("widgets-loaded", function() { + _this.goToHash(); + }); } IriSP.Widgets.Mediafragment.prototype.setWindowHash = function(_hash) { diff -r 6fd82508e33f -r d50aeed9a54b web/res/metadataplayer/Polemic.js --- a/web/res/metadataplayer/Polemic.js Tue Dec 18 17:16:26 2012 +0100 +++ b/web/res/metadataplayer/Polemic.js Wed Dec 19 16:52:21 2012 +0100 @@ -135,12 +135,14 @@ _annotation.trigger("click"); }); _annotation.on("select", function() { - _this.tooltip.show( - Math.floor(_elx + (_this.element_width - 1) / 2), - _ely, - _annotation.title, - _col - ); + if (_this.tooltip) { + _this.tooltip.show( + Math.floor(_elx + (_this.element_width - 1) / 2), + _ely, + _annotation.title, + _col + ); + } _this.$tweets.each(function() { var _e = IriSP.jQuery(this); _e.css( @@ -150,7 +152,9 @@ }); }); _annotation.on("unselect", function() { - _this.tooltip.hide(); + if (_this.tooltip) { + _this.tooltip.hide(); + } _this.$tweets.css("opacity",1); }); _annotation.on("found", function() { @@ -270,10 +274,14 @@ var _color = _i ? _this.polemics[_i - 1].color : _this.defaultcolor; _html += '

' + _nums[_i] + _this.l10n._annotations + '

' } - _this.tooltip.show(_el.attr("pos-x"), _el.attr("pos-y"), _html); + if (_this.tooltip) { + _this.tooltip.show(_el.attr("pos-x"), _el.attr("pos-y"), _html); + } }) .mouseout(function() { - _this.tooltip.hide(); + if (_this.tooltip) { + _this.tooltip.hide(); + } }) } @@ -289,7 +297,15 @@ this.$.append('
'); - this.insertSubwidget(this.$.find(".Ldt-Polemic-Tooltip"), { type: "Tooltip" }, "tooltip"); + this.insertSubwidget( + this.$.find(".Ldt-Polemic-Tooltip"), + { + type: "Tooltip", + min_x: 0, + max_x: this.width + }, + "tooltip" + ); } IriSP.Widgets.Polemic.prototype.onTimeupdate = function(_time) { diff -r 6fd82508e33f -r d50aeed9a54b web/res/metadataplayer/Segments.js --- a/web/res/metadataplayer/Segments.js Tue Dec 18 17:16:26 2012 +0100 +++ b/web/res/metadataplayer/Segments.js Wed Dec 19 16:52:21 2012 +0100 @@ -108,10 +108,14 @@ background: _el.hasClass("found") ? _this.found_color: color, "z-index": ++zindex }); - _this.tooltip.show( _center, _top, _data.text, _data.color ); + if (_this.tooltip) { + _this.tooltip.show( _center, _top, _data.text, _data.color ); + } }); _annotation.on("unselect", function() { - _this.tooltip.hide(); + if (_this.tooltip) { + _this.tooltip.hide(); + } _this.$segments.each(function() { var _segment = IriSP.jQuery(this); _segment.css("background", _segment.hasClass("found") ? _this.found_color : _segment.attr(searching ? "data-low-color" : "data-medium-color")); @@ -131,7 +135,15 @@ background : this.background, margin: "1px 0" }); - this.insertSubwidget(this.$.find(".Ldt-Segments-Tooltip"), { type: "Tooltip" }, "tooltip"); + this.insertSubwidget( + this.$.find(".Ldt-Segments-Tooltip"), + { + type: "Tooltip", + min_x: 0, + max_x: this.width + }, + "tooltip" + ); this.$segments = this.$.find('.Ldt-Segments-Segment'); this.source.getAnnotations().on("search", function() { searching = true; diff -r 6fd82508e33f -r d50aeed9a54b web/res/metadataplayer/Tagcloud.css --- a/web/res/metadataplayer/Tagcloud.css Tue Dec 18 17:16:26 2012 +0100 +++ b/web/res/metadataplayer/Tagcloud.css Wed Dec 19 16:52:21 2012 +0100 @@ -2,13 +2,9 @@ * */ .Ldt-Tagcloud-Container { - border: 1px solid #b7b7b7; - padding: 1px; - margin: 0; } ul.Ldt-Tagcloud-List { - background: url(img/pinstripe.png); padding: 5px; margin: 0; list-style: none; diff -r 6fd82508e33f -r d50aeed9a54b web/res/metadataplayer/Tooltip.css --- a/web/res/metadataplayer/Tooltip.css Tue Dec 18 17:16:26 2012 +0100 +++ b/web/res/metadataplayer/Tooltip.css Wed Dec 19 16:52:21 2012 +0100 @@ -1,31 +1,119 @@ -/* ToolTip Widget */ +.Ldt-Tooltip { + position: absolute; + height: 0; width: 0; + z-index: 100000; +} + +.Ldt-Tooltip-Main { + position: absolute; bottom: 0; left: -96px; +} + +.Ldt-Tooltip-Corner-NW, +.Ldt-Tooltip-Corner-NE, +.Ldt-Tooltip-Corner-SW, +.Ldt-Tooltip-Corner-SE { + position: absolute; width: 6px; height: 6px; background: url(img/tooltip-corners.png); +} + +.Ldt-Tooltip-Corner-NW, +.Ldt-Tooltip-Corner-SW { + left: 0; +} + +.Ldt-Tooltip-Corner-NE, +.Ldt-Tooltip-Corner-SE { + right: 0; +} + +.Ldt-Tooltip-Corner-NW, +.Ldt-Tooltip-Corner-NE { + top: 0; +} + +.Ldt-Tooltip-Corner-SW, +.Ldt-Tooltip-Corner-SE { + bottom: 10px; +} + +.Ldt-Tooltip-Corner-NW { + background-position: top left; +} + +.Ldt-Tooltip-Corner-NE { + background-position: top right; +} -.Ldt-Tooltip { - position: absolute; - z-index: 10000000000; - background: transparent url("img/white_arrow_long.png"); - font-size: 12px; - padding: 15px 15px 20px; - color: black; - font-family: Arial, Helvetica, sans-serif; - overflow:hidden; +.Ldt-Tooltip-Corner-SW { + background-position: bottom left; +} + +.Ldt-Tooltip-Corner-SE { + background-position: bottom right; +} + +.Ldt-Tooltip-Border-Top, +.Ldt-Tooltip-Border-SW, +.Ldt-Tooltip-Border-SE { + position: absolute; height: 6px; background: url(img/tooltip-h-borders.png); +} + +.Ldt-Tooltip-Border-Top { + left: 6px; right: 6px; +} + +.Ldt-Tooltip-Border-SW, +.Ldt-Tooltip-Border-SE { + bottom: 10px; background-position: bottom; +} + +.Ldt-Tooltip-Border-SW { + left: 6px; +} + +.Ldt-Tooltip-Border-SE { + right: 6px; +} + +.Ldt-Tooltip-Tip { + position: absolute; height: 16px; width: 22px; + background: url(img/tooltip-tip.png); + bottom: 0; +} + +.Ldt-Tooltip-Border-Left, +.Ldt-Tooltip-Border-Right { + position: absolute; width: 6px; background: url(img/tooltip-v-borders.png); + top: 6px; bottom: 16px; +} + +.Ldt-Tooltip-Border-Left { + left: 0; background-position: left; +} + +.Ldt-Tooltip-Border-Right { + right: 0; background-position: right; } .Ldt-Tooltip-Inner { - height: 115px; + min-height: 30px; + max-height: 140px; width: 180px; overflow: hidden; + margin: 6px 6px 16px; + background: url(img/tooltip-gradient.png) bottom; } + .Ldt-Tooltip-Color { - float: left; margin: 2px 4px 2px 0; width: 10px; height: 10px; + float: left; margin: 8px 2px 2px 8px; width: 10px; height: 10px; } .Ldt-Tooltip img { - max-width: 140px; max-height: 70px; margin: 0 20px; + max-width: 140px; max-height: 80px; margin: 2px 20px; } .Ldt-Tooltip p { - margin: 2px 0; - font-size: 12px; -} + margin: 6px 8px; + font-size: 12px; + line-height: 14px; +} \ No newline at end of file diff -r 6fd82508e33f -r d50aeed9a54b web/res/metadataplayer/Tooltip.js --- a/web/res/metadataplayer/Tooltip.js Tue Dec 18 17:16:26 2012 +0100 +++ b/web/res/metadataplayer/Tooltip.js Wed Dec 19 16:52:21 2012 +0100 @@ -5,17 +5,35 @@ IriSP.Widgets.Tooltip.prototype = new IriSP.Widgets.Widget(); -IriSP.Widgets.Tooltip.prototype.template = '
'; +IriSP.Widgets.Tooltip.prototype.defaults = { + +}; + +IriSP.Widgets.Tooltip.prototype.template = + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '

'; IriSP.Widgets.Tooltip.prototype.draw = function() { _this = this; - this.$.html(this.template); + this.renderTemplate(); this.$.parent().css({ "position" : "relative" }); - this.$tip = this.$.find(".Ldt-Tooltip"); + this.$tooltip = this.$.find(".Ldt-Tooltip"); + this.$tip = this.$.find(".Ldt-Tooltip-Tip"); + this.$sw = this.$.find(".Ldt-Tooltip-Border-SW"); + this.$se = this.$.find(".Ldt-Tooltip-Border-SE"); + this.__halfWidth = Math.floor(this.$.find(".Ldt-Tooltip-Main").width()/2); + this.__borderWidth = this.$.find(".Ldt-Tooltip-Border-Left").width(); + this.__tipDelta = this.__halfWidth - Math.floor(this.$tip.width()/2); + this.__maxShift = this.__tipDelta - this.__borderWidth; this.$.mouseover(function() { - _this.$tip.hide(); + _this.$tooltip.hide(); }); this.hide(); }; @@ -30,13 +48,33 @@ this.$.find(".Ldt-Tooltip-Text").html(text); - this.$tip.show(); + this.$tooltip.show(); + + var shift = 0; + + if (typeof this.min_x !== "undefined" && (x - this.__halfWidth < this.min_x)) { + shift = Math.max(x - this.__halfWidth - this.min_x, - this.__maxShift); + } + + if (typeof this.max_x !== "undefined" && (x + this.__halfWidth > this.max_x)) { + shift = Math.min(x + this.__halfWidth - this.max_x, this.__maxShift); + } + + this.$tooltip.css({ + "left" : (x - shift) + "px", + "top" : y + "px" + }); this.$tip.css({ - "left" : Math.floor(x - this.$tip.outerWidth() / 2) + "px", - "top" : Math.floor(y - this.$tip.outerHeight()) + "px" + "left": (this.__tipDelta + shift) + "px" + }); + this.$sw.css({ + "width": (this.__tipDelta + shift - this.__borderWidth) + "px" + }); + this.$se.css({ + "width": (this.__tipDelta - shift - this.__borderWidth) + "px" }); }; IriSP.Widgets.Tooltip.prototype.hide = function() { - this.$tip.hide(); + this.$tooltip.hide(); }; diff -r 6fd82508e33f -r d50aeed9a54b web/res/metadataplayer/Trace.js --- a/web/res/metadataplayer/Trace.js Tue Dec 18 17:16:26 2012 +0100 +++ b/web/res/metadataplayer/Trace.js Wed Dec 19 16:52:21 2012 +0100 @@ -16,22 +16,11 @@ } IriSP.Widgets.Trace.prototype.draw = function() { - this.lastEvent = ""; if (typeof window.tracemanager === "undefined") { console.log("Tracemanager not found"); return; } var _this = this, - _mdplisteners = { - "search.open" : 0, - "search.closed" : 0, - "search" : 0, - "search.cleared" : 0, - "search.matchFound" : 0, - "search.noMatchFound" : 0, - "search.triggeredSearch" : 0, - "TraceWidget.MouseEvents" : 0 - } _medialisteners = { "play" : 0, "pause" : 0, @@ -39,17 +28,8 @@ "seeked" : 0, "play" : 0, "pause" : 0, - "timeupdate" : 2000 + "timeupdate" : 10000 }; - IriSP._(_mdplisteners).each(function(_ms, _listener) { - var _f = function(_arg) { - _this.eventHandler(_listener, _arg); - } - if (_ms) { - _f = IriSP._.throttle(_f, _ms); - } - _this.onMdpEvent(_listener, _f); - }); IriSP._(_medialisteners).each(function(_ms, _listener) { var _f = function(_arg) { _this.eventHandler(_listener, _arg); @@ -74,10 +54,10 @@ this.tracer.trace("TraceWidgetInit", {}); this.mouseLocation = ''; - IriSP.jQuery(".Ldt-Widget").on("click mouseover mouseout", ".Ldt-TraceMe", function(_e) { + IriSP.jQuery(".Ldt-Widget").on("click mouseenter mouseleave", ".Ldt-TraceMe", function(_e) { var _target = IriSP.jQuery(this); - var _widget = IriSP.jQuery(this).attr("widget-type"), + var _widget = _target.attr("widget-type") || _target.parents(".Ldt-Widget").attr("widget-type"), _data = { "type": _e.type, "x": _e.clientX, @@ -88,42 +68,16 @@ _class = _targetEl.className, _name = _targetEl.localName, _id = _targetEl.id, - _value = _targetEl.value, - _traceInfo = _target.attr("trace-info"), - _lastTarget = _name + (_id && _id.length ? '#' + IriSP.jqEscape(_id) : '') + (_class && _class.length ? ('.' + IriSP.jqEscape(_class).replace(/\s/g,'.')).replace(/\.Ldt-(Widget|TraceMe)/g,'') : ''); - _data.target = _lastTarget - if (typeof _traceInfo == "string" && _traceInfo.length) { + _value = _target.val(), + _traceInfo = _target.attr("trace-info"); + _data.target = _name + (_id && _id.length ? '#' + IriSP.jqEscape(_id) : '') + (_class && _class.length ? ('.' + IriSP.jqEscape(_class).replace(/\s/g,'.')).replace(/\.Ldt-(Widget|TraceMe)/g,'') : ''); + if (typeof _traceInfo == "string" && _traceInfo) { _data.traceInfo = _traceInfo; - _lastTarget += ( ";" + _traceInfo ); } if (typeof _value == "string" && _value.length) { _data.value = _value; } - switch(_e.type) { - case "mouseover": - if (_this.lastTarget != _lastTarget) { - _this.player.trigger('TraceWidget.MouseEvents', _data); - } else { - if (typeof _this.moTimeout != "undefined") { - clearTimeout(_this.moTimeout); - _this.moTimeout = undefined; - } - } - break; - case "mouseout": - if (typeof _this.moTimeout != "undefined") { - clearTimeout(_this.moTimeout); - } - _this.moTimeout = setTimeout(function() { - if (_lastTarget != _this.lastTarget) { - _this.player.trigger('TraceWidget.MouseEvents', _data); - } - },100); - break; - default: - _this.player.trigger('TraceWidget.MouseEvents', _data); - } - _this.lastTarget = _lastTarget; + _this.eventHandler('UIEvent', _data); }); } @@ -136,7 +90,7 @@ _arg = {} } switch(_listener) { - case 'IriSP.TraceWidget.MouseEvents': + case 'UIEvent': _traceName += _arg.widget + '_' + _arg.type; delete _arg.widget; delete _arg.type; @@ -152,7 +106,6 @@ default: _traceName += _listener.replace('.','_'); } - this.lastEvent = _traceName; if (typeof this.extend === "object" && this.extend) { IriSP._(_arg).extend(this.extend); } @@ -160,4 +113,4 @@ if (this.js_console && typeof window.console !== "undefined" && typeof console.log !== "undefined") { console.log("tracer.trace('" + _traceName + "', " + JSON.stringify(_arg) + ");"); } -} +} \ No newline at end of file diff -r 6fd82508e33f -r d50aeed9a54b web/res/metadataplayer/img/tooltip-corners.png Binary file web/res/metadataplayer/img/tooltip-corners.png has changed diff -r 6fd82508e33f -r d50aeed9a54b web/res/metadataplayer/img/tooltip-gradient.png Binary file web/res/metadataplayer/img/tooltip-gradient.png has changed diff -r 6fd82508e33f -r d50aeed9a54b web/res/metadataplayer/img/tooltip-h-borders.png Binary file web/res/metadataplayer/img/tooltip-h-borders.png has changed diff -r 6fd82508e33f -r d50aeed9a54b web/res/metadataplayer/img/tooltip-tip.png Binary file web/res/metadataplayer/img/tooltip-tip.png has changed diff -r 6fd82508e33f -r d50aeed9a54b web/res/metadataplayer/img/tooltip-v-borders.png Binary file web/res/metadataplayer/img/tooltip-v-borders.png has changed