TinyMCE, inline link toolbar:

- Add max-width for all floating toolbars.
- Ensure the inline link toolbar doesn't exceed the width on small screen devices.
- Do not cut/concatenate the URL when it is less than 40 characters long.
- Show more of the URL if the beginning part plus the ending part are less than 40 characters long.
See #32604.

git-svn-id: https://develop.svn.wordpress.org/trunk@32937 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrew Ozz 2015-06-25 04:41:34 +00:00
parent 6d6a1980b2
commit 017d27a2c1
2 changed files with 26 additions and 6 deletions

View File

@ -174,6 +174,7 @@ div.mce-inline-toolbar-grp {
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
max-width: 98%;
z-index: 100100; /* Same as the other TinyMCE "panels" */
}
@ -1602,6 +1603,9 @@ i.mce-i-wp_code:before {
.wp-link-preview {
float: left;
margin: 5px;
max-width: 694px;
overflow: hidden;
text-overflow: ellipsis;
}
.wp-link-preview a {
@ -1616,6 +1620,14 @@ i.mce-i-wp_code:before {
cursor: pointer;
}
@media screen and ( max-width: 782px ) {
.wp-link-preview {
max-width: 70%;
max-width: -webkit-calc(100% - 88px);
max-width: calc(100% - 88px);
}
}
/* =Overlay Body
-------------------------------------------------------------- */

View File

@ -80,12 +80,18 @@ tinymce.PluginManager.add( 'wplink', function( editor ) {
url = url.replace( /(?:index)?\.html$/, '' );
if ( ( lastIndex = url.lastIndexOf( '/' ) ) === url.length - 1 ) {
url = url.slice( 0, lastIndex );
if ( url.charAt( url.length - 1 ) === '/' ) {
url = url.slice( 0, -1 );
}
if ( ( index = url.indexOf( '/' ) ) !== -1 && ( lastIndex = url.lastIndexOf( '/' ) ) !== -1 && lastIndex !== index ) {
url = url.slice( 0, index + 1 ) + '\u2026' + url.slice( lastIndex, url.length );
// If the URL is longer that 40 chars, concatenate the beginning (after the domain) and ending with ...
if ( url.length > 40 && ( index = url.indexOf( '/' ) ) !== -1 && ( lastIndex = url.lastIndexOf( '/' ) ) !== -1 && lastIndex !== index ) {
// If the beginning + ending are shorter that 40 chars, show more of the ending
if ( index + url.length - lastIndex < 40 ) {
lastIndex = -( 40 - ( index + 1 ) );
}
url = url.slice( 0, index + 1 ) + '\u2026' + url.slice( lastIndex );
}
tinymce.$( this.getEl().firstChild ).attr( 'href', this.url ).text( url );
@ -96,11 +102,13 @@ tinymce.PluginManager.add( 'wplink', function( editor ) {
editor.on( 'wptoolbar', function( event ) {
var anchor = editor.dom.getParent( event.element, 'a' ),
$ = editor.$,
href;
if ( anchor && ( href = editor.$( anchor ).attr( 'href' ) ) ) {
self.setURL( href );
if ( anchor && ! $( anchor ).find( 'img' ).length &&
( href = $( anchor ).attr( 'href' ) ) ) {
self.setURL( href );
event.element = anchor;
event.toolbar = toolbar;
}