| Index: branches/new-upload/phase3/js2/mwEmbed/skins/mvpcf/styles.css |
| — | — | @@ -656,3 +656,20 @@ |
| 657 | 657 | position:absolute; |
| 658 | 658 | background-image: url('images/loading_bar_ani.gif'); |
| 659 | 659 | } |
| | 660 | + |
| | 661 | + |
| | 662 | + |
| | 663 | +.ui-icon_link { |
| | 664 | + padding: .4em 1em .4em 20px; |
| | 665 | + text-decoration: none; |
| | 666 | + position: relative; |
| | 667 | +} |
| | 668 | +.ui-icon_link span.ui-icon { |
| | 669 | + margin: 0 5px 0 0; |
| | 670 | + position: absolute; |
| | 671 | + left: .2em; |
| | 672 | + top: 50%; |
| | 673 | + margin-top: -8px; |
| | 674 | + zoom: 1; |
| | 675 | +} |
| | 676 | + |
| Index: branches/new-upload/phase3/js2/mwEmbed/mv_embed.js |
| — | — | @@ -617,8 +617,9 @@ |
| 618 | 618 | } |
| 619 | 619 | |
| 620 | 620 | $.fn.firefogg = function( iObj, callback ) { |
| 621 | | - //set "selector" in the iObj |
| 622 | | - |
| | 621 | + //add base theme css: |
| | 622 | + loadExternalCss( mv_embed_path + 'skins/'+mv_skin_name+'/styles.css' ); |
| | 623 | + |
| 623 | 624 | // @@todo should refactor mvAdvFirefogg as jQuery plugin |
| 624 | 625 | iObj['selector'] = this.selector; |
| 625 | 626 | |
| — | — | @@ -629,7 +630,7 @@ |
| 630 | 631 | //see if we need to load the advanced firefog controls and associated ui components: |
| 631 | 632 | if( iObj.encoder_interface ){ |
| 632 | 633 | |
| 633 | | - //grab the css: |
| | 634 | + //grab ui css: |
| 634 | 635 | loadExternalCss( mv_jquery_skin_path + 'jquery-ui-1.7.1.custom.css'); |
| 635 | 636 | |
| 636 | 637 | //@@todo would be nice to have a "dependency" map we could use/ |
| Index: branches/new-upload/phase3/js2/mwEmbed/example_usage/Make_Ogg_Advanced.html |
| — | — | @@ -9,13 +9,10 @@ |
| 10 | 10 | .install{ |
| 11 | 11 | display:none; |
| 12 | 12 | } |
| 13 | | -input{ |
| 14 | | -font-size:150%; |
| 15 | | -} |
| 16 | 13 | </style> |
| 17 | 14 | <script type="text/javascript"> |
| 18 | 15 | mwAddOnloadHook(function(){ |
| 19 | | - $j('#control_container').firefogg({ |
| | 16 | + $j('#firefogg_app').firefogg({ |
| 20 | 17 | 'encoder_interface' : true, |
| 21 | 18 | 'encode_local' : true |
| 22 | 19 | }); |
| — | — | @@ -26,13 +23,12 @@ |
| 27 | 24 | <h1><a href="http://www.firefogg.org/index.html"><img |
| 28 | 25 | src="http://www.firefogg.org/png/firefogg.png" alt="Firefogg"></a><br> |
| 29 | 26 | Make Ogg Video</h1> |
| 30 | | -<br><br><br> |
| 31 | | -<center> |
| 32 | | - <div style="width:500px;height:450px" id="control_container"> </div> |
| 33 | | - <br><br> |
| 34 | | - <span style="font:size:80%">Built using <a href="http://firefogg.org">firefogg</a> & <a href="http://jqueryui.com/">jquery.ui</a> Supports |
| 35 | | - <a href="javascript:(function(){if%20(!/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){alert('Sorry,%20due%20to%20security%20restrictions,%20this%20tool%20only%20works%20in%20Firefox');%20return%20false;%20};%20if(window.jquitr){%20jquitr.addThemeRoller();%20}%20else{%20jquitr%20=%20{};%20jquitr.s%20=%20document.createElement('script');%20jquitr.s.src%20=%20'http://jqueryui.com/themeroller/developertool/developertool.js.php';%20document.getElementsByTagName('head')[0].appendChild(jquitr.s);}%20})();">custom themes</a>, <b>remix me</b> |
| | 27 | +<br> |
| | 28 | + <br> |
| | 29 | + <div style="margin-right:auto;margin-left:auto;width:500px;height:250px" id="firefogg_app"> </div> |
| | 30 | + <br><br><br><br> |
| | 31 | + <center><span style="font:size:80%">Built using <a href="http://firefogg.org">firefogg</a>, <a href="http://www.mediawiki.org/wiki/Media_Projects_Overview#MwEmbed">MwEmbed</a> and <a href="http://jqueryui.com/">jquery.ui</a>. Supports |
| | 32 | + <a href="javascript:(function(){if%20(!/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){alert('Sorry,%20due%20to%20security%20restrictions,%20this%20tool%20only%20works%20in%20Firefox');%20return%20false;%20};%20if(window.jquitr){%20jquitr.addThemeRoller();%20}%20else{%20jquitr%20=%20{};%20jquitr.s%20=%20document.createElement('script');%20jquitr.s.src%20=%20'http://jqueryui.com/themeroller/developertool/developertool.js.php';%20document.getElementsByTagName('head')[0].appendChild(jquitr.s);}%20})();">custom themes</a> |
| 36 | 33 | </span> |
| 37 | | - |
| 38 | | -</center> |
| | 34 | + </center> |
| 39 | 35 | </body></html> |
| Index: branches/new-upload/phase3/js2/mwEmbed/libAddMedia/mvFirefogg.js |
| — | — | @@ -120,7 +120,7 @@ |
| 121 | 121 | if(target.substring(0, 6)=='target'){ |
| 122 | 122 | //check for the target if missing add to the output: |
| 123 | 123 | if( _this[target] === false){ |
| 124 | | - out+= _this.getTargetHtml(target); |
| | 124 | + out+= _this.getTargetHtml(target) + ' '; |
| 125 | 125 | } |
| 126 | 126 | //update the target selector |
| 127 | 127 | _this[target] = _this.selector + ' .' + target; |
| — | — | @@ -237,7 +237,7 @@ |
| 238 | 238 | this.target_input_file_name = this.selector; |
| 239 | 239 | |
| 240 | 240 | $j(this.selector).after( |
| 241 | | - this.getTargetHtml('target_btn_select_file') |
| | 241 | + this.getTargetHtml('target_btn_select_file') + ' ' |
| 242 | 242 | ); |
| 243 | 243 | //check for the other inline status indicator targets: |
| 244 | 244 | //update the bindings: |
| Index: branches/new-upload/phase3/js2/mwEmbed/libAddMedia/mvAdvFirefogg.js |
| — | — | @@ -4,6 +4,10 @@ |
| 5 | 5 | |
| 6 | 6 | //@@todo put all msg text into loadGM json |
| 7 | 7 | |
| | 8 | +loadGM({ |
| | 9 | + "help-sticky": "Help (Click to Keep Help on Screen)" |
| | 10 | +}); |
| | 11 | + |
| 8 | 12 | var mvAdvFirefogg = function( initObj ){ |
| 9 | 13 | return this.init( initObj ); |
| 10 | 14 | } |
| — | — | @@ -17,8 +21,8 @@ |
| 18 | 22 | //any firefog config properties that may need to be excluded from options |
| 19 | 23 | 'exclude_settings' : [], |
| 20 | 24 | |
| 21 | | - //the control container (where we put all the controls) |
| 22 | | - 'control_container' : '' |
| | 25 | + //the control container (where we put all the controls) |
| | 26 | + 'target_control_container':'' |
| 23 | 27 | } |
| 24 | 28 | |
| 25 | 29 | mvAdvFirefogg.prototype = { |
| — | — | @@ -103,6 +107,7 @@ |
| 104 | 108 | //advanced Video control configs: |
| 105 | 109 | 'framerate':{ |
| 106 | 110 | 't' : 'Framerate', |
| | 111 | + 'd' : '24', |
| 107 | 112 | 'selectVal' : ['12', '16', '23:976', '24', '29:97', '30'], |
| 108 | 113 | 'type' : "select", |
| 109 | 114 | 'group' : "advVideo", |
| — | — | @@ -232,7 +237,7 @@ |
| 233 | 238 | //call base firefogg form setup |
| 234 | 239 | basefogg_setupForm(); |
| 235 | 240 | //if we have a target control form gennerate the html and setup the bindings |
| 236 | | - if( this.control_container != ''){ |
| | 241 | + if( this.target_control_container != ''){ |
| 237 | 242 | //gennerate the control html |
| 238 | 243 | this.doControlHTML(); |
| 239 | 244 | |
| — | — | @@ -243,47 +248,77 @@ |
| 244 | 249 | |
| 245 | 250 | }, |
| 246 | 251 | doControlHTML: function(){ |
| 247 | | - var out =''; |
| | 252 | + |
| 248 | 253 | var _this = this; |
| | 254 | + //add base control buttons: |
| | 255 | + _this.basefogg_doControlHTML(); |
| | 256 | + |
| | 257 | + //build the config group outpouts |
| | 258 | + var gdout =''; |
| 249 | 259 | $j.each(this.config_groups, function(group_key, group_desc){ |
| 250 | | - out+= '<div> '+ |
| | 260 | + gdout+= '<div> '+ |
| 251 | 261 | '<h3><a href="#" id="gd_'+group_key+'" >' + group_desc + '</a></h3>'+ |
| 252 | 262 | '<div>'; |
| 253 | 263 | //output that group control options: |
| 254 | | - out+='<table width="450" ><tr><td width="35%"></td><td width="65%"></td></tr>'; |
| | 264 | + gdout+='<table width="450" ><tr><td width="35%"></td><td width="65%"></td></tr>'; |
| 255 | 265 | //special preset case: |
| 256 | 266 | |
| 257 | 267 | for(var cK in _this.default_encoder_config){ |
| 258 | 268 | var cConf = _this.default_encoder_config[cK]; |
| 259 | 269 | if(cConf.group == group_key){ |
| 260 | | - out+= _this.proccessCkControlHTML( cK ); |
| | 270 | + gdout+= _this.proccessCkControlHTML( cK ); |
| 261 | 271 | } |
| 262 | 272 | } |
| 263 | | - out+='</table>'; |
| 264 | | - out+= '</div>' + |
| | 273 | + gdout+='</table>'; |
| | 274 | + gdout+= '</div>' + |
| 265 | 275 | '</div>'; |
| 266 | 276 | |
| 267 | | - }); |
| 268 | | - //console.log("out: " + out); |
| 269 | | - $j('#control_container').html( out ); |
| | 277 | + }); |
| | 278 | + var out=''; |
| | 279 | + //add the control container: |
| | 280 | + if(!this.target_control_container){ |
| | 281 | + this.target_control_container = this.selector + ' .control_container'; |
| | 282 | + //set the target contorl container to height -50 |
| | 283 | + $j(this.selector).append( '<p><div class="control_container">' + gdout + '</div>' ); |
| | 284 | + }else{ |
| | 285 | + $j(this.target_control_container).html( gdout ); |
| | 286 | + } |
| 270 | 287 | }, |
| | 288 | + //custom advanced target rewrites: |
| | 289 | + getTargetHtml:function(target){ |
| | 290 | + if( target=='target_btn_select_file' || |
| | 291 | + target=='target_btn_select_new_file'|| |
| | 292 | + target=='target_btn_save_local_file'){ |
| | 293 | + var icon = (target=='target_btn_save_local_file')?'ui-icon-video':'ui-icon-folder-open'; |
| | 294 | + return '<a class="ui-state-default ui-corner-all ui-icon_link '+ |
| | 295 | + target +'" href="#"><span class="ui-icon ' + icon + '"/>' + |
| | 296 | + gM( 'fogg-' + target.substring(11)) + |
| | 297 | + '</a>'; |
| | 298 | + }else if('target_input_file_name'){ |
| | 299 | + return '<input style="" class="text ui-widget-content ui-corner-all ' + target + '" '+ |
| | 300 | + 'type="text" value="' + gM( 'fogg-' + target.substring(11)) + '"/> '; |
| | 301 | + }else{ |
| | 302 | + return this.basefogg_getTargetHtml(target); |
| | 303 | + } |
| | 304 | + }, |
| 271 | 305 | proccessCkControlHTML:function( cK ){ |
| 272 | 306 | var cConf = this.default_encoder_config[cK]; |
| 273 | 307 | var out =''; |
| 274 | 308 | out+='<tr><td valign="top">'+ |
| 275 | 309 | '<label for="_' + cK + '">' + |
| 276 | 310 | cConf.t + ':' + |
| 277 | | - '<span id="help_'+ cK + '" class="ui-icon ui-icon-info" style="float:left"></span>'+ |
| | 311 | + '<span title="' + gM('help-sticky') + '" id="help_'+ cK + '" class="ui-icon ui-icon-info" style="float:left"></span>'+ |
| 278 | 312 | '</label></td><td>'; |
| 279 | 313 | //check if we have a value for this: |
| 280 | | - var dv = ( this.local_encoder_config[ cK ] ) ? this.local_encoder_config[ cK ] : ''; |
| | 314 | + var dv = ( this.local_encoder_config[ cK ] ) ? this.local_encoder_config[ cK ] : ''; |
| 281 | 315 | //switch on the config type |
| 282 | 316 | switch( cConf.type ){ |
| 283 | 317 | case 'string': |
| 284 | 318 | out+= '<input type="text" id="_' + cK + '" value="' + dv + '" >' ; |
| 285 | 319 | break; |
| 286 | | - case 'slider': |
| 287 | | - maxdigits = (Math.round( this.default_encoder_config[ cK ].range.max / 10) +1); |
| | 320 | + case 'slider': |
| | 321 | + var strMax = this.default_encoder_config[ cK ].range.max + ''; |
| | 322 | + maxdigits = strMax.length +1; |
| 288 | 323 | out+= '<input type="text" maxlength="'+maxdigits+'" size="' +maxdigits + '" '+ |
| 289 | 324 | 'id="_' + cK + '" style="display:inline;border:0; color:#f6931f; font-weight:bold;" ' + |
| 290 | 325 | 'value="' + dv + '" >' + |
| — | — | @@ -321,44 +356,18 @@ |
| 322 | 357 | out+='</td></tr><tr><td colspan="2" height="10"></td></tr>'; |
| 323 | 358 | return out; |
| 324 | 359 | }, |
| | 360 | + select_fogg:function(){ |
| | 361 | + this.basefogg_select_fogg(); |
| | 362 | + $j(this.target_control_container).show('slow'); |
| | 363 | + }, |
| 325 | 364 | doControlBindings:function(){ |
| 326 | | - //bind the select action: |
| 327 | | - $j( '#select_file' ).click( function(){ |
| 328 | | - doSelectFile(); |
| 329 | | - //hide this show the select new button |
| 330 | | - $j(this).hide(); |
| 331 | | - $j('#save_file,select_new_file,').show(); |
| 332 | | - }).attr( 'disabled', false ); |
| 333 | | - |
| 334 | | - $j('#select_file_new').click(function(){ |
| 335 | | - $j("#dialog").dialog({ |
| 336 | | - bgiframe: true, |
| 337 | | - resizable: false, |
| 338 | | - height:140, |
| 339 | | - modal: true, |
| 340 | | - overlay: { |
| 341 | | - backgroundColor: '#000', |
| 342 | | - opacity: 0.5 |
| 343 | | - }, |
| 344 | | - buttons: { |
| 345 | | - 'Delete all items in recycle bin': function() { |
| 346 | | - $j(this).dialog('close'); |
| 347 | | - }, |
| 348 | | - Cancel: function() { |
| 349 | | - $j(this).dialog('close'); |
| 350 | | - } |
| 351 | | - } |
| 352 | | - }); |
| 353 | | - }); |
| 354 | | - function doSelectFile(){ |
| 355 | | - //select the video |
| 356 | | - if( ogg.selectVideo() ) { |
| 357 | | - //enable/show all the options |
| 358 | | - $j('#fogg_control_td').fadeIn("slow"); |
| 359 | | - doControlBindings(); |
| 360 | | - } |
| 361 | | - } |
| 362 | | - |
| | 365 | + var _this = this; |
| | 366 | + _this.basefogg_doControlBindings(); |
| | 367 | + //hide the base advanced controls untill a file is selected: |
| | 368 | + $j(this.target_control_container).hide(); |
| | 369 | + |
| | 370 | + var helpState = {}; |
| | 371 | + //bind control actions |
| 363 | 372 | for(var cK in this.default_encoder_config){ |
| 364 | 373 | var cConf = this.default_encoder_config[cK]; |
| 365 | 374 | //set up the help for all types: |
| — | — | @@ -416,12 +425,19 @@ |
| 417 | 426 | break; |
| 418 | 427 | } |
| 419 | 428 | } |
| 420 | | - $j('#control_container').accordion({ |
| | 429 | + $j(this.target_control_container).accordion({ |
| 421 | 430 | header: "h3", |
| 422 | 431 | collapsible: true, |
| 423 | | - active: false |
| | 432 | + active: false, |
| | 433 | + fillSpace: true |
| 424 | 434 | }); |
| 425 | 435 | }, |
| | 436 | + /* |
| | 437 | + * sets up the autoEncoder settings |
| | 438 | + */ |
| | 439 | + autoEncoderSettings:function(){ |
| | 440 | + |
| | 441 | + }, |
| 426 | 442 | //sets up the local settings for the encode (restored from a cookie if you have them) |
| 427 | 443 | setupSettings:function( force ){ |
| 428 | 444 | if(!force){ |