Make Linking and Internal Linking keyboard-friendly and URL-paste-friendly. props koopersmith. fixes #15544

git-svn-id: http://svn.automattic.com/wordpress/trunk@16561 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
markjaquith 2010-11-24 06:44:46 +00:00
parent b27bd5b253
commit dc77ee14f8
10 changed files with 201 additions and 77 deletions

View File

@ -70,18 +70,18 @@ function wp_link_query( $args = array() ) {
*/
function wp_link_dialog() {
?>
<div id="wp-link">
<form id="wp-link" tabindex="-1">
<div id="link-selector">
<div id="link-options">
<p class="howto"><?php _e( 'Enter the destination URL:' ); ?></p>
<div>
<label><span><?php _e( 'URL' ); ?></span><input id="url-field" type="text" /></label>
<label><span><?php _e( 'URL' ); ?></span><input id="url-field" type="text" tabindex="10" autocomplete="off" /></label>
</div>
<div>
<label><span><?php _e( 'Title' ); ?></span><input id="link-title-field" type="text" /></label>
<label><span><?php _e( 'Title' ); ?></span><input id="link-title-field" type="text" tabindex="20" autocomplete="off" /></label>
</div>
<div class="link-target">
<label><input type="checkbox" id="link-target-checkbox" /> <?php _e( 'Open link in a new window/tab' ); ?></label>
<label><input type="checkbox" id="link-target-checkbox" tabindex="30" /> <?php _e( 'Open link in a new window/tab' ); ?></label>
</div>
</div>
<div id="search-panel">
@ -89,7 +89,7 @@ function wp_link_dialog() {
<p class="howto"><?php _e( 'Or, link to existing site content:' ); ?></p>
<label for="search-field">
<span><?php _e( 'Search' ); ?></span>
<input type="text" id="search-field" class="link-search-field" />
<input type="text" id="search-field" class="link-search-field" tabindex="60" autocomplete="off" />
<img class="waiting" src="<?php echo esc_url( admin_url( 'images/wpspin_light.gif' ) ); ?>" alt="" />
</label>
</div>
@ -113,10 +113,10 @@ function wp_link_dialog() {
<a class="submitdelete deletion" href="#"><?php _e( 'Cancel' ); ?></a>
</div>
<div id="wp-link-update">
<a class="button-primary" href="#"></a>
<?php submit_button( __('Update'), 'primary', 'wp-link-submit', false, array('tabindex' => 100)); ?>
</div>
</div>
</div>
</form>
<?php
}
?>

View File

@ -37,6 +37,21 @@
}
});
$(document).ready(function() {
$.widget("wp.wpdialog", $.ui.dialog, {
open: function() {
// Initialize tinyMCEPopup if it exists.
if ( tinyMCEPopup )
tinyMCEPopup.init();
// Open the dialog.
$.ui.dialog.prototype.open.apply( this, arguments );
// WebKit leaves focus in the TinyMCE editor unless we shift focus.
this.element.focus();
this._trigger('refresh');
}
});
});
tinymce.create('tinymce.WPWindowManager:tinymce.InlineWindowManager', {
WPWindowManager : function(ed) {
this.parent(ed);
@ -60,12 +75,9 @@
t.element = t.windows[ f.id ] = element;
// Store selection
t.bookmark = t.editor.selection.getBookmark();
t.bookmark = t.editor.selection.getBookmark(1);
if ( tinyMCEPopup )
tinyMCEPopup.init();
element.dialog({
element.wpdialog({
title: f.title,
width: f.width,
height: f.height,
@ -75,7 +87,7 @@
});
},
close : wpDialogFn(function() {
this.element.dialog('close');
this.element.wpdialog('close');
})
});

View File

@ -1 +1 @@
(function(b){var a=function(c){return function(){if(this.features.wpDialog){return c.apply(this,arguments)}else{return this.parent.apply(this,arguments)}}};tinymce.create("tinymce.plugins.WPDialogs",{init:function(c,d){c.onBeforeRenderUI.add(function(){c.windowManager=new tinymce.WPWindowManager(c)})},getInfo:function(){return{longname:"WPDialogs",author:"WordPress",authorurl:"http://wordpress.org",infourl:"http://wordpress.org",version:"0.1"}}});tinymce.create("tinymce.WPWindowManager:tinymce.InlineWindowManager",{WPWindowManager:function(c){this.parent(c)},open:function(e,g){var d=this,c;if(!e.wpDialog){return this.parent(e,g)}else{if(!e.id){return}}c=b("#"+e.id);if(!c.length){return}d.features=e;d.params=g;d.onOpen.dispatch(d,e,g);d.element=d.windows[e.id]=c;d.bookmark=d.editor.selection.getBookmark();if(tinyMCEPopup){tinyMCEPopup.init()}c.dialog({title:e.title,width:e.width,height:e.height,modal:true,dialogClass:"wp-dialog",zIndex:300000})},close:a(function(){this.element.dialog("close")})});tinymce.PluginManager.add("wpdialogs",tinymce.plugins.WPDialogs)})(jQuery);
(function(b){var a=function(c){return function(){if(this.features.wpDialog){return c.apply(this,arguments)}else{return this.parent.apply(this,arguments)}}};tinymce.create("tinymce.plugins.WPDialogs",{init:function(c,d){c.onBeforeRenderUI.add(function(){c.windowManager=new tinymce.WPWindowManager(c)})},getInfo:function(){return{longname:"WPDialogs",author:"WordPress",authorurl:"http://wordpress.org",infourl:"http://wordpress.org",version:"0.1"}}});b(document).ready(function(){b.widget("wp.wpdialog",b.ui.dialog,{open:function(){if(tinyMCEPopup){tinyMCEPopup.init()}b.ui.dialog.prototype.open.apply(this,arguments);this.element.focus();this._trigger("refresh")}})});tinymce.create("tinymce.WPWindowManager:tinymce.InlineWindowManager",{WPWindowManager:function(c){this.parent(c)},open:function(e,g){var d=this,c;if(!e.wpDialog){return this.parent(e,g)}else{if(!e.id){return}}c=b("#"+e.id);if(!c.length){return}d.features=e;d.params=g;d.onOpen.dispatch(d,e,g);d.element=d.windows[e.id]=c;d.bookmark=d.editor.selection.getBookmark(1);c.wpdialog({title:e.title,width:e.width,height:e.height,modal:true,dialogClass:"wp-dialog",zIndex:300000})},close:a(function(){this.element.wpdialog("close")})});tinymce.PluginManager.add("wpdialogs",tinymce.plugins.WPDialogs)})(jQuery);

View File

@ -1 +1 @@
#wp-link p.howto{margin:3px;}#link-options{padding:10px 0 14px;border-bottom:1px solid #dfdfdf;margin:0 6px 14px;}#wp-link label input[type="text"]{width:360px;margin-top:5px;}#wp-link label span{display:inline-block;width:80px;text-align:right;padding-right:5px;}#wp-link .link-search-wrapper{margin:5px 5px 9px;display:block;overflow:hidden;}#wp-link .link-search-wrapper span{float:left;margin-top:6px;}#wp-link .link-search-wrapper input[type="text"]{float:left;width:220px;}#wp-link .link-search-wrapper img.waiting{margin:8px 1px 0 4px;float:left;display:none;}#wp-link .link-target{width:auto;padding:3px 0 0;margin:0 0 0 87px;font-size:11px;}#wp-link .query-results{border:1px #dfdfdf solid;margin:0 5px 5px;background:#fff;height:185px;overflow:auto;}#wp-link li,#wp-link .query-notice{margin-bottom:0;border-bottom:1px solid #f1f1f1;color:#333;padding:4px 6px;cursor:pointer;}#wp-link li:hover{background:#eaf2fa;color:#151515;}#wp-link li.unselectable{border-bottom:1px solid #dfdfdf;}#wp-link li.unselectable:hover{background:#fff;cursor:auto;color:#333;}#wp-link li.selected{background:#ddd;color:#333;}#wp-link li.selected .item-title{font-weight:bold;}#wp-link .item-info{text-transform:uppercase;color:#666;font-size:11px;float:right;}#search-results{display:none;}#wp-link .river-waiting{display:none;padding:10px 0;}#wp-link .river-waiting img.waiting{margin:0 auto;display:block;}#wp-link .submitbox{padding:5px 10px;font-size:11px;overflow:auto;height:29px;}#wp-link-cancel{line-height:25px;float:left;}#wp-link-update{line-height:23px;float:right;}#wp-link-update a{display:inline-block;}
#wp-link p.howto{margin:3px;}#link-options{padding:10px 0 14px;border-bottom:1px solid #dfdfdf;margin:0 6px 14px;}#wp-link label input[type="text"]{width:360px;margin-top:5px;}#wp-link label span{display:inline-block;width:80px;text-align:right;padding-right:5px;}#wp-link .link-search-wrapper{margin:5px 5px 9px;display:block;overflow:hidden;}#wp-link .link-search-wrapper span{float:left;margin-top:6px;}#wp-link .link-search-wrapper input[type="text"]{float:left;width:220px;}#wp-link .link-search-wrapper img.waiting{margin:8px 1px 0 4px;float:left;display:none;}#wp-link .link-target{width:auto;padding:3px 0 0;margin:0 0 0 87px;font-size:11px;}#wp-link .query-results{border:1px #dfdfdf solid;margin:0 5px 5px;background:#fff;height:185px;overflow:auto;position:relative;}#wp-link li,#wp-link .query-notice{margin-bottom:0;border-bottom:1px solid #f1f1f1;color:#333;padding:4px 6px;cursor:pointer;}#wp-link li:hover{background:#eaf2fa;color:#151515;}#wp-link li.unselectable{border-bottom:1px solid #dfdfdf;}#wp-link li.unselectable:hover{background:#fff;cursor:auto;color:#333;}#wp-link li.selected{background:#ddd;color:#333;}#wp-link li.selected .item-title{font-weight:bold;}#wp-link .item-info{text-transform:uppercase;color:#666;font-size:11px;float:right;}#search-results{display:none;}#wp-link .river-waiting{display:none;padding:10px 0;}#wp-link .river-waiting img.waiting{margin:0 auto;display:block;}#wp-link .submitbox{padding:5px 10px;font-size:11px;overflow:auto;height:29px;}#wp-link-cancel{line-height:25px;float:left;}#wp-link-update{line-height:23px;float:right;}

View File

@ -46,6 +46,7 @@
background: #fff;
height: 185px;
overflow: auto;
position: relative;
}
#wp-link li,
#wp-link .query-notice {
@ -105,6 +106,3 @@
line-height: 23px;
float: right;
}
#wp-link-update a {
display: inline-block;
}

View File

@ -9,8 +9,12 @@
* @param {string} url Absolute URL to where the plugin is located.
*/
init : function(ed, url) {
var disabled = true;
// Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('mceExample');
ed.addCommand('WP_Link', function() {
if ( disabled )
return;
ed.windowManager.open({
id : 'wp-link',
width : 480,
@ -30,9 +34,8 @@
ed.addShortcut('alt+shift+a', ed.getLang('advanced.link_desc'), 'WP_Link');
// Add a node change handler, selects the button in the UI when a link is selected
ed.onNodeChange.add(function(ed, cm, n) {
cm.setActive('wplink', n.nodeName == 'A');
ed.onNodeChange.add(function(ed, cm, n, co) {
disabled = co && n.nodeName != 'A';
});
},
/**

View File

@ -1 +1 @@
(function(){tinymce.create("tinymce.plugins.wpLink",{init:function(a,b){a.addCommand("WP_Link",function(){a.windowManager.open({id:"wp-link",width:480,height:"auto",wpDialog:true,title:a.getLang("advlink.link_desc")},{plugin_url:b})});a.addButton("link",{title:a.getLang("advanced.link_desc"),cmd:"WP_Link"});a.addShortcut("alt+shift+a",a.getLang("advanced.link_desc"),"WP_Link");a.onNodeChange.add(function(d,c,e){c.setActive("wplink",e.nodeName=="A")})},getInfo:function(){return{longname:"WordPress Link Dialog",author:"WordPress",authorurl:"http://wordpress.org",infourl:"",version:"1.0"}}});tinymce.PluginManager.add("wplink",tinymce.plugins.wpLink)})();
(function(){tinymce.create("tinymce.plugins.wpLink",{init:function(a,b){var c=true;a.addCommand("WP_Link",function(){if(c){return}a.windowManager.open({id:"wp-link",width:480,height:"auto",wpDialog:true,title:a.getLang("advlink.link_desc")},{plugin_url:b})});a.addButton("link",{title:a.getLang("advanced.link_desc"),cmd:"WP_Link"});a.addShortcut("alt+shift+a",a.getLang("advanced.link_desc"),"WP_Link");a.onNodeChange.add(function(e,d,g,f){c=f&&g.nodeName!="A"})},getInfo:function(){return{longname:"WordPress Link Dialog",author:"WordPress",authorurl:"http://wordpress.org",infourl:"",version:"1.0"}}});tinymce.PluginManager.add("wplink",tinymce.plugins.wpLink)})();

View File

@ -7,10 +7,11 @@ var wpLink;
timeToTriggerRiver: 150,
minRiverAJAXDuration: 200,
riverBottomThreshold: 5,
keySensitivity: 100,
lastSearch: '',
init : function() {
inputs.dialog = $('#wp-link');
inputs.update = $('#wp-link-update a');
inputs.submit = $('#wp-link-submit');
// URL
inputs.url = $('#url-field');
// Secondary options
@ -24,22 +25,28 @@ var wpLink;
rivers.elements = $('.query-results', inputs.dialog);
// Bind event handlers
inputs.update.click( wpLink.update );
$('#wp-link-cancel').click( function() { tinyMCEPopup.close(); } );
inputs.dialog.keydown( wpLink.keydown );
inputs.dialog.keyup( wpLink.keyup );
inputs.submit.click( function(e){
wpLink.update();
e.preventDefault();
});
$('#wp-link-cancel').click( wpLink.cancel );
rivers.elements.delegate('li', 'click', wpLink.selectInternalLink )
rivers.elements.bind('river-select', wpLink.updateFields );
inputs.search.keyup( wpLink.searchInternalLinks );
inputs.dialog.bind('dialogopen', wpLink.refresh);
inputs.dialog.bind('wpdialogrefresh', wpLink.refresh);
},
refresh : function() {
var e;
ed = tinyMCEPopup.editor;
// Clear previously selected links
rivers.elements.find('.selected').removeClass('selected');
// Refresh rivers (clear links, check visibility)
rivers.search.refresh();
rivers.recent.refresh();
tinyMCEPopup.restoreSelection();
@ -52,71 +59,58 @@ var wpLink;
if ( "_blank" == ed.dom.getAttrib(e, 'target') )
inputs.openInNewTab.attr('checked','checked');
// Update save prompt.
inputs.update.text( wpLinkL10n.update );
inputs.submit.val( wpLinkL10n.update );
// If there's no link, set the default values.
} else {
// Set URL and description to defaults.
// Leave the new tab setting as-is.
inputs.url.val('http://');
inputs.title.val('');
wpLink.setDefaultValues();
// Update save prompt.
inputs.update.text( wpLinkL10n.save );
inputs.submit.val( wpLinkL10n.save );
}
tinyMCEPopup.storeSelection();
// If the focus is moved above the selection changes,
// IE will show a flashing cursor over the dialog.
inputs.url.focus();
// Focus the URL field and highlight its contents.
// If this is moved above the selection changes,
// IE will show a flashing cursor over the dialog.
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();
},
cancel : function() {
tinyMCEPopup.close();
},
update : function() {
var el,
ed = tinyMCEPopup.editor,
var ed = tinyMCEPopup.editor,
attrs = {
href : inputs.url.val(),
title : inputs.title.val(),
target : inputs.openInNewTab.attr('checked') ? '_blank' : ''
}, e, b,
defaultContent = attrs.title ? attrs.title : attrs.href;
}, e, b;
tinyMCEPopup.restoreSelection();
e = ed.dom.getParent(ed.selection.getNode(), 'A');
// If the values are empty...
// If the values are empty, unlink and return
if ( ! attrs.href || attrs.href == 'http://' ) {
// ...and nothing is selected, we should return
if ( ed.selection.isCollapsed() ) {
tinyMCEPopup.close();
return;
// ...and a link exists, we should unlink and return
} else if ( e ) {
if ( e ) {
tinyMCEPopup.execCommand("mceBeginUndoLevel");
b = ed.selection.getBookmark();
ed.dom.remove(e, 1);
ed.selection.moveToBookmark(b);
tinyMCEPopup.execCommand("mceEndUndoLevel");
tinyMCEPopup.close();
return;
}
return;
}
tinyMCEPopup.execCommand("mceBeginUndoLevel");
if (e == null) {
ed.getDoc().execCommand("unlink", false, null);
// If no selection exists, create a new link from scratch.
if ( ed.selection.isCollapsed() ) {
el = ed.dom.create('a', { href: "#mce_temp_url#" }, defaultContent);
ed.selection.setNode(el);
// If a selection exists, wrap it in a link.
} else {
tinyMCEPopup.execCommand("CreateLink", false, "#mce_temp_url#", {skip_undo : 1});
}
tinyMCEPopup.execCommand("CreateLink", false, "#mce_temp_url#", {skip_undo : 1});
tinymce.each(ed.dom.select("a"), function(n) {
if (ed.dom.getAttrib(n, 'href') == '#mce_temp_url#') {
@ -124,13 +118,20 @@ var wpLink;
ed.dom.setAttribs(e, attrs);
}
});
// Sometimes WebKit lets a user create a link where
// they shouldn't be able to. In this case, CreateLink
// injects "#mce_temp_url#" into their content. Fix it.
if ( $(e).text() == '#mce_temp_url#' ) {
ed.dom.remove(e);
e = null;
}
} else {
ed.dom.setAttribs(e, attrs);
}
children = $(e).children();
// Don't move caret if selection was image
if (e.childNodes.length != 1 || e.firstChild.nodeName != 'IMG') {
if ( e && (e.childNodes.length != 1 || e.firstChild.nodeName != 'IMG') ) {
ed.focus();
ed.selection.select(e);
ed.selection.collapse(0);
@ -141,14 +142,17 @@ var wpLink;
tinyMCEPopup.close();
},
selectInternalLink : function() {
var t = $(this);
if ( t.hasClass('unselectable') )
return;
t.siblings('.selected').removeClass('selected');
t.addClass('selected');
inputs.url.val( t.children('.item-permalink').val() );
inputs.title.val( t.children('.item-title').text() );
updateFields : function( e, li, originalEvent ) {
inputs.url.val( li.children('.item-permalink').val() );
inputs.title.val( li.children('.item-title').text() );
if ( originalEvent && originalEvent.type == "click" )
inputs.url.focus();
},
setDefaultValues : function() {
// Set URL and description to defaults.
// Leave the new tab setting as-is.
inputs.url.val('http://');
inputs.title.val('');
},
searchInternalLinks : function() {
@ -156,8 +160,8 @@ var wpLink;
search = t.val();
if ( search.length > 2 ) {
rivers.recent.element.hide();
rivers.search.element.show();
rivers.recent.hide();
rivers.search.show();
// Don't search if the keypress didn't change the title.
if ( wpLink.lastSearch == search )
@ -169,11 +173,54 @@ var wpLink;
rivers.search.change( search );
rivers.search.ajax( function(){ waiting.hide(); });
} else {
rivers.search.element.hide();
rivers.recent.element.show();
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, key = $.ui.keyCode;
switch( event.which ) {
case key.UP:
fn = 'prev';
case key.DOWN:
fn = fn || 'next';
clearInterval( wpLink.keyInterval );
wpLink[ fn ]();
wpLink.keyInterval = setInterval( wpLink[ fn ], wpLink.keySensitivity );
break;
default:
return;
}
event.preventDefault();
},
keyup: function( event ) {
var key = $.ui.keyCode;
switch( event.which ) {
case key.ESCAPE:
wpLink.cancel();
break;
case key.UP:
case key.DOWN:
clearInterval( wpLink.keyInterval );
break;
default:
return;
}
event.preventDefault();
},
delayedCallback : function( func, delay ) {
var timeoutTriggered, funcTriggered, funcArgs, funcContext;
@ -205,11 +252,75 @@ var wpLink;
this.waiting = element.find('.river-waiting');
this.change( search );
this.refresh();
element.scroll( function(){ self.maybeLoad(); });
element.delegate('li', 'click', function(e){ self.select( $(this), e ); });
};
$.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,

File diff suppressed because one or more lines are too long

View File

@ -270,7 +270,7 @@ function wp_default_scripts( &$scripts ) {
'l10n_print_after' => 'try{convertEntities(adminBarL10n);}catch(e){};',
) );
$scripts->add( 'wplink', "/wp-includes/js/tinymce/plugins/wplink/js/wplink$suffix.js", array('jquery'), '20101120' );
$scripts->add( 'wplink', "/wp-includes/js/tinymce/plugins/wplink/js/wplink$suffix.js", array('jquery'), '20101123' );
$scripts->localize( 'wplink', 'wpLinkL10n', array(
'update' => __('Update'),
'save' => __('Save Link'),
@ -518,7 +518,7 @@ function wp_default_styles( &$styles ) {
$styles->add( 'nav-menu', "/wp-admin/css/nav-menu$suffix.css", array(), '20100907' );
$styles->add( 'admin-bar', "/wp-includes/css/admin-bar$suffix.css", array(), '20101117' );
$styles->add( 'wp-jquery-ui-dialog', "/wp-includes/css/jquery-ui-dialog$suffix.css", array(), '20101119' );
$styles->add( 'wplink', "/wp-includes/js/tinymce/plugins/wplink/css/wplink$suffix.css", array(), '20101119' );
$styles->add( 'wplink', "/wp-includes/js/tinymce/plugins/wplink/css/wplink$suffix.css", array(), '20101123' );
foreach ( $rtl_styles as $rtl_style ) {
$styles->add_data( $rtl_style, 'rtl', true );