TinyMCE, inline link dialog:

- Remove the bottom half of the (old) modal and add autocomplete on the URL field.
- Disable the inline edit dialog in old IE (7, 8 and 9). Use only the modal there.
- Fix in IE10 and 11.
- Fix (most?) remaining edge cases.
- Fix focusing the inline dialog, the modal and the editor.

See #33301.
Built from https://develop.svn.wordpress.org/trunk@36677


git-svn-id: http://core.svn.wordpress.org/trunk@36644 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Ozz 2016-02-24 06:20:26 +00:00
parent 061cbfadba
commit 771cfe22ba
11 changed files with 269 additions and 791 deletions

View File

@ -1414,41 +1414,17 @@ final class _WP_Editors {
<div id="link-options">
<p class="howto"><?php _e( 'Enter the destination URL' ); ?></p>
<div>
<label><span><?php _e( 'URL' ); ?></span><input id="wp-link-url" type="text" /></label>
<label><span><?php _e( 'URL' ); ?></span>
<input id="wp-link-url" type="text" role="combobox" aria-autocomplete="list" aria-expanded="false" placeholder="<?php _e( 'Paste URL or type to search' ); ?>" /></label>
</div>
<div class="wp-link-text-field">
<label><span><?php _e( 'Link Text' ); ?></span><input id="wp-link-text" type="text" /></label>
<label><span><?php _e( 'Link Text' ); ?></span>
<input id="wp-link-text" type="text" /></label>
</div>
<div class="link-target">
<label><span>&nbsp;</span><input type="checkbox" id="wp-link-target" /> <?php _e( 'Open link in a new tab' ); ?></label>
</div>
</div>
<p class="howto"><a href="#" id="wp-link-search-toggle"><?php _e( 'Or link to existing content' ); ?></a></p>
<div id="search-panel">
<div class="link-search-wrapper">
<label>
<span class="search-label"><?php _e( 'Search' ); ?></span>
<input type="search" id="wp-link-search" class="link-search-field" autocomplete="off" />
<span class="spinner"></span>
</label>
</div>
<div id="search-results" class="query-results" tabindex="0">
<ul></ul>
<div class="river-waiting">
<span class="spinner"></span>
</div>
</div>
<div id="most-recent-results" class="query-results" tabindex="0">
<div class="query-notice" id="query-notice-message">
<em class="query-notice-default"><?php _e( 'No search term specified. Showing recent items.' ); ?></em>
<em class="query-notice-hint screen-reader-text"><?php _e( 'Search or use up and down arrow keys to select an item.' ); ?></em>
</div>
<ul></ul>
<div class="river-waiting">
<span class="spinner"></span>
</div>
</div>
</div>
</div>
<div class="submitbox">
<div id="wp-link-cancel">

View File

@ -84,8 +84,7 @@
}
.mce-textbox,
.mce-checkbox i.mce-i-checkbox,
#wp-link .query-results {
.mce-checkbox i.mce-i-checkbox {
border: 1px solid #ddd;
-webkit-border-radius: 0;
border-radius: 0;
@ -1334,11 +1333,6 @@ i.mce-i-wp_code:before {
height: 100%;
}
#wp-link-wrap.search-panel-visible {
height: 500px;
margin-top: -250px;
}
#wp-link-wrap .wp-link-text-field {
display: none;
}
@ -1406,12 +1400,6 @@ i.mce-i-wp_code:before {
#wp-link-wrap.search-panel-visible #link-selector {
-webkit-overflow-scrolling: touch;
padding: 0 16px;
position: absolute;
top: 36px;
right: 0;
left: 0;
bottom: 44px;
}
#wp-link ol,
@ -1421,20 +1409,6 @@ i.mce-i-wp_code:before {
padding: 0;
}
#wp-link-search-toggle:after {
display: inline-block;
font: normal 20px/1 dashicons;
vertical-align: top;
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\f140";
}
.search-panel-visible #wp-link-search-toggle:after {
content: "\f142";
}
#wp-link input[type="text"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
@ -1454,17 +1428,12 @@ i.mce-i-wp_code:before {
color: inherit;
}
#wp-link-search-toggle {
cursor: pointer;
}
#wp-link label input[type="text"] {
margin-top: 5px;
margin: 5px 0 0;
width: 70%;
}
#wp-link #link-options label span,
#wp-link #search-panel label span.search-label {
#wp-link #link-options label span {
display: inline-block;
width: 80px;
text-align: left;
@ -1474,27 +1443,6 @@ i.mce-i-wp_code:before {
word-wrap: break-word;
}
#wp-link .link-search-field {
float: right;
width: 250px;
max-width: 70%;
}
#wp-link .link-search-wrapper {
margin: 5px 0 9px;
display: block;
overflow: hidden;
}
#wp-link .link-search-wrapper span {
float: right;
margin-top: 4px;
}
#wp-link .link-search-wrapper .spinner {
margin-top: 5px;
}
#wp-link .link-target {
padding: 3px 0 0;
white-space: nowrap;
@ -1506,22 +1454,6 @@ i.mce-i-wp_code:before {
max-width: 70%;
}
#wp-link .query-results {
border: 1px #dfdfdf solid;
margin: 0;
background: #fff;
overflow: auto;
position: absolute;
right: 16px;
left: 16px;
bottom: 16px;
top: 172px;
}
.has-text-field #wp-link .query-results {
top: 205px;
}
#wp-link li {
clear: both;
margin-bottom: 0;
@ -1532,36 +1464,6 @@ i.mce-i-wp_code:before {
position: relative;
}
#wp-link .query-notice {
padding: 0;
border-bottom: 1px solid #dfdfdf;
background-color: #f7fcfe;
color: #000;
}
#wp-link .query-notice .query-notice-default,
#wp-link .query-notice .query-notice-hint {
display: block;
padding: 6px;
border-right: 4px solid #00a0d2;
}
#wp-link .unselectable.no-matches-found {
padding: 0;
border-bottom: 1px solid #dfdfdf;
background-color: #fef7f1;
}
#wp-link .no-matches-found .item-title {
display: block;
padding: 6px;
border-right: 4px solid #d54e21;
}
#wp-link .query-results em {
font-style: normal;
}
#wp-link li:hover {
background: #eaf2fa;
color: #151515;
@ -1607,20 +1509,6 @@ i.mce-i-wp_code:before {
top: 5px;
}
#wp-link #search-results,
#wp-link #search-panel {
display: none;
}
#wp-link-wrap.search-panel-visible #search-panel {
display: block;
}
#wp-link .river-waiting {
display: none;
padding: 10px 0;
}
#wp-link .submitbox {
padding: 8px 16px;
background: #fcfcfc;
@ -1651,14 +1539,6 @@ i.mce-i-wp_code:before {
margin-top: -140px;
}
#wp-link-wrap.search-panel-visible .query-results {
top: 195px;
}
#wp-link-wrap.search-panel-visible.has-text-field .query-results {
top: 235px;
}
#link-selector {
padding: 0 16px 60px;
}
@ -1687,21 +1567,6 @@ i.mce-i-wp_code:before {
-webkit-transition: none;
transition: none;
}
#wp-link-wrap.search-panel-visible {
height: auto;
margin-top: 0;
top: 10px;
bottom: 10px;
}
.search-panel-visible #link-selector {
overflow: auto;
}
.search-panel-visible #search-panel .query-results {
position: static;
}
}
@media screen and ( max-height: 290px ) {
@ -1718,10 +1583,6 @@ i.mce-i-wp_code:before {
height: calc(100% - 92px);
padding-bottom: 2px;
}
#search-panel .query-results {
position: static;
}
}
div.wp-link-preview {
@ -1744,15 +1605,6 @@ div.wp-link-preview a {
cursor: pointer;
}
@media screen and ( max-width: 782px ) {
div.wp-link-preview {
margin: 8px 5px 8px 0;
max-width: 70%;
max-width: -webkit-calc(100% - 86px);
max-width: calc(100% - 86px);
}
}
div.wp-link-input {
float: right;
margin: 2px;
@ -1767,12 +1619,31 @@ div.wp-link-input input {
box-sizing: border-box;
}
@media screen and ( max-width: 400px ) {
.ui-autocomplete.wplink-autocomplete {
z-index: 100110;
max-height: 200px;
overflow-y: auto;
}
.wplink-autocomplete li {
clear: both;
white-space: normal;
}
@media screen and ( max-width: 782px ) {
div.wp-link-preview,
div.wp-link-input {
min-width: 0;
max-width: 70%;
max-width: -webkit-calc(100% - 80px);
max-width: calc(100% - 80px);
max-width: -webkit-calc(100% - 86px);
max-width: calc(100% - 86px);
}
div.wp-link-preview {
margin: 8px 5px 8px 0;
}
div.wp-link-input {
width: 300px;
}
div.wp-link-input input {
@ -1782,13 +1653,6 @@ div.wp-link-input input {
}
}
.ui-autocomplete.mce-wp-autocomplete {
z-index: 100100;
margin-top: 10px;
max-height: 200px;
overflow-y: auto;
}
/* =Overlay Body
-------------------------------------------------------------- */

File diff suppressed because one or more lines are too long

View File

@ -84,8 +84,7 @@
}
.mce-textbox,
.mce-checkbox i.mce-i-checkbox,
#wp-link .query-results {
.mce-checkbox i.mce-i-checkbox {
border: 1px solid #ddd;
-webkit-border-radius: 0;
border-radius: 0;
@ -1334,11 +1333,6 @@ i.mce-i-wp_code:before {
height: 100%;
}
#wp-link-wrap.search-panel-visible {
height: 500px;
margin-top: -250px;
}
#wp-link-wrap .wp-link-text-field {
display: none;
}
@ -1406,12 +1400,6 @@ i.mce-i-wp_code:before {
#wp-link-wrap.search-panel-visible #link-selector {
-webkit-overflow-scrolling: touch;
padding: 0 16px;
position: absolute;
top: 36px;
left: 0;
right: 0;
bottom: 44px;
}
#wp-link ol,
@ -1421,20 +1409,6 @@ i.mce-i-wp_code:before {
padding: 0;
}
#wp-link-search-toggle:after {
display: inline-block;
font: normal 20px/1 dashicons;
vertical-align: top;
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\f140";
}
.search-panel-visible #wp-link-search-toggle:after {
content: "\f142";
}
#wp-link input[type="text"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
@ -1454,17 +1428,12 @@ i.mce-i-wp_code:before {
color: inherit;
}
#wp-link-search-toggle {
cursor: pointer;
}
#wp-link label input[type="text"] {
margin-top: 5px;
margin: 5px 0 0;
width: 70%;
}
#wp-link #link-options label span,
#wp-link #search-panel label span.search-label {
#wp-link #link-options label span {
display: inline-block;
width: 80px;
text-align: right;
@ -1474,27 +1443,6 @@ i.mce-i-wp_code:before {
word-wrap: break-word;
}
#wp-link .link-search-field {
float: left;
width: 250px;
max-width: 70%;
}
#wp-link .link-search-wrapper {
margin: 5px 0 9px;
display: block;
overflow: hidden;
}
#wp-link .link-search-wrapper span {
float: left;
margin-top: 4px;
}
#wp-link .link-search-wrapper .spinner {
margin-top: 5px;
}
#wp-link .link-target {
padding: 3px 0 0;
white-space: nowrap;
@ -1506,22 +1454,6 @@ i.mce-i-wp_code:before {
max-width: 70%;
}
#wp-link .query-results {
border: 1px #dfdfdf solid;
margin: 0;
background: #fff;
overflow: auto;
position: absolute;
left: 16px;
right: 16px;
bottom: 16px;
top: 172px;
}
.has-text-field #wp-link .query-results {
top: 205px;
}
#wp-link li {
clear: both;
margin-bottom: 0;
@ -1532,36 +1464,6 @@ i.mce-i-wp_code:before {
position: relative;
}
#wp-link .query-notice {
padding: 0;
border-bottom: 1px solid #dfdfdf;
background-color: #f7fcfe;
color: #000;
}
#wp-link .query-notice .query-notice-default,
#wp-link .query-notice .query-notice-hint {
display: block;
padding: 6px;
border-left: 4px solid #00a0d2;
}
#wp-link .unselectable.no-matches-found {
padding: 0;
border-bottom: 1px solid #dfdfdf;
background-color: #fef7f1;
}
#wp-link .no-matches-found .item-title {
display: block;
padding: 6px;
border-left: 4px solid #d54e21;
}
#wp-link .query-results em {
font-style: normal;
}
#wp-link li:hover {
background: #eaf2fa;
color: #151515;
@ -1607,20 +1509,6 @@ i.mce-i-wp_code:before {
top: 5px;
}
#wp-link #search-results,
#wp-link #search-panel {
display: none;
}
#wp-link-wrap.search-panel-visible #search-panel {
display: block;
}
#wp-link .river-waiting {
display: none;
padding: 10px 0;
}
#wp-link .submitbox {
padding: 8px 16px;
background: #fcfcfc;
@ -1651,14 +1539,6 @@ i.mce-i-wp_code:before {
margin-top: -140px;
}
#wp-link-wrap.search-panel-visible .query-results {
top: 195px;
}
#wp-link-wrap.search-panel-visible.has-text-field .query-results {
top: 235px;
}
#link-selector {
padding: 0 16px 60px;
}
@ -1687,21 +1567,6 @@ i.mce-i-wp_code:before {
-webkit-transition: none;
transition: none;
}
#wp-link-wrap.search-panel-visible {
height: auto;
margin-top: 0;
top: 10px;
bottom: 10px;
}
.search-panel-visible #link-selector {
overflow: auto;
}
.search-panel-visible #search-panel .query-results {
position: static;
}
}
@media screen and ( max-height: 290px ) {
@ -1718,10 +1583,6 @@ i.mce-i-wp_code:before {
height: calc(100% - 92px);
padding-bottom: 2px;
}
#search-panel .query-results {
position: static;
}
}
div.wp-link-preview {
@ -1744,15 +1605,6 @@ div.wp-link-preview a {
cursor: pointer;
}
@media screen and ( max-width: 782px ) {
div.wp-link-preview {
margin: 8px 0 8px 5px;
max-width: 70%;
max-width: -webkit-calc(100% - 86px);
max-width: calc(100% - 86px);
}
}
div.wp-link-input {
float: left;
margin: 2px;
@ -1767,12 +1619,31 @@ div.wp-link-input input {
box-sizing: border-box;
}
@media screen and ( max-width: 400px ) {
.ui-autocomplete.wplink-autocomplete {
z-index: 100110;
max-height: 200px;
overflow-y: auto;
}
.wplink-autocomplete li {
clear: both;
white-space: normal;
}
@media screen and ( max-width: 782px ) {
div.wp-link-preview,
div.wp-link-input {
min-width: 0;
max-width: 70%;
max-width: -webkit-calc(100% - 80px);
max-width: calc(100% - 80px);
max-width: -webkit-calc(100% - 86px);
max-width: calc(100% - 86px);
}
div.wp-link-preview {
margin: 8px 0 8px 5px;
}
div.wp-link-input {
width: 300px;
}
div.wp-link-input input {
@ -1782,13 +1653,6 @@ div.wp-link-input input {
}
}
.ui-autocomplete.mce-wp-autocomplete {
z-index: 100100;
margin-top: 10px;
max-height: 200px;
overflow-y: auto;
}
/* =Overlay Body
-------------------------------------------------------------- */

File diff suppressed because one or more lines are too long

View File

@ -57,16 +57,27 @@
return (
'<div id="' + this._id + '" class="wp-link-input">' +
'<input type="text" value="" tabindex="-1" placeholder="' + tinymce.translate('Paste URL or type to search') + '" />' +
'<input type="hidden" value="" />' +
'</div>'
);
},
setURL: function( url ) {
this.getEl().firstChild.value = url;
},
getURL: function() {
return tinymce.trim( this.getEl().firstChild.value );
},
getLinkText: function() {
return tinymce.trim( this.getEl().firstChild.nextSibling.value );
},
reset: function() {
var urlInput = this.getEl().firstChild;
urlInput.value = '';
urlInput.nextSibling.value = '';
}
} );
tinymce.PluginManager.add( 'wplink', function( editor ) {
var a;
var toolbar;
var editToolbar;
var previewInstance;
@ -104,15 +115,15 @@
if ( $element.attr( 'href' ) === '_wp_link_placeholder' ) {
editor.dom.remove( element, true );
} else if ( $element.attr( 'data-wp-link-edit' ) ) {
$element.attr( 'data-wp-link-edit', null );
} else if ( $element.attr( 'data-wplink-edit' ) ) {
$element.attr( 'data-wplink-edit', null );
}
});
}
function removePlaceholderStrings( content, dataAttr ) {
if ( dataAttr ) {
content = content.replace( / data-wp-link-edit="true"/g, '' );
content = content.replace( / data-wplink-edit="true"/g, '' );
}
return content.replace( /<a [^>]*?href="_wp_link_placeholder"[^>]*>([\s\S]+)<\/a>/g, '$1' );
@ -135,12 +146,17 @@
editToolbar.on( 'show', function() {
var inputNode = editToolbar.find( 'toolbar' )[0];
inputNode && inputNode.focus( true );
a = getSelectedLink();
if ( inputNode && ! tinymce.$( document.body ).hasClass( 'modal-open' ) ) {
window.setTimeout( function() {
inputNode.focus( true );
});
}
} );
editToolbar.on( 'hide', function() {
editToolbar.scrolling || editor.execCommand( 'wp_link_cancel' );
if ( ! editToolbar.scrolling ) {
editor.execCommand( 'wp_link_cancel' );
}
} );
}
} );
@ -148,14 +164,23 @@
editor.addCommand( 'WP_Link', function() {
var link = getSelectedLink();
if ( tinymce.Env.ie && tinymce.Env.ie < 10 ) {
if ( typeof window.wpLink !== 'undefined' ) {
window.wpLink.open( editor.id );
}
return;
}
if ( link ) {
editor.dom.setAttribs( link, { 'data-wp-link-edit': true } );
editor.dom.setAttribs( link, { 'data-wplink-edit': true } );
} else {
removePlaceholders();
editor.execCommand( 'mceInsertLink', false, { href: '_wp_link_placeholder' } );
editor.selection.select( editor.$( 'a[href="_wp_link_placeholder"]' )[0] );
editor.nodeChanged();
if ( tinymce.Env.ie ) {
editor.windowManager.wplinkBookmark = editor.selection.getBookmark();
}
}
} );
@ -164,32 +189,48 @@
return;
}
var href = tinymce.trim( inputInstance.getEl().firstChild.value );
var href, text,
linkNode = getSelectedLink();
if ( href && ! /^(?:[a-z]+:|#|\?|\.|\/)/.test( href ) ) {
href = 'http://' + href;
if ( linkNode ) {
href = inputInstance.getURL();
text = inputInstance.getLinkText();
editor.focus();
if ( tinymce.isIE ) {
editor.selection.moveToBookmark( editor.windowManager.wplinkBookmark );
editor.windowManager.wplinkBookmark = null;
}
if ( ! href ) {
editor.dom.remove( linkNode, true );
return;
}
if ( ! /^(?:[a-z]+:|#|\?|\.|\/)/.test( href ) ) {
href = 'http://' + href;
}
editor.dom.setAttribs( linkNode, { href: href, 'data-wplink-edit': null } );
if ( ! tinymce.trim( linkNode.innerHTML ) ) {
editor.$( linkNode ).text( text || href );
}
}
if ( ! href ) {
editor.dom.remove( a, true );
return;
}
if ( a ) {
editor.dom.setAttribs( a, { href: href, 'data-wp-link-edit': null } );
}
a = false;
inputInstance.reset();
editor.nodeChanged();
editor.focus();
} );
editor.addCommand( 'wp_link_cancel', function() {
inputInstance.reset();
removePlaceholders();
a = false;
editor.nodeChanged();
editor.focus();
if ( tinymce.isIE ) {
editor.selection.moveToBookmark( editor.windowManager.wplinkBookmark );
editor.windowManager.wplinkBookmark = null;
}
} );
// WP default shortcut
@ -259,16 +300,17 @@
editor.addButton( 'wp_link_input', {
type: 'WPLinkInput',
onPostRender: function() {
var input = this.getEl().firstChild;
var cache;
var last;
var element = this.getEl(),
input = element.firstChild,
$input, cache, last;
inputInstance = this;
if ( $ && $.ui && $.ui.autocomplete ) {
$( input )
.on( 'keydown', function() {
$( input ).removeAttr( 'aria-activedescendant' );
$input = $( input );
$input.on( 'keydown', function() {
$input.removeAttr( 'aria-activedescendant' );
} )
.autocomplete( {
source: function( request, response ) {
@ -294,23 +336,24 @@
last = request.term;
},
focus: function( event, ui ) {
$( input ).attr( 'aria-activedescendant', 'mce-wp-autocomplete-' + ui.item.ID );
$input.attr( 'aria-activedescendant', 'mce-wp-autocomplete-' + ui.item.ID );
},
select: function( event, ui ) {
$( input ).val( ui.item.permalink );
$input.val( ui.item.permalink );
$( element.firstChild.nextSibling ).val( ui.item.title );
return false;
},
open: function() {
$( input ).attr( 'aria-expanded', 'true' );
$input.attr( 'aria-expanded', 'true' );
editToolbar.blockHide = true;
},
close: function() {
$( input ).attr( 'aria-expanded', 'false' );
$input.attr( 'aria-expanded', 'false' );
editToolbar.blockHide = false;
},
minLength: 2,
position: {
my: 'left top+5'
my: 'left top+2'
}
} ).autocomplete( 'instance' )._renderItem = function( ul, item ) {
return $( '<li role="option" id="mce-wp-autocomplete-' + item.ID + '">' )
@ -318,43 +361,51 @@
.appendTo( ul );
};
$( input )
.attr( {
$input.attr( {
'role': 'combobox',
'aria-autocomplete': 'list',
'aria-expanded': 'false',
'aria-owns': $( input ).autocomplete( 'widget' ).attr( 'id' )
'aria-owns': $input.autocomplete( 'widget' ).attr( 'id' )
} )
.on( 'focus', function() {
$( input ).autocomplete( 'search' );
$input.autocomplete( 'search' );
} )
.autocomplete( 'widget' )
.addClass( 'mce-wp-autocomplete' )
.addClass( 'wplink-autocomplete' )
.attr( 'role', 'listbox' );
}
tinymce.$( input ).on( 'keydown', function( event ) {
event.keyCode === 13 && editor.execCommand( 'wp_link_apply' );
if ( event.keyCode === 13 ) {
editor.execCommand( 'wp_link_apply' );
}
} );
}
} );
editor.on( 'wptoolbar', function( event ) {
var anchor = editor.dom.getParent( event.element, 'a' ),
$anchor, href, edit;
var linkNode = editor.dom.getParent( event.element, 'a' ),
$linkNode, href, edit;
if ( anchor ) {
$anchor = editor.$( anchor );
href = $anchor.attr( 'href' );
edit = $anchor.attr( 'data-wp-link-edit' );
if ( tinymce.$( document.body ).hasClass( 'modal-open' ) ) {
return;
}
if ( linkNode ) {
$linkNode = editor.$( linkNode );
href = $linkNode.attr( 'href' );
edit = $linkNode.attr( 'data-wplink-edit' );
if ( href === '_wp_link_placeholder' || edit ) {
inputInstance.setURL( edit ? href : '' );
event.element = anchor;
if ( edit && ! inputInstance.getURL() ) {
inputInstance.setURL( href );
}
event.element = linkNode;
event.toolbar = editToolbar;
} else if ( href && ! $anchor.find( 'img' ).length ) {
} else if ( href && ! $linkNode.find( 'img' ).length ) {
previewInstance.setURL( href );
event.element = anchor;
event.element = linkNode;
event.toolbar = toolbar;
}
}
@ -378,11 +429,12 @@
icon: 'dashicon dashicons-admin-generic',
onclick: function() {
if ( typeof window.wpLink !== 'undefined' ) {
if ( inputInstance.getEl().firstChild.value ) {
editor.execCommand( 'wp_link_apply' );
}
var url = inputInstance.getURL() || null,
text = inputInstance.getLinkText() || null;
window.wpLink.open( editor.id );
editor.focus();
window.wpLink.open( editor.id, url, text );
inputInstance.reset();
}
}
} );

File diff suppressed because one or more lines are too long

View File

@ -1,10 +1,9 @@
/* global ajaxurl, tinymce, wpLinkL10n, setUserSetting, wpActiveEditor */
/* global tinymce, wpLinkL10n, wpActiveEditor */
var wpLink;
( function( $ ) {
var editor, searchTimer, River, Query, correctedURL,
var editor, correctedURL,
inputs = {},
rivers = {},
isTouch = ( 'ontouchend' in document );
function getLink() {
@ -12,11 +11,6 @@ var wpLink;
}
wpLink = {
timeToTriggerRiver: 150,
minRiverAJAXDuration: 200,
riverBottomThreshold: 5,
keySensitivity: 100,
lastSearch: '',
textarea: '',
init: function() {
@ -29,59 +23,95 @@ var wpLink;
// Input
inputs.text = $( '#wp-link-text' );
inputs.url = $( '#wp-link-url' );
inputs.nonce = $( '#_ajax_linking_nonce' );
inputs.openInNewTab = $( '#wp-link-target' );
inputs.search = $( '#wp-link-search' );
// Build Rivers
rivers.search = new River( $( '#search-results' ) );
rivers.recent = new River( $( '#most-recent-results' ) );
rivers.elements = inputs.dialog.find( '.query-results' );
if ( $.ui && $.ui.autocomplete ) {
wpLink.setAutocomplete();
}
// Get search notice text
inputs.queryNotice = $( '#query-notice-message' );
inputs.queryNoticeTextDefault = inputs.queryNotice.find( '.query-notice-default' );
inputs.queryNoticeTextHint = inputs.queryNotice.find( '.query-notice-hint' );
// Bind event handlers
inputs.dialog.keydown( wpLink.keydown );
inputs.dialog.keyup( wpLink.keyup );
inputs.submit.click( function( event ) {
event.preventDefault();
wpLink.update();
});
inputs.close.add( inputs.backdrop ).add( '#wp-link-cancel a' ).click( function( event ) {
event.preventDefault();
wpLink.close();
});
$( '#wp-link-search-toggle' ).on( 'click', wpLink.toggleInternalLinking );
rivers.elements.on( 'river-select', wpLink.updateFields );
// Display 'hint' message when search field or 'query-results' box are focused
inputs.search.on( 'focus.wplink', function() {
inputs.queryNoticeTextDefault.hide();
inputs.queryNoticeTextHint.removeClass( 'screen-reader-text' ).show();
} ).on( 'blur.wplink', function() {
inputs.queryNoticeTextDefault.show();
inputs.queryNoticeTextHint.addClass( 'screen-reader-text' ).hide();
} );
inputs.search.on( 'keyup input', function() {
var self = this;
window.clearTimeout( searchTimer );
searchTimer = window.setTimeout( function() {
wpLink.searchInternalLinks.call( self );
}, 500 );
});
inputs.url.on( 'paste', function() {
setTimeout( wpLink.correctURL, 0 );
} );
},
setAutocomplete: function() {
var $input = inputs.url,
cache, last;
$input.on( 'keydown', function() {
$input.removeAttr( 'aria-activedescendant' );
} ).autocomplete( {
source: function( request, response ) {
if ( last === request.term ) {
response( cache );
return;
}
if ( /^https?:/.test( request.term ) || request.term.indexOf( '.' ) !== -1 ) {
return response();
}
$.post( window.ajaxurl, {
action: 'wp-link-ajax',
page: 1,
search: request.term,
_ajax_linking_nonce: $( '#_ajax_linking_nonce' ).val()
}, function( data ) {
cache = data;
response( data );
}, 'json' );
last = request.term;
},
focus: function( event, ui ) {
$input.attr( 'aria-activedescendant', 'mce-wp-autocomplete-' + ui.item.ID );
},
select: function( event, ui ) {
$input.val( ui.item.permalink );
if ( inputs.wrap.hasClass( 'has-text-field' ) && tinymce.trim( inputs.text.val() ) === '' ) {
inputs.text.val( ui.item.title );
}
return false;
},
open: function() {
$input.attr( 'aria-expanded', 'true' );
},
close: function() {
$input.attr( 'aria-expanded', 'false' );
},
minLength: 2,
position: {
my: 'left top+2'
}
} ).autocomplete( 'instance' )._renderItem = function( ul, item ) {
return $( '<li role="option" id="mce-wp-autocomplete-' + item.ID + '">' )
.append( '<span class="item-title">' + item.title + '</span>&nbsp;<span class="item-date alignright">' + item.info + '</span>' )
.appendTo( ul );
};
$input.attr( {
'aria-owns': $input.autocomplete( 'widget' ).attr( 'id' )
} )
.on( 'focus', function() {
$input.autocomplete( 'search' );
} )
.autocomplete( 'widget' )
.addClass( 'wplink-autocomplete' )
.attr( 'role', 'listbox' );
inputs.url.on( 'blur', wpLink.correctURL );
},
// If URL wasn't corrected last time and doesn't start with http:, https:, ? # or /, prepend http://
@ -94,7 +124,7 @@ var wpLink;
}
},
open: function( editorId ) {
open: function( editorId, url, text ) {
var ed,
$body = $( document.body );
@ -125,8 +155,8 @@ var wpLink;
editor = null;
}
if ( editor && tinymce.isIE ) {
editor.windowManager.bookmark = editor.selection.getBookmark();
if ( editor && tinymce.isIE && ! editor.windowManager.wplinkBookmark ) {
editor.windowManager.wplinkBookmark = editor.selection.getBookmark();
}
}
@ -138,7 +168,7 @@ var wpLink;
inputs.wrap.show();
inputs.backdrop.show();
wpLink.refresh();
wpLink.refresh( url, text );
$( document ).trigger( 'wplink-open', inputs.wrap );
},
@ -147,15 +177,11 @@ var wpLink;
return editor && ! editor.isHidden();
},
refresh: function() {
var text = '';
// Refresh rivers (clear links, check visibility)
rivers.search.refresh();
rivers.recent.refresh();
refresh: function( url, text ) {
var linkText = '';
if ( wpLink.isMCE() ) {
wpLink.mceRefresh();
wpLink.mceRefresh( url, text );
} else {
// For the Text editor the "Link text" field is always shown
if ( ! inputs.wrap.hasClass( 'has-text-field' ) ) {
@ -164,11 +190,11 @@ var wpLink;
if ( document.selection ) {
// Old IE
text = document.selection.createRange().text || '';
linkText = document.selection.createRange().text || text || '';
} else if ( typeof this.textarea.selectionStart !== 'undefined' &&
( this.textarea.selectionStart !== this.textarea.selectionEnd ) ) {
// W3C
text = this.textarea.value.substring( this.textarea.selectionStart, this.textarea.selectionEnd ) || '';
text = this.textarea.value.substring( this.textarea.selectionStart, this.textarea.selectionEnd ) || text || '';
}
inputs.text.val( text );
@ -185,16 +211,11 @@ var wpLink;
inputs.url.focus()[0].select();
}
// Load the most recent results if this is the first time opening the panel.
if ( ! rivers.recent.ul.children().length ) {
rivers.recent.ajax();
}
correctedURL = inputs.url.val().replace( /^http:\/\//, '' );
},
hasSelectedText: function( linkNode ) {
var html = editor.selection.getContent();
var node, nodes, i, html = editor.selection.getContent();
// Partial html and not a fully selected anchor element
if ( /</.test( html ) && ( ! /^<a [^>]+>[^<]+<\/a>$/.test( html ) || html.indexOf('href=') === -1 ) ) {
@ -202,14 +223,16 @@ var wpLink;
}
if ( linkNode ) {
var nodes = linkNode.childNodes, i;
nodes = linkNode.childNodes;
if ( nodes.length === 0 ) {
return false;
}
for ( i = nodes.length - 1; i >= 0; i-- ) {
if ( nodes[i].nodeType != 3 ) {
node = nodes[i];
if ( node.nodeType != 3 && ! tinymce.dom.BookmarkManager.isBookmarkNode( node ) ) {
return false;
}
}
@ -218,15 +241,14 @@ var wpLink;
return true;
},
mceRefresh: function() {
var text, url,
selectedNode = editor.selection.getNode(),
mceRefresh: function( url, text ) {
var selectedNode = editor.selection.getNode(),
linkNode = editor.dom.getParent( selectedNode, 'a[href]' ),
onlyText = this.hasSelectedText( linkNode );
if ( linkNode ) {
text = linkNode.innerText || linkNode.textContent;
url = editor.dom.getAttrib( linkNode, 'href' );
text = tinymce.trim( linkNode.innerText || linkNode.textContent ) || text;
url = url || editor.dom.getAttrib( linkNode, 'href' );
if ( url === '_wp_link_placeholder' ) {
url = '';
@ -236,7 +258,7 @@ var wpLink;
inputs.openInNewTab.prop( 'checked', '_blank' === editor.dom.getAttrib( linkNode, 'target' ) );
inputs.submit.val( wpLinkL10n.update );
} else {
text = editor.selection.getContent({ format: 'text' });
text = editor.selection.getContent({ format: 'text' }) || text;
this.setDefaultValues();
}
@ -251,7 +273,7 @@ var wpLink;
close: function() {
var linkNode;
$( document.body ).removeClass( 'modal-open' );
if ( ! wpLink.isMCE() ) {
@ -369,7 +391,8 @@ var wpLink;
editor.focus();
if ( tinymce.isIE ) {
editor.selection.moveToBookmark( editor.windowManager.bookmark );
editor.selection.moveToBookmark( editor.windowManager.wplinkBookmark );
editor.windowManager.wplinkBookmark = null;
}
if ( ! attrs.href ) {
@ -405,10 +428,6 @@ var wpLink;
editor.nodeChanged();
},
updateFields: function( e, li ) {
inputs.url.val( li.children( '.item-permalink' ).val() );
},
setDefaultValues: function() {
var selection,
emailRegexp = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
@ -435,305 +454,8 @@ var wpLink;
// Update save prompt.
inputs.submit.val( wpLinkL10n.save );
},
searchInternalLinks: function() {
var t = $( this ), waiting,
search = t.val();
if ( search.length > 2 ) {
rivers.recent.hide();
rivers.search.show();
// Don't search if the keypress didn't change the title.
if ( wpLink.lastSearch == search )
return;
wpLink.lastSearch = search;
waiting = t.parent().find( '.spinner' ).addClass( 'is-active' );
rivers.search.change( search );
rivers.search.ajax( function() {
waiting.removeClass( 'is-active' );
});
} else {
rivers.search.hide();
rivers.recent.show();
}
},
next: function() {
rivers.search.next();
rivers.recent.next();
},
prev: function() {
rivers.search.prev();
rivers.recent.prev();
},
keydown: function( event ) {
var fn, id;
// Escape key.
if ( 27 === event.keyCode ) {
wpLink.close();
event.stopImmediatePropagation();
// Tab key.
} else if ( 9 === event.keyCode ) {
id = event.target.id;
// wp-link-submit must always be the last focusable element in the dialog.
// following focusable elements will be skipped on keyboard navigation.
if ( id === 'wp-link-submit' && ! event.shiftKey ) {
inputs.close.focus();
event.preventDefault();
} else if ( id === 'wp-link-close' && event.shiftKey ) {
inputs.submit.focus();
event.preventDefault();
}
}
// Up Arrow and Down Arrow keys.
if ( 38 !== event.keyCode && 40 !== event.keyCode ) {
return;
}
if ( document.activeElement &&
( document.activeElement.id === 'link-title-field' || document.activeElement.id === 'url-field' ) ) {
return;
}
// Up Arrow key.
fn = 38 === event.keyCode ? 'prev' : 'next';
clearInterval( wpLink.keyInterval );
wpLink[ fn ]();
wpLink.keyInterval = setInterval( wpLink[ fn ], wpLink.keySensitivity );
event.preventDefault();
},
keyup: function( event ) {
// Up Arrow and Down Arrow keys.
if ( 38 === event.keyCode || 40 === event.keyCode ) {
clearInterval( wpLink.keyInterval );
event.preventDefault();
}
},
delayedCallback: function( func, delay ) {
var timeoutTriggered, funcTriggered, funcArgs, funcContext;
if ( ! delay )
return func;
setTimeout( function() {
if ( funcTriggered )
return func.apply( funcContext, funcArgs );
// Otherwise, wait.
timeoutTriggered = true;
}, delay );
return function() {
if ( timeoutTriggered )
return func.apply( this, arguments );
// Otherwise, wait.
funcArgs = arguments;
funcContext = this;
funcTriggered = true;
};
},
toggleInternalLinking: function( event ) {
var visible = inputs.wrap.hasClass( 'search-panel-visible' );
inputs.wrap.toggleClass( 'search-panel-visible', ! visible );
setUserSetting( 'wplink', visible ? '0' : '1' );
inputs[ ! visible ? 'search' : 'url' ].focus();
event.preventDefault();
}
};
River = function( element, search ) {
var self = this;
this.element = element;
this.ul = element.children( 'ul' );
this.contentHeight = element.children( '#link-selector-height' );
this.waiting = element.find('.river-waiting');
this.change( search );
this.refresh();
$( '#wp-link .query-results, #wp-link #link-selector' ).scroll( function() {
self.maybeLoad();
});
element.on( 'click', 'li', function( event ) {
self.select( $( this ), event );
});
};
$.extend( River.prototype, {
refresh: function() {
this.deselect();
this.visible = this.element.is( ':visible' );
},
show: function() {
if ( ! this.visible ) {
this.deselect();
this.element.show();
this.visible = true;
}
},
hide: function() {
this.element.hide();
this.visible = false;
},
// Selects a list item and triggers the river-select event.
select: function( li, event ) {
var liHeight, elHeight, liTop, elTop;
if ( li.hasClass( 'unselectable' ) || li == this.selected )
return;
this.deselect();
this.selected = li.addClass( 'selected' );
// Make sure the element is visible
liHeight = li.outerHeight();
elHeight = this.element.height();
liTop = li.position().top;
elTop = this.element.scrollTop();
if ( liTop < 0 ) // Make first visible element
this.element.scrollTop( elTop + liTop );
else if ( liTop + liHeight > elHeight ) // Make last visible element
this.element.scrollTop( elTop + liTop - elHeight + liHeight );
// Trigger the river-select event
this.element.trigger( 'river-select', [ li, event, this ] );
},
deselect: function() {
if ( this.selected )
this.selected.removeClass( 'selected' );
this.selected = false;
},
prev: function() {
if ( ! this.visible )
return;
var to;
if ( this.selected ) {
to = this.selected.prev( 'li' );
if ( to.length )
this.select( to );
}
},
next: function() {
if ( ! this.visible )
return;
var to = this.selected ? this.selected.next( 'li' ) : $( 'li:not(.unselectable):first', this.element );
if ( to.length )
this.select( to );
},
ajax: function( callback ) {
var self = this,
delay = this.query.page == 1 ? 0 : wpLink.minRiverAJAXDuration,
response = wpLink.delayedCallback( function( results, params ) {
self.process( results, params );
if ( callback )
callback( results, params );
}, delay );
this.query.ajax( response );
},
change: function( search ) {
if ( this.query && this._search == search )
return;
this._search = search;
this.query = new Query( search );
this.element.scrollTop( 0 );
},
process: function( results, params ) {
var list = '', alt = true, classes = '',
firstPage = params.page == 1;
if ( ! results ) {
if ( firstPage ) {
list += '<li class="unselectable no-matches-found"><span class="item-title"><em>' +
wpLinkL10n.noMatchesFound + '</em></span></li>';
}
} else {
$.each( results, function() {
classes = alt ? 'alternate' : '';
classes += this.title ? '' : ' no-title';
list += classes ? '<li class="' + classes + '">' : '<li>';
list += '<input type="hidden" class="item-permalink" value="' + this.permalink + '" />';
list += '<span class="item-title">';
list += this.title ? this.title : wpLinkL10n.noTitle;
list += '</span><span class="item-info">' + this.info + '</span></li>';
alt = ! alt;
});
}
this.ul[ firstPage ? 'html' : 'append' ]( list );
},
maybeLoad: function() {
var self = this,
el = this.element,
bottom = el.scrollTop() + el.height();
if ( ! this.query.ready() || bottom < this.contentHeight.height() - wpLink.riverBottomThreshold )
return;
setTimeout(function() {
var newTop = el.scrollTop(),
newBottom = newTop + el.height();
if ( ! self.query.ready() || newBottom < self.contentHeight.height() - wpLink.riverBottomThreshold )
return;
self.waiting.addClass( 'is-active' );
el.scrollTop( newTop + self.waiting.outerHeight() );
self.ajax( function() {
self.waiting.removeClass( 'is-active' );
});
}, wpLink.timeToTriggerRiver );
}
});
Query = function( search ) {
this.page = 1;
this.allLoaded = false;
this.querying = false;
this.search = search;
};
$.extend( Query.prototype, {
ready: function() {
return ! ( this.querying || this.allLoaded );
},
ajax: function( callback ) {
var self = this,
query = {
action : 'wp-link-ajax',
page : this.page,
'_ajax_linking_nonce' : inputs.nonce.val()
};
if ( this.search )
query.search = this.search;
this.querying = true;
$.post( ajaxurl, query, function( r ) {
self.page++;
self.querying = false;
self.allLoaded = ! r;
callback( r, query );
}, 'json' );
}
});
$( document ).ready( wpLink.init );
})( jQuery );

File diff suppressed because one or more lines are too long

View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.5-alpha-36676';
$wp_version = '4.5-alpha-36677';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.