Changeset 16159

Timestamp:

11/02/2010 11:25:24 PM (15 years ago)

Author:

nacin

Message:

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

Location:

trunk/wp-includes/js/tinymce

Files:

• plugins/wplink/js/wplink.js (modified) (4 diffs)
• wp-mce-link-includes.php (modified) (2 diffs)
• wp-mce-link.php (modified) (3 diffs)
• wp-tinymce.js.gz (modified) (previous)

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

@@ -67 +67 @@
             // 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');
-            
-            // 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] || ''
-                });
-            });
+            $('#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');
+                }
+            })
+            
             panels.each( function(){
                 var linkType = this.id.replace(/^link-panel-id-/,''),
@@ -95 +92 @@
             
             // Bind event handlers
-            inputs.typeDropdown.change( wpLink.selectPanel );
             $('#wp-update').click( wpLink.update );
             $('#wp-cancel').click( function() { tinyMCEPopup.close(); } );
@@ -108 +104 @@
                 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') );
@@ -194 +189 @@
         },
         
-        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');

trunk/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 = '';
@@ -22 +25 @@
             $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']) )

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

@@ -50 +50 @@
     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;
@@ -156 +171 @@
 </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') ),
@@ -164 +180 @@
 );
 
+$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">