wp-includes/js/wplink.js

   1 /* global ajaxurl, tinymce, wpLinkL10n, tinyMCEPopup, setUserSetting, wpActiveEditor */
   2 var wpLink;
   3
   4 (function($){
   5         var inputs = {}, rivers = {}, ed, River, Query;
   6
   7         wpLink = {
   8                 timeToTriggerRiver: 150,
   9                 minRiverAJAXDuration: 200,
  10                 riverBottomThreshold: 5,
  11                 keySensitivity: 100,
  12                 lastSearch: '',
  13                 textarea: '',
  14
  15                 init : function() {
  16                         inputs.dialog = $('#wp-link');
  17                         inputs.submit = $('#wp-link-submit');
  18                         // URL
  19                         inputs.url = $('#url-field');
  20                         inputs.nonce = $('#_ajax_linking_nonce');
  21                         // Secondary options
  22                         inputs.title = $('#link-title-field');
  23                         // Advanced Options
  24                         inputs.openInNewTab = $('#link-target-checkbox');
  25                         inputs.search = $('#search-field');
  26                         // Build Rivers
  27                         rivers.search = new River( $('#search-results') );
  28                         rivers.recent = new River( $('#most-recent-results') );
  29                         rivers.elements = $('.query-results', inputs.dialog);
  30
  31                         // Bind event handlers
  32                         inputs.dialog.keydown( wpLink.keydown );
  33                         inputs.dialog.keyup( wpLink.keyup );
  34                         inputs.submit.click( function(e){
  35                                 e.preventDefault();
  36                                 wpLink.update();
  37                         });
  38                         $('#wp-link-cancel').click( function(e){
  39                                 e.preventDefault();
  40                                 wpLink.close();
  41                         });
  42                         $('#internal-toggle').click( wpLink.toggleInternalLinking );
  43
  44                         rivers.elements.bind('river-select', wpLink.updateFields );
  45
  46                         inputs.search.keyup( wpLink.searchInternalLinks );
  47
  48                         inputs.dialog.bind('wpdialogrefresh', wpLink.refresh);
  49                         inputs.dialog.bind('wpdialogbeforeopen', wpLink.beforeOpen);
  50                         inputs.dialog.bind('wpdialogclose', wpLink.onClose);
  51                 },
  52
  53                 beforeOpen : function() {
  54                         wpLink.range = null;
  55
  56                         if ( ! wpLink.isMCE() && document.selection ) {
  57                                 wpLink.textarea.focus();
  58                                 wpLink.range = document.selection.createRange();
  59                         }
  60                 },
  61
  62                 open : function() {
  63                         if ( !wpActiveEditor )
  64                                 return;
  65
  66                         this.textarea = $('#'+wpActiveEditor).get(0);
  67
  68                         // Initialize the dialog if necessary (html mode).
  69                         if ( ! inputs.dialog.data('wpdialog') ) {
  70                                 inputs.dialog.wpdialog({
  71                                         title: wpLinkL10n.title,
  72                                         width: 480,
  73                                         height: 'auto',
  74                                         modal: true,
  75                                         dialogClass: 'wp-dialog'
  76                                 });
  77                         }
  78
  79                         inputs.dialog.wpdialog('open');
  80                 },
  81
  82                 isMCE : function() {
  83                         return tinyMCEPopup && ( ed = tinyMCEPopup.editor ) && ! ed.isHidden();
  84                 },
  85
  86                 refresh : function() {
  87                         // Refresh rivers (clear links, check visibility)
  88                         rivers.search.refresh();
  89                         rivers.recent.refresh();
  90
  91                         if ( wpLink.isMCE() )
  92                                 wpLink.mceRefresh();
  93                         else
  94                                 wpLink.setDefaultValues();
  95
  96                         // Focus the URL field and highlight its contents.
  97                         //     If this is moved above the selection changes,
  98                         //     IE will show a flashing cursor over the dialog.
  99                         inputs.url.focus()[0].select();
 100                         // Load the most recent results if this is the first time opening the panel.
 101                         if ( ! rivers.recent.ul.children().length )
 102                                 rivers.recent.ajax();
 103                 },
 104
 105                 mceRefresh : function() {
 106                         var e;
 107                         ed = tinyMCEPopup.editor;
 108
 109                         tinyMCEPopup.restoreSelection();
 110
 111                         // If link exists, select proper values.
 112                         if ( e = ed.dom.getParent(ed.selection.getNode(), 'A') ) {
 113                                 // Set URL and description.
 114                                 inputs.url.val( ed.dom.getAttrib(e, 'href') );
 115                                 inputs.title.val( ed.dom.getAttrib(e, 'title') );
 116                                 // Set open in new tab.
 117                                 inputs.openInNewTab.prop('checked', ( '_blank' == ed.dom.getAttrib( e, 'target' ) ) );
 118                                 // Update save prompt.
 119                                 inputs.submit.val( wpLinkL10n.update );
 120
 121                         // If there's no link, set the default values.
 122                         } else {
 123                                 wpLink.setDefaultValues();
 124                         }
 125                 },
 126
 127                 close : function() {
 128                         if ( wpLink.isMCE() )
 129                                 tinyMCEPopup.close();
 130                         else
 131                                 inputs.dialog.wpdialog('close');
 132                 },
 133
 134                 onClose: function() {
 135                         if ( ! wpLink.isMCE() ) {
 136                                 wpLink.textarea.focus();
 137                                 if ( wpLink.range ) {
 138                                         wpLink.range.moveToBookmark( wpLink.range.getBookmark() );
 139                                         wpLink.range.select();
 140                                 }
 141                         }
 142                 },
 143
 144                 getAttrs : function() {
 145                         return {
 146                                 href : inputs.url.val(),
 147                                 title : inputs.title.val(),
 148                                 target : inputs.openInNewTab.prop('checked') ? '_blank' : ''
 149                         };
 150                 },
 151
 152                 update : function() {
 153                         if ( wpLink.isMCE() )
 154                                 wpLink.mceUpdate();
 155                         else
 156                                 wpLink.htmlUpdate();
 157                 },
 158
 159                 htmlUpdate : function() {
 160                         var attrs, html, begin, end, cursor, selection,
 161                                 textarea = wpLink.textarea;
 162
 163                         if ( ! textarea )
 164                                 return;
 165
 166                         attrs = wpLink.getAttrs();
 167
 168                         // If there's no href, return.
 169                         if ( ! attrs.href || attrs.href == 'http://' )
 170                                 return;
 171
 172                         // Build HTML
 173                         html = '<a href="' + attrs.href + '"';
 174
 175                         if ( attrs.title )
 176                                 html += ' title="' + attrs.title + '"';
 177                         if ( attrs.target )
 178                                 html += ' target="' + attrs.target + '"';
 179
 180                         html += '>';
 181
 182                         // Insert HTML
 183                         if ( document.selection && wpLink.range ) {
 184                                 // IE
 185                                 // Note: If no text is selected, IE will not place the cursor
 186                                 //       inside the closing tag.
 187                                 textarea.focus();
 188                                 wpLink.range.text = html + wpLink.range.text + '</a>';
 189                                 wpLink.range.moveToBookmark( wpLink.range.getBookmark() );
 190                                 wpLink.range.select();
 191
 192                                 wpLink.range = null;
 193                         } else if ( typeof textarea.selectionStart !== 'undefined' ) {
 194                                 // W3C
 195                                 begin       = textarea.selectionStart;
 196                                 end         = textarea.selectionEnd;
 197                                 selection   = textarea.value.substring( begin, end );
 198                                 html        = html + selection + '</a>';
 199                                 cursor      = begin + html.length;
 200
 201                                 // If no text is selected, place the cursor inside the closing tag.
 202                                 if ( begin == end )
 203                                         cursor -= '</a>'.length;
 204
 205                                 textarea.value = textarea.value.substring( 0, begin ) + html +
 206                                         textarea.value.substring( end, textarea.value.length );
 207
 208                                 // Update cursor position
 209                                 textarea.selectionStart = textarea.selectionEnd = cursor;
 210                         }
 211
 212                         wpLink.close();
 213                         textarea.focus();
 214                 },
 215
 216                 mceUpdate : function() {
 217                         var ed = tinyMCEPopup.editor,
 218                                 attrs = wpLink.getAttrs(),
 219                                 e, b;
 220
 221                         tinyMCEPopup.restoreSelection();
 222                         e = ed.dom.getParent(ed.selection.getNode(), 'A');
 223
 224                         // If the values are empty, unlink and return
 225                         if ( ! attrs.href || attrs.href == 'http://' ) {
 226                                 if ( e ) {
 227                                         b = ed.selection.getBookmark();
 228                                         ed.dom.remove(e, 1);
 229                                         ed.selection.moveToBookmark(b);
 230                                         tinyMCEPopup.execCommand('mceEndUndoLevel');
 231                                         wpLink.close();
 232                                 }
 233                                 return;
 234                         }
 235
 236                         if (e == null) {
 237                                 ed.getDoc().execCommand('unlink', false, null);
 238                                 tinyMCEPopup.execCommand('mceInsertLink', false, '#mce_temp_url#', {skip_undo : 1});
 239
 240                                 tinymce.each(ed.dom.select('a'), function(n) {
 241                                         if (ed.dom.getAttrib(n, 'href') == '#mce_temp_url#') {
 242                                                 e = n;
 243                                                 ed.dom.setAttribs(e, attrs);
 244                                         }
 245                                 });
 246
 247                                 // Sometimes WebKit lets a user create a link where
 248                                 // they shouldn't be able to. In this case, CreateLink
 249                                 // injects "#mce_temp_url#" into their content. Fix it.
 250                                 if ( tinymce.isWebKit && $(e).text() == '#mce_temp_url#' ) {
 251                                         ed.dom.remove(e);
 252                                         e = null;
 253                                 }
 254                         } else {
 255                                 ed.dom.setAttribs(e, attrs);
 256                         }
 257
 258                         // Move the caret if selection was not an image.
 259                         if ( e && (e.childNodes.length != 1 || e.firstChild.nodeName != 'IMG') ) {
 260                                 ed.selection.select(e);
 261                                 ed.selection.collapse(0);
 262                                 tinyMCEPopup.storeSelection();
 263                         }
 264
 265                         ed.execCommand('mceEndUndoLevel');
 266                         wpLink.close();
 267                         ed.focus();
 268                 },
 269
 270                 updateFields : function( e, li, originalEvent ) {
 271                         inputs.url.val( li.children('.item-permalink').val() );
 272                         inputs.title.val( li.hasClass('no-title') ? '' : li.children('.item-title').text() );
 273                         if ( originalEvent && originalEvent.type == 'click' )
 274                                 inputs.url.focus();
 275                 },
 276                 setDefaultValues : function() {
 277                         // Set URL and description to defaults.
 278                         // Leave the new tab setting as-is.
 279                         inputs.url.val('http://');
 280                         inputs.title.val('');
 281
 282                         // Update save prompt.
 283                         inputs.submit.val( wpLinkL10n.save );
 284                 },
 285
 286                 searchInternalLinks : function() {
 287                         var t = $(this), waiting,
 288                                 search = t.val();
 289
 290                         if ( search.length > 2 ) {
 291                                 rivers.recent.hide();
 292                                 rivers.search.show();
 293
 294                                 // Don't search if the keypress didn't change the title.
 295                                 if ( wpLink.lastSearch == search )
 296                                         return;
 297
 298                                 wpLink.lastSearch = search;
 299                                 waiting = t.parent().find('.spinner').show();
 300
 301                                 rivers.search.change( search );
 302                                 rivers.search.ajax( function(){ waiting.hide(); });
 303                         } else {
 304                                 rivers.search.hide();
 305                                 rivers.recent.show();
 306                         }
 307                 },
 308
 309                 next : function() {
 310                         rivers.search.next();
 311                         rivers.recent.next();
 312                 },
 313                 prev : function() {
 314                         rivers.search.prev();
 315                         rivers.recent.prev();
 316                 },
 317
 318                 keydown : function( event ) {
 319                         var fn, key = $.ui.keyCode;
 320
 321                         if ( event.which !== key.UP && event.which !== key.DOWN ) {
 322                                 return;
 323                         }
 324
 325                         fn = event.which === key.UP ? 'prev' : 'next';
 326                         clearInterval( wpLink.keyInterval );
 327                         wpLink[ fn ]();
 328                         wpLink.keyInterval = setInterval( wpLink[ fn ], wpLink.keySensitivity );
 329                         event.preventDefault();
 330                 },
 331
 332                 keyup: function( event ) {
 333                         var key = $.ui.keyCode;
 334
 335                         if ( event.which === key.ESCAPE ) {
 336                                 event.stopImmediatePropagation();
 337                                 if ( ! $(document).triggerHandler( 'wp_CloseOnEscape', [{ event: event, what: 'wplink', cb: wpLink.close }] ) )
 338                                         wpLink.close();
 339                                 return false;
 340                         }
 341
 342                         if ( event.which === key.UP || event.which === key.DOWN ) {
 343                                 clearInterval( wpLink.keyInterval );
 344                                 event.preventDefault();
 345                         }
 346                 },
 347
 348                 delayedCallback : function( func, delay ) {
 349                         var timeoutTriggered, funcTriggered, funcArgs, funcContext;
 350
 351                         if ( ! delay )
 352                                 return func;
 353
 354                         setTimeout( function() {
 355                                 if ( funcTriggered )
 356                                         return func.apply( funcContext, funcArgs );
 357                                 // Otherwise, wait.
 358                                 timeoutTriggered = true;
 359                         }, delay);
 360
 361                         return function() {
 362                                 if ( timeoutTriggered )
 363                                         return func.apply( this, arguments );
 364                                 // Otherwise, wait.
 365                                 funcArgs = arguments;
 366                                 funcContext = this;
 367                                 funcTriggered = true;
 368                         };
 369                 },
 370
 371                 toggleInternalLinking : function( event ) {
 372                         var panel = $('#search-panel'),
 373                                 widget = inputs.dialog.wpdialog('widget'),
 374                                 // We're about to toggle visibility; it's currently the opposite
 375                                 visible = !panel.is(':visible'),
 376                                 win = $(window);
 377
 378                         $(this).toggleClass('toggle-arrow-active', visible);
 379
 380                         inputs.dialog.height('auto');
 381                         panel.slideToggle( 300, function() {
 382                                 setUserSetting('wplink', visible ? '1' : '0');
 383                                 inputs[ visible ? 'search' : 'url' ].focus();
 384
 385                                 // Move the box if the box is now expanded, was opened in a collapsed state,
 386                                 // and if it needs to be moved. (Judged by bottom not being positive or
 387                                 // bottom being smaller than top.)
 388                                 var scroll = win.scrollTop(),
 389                                         top = widget.offset().top,
 390                                         bottom = top + widget.outerHeight(),
 391                                         diff = bottom - win.height();
 392
 393                                 if ( diff > scroll ) {
 394                                         widget.animate({'top': diff < top ?  top - diff : scroll }, 200);
 395                                 }
 396                         });
 397                         event.preventDefault();
 398                 }
 399         };
 400
 401         River = function( element, search ) {
 402                 var self = this;
 403                 this.element = element;
 404                 this.ul = element.children('ul');
 405                 this.waiting = element.find('.river-waiting');
 406
 407                 this.change( search );
 408                 this.refresh();
 409
 410                 element.scroll( function(){ self.maybeLoad(); });
 411                 element.delegate('li', 'click', function(e){ self.select( $(this), e ); });
 412         };
 413
 414         $.extend( River.prototype, {
 415                 refresh: function() {
 416                         this.deselect();
 417                         this.visible = this.element.is(':visible');
 418                 },
 419                 show: function() {
 420                         if ( ! this.visible ) {
 421                                 this.deselect();
 422                                 this.element.show();
 423                                 this.visible = true;
 424                         }
 425                 },
 426                 hide: function() {
 427                         this.element.hide();
 428                         this.visible = false;
 429                 },
 430                 // Selects a list item and triggers the river-select event.
 431                 select: function( li, event ) {
 432                         var liHeight, elHeight, liTop, elTop;
 433
 434                         if ( li.hasClass('unselectable') || li == this.selected )
 435                                 return;
 436
 437                         this.deselect();
 438                         this.selected = li.addClass('selected');
 439                         // Make sure the element is visible
 440                         liHeight = li.outerHeight();
 441                         elHeight = this.element.height();
 442                         liTop = li.position().top;
 443                         elTop = this.element.scrollTop();
 444
 445                         if ( liTop < 0 ) // Make first visible element
 446                                 this.element.scrollTop( elTop + liTop );
 447                         else if ( liTop + liHeight > elHeight ) // Make last visible element
 448                                 this.element.scrollTop( elTop + liTop - elHeight + liHeight );
 449
 450                         // Trigger the river-select event
 451                         this.element.trigger('river-select', [ li, event, this ]);
 452                 },
 453                 deselect: function() {
 454                         if ( this.selected )
 455                                 this.selected.removeClass('selected');
 456                         this.selected = false;
 457                 },
 458                 prev: function() {
 459                         if ( ! this.visible )
 460                                 return;
 461
 462                         var to;
 463                         if ( this.selected ) {
 464                                 to = this.selected.prev('li');
 465                                 if ( to.length )
 466                                         this.select( to );
 467                         }
 468                 },
 469                 next: function() {
 470                         if ( ! this.visible )
 471                                 return;
 472
 473                         var to = this.selected ? this.selected.next('li') : $('li:not(.unselectable):first', this.element);
 474                         if ( to.length )
 475                                 this.select( to );
 476                 },
 477                 ajax: function( callback ) {
 478                         var self = this,
 479                                 delay = this.query.page == 1 ? 0 : wpLink.minRiverAJAXDuration,
 480                                 response = wpLink.delayedCallback( function( results, params ) {
 481                                         self.process( results, params );
 482                                         if ( callback )
 483                                                 callback( results, params );
 484                                 }, delay );
 485
 486                         this.query.ajax( response );
 487                 },
 488                 change: function( search ) {
 489                         if ( this.query && this._search == search )
 490                                 return;
 491
 492                         this._search = search;
 493                         this.query = new Query( search );
 494                         this.element.scrollTop(0);
 495                 },
 496                 process: function( results, params ) {
 497                         var list = '', alt = true, classes = '',
 498                                 firstPage = params.page == 1;
 499
 500                         if ( !results ) {
 501                                 if ( firstPage ) {
 502                                         list += '<li class="unselectable"><span class="item-title"><em>' +
 503                                                 wpLinkL10n.noMatchesFound + '</em></span></li>';
 504                                 }
 505                         } else {
 506                                 $.each( results, function() {
 507                                         classes = alt ? 'alternate' : '';
 508                                         classes += this.title ? '' : ' no-title';
 509                                         list += classes ? '<li class="' + classes + '">' : '<li>';
 510                                         list += '<input type="hidden" class="item-permalink" value="' + this.permalink + '" />';
 511                                         list += '<span class="item-title">';
 512                                         list += this.title ? this.title : wpLinkL10n.noTitle;
 513                                         list += '</span><span class="item-info">' + this.info + '</span></li>';
 514                                         alt = ! alt;
 515                                 });
 516                         }
 517
 518                         this.ul[ firstPage ? 'html' : 'append' ]( list );
 519                 },
 520                 maybeLoad: function() {
 521                         var self = this,
 522                                 el = this.element,
 523                                 bottom = el.scrollTop() + el.height();
 524
 525                         if ( ! this.query.ready() || bottom < this.ul.height() - wpLink.riverBottomThreshold )
 526                                 return;
 527
 528                         setTimeout(function() {
 529                                 var newTop = el.scrollTop(),
 530                                         newBottom = newTop + el.height();
 531
 532                                 if ( ! self.query.ready() || newBottom < self.ul.height() - wpLink.riverBottomThreshold )
 533                                         return;
 534
 535                                 self.waiting.show();
 536                                 el.scrollTop( newTop + self.waiting.outerHeight() );
 537
 538                                 self.ajax( function() { self.waiting.hide(); });
 539                         }, wpLink.timeToTriggerRiver );
 540                 }
 541         });
 542
 543         Query = function( search ) {
 544                 this.page = 1;
 545                 this.allLoaded = false;
 546                 this.querying = false;
 547                 this.search = search;
 548         };
 549
 550         $.extend( Query.prototype, {
 551                 ready: function() {
 552                         return !( this.querying || this.allLoaded );
 553                 },
 554                 ajax: function( callback ) {
 555                         var self = this,
 556                                 query = {
 557                                         action : 'wp-link-ajax',
 558                                         page : this.page,
 559                                         '_ajax_linking_nonce' : inputs.nonce.val()
 560                                 };
 561
 562                         if ( this.search )
 563                                 query.search = this.search;
 564
 565                         this.querying = true;
 566
 567                         $.post( ajaxurl, query, function(r) {
 568                                 self.page++;
 569                                 self.querying = false;
 570                                 self.allLoaded = !r;
 571                                 callback( r, query );
 572                         }, 'json' );
 573                 }
 574         });
 575
 576         $(document).ready( wpLink.init );
 577 })(jQuery);