r64898 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r64897‎ | r64898 | r64899 >
Date:19:49, 10 April 2010
Author:dale
Status:deferred
Tags:
Comment:
* moved menu to core jQuery plugin
* moved timedText css to module css file
* added "stop()" to animations for show/hide control bar
Modified paths:
  • /branches/js2-work/phase3/js/mwEmbed/jquery/plugins/jquery.menu (added) (history)
  • /branches/js2-work/phase3/js/mwEmbed/loader.js (modified) (history)
  • /branches/js2-work/phase3/js/mwEmbed/modules/EmbedPlayer/skins/ctrlBuilder.js (modified) (history)
  • /branches/js2-work/phase3/js/mwEmbed/modules/EmbedPlayer/skins/kskin/EmbedPlayer.css (modified) (history)
  • /branches/js2-work/phase3/js/mwEmbed/modules/TimedText/css/mw.TimedTextEdit.css (deleted) (history)
  • /branches/js2-work/phase3/js/mwEmbed/modules/TimedText/css/mw.style.TimedText.css (added) (history)
  • /branches/js2-work/phase3/js/mwEmbed/modules/TimedText/css/mw.style.TimedTextEdit.css (added) (history)
  • /branches/js2-work/phase3/js/mwEmbed/modules/TimedText/jquery.menu (deleted) (history)
  • /branches/js2-work/phase3/js/mwEmbed/modules/TimedText/loader.js (modified) (history)
  • /branches/js2-work/phase3/js/mwEmbed/modules/TimedText/mw.TimedText.js (modified) (history)
  • /branches/js2-work/phase3/js/mwEmbed/modules/TimedText/remotes/RemoteMwTimedText.js (modified) (history)

Diff [purge]

Index: branches/js2-work/phase3/js/mwEmbed/jquery/plugins/jquery.menu/jquery.menu.css
——@@ -0,0 +1,119 @@
 2+/* Styles for jQuery menu widget
 3+Author: Maggie Wachs, maggie@filamentgroup.com
 4+Date: September 2008
 5+*/
 6+
 7+
 8+/* REQUIRED STYLES - the menus will only render correctly with these rules */
 9+
 10+.fg-menu-container { position: absolute; top:0; left:-999px; padding: .4em; overflow: hidden; }
 11+.fg-menu-container.fg-menu-flyout { overflow: visible; }
 12+
 13+.fg-menu, .fg-menu ul { list-style-type:none; padding: 0; margin:0; }
 14+
 15+.fg-menu { position:relative; }
 16+.fg-menu-flyout .fg-menu { position:static; }
 17+
 18+.fg-menu ul { position:absolute; top:0; }
 19+.fg-menu ul ul { top:-1px; }
 20+
 21+.fg-menu-container.fg-menu-ipod .fg-menu-content,
 22+.fg-menu-container.fg-menu-ipod .fg-menu-content ul { background: none !important; }
 23+
 24+.fg-menu.fg-menu-scroll,
 25+.fg-menu ul.fg-menu-scroll { overflow: scroll; overflow-x: hidden; }
 26+
 27+.fg-menu li { clear:both; float:left; width:100%; margin: 0; padding:0; border: 0; }
 28+.fg-menu li li { font-size:1em; } /* inner li font size must be reset so that they don't blow up */
 29+
 30+.fg-menu-flyout ul ul { padding: .4em; }
 31+.fg-menu-flyout li { position:relative; }
 32+
 33+.fg-menu-scroll { overflow: scroll; overflow-x: hidden; }
 34+
 35+.fg-menu-breadcrumb { margin: 0; padding: 0; }
 36+
 37+.fg-menu-footer { margin-top: .4em;
 38+padding: .4em;
 39+position:absolute;
 40+bottom:2px;
 41+width: 170px;
 42+}
 43+.fg-menu-header { margin-bottom: .4em; padding: .4em; }
 44+
 45+.fg-menu-breadcrumb li { float: left; list-style: none; margin: 0; padding: 0 .2em; font-size: .9em; opacity: .7; }
 46+.fg-menu-breadcrumb li.fg-menu-prev-list,
 47+.fg-menu-breadcrumb li.fg-menu-current-crumb { clear: left; float: none; opacity: 1; }
 48+.fg-menu-breadcrumb li.fg-menu-current-crumb { padding-top: .2em; }
 49+
 50+.fg-menu-breadcrumb a,
 51+.fg-menu-breadcrumb span { float: left; }
 52+
 53+.fg-menu-footer a:link,
 54+.fg-menu-footer a:visited { float:left; width:100%; text-decoration: none; }
 55+.fg-menu-footer a:hover,
 56+.fg-menu-footer a:active { }
 57+
 58+.fg-menu-footer a span { float:left; cursor: pointer; }
 59+
 60+.fg-menu-breadcrumb .fg-menu-prev-list a:link,
 61+.fg-menu-breadcrumb .fg-menu-prev-list a:visited,
 62+.fg-menu-breadcrumb .fg-menu-prev-list a:hover,
 63+.fg-menu-breadcrumb .fg-menu-prev-list a:active { background-image: none; text-decoration:none; }
 64+
 65+.fg-menu-breadcrumb .fg-menu-prev-list a { float: left; padding-right: .4em; }
 66+.fg-menu-breadcrumb .fg-menu-prev-list a .ui-icon { float: left; }
 67+
 68+.fg-menu-breadcrumb .fg-menu-current-crumb a:link,
 69+.fg-menu-breadcrumb .fg-menu-current-crumb a:visited,
 70+.fg-menu-breadcrumb .fg-menu-current-crumb a:hover,
 71+.fg-menu-breadcrumb .fg-menu-current-crumb a:active { display:block; background-image:none; font-size:1.3em; text-decoration:none; }
 72+
 73+
 74+
 75+/* REQUIRED LINK STYLES: links are "display:block" by default; if the menu options are split into
 76+ selectable node links and 'next' links, the script floats the node links left and floats the 'next' links to the right */
 77+
 78+.fg-menu a:link,
 79+.fg-menu a:visited,
 80+.fg-menu a:hover,
 81+.fg-menu a:active { float:left; width:92%; padding:.3em 3%; text-decoration:none; outline: 0 !important; }
 82+
 83+.fg-menu a { border: 1px dashed transparent; }
 84+
 85+.fg-menu a.ui-state-default:link,
 86+.fg-menu a.ui-state-default:visited,
 87+.fg-menu a.ui-state-default:hover,
 88+.fg-menu a.ui-state-default:active,
 89+.fg-menu a.ui-state-hover:link,
 90+.fg-menu a.ui-state-hover:visited,
 91+.fg-menu a.ui-state-hover:hover,
 92+.fg-menu a.ui-state-hover:active,
 93+.fg-menu a.ui-state-active:link,
 94+.fg-menu a.ui-state-active:visited,
 95+.fg-menu a.ui-state-active:hover,
 96+.fg-menu a.ui-state-active:active { border-style: solid; font-weight: normal; }
 97+
 98+.fg-menu a span { display:block; cursor:pointer; }
 99+
 100+
 101+ /* SUGGESTED STYLES - for use with jQuery UI Themeroller CSS */
 102+
 103+.fg-menu-indicator span { float:left; }
 104+.fg-menu-indicator span.ui-icon { float:right; }
 105+
 106+.fg-menu-content.ui-widget-content,
 107+.fg-menu-content ul.ui-widget-content { border:0; }
 108+
 109+
 110+/* ICONS AND DIVIDERS */
 111+
 112+.fg-menu.fg-menu-has-icons a:link,
 113+.fg-menu.fg-menu-has-icons a:visited,
 114+.fg-menu.fg-menu-has-icons a:hover,
 115+.fg-menu.fg-menu-has-icons a:active { padding-left:20px; }
 116+
 117+.fg-menu .horizontal-divider hr, .fg-menu .horizontal-divider span { padding:0; margin:5px .6em; }
 118+.fg-menu .horizontal-divider hr { border:0; height:1px; }
 119+.fg-menu .horizontal-divider span { font-size:.9em; text-transform: uppercase; padding-left:.2em; }
 120+
Property changes on: branches/js2-work/phase3/js/mwEmbed/jquery/plugins/jquery.menu/jquery.menu.css
___________________________________________________________________
Name: svn:mergeinfo
1121 + /branches/REL1_15/phase3/js2/mwEmbed/libTimedText/jQuery.menu.css:51646
/branches/sqlite/js2/mwEmbed/libTimedText/jQuery.menu.css:58211-58321
Index: branches/js2-work/phase3/js/mwEmbed/jquery/plugins/jquery.menu/jquery.menu.js
——@@ -0,0 +1,788 @@
 2+/*--------------------------------------------------------------------
 3+Scripts for creating and manipulating custom menus based on standard <ul> markup
 4+Version: 3.0, 03.31.2009
 5+
 6+By: Maggie Costello Wachs (maggie@filamentgroup.com) and Scott Jehl (scott@filamentgroup.com)
 7+ http://www.filamentgroup.com
 8+ * reference articles: http://www.filamentgroup.com/lab/jquery_ipod_style_drilldown_menu/
 9+
 10+Copyright (c) 2009 Filament Group
 11+Dual licensed under the MIT (filamentgroup.com/examples/mit-license.txt) and GPL (filamentgroup.com/examples/gpl-license.txt) licenses.
 12+
 13+NOTE: mvEmbed will switch to jquery ui menu once that is released
 14+--------------------------------------------------------------------*/
 15+
 16+
 17+var allUIMenus = [];
 18+
 19+(function($) {
 20+
 21+
 22+/**
 23+* Utility line item ( li ) from text string function
 24+*
 25+* @param {String} string Text to display for the menu item
 26+* @param {String} icon jQuery UI icon key displayed to the left of the menu item
 27+* @param {Function} callback Function called once the line item is selected
 28+*/
 29+$.getLineItem = function( string, icon , callback) {
 30+ var $li = $j( '<li>' ).append(
 31+ $j('<a>')
 32+ .attr('href', '#')
 33+ .click( callback )
 34+ )
 35+ if( icon ) {
 36+ $li.find( 'a' ).append(
 37+ $j('<span style="float:left;"></span>')
 38+ .addClass( 'ui-icon ui-icon-' + icon )
 39+ )
 40+ }
 41+ $li.find( 'a' ).append( $j('<span>').text( string ) );
 42+ //mw.log(' li html: ' + $j('<div>').append( $li ).html() );
 43+ return $li;
 44+};
 45+
 46+$.fn.menu = function( options ) {
 47+ var caller = this;
 48+ var options = options;
 49+ if( ! caller.m ) {
 50+ caller.m = new Menu(caller, options);
 51+ allUIMenus.push( caller.m );
 52+
 53+
 54+ //Set up bindings:
 55+ $(this)
 56+ .mousedown(function() {
 57+ if (!caller.m.menuOpen) { caller.m.showLoading(); };
 58+ })
 59+ .click(function() {
 60+ if (caller.m.menuOpen == false) {
 61+ caller.m.showMenu();
 62+ }else {
 63+ caller.m.kill();
 64+ };
 65+ return false;
 66+ });
 67+ }
 68+
 69+ //Check for autoShow menu option
 70+ if( options.autoShow ) {
 71+ // ( handle async build out)
 72+ setTimeout(function() {
 73+ caller.m.showLoading();
 74+ caller.m.showMenu();
 75+ }, 0 );
 76+ }
 77+
 78+ //Else process the request:
 79+ if( options == 'show' ){
 80+ caller.m.showMenu();
 81+ }
 82+
 83+ return this;
 84+};
 85+
 86+function Menu(caller, options) {
 87+ var menu = this;
 88+ var caller = $(caller);
 89+
 90+ mw.log( 'target container: ' + options.targetMenuContainer );
 91+
 92+ var callerClassList = 'fg-menu-container ui-widget ui-widget-content ui-corner-all';
 93+ if( options.targetMenuContainer ) {
 94+ var container = $( options.targetMenuContainer )
 95+ .addClass( callerClassList )
 96+ .html( options.content )
 97+ }else{
 98+ var container = $('<div>').addClass( callerClassList ).html( options.content );
 99+ }
 100+
 101+
 102+ this.menuOpen = false;
 103+ this.menuExists = false;
 104+
 105+ var options = jQuery.extend( {
 106+ content: null,
 107+ autoShow: false,
 108+ width: 180, // width of menu container, must be set or passed in to calculate widths of child menus
 109+ maxHeight: 180, // max height of menu (if a drilldown: height does not include breadcrumb)
 110+ targetMenuContainer: null,
 111+ zindex: 2,
 112+ positionOpts: {
 113+ posX: 'left',
 114+ posY: 'bottom',
 115+ offsetX: 0,
 116+ offsetY: 0,
 117+ directionH: 'right',
 118+ directionV: 'down',
 119+ detectH: true, // do horizontal collision detection
 120+ detectV: true, // do vertical collision detection
 121+ linkToFront: false
 122+ },
 123+ showSpeed: 200, // show/hide speed in milliseconds
 124+ callerOnState: 'ui-state-active', // class to change the appearance of the link/button when the menu is showing
 125+ loadingState: 'ui-state-loading', // class added to the link/button while the menu is created
 126+ linkHover: 'ui-state-hover', // class for menu option hover state
 127+ linkHoverSecondary: 'li-hover', // alternate class, may be used for multi-level menus
 128+ // ----- multi-level menu defaults -----
 129+ crossSpeed: 200, // cross-fade speed for multi-level menus
 130+ crumbDefaultText: 'Choose an option:',
 131+ backLink: true, // in the ipod-style menu: instead of breadcrumbs, show only a 'back' link
 132+ backLinkText: 'Back',
 133+ flyOut: false, // multi-level menus are ipod-style by default; this parameter overrides to make a flyout instead
 134+ flyOutOnState: 'ui-state-default',
 135+ // class to style the link (specifically, a span within the link) used in the multi-level menu to show the next level
 136+ nextMenuLink: 'ui-icon-triangle-1-e',
 137+ topLinkText: 'All',
 138+ nextCrumbLink: 'ui-icon-carat-1-e'
 139+ }, options);
 140+
 141+
 142+ // Apply some custom css to container
 143+ container.css( {
 144+ 'left' : '0px',
 145+ 'z-index': options.zindex
 146+ } );
 147+
 148+ var killAllMenus = function() {
 149+ $.each(allUIMenus, function(i) {
 150+ if (allUIMenus[i].menuOpen) { allUIMenus[i].kill(); };
 151+ });
 152+ };
 153+
 154+ this.kill = function() {
 155+ caller
 156+ .removeClass(options.loadingState)
 157+ .removeClass('fg-menu-open')
 158+ .removeClass(options.callerOnState);
 159+ container.find('li').removeClass(options.linkHoverSecondary).find('a').removeClass(options.linkHover);
 160+ if (options.flyOutOnState) { container.find('li a').removeClass(options.flyOutOnState); };
 161+ if (options.callerOnState) { caller.removeClass(options.callerOnState); };
 162+ if (container.is('.fg-menu-ipod')) { menu.resetDrilldownMenu(); };
 163+ if (container.is('.fg-menu-flyout')) { menu.resetFlyoutMenu(); };
 164+ container.parent().hide();
 165+ menu.menuOpen = false;
 166+ $(document).unbind('click', killAllMenus);
 167+ $(document).unbind('keydown');
 168+ };
 169+
 170+ this.showLoading = function() {
 171+ caller.addClass(options.loadingState);
 172+ };
 173+
 174+ this.showMenu = function() {
 175+ mw.log('$j.menu:: show menu' );
 176+ killAllMenus();
 177+ mw.log('done:: killAllMenus' );
 178+ if ( ! menu.menuExists) {
 179+ menu.create()
 180+ };
 181+ mw.log('done:: menu.create' );
 182+ caller
 183+ .addClass('fg-menu-open')
 184+ .addClass(options.callerOnState);
 185+ container.parent().show().click(function() {
 186+ menu.kill();
 187+ return false;
 188+ });
 189+ mw.log('done:: menu. binding container' );
 190+
 191+ container.hide().slideDown(options.showSpeed).find('.fg-menu:eq(0)');
 192+ menu.menuOpen = true;
 193+ caller.removeClass(options.loadingState);
 194+ $(document).click(killAllMenus);
 195+
 196+ // assign key events
 197+ $(document).keydown(function(event) {
 198+ var e;
 199+ if (event.which !="") { e = event.which; }
 200+ else if (event.charCode != "") { e = event.charCode; }
 201+ else if (event.keyCode != "") { e = event.keyCode; }
 202+
 203+ var menuType = ($(event.target).parents('div').is('.fg-menu-flyout')) ? 'flyout' : 'ipod' ;
 204+
 205+ switch(e) {
 206+ case 37: // left arrow
 207+ if (menuType == 'flyout') {
 208+ $(event.target).trigger('mouseout');
 209+ if ($('.'+options.flyOutOnState).size() > 0) { $('.'+options.flyOutOnState).trigger('mouseover'); };
 210+ };
 211+
 212+ if (menuType == 'ipod') {
 213+ $(event.target).trigger('mouseout');
 214+ if ($('.fg-menu-footer').find('a').size() > 0) { $('.fg-menu-footer').find('a').trigger('click'); };
 215+ if ($('.fg-menu-header').find('a').size() > 0) { $('.fg-menu-current-crumb').prev().find('a').trigger('click'); };
 216+ if ($('.fg-menu-current').prev().is('.fg-menu-indicator')) {
 217+ $('.fg-menu-current').prev().trigger('mouseover');
 218+ };
 219+ };
 220+ return false;
 221+ break;
 222+
 223+ case 38: // up arrow
 224+ if ($(event.target).is('.' + options.linkHover)) {
 225+ var prevLink = $(event.target).parent().prev().find('a:eq(0)');
 226+ if (prevLink.size() > 0) {
 227+ $(event.target).trigger('mouseout');
 228+ prevLink.trigger('mouseover');
 229+ };
 230+ }
 231+ else { container.find('a:eq(0)').trigger('mouseover'); }
 232+ return false;
 233+ break;
 234+
 235+ case 39: // right arrow
 236+ if ($(event.target).is('.fg-menu-indicator')) {
 237+ if (menuType == 'flyout') {
 238+ $(event.target).next().find('a:eq(0)').trigger('mouseover');
 239+ }
 240+ else if (menuType == 'ipod') {
 241+ $(event.target).trigger('click');
 242+ setTimeout(function() {
 243+ $(event.target).next().find('a:eq(0)').trigger('mouseover');
 244+ }, options.crossSpeed);
 245+ };
 246+ };
 247+ return false;
 248+ break;
 249+
 250+ case 40: // down arrow
 251+ if ($(event.target).is('.' + options.linkHover)) {
 252+ var nextLink = $(event.target).parent().next().find('a:eq(0)');
 253+ if (nextLink.size() > 0) {
 254+ $(event.target).trigger('mouseout');
 255+ nextLink.trigger('mouseover');
 256+ };
 257+ }
 258+ else { container.find('a:eq(0)').trigger('mouseover'); }
 259+ return false;
 260+ break;
 261+
 262+ case 27: // escape
 263+ killAllMenus();
 264+ break;
 265+
 266+ case 13: // enter
 267+ if ($(event.target).is('.fg-menu-indicator') && menuType == 'ipod') {
 268+ $(event.target).trigger('click');
 269+ setTimeout(function() {
 270+ $(event.target).next().find('a:eq(0)').trigger('mouseover');
 271+ }, options.crossSpeed);
 272+ };
 273+ break;
 274+ };
 275+ });
 276+ };
 277+
 278+ this.create = function() {
 279+ mw.log( "jquery.menu.create ");
 280+ container.css({
 281+ 'width' : options.width
 282+ })
 283+ .appendTo('body')
 284+ .find( 'ul:first' )
 285+ .not( '.fg-menu-breadcrumb' )
 286+ .addClass('fg-menu');
 287+
 288+
 289+ container.find('ul, li a').addClass('ui-corner-all');
 290+
 291+ // aria roles & attributes
 292+ container.find( 'ul' ).attr('role', 'menu').eq(0).attr('aria-activedescendant','active-menuitem').attr('aria-labelledby', caller.attr('id'));
 293+ container.find( 'li' ).attr('role', 'menuitem');
 294+ container.find( 'li:has(ul)' ).attr('aria-haspopup', 'true').find('ul').attr('aria-expanded', 'false');
 295+ container.find( 'a' ).attr('tabindex', '-1');
 296+
 297+ // when there are multiple levels of hierarchy, create flyout or drilldown menu
 298+ if ( container.find( 'ul' ).size() > 1 ) {
 299+ if ( options.flyOut ) {
 300+ mw.log(" call menu.flyout ");
 301+ menu.flyout(container, options);
 302+ } else {
 303+ mw.log(" call menu.drilldown ");
 304+ menu.drilldown(container, options);
 305+ }
 306+ } else {
 307+ container.find( 'a' ).click( function() {
 308+ menu.chooseItem( this );
 309+ return false;
 310+ } );
 311+ };
 312+
 313+ if (options.linkHover) {
 314+ var allLinks = container.find('.fg-menu li a');
 315+ allLinks.hover(
 316+ function() {
 317+ var menuitem = $(this);
 318+ $('.'+options.linkHover).removeClass(options.linkHover).blur().parent().removeAttr('id');
 319+ $(this).addClass(options.linkHover).focus().parent().attr('id','active-menuitem');
 320+ },
 321+ function() {
 322+ $(this).removeClass(options.linkHover).blur().parent().removeAttr('id');
 323+ }
 324+ );
 325+ };
 326+
 327+ if (options.linkHoverSecondary) {
 328+ container.find('.fg-menu li').hover(
 329+ function() {
 330+ $(this).siblings('li').removeClass(options.linkHoverSecondary);
 331+ if (options.flyOutOnState) { $(this).siblings('li').find('a').removeClass(options.flyOutOnState); }
 332+ $(this).addClass(options.linkHoverSecondary);
 333+ },
 334+ function() { $(this).removeClass(options.linkHoverSecondary); }
 335+ );
 336+ };
 337+
 338+ menu.setPosition(container, caller, options);
 339+ menu.menuExists = true;
 340+ };
 341+
 342+ this.chooseItem = function(item) {
 343+ menu.kill();
 344+ if( options.selectItemCallback )
 345+ options.selectItemCallback( item );
 346+ };
 347+};
 348+
 349+Menu.prototype.flyout = function(container, options) {
 350+ var menu = this;
 351+
 352+ this.resetFlyoutMenu = function() {
 353+ var allLists = container.find('ul ul');
 354+ allLists.removeClass('ui-widget-content').hide();
 355+ };
 356+
 357+ container.addClass('fg-menu-flyout').find('li:has(ul)').each(function() {
 358+ var linkWidth = container.width();
 359+ var showTimer, hideTimer;
 360+ var allSubLists = $(this).find('ul');
 361+
 362+ allSubLists.css({ left: linkWidth, width: linkWidth }).hide();
 363+
 364+ $(this).find('a:eq(0)').addClass('fg-menu-indicator').html(
 365+ '<span>' + $(this).find('a:eq(0)').html() +
 366+ '</span><span class="ui-icon '+options.nextMenuLink+'"></span>')
 367+ .hover(
 368+ function() {
 369+ clearTimeout(hideTimer);
 370+ var subList = $(this).next();
 371+ if (!fitVertical(subList, $(this).offset().top)) { subList.css({ top: 'auto', bottom: 0 }); };
 372+ if (!fitHorizontal(subList, $(this).offset().left + 100)) { subList.css({ left: 'auto', right: linkWidth, 'z-index': 1005 }); };
 373+ showTimer = setTimeout(function() {
 374+ subList.addClass('ui-widget-content').show(options.showSpeed).attr('aria-expanded', 'true');
 375+ }, 300);
 376+ },
 377+ function() {
 378+ clearTimeout(showTimer);
 379+ var subList = $(this).next();
 380+ hideTimer = setTimeout(function() {
 381+ subList.removeClass('ui-widget-content').hide(options.showSpeed).attr('aria-expanded', 'false');
 382+ }, 400);
 383+ }
 384+ );
 385+
 386+ $(this).find('ul a').hover(
 387+ function() {
 388+ clearTimeout(hideTimer);
 389+ if ($(this).parents('ul').prev().is('a.fg-menu-indicator')) {
 390+ $(this).parents('ul').prev().addClass(options.flyOutOnState);
 391+ }
 392+ },
 393+ function() {
 394+ hideTimer = setTimeout(function() {
 395+ allSubLists.hide(options.showSpeed);
 396+ container.find(options.flyOutOnState).removeClass(options.flyOutOnState);
 397+ }, 500);
 398+ }
 399+ );
 400+ });
 401+
 402+ container.find('a').click(function() {
 403+ menu.chooseItem(this);
 404+ return false;
 405+ });
 406+};
 407+
 408+
 409+Menu.prototype.drilldown = function(container, options) {
 410+ var menu = this;
 411+ var topList = container.find('.fg-menu');
 412+ var breadcrumb = $('<ul class="fg-menu-breadcrumb ui-widget-header ui-corner-all ui-helper-clearfix"></ul>');
 413+ var crumbDefaultHeader = $('<li class="fg-menu-breadcrumb-text">'+options.crumbDefaultText+'</li>');
 414+ var firstCrumbText = (options.backLink) ? options.backLinkText : options.topLinkText;
 415+ var firstCrumbClass = (options.backLink) ? 'fg-menu-prev-list' : 'fg-menu-all-lists';
 416+ var firstCrumbLinkClass = (options.backLink) ? 'ui-state-default ui-corner-all' : '';
 417+ var firstCrumbIcon = (options.backLink) ? '<span class="ui-icon ui-icon-triangle-1-w"></span>' : '';
 418+ var firstCrumb = $('<li class="'+firstCrumbClass+'"><a href="#" class="'+firstCrumbLinkClass+'">'+firstCrumbIcon+firstCrumbText+'</a></li>');
 419+
 420+ container.addClass('fg-menu-ipod');
 421+
 422+ if (options.backLink) { breadcrumb.addClass('fg-menu-footer').appendTo(container).hide(); }
 423+ else { breadcrumb.addClass('fg-menu-header').prependTo(container); };
 424+ breadcrumb.append(crumbDefaultHeader);
 425+
 426+ var checkMenuHeight = function(el) {
 427+ if (el.height() > options.maxHeight) { el.addClass('fg-menu-scroll') };
 428+ el.css({
 429+ height: options.maxHeight-30
 430+ });
 431+ };
 432+
 433+ var resetChildMenu = function(el) { el.removeClass('fg-menu-scroll').removeClass('fg-menu-current').height('auto'); };
 434+
 435+ this.resetDrilldownMenu = function() {
 436+ $('.fg-menu-current').removeClass('fg-menu-current');
 437+ topList.animate({ left: 0 }, options.crossSpeed, function() {
 438+ $(this).find('ul').each(function() {
 439+ $(this).hide();
 440+ resetChildMenu($(this));
 441+ });
 442+ topList.addClass('fg-menu-current');
 443+ });
 444+ $('.fg-menu-all-lists').find('span').remove();
 445+ breadcrumb.empty().append(crumbDefaultHeader);
 446+ $('.fg-menu-footer').empty().hide();
 447+ checkMenuHeight(topList);
 448+ };
 449+
 450+ topList
 451+ .addClass('fg-menu-content fg-menu-current ui-widget-content ui-helper-clearfix')
 452+ .css({ width: container.width() })
 453+ .find('ul')
 454+ .css({ width: container.width(), left: container.width() })
 455+ .addClass('ui-widget-content')
 456+ .hide();
 457+ checkMenuHeight(topList);
 458+
 459+ topList.find('a').each(function() {
 460+ // if the link opens a child menu:
 461+ if ($(this).next().is('ul')) {
 462+ $(this)
 463+ .addClass('fg-menu-indicator')
 464+ .each(function() { $(this).html('<span>' + $(this).html() + '</span><span class="ui-icon '+options.nextMenuLink+'"></span>'); })
 465+ .click(function() { // ----- show the next menu
 466+ var nextList = $(this).next();
 467+ var parentUl = $(this).parents('ul:eq(0)');
 468+ var parentLeft = (parentUl.is('.fg-menu-content')) ? 0 : parseFloat(topList.css('left'));
 469+ var nextLeftVal = Math.round(parentLeft - parseFloat(container.width()));
 470+ var footer = $('.fg-menu-footer');
 471+
 472+ // show next menu
 473+ resetChildMenu(parentUl);
 474+ checkMenuHeight(nextList);
 475+ topList.animate({ left: nextLeftVal }, options.crossSpeed);
 476+ nextList.show().addClass('fg-menu-current').attr('aria-expanded', 'true');
 477+
 478+ var setPrevMenu = function(backlink) {
 479+ var b = backlink;
 480+ var c = $('.fg-menu-current');
 481+ var prevList = c.parents('ul:eq(0)');
 482+ c.hide().attr('aria-expanded', 'false');
 483+ resetChildMenu(c);
 484+ checkMenuHeight(prevList);
 485+ prevList.addClass('fg-menu-current').attr('aria-expanded', 'true');
 486+ if (prevList.hasClass('fg-menu-content')) { b.remove(); footer.hide(); };
 487+ };
 488+
 489+ // initialize "back" link
 490+ if (options.backLink) {
 491+ if (footer.find('a').size() == 0) {
 492+ footer.show();
 493+ $('<a href="#"><span class="ui-icon ui-icon-triangle-1-w"></span> <span>Back</span></a>')
 494+ .appendTo(footer)
 495+ .click(function() { // ----- show the previous menu
 496+ var b = $(this);
 497+ var prevLeftVal = parseFloat(topList.css('left')) + container.width();
 498+ topList.animate({ left: prevLeftVal }, options.crossSpeed, function() {
 499+ setPrevMenu(b);
 500+ });
 501+ return false;
 502+ });
 503+ }
 504+ }
 505+ // or initialize top breadcrumb
 506+ else {
 507+ if (breadcrumb.find('li').size() == 1) {
 508+ breadcrumb.empty().append(firstCrumb);
 509+ firstCrumb.find('a').click(function() {
 510+ menu.resetDrilldownMenu();
 511+ return false;
 512+ });
 513+ }
 514+ $('.fg-menu-current-crumb').removeClass('fg-menu-current-crumb');
 515+ var crumbText = $(this).find('span:eq(0)').text();
 516+ var newCrumb = $('<li class="fg-menu-current-crumb"><a href="javascript://" class="fg-menu-crumb">'+crumbText+'</a></li>');
 517+ newCrumb
 518+ .appendTo(breadcrumb)
 519+ .find('a').click(function() {
 520+ if ($(this).parent().is('.fg-menu-current-crumb')) {
 521+ menu.chooseItem(this);
 522+ }
 523+ else {
 524+ var newLeftVal = - ($('.fg-menu-current').parents('ul').size() - 1) * 180;
 525+ topList.animate({ left: newLeftVal }, options.crossSpeed, function() {
 526+ setPrevMenu();
 527+ });
 528+
 529+ // make this the current crumb, delete all breadcrumbs after this one, and navigate to the relevant menu
 530+ $(this).parent().addClass('fg-menu-current-crumb').find('span').remove();
 531+ $(this).parent().nextAll().remove();
 532+ };
 533+ return false;
 534+ });
 535+ newCrumb.prev().append(' <span class="ui-icon '+options.nextCrumbLink+'"></span>');
 536+ };
 537+ return false;
 538+ });
 539+ }
 540+ // if the link is a leaf node (doesn't open a child menu)
 541+ else {
 542+ $(this).click(function() {
 543+ menu.chooseItem(this);
 544+ return false;
 545+ });
 546+ };
 547+ });
 548+};
 549+
 550+
 551+/* Menu.prototype.setPosition parameters (defaults noted with *):
 552+ referrer = the link (or other element) used to show the overlaid object
 553+ settings = can override the defaults:
 554+ - posX/Y: where the top left corner of the object should be positioned in relation to its referrer.
 555+ X: left*, center, right
 556+ Y: top, center, bottom*
 557+ - offsetX/Y: the number of pixels to be offset from the x or y position. Can be a positive or negative number.
 558+ - directionH/V: where the entire menu should appear in relation to its referrer.
 559+ Horizontal: left*, right
 560+ Vertical: up, down*
 561+ - detectH/V: detect the viewport horizontally / vertically
 562+ - linkToFront: copy the menu link and place it on top of the menu (visual effect to make it look like it overlaps the object) */
 563+
 564+Menu.prototype.setPosition = function(widget, caller, options) {
 565+ mw.log( 'setPosition' );
 566+
 567+ var el = widget;
 568+ var referrer = caller;
 569+ var dims = {
 570+ refX: referrer.offset().left,
 571+ refY: referrer.offset().top,
 572+ refW: referrer.getTotalWidth(),
 573+ refH: referrer.getTotalHeight()
 574+ };
 575+ var options = options;
 576+ var xVal, yVal;
 577+
 578+ var helper = $( '<div class="menuPositionHelper">' );
 579+ helper.css( 'z-index', options.zindex );
 580+
 581+ mw.log("set z-index");
 582+
 583+ // Hard code width height of button if unset ( crazy IE )
 584+ if( isNaN( dims.refW ) || isNaN( dims.refH ) ) {
 585+ dims.refH = 16;
 586+ dims.refW = 23;
 587+ }
 588+ helper.css({
 589+ 'position': 'absolute',
 590+ 'left': dims.refX,
 591+ 'top': dims.refY,
 592+ 'width': dims.refW,
 593+ 'height': dims.refH
 594+ });
 595+
 596+ mw.log("set helper.css ");
 597+
 598+ el.wrap( helper );
 599+
 600+ mw.log("wrap helper");
 601+
 602+ xVal = yVal = 0;
 603+ // get X pos
 604+ switch( options.positionOpts.posX ) {
 605+ case 'left': xVal = 0;
 606+ break;
 607+ case 'center': xVal = dims.refW / 2;
 608+ break;
 609+ case 'right': xVal = dims.refW;
 610+ break;
 611+ };
 612+
 613+ // get Y pos
 614+ switch( options.positionOpts.posY ) {
 615+ case 'top' : yVal = 0;
 616+ break;
 617+ case 'center' : yVal = dims.refH / 2;
 618+ break;
 619+ case 'bottom' : yVal = dims.refH;
 620+ break;
 621+ };
 622+
 623+ // add the offsets (zero by default)
 624+ xVal += ( options.positionOpts.offsetX )? options.positionOpts.offsetX : 0;
 625+ yVal += ( options.positionOpts.offsetY )? options.positionOpts.offsetY : 0;
 626+
 627+ mw.log(" about to position: " + yVal );
 628+ // position the object vertically
 629+ if (options.positionOpts.directionV == 'up') {
 630+ el.css( {
 631+ 'top': 'auto',
 632+ 'bottom': yVal
 633+ } );
 634+ if (options.positionOpts.detectV && !fitVertical(el)) {
 635+ el.css({
 636+ 'bottom' : 'auto',
 637+ 'top' : yVal
 638+ });
 639+ }
 640+ } else {
 641+ el.css({
 642+ 'bottom' : 'auto',
 643+ 'top' : yVal
 644+ });
 645+ if (options.positionOpts.detectV && !fitVertical(el)) {
 646+ el.css({
 647+ 'top' : 'auto',
 648+ 'bottom' : yVal
 649+ });
 650+ }
 651+ };
 652+
 653+ mw.log(" done with add the offsets && position the object vertically");
 654+
 655+ // and horizontally
 656+ if (options.positionOpts.directionH == 'left') {
 657+ el.css({ left: 'auto', right: xVal });
 658+ if (options.positionOpts.detectH && !fitHorizontal(el)) {
 659+ el.css({ right: 'auto', left: xVal });
 660+ }
 661+ }
 662+ else {
 663+ el.css({ right: 'auto', left: xVal });
 664+ if (options.positionOpts.detectH && !fitHorizontal(el)) {
 665+ el.css({ left: 'auto', right: xVal });
 666+ }
 667+ };
 668+
 669+ mw.log(" done with position the object horizontally");
 670+
 671+ // if specified, clone the referring element and position it so that it appears on top of the menu
 672+ if (options.positionOpts.linkToFront) {
 673+ referrer.clone().addClass('linkClone').css({
 674+ position: 'absolute',
 675+ top: 0,
 676+ right: 'auto',
 677+ bottom: 'auto',
 678+ left: 0,
 679+ width: referrer.width(),
 680+ height: referrer.height()
 681+ }).insertAfter(el);
 682+ };
 683+ mw.log('done with all');
 684+};
 685+
 686+
 687+/* Utilities to sort and find viewport dimensions */
 688+
 689+function sortBigToSmall(a, b) { return b - a; };
 690+
 691+jQuery.fn.getTotalWidth = function() {
 692+ return $(this).width() + parseInt($(this).css('paddingRight')) + parseInt($(this).css('paddingLeft')) + parseInt($(this).css('borderRightWidth')) + parseInt($(this).css('borderLeftWidth'));
 693+};
 694+
 695+jQuery.fn.getTotalHeight = function() {
 696+ return $(this).height() + parseInt($(this).css('paddingTop')) + parseInt($(this).css('paddingBottom')) + parseInt($(this).css('borderTopWidth')) + parseInt($(this).css('borderBottomWidth'));
 697+};
 698+
 699+function getScrollTop() {
 700+ return self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
 701+};
 702+
 703+function getScrollLeft() {
 704+ return self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
 705+};
 706+
 707+function getWindowHeight() {
 708+ var de = document.documentElement;
 709+ return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;
 710+};
 711+
 712+function getWindowWidth() {
 713+ var de = document.documentElement;
 714+ return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;
 715+};
 716+
 717+/* Utilities to test whether an element will fit in the viewport
 718+ Parameters:
 719+ el = element to position, required
 720+ leftOffset / topOffset = optional parameter if the offset cannot be calculated (i.e., if the object is in the DOM but is set to display: 'none') */
 721+
 722+function fitHorizontal(el, leftOffset) {
 723+ var leftVal = parseInt(leftOffset) || $(el).offset().left;
 724+ return (leftVal + $(el).width() <= getWindowWidth() + getScrollLeft() && leftVal - getScrollLeft() >= 0);
 725+};
 726+
 727+function fitVertical(el, topOffset) {
 728+ var topVal = parseInt(topOffset) || $(el).offset().top;
 729+ return (topVal + $(el).height() <= getWindowHeight() + getScrollTop() && topVal - getScrollTop() >= 0);
 730+};
 731+
 732+/*--------------------------------------------------------------------
 733+ * javascript method: "pxToEm"
 734+ * by:
 735+ Scott Jehl (scott@filamentgroup.com)
 736+ Maggie Wachs (maggie@filamentgroup.com)
 737+ http://www.filamentgroup.com
 738+ *
 739+ * Copyright (c) 2008 Filament Group
 740+ * Dual licensed under the MIT (filamentgroup.com/examples/mit-license.txt) and GPL (filamentgroup.com/examples/gpl-license.txt) licenses.
 741+ *
 742+ * Description: Extends the native Number and String objects with pxToEm method. pxToEm converts a pixel value to ems depending on inherited font size.
 743+ * Article: http://www.filamentgroup.com/lab/retaining_scalable_interfaces_with_pixel_to_em_conversion/
 744+ * Demo: http://www.filamentgroup.com/examples/pxToEm/
 745+ *
 746+ * Options:
 747+ scope: string or jQuery selector for font-size scoping
 748+ reverse: Boolean, true reverses the conversion to em-px
 749+ * Dependencies: jQuery library
 750+ * Usage Example: myPixelValue.pxToEm(); or myPixelValue.pxToEm({'scope':'#navigation', reverse: true});
 751+ *
 752+ * Version: 2.0, 08.01.2008
 753+ * Changelog:
 754+ * 08.02.2007 initial Version 1.0
 755+ * 08.01.2008 - fixed font-size calculation for IE
 756+--------------------------------------------------------------------*/
 757+
 758+Number.prototype.pxToEm = String.prototype.pxToEm = function(settings) {
 759+ //set defaults
 760+ settings = jQuery.extend({
 761+ scope: 'body',
 762+ reverse: false
 763+ }, settings);
 764+
 765+ var pxVal = (this == '') ? 0 : parseFloat(this);
 766+ var scopeVal;
 767+ var getWindowWidth = function() {
 768+ var de = document.documentElement;
 769+ return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;
 770+ };
 771+
 772+ /* When a percentage-based font-size is set on the body, IE returns that percent of the window width as the font-size.
 773+ For example, if the body font-size is 62.5% and the window width is 1000px, IE will return 625px as the font-size.
 774+ When this happens, we calculate the correct body font-size (%) and multiply it by 16 (the standard browser font size)
 775+ to get an accurate em value. */
 776+
 777+ if (settings.scope == 'body' && $.browser.msie && (parseFloat($('body').css('font-size')) / getWindowWidth()).toFixed(1) > 0.0) {
 778+ var calcFontSize = function() {
 779+ return (parseFloat($('body').css('font-size'))/getWindowWidth()).toFixed(3) * 16;
 780+ };
 781+ scopeVal = calcFontSize();
 782+ }
 783+ else { scopeVal = parseFloat(jQuery(settings.scope).css("font-size")); };
 784+
 785+ var result = (settings.reverse == true) ? (pxVal * scopeVal).toFixed(2) + 'px' : (pxVal / scopeVal).toFixed(2) + 'em';
 786+ return result;
 787+};
 788+
 789+} )(jQuery);
\ No newline at end of file
Property changes on: branches/js2-work/phase3/js/mwEmbed/jquery/plugins/jquery.menu/jquery.menu.js
___________________________________________________________________
Name: svn:mergeinfo
1790 + /branches/REL1_15/phase3/js2/mwEmbed/libTimedText/jQuery.menu.js:51646
/branches/sqlite/js2/mwEmbed/libTimedText/jQuery.menu.js:58211-58321
Property changes on: branches/js2-work/phase3/js/mwEmbed/jquery/plugins/jquery.menu
___________________________________________________________________
Name: svn:mergeinfo
2791 + /branches/REL1_15/phase3/js2/mwEmbed/libTimedText/jquery.menu:51646
/branches/sqlite/js2/mwEmbed/libTimedText/jquery.menu:58211-58321
Index: branches/js2-work/phase3/js/mwEmbed/loader.js
——@@ -130,6 +130,8 @@
131131 "mw.Language" : "languages/mw.Language.js",
132132 "$j.replaceText.js" : "jquery/plugins/jquery.replaceText.js",
133133
 134+ "$j.fn.menu" : "jquery/plugins/jquery.menu/jquery.menu.js",
 135+ "mw.style.jquerymenu" : "jquery/plugins/jquery.menu/jquery.menu.css",
134136
135137 "$j.fn.pngFix" : "jquery/plugins/jquery.pngFix.js",
136138 "$j.fn.autocomplete" : "jquery/plugins/jquery.autocomplete.js",
Index: branches/js2-work/phase3/js/mwEmbed/modules/TimedText/loader.js
——@@ -2,14 +2,12 @@
33 * TimedText loader.
44 */
55 mw.addClassFilePaths( {
6 - "mw.TimedText" : "modules/TimedText/mw.TimedText.js",
 6+ "mw.TimedText" : "modules/TimedText/mw.TimedText.js",
 7+ "mw.style.TimedText" : "modules/TimedText/css/mw.style.TimedText.css",
 8+
79 "mw.TimedTextEdit" : "modules/TimedText/mw.TimedTextEdit.js",
8 - "mw.style.TimedTextEdit" : "modules/TimedText/css/mw.TimedTextEdit.css",
 10+ "mw.style.TimedTextEdit" : "modules/TimedText/css/mw.style.TimedTextEdit.css",
911
10 - "$j.fn.menu" : "modules/TimedText/jquery.menu/jquery.menu.js",
11 - "mw.style.jquerymenu" : "modules/TimedText/jquery.menu/jquery.menu.css",
12 -
13 -
1412 "RemoteMwTimedText" : "modules/TimedText/remotes/RemoteMwTimedText.js"
1513 });
1614
——@@ -18,7 +16,8 @@
1917 mw.load( [
2018 '$j.fn.menu',
2119 'mw.TimedText',
22 - "mw.style.jquerymenu"
 20+ 'mw.style.TimedText',
 21+ 'mw.style.jquerymenu'
2322 ], function() {
2423 callback( 'TimedText' );
2524 } );
——@@ -31,7 +30,10 @@
3231 '$j.ui',
3332 '$j.fn.menu',
3433 "mw.style.jquerymenu",
 34+
3535 'mw.TimedText',
 36+ 'mw.style.TimedText',
 37+
3638 'mw.TimedTextEdit',
3739 'mw.style.TimedTextEdit'
3840 ],
Index: branches/js2-work/phase3/js/mwEmbed/modules/TimedText/mw.TimedText.js
——@@ -47,7 +47,7 @@
4848 "mwe-textcat-cue" : "Cue points"
4949 } );
5050
51 -// Bind to mw (for uncluttered global namespace)
 51+// Bind to mw ( for uncluttered global namespace )
5252 ( function( $ ) {
5353
5454 /**
——@@ -313,7 +313,7 @@
314314 // ( in case other interfaces want to access them )
315315 var embedSource = _this.embedPlayer.mediaElement.tryAddSource( textElm );
316316 // Get a "textSource" object:
317 - var source = new TextSource( embedSource, _this.textProvider);
 317+ var source = new TextSource( embedSource, _this.textProvider );
318318 _this.textSources.push( source );
319319 }
320320 // All sources loaded run callback:
——@@ -417,7 +417,8 @@
418418 }
419419 return false;
420420 },
421 - /*
 421+
 422+ /**
422423 * Get a source object by language, returns "false" if not found
423424 */
424425 getSourceByLanguage: function ( langKey ) {
——@@ -797,10 +798,7 @@
798799 'text-align':'center'
799800 })
800801 .append(
801 - $j('<span>').css({
802 - 'color':'white',
803 - 'background-color':'#333'
804 - })
 802+ $j('<span \>')
805803 )
806804
807805 // If in fullscreen mode update the text size:
Index: branches/js2-work/phase3/js/mwEmbed/modules/TimedText/css/mw.TimedTextEdit.css
——@@ -1,200 +0,0 @@
2 -.TimedTextEdit .leftcolumn #textinput textarea
3 -{
4 - width:512px;
5 - height:200px;
6 -}
7 -
8 -.TimedTextEdit .leftcolumn #textinput
9 -{
10 - display: block;
11 - margin: auto;
12 - position:absolute;
13 - top: 340px;
14 -}
15 -
16 -.TimedTextEdit .leftcolumn
17 -{
18 - padding: 10px;
19 - width: 890px;
20 - margin: auto;
21 -}
22 -
23 -.TimedTextEdit .rightcolumn {
24 - background-color:#606060;
25 - border:0 solid black;
26 - bottom:5px;
27 - color:#EFEFEF;
28 - left:215px;
29 - line-height:100%;
30 - margin-left:300px;
31 - padding:10px;
32 - position:absolute;
33 - right:5px;
34 - top:5px;
35 -}
36 -
37 -.TimedTextEdit .tabs
38 -{
39 - position:absolute;
40 - top: 530px;
41 -}
42 -
43 -.TimedTextEdit .tab{
44 - position:absolute;
45 - background:#888;
46 - border:1px solid black;
47 - height:30px;
48 - width:160px;
49 - padding:4px;
50 - text-align: center;
51 -}
52 -
53 -.TimedTextEdit .selected{
54 - background:#bbb;
55 - height:40px;
56 -}
57 -
58 -.TimedTextEdit #step1tab
59 -{
60 - left: 0px;
61 -}
62 -
63 -.TimedTextEdit #step2tab
64 -{
65 - left: 171px;
66 -}
67 -
68 -.TimedTextEdit #step3tab
69 -{
70 - left: 342px;
71 -}
72 -
73 -.TimedTextEdit .nextstep
74 -{
75 - position:absolute;
76 - top: 600px;
77 - left:197px;
78 - width:100px;
79 - height:25px;
80 - text-align:center;
81 - background:#77bb40;
82 - color:white;
83 - font-weight:bold;
84 - padding:12px;
85 - border: 1px solid black;
86 -}
87 -
88 -.TimedTextEdit #titles_list
89 -{
90 - background: #ddd;
91 - padding: 12px;
92 - text-align:center;
93 - position:absolute;
94 - top:340px;
95 - width:488px;
96 - height:164px;
97 -}
98 -
99 -.TimedTextEdit .current_title
100 -{
101 - font-size: larger;
102 - background: #dd8
103 -}
104 -
105 -.TimedTextEdit .time_in
106 -{
107 - font-size: xx-small;
108 - position:absolute;
109 - margin-top:2px;
110 - margin-left:2em;
111 -}
112 -
113 -.TimedTextEdit .time_out
114 -{
115 - font-size: xx-small;
116 - position:absolute;
117 - margin-top:2px;
118 - margin-left:438px;
119 -}
120 -
121 -.TimedTextEdit a {
122 - color:#aaa;
123 -}
124 -
125 -.TimedTextEdit video
126 -{
127 - height:290px;
128 - width:512px;
129 -}
130 -
131 -.TimedTextEdit .videodiv
132 -{
133 - display: block;
134 - margin: auto;
135 - position:absolute;
136 -}
137 -
138 -.TimedTextEdit .subtitles
139 -{
140 - width: 80%;
141 - margin: auto;
142 - position: relative;
143 - text-align: center;
144 - font-family: sans-serif;
145 - line-height: 2em;
146 - color: rgba(255,255,128, 1);
147 - text-shadow: rgba(0,0,0, 0.6) 1px 1px;
148 - background: rgba(0,0,0, 0.6);
149 -}
150 -
151 -.TimedTextEdit .subtitleslines1
152 -{
153 - top: -4.8em;
154 -}
155 -
156 -.TimedTextEdit.subtitleslines2
157 -{
158 - top: -6.8em;
159 -}
160 -
161 -.TimedTextEdit.subtitleslines3
162 -{
163 - top: -8.8em;
164 -}
165 -
166 -.TimedTextEdit input[type=number]
167 -{
168 - width:1.2em;
169 - padding:2px;
170 - background: #ffd;
171 - border:none;
172 -}
173 -/*
174 -.TimedTextEdit input[type=text]
175 -{
176 - background: #ffd;
177 - border:none;
178 -}
179 -*/
180 -
181 -.TimedTextEdit .hotkeybox {
182 - background: #333;
183 - padding: 5px;
184 - line-height: 200%;
185 - font-size: small;
186 - position:absolute;
187 - width:340px;
188 - bottom:10px;
189 -}
190 -
191 -.TimedTextEdit #titles_textarea {
192 - font-family: helvetica, sans-serif;
193 - line-height: 1.5em;
194 -}
195 -
196 -.TimedTextEdit .step-help{
197 - bottom:155px;
198 - overflow:auto;
199 - position:absolute;
200 - top:10px;
201 -}
\ No newline at end of file
Index: branches/js2-work/phase3/js/mwEmbed/modules/TimedText/css/mw.style.TimedText.css
——@@ -0,0 +1,18 @@
 2+.itext span {
 3+ color: white;
 4+ letter-spacing: 0.04em;
 5+ text-align: center;
 6+ /*
 7+ // Text shadow is too slow with current browsers use background-color
 8+ padding:8px 0;
 9+ text-shadow:0 2px 1px #000000, -1px 3px 1px #000000, -2px 2px 1px #000000, -2px 1px 1px #000000, -2px 0 1px #000000, 2px 2px 1px #000000, 1px 2px 1px #000000, 0 -2px 1px #000000, 2px -2px 1px #000000, -2px -1px 1px #000000, -1px -3px 1px #000000, -3px -2px 1px #000000, 0 0 25px #000000, 0 0 35px #000000, 0 0 35px #000000, 0 0 31px #FFFFFF, 0 0 31px #FFFFFF, 0 0 31px #FFFFFF;
 10+ */
 11+ background-color: #333;
 12+}
 13+.itext span a {
 14+ text-decoration: none;
 15+ color : #BBF;
 16+}
 17+.itext span a:visited{
 18+ color : #BBF;
 19+}
\ No newline at end of file
Index: branches/js2-work/phase3/js/mwEmbed/modules/TimedText/css/mw.style.TimedTextEdit.css
——@@ -0,0 +1,200 @@
 2+.TimedTextEdit .leftcolumn #textinput textarea
 3+{
 4+ width:512px;
 5+ height:200px;
 6+}
 7+
 8+.TimedTextEdit .leftcolumn #textinput
 9+{
 10+ display: block;
 11+ margin: auto;
 12+ position:absolute;
 13+ top: 340px;
 14+}
 15+
 16+.TimedTextEdit .leftcolumn
 17+{
 18+ padding: 10px;
 19+ width: 890px;
 20+ margin: auto;
 21+}
 22+
 23+.TimedTextEdit .rightcolumn {
 24+ background-color:#606060;
 25+ border:0 solid black;
 26+ bottom:5px;
 27+ color:#EFEFEF;
 28+ left:215px;
 29+ line-height:100%;
 30+ margin-left:300px;
 31+ padding:10px;
 32+ position:absolute;
 33+ right:5px;
 34+ top:5px;
 35+}
 36+
 37+.TimedTextEdit .tabs
 38+{
 39+ position:absolute;
 40+ top: 530px;
 41+}
 42+
 43+.TimedTextEdit .tab{
 44+ position:absolute;
 45+ background:#888;
 46+ border:1px solid black;
 47+ height:30px;
 48+ width:160px;
 49+ padding:4px;
 50+ text-align: center;
 51+}
 52+
 53+.TimedTextEdit .selected{
 54+ background:#bbb;
 55+ height:40px;
 56+}
 57+
 58+.TimedTextEdit #step1tab
 59+{
 60+ left: 0px;
 61+}
 62+
 63+.TimedTextEdit #step2tab
 64+{
 65+ left: 171px;
 66+}
 67+
 68+.TimedTextEdit #step3tab
 69+{
 70+ left: 342px;
 71+}
 72+
 73+.TimedTextEdit .nextstep
 74+{
 75+ position:absolute;
 76+ top: 600px;
 77+ left:197px;
 78+ width:100px;
 79+ height:25px;
 80+ text-align:center;
 81+ background:#77bb40;
 82+ color:white;
 83+ font-weight:bold;
 84+ padding:12px;
 85+ border: 1px solid black;
 86+}
 87+
 88+.TimedTextEdit #titles_list
 89+{
 90+ background: #ddd;
 91+ padding: 12px;
 92+ text-align:center;
 93+ position:absolute;
 94+ top:340px;
 95+ width:488px;
 96+ height:164px;
 97+}
 98+
 99+.TimedTextEdit .current_title
 100+{
 101+ font-size: larger;
 102+ background: #dd8
 103+}
 104+
 105+.TimedTextEdit .time_in
 106+{
 107+ font-size: xx-small;
 108+ position:absolute;
 109+ margin-top:2px;
 110+ margin-left:2em;
 111+}
 112+
 113+.TimedTextEdit .time_out
 114+{
 115+ font-size: xx-small;
 116+ position:absolute;
 117+ margin-top:2px;
 118+ margin-left:438px;
 119+}
 120+
 121+.TimedTextEdit a {
 122+ color:#aaa;
 123+}
 124+
 125+.TimedTextEdit video
 126+{
 127+ height:290px;
 128+ width:512px;
 129+}
 130+
 131+.TimedTextEdit .videodiv
 132+{
 133+ display: block;
 134+ margin: auto;
 135+ position:absolute;
 136+}
 137+
 138+.TimedTextEdit .subtitles
 139+{
 140+ width: 80%;
 141+ margin: auto;
 142+ position: relative;
 143+ text-align: center;
 144+ font-family: sans-serif;
 145+ line-height: 2em;
 146+ color: rgba(255,255,128, 1);
 147+ text-shadow: rgba(0,0,0, 0.6) 1px 1px;
 148+ background: rgba(0,0,0, 0.6);
 149+}
 150+
 151+.TimedTextEdit .subtitleslines1
 152+{
 153+ top: -4.8em;
 154+}
 155+
 156+.TimedTextEdit.subtitleslines2
 157+{
 158+ top: -6.8em;
 159+}
 160+
 161+.TimedTextEdit.subtitleslines3
 162+{
 163+ top: -8.8em;
 164+}
 165+
 166+.TimedTextEdit input[type=number]
 167+{
 168+ width:1.2em;
 169+ padding:2px;
 170+ background: #ffd;
 171+ border:none;
 172+}
 173+/*
 174+.TimedTextEdit input[type=text]
 175+{
 176+ background: #ffd;
 177+ border:none;
 178+}
 179+*/
 180+
 181+.TimedTextEdit .hotkeybox {
 182+ background: #333;
 183+ padding: 5px;
 184+ line-height: 200%;
 185+ font-size: small;
 186+ position:absolute;
 187+ width:340px;
 188+ bottom:10px;
 189+}
 190+
 191+.TimedTextEdit #titles_textarea {
 192+ font-family: helvetica, sans-serif;
 193+ line-height: 1.5em;
 194+}
 195+
 196+.TimedTextEdit .step-help{
 197+ bottom:155px;
 198+ overflow:auto;
 199+ position:absolute;
 200+ top:10px;
 201+}
\ No newline at end of file
Property changes on: branches/js2-work/phase3/js/mwEmbed/modules/TimedText/css/mw.style.TimedTextEdit.css
___________________________________________________________________
Name: svn:mergeinfo
1202 + /branches/REL1_15/phase3/js2/mwEmbed/libTimedText/mw.TimedTextEdit.css:51646
/branches/sqlite/js2/mwEmbed/libTimedText/mw.TimedTextEdit.css:58211-58321
Index: branches/js2-work/phase3/js/mwEmbed/modules/TimedText/remotes/RemoteMwTimedText.js
——@@ -1,10 +1,8 @@
22 /**
3 -* Stop-gap for mediaWiki timed text support
 3+* Stop-gap for mediaWiki php based timed text support
44 *
55 * Does some transformations to normal wiki timed Text pages to make them look
66 * like the php output that we will eventually want to have
7 -
8 -wgArticleId
97 */
108 mw.addMessages( {
119 "mwe-language-subtitles-for-clip": "$1 subtitles for clip: $2",
Index: branches/js2-work/phase3/js/mwEmbed/modules/EmbedPlayer/skins/kskin/EmbedPlayer.css
——@@ -409,10 +409,4 @@
410410 width : 51px;
411411 height : 12px;
412412 cursor: pointer;
413 -}
414 -.k-player .itext a{
415 - color: #bbf;
416 -}
417 -.k-player .itext a:visited{
418 - color: #aaf;
419 -}
\ No newline at end of file
 413+}
\ No newline at end of file
Index: branches/js2-work/phase3/js/mwEmbed/modules/EmbedPlayer/skins/ctrlBuilder.js
——@@ -571,12 +571,17 @@
572572 * Hide the control bar.
573573 */
574574 hideControlBar : function(){
575 - var animateDuration = 'slow'
 575+ var animateDuration = 'slow';
576576 // Else hide the control bar ( if checkOverlayControls is still true )
577 - this.embedPlayer.$interface.find( '.control-bar').fadeOut( animateDuration );
578 - this.embedPlayer.$interface.find( '.itext' ).animate( {
 577+ this.embedPlayer.$interface.find( '.control-bar')
 578+ .stop()
 579+ .fadeOut( animateDuration );
 580+
 581+ this.embedPlayer.$interface.find( '.itext' )
 582+ .stop()
 583+ .animate( {
579584 'bottom' : 10
580 - }, animateDuration );
 585+ }, 'slow' );
581586
582587 },
583588
——@@ -584,14 +589,19 @@
585590 * Show the control bar
586591 */
587592 showControlBar : function(){
588 - var animateDuration = 'slow'
 593+ var animateDuration = 'slow';
 594+
 595+ // Move up itext if present
 596+ this.embedPlayer.$interface.find( '.itext' )
 597+ .animate(
 598+ {
 599+ 'bottom' : this.getHeight() + 10
 600+ },
 601+ animateDuration
 602+ );
589603 // Show controls
590 - this.embedPlayer.$interface.find( '.control-bar').fadeIn( animateDuration );
591 - // Move up itext if present
592 - this.embedPlayer.$interface.find( '.itext' ).animate( {
593 - 'bottom' : this.getHeight() + 10
594 - }, animateDuration );
595 -
 604+ this.embedPlayer.$interface.find( '.control-bar')
 605+ .fadeIn( animateDuration );
596606 },
597607
598608 /**

Status & tagging log