Tabs for internal linking. props koopersmith, see #11420.

git-svn-id: http://svn.automattic.com/wordpress/trunk@16159 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
nacin 2010-11-02 23:25:24 +00:00
parent 0c4a2788cf
commit 606ae7ee4d
4 changed files with 43 additions and 42 deletions

View File

@ -66,23 +66,20 @@
inputs.title = $('#link-title-field');
// Advanced Options
inputs.openInNewTab = $('#link-target-checkbox');
// Types
inputs.typeDropdown = $('#link-type');
inputs.typeOptions = inputs.typeDropdown.find('option');
panels = $('.link-panel');
active = $('.link-panel-active');
$('#link-panel-tab-bar').wpTabs({
show: function(e, widget) {
active = widget.panel;
active.addClass('link-panel-active');
wpLink.maybeLoadPanel();
},
hide: function(e, widget) {
active.removeClass('link-panel-active');
}
})
// Extract type names
inputs.typeOptions.each( function(){
var linkType = this.id.replace(/^link-option-id-/,''),
parts = linkType.split('-');
$(this).data( 'link-type', {
full : linkType,
type : parts[0],
name : parts[1] || ''
});
});
panels.each( function(){
var linkType = this.id.replace(/^link-panel-id-/,''),
parts = linkType.split('-');
@ -94,7 +91,6 @@
});
// Bind event handlers
inputs.typeDropdown.change( wpLink.selectPanel );
$('#wp-update').click( wpLink.update );
$('#wp-cancel').click( function() { tinyMCEPopup.close(); } );
$('.link-panel .wp-tab-bar').wpTabs('option', 'show', wpLink.maybeLoadPanel );
@ -107,7 +103,6 @@
if ( ! e )
return;
// @TODO: select proper panel/fill values when a link is edited
active.find('input.url-field').val( e.href );
inputs.title.val( ed.dom.getAttrib(e, 'title') );
// Advanced Options
@ -193,19 +188,6 @@
tinyMCEPopup.close();
},
selectPanel : function( option ) {
var sel = inputs.typeOptions.filter(':selected');
if ( option.jquery ) {
sel.removeAttr('selected');
sel = option.attr('selected', 'selected');
}
active.removeClass('link-panel-active');
active = $('#link-panel-id-' + sel.data('link-type').full ).addClass('link-panel-active');
wpLink.maybeLoadPanel();
},
maybeLoadPanel : function() {
var panel = active.find('.wp-tab-panel:visible');
if ( panel.length && panel.find('.wp-tab-panel-loading').length )

View File

@ -3,6 +3,9 @@
class WP_Tab_Bar {
var $tabs = array();
var $id = '';
var $classes = array();
var $selected = '';
function add( $id, $label, $url='' ) {
@ -21,7 +24,9 @@ class WP_Tab_Bar {
if ( empty( $this->selected ) )
$this->selected = $this->tabs[0]['for'];
$out = "<ul class='wp-tab-bar'>";
array_unshift( $this->classes, 'wp-tab-bar' );
$out = "<ul id='$this->id' class='" . esc_attr( implode( ' ', $this->classes ) ) . "'>";
foreach( $this->tabs as $tab ) {
if ( !isset($tab['url']) )
$tab['url'] = '';

View File

@ -49,6 +49,21 @@ select {
padding: 5px;
border-bottom: 1px solid #dfdfdf;
}
#link-header {
padding-bottom: 0;
background: #fff;
}
#link-panel-tab-bar li {
font-weight: bold;
border: #dfdfdf solid;
margin-right: 5px;
border-width: 1px 1px 0;
}
#link-panel-tab-bar .wp-tab-active {
border-color:#ccc;
background-color: #f1f1f1;
}
#link-type {
width: 140px;
}
@ -155,28 +170,27 @@ label span {
</style>
</head>
<?php
$pts = get_post_types( array( 'public' => true ), 'objects' );
// @TODO: Support custom post types.
// $pts = get_post_types( array( 'public' => true ), 'objects' );
$pts = array( get_post_type_object( 'post' ), get_post_type_object( 'page' ) );
$queries = array(
array( 'preset' => 'all', 'label' => __('View All') ),
array( 'preset' => 'recent', 'label' => __('Most Recent') ),
array( 'preset' => 'search', 'label' => __('Search') )
);
$tb = new WP_Tab_Bar();
$tb->id = 'link-panel-tab-bar';
$tb->add( 'link-panel-id-custom', __('External Link') );
foreach( $pts as $pt ) {
$tb->add( "link-panel-id-pt-$pt->name", $pt->labels->singular_name );
}
?>
<body id="post-body">
<div id="link-header">
<label for="link-type">
<span><strong><?php _e('Link Type:'); ?></strong>
</span><select id="link-type">
<option id="link-option-id-custom" class="link-custom"><?php _e('External Link'); ?></option>
<?php
foreach ( $pts as $pt ) {
echo "<option id='link-option-id-pt-$pt->name' class='link-option-pt'>";
echo $pt->labels->singular_name . '</option>';
} ?>
</select>
</label>
<?php $tb->render(); ?>
</div>
<div id="link-selector">
<?php