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. git-svn-id: https://develop.svn.wordpress.org/trunk@31797 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrew Ozz
parent
e35b6490a3
commit
eb9cf72a1b
|
|
@ -1439,37 +1439,47 @@ html {
|
|||
}
|
||||
|
||||
/* Suggested images */
|
||||
.featured-container {
|
||||
.media-list-container {
|
||||
position: relative;
|
||||
padding: 2px 0;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.all-media {
|
||||
display: none;
|
||||
.media-list-inner-container {
|
||||
overflow: auto;
|
||||
max-height: 150px;
|
||||
max-height: 40vw;
|
||||
}
|
||||
|
||||
.all-media:before, .all-media:after {
|
||||
.media-list-container.has-media {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.media-list-inner-container:before,
|
||||
.media-list-inner-container:after {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.all-media:after {
|
||||
.media-list-inner-container:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.media-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 321px) {
|
||||
.all-media {
|
||||
.media-list-inner-container {
|
||||
max-height: 250px;
|
||||
max-height: 40vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 601px) {
|
||||
.all-media {
|
||||
.media-list-inner-container {
|
||||
max-height: 200px;
|
||||
max-height: 18.75vw;
|
||||
}
|
||||
|
|
@ -1482,7 +1492,7 @@ html {
|
|||
}
|
||||
|
||||
.suggested-media-thumbnail:focus,
|
||||
.suggested-media-embed:focus {
|
||||
.is-embed:focus {
|
||||
outline: 0;
|
||||
-webkit-box-shadow: inset 0 0 0 3px #2ea2cc;
|
||||
box-shadow: inset 0 0 0 3px #2ea2cc;
|
||||
|
|
@ -1546,55 +1556,51 @@ html {
|
|||
}
|
||||
}
|
||||
|
||||
.suggested-media-embed:before {
|
||||
.is-embed:before {
|
||||
content: "\f104";
|
||||
color: #fff;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.suggested-media-embed.is-audio:hover:before,
|
||||
.suggested-media-embed.is-audio:active:before,
|
||||
.suggested-media-embed.is-audio:focus:before,
|
||||
.suggested-media-embed.is-tweet:hover:before,
|
||||
.suggested-media-embed.is-tweet:active:before,
|
||||
.suggested-media-embed.is-tweet:focus:before {
|
||||
.is-embed.is-audio:hover:before,
|
||||
.is-embed.is-audio:active:before,
|
||||
.is-embed.is-audio:focus:before,
|
||||
.is-embed.is-tweet:hover:before,
|
||||
.is-embed.is-tweet:active:before,
|
||||
.is-embed.is-tweet:focus:before {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.suggested-media-embed.is-video {
|
||||
.is-embed.is-video {
|
||||
background-color: #222;
|
||||
}
|
||||
|
||||
.suggested-media-embed.is-video:hover:before,
|
||||
.suggested-media-embed.is-video:active:before,
|
||||
.suggested-media-embed.is-video:focus:before {
|
||||
.is-embed.is-video:hover:before,
|
||||
.is-embed.is-video:active:before,
|
||||
.is-embed.is-video:focus:before {
|
||||
color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.suggested-media-embed.is-video:before {
|
||||
.is-embed.is-video:before {
|
||||
content: "\f236";
|
||||
}
|
||||
|
||||
.suggested-media-embed.is-audio {
|
||||
.is-embed.is-audio {
|
||||
background-color: #ff7d44;
|
||||
}
|
||||
|
||||
.suggested-media-embed.is-audio:before {
|
||||
.is-embed.is-audio:before {
|
||||
content: "\f127";
|
||||
}
|
||||
|
||||
.suggested-media-embed.is-tweet {
|
||||
.is-embed.is-tweet {
|
||||
background-color: #55acee;
|
||||
}
|
||||
|
||||
.suggested-media-embed.is-tweet:before {
|
||||
.is-embed.is-tweet:before {
|
||||
content: "\f301";
|
||||
}
|
||||
|
||||
.all-media-visible .all-media {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.no-media {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -1212,12 +1212,14 @@ class WP_Press_This {
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<div id='app-container' class="editor">
|
||||
<div id="app-container" class="editor">
|
||||
<span id="title-container-label" class="post-title-placeholder" aria-hidden="true"><?php _e( 'Post title' ); ?></span>
|
||||
<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>
|
||||
<div id='featured-media-container' class="featured-container no-media">
|
||||
<div id='all-media-widget' class="all-media">
|
||||
<div id='all-media-container'></div>
|
||||
|
||||
<div class="media-list-container">
|
||||
<div class="media-list-inner-container">
|
||||
<h2 class="screen-reader-text"><?php _e( 'Suggested media' ); ?></h2>
|
||||
<ul class="media-list"></ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,12 +2,10 @@
|
|||
var encURI = window.encodeURIComponent,
|
||||
form = document.createElement( 'form' ),
|
||||
head = document.getElementsByTagName( 'head' )[0],
|
||||
img = new Image(),
|
||||
target = '_press_this_app',
|
||||
canPost = true,
|
||||
windowWidth, windowHeight,
|
||||
metas, links, content, imgs, ifrs,
|
||||
selection;
|
||||
windowWidth, windowHeight, selection,
|
||||
metas, links, content, images, iframes, img;
|
||||
|
||||
if ( ! pt_url ) {
|
||||
return;
|
||||
|
|
@ -119,32 +117,33 @@
|
|||
}
|
||||
|
||||
content = document.getElementById( 'content' ) || content || document.body;
|
||||
imgs = content.getElementsByTagName( 'img' ) || [];
|
||||
images = content.getElementsByTagName( 'img' ) || [];
|
||||
|
||||
for ( var n = 0; n < imgs.length; n++ ) {
|
||||
if ( n >= 50 ) {
|
||||
for ( var n = 0; n < images.length; n++ ) {
|
||||
if ( n >= 100 ) {
|
||||
break;
|
||||
}
|
||||
|
||||
if ( imgs[ n ].src.indexOf( 'avatar' ) > -1 || imgs[ n ].className.indexOf( 'avatar' ) > -1 ) {
|
||||
img = images[ n ];
|
||||
|
||||
// If we know the image width and/or height, check them now and drop the "uninteresting" images.
|
||||
if ( img.src.indexOf( 'avatar' ) > -1 || img.className.indexOf( 'avatar' ) > -1 ||
|
||||
( img.width && img.width < 256 ) || ( img.height && img.height < 128 ) ) {
|
||||
|
||||
continue;
|
||||
}
|
||||
|
||||
img.src = imgs[ n ].src;
|
||||
|
||||
if ( img.width >= 256 && img.height >= 128 ) {
|
||||
add( '_images[]', img.src );
|
||||
}
|
||||
add( '_images[]', img.src );
|
||||
}
|
||||
|
||||
ifrs = document.body.getElementsByTagName( 'iframe' ) || [];
|
||||
iframes = document.body.getElementsByTagName( 'iframe' ) || [];
|
||||
|
||||
for ( var p = 0; p < ifrs.length; p++ ) {
|
||||
for ( var p = 0; p < iframes.length; p++ ) {
|
||||
if ( p >= 50 ) {
|
||||
break;
|
||||
}
|
||||
|
||||
add( '_embeds[]', ifrs[ p ].src );
|
||||
add( '_embeds[]', iframes[ p ].src );
|
||||
}
|
||||
|
||||
if ( document.title ) {
|
||||
|
|
|
|||
|
|
@ -1 +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);
|
||||
(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);
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
*/
|
||||
( function( $, window ) {
|
||||
var PressThis = function() {
|
||||
var editor,
|
||||
var editor, $mediaList, $mediaThumbWrap,
|
||||
saveAlert = false,
|
||||
textarea = document.createElement( 'textarea' ),
|
||||
sidebarIsOpen = false,
|
||||
|
|
@ -252,7 +252,7 @@
|
|||
var $node = $( '<li>' ).append( $( '<div class="category selected" tabindex="0" role="checkbox" aria-checked="true">' )
|
||||
.attr( 'data-term-id', newCat.term_id )
|
||||
.text( newCat.name ) );
|
||||
|
||||
|
||||
if ( newCat.parent ) {
|
||||
if ( ! $ul || ! $ul.length ) {
|
||||
$parent = $wrap.find( 'div[data-term-id="' + newCat.parent + '"]' ).parent();
|
||||
|
|
@ -328,26 +328,38 @@
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Add an image to the list of found images.
|
||||
*/
|
||||
function addImg( src, displaySrc, i ) {
|
||||
var $element = $mediaThumbWrap.clone().addClass( 'is-image' );
|
||||
|
||||
$element.css( 'background-image', 'url(' + displaySrc + ')' )
|
||||
.find( 'span' ).text( __( 'suggestedImgAlt' ).replace( '%d', i + 1 ) );
|
||||
|
||||
$element.on( 'click keypress', function ( event ) {
|
||||
if ( event.type === 'click' || event.keyCode === 13 ) {
|
||||
insertSelectedMedia( 'img', src, data.u );
|
||||
}
|
||||
} ).appendTo( $mediaList );
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the detected images and embed for selection, if any
|
||||
*/
|
||||
function renderDetectedMedia() {
|
||||
var mediaContainer = $( '#featured-media-container'),
|
||||
listContainer = $( '#all-media-container' ),
|
||||
found = 0;
|
||||
var found = 0;
|
||||
|
||||
listContainer.empty();
|
||||
|
||||
if ( data._embeds || data._images ) {
|
||||
listContainer.append( '<h2 class="screen-reader-text">' + __( 'allMediaHeading' ) + '</h2><ul class="wppt-all-media-list" />' );
|
||||
}
|
||||
$mediaList = $( 'ul.media-list' );
|
||||
$mediaThumbWrap = $( '<li class="suggested-media-thumbnail" tabindex="0"><span class="screen-reader-text"></span></li>' );
|
||||
|
||||
if ( data._embeds ) {
|
||||
$.each( data._embeds, function ( i, src ) {
|
||||
src = checkUrl( src );
|
||||
|
||||
var displaySrc = '',
|
||||
cssClass = 'suggested-media-thumbnail suggested-media-embed';
|
||||
cssClass = '',
|
||||
$element = $mediaThumbWrap.clone().addClass( 'is-embed' );
|
||||
|
||||
src = checkUrl( src );
|
||||
|
||||
if ( src.indexOf( 'youtube.com/' ) > -1 ) {
|
||||
displaySrc = 'https://i.ytimg.com/vi/' + src.replace( /.+v=([^&]+).*/, '$1' ) + '/hqdefault.jpg';
|
||||
|
|
@ -366,19 +378,17 @@
|
|||
cssClass += ' is-video';
|
||||
}
|
||||
|
||||
$( '<li></li>', {
|
||||
'id': 'embed-' + i + '-container',
|
||||
'class': cssClass,
|
||||
'tabindex': '0'
|
||||
} ).css( {
|
||||
'background-image': ( displaySrc ) ? 'url(' + displaySrc + ')' : null
|
||||
} ).html(
|
||||
'<span class="screen-reader-text">' + __( 'suggestedEmbedAlt' ).replace( '%d', i + 1 ) + '</span>'
|
||||
).on( 'click keypress', function ( e ) {
|
||||
if ( e.type === 'click' || e.which === 13 ) {
|
||||
insertSelectedMedia( 'embed',src );
|
||||
$element.find( 'span' ).text( __( 'suggestedEmbedAlt' ).replace( '%d', i + 1 ) );
|
||||
|
||||
if ( displaySrc ) {
|
||||
$element.css( 'background-image', 'url(' + displaySrc + ')' );
|
||||
}
|
||||
|
||||
$element.on( 'click keypress', function ( event ) {
|
||||
if ( event.type === 'click' || event.keyCode === 13 ) {
|
||||
insertSelectedMedia( 'embed', src );
|
||||
}
|
||||
} ).appendTo( '.wppt-all-media-list', listContainer );
|
||||
} ).appendTo( $mediaList );
|
||||
|
||||
found++;
|
||||
} );
|
||||
|
|
@ -386,41 +396,37 @@
|
|||
|
||||
if ( data._images ) {
|
||||
$.each( data._images, function( i, src ) {
|
||||
src = checkUrl( src );
|
||||
var displaySrc, img = new Image();
|
||||
|
||||
src = checkUrl( src );
|
||||
displaySrc = src.replace( /^(http[^\?]+)(\?.*)?$/, '$1' );
|
||||
|
||||
var displaySrc = src.replace(/^(http[^\?]+)(\?.*)?$/, '$1');
|
||||
if ( src.indexOf( 'files.wordpress.com/' ) > -1 ) {
|
||||
displaySrc = displaySrc.replace(/\?.*$/, '') + '?w=' + smallestWidth;
|
||||
displaySrc = displaySrc.replace( /\?.*$/, '' ) + '?w=' + smallestWidth;
|
||||
} else if ( src.indexOf( 'gravatar.com/' ) > -1 ) {
|
||||
displaySrc = displaySrc.replace( /\?.*$/, '' ) + '?s=' + smallestWidth;
|
||||
} else {
|
||||
displaySrc = src;
|
||||
}
|
||||
|
||||
$( '<li></li>', {
|
||||
'id': 'img-' + i + '-container',
|
||||
'class': 'suggested-media-thumbnail is-image',
|
||||
'tabindex': '0'
|
||||
} ).css( {
|
||||
'background-image': 'url(' + displaySrc + ')'
|
||||
} ).html(
|
||||
'<span class="screen-reader-text">' +__( 'suggestedImgAlt' ).replace( '%d', i + 1 ) + '</span>'
|
||||
).on( 'click keypress', function ( e ) {
|
||||
if ( e.type === 'click' || e.which === 13 ) {
|
||||
insertSelectedMedia( 'img', src, data.u );
|
||||
}
|
||||
} ).appendTo( '.wppt-all-media-list', listContainer );
|
||||
img.onload = function() {
|
||||
if ( ( img.width && img.width < 256 ) ||
|
||||
( img.height && img.height < 128 ) ) {
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
addImg( src, displaySrc, i );
|
||||
};
|
||||
|
||||
img.src = src;
|
||||
found++;
|
||||
} );
|
||||
}
|
||||
|
||||
if ( ! found ) {
|
||||
mediaContainer.removeClass( 'all-media-visible' ).addClass( 'no-media');
|
||||
return;
|
||||
if ( found ) {
|
||||
$( '.media-list-container' ).addClass( 'has-media' );
|
||||
}
|
||||
|
||||
mediaContainer.removeClass( 'no-media' ).addClass( 'all-media-visible' );
|
||||
}
|
||||
|
||||
/* ***************************************************************
|
||||
|
|
|
|||
|
|
@ -502,7 +502,6 @@ function wp_default_scripts( &$scripts ) {
|
|||
'newPost' => __( 'Title' ),
|
||||
'unexpectedError' => __( 'Sorry, but an unexpected error occurred.' ),
|
||||
'saveAlert' => __( 'The changes you made will be lost if you navigate away from this page.' ),
|
||||
'allMediaHeading' => __( 'Suggested media' ),
|
||||
'suggestedEmbedAlt' => __( 'Suggested embed #%d' ),
|
||||
'suggestedImgAlt' => __( 'Suggested image #%d' ),
|
||||
) );
|
||||
|
|
|
|||
Loading…
Reference in New Issue