Expand shortlink menu when clicked. Fix displayed of shortlinks when rel shortlink is missing. Props koopersmith. fixes #16155

git-svn-id: http://svn.automattic.com/wordpress/trunk@17263 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/admin-bar.php

@@ -139,9 +139,19 @@ function wp_admin_bar_shortlink_menu() {
 	global $wp_admin_bar;
 
 	$short = wp_get_shortlink( 0, 'query' );
+	$id = 'get-shortlink';
 
-	if ( ! empty( $short) )
+	if ( empty( $short ) )
-		$wp_admin_bar->add_menu( array( 'id' => 'get-shortlink', 'title' => __( 'Shortlink' ), 'href' => $short ) );
+		return;
+	
+	$html = '<input class="shortlink-input" type="text" readonly="readonly" value="' . esc_attr( $short ) . '" />';
+	
+	$wp_admin_bar->add_menu( array(
+		'id' => $id,
+		'title' => __( 'Shortlink' ),
+		'href' => $short,
+		'meta' => array( 'html' => $html ),
+	) );
 }
 
 /**

wp-includes/css/admin-bar.dev.css

@@ -71,7 +71,8 @@
 	border-left-color: #707070;
 }
 
-#wpadminbar .quicklinks a {
+#wpadminbar .quicklinks a,
+#wpadminbar .shortlink-input {
 	color: #ddd;
 	height: 28px;
 	text-shadow: #555 0px -1px 0px;
@@ -85,7 +86,8 @@
 	line-height: 28px;
 }
 
-#wpadminbar .quicklinks .menupop ul {
+#wpadminbar .quicklinks .menupop ul,
+#wpadminbar .shortlink-input {
 	-moz-box-shadow: 0 4px 8px rgba(0,0,0,0.1);
 	-webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.1);
 	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
@@ -98,11 +100,16 @@
 	float: none;
 }
 
+#wpadminbar .selected .shortlink-input {
+	display: block;
+}
+
 #wpadminbar .quicklinks .menupop ul li {
 	float: none;
 }
 
-#wpadminbar .quicklinks .menupop ul li a {
+#wpadminbar .quicklinks .menupop ul li a,
+#wpadminbar .shortlink-input {
 	color: #555;
 	text-shadow: none;
 	white-space: nowrap;
@@ -126,7 +133,8 @@
 	margin-top: -28px;
 }
 
-#wpadminbar .quicklinks li:hover {
+#wpadminbar .quicklinks li:hover,
+#wpadminbar .quicklinks .selected {
 	background: #555;
 	background: -moz-linear-gradient(bottom,  #555,  #3e3e3e);
 	background: -webkit-gradient(linear, left bottom, left top, from(#555), to(#3e3e3e));

wp-includes/js/admin-bar.dev.js

@@ -7,6 +7,7 @@
 	},
 
 	aB, hc = new RegExp('\\bhover\\b', 'g'), q = [],
+	rselected = new RegExp('\\bselected\\b', 'g'),
 
 	/**
 	 * Get the timeout ID of the given element
@@ -19,12 +20,11 @@
 		return false;
 	},
 
-	addClass = function(t) {
+	addHoverClass = function(t) {
-		var ancestors = [],
+		var i, id, inA, hovering, ul, li,
-		ancestorLength = 0,
+			ancestors = [],
-		id,
+			ancestorLength = 0;
-		i = q.length,
+
-		inA;
 		while ( t && t != aB && t != d ) {
 			if( 'LI' == t.nodeName.toUpperCase() ) {
 				ancestors[ ancestors.length ] = t;
@@ -32,11 +32,24 @@
 				if ( id )
 					clearTimeout( id );
 				t.className = t.className ? ( t.className.replace(hc, '') + ' hover' ) : 'hover';
+				hovering = t;
 			}
 			t = t.parentNode;
 		}
 
+		// Remove any selected classes.
+		ul = hovering.parentNode;
+		if ( ul && 'UL' == ul.nodeName.toUpperCase() ) {
+			i = ul.childNodes.length;
+			while ( i-- ) {
+				li = ul.childNodes[i];
+				if ( li != hovering )
+					li.className = li.className ? li.className.replace( rselected, '' ) : '';
+			}
+		}
+
 		/* remove the hover class for any objects not in the immediate element's ancestry */
+		i = q.length;
 		while ( i-- ) {
 			inA = false;	
 			ancestorLength = ancestors.length;
@@ -50,7 +63,7 @@
 		}
 	},
 
-	removeClass = function(t) {
+	removeHoverClass = function(t) {
 		while ( t && t != aB && t != d ) {
 			if( 'LI' == t.nodeName.toUpperCase() ) {
 				(function(t) {
@@ -65,54 +78,55 @@
 	},
 
 	clickShortlink = function(e) {
-		var t = e.target || e.srcElement, links, i;
+		var i, l, node, className,
+			t = e.target || e.srcElement,
+			shortlink = t.href;
 
-		if ( 'undefined' == typeof adminBarL10n )
+		// Make t the shortlink menu item, or return.
-			return;
+		while ( true ) {
-
+			// Check if we've gone past the shortlink node,
-		while( t && t != aB && t != d && (
+			// or if the user is clicking on the input.
-			! t.className ||
+			if ( ! t || t == d || t == aB || -1 != t.className.indexOf('shortlink-input') )
-			-1 == t.className.indexOf('ab-get-shortlink')
+				return;
-		) )
+			// Check if we've found the shortlink node.
+			if ( t.className && -1 != t.className.indexOf('ab-get-shortlink') )
+				break;
 			t = t.parentNode;
-
-		if ( t && t.className && -1 != t.className.indexOf('ab-get-shortlink') ) {
-			links = d.getElementsByTagName('link');
-			if ( ! links.length )
-				links = d.links;
-
-			i = links.length;
-
-			if ( e.preventDefault )
-				e.preventDefault();
-			e.returnValue = false;
-
-			while( i-- ) {
-				if ( links[i] && 'shortlink' == links[i].getAttribute('rel') ) {
-					prompt( adminBarL10n.url, links[i].href );
-					return false;
-				}
-			}
-
-			alert( adminBarL10n.noShortlink );
-			return false;
 		}
-	}
+		
+		if ( e.preventDefault )
+			e.preventDefault();
+		e.returnValue = false;
+		
+		if ( -1 == t.className.indexOf('selected') )
+			t.className += ' selected';
+
+		for ( i = 0, l = t.childNodes.length; i < l; i++ ) {
+			node = t.childNodes[i];
+			if ( node.className && -1 != node.className.indexOf('shortlink-input') ) {
+				node.focus();
+				node.select();
+				node.onblur = function() {
+					t.className = t.className ? t.className.replace( rselected, '' ) : '';
+				};
+				break;
+			}
+		}
+		return false;
+	};
 
 	addEvent(w, 'load', function() {
-		var b = d.getElementsByTagName('body')[0],
-
 		aB = d.getElementById('wpadminbar');
 
-		if ( b && aB ) {
+		if ( d.body && aB ) {
-			b.appendChild( aB );
+			d.body.appendChild( aB );
 
 			addEvent(aB, 'mouseover', function(e) {
-				addClass( e.target || e.srcElement );
+				addHoverClass( e.target || e.srcElement );
 			});
 
 			addEvent(aB, 'mouseout', function(e) {
-				removeClass( e.target || e.srcElement );	
+				removeHoverClass( e.target || e.srcElement );
 			});
 
 			addEvent(aB, 'click', clickShortlink );

wp-includes/js/admin-bar.js

@@ -1 +1 @@
-(function(i,j){var c=function(m,l,d){if(m.addEventListener){m.addEventListener(l,d,false)}else{if(m.attachEvent){m.attachEvent("on"+l,function(){return d.call(m,window.event)})}}},e,f=new RegExp("\\bhover\\b","g"),a=[],g=function(l){var d=a.length;while(d--){if(a[d]&&l==a[d][1]){return a[d][0]}}return false},h=function(l){var m=[],p=0,o,d=a.length,n;while(l&&l!=e&&l!=i){if("LI"==l.nodeName.toUpperCase()){m[m.length]=l;o=g(l);if(o){clearTimeout(o)}l.className=l.className?(l.className.replace(f,"")+" hover"):"hover"}l=l.parentNode}while(d--){n=false;p=m.length;while(p--){if(m[p]==a[d][1]){n=true}}if(!n){a[d][1].className=a[d][1].className?a[d][1].className.replace(f,""):""}}},k=function(d){while(d&&d!=e&&d!=i){if("LI"==d.nodeName.toUpperCase()){(function(l){var m=setTimeout(function(){l.className=l.className?l.className.replace(f,""):""},500);a[a.length]=[m,l]})(d)}d=d.parentNode}},b=function(n){var m=n.target||n.srcElement,d,l;if("undefined"==typeof adminBarL10n){return}while(m&&m!=e&&m!=i&&(!m.className||-1==m.className.indexOf("ab-get-shortlink"))){m=m.parentNode}if(m&&m.className&&-1!=m.className.indexOf("ab-get-shortlink")){d=i.getElementsByTagName("link");if(!d.length){d=i.links}l=d.length;if(n.preventDefault){n.preventDefault()}n.returnValue=false;while(l--){if(d[l]&&"shortlink"==d[l].getAttribute("rel")){prompt(adminBarL10n.url,d[l].href);return false}}alert(adminBarL10n.noShortlink);return false}};c(j,"load",function(){var d=i.getElementsByTagName("body")[0],l=i.getElementById("wpadminbar");if(d&&l){d.appendChild(l);c(l,"mouseover",function(m){h(m.target||m.srcElement)});c(l,"mouseout",function(m){k(m.target||m.srcElement)});c(l,"click",b)}if(j.location.hash){j.scrollBy(0,-32)}})})(document,window);
+(function(i,k){var c=function(n,m,d){if(n.addEventListener){n.addEventListener(m,d,false)}else{if(n.attachEvent){n.attachEvent("on"+m,function(){return d.call(n,window.event)})}}},e,f=new RegExp("\\bhover\\b","g"),a=[],j=new RegExp("\\bselected\\b","g"),g=function(m){var d=a.length;while(d--){if(a[d]&&m==a[d][1]){return a[d][0]}}return false},h=function(s){var n,d,q,m,p,r,u=[],o=0;while(s&&s!=e&&s!=i){if("LI"==s.nodeName.toUpperCase()){u[u.length]=s;d=g(s);if(d){clearTimeout(d)}s.className=s.className?(s.className.replace(f,"")+" hover"):"hover";m=s}s=s.parentNode}p=m.parentNode;if(p&&"UL"==p.nodeName.toUpperCase()){n=p.childNodes.length;while(n--){r=p.childNodes[n];if(r!=m){r.className=r.className?r.className.replace(j,""):""}}}n=a.length;while(n--){q=false;o=u.length;while(o--){if(u[o]==a[n][1]){q=true}}if(!q){a[n][1].className=a[n][1].className?a[n][1].className.replace(f,""):""}}},l=function(d){while(d&&d!=e&&d!=i){if("LI"==d.nodeName.toUpperCase()){(function(m){var n=setTimeout(function(){m.className=m.className?m.className.replace(f,""):""},500);a[a.length]=[n,m]})(d)}d=d.parentNode}},b=function(r){var n,d,q,o,m=r.target||r.srcElement,p=m.href;while(true){if(!m||m==i||m==e||-1!=m.className.indexOf("shortlink-input")){return}if(m.className&&-1!=m.className.indexOf("ab-get-shortlink")){break}m=m.parentNode}if(r.preventDefault){r.preventDefault()}r.returnValue=false;if(-1==m.className.indexOf("selected")){m.className+=" selected"}for(n=0,d=m.childNodes.length;n<d;n++){q=m.childNodes[n];if(q.className&&-1!=q.className.indexOf("shortlink-input")){q.focus();q.select();q.onblur=function(){m.className=m.className?m.className.replace(j,""):""};break}}return false};c(k,"load",function(){e=i.getElementById("wpadminbar");if(i.body&&e){i.body.appendChild(e);c(e,"mouseover",function(d){h(d.target||d.srcElement)});c(e,"mouseout",function(d){l(d.target||d.srcElement)});c(e,"click",b)}if(k.location.hash){k.scrollBy(0,-32)}})})(document,window);

wp-includes/script-loader.php

@@ -262,11 +262,9 @@ function wp_default_scripts( &$scripts ) {
 	$scripts->add( 'user-profile', "/wp-admin/js/user-profile$suffix.js", array( 'jquery', 'password-strength-meter' ), '20100925' );
 	$scripts->add_data( 'user-profile', 'group', 1 );
 
-	$scripts->add( 'admin-bar', "/wp-includes/js/admin-bar$suffix.js", false, '20101210');
+	$scripts->add( 'admin-bar', "/wp-includes/js/admin-bar$suffix.js", false, '20110111');
 	$scripts->add_data( 'admin-bar', 'group', 1 );
 	$scripts->localize( 'admin-bar', 'adminBarL10n', array(
-		'url' => __( 'URL:' ),
-		'noShortlink' => __( 'No shortlink available for this page.' ),
 		'l10n_print_after' => 'try{convertEntities(adminBarL10n);}catch(e){};',
 	) );
 
@@ -515,7 +513,7 @@ function wp_default_styles( &$styles ) {
 	$styles->add( 'jcrop', '/wp-includes/js/jcrop/jquery.Jcrop.css', array(), '0.9.8' );
 	$styles->add( 'imgareaselect', '/wp-includes/js/imgareaselect/imgareaselect.css', array(), '0.9.1' );
 	$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(), '20100111' );
+	$styles->add( 'admin-bar', "/wp-includes/css/admin-bar$suffix.css", array(), '20110111' );
 	$styles->add( 'wp-jquery-ui-dialog', "/wp-includes/css/jquery-ui-dialog$suffix.css", array(), '20101224' );
 	$styles->add( 'wplink', "/wp-includes/js/tinymce/plugins/wplink/css/wplink$suffix.css", array(), '20101224' );