| Index: branches/js2-work/phase3/js/mwEmbed/skins/common/common.css |
| — | — | @@ -106,6 +106,9 @@ |
| 107 | 107 | padding-left: 10px; |
| 108 | 108 | } |
| 109 | 109 | |
| | 110 | +.rsd_box_result { |
| | 111 | + position: relative; |
| | 112 | +} |
| 110 | 113 | .rsd_clickable { |
| 111 | 114 | color: blue; |
| 112 | 115 | margin-top: 12px; |
| — | — | @@ -172,6 +175,10 @@ |
| 173 | 176 | opacity: 0.7; |
| 174 | 177 | } |
| 175 | 178 | |
| | 179 | +.rsd_list_item { |
| | 180 | + float: left; |
| | 181 | +} |
| | 182 | + |
| 176 | 183 | .rsd_paging_control { |
| 177 | 184 | float: right; |
| 178 | 185 | } |
| Index: branches/js2-work/phase3/js/mwEmbed/modules/AddMedia/mw.RemoteSearchDriver.js |
| — | — | @@ -503,15 +503,27 @@ |
| 504 | 504 | /** |
| 505 | 505 | * Get license icon html |
| 506 | 506 | * @param license_key the license key (ie "by-sa" or "by-nc-sa" etc) |
| | 507 | + * |
| | 508 | + * @return {jQuery element} A div containing the license icons. |
| 507 | 509 | */ |
| 508 | 510 | getLicenseIconHtml: function( licenseObj ) { |
| 509 | | - // mw.log('output images: '+ imgs); |
| 510 | | - return '<div class="rsd_license" title="' + licenseObj.title + '" >' + |
| 511 | | - '<a target="_new" href="' + licenseObj.lurl + '" ' + |
| 512 | | - 'title="' + licenseObj.title + '">' + |
| 513 | | - licenseObj.img_html + |
| 514 | | - '</a>' + |
| 515 | | - '</div>'; |
| | 511 | + |
| | 512 | + var $licenseLink = $j( '<a />' ) |
| | 513 | + .attr( { |
| | 514 | + target: '_new', |
| | 515 | + href: licenseObj.lurl, |
| | 516 | + title: licenseObj.title |
| | 517 | + } ) |
| | 518 | + .append( licenseObj.img_html ); |
| | 519 | + |
| | 520 | + $licenseBox = $j( '<div />' ) |
| | 521 | + .addClass( 'rsd_license' ) |
| | 522 | + .attr( { |
| | 523 | + title: licenseObj.title |
| | 524 | + } ) |
| | 525 | + .append( $licenseLink ); |
| | 526 | + |
| | 527 | + return $licenseBox; |
| 516 | 528 | }, |
| 517 | 529 | |
| 518 | 530 | /** |
| — | — | @@ -1373,7 +1385,7 @@ |
| 1374 | 1386 | showResults: function() { |
| 1375 | 1387 | mw.log( 'f:showResults::' + this.current_provider ); |
| 1376 | 1388 | var _this = this; |
| 1377 | | - var o = ''; |
| | 1389 | + |
| 1378 | 1390 | var provider = this.content_providers[ this.current_provider ]; |
| 1379 | 1391 | |
| 1380 | 1392 | // Result page structure: |
| — | — | @@ -1418,11 +1430,11 @@ |
| 1419 | 1431 | // Output all the results for the current current_provider |
| 1420 | 1432 | if ( typeof provider['sObj'] != 'undefined' ) { |
| 1421 | 1433 | $j.each( provider.sObj.resultsObj, function( resIndex, resource ) { |
| 1422 | | - o += _this.getResultHtml( provider, resIndex, resource ); |
| | 1434 | + $resultsList.append( _this.getResultHtml( provider, resIndex, resource ) ); |
| 1423 | 1435 | numResults++; |
| 1424 | 1436 | } ); |
| 1425 | 1437 | // Put in the tab output (plus clear the output) |
| 1426 | | - $resultsList.append( o + '<div style="clear: both" />' ); |
| | 1438 | + $resultsList.append( '<div style="clear: both" />' ); |
| 1427 | 1439 | } |
| 1428 | 1440 | |
| 1429 | 1441 | $resultsBody.append( $resultsList ); |
| — | — | @@ -1476,70 +1488,95 @@ |
| 1477 | 1489 | * Get result html for box layout (see getResultHtml for params) |
| 1478 | 1490 | */ |
| 1479 | 1491 | getResultHtmlBox: function( provider, resIndex, resource ) { |
| 1480 | | - var o = ''; |
| 1481 | | - o += '<div id="mv_result_' + resIndex + '" ' + |
| 1482 | | - 'class="mv_clip_box_result" ' + |
| 1483 | | - 'style="' + |
| 1484 | | - 'width:' + this.thumb_width + 'px;' + |
| 1485 | | - 'height:' + ( this.thumb_width - 20 ) + 'px;' + |
| 1486 | | - 'position:relative;">'; |
| 1487 | 1492 | |
| | 1493 | + var $resultBox = $j( '<div />' ) |
| | 1494 | + .addClass( 'mv_clip_box_result rsd_box_result' ) |
| | 1495 | + .attr( { |
| | 1496 | + id: 'mv_result_' + resIndex |
| | 1497 | + } ) |
| | 1498 | + .width( this.thumb_width ) |
| | 1499 | + .height( this.thumb_width - 20 ); |
| | 1500 | + |
| 1488 | 1501 | // Check for missing poster types for audio |
| 1489 | | - if ( resource.mime == 'audio/ogg' && !resource.poster ) { |
| | 1502 | + if ( (resource.mime == 'audio/ogg' || resource.mime == 'application/ogg') |
| | 1503 | + && !resource.poster ) { |
| 1490 | 1504 | resource.poster = mw.getConfig( 'images_path' ) + 'sound_music_icon-80.png'; |
| 1491 | 1505 | } |
| | 1506 | + |
| | 1507 | + var $resultThumb = $j( '<img />' ) |
| | 1508 | + .addClass( 'rsd_res_item' ) |
| | 1509 | + .attr( { |
| | 1510 | + id: 'res_' + provider.id + '__' + resIndex, |
| | 1511 | + title: resource.title, |
| | 1512 | + src: provider.sObj.getImageTransform( resource, { 'width': this.thumb_width } ) |
| | 1513 | + } ) |
| | 1514 | + .width( this.thumb_width ); |
| 1492 | 1515 | |
| 1493 | | - // Get a thumb with proper resolution transform if possible: |
| 1494 | | - var thumbUrl = provider.sObj.getImageTransform( resource, |
| 1495 | | - { 'width' : this.thumb_width } ); |
| | 1516 | + $resultBox.append( $resultThumb ); |
| 1496 | 1517 | |
| 1497 | | - o += '<img title="' + resource.title + '" ' + |
| 1498 | | - 'class="rsd_res_item" id="res_' + provider.id + '__' + resIndex + '" ' + |
| 1499 | | - 'style="width:' + this.thumb_width + 'px;" ' + |
| 1500 | | - 'src="' + thumbUrl + '">'; |
| | 1518 | + if ( resource.link ) { |
| | 1519 | + var $resultPageLink = $j( '<div />' ) |
| | 1520 | + .addClass( 'rsd_linkback ui-corner-all ui-state-default ui-widget-content' ) |
| | 1521 | + .append( $j( '<a />' ) |
| | 1522 | + .attr( { |
| | 1523 | + target: '_new', |
| | 1524 | + title: gM( 'mwe-resource_description_page' ), |
| | 1525 | + href: resource.link |
| | 1526 | + } ) |
| | 1527 | + .append( gM( 'mwe-link' ))); |
| 1501 | 1528 | |
| 1502 | | - // Add a linkback to resource page in upper right: |
| 1503 | | - if ( resource.link ) { |
| 1504 | | - o += '<div class="' + |
| 1505 | | - 'rsd_linkback ui-corner-all ui-state-default ui-widget-content" >' + |
| 1506 | | - '<a target="_new" title="' + gM( 'mwe-resource_description_page' ) + |
| 1507 | | - '" href="' + resource.link + '">' + gM( 'mwe-link' ) + '</a>' + |
| 1508 | | - '</div>'; |
| 1509 | | - } |
| 1510 | | - |
| 1511 | | - // Add file type icon if known |
| | 1529 | + $resultBox.append( $resultPageLink ); |
| | 1530 | + } |
| | 1531 | + |
| 1512 | 1532 | if ( resource.mime ) { |
| 1513 | | - o += this.getTypeIcon( resource.mime ); |
| | 1533 | + $resultBox.append( this.getTypeIcon( resource.mime ) ); |
| 1514 | 1534 | } |
| 1515 | | - |
| | 1535 | + |
| 1516 | 1536 | // Add license icons if present |
| 1517 | | - if ( resource.license ) |
| 1518 | | - o += this.getLicenseIconHtml( resource.license ); |
| 1519 | | - |
| 1520 | | - o += '</div>'; |
| 1521 | | - return o; |
| | 1537 | + if ( resource.license ) { |
| | 1538 | + $resultBox.append( this.getLicenseIconHtml( resource.license ) ); |
| | 1539 | + } |
| | 1540 | + |
| | 1541 | + $resultBox.append( '<div style="clear: both" />' ); |
| | 1542 | + |
| | 1543 | + return $resultBox; |
| 1522 | 1544 | }, |
| 1523 | 1545 | |
| 1524 | 1546 | /** |
| 1525 | 1547 | * Get result html for list layout (see getResultHtml for params) |
| 1526 | 1548 | */ |
| 1527 | 1549 | getResultHtmlList:function( provider, resIndex, resource ) { |
| 1528 | | - var o = ''; |
| 1529 | | - o += '<div id="mv_result_' + resIndex + '" class="mv_clip_list_result" style="width:90%">'; |
| 1530 | | - o += '<img ' + |
| 1531 | | - 'title="' + resource.title + '" ' + |
| 1532 | | - 'class="rsd_res_item" id="res_' + provider.id + '__' + resIndex + '" ' + |
| 1533 | | - 'style="float:left;width:' + this.thumb_width + 'px;" ' + |
| 1534 | | - 'src="' + provider.sObj.getImageTransform( resource, { 'width': this.thumb_width } ) + '">'; |
| | 1550 | + |
| | 1551 | + var $resultBox = $j( '<div />' ) |
| | 1552 | + .addClass( 'mv_clip_list_result' ) |
| | 1553 | + .attr( { |
| | 1554 | + id: 'mv_result_' + resIndex |
| | 1555 | + } ) |
| | 1556 | + .width( '90%' ); |
| | 1557 | + |
| | 1558 | + if ( resource.description ) { |
| | 1559 | + $resultBox.text( resource.description ); |
| | 1560 | + } |
| | 1561 | + |
| | 1562 | + var $resultThumb = $j( '<img />' ) |
| | 1563 | + .addClass( 'rsd_res_item rsd_list_item' ) |
| | 1564 | + .attr( { |
| | 1565 | + id: 'res_' + provider.id + '__' + resIndex, |
| | 1566 | + title: resource.title, |
| | 1567 | + src: provider.sObj.getImageTransform( resource, { 'width': this.thumb_width } ) |
| | 1568 | + } ) |
| | 1569 | + .width( this.thumb_width ); |
| | 1570 | + |
| | 1571 | + $resultBox.prepend( $resultThumb ); |
| 1535 | 1572 | |
| 1536 | 1573 | // Add license icons if present |
| 1537 | | - if ( resource.license ) |
| 1538 | | - o += this.getLicenseIconHtml( resource.license ); |
| | 1574 | + if ( resource.license ) { |
| | 1575 | + $resultBox.append( this.getLicenseIconHtml( resource.license ) ); |
| | 1576 | + } |
| | 1577 | + |
| | 1578 | + $resultBox.append( '<div style="clear: both" />' ); |
| 1539 | 1579 | |
| 1540 | | - o += resource.desc ; |
| 1541 | | - o += '<div style="clear:both" />'; |
| 1542 | | - o += '</div>'; |
| 1543 | | - return o; |
| | 1580 | + return $resultBox; |
| 1544 | 1581 | }, |
| 1545 | 1582 | |
| 1546 | 1583 | /** |