| Index: branches/js2-work/phase3/js/mwEmbed/skins/mvpcf/styles.css |
| — | — | @@ -315,6 +315,12 @@ |
| 316 | 316 | left: 3px; |
| 317 | 317 | font-size: x-small; |
| 318 | 318 | } |
| | 319 | +#rsd_filters_container { |
| | 320 | + float:left; |
| | 321 | + padding-top:12px; |
| | 322 | + width:150px; |
| | 323 | + height: 100%; |
| | 324 | +} |
| 319 | 325 | .rsd_import_button { |
| 320 | 326 | mergin-left: 5px; |
| 321 | 327 | } |
| — | — | @@ -484,6 +490,13 @@ |
| 485 | 491 | zoom: 1; |
| 486 | 492 | } |
| 487 | 493 | |
| | 494 | +.ui-filter-title { |
| | 495 | + font-weight: bold; |
| | 496 | + margin-top: 15px; |
| | 497 | + padding-left: 10px; |
| | 498 | +} |
| | 499 | + |
| | 500 | + |
| 488 | 501 | .ui-progressbar-value{ |
| 489 | 502 | background-image: url('images/pbar-ani.gif'); |
| 490 | 503 | } |
| Index: branches/js2-work/phase3/js/mwEmbed/modules/AddMedia/mw.RemoteSearchDriver.js |
| — | — | @@ -253,7 +253,13 @@ |
| 254 | 254 | 'api_url': 'http://kaldev.kaltura.com/michael/aggregator.php', |
| 255 | 255 | 'lib': 'kaltura', |
| 256 | 256 | 'resource_prefix' : '', |
| 257 | | - 'tab_image':false |
| | 257 | + 'tab_image':false, |
| | 258 | + show_filters: true, |
| | 259 | + aggregated_providers: |
| | 260 | + { 'Wikipedia Commons': 'wiki_commons', |
| | 261 | + 'The Internet Archive': 'archive_org', |
| | 262 | + 'Metavid': 'metavid', |
| | 263 | + 'Flickr': 'flickr' } |
| 258 | 264 | }, |
| 259 | 265 | |
| 260 | 266 | /** |
| — | — | @@ -474,7 +480,7 @@ |
| 475 | 481 | // Set up the local API upload URL |
| 476 | 482 | if ( _this.upload_api_target == 'local' ) { |
| 477 | 483 | if ( ! _this.local_wiki_api_url ) { |
| 478 | | - $j( '#rsd_results_container' ).html( gM( 'rsd_config_error', 'missing_local_api_url' ) ); |
| | 484 | + this.$resultsContainer.html( gM( 'rsd_config_error', 'missing_local_api_url' ) ); |
| 479 | 485 | return false; |
| 480 | 486 | } else { |
| 481 | 487 | _this.upload_api_target = _this.local_wiki_api_url; |
| — | — | @@ -655,7 +661,7 @@ |
| 656 | 662 | var query = _this.getDefaultQuery(); |
| 657 | 663 | if ( query != $j( '#rsd_q' ).val() ) { |
| 658 | 664 | $j( '#rsd_q' ).val( query ); |
| 659 | | - _this.showCurrentTab(); |
| | 665 | + _this.UpdateResults(); |
| 660 | 666 | } |
| 661 | 667 | // $j(_this.target_container).dialog("open"); |
| 662 | 668 | $j( _this.target_container ).parents( '.ui-dialog' ).fadeIn( 'slow' ); |
| — | — | @@ -776,9 +782,6 @@ |
| 777 | 783 | $j( window ).resize( function() { |
| 778 | 784 | $j( _this.target_container ).dialogFitWindow(); |
| 779 | 785 | } ); |
| 780 | | - |
| 781 | | - // Add cancel callback and updated button with icon |
| 782 | | - _this.onCancelClipEdit(); |
| 783 | 786 | }, |
| 784 | 787 | |
| 785 | 788 | /* |
| — | — | @@ -795,15 +798,21 @@ |
| 796 | 799 | |
| 797 | 800 | mainContainer.append( controlContainer ); |
| 798 | 801 | |
| | 802 | + this.$filtersContainer = $j('<form />').hide() |
| | 803 | + .attr({ |
| | 804 | + id: "rsd_filters_container" |
| | 805 | + }); |
| | 806 | + |
| 799 | 807 | this.$resultsContainer = $j('<div />').attr({ |
| 800 | | - id: "rsd_results_container" |
| 801 | | - }); |
| | 808 | + id: "rsd_results_container" |
| | 809 | + }); |
| 802 | 810 | |
| | 811 | + mainContainer.append( this.$filtersContainer ); |
| 803 | 812 | mainContainer.append( this.$resultsContainer ); |
| 804 | 813 | |
| 805 | 814 | // run the default search: |
| 806 | 815 | if ( this.getDefaultQuery() ) |
| 807 | | - this.showCurrentTab(); |
| | 816 | + this.UpdateResults(); |
| 808 | 817 | |
| 809 | 818 | // Add bindings |
| 810 | 819 | $j( '#mso_selprovider,#mso_selprovider_close' ) |
| — | — | @@ -827,7 +836,7 @@ |
| 828 | 837 | $j( '#rsd_form' ) |
| 829 | 838 | .unbind() |
| 830 | 839 | .submit( function() { |
| 831 | | - _this.showCurrentTab(); |
| | 840 | + _this.UpdateResults(); |
| 832 | 841 | // Don't submit the form |
| 833 | 842 | return false; |
| 834 | 843 | } ); |
| — | — | @@ -853,7 +862,7 @@ |
| 854 | 863 | .addClass( 'rsd_search_button' ) |
| 855 | 864 | .buttonHover() |
| 856 | 865 | .click(function (){ |
| 857 | | - _this.showSearchTab( _this.current_provider, true ); |
| | 866 | + _this.UpdateResults( _this.current_provider, true ); |
| 858 | 867 | }); |
| 859 | 868 | var $searchBox = $j( '<input />' ).addClass( 'ui-widget-content ui-corner-all' ).attr({ |
| 860 | 869 | type: "text", |
| — | — | @@ -895,7 +904,7 @@ |
| 896 | 905 | $j( this ).addClass( 'ui-selected' ); |
| 897 | 906 | _this.current_provider = $j( this ).attr( "name" ); |
| 898 | 907 | // Update the search results on provider selection |
| 899 | | - _this.showSearchTab( _this.current_provider, true ); |
| | 908 | + _this.UpdateResults( _this.current_provider, true ); |
| 900 | 909 | }); |
| 901 | 910 | |
| 902 | 911 | var $listItem = $j( '<li />' ); |
| — | — | @@ -913,7 +922,7 @@ |
| 914 | 923 | .addClass("rsd_upload_button") |
| 915 | 924 | .click(function(){ |
| 916 | 925 | _this.current_provider = 'upload'; |
| 917 | | - _this.showUploadTab( ); |
| | 926 | + _this.UpdateUploadResults( ); |
| 918 | 927 | }); |
| 919 | 928 | $searchForm.append( $uploadButton ); |
| 920 | 929 | /* |
| — | — | @@ -932,11 +941,11 @@ |
| 933 | 942 | /** |
| 934 | 943 | * Shows the upload tab loader and issues a call to showUploadForm |
| 935 | 944 | */ |
| 936 | | - showUploadTab: function() { |
| 937 | | - mw.log( "showUploadTab::" ); |
| | 945 | + UpdateUploadResults: function() { |
| | 946 | + mw.log( "UpdateUploadResults::" ); |
| 938 | 947 | var _this = this; |
| 939 | 948 | // set it to loading: |
| 940 | | - $j( '#rsd_results_container' ).loadingSpinner(); |
| | 949 | + this.$resultsContainer.loadingSpinner(); |
| 941 | 950 | //Show the upload form |
| 942 | 951 | mw.load( ['$j.fn.simpleUploadForm'], function() { |
| 943 | 952 | var provider = _this.content_providers['this_wiki']; |
| — | — | @@ -982,7 +991,7 @@ |
| 983 | 992 | } ) |
| 984 | 993 | .loadingSpinner() |
| 985 | 994 | ) |
| 986 | | - $j( '#rsd_results_container' ).html( |
| | 995 | + this.$resultsContainer.html( |
| 987 | 996 | $j('<table />').append( |
| 988 | 997 | $uploadTableRow |
| 989 | 998 | ) |
| — | — | @@ -1020,28 +1029,27 @@ |
| 1021 | 1030 | }, |
| 1022 | 1031 | |
| 1023 | 1032 | /** |
| 1024 | | - * Show the current tab ( based on current_provider var ) |
| | 1033 | + * Refresh the results container ( based on current_provider var ) |
| 1025 | 1034 | */ |
| 1026 | | - showCurrentTab: function() { |
| | 1035 | + UpdateResults: function() { |
| | 1036 | + this.$filtersContainer.hide(); |
| 1027 | 1037 | if ( this.current_provider == 'upload' ) { |
| 1028 | | - this.showUploadTab(); |
| | 1038 | + this.UpdateUploadResults(); |
| 1029 | 1039 | } else { |
| 1030 | | - this.showSearchTab( this.current_provider, false ); |
| | 1040 | + this.UpdateSearchResults( this.current_provider, false ); |
| 1031 | 1041 | } |
| 1032 | 1042 | }, |
| 1033 | 1043 | |
| 1034 | 1044 | /** |
| 1035 | | - * Show the search tab for a given providerName |
| | 1045 | + * Show updated search results for a given providerName |
| 1036 | 1046 | * |
| 1037 | 1047 | * @param {String} providerName name of the content provider |
| 1038 | 1048 | * @param {Bollean} resetPaging if the pagging should be reset |
| 1039 | 1049 | */ |
| 1040 | | - showSearchTab: function( providerName, resetPaging ) { |
| 1041 | | - mw.log( "f:showSearchTab::" + providerName ); |
| | 1050 | + UpdateSearchResults: function( providerName, resetPaging ) { |
| | 1051 | + mw.log( "f:UpdateSearchResults::" + providerName ); |
| 1042 | 1052 | |
| 1043 | 1053 | var draw_direct_flag = true; |
| 1044 | | - |
| 1045 | | - // Else do showSearchTab |
| 1046 | 1054 | var provider = this.content_providers[ providerName ]; |
| 1047 | 1055 | |
| 1048 | 1056 | // Check if we need to update: |
| — | — | @@ -1066,16 +1074,16 @@ |
| 1067 | 1075 | } |
| 1068 | 1076 | |
| 1069 | 1077 | if ( $j ( '#rsd_q' ).val().length == 0 ) { |
| 1070 | | - $j( '#rsd_results_container' ).empty() |
| 1071 | | - $j( '#rsd_results_container' ).text( 'Please insert a search string above.' ); |
| | 1078 | + this.$resultsContainer.empty(); |
| | 1079 | + this.$resultsContainer.text( 'Please insert a search string above.' ); |
| 1072 | 1080 | return; |
| 1073 | 1081 | } |
| 1074 | 1082 | |
| 1075 | 1083 | // Set the content to loading while we do the search: |
| 1076 | | - $j( '#rsd_results_container' ).html( mw.loading_spinner() ); |
| 1077 | | - |
| | 1084 | + this.$resultsContainer.html( mw.loading_spinner() ); |
| | 1085 | + |
| 1078 | 1086 | // Make sure the search library is loaded and issue the search request |
| 1079 | | - this.getProviderResults( provider ); |
| | 1087 | + this.PerformProviderSearch( provider ); |
| 1080 | 1088 | }, |
| 1081 | 1089 | |
| 1082 | 1090 | /* |
| — | — | @@ -1171,22 +1179,74 @@ |
| 1172 | 1180 | } ); |
| 1173 | 1181 | }, |
| 1174 | 1182 | |
| | 1183 | + |
| | 1184 | + createSearchFilters: function( current_provider ) { |
| | 1185 | + var _this = this; |
| | 1186 | + mw.log( 'f: CreateSearchFilters ' ); |
| | 1187 | + |
| | 1188 | + this.CreateFilterBox( 'rsd_media_type_filter', |
| | 1189 | + 'Media', |
| | 1190 | + { Video: 'video', |
| | 1191 | + Image: 'image', |
| | 1192 | + Audio: 'audio' } ); |
| | 1193 | + |
| | 1194 | + this.CreateFilterBox( 'rsd_provider_filter', |
| | 1195 | + 'Provider', |
| | 1196 | + current_provider.aggregated_providers ); |
| | 1197 | + |
| | 1198 | + }, |
| | 1199 | + |
| 1175 | 1200 | /** |
| 1176 | | - * Get the search results for a given content provider |
| | 1201 | + * Creates a single filter box with given options and appends it to the filter container. |
| | 1202 | + * |
| | 1203 | + * @id {string} unique id for this filter box an residing elements |
| | 1204 | + * @title {string} title of the filter box |
| | 1205 | + * @options {array} array of strings describing the options in the filter box |
| | 1206 | + * |
| | 1207 | + */ |
| | 1208 | + |
| | 1209 | + CreateFilterBox: function( id, title, options ) { |
| | 1210 | + $box = $j( '<div />' ).addClass( 'ui-filter-box' ).attr({ |
| | 1211 | + 'id': id |
| | 1212 | + }); |
| | 1213 | + |
| | 1214 | + $title = $j( '<div />' ).addClass( 'ui-filter-title' ).text( title ); |
| | 1215 | + $box.append( $title ); |
| | 1216 | + |
| | 1217 | + for (option in options) { |
| | 1218 | + $option = $j( '<div />' ).addClass( 'ui-filter-option' ).text( option ); |
| | 1219 | + |
| | 1220 | + $checkbox = $j( '<input />' ) |
| | 1221 | + .attr( { |
| | 1222 | + type: 'checkbox', |
| | 1223 | + name: id + '_' + title + '_' + options.option, |
| | 1224 | + value: options.option, |
| | 1225 | + checked: true |
| | 1226 | + } ); |
| | 1227 | + |
| | 1228 | + $option.prepend( $checkbox ); |
| | 1229 | + $box.append( $option ); |
| | 1230 | + } |
| | 1231 | + |
| | 1232 | + this.$filtersContainer.append($box); |
| | 1233 | + }, |
| | 1234 | + |
| | 1235 | + /** |
| | 1236 | + * Performs the search for a given content provider |
| 1177 | 1237 | * |
| 1178 | | - * Sets up binding to showResults once search providers results are ready |
| | 1238 | + * Calls showResults once search results are ready |
| 1179 | 1239 | * |
| 1180 | 1240 | * @param {Object} provider the provider to be searched. |
| 1181 | 1241 | */ |
| 1182 | | - getProviderResults: function( provider ) { |
| | 1242 | + PerformProviderSearch: function( provider ) { |
| 1183 | 1243 | var _this = this; |
| 1184 | | - mw.log('f: getProviderResults ' ); |
| | 1244 | + mw.log( 'f: PerformProviderSearch ' ); |
| 1185 | 1245 | // First check if we should even run the search at all (can we import / insert |
| 1186 | 1246 | // into the page? ) |
| 1187 | 1247 | if ( !this.isProviderLocal( provider ) && this.import_url_mode == 'autodetect' ) { |
| 1188 | 1248 | // provider is not local check if we can support the import mode: |
| 1189 | 1249 | this.checkForCopyURLSupport( function() { |
| 1190 | | - _this.getProviderResults( provider ); |
| | 1250 | + _this.PerformProviderSearch( provider ); |
| 1191 | 1251 | } ); |
| 1192 | 1252 | return false; |
| 1193 | 1253 | } else if ( !this.isProviderLocal( provider ) && this.import_url_mode == 'none' ) { |
| — | — | @@ -1194,7 +1254,7 @@ |
| 1195 | 1255 | // combined results are harder to error handle just ignore that repo |
| 1196 | 1256 | provider.sObj.loading = false; |
| 1197 | 1257 | } else { |
| 1198 | | - $j( '#rsd_results_container' ).html( |
| | 1258 | + this.$resultsContainer.html( |
| 1199 | 1259 | gM( 'mwe-no_import_by_url' ) |
| 1200 | 1260 | ) |
| 1201 | 1261 | } |
| — | — | @@ -1287,24 +1347,26 @@ |
| 1288 | 1348 | mw.log( 'f:showResults::' + this.current_provider ); |
| 1289 | 1349 | var _this = this; |
| 1290 | 1350 | var o = ''; |
| 1291 | | - var tabSelector = '#rsd_results_container'; |
| 1292 | 1351 | var provider = this.content_providers[ this.current_provider ]; |
| 1293 | 1352 | |
| 1294 | 1353 | |
| 1295 | 1354 | // The "upload" tab has special results output target rather than top level |
| 1296 | 1355 | // resutls container. |
| 1297 | | - // @@todo Clean up by moving the rsd_results_container down in the DOM for selected tab display. |
| 1298 | | - // ( will be need once we add left side filter controls |
| 1299 | | - // that are exclusive to some providers ) |
| 1300 | 1356 | if ( this.current_provider == 'upload' ) { |
| 1301 | 1357 | $resultsContainer = $j('#upload_bin'); |
| 1302 | 1358 | var provider = _this.content_providers['this_wiki']; |
| 1303 | 1359 | } else { |
| 1304 | 1360 | var provider = this.content_providers[ this.current_provider ]; |
| 1305 | | - $resultsContainer = $j('#rsd_results_container'); |
| | 1361 | + $resultsContainer = this.$resultsContainer; |
| 1306 | 1362 | |
| 1307 | 1363 | // Add the results header: |
| 1308 | 1364 | $resultsContainer.empty().append( this.createResultsHeader() ) |
| | 1365 | + |
| | 1366 | + // Enable search filters, if the provider supports them. |
| | 1367 | + if ( provider.show_filters ) { |
| | 1368 | + // this.$filtersContainer.show(); |
| | 1369 | + this.createSearchFilters( provider ); |
| | 1370 | + } |
| 1309 | 1371 | } |
| 1310 | 1372 | |
| 1311 | 1373 | // Empty the existing results: |
| — | — | @@ -1479,7 +1541,7 @@ |
| 1480 | 1542 | $j( _this.target_container ).find( '#rsd_resource_edit' ).remove(); |
| 1481 | 1543 | |
| 1482 | 1544 | // Hide the results container |
| 1483 | | - $j( '#rsd_results_container' ).hide(); |
| | 1545 | + this.$resultsContainer.hide(); |
| 1484 | 1546 | |
| 1485 | 1547 | var pt = $j( _this.target_container ).html(); |
| 1486 | 1548 | |
| — | — | @@ -1705,7 +1767,7 @@ |
| 1706 | 1768 | $j( '#rsd_preview_display' ).remove(); |
| 1707 | 1769 | |
| 1708 | 1770 | // Restore the resource container: |
| 1709 | | - $j( '#rsd_results_container' ).show(); |
| | 1771 | + this.$resultsContainer.show(); |
| 1710 | 1772 | |
| 1711 | 1773 | // Restore the title: |
| 1712 | 1774 | $j( _this.target_container ).dialog( 'option', 'title', gM( 'mwe-add_media_wizard' ) ); |
| — | — | @@ -2766,7 +2828,7 @@ |
| 2767 | 2829 | provider.offset -= provider.limit; |
| 2768 | 2830 | if ( provider.offset < 0 ) |
| 2769 | 2831 | provider.offset = 0; |
| 2770 | | - _this.showCurrentTab(); |
| | 2832 | + _this.UpdateResults(); |
| 2771 | 2833 | } ); |
| 2772 | 2834 | $pagingControl.prepend( $prevLink ); |
| 2773 | 2835 | } |
| — | — | @@ -2782,7 +2844,7 @@ |
| 2783 | 2845 | .text( nextLinkText ) |
| 2784 | 2846 | .click( function() { |
| 2785 | 2847 | provider.offset += provider.limit; |
| 2786 | | - _this.showCurrentTab(); |
| | 2848 | + _this.UpdateResults(); |
| 2787 | 2849 | } ); |
| 2788 | 2850 | $pagingControl.append( $nextLink ); |
| 2789 | 2851 | } |
| — | — | @@ -2798,10 +2860,10 @@ |
| 2799 | 2861 | mw.log( 'select tab: ' + provider_id ); |
| 2800 | 2862 | this.current_provider = provider_id; |
| 2801 | 2863 | if ( this.current_provider == 'upload' ) { |
| 2802 | | - this.showUploadTab(); |
| | 2864 | + this.UpdateUploadResults(); |
| 2803 | 2865 | } else { |
| 2804 | 2866 | // update the search results: |
| 2805 | | - this.showCurrentTab(); |
| | 2867 | + this.UpdateResults(); |
| 2806 | 2868 | } |
| 2807 | 2869 | }, |
| 2808 | 2870 | |