WordPress.org
Get WordPress

Make WordPress Core

Changeset 31797


Ignore:
Timestamp:
03/16/2015 08:50:39 PM (12 years ago)
Author:
azaozz
Message:

Press This:

  • Test image sizes from JS after Press This loads, before adding them to "Suggested media".
  • Clean up and simplify the HTML and JS a bit.

Fixes #31561.

Location:
trunk/src
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/press-this.css

    r31765 r31797  
    14401440
    14411441/* Suggested images */
    1442 .featured-container {
     1442.media-list-container {
    14431443        position: relative;
    14441444        padding: 2px 0;
    14451445        border-bottom: 1px solid #e5e5e5;
    1446 }
    1447 
    1448 .all-media {
    14491446        display: none;
     1447}
     1448
     1449.media-list-inner-container {
    14501450        overflow: auto;
    14511451        max-height: 150px;
    … …  
    14531453}
    14541454
    1455 .all-media:before, .all-media:after {
     1455.media-list-container.has-media {
     1456        display: block;
     1457}
     1458
     1459.media-list-inner-container:before,
     1460.media-list-inner-container:after {
    14561461        content: "";
    14571462        display: table;
    14581463}
    14591464
    1460 .all-media:after {
     1465.media-list-inner-container:after {
    14611466        clear: both;
    14621467}
    14631468
     1469.media-list {
     1470        margin: 0;
     1471        padding: 0;
     1472}
     1473
    14641474@media (min-width: 321px) {
    1465         .all-media {
     1475        .media-list-inner-container {
    14661476                max-height: 250px;
    14671477                max-height: 40vw;
    … …  
    14701480
    14711481@media (min-width: 601px) {
    1472         .all-media {
     1482        .media-list-inner-container {
    14731483                max-height: 200px;
    14741484                max-height: 18.75vw;
    … …  
    14831493
    14841494.suggested-media-thumbnail:focus,
    1485 .suggested-media-embed:focus {
     1495.is-embed:focus {
    14861496        outline: 0;
    14871497        -webkit-box-shadow: inset 0 0 0 3px #2ea2cc;
    … …  
    15471557}
    15481558
    1549 .suggested-media-embed:before {
     1559.is-embed:before {
    15501560        content: "\f104";
    15511561        color: #fff;
    … …  
    15531563}
    15541564
    1555 .suggested-media-embed.is-audio:hover:before,
    1556 .suggested-media-embed.is-audio:active:before,
    1557 .suggested-media-embed.is-audio:focus:before,
    1558 .suggested-media-embed.is-tweet:hover:before,
    1559 .suggested-media-embed.is-tweet:active:before,
    1560 .suggested-media-embed.is-tweet:focus:before {
     1565.is-embed.is-audio:hover:before,
     1566.is-embed.is-audio:active:before,
     1567.is-embed.is-audio:focus:before,
     1568.is-embed.is-tweet:hover:before,
     1569.is-embed.is-tweet:active:before,
     1570.is-embed.is-tweet:focus:before {
    15611571        color: #fff;
    15621572}
    15631573
    1564 .suggested-media-embed.is-video {
     1574.is-embed.is-video {
    15651575        background-color: #222;
    15661576}
    15671577
    1568 .suggested-media-embed.is-video:hover:before,
    1569 .suggested-media-embed.is-video:active:before,
    1570 .suggested-media-embed.is-video:focus:before {
     1578.is-embed.is-video:hover:before,
     1579.is-embed.is-video:active:before,
     1580.is-embed.is-video:focus:before {
    15711581        color: rgba(255, 255, 255, 0.2);
    15721582}
    15731583
    1574 .suggested-media-embed.is-video:before {
     1584.is-embed.is-video:before {
    15751585        content: "\f236";
    15761586}
    15771587
    1578 .suggested-media-embed.is-audio {
     1588.is-embed.is-audio {
    15791589        background-color: #ff7d44;
    15801590}
    15811591
    1582 .suggested-media-embed.is-audio:before {
     1592.is-embed.is-audio:before {
    15831593        content: "\f127";
    15841594}
    15851595
    1586 .suggested-media-embed.is-tweet {
     1596.is-embed.is-tweet {
    15871597        background-color: #55acee;
    15881598}
    15891599
    1590 .suggested-media-embed.is-tweet:before {
     1600.is-embed.is-tweet:before {
    15911601        content: "\f301";
    1592 }
    1593 
    1594 .all-media-visible .all-media {
    1595         display: block;
    15961602}
    15971603

  • trunk/src/wp-admin/includes/class-wp-press-this.php

    r31775 r31797  
    12131213                        </div>
    12141214
    1215                         <div id='app-container' class="editor">
     1215                        <div id="app-container" class="editor">
    12161216                                <span id="title-container-label" class="post-title-placeholder" aria-hidden="true"><?php _e( 'Post title' ); ?></span>
    12171217                                <h2 id="title-container" class="post-title" contenteditable="true" spellcheck="true" aria-label="<?php esc_attr_e( 'Post title' ); ?>" tabindex="0"><?php echo esc_html( $post_title ); ?></h2>
    1218                                 <div id='featured-media-container' class="featured-container no-media">
    1219                                         <div id='all-media-widget' class="all-media">
    1220                                                 <div id='all-media-container'></div>
     1218
     1219                                <div class="media-list-container">
     1220                                        <div class="media-list-inner-container">
     1221                                                <h2 class="screen-reader-text"><?php _e( 'Suggested media' ); ?></h2>
     1222                                                <ul class="media-list"></ul>
    12211223                                        </div>
    12221224                                </div>

  • trunk/src/wp-admin/js/bookmarklet.js

    r31778 r31797  
    33                form = document.createElement( 'form' ),
    44                head = document.getElementsByTagName( 'head' )[0],
    5                 img = new Image(),
    65                target = '_press_this_app',
    76                canPost = true,
    8                 windowWidth, windowHeight,
    9                 metas, links, content, imgs, ifrs,
    10                 selection;
     7                windowWidth, windowHeight, selection,
     8                metas, links, content, images, iframes, img;
    119
    1210        if ( ! pt_url ) {
    … …  
    120118
    121119        content = document.getElementById( 'content' ) || content || document.body;
    122         imgs = content.getElementsByTagName( 'img' ) || [];
     120        images = content.getElementsByTagName( 'img' ) || [];
    123121
    124         for ( var n = 0; n < imgs.length; n++ ) {
    125                 if ( n >= 50 ) {
     122        for ( var n = 0; n < images.length; n++ ) {
     123                if ( n >= 100 ) {
    126124                        break;
    127125                }
    128126
    129                 if ( imgs[ n ].src.indexOf( 'avatar' ) > -1 || imgs[ n ].className.indexOf( 'avatar' ) > -1 ) {
     127                img = images[ n ];
     128
     129                // If we know the image width and/or height, check them now and drop the "uninteresting" images.
     130                if ( img.src.indexOf( 'avatar' ) > -1 || img.className.indexOf( 'avatar' ) > -1 ||
     131                        ( img.width && img.width < 256 ) || ( img.height && img.height < 128 ) ) {
     132
    130133                        continue;
    131134                }
    132135
    133                 img.src = imgs[ n ].src;
    134 
    135                 if ( img.width >= 256 && img.height >= 128 ) {
    136                         add( '_images[]', img.src );
    137                 }
     136                add( '_images[]', img.src );
    138137        }
    139138
    140         ifrs = document.body.getElementsByTagName( 'iframe' ) || [];
     139        iframes = document.body.getElementsByTagName( 'iframe' ) || [];
    141140
    142         for ( var p = 0; p < ifrs.length; p++ ) {
     141        for ( var p = 0; p < iframes.length; p++ ) {
    143142                if ( p >= 50 ) {
    144143                        break;
    145144                }
    146145
    147                 add( '_embeds[]', ifrs[ p ].src );
     146                add( '_embeds[]', iframes[ p ].src );
    148147        }
    149148

  • trunk/src/wp-admin/js/bookmarklet.min.js

    r31778 r31797  
    1 (function(a,b,c,d){function e(a,c){if("undefined"!=typeof c){var d=b.createElement("input");d.name=a,d.value=c,d.type="hidden",o.appendChild(d)}}var f,g,h,i,j,k,l,m,n=a.encodeURIComponent,o=b.createElement("form"),p=b.getElementsByTagName("head")[0],q=new Image,r="_press_this_app",s=!0;if(d){if(!c.match(/^https?:/))return void(top.location.href=d);if(d+="&u="+n(c),c.match(/^https:/)&&d.match(/^http:/)&&(s=!1),a.getSelection?m=a.getSelection()+"":b.getSelection?m=b.getSelection()+"":b.selection&&(m=b.selection.createRange().text||""),d+="&buster="+(new Date).getTime(),s||(b.title&&(d+="&t="+n(b.title.substr(0,256))),m&&(d+="&s="+n(m.substr(0,512)))),f=a.outerWidth||b.documentElement.clientWidth||600,g=a.outerHeight||b.documentElement.clientHeight||700,f=800>f||f>5e3?600:.7*f,g=800>g||g>3e3?700:.9*g,!s)return void a.open(d,r,"location,resizable,scrollbars,width="+f+",height="+g);(c.match(/\/\/(www|m)\.youtube\.com\/watch/)||c.match(/\/\/vimeo\.com\/(.+\/)?([\d]+)$/)||c.match(/\/\/(www\.)?dailymotion\.com\/video\/.+$/)||c.match(/\/\/soundcloud\.com\/.+$/)||c.match(/\/\/twitter\.com\/[^\/]+\/status\/[\d]+$/)||c.match(/\/\/vine\.co\/v\/[^\/]+/))&&e("_embeds[]",c),h=p.getElementsByTagName("meta")||[];for(var t=0;t<h.length&&!(t>200);t++){var u=h[t],v=u.getAttribute("name"),w=u.getAttribute("property"),x=u.getAttribute("content");x&&(v?e("_meta["+v+"]",x):w&&e("_meta["+w+"]",x))}i=p.getElementsByTagName("link")||[];for(var y=0;y<i.length&&!(y>=50);y++){var z=i[y],A=z.getAttribute("rel");("canonical"===A||"icon"===A||"shortlink"===A)&&e("_links["+A+"]",z.getAttribute("href"))}b.body.getElementsByClassName&&(j=b.body.getElementsByClassName("hfeed")[0]),j=b.getElementById("content")||j||b.body,k=j.getElementsByTagName("img")||[];for(var B=0;B<k.length&&!(B>=50);B++)k[B].src.indexOf("avatar")>-1||k[B].className.indexOf("avatar")>-1||(q.src=k[B].src,q.width>=256&&q.height>=128&&e("_images[]",q.src));l=b.body.getElementsByTagName("iframe")||[];for(var C=0;C<l.length&&!(C>=50);C++)e("_embeds[]",l[C].src);b.title&&e("t",b.title),m&&e("s",m),o.setAttribute("method","POST"),o.setAttribute("action",d),o.setAttribute("target",r),o.setAttribute("style","display: none;"),a.open("about:blank",r,"location,resizable,scrollbars,width="+f+",height="+g),b.body.appendChild(o),o.submit()}})(window,document,top.location.href,window.pt_url);
     1(function(a,b,c,d){function e(a,c){if("undefined"!=typeof c){var d=b.createElement("input");d.name=a,d.value=c,d.type="hidden",p.appendChild(d)}}var f,g,h,i,j,k,l,m,n,o=a.encodeURIComponent,p=b.createElement("form"),q=b.getElementsByTagName("head")[0],r="_press_this_app",s=!0;if(d){if(!c.match(/^https?:/))return void(top.location.href=d);if(d+="&u="+o(c),c.match(/^https:/)&&d.match(/^http:/)&&(s=!1),a.getSelection?h=a.getSelection()+"":b.getSelection?h=b.getSelection()+"":b.selection&&(h=b.selection.createRange().text||""),d+="&buster="+(new Date).getTime(),s||(b.title&&(d+="&t="+o(b.title.substr(0,256))),h&&(d+="&s="+o(h.substr(0,512)))),f=a.outerWidth||b.documentElement.clientWidth||600,g=a.outerHeight||b.documentElement.clientHeight||700,f=800>f||f>5e3?600:.7*f,g=800>g||g>3e3?700:.9*g,!s)return void a.open(d,r,"location,resizable,scrollbars,width="+f+",height="+g);(c.match(/\/\/(www|m)\.youtube\.com\/watch/)||c.match(/\/\/vimeo\.com\/(.+\/)?([\d]+)$/)||c.match(/\/\/(www\.)?dailymotion\.com\/video\/.+$/)||c.match(/\/\/soundcloud\.com\/.+$/)||c.match(/\/\/twitter\.com\/[^\/]+\/status\/[\d]+$/)||c.match(/\/\/vine\.co\/v\/[^\/]+/))&&e("_embeds[]",c),i=q.getElementsByTagName("meta")||[];for(var t=0;t<i.length&&!(t>200);t++){var u=i[t],v=u.getAttribute("name"),w=u.getAttribute("property"),x=u.getAttribute("content");x&&(v?e("_meta["+v+"]",x):w&&e("_meta["+w+"]",x))}j=q.getElementsByTagName("link")||[];for(var y=0;y<j.length&&!(y>=50);y++){var z=j[y],A=z.getAttribute("rel");("canonical"===A||"icon"===A||"shortlink"===A)&&e("_links["+A+"]",z.getAttribute("href"))}b.body.getElementsByClassName&&(k=b.body.getElementsByClassName("hfeed")[0]),k=b.getElementById("content")||k||b.body,l=k.getElementsByTagName("img")||[];for(var B=0;B<l.length&&!(B>=100);B++)n=l[B],n.src.indexOf("avatar")>-1||n.className.indexOf("avatar")>-1||n.width&&n.width<256||n.height&&n.height<128||e("_images[]",n.src);m=b.body.getElementsByTagName("iframe")||[];for(var C=0;C<m.length&&!(C>=50);C++)e("_embeds[]",m[C].src);b.title&&e("t",b.title),h&&e("s",h),p.setAttribute("method","POST"),p.setAttribute("action",d),p.setAttribute("target",r),p.setAttribute("style","display: none;"),a.open("about:blank",r,"location,resizable,scrollbars,width="+f+",height="+g),b.body.appendChild(p),p.submit()}})(window,document,top.location.href,window.pt_url);

  • trunk/src/wp-admin/js/press-this.js

    r31765 r31797  
    55( function( $, window ) {
    66        var PressThis = function() {
    7                 var editor,
     7                var editor, $mediaList, $mediaThumbWrap,
    88                        saveAlert             = false,
    99                        textarea              = document.createElement( 'textarea' ),
    … …  
    253253                                                        .attr( 'data-term-id', newCat.term_id )
    254254                                                        .text( newCat.name ) );
    255                                                
     255
    256256                                                if ( newCat.parent ) {
    257257                                                        if ( ! $ul || ! $ul.length ) {
    … …  
    330330
    331331                /**
     332                 * Add an image to the list of found images.
     333                 */
     334                function addImg( src, displaySrc, i ) {
     335                        var $element = $mediaThumbWrap.clone().addClass( 'is-image' );
     336
     337                        $element.css( 'background-image', 'url(' + displaySrc + ')' )
     338                                .find( 'span' ).text( __( 'suggestedImgAlt' ).replace( '%d', i + 1 ) );
     339
     340                        $element.on( 'click keypress', function ( event ) {
     341                                if ( event.type === 'click' || event.keyCode === 13 ) {
     342                                        insertSelectedMedia( 'img', src, data.u );
     343                                }
     344                        } ).appendTo( $mediaList );
     345                }
     346
     347                /**
    332348                 * Render the detected images and embed for selection, if any
    333349                 */
    334350                function renderDetectedMedia() {
    335                         var mediaContainer = $( '#featured-media-container'),
    336                                 listContainer  = $( '#all-media-container' ),
    337                                 found          = 0;
    338 
    339                         listContainer.empty();
    340 
    341                         if ( data._embeds || data._images ) {
    342                                 listContainer.append( '<h2 class="screen-reader-text">' + __( 'allMediaHeading' ) + '</h2><ul class="wppt-all-media-list" />' );
    343                         }
     351                        var found = 0;
     352
     353                        $mediaList = $( 'ul.media-list' );
     354                        $mediaThumbWrap = $( '<li class="suggested-media-thumbnail" tabindex="0"><span class="screen-reader-text"></span></li>' );
    344355
    345356                        if ( data._embeds ) {
    346357                                $.each( data._embeds, function ( i, src ) {
     358                                        var displaySrc = '',
     359                                                cssClass = '',
     360                                                $element = $mediaThumbWrap.clone().addClass( 'is-embed' );
     361
    347362                                        src = checkUrl( src );
    348 
    349                                         var displaySrc = '',
    350                                                 cssClass   = 'suggested-media-thumbnail suggested-media-embed';
    351363
    352364                                        if ( src.indexOf( 'youtube.com/' ) > -1 ) {
    … …  
    367379                                        }
    368380
    369                                         $( '<li></li>', {
    370                                                 'id': 'embed-' + i + '-container',
    371                                                 'class': cssClass,
    372                                                 'tabindex': '0'
    373                                         } ).css( {
    374                                                 'background-image': ( displaySrc ) ? 'url(' + displaySrc + ')' : null
    375                                         } ).html(
    376                                                 '<span class="screen-reader-text">' + __( 'suggestedEmbedAlt' ).replace( '%d', i + 1 ) + '</span>'
    377                                         ).on( 'click keypress', function ( e ) {
    378                                                 if ( e.type === 'click' || e.which === 13 ) {
    379                                                         insertSelectedMedia( 'embed',src );
     381                                        $element.find( 'span' ).text( __( 'suggestedEmbedAlt' ).replace( '%d', i + 1 ) );
     382
     383                                        if ( displaySrc ) {
     384                                                $element.css( 'background-image', 'url(' + displaySrc + ')' );
     385                                        }
     386
     387                                        $element.on( 'click keypress', function ( event ) {
     388                                                if ( event.type === 'click' || event.keyCode === 13 ) {
     389                                                        insertSelectedMedia( 'embed', src );
    380390                                                }
    381                                         } ).appendTo( '.wppt-all-media-list', listContainer );
     391                                        } ).appendTo( $mediaList );
    382392
    383393                                        found++;
    … …  
    387397                        if ( data._images ) {
    388398                                $.each( data._images, function( i, src ) {
     399                                        var displaySrc, img = new Image();
     400
    389401                                        src = checkUrl( src );
    390 
    391                                         var displaySrc = src.replace(/^(http[^\?]+)(\?.*)?$/, '$1');
     402                                        displaySrc = src.replace( /^(http[^\?]+)(\?.*)?$/, '$1' );
     403
    392404                                        if ( src.indexOf( 'files.wordpress.com/' ) > -1 ) {
    393                                                 displaySrc = displaySrc.replace(/\?.*$/, '') + '?w=' + smallestWidth;
     405                                                displaySrc = displaySrc.replace( /\?.*$/, '' ) + '?w=' + smallestWidth;
    394406                                        } else if ( src.indexOf( 'gravatar.com/' ) > -1 ) {
    395407                                                displaySrc = displaySrc.replace( /\?.*$/, '' ) + '?s=' + smallestWidth;
    … …  
    398410                                        }
    399411
    400                                         $( '<li></li>', {
    401                                                 'id': 'img-' + i + '-container',
    402                                                 'class': 'suggested-media-thumbnail is-image',
    403                                                 'tabindex': '0'
    404                                         } ).css( {
    405                                                 'background-image': 'url(' + displaySrc + ')'
    406                                         } ).html(
    407                                                 '<span class="screen-reader-text">' +__( 'suggestedImgAlt' ).replace( '%d', i + 1 ) + '</span>'
    408                                         ).on( 'click keypress', function ( e ) {
    409                                                 if ( e.type === 'click' || e.which === 13 ) {
    410                                                         insertSelectedMedia( 'img', src, data.u );
     412                                        img.onload = function() {
     413                                                if ( ( img.width && img.width < 256 ) ||
     414                                                        ( img.height && img.height < 128 ) ) {
     415
     416                                                        return;
    411417                                                }
    412                                         } ).appendTo( '.wppt-all-media-list', listContainer );
    413 
     418
     419                                                addImg( src, displaySrc, i );
     420                                        };
     421
     422                                        img.src = src;
    414423                                        found++;
    415424                                } );
    416425                        }
    417426
    418                         if ( ! found ) {
    419                                 mediaContainer.removeClass( 'all-media-visible' ).addClass( 'no-media');
    420                                 return;
    421                         }
    422 
    423                         mediaContainer.removeClass( 'no-media' ).addClass( 'all-media-visible' );
     427                        if ( found ) {
     428                                $( '.media-list-container' ).addClass( 'has-media' );
     429                        }
    424430                }
    425431

  • trunk/src/wp-includes/script-loader.php

    r31789 r31797  
    503503                        'unexpectedError' => __( 'Sorry, but an unexpected error occurred.' ),
    504504                        'saveAlert' => __( 'The changes you made will be lost if you navigate away from this page.' ),
    505                         'allMediaHeading' => __( 'Suggested media' ),
    506505                        'suggestedEmbedAlt' => __( 'Suggested embed #%d' ),
    507506                        'suggestedImgAlt' => __( 'Suggested image #%d' ),
Note: See TracChangeset for help on using the changeset viewer.