Changeset 32937

Timestamp:

06/25/2015 04:41:34 AM (10 years ago)

Author:

azaozz

Message:

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.

Location:

trunk/src/wp-includes

Files:

• css/editor.css (modified) (3 diffs)
• js/tinymce/plugins/wplink/plugin.js (modified) (2 diffs)

trunk/src/wp-includes/css/editor.css

@@ -175 +175 @@
     -ms-user-select: none;
     user-select: none;
+    max-width: 98%;
     z-index: 100100; /* Same as the other TinyMCE "panels" */
 }
@@ -1603 +1604 @@
     float: left;
     margin: 5px;
+    max-width: 694px;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
@@ -1617 +1621 @@
 }
 
+@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
 -------------------------------------------------------------- */

trunk/src/wp-includes/js/tinymce/plugins/wplink/plugin.js

@@ -81 +81 @@
                 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 );
                 }
 
@@ -97 +103 @@
             editor.on( 'wptoolbar', function( event ) {
                 var anchor = editor.dom.getParent( event.element, 'a' ),
+                    $ = editor.$,
                     href;
 
-                if ( anchor && ( href = editor.$( anchor ).attr( 'href' ) ) ) {
+                if ( anchor && ! $( anchor ).find( 'img' ).length &&
+                    ( href = $( anchor ).attr( 'href' ) ) ) {
+
                     self.setURL( href );
-
                     event.element = anchor;
                     event.toolbar = toolbar;