Revision: 51169
Author: dale
Date: 2009-05-29 23:09:45 +0000 (Fri, 29 May 2009)
Log Message:
-----------
skin updates for libAddMedia
Modified Paths:
--------------
branches/new-upload/phase3/js2/mwEmbed/example_usage/Make_Ogg_Simple.html
branches/new-upload/phase3/js2/mwEmbed/example_usage/sample_themable_player.html
branches/new-upload/phase3/js2/mwEmbed/libAddMedia/remoteSearchDriver.js
branches/new-upload/phase3/js2/mwEmbed/libClipEdit/mvClipEdit.js
branches/new-upload/phase3/js2/mwEmbed/mv_embed.js
branches/new-upload/phase3/js2/mwEmbed/skins/mvpcf/styles.css
Modified:
branches/new-upload/phase3/js2/mwEmbed/example_usage/Make_Ogg_Simple.html
===================================================================
--- branches/new-upload/phase3/js2/mwEmbed/example_usage/Make_Ogg_Simple.html
2009-05-29 21:40:19 UTC (rev 51168)
+++ branches/new-upload/phase3/js2/mwEmbed/example_usage/Make_Ogg_Simple.html
2009-05-29 23:09:45 UTC (rev 51169)
@@ -34,9 +34,6 @@
<span id="loadFogg">Loading firefogg <blink>...</blink></span>
<div style="float:left;height:400px"
id="control_container"></div>
<br><br>
- <!-- <span style="font:size:80%">Built using <a
href="http://firefogg.org";>firefogg</a> & <a
href="http://jqueryui.com/";>jquery.ui</a> Supports
- <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>
- </span> -->
</div>
</center>
</body></html>
Modified:
branches/new-upload/phase3/js2/mwEmbed/example_usage/sample_themable_player.html
===================================================================
---
branches/new-upload/phase3/js2/mwEmbed/example_usage/sample_themable_player.html
2009-05-29 21:40:19 UTC (rev 51168)
+++
branches/new-upload/phase3/js2/mwEmbed/example_usage/sample_themable_player.html
2009-05-29 23:09:45 UTC (rev 51169)
@@ -13,13 +13,12 @@
} else{
loadExternalJs('http://jqueryui.com/themeroller/developertool/developertool.js.php');
}
- }).html('<span class="ui-icon ui-icon-newwin"/>Run Theme Roller');
+ }).html('<span class="ui-icon ui-icon-newwin"/>Run Theme
Roller</span>');
});
</script>
<body bgcolor="#FFF">
<h3> Sample Themed Player:</h3>
-<a id="doThemeRoller" class="ui-icon_link ui-state-default ui-corner-all"
href="#">
- <span class="ui-icon ui-icon-newwin"/>loading theme
editor<blink>...</blink></a><p><p>
+<a id="doThemeRoller" class="ui-icon_link ui-state-default ui-corner-all"
href="#">loading theme editor<blink>...</blink></a><p><p>
<video
roe="http://metavid.org/w/index.php?title=Special:MvExportStream&stream_name=House_proceeding_07-18-06_00&t=1:23:16/1:23:44&feed_format=roe";
></video>
</table>
Modified:
branches/new-upload/phase3/js2/mwEmbed/libAddMedia/remoteSearchDriver.js
===================================================================
--- branches/new-upload/phase3/js2/mwEmbed/libAddMedia/remoteSearchDriver.js
2009-05-29 21:40:19 UTC (rev 51168)
+++ branches/new-upload/phase3/js2/mwEmbed/libAddMedia/remoteSearchDriver.js
2009-05-29 23:09:45 UTC (rev 51169)
@@ -329,13 +329,19 @@
});
}
},
- doInitDisplay:function(){
+ doInitDisplay:function(){
+ var _this = this;
//setup the parent container:
this.init_modal();
//fill in the html:
this.init_interface_html();
//bind actions:
this.add_interface_bindings();
+
+ //update the target bining to just unhide the dialog:
+ $j(this.target_invocation).unbind().click(function(){
+ $j(_this.target_container).dialog('open');
+ })
},
//gets the in and out points for insert position or grabs the selected
text for search
getTexboxSelection:function(){
@@ -381,7 +387,7 @@
var _this = this;
//add the parent target_container if not provided or missing
if(!_this.target_container || $j(_this.target_container).length==0){
- $j('body').append('<div id="rsd_modal_target" title="' +
gM('add_media_wizard') + '" ></div>');
+ $j('body').append('<div id="rsd_modal_target"
style="position:relative" title="' + gM('add_media_wizard') + '" ></div>');
_this.target_container = '#rsd_modal_target';
js_log('appended: #rsd_modal_target' +
$j(_this.target_container).attr('id'));
js_log('added target id:' +
$j(_this.target_container).attr('id'));
@@ -415,7 +421,7 @@
if (resizeTimer) clearTimeout(resizeTimer);
var resizeTimer = setTimeout(adjustModal, 100);
});*/
- }
+ }
},
getMaxModalLayout:function(border){
if(!border)
@@ -436,9 +442,9 @@
var out = '<div class="rsd_control_container" style="width:100%">' +
'<form id="rsd_form" action="javascript:return false;"
method="GET">'+
- '<input type="text" tabindex="1" value="' + dq + '"
maxlength="512" id="rsd_q" name="rsd_q" '+
- 'size="20" autocomplete="off"/>'+
- '<a href="#" id="rms_search_button"
class="ui-state-default ui-corner-all ui-icon_link"><span class="ui-icon
ui-icon-search"></span>'+ gM('mv_media_search') +'</a>'+
+ '<input class="ui-widget-content ui-corner-all"
type="text" tabindex="1" value="' + dq + '" maxlength="512" id="rsd_q"
name="rsd_q" '+
+ 'size="20" autocomplete="off"/> '+
+ $j.btnHtml( gM('mv_media_search'),
'rms_search_button', 'search') +
'</form>';
/*out+='<div id="rsd_options_bar"
style="display:none;width:100%;height:0px;background:#BBB">';
@@ -465,14 +471,9 @@
$j(this.target_container).html( out );
//add simple styles:
- $j('#rms_search_button').hover(
- function(){
- $j(this).addClass('ui-state-hover');
- },
- function(){
- $j(this).removeClass('ui-state-hover');
- }
- );
+ $j(this.target_container + '
.rms_search_button').btnBind().click(function(){
+ _this.runSearch();
+ });
//draw the tabs:
this.drawTabs();
@@ -919,18 +920,18 @@
var overflow_style = ( mediaType =='video' )?'':'overflow:auto;';
//append to the top level of model window:
$j( _this.target_container ).append('<div id="rsd_resource_edit" '+
-
'style="position:absolute;top:0px;left:0px;width:100%;height:100%;background-color:#FFF;">'
+
- '<h3 id="rsd_resource_title" style="margin:4px;">' +
gM('rsd_resource_edit', rObj.title ) +'</h3>'+
- '<div id="clip_edit_disp"
style="position:absolute;'+overflow_style+'top:35px;left:5px;bottom:0px;'+
- 'width:' + (maxWidth + 25) + 'px;" >' +
+
'style="position:absolute;top:0px;left:0px;width:100%;height:100%;background-color:#FFF;">'
+
+ '<div id="clip_edit_disp" style="position:absolute;' +
overflow_style + 'width:100%;height:100%;padding:5px;'+
+ 'width:' + (maxWidth + 10) + 'px;" >' +
mv_get_loading_img('position:absolute;top:30px;left:30px') +
'</div>'+
'<div id="clip_edit_ctrl"
style="position:absolute;border:solid thin blue;'+
- 'top:35px;left:' + ( maxWidth + 30 )
+'px;bottom:0px;right:0px;padding:5px;overflow:auto;">'+
+ 'left:' + ( maxWidth + 10 )
+'px;top:5px;bottom:0px;right:0px;overflow:auto;padding:5px;">'+
mv_get_loading_img() +
'</div>'+
'</div>');
-
+ //update add media wizard title:
+ $j( _this.target_container ).dialog( 'option', 'title',
gM('add_media_wizard')+': '+ gM('rsd_resource_edit', rObj.title ) );
js_log('did append to: '+ _this.target_container );
$j('#rsd_resource_edit').css('opacity',0);
@@ -1017,7 +1018,7 @@
var _this = this;
var mvClipInit = {
'rObj':rObj, //the resource object
- 'parent_ct':'rsd_resource_edit',
+ 'parent_ct':'rsd_modal_target',
'clip_disp_ct':'clip_edit_disp',
'control_ct': 'clip_edit_ctrl',
'media_type': mediaType,
@@ -1052,9 +1053,9 @@
//add the re-sizable to the doLoad request:
clibs['$j.ui.resizable'] ='jquery/' + jQueryUiVN +
'/ui/ui.resizable.js';
clibs['$j.fn.hoverIntent']
='jquery/plugins/jquery.hoverIntent.js';
- mvJsLoader.doLoad(clibs, function(){
+ mvJsLoader.doLoad(clibs, function(){
//make sure the rsd_edit_img is hidden:
- $j('#rsd_edit_img').hide();
+ $j('#rsd_edit_img').remove();
//run the image clip tools
_this.cEdit = new mvClipEdit( mvClipInit );
});
@@ -1159,15 +1160,19 @@
'bottom:0px;top:30px;right:0px;overflow:auto;">'+
'<strong>Local Resource
Title:</strong><br>'+
'<input type="text" size="30" value="' +
rObj.target_resource_title + '" readonly="true"><br>'+
- '<strong>Edit WikiText Resource
Description:</strong>(will be replaced by forms soon)'+
- '<textarea id="rsd_import_ta"
id="mv_img_desc" style="width:90%;" rows="8" cols="50">'+
+ '<strong>Edit WikiText Resource
Description:</strong>(will be replaced by forms soon)' +
+ '<textarea id="rsd_import_ta"
id="mv_img_desc" style="width:90%;" rows="8" cols="50">' +
wt +
- '</textarea><br>'+
- '<input type="checkbox" value="true"
id="wpWatchthis" name="wpWatchthis" tabindex="7"/>'+
- '<label for="wpWatchthis">Watch this
page</label><br>'+
- '<input id="rsd_import_apreview"
type="button" value="Update Preview"> ' +
- '<input style="font-weight: bold"
id="rsd_import_doimport" type="button" value="Do Import Resource"> '+
- '<a id="rsd_import_acancel"
href="#">Cancel Import</a>'+
+ '</textarea><br>' +
+ '<input type="checkbox" value="true"
id="wpWatchthis" name="wpWatchthis" tabindex="7"/>' +
+ '<label for="wpWatchthis">Watch this
page</label><br><br><br>' +
+
+ $j.btnHtml('Do Import Resource',
'rsd_import_doimport', 'check' ) + ' ' +
+
+ $j.btnHtml('Update Preview',
'rsd_import_apreview', 'refresh' ) + ' ' +
+
+ $j.btnHtml('Cancel Import',
'rsd_import_acancel', 'close' ) + ' ' +
+
'</div>'+
//output the rendered and non-renderd version
of description for easy swiching:
'</div>');
@@ -1176,7 +1181,7 @@
$j('#rsd_import_desc').html(o);
});
//add bidings:
- $j('#rsd_import_apreview').click(function(){
+ $j( _this.target_container + '
.rsd_import_apreview').btnBind().click(function(){
/*$j('#rsd_import_desc').show().html(
mv_get_loading_img()
);*/
@@ -1186,7 +1191,7 @@
$j('#rsd_import_desc').html(o);
});
});
- $j('#rsd_import_doimport').click(function(){
+ $j(_this.target_container + '
.rsd_import_doimport').click(function(){
//get an edittoken:
do_api_req( {
@@ -1271,7 +1276,7 @@
}
);
});
- $j('#rsd_import_acancel').click(function(){
+ $j( _this.target_container + '
.rsd_import_acancel').click(function(){
$j('#rsd_resource_import').fadeOut("fast",function(){
$j(this).remove();
});
Modified: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/mvClipEdit.js
===================================================================
--- branches/new-upload/phase3/js2/mwEmbed/libClipEdit/mvClipEdit.js
2009-05-29 21:40:19 UTC (rev 51168)
+++ branches/new-upload/phase3/js2/mwEmbed/libClipEdit/mvClipEdit.js
2009-05-29 23:09:45 UTC (rev 51169)
@@ -27,7 +27,10 @@
"mv_other_properties":"Other Properties",
"mv_resource_page":"Resource Page",
- "mv_set_in_out_points": "Set in-out points"
+ "mv_set_in_out_points": "Set in-out points",
+ "mv_start_time": "Start Time",
+ "mv_end_time": "End Time",
+ "mv_preview_inout": "Preview/Play In-out points"
});
var default_clipedit_values = {
@@ -112,8 +115,9 @@
var start_ntp = (_this.rObj.embed.start_ntp) ?
_this.rObj.embed.start_ntp : seconds2npt( 0 );
if(!start_ntp)
seconds2npt( 0 );
+
$j('#sub_cliplib_ic').html(
- _this.getSetInOut({
+ _this.getSetInOutHtml({
'start_ntp' : start_ntp,
'end_ntp' : end_ntp
})
@@ -320,17 +324,16 @@
$j('#'+this.control_ct).html('<h3>Edit Video Tools:</h3>');
if( eb.supportsURLTimeEncoding() ){
$j('#'+this.control_ct).append(
- _this.getSetInOut({
+ _this.getSetInOutHtml({
'start_ntp' : eb.start_ntp,
- 'end_ntp' : eb.end_ntp
+ 'end_ntp' : eb.end_ntp
})
);
_this.setInOutBindings();
}
$j('#'+this.control_ct).append( _this.getInsertDescHtml() );
- if( _this.p_rsdObj && _this.p_rsdObj.import_url_mode == 'none'){
- // in theory this code should never run since we should nto get
past the repository checks
+ if( _this.p_rsdObj && _this.p_rsdObj.import_url_mode == 'none'){
$j('#'+this.control_ct).append( gM('no_import_by_url') +
'<br>' +
'<a href="#" class="mv_cancel_img_edit" title="' +
gM('mv_cancel_image_insert')+'">' + gM('mv_cancel_image_insert') + '</a> ' );
}else{
@@ -340,56 +343,70 @@
},
setInOutBindings:function(){
var _this = this;
- //setup bindings for adjust / preview:
- add_adjust_hooks( 'rsd', function(){
- //update the resource
- _this.applyVideoAdj();
- });
- $j('#mv_preview_clip').click(function(){
+
+ var start_sec = npt2seconds($j('#'+this.control_ct + '
.startInOut').val() );
+ var end_sec = npt2seconds($j('#'+this.control_ct + '
.endInOut').val() );
+
+ //if we don't have 0 as start then assume we are in a range request
and give some buffer area:
+ var min_slider = (start_sec - 60 < 0 ) ? 0 : start_sec - 60;
+ if(min_slider!=0){
+ var max_slider = end_sec+60;
+ }else{
+ max_slider = end_sec;
+ }
+
+ $j('#'+this.control_ct + ' .inOutSlider').slider({
+ range: true,
+ min: min_slider,
+ max: max_slider,
+ values: [start_sec, end_sec],
+ slide: function(event, ui) {
+ js_log(" vals:"+ seconds2npt( ui.values[0] ) +
' : ' + seconds2npt( ui.values[1]) );
+ $j('#'+_this.control_ct + ' .startInOut').val(
seconds2npt( ui.values[0] ) );
+ $j('#'+_this.control_ct + ' .endInOut').val(
seconds2npt( ui.values[1] ) );
+ },
+ change:function(event, ui){
+ do_video_time_update( seconds2npt( ui.values[0]),
seconds2npt( ui.values[1] ) );
+ }
+ });
+
+ //preview button:
+ $j('#'+this.control_ct + ' .inOutPreviewClip').hover(
+ function(){
+ $j(this).addClass('ui-state-hover');
+ },
+ function(){
+ $j(this).removeClass('ui-state-hover');
+ }
+ ).click(function(){
$j('#embed_vid').get(0).stop();
$j('#embed_vid').get(0).play();
- });
+ });
+ //simple hover:
+
},
- getSetInOut:function( setInt ){
+ getSetInOutHtml:function( setInt ){
return '<strong>' + gM('mv_set_in_out_points') + '</strong>'+
'<table border="0" style="background: transparent;
width:94%;height:50px;">'+
'<tr>' +
'<td style="width:50px">'+
- '<span style="font-size: small;"
id="track_time_start_rsd">' + setInt.start_ntp +'</span>'+
+ gM('mv_start_time') +
+ '<input class="ui-widget-content ui-corner-all
startInOut" size="9" value="' + setInt.start_ntp +'">'+
'</td>' +
'<td>' +
- '<div style="border: 1px solid black; width: 100%;
height: 5px; background-color: #888;" '+
- 'id="container_track_rsd">'+
- '<div id="resize_rsd" class="ui-resizable
ui-draggable">'+
- '<div class="ui-resizable-w
ui-resizable-handle"'+
- ' id="handle1_rsd" unselectable="on"/>'+
-
- '<div class="ui-resizable-e
ui-resizable-handle" '+
- ' id="handle2_rsd" unselectable="on"/>'+
-
- '<div class="ui-dragSpan" id="dragSpan_rsd"
style="cursor: move;"/>'+
- '</div>'+
- '</div>'+
+ '<div class="inOutSlider"></div>'+
'</td>' +
'<td style="width:50px">'+
- '<span style="font-size: small;"
id="track_time_end_rsd">'+ setInt.end_ntp +'</span>'+
+ gM('mv_end_time') +
+ '<input class="ui-widget-content ui-corner-all
endInOut" size="9" value="'+ setInt.end_ntp +'">'+
'</td>' +
'</tr>' +
'</table>'+
- '<span style="float: left;">'+
- '<label class="mv_css_form" for="mv_start_hr_rsd"><i>Start
time:</i></label>'+
- '<input id="mv_start_hr_rsd" class="mv_adj_hr"
name="mv_start_hr_rsd" value="' + setInt.start_ntp + '" maxlength="8"
size="8"/>'+
- '</span>'+
- '<span style="float: left;">'+
- '<label for="mv_end_hr_rsd" class="mv_css_form"><i>End
time:</i></label>'+
- '<input name="mv_end_hr_rsd" id="mv_end_hr_rsd" value="' +
setInt.end_ntp + '" maxlength="8" size="8" class="mv_adj_hr"/>'+
- '</span>'+
- '<div style="clear: both;"/>'+
- '<input id="mv_preview_clip" type="button" value="Preview/Play
In-out points">';
+ '<a href="#" class="ui-state-default ui-corner-all ui-icon_link
inOutPreviewClip"><span class="ui-icon ui-icon-video"></span>'+
gM('mv_preview_inout') +'</a>';
},
getInsertDescHtml:function(){
var o= '<h3>Inline Description</h3>'+
- '<textarea style="width:375px;" id="mv_inline_img_desc"
rows="5" cols="30">';
+ '<textarea style="width:95%" id="mv_inline_img_desc"
rows="5" cols="30">';
if( this.p_rsdObj ){
//if we have a parent remote search driver let it parse the inline
description
o+= this.rObj.pSobj.getInlineDescWiki( this.rObj );
@@ -398,11 +415,11 @@
//js_log('getInsertDescHtml: ' + o );
return o;
},
- getInsertAction:function(){
+ getInsertAction:function(){
return '<h3>Actions</h3>'+
- '<input type="button" class="mv_insert_image_page" value="' +
gM('mv_insert_image_page') + '"> '+
- '<input type="button" style="font-weight:bold"
class="mv_preview_insert" value="' + gM('mv_preview_insert')+ '"> '+
- '<a href="#" class="mv_cancel_img_edit" title="' +
gM('mv_cancel_image_insert')+'">' + gM('mv_cancel_image_insert') + '</a> ';
+ $j.btnHtml( gM('mv_insert_image_page'),
'mv_insert_image_page', 'check' ) + ' ' +
+ $j.btnHtml( gM('mv_preview_insert'), 'mv_preview_insert',
'refresh') + ' ' +
+ $j.btnHtml( gM('mv_cancel_image_insert'),
'mv_cancel_img_edit', 'close');
},
applyEdit:function(){
js_log('applyEdit::' + this.media_type);
@@ -414,21 +431,23 @@
},
applyInsertControlBindings:function(){
var _this = this;
- $j('.mv_insert_image_page').click(function(){
+ $j('.mv_insert_image_page').btnBind().click(function(){
_this.applyEdit();
//copy over the desc text to the resource object
_this.rObj['inlineDesc']= $j('#mv_inline_img_desc').val();
_this.p_rsdObj.insertResource( _this.rObj );
});
- $j('.mv_preview_insert').click(function(){
+ $j('.mv_preview_insert').btnBind().click(function(){
_this.applyEdit();
//copy over the desc text to the resource object
_this.rObj['inlineDesc']= $j('#mv_inline_img_desc').val();
js_log('going to call previewResource on rObj');
_this.p_rsdObj.previewResource( _this.rObj );
});
- $j('.mv_cancel_img_edit').click( function(){
- $j('#' + _this.parent_ct).fadeOut("fast");
+ $j('.mv_cancel_img_edit').btnBind().click( function(){
+ $j('#rsd_resource_edit').fadeOut("fast");
+ //restore the title:
+ $j( _this.p_rsdObj.target_container ).dialog( 'option', 'title',
gM('add_media_wizard'));
});
},
setUpImageCtrl:function(){
@@ -502,8 +521,9 @@
$j('#embed_vid').get(0).stop();
//update video related keys:
- this.rObj['start_time'] = $j('#mv_start_hr_rsd').val();
- this.rObj['end_time'] = $j('#mv_end_hr_rsd').val();
+ ;
+ this.rObj['start_time'] = $j('#'+this.control_ct + '
.startInOut').val();
+ this.rObj['end_time'] = $j('#'+this.control_ct + ' .endInOut').val()
;
//do the local video adjust
if(typeof this.rObj.pSobj['applyVideoAdj'] != 'undefined'){
Modified: branches/new-upload/phase3/js2/mwEmbed/mv_embed.js
===================================================================
--- branches/new-upload/phase3/js2/mwEmbed/mv_embed.js 2009-05-29 21:40:19 UTC
(rev 51168)
+++ branches/new-upload/phase3/js2/mwEmbed/mv_embed.js 2009-05-29 23:09:45 UTC
(rev 51169)
@@ -666,7 +666,26 @@
myUp.setupForm();
});
}
-
+
+ //shortcut to a themed button:
+ $.btnHtml = function(msg, className, iconId){
+ return '<a href="#" class="ui-state-default ui-corner-all
ui-icon_link ' +
+ className + '"><span class="ui-icon ui-icon-' + iconId + '"
/>' +
+ msg + '</a>';
+ }
+ //shortcut to bind hover state:
+ $.fn.btnBind = function(){
+ $j(this.selector).hover(
+ function(){
+ $j(this).addClass('ui-state-hover');
+ },
+ function(){
+ $j(this).removeClass('ui-state-hover');
+ }
+ )
+ return this;
+ }
+
})(jQuery);
}
Modified: branches/new-upload/phase3/js2/mwEmbed/skins/mvpcf/styles.css
===================================================================
--- branches/new-upload/phase3/js2/mwEmbed/skins/mvpcf/styles.css
2009-05-29 21:40:19 UTC (rev 51168)
+++ branches/new-upload/phase3/js2/mwEmbed/skins/mvpcf/styles.css
2009-05-29 23:09:45 UTC (rev 51169)
@@ -217,6 +217,12 @@
margin-left:-5px;
margin-top:1px;
}
+
+.inOutSlider .ui-slider-handle{
+ width:8px;
+ cusror: move;
+}
+
/*
.videoPlayer .seeker {
float: right;
@@ -309,7 +315,7 @@
width: 183px;
overflow: hidden;
position: absolute;
- z-index: 100;
+ z-index: 9999;
/* margin: 0 0 0 230px;*/
}
*:first-child+html .videoOptions {margin-top: -20px;}
_______________________________________________
MediaWiki-CVS mailing list
MediaWiki-CVS@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-cvs
