Ticket #11420: 11204.dropdown.to.tabs.diff

wp-includes/js/tinymce/plugins/wplink/js/wplink.js

@@ -66 +66 @@
                         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 +91 @@
                         });
                         
                         // 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 +103 @@
                         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 +188 @@
                         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 )

wp-includes/js/tinymce/wp-mce-link.php

@@ -49 +49 @@
         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 +170 @@
 </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( 'page' ), get_post_type_object( 'post' ) );
 $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

wp-includes/js/tinymce/wp-mce-link-includes.php

@@ -3 +3 @@
 class WP_Tab_Bar {
         var $tabs = array();
         
+        var $id = '';
+        var $classes = array();
+        
         var $selected = '';
         
         function add( $id, $label, $url='' ) {
@@ -21 +24 @@
                 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='" . implode( " ", $this->classes ) . "'>";
                 foreach( $this->tabs as $tab ) {
                         if ( !isset($tab['url']) )
                                 $tab['url'] = '';