wp-admin/js/wp-fullscreen.dev.js

   1 /**
   2  * PubSub
   3  *
   4  * A lightweight publish/subscribe implementation.
   5  * Private use only!
   6  */
   7 var PubSub, fullscreen, wptitlehint;
   8
   9 PubSub = function() {
  10         this.topics = {};
  11 };
  12
  13 PubSub.prototype.subscribe = function( topic, callback ) {
  14         if ( ! this.topics[ topic ] )
  15                 this.topics[ topic ] = [];
  16
  17         this.topics[ topic ].push( callback );
  18         return callback;
  19 };
  20
  21 PubSub.prototype.unsubscribe = function( topic, callback ) {
  22         var i, l,
  23                 topics = this.topics[ topic ];
  24
  25         if ( ! topics )
  26                 return callback || [];
  27
  28         // Clear matching callbacks
  29         if ( callback ) {
  30                 for ( i = 0, l = topics.length; i < l; i++ ) {
  31                         if ( callback == topics[i] )
  32                                 topics.splice( i, 1 );
  33                 }
  34                 return callback;
  35
  36         // Clear all callbacks
  37         } else {
  38                 this.topics[ topic ] = [];
  39                 return topics;
  40         }
  41 };
  42
  43 PubSub.prototype.publish = function( topic, args ) {
  44         var i, l, broken,
  45                 topics = this.topics[ topic ];
  46
  47         if ( ! topics )
  48                 return;
  49
  50         args = args || [];
  51
  52         for ( i = 0, l = topics.length; i < l; i++ ) {
  53                 broken = ( topics[i].apply( null, args ) === false || broken );
  54         }
  55         return ! broken;
  56 };
  57
  58 /**
  59  * Distraction Free Writing
  60  * (wp-fullscreen)
  61  *
  62  * Access the API globally using the fullscreen variable.
  63  */
  64
  65 (function($){
  66         var api, ps, bounder, s;
  67
  68         // Initialize the fullscreen/api object
  69         fullscreen = api = {};
  70
  71         // Create the PubSub (publish/subscribe) interface.
  72         ps = api.pubsub = new PubSub();
  73         timer = 0;
  74         block = false;
  75
  76         s = api.settings = { // Settings
  77                 visible : false,
  78                 mode : 'tinymce',
  79                 editor_id : 'content',
  80                 title_id : 'title',
  81                 timer : 0,
  82                 toolbar_shown : false
  83         }
  84
  85         /**
  86          * Bounder
  87          *
  88          * Creates a function that publishes start/stop topics.
  89          * Used to throttle events.
  90          */
  91         bounder = api.bounder = function( start, stop, delay, e ) {
  92                 var y, top;
  93
  94                 delay = delay || 1250;
  95
  96                 if ( e ) {
  97                         y = e.pageY || e.clientY || e.offsetY;
  98                         top = $(document).scrollTop();
  99
 100                         if ( !e.isDefaultPrevented ) // test if e ic jQuery normalized
 101                                 y = 135 + y;
 102
 103                         if ( y - top > 120 )
 104                                 return;
 105                 }
 106
 107                 if ( block )
 108                         return;
 109
 110                 block = true;
 111
 112                 setTimeout( function() {
 113                         block = false;
 114                 }, 400 );
 115
 116                 if ( s.timer )
 117                         clearTimeout( s.timer );
 118                 else
 119                         ps.publish( start );
 120
 121                 function timed() {
 122                         ps.publish( stop );
 123                         s.timer = 0;
 124                 }
 125
 126                 s.timer = setTimeout( timed, delay );
 127         };
 128
 129         /**
 130          * on()
 131          *
 132          * Turns fullscreen on.
 133          *
 134          * @param string mode Optional. Switch to the given mode before opening.
 135          */
 136         api.on = function() {
 137                 if ( s.visible )
 138                         return;
 139
 140                 s.mode = $('#' + s.editor_id).is(':hidden') ? 'tinymce' : 'html';
 141
 142                 if ( ! s.element )
 143                         api.ui.init();
 144
 145                 s.is_mce_on = s.has_tinymce && typeof( tinyMCE.get(s.editor_id) ) != 'undefined';
 146
 147                 api.ui.fade( 'show', 'showing', 'shown' );
 148         };
 149
 150         /**
 151          * off()
 152          *
 153          * Turns fullscreen off.
 154          */
 155         api.off = function() {
 156                 if ( ! s.visible )
 157                         return;
 158
 159                 api.ui.fade( 'hide', 'hiding', 'hidden' );
 160         };
 161
 162         /**
 163          * switchmode()
 164          *
 165          * @return string - The current mode.
 166          *
 167          * @param string to - The fullscreen mode to switch to.
 168          * @event switchMode
 169          * @eventparam string to   - The new mode.
 170          * @eventparam string from - The old mode.
 171          */
 172         api.switchmode = function( to ) {
 173                 var from = s.mode;
 174
 175                 if ( ! to || ! s.visible || ! s.has_tinymce )
 176                         return from;
 177
 178                 // Don't switch if the mode is the same.
 179                 if ( from == to )
 180                         return from;
 181
 182                 ps.publish( 'switchMode', [ from, to ] );
 183                 s.mode = to;
 184                 ps.publish( 'switchedMode', [ from, to ] );
 185
 186                 return to;
 187         };
 188
 189         /**
 190          * General
 191          */
 192
 193         api.save = function() {
 194                 var hidden = $('#hiddenaction'), old = hidden.val(), spinner = $('#wp-fullscreen-save img'),
 195                         message = $('#wp-fullscreen-save span');
 196
 197                 spinner.show();
 198                 api.savecontent();
 199
 200                 hidden.val('wp-fullscreen-save-post');
 201
 202                 $.post( ajaxurl, $('form#post').serialize(), function(r){
 203                         spinner.hide();
 204                         message.show();
 205
 206                         setTimeout( function(){
 207                                 message.fadeOut(1000);
 208                         }, 3000 );
 209
 210                         if ( r.last_edited )
 211                                 $('#wp-fullscreen-save input').attr( 'title',  r.last_edited );
 212
 213                 }, 'json');
 214
 215                 hidden.val(old);
 216         }
 217
 218         api.savecontent = function() {
 219                 var ed, content;
 220
 221                 $('#' + s.title_id).val( $('#wp-fullscreen-title').val() );
 222
 223                 if ( s.mode === 'tinymce' && (ed = tinyMCE.get('wp_mce_fullscreen')) ) {
 224                         content = ed.save();
 225                 } else {
 226                         content = $('#wp_mce_fullscreen').val();
 227                 }
 228
 229                 $('#' + s.editor_id).val( content );
 230                 $(document).triggerHandler('wpcountwords', [ content ]);
 231         }
 232
 233         set_title_hint = function( title ) {
 234                 if ( ! title.val().length )
 235                         title.siblings('label').css( 'visibility', '' );
 236                 else
 237                         title.siblings('label').css( 'visibility', 'hidden' );
 238         }
 239
 240         api.dfw_width = function(n) {
 241                 var el = $('#wp-fullscreen-wrap'), w = el.width();
 242
 243                 if ( !n ) { // reset to theme width
 244                         el.width( $('#wp-fullscreen-central-toolbar').width() );
 245                         deleteUserSetting('dfw_width');
 246                         return;
 247                 }
 248
 249                 w = n + w;
 250
 251                 if ( w < 200 || w > 1200 ) // sanity check
 252                         return;
 253
 254                 el.width( w );
 255                 setUserSetting('dfw_width', w);
 256         }
 257
 258         ps.subscribe( 'showToolbar', function() {
 259                 s.toolbars.removeClass('fade-1000').addClass('fade-300');
 260                 api.fade.In( s.toolbars, 300, function(){ ps.publish('toolbarShown'); }, true );
 261                 $('#wp-fullscreen-body').addClass('wp-fullscreen-focus');
 262                 s.toolbar_shown = true;
 263         });
 264
 265         ps.subscribe( 'hideToolbar', function() {
 266                 s.toolbars.removeClass('fade-300').addClass('fade-1000');
 267                 api.fade.Out( s.toolbars, 1000, function(){ ps.publish('toolbarHidden'); }, true );
 268                 $('#wp-fullscreen-body').removeClass('wp-fullscreen-focus');
 269         });
 270
 271         ps.subscribe( 'toolbarShown', function() {
 272                 s.toolbars.removeClass('fade-300');
 273         });
 274
 275         ps.subscribe( 'toolbarHidden', function() {
 276                 s.toolbars.removeClass('fade-1000');
 277                 s.toolbar_shown = false;
 278         });
 279
 280         ps.subscribe( 'show', function() { // This event occurs before the overlay blocks the UI.
 281                 var title = $('#wp-fullscreen-title').val( $('#' + s.title_id).val() );
 282
 283                 set_title_hint( title );
 284                 $('#wp-fullscreen-save input').attr( 'title',  $('#last-edit').text() );
 285
 286                 s.textarea_obj.value = edCanvas.value;
 287
 288                 if ( s.has_tinymce && s.mode === 'tinymce' )
 289                         tinyMCE.execCommand('wpFullScreenInit');
 290
 291                 s._edCanvas = edCanvas;
 292                 edCanvas = s.textarea_obj;
 293
 294                 s.orig_y = $(window).scrollTop();
 295         });
 296
 297         ps.subscribe( 'showing', function() { // This event occurs while the DFW overlay blocks the UI.
 298                 $( document.body ).addClass( 'fullscreen-active' );
 299                 api.refresh_buttons();
 300
 301                 $( document ).bind( 'mousemove.fullscreen', function(e) { bounder( 'showToolbar', 'hideToolbar', 2000, e ); } );
 302                 bounder( 'showToolbar', 'hideToolbar', 2000 );
 303
 304                 api.bind_resize();
 305                 setTimeout( api.resize_textarea, 200 );
 306
 307                 // scroll to top so the user is not disoriented
 308                 scrollTo(0, 0);
 309
 310                 // needed it for IE7 and compat mode
 311                 $('#wpadminbar').hide();
 312         });
 313
 314         ps.subscribe( 'shown', function() { // This event occurs after the DFW overlay is shown
 315                 s.visible = true;
 316
 317                 // init the standard TinyMCE instance if missing
 318                 if ( s.has_tinymce && ! s.is_mce_on ) {
 319                         htmled = document.getElementById(s.editor_id), old_val = htmled.value;
 320
 321                         htmled.value = switchEditors.wpautop( old_val );
 322
 323                         tinyMCE.settings.setup = function(ed) {
 324                                 ed.onInit.add(function(ed) {
 325                                         ed.hide();
 326                                         delete tinyMCE.settings.setup;
 327                                         ed.getElement().value = old_val;
 328                                 });
 329                         }
 330
 331                         tinyMCE.execCommand("mceAddControl", false, s.editor_id);
 332                         s.is_mce_on = true;
 333                 }
 334         });
 335
 336         ps.subscribe( 'hide', function() { // This event occurs before the overlay blocks DFW.
 337
 338                 // Make sure the correct editor is displaying.
 339                 if ( s.has_tinymce && s.mode === 'tinymce' && $('#' + s.editor_id).is(':visible') ) {
 340                         switchEditors.go( s.editor_id, 'tinymce' );
 341                 } else if ( s.mode === 'html' && $('#' + s.editor_id).is(':hidden') ) {
 342                         switchEditors.go( s.editor_id, 'html' );
 343                 }
 344
 345                 // Save content must be after switchEditors or content will be overwritten. See #17229.
 346                 api.savecontent();
 347
 348                 $( document ).unbind( '.fullscreen' );
 349                 $(s.textarea_obj).unbind('.grow');
 350
 351                 if ( s.has_tinymce && s.mode === 'tinymce' )
 352                         tinyMCE.execCommand('wpFullScreenSave');
 353
 354                 set_title_hint( $('#' + s.title_id) );
 355
 356                 // Restore and update edCanvas.
 357                 edCanvas = s._edCanvas;
 358                 edCanvas.value = s.textarea_obj.value;
 359         });
 360
 361         ps.subscribe( 'hiding', function() { // This event occurs while the overlay blocks the DFW UI.
 362
 363                 $( document.body ).removeClass( 'fullscreen-active' );
 364                 scrollTo(0, s.orig_y);
 365                 $('#wpadminbar').show();
 366         });
 367
 368         ps.subscribe( 'hidden', function() { // This event occurs after DFW is removed.
 369                 s.visible = false;
 370                 $('#wp_mce_fullscreen').removeAttr('style');
 371
 372                 if ( s.has_tinymce && s.is_mce_on )
 373                         tinyMCE.execCommand('wpFullScreenClose');
 374
 375                 s.textarea_obj.value = '';
 376                 api.oldheight = 0;
 377         });
 378
 379         ps.subscribe( 'switchMode', function( from, to ) {
 380                 var ed;
 381
 382                 if ( !s.has_tinymce || !s.is_mce_on )
 383                         return;
 384
 385                 ed = tinyMCE.get('wp_mce_fullscreen');
 386
 387                 if ( from === 'html' && to === 'tinymce' ) {
 388                         s.textarea_obj.value = switchEditors.wpautop( s.textarea_obj.value );
 389
 390                         if ( 'undefined' == typeof(ed) )
 391                                 tinyMCE.execCommand('wpFullScreenInit');
 392                         else
 393                                 ed.show();
 394
 395                 } else if ( from === 'tinymce' && to === 'html' ) {
 396                         if ( ed )
 397                                 ed.hide();
 398                 }
 399         });
 400
 401         ps.subscribe( 'switchedMode', function( from, to ) {
 402                 api.refresh_buttons(true);
 403
 404                 if ( to === 'html' )
 405                         setTimeout( api.resize_textarea, 200 );
 406         });
 407
 408         /**
 409          * Buttons
 410          */
 411         api.b = function() {
 412                 if ( s.has_tinymce && 'tinymce' === s.mode )
 413                         tinyMCE.execCommand('Bold');
 414         }
 415
 416         api.i = function() {
 417                 if ( s.has_tinymce && 'tinymce' === s.mode )
 418                         tinyMCE.execCommand('Italic');
 419         }
 420
 421         api.ul = function() {
 422                 if ( s.has_tinymce && 'tinymce' === s.mode )
 423                         tinyMCE.execCommand('InsertUnorderedList');
 424         }
 425
 426         api.ol = function() {
 427                 if ( s.has_tinymce && 'tinymce' === s.mode )
 428                         tinyMCE.execCommand('InsertOrderedList');
 429         }
 430
 431         api.link = function() {
 432                 if ( s.has_tinymce && 'tinymce' === s.mode )
 433                         tinyMCE.execCommand('WP_Link');
 434                 else
 435                         wpLink.open();
 436         }
 437
 438         api.unlink = function() {
 439                 if ( s.has_tinymce && 'tinymce' === s.mode )
 440                         tinyMCE.execCommand('unlink');
 441         }
 442
 443         api.atd = function() {
 444                 if ( s.has_tinymce && 'tinymce' === s.mode )
 445                         tinyMCE.execCommand('mceWritingImprovementTool');
 446         }
 447
 448         api.help = function() {
 449                 if ( s.has_tinymce && 'tinymce' === s.mode )
 450                         tinyMCE.execCommand('WP_Help');
 451         }
 452
 453         api.blockquote = function() {
 454                 if ( s.has_tinymce && 'tinymce' === s.mode )
 455                         tinyMCE.execCommand('mceBlockQuote');
 456         }
 457
 458         api.refresh_buttons = function( fade ) {
 459                 fade = fade || false;
 460
 461                 if ( s.mode === 'html' ) {
 462                         $('#wp-fullscreen-mode-bar').removeClass('wp-tmce-mode').addClass('wp-html-mode');
 463
 464                         if ( fade )
 465                                 $('#wp-fullscreen-button-bar').fadeOut( 150, function(){
 466                                         $(this).addClass('wp-html-mode').fadeIn( 150 );
 467                                 });
 468                         else
 469                                 $('#wp-fullscreen-button-bar').addClass('wp-html-mode');
 470
 471                 } else if ( s.mode === 'tinymce' ) {
 472                         $('#wp-fullscreen-mode-bar').removeClass('wp-html-mode').addClass('wp-tmce-mode');
 473
 474                         if ( fade )
 475                                 $('#wp-fullscreen-button-bar').fadeOut( 150, function(){
 476                                         $(this).removeClass('wp-html-mode').fadeIn( 150 );
 477                                 });
 478                         else
 479                                 $('#wp-fullscreen-button-bar').removeClass('wp-html-mode');
 480                 }
 481         }
 482
 483         /**
 484          * UI Elements
 485          *
 486          * Used for transitioning between states.
 487          */
 488         api.ui = {
 489                 init: function() {
 490                         var topbar = $('#fullscreen-topbar'), txtarea = $('#wp_mce_fullscreen'), last = 0;
 491                         s.toolbars = topbar.add( $('#wp-fullscreen-status') );
 492                         s.element = $('#fullscreen-fader');
 493                         s.textarea_obj = txtarea[0];
 494                         s.has_tinymce = typeof(tinyMCE) != 'undefined';
 495
 496                         if ( !s.has_tinymce )
 497                                 $('#wp-fullscreen-mode-bar').hide();
 498
 499                         if ( wptitlehint )
 500                                 wptitlehint('wp-fullscreen-title');
 501
 502                         $(document).keyup(function(e){
 503                                 var c = e.keyCode || e.charCode, a, data;
 504
 505                                 if ( !fullscreen.settings.visible )
 506                                         return true;
 507
 508                                 if ( navigator.platform && navigator.platform.indexOf('Mac') != -1 )
 509                                         a = e.ctrlKey; // Ctrl key for Mac
 510                                 else
 511                                         a = e.altKey; // Alt key for Win & Linux
 512
 513                                 if ( 27 == c ) { // Esc
 514                                         data = {
 515                                                 event: e,
 516                                                 what: 'dfw',
 517                                                 cb: fullscreen.off,
 518                                                 condition: function(){
 519                                                         if ( $('#TB_window').is(':visible') || $('.wp-dialog').is(':visible') )
 520                                                                 return false;
 521                                                         return true;
 522                                                 }
 523                                         };
 524
 525                                         if ( ! jQuery(document).triggerHandler( 'wp_CloseOnEscape', [data] ) )
 526                                                 fullscreen.off();
 527                                 }
 528
 529                                 if ( a && (61 == c || 107 == c || 187 == c) ) // +
 530                                         api.dfw_width(25);
 531
 532                                 if ( a && (45 == c || 109 == c || 189 == c) ) // -
 533                                         api.dfw_width(-25);
 534
 535                                 if ( a && 48 == c ) // 0
 536                                         api.dfw_width(0);
 537
 538                                 return false;
 539                         });
 540
 541                         // word count in HTML mode
 542                         if ( typeof(wpWordCount) != 'undefined' ) {
 543
 544                                 txtarea.keyup( function(e) {
 545                                         var k = e.keyCode || e.charCode;
 546
 547                                         if ( k == last )
 548                                                 return true;
 549
 550                                         if ( 13 == k || 8 == last || 46 == last )
 551                                                 $(document).triggerHandler('wpcountwords', [ txtarea.val() ]);
 552
 553                                         last = k;
 554                                         return true;
 555                                 });
 556                         }
 557
 558                         topbar.mouseenter(function(e){
 559                                 s.toolbars.addClass('fullscreen-make-sticky');
 560                                 $( document ).unbind( '.fullscreen' );
 561                                 clearTimeout( s.timer );
 562                                 s.timer = 0;
 563                         }).mouseleave(function(e){
 564                                 s.toolbars.removeClass('fullscreen-make-sticky');
 565
 566                                 if ( s.visible )
 567                                         $( document ).bind( 'mousemove.fullscreen', function(e) { bounder( 'showToolbar', 'hideToolbar', 2000, e ); } );
 568                         });
 569                 },
 570
 571                 fade: function( before, during, after ) {
 572                         if ( ! s.element )
 573                                 api.ui.init();
 574
 575                         // If any callback bound to before returns false, bail.
 576                         if ( before && ! ps.publish( before ) )
 577                                 return;
 578
 579                         api.fade.In( s.element, 600, function() {
 580                                 if ( during )
 581                                         ps.publish( during );
 582
 583                                 api.fade.Out( s.element, 600, function() {
 584                                         if ( after )
 585                                                 ps.publish( after );
 586                                 })
 587                         });
 588                 }
 589         };
 590
 591         api.fade = {
 592                 transitionend: 'transitionend webkitTransitionEnd oTransitionEnd',
 593
 594                 // Sensitivity to allow browsers to render the blank element before animating.
 595                 sensitivity: 100,
 596
 597                 In: function( element, speed, callback, stop ) {
 598
 599                         callback = callback || $.noop;
 600                         speed = speed || 400;
 601                         stop = stop || false;
 602
 603                         if ( api.fade.transitions ) {
 604                                 if ( element.is(':visible') ) {
 605                                         element.addClass( 'fade-trigger' );
 606                                         return element;
 607                                 }
 608
 609                                 element.show();
 610                                 element.first().one( this.transitionend, function() {
 611                                         callback();
 612                                 });
 613                                 setTimeout( function() { element.addClass( 'fade-trigger' ); }, this.sensitivity );
 614                         } else {
 615                                 if ( stop )
 616                                         element.stop();
 617
 618                                 element.css( 'opacity', 1 );
 619                                 element.first().fadeIn( speed, callback );
 620
 621                                 if ( element.length > 1 )
 622                                         element.not(':first').fadeIn( speed );
 623                         }
 624
 625                         return element;
 626                 },
 627
 628                 Out: function( element, speed, callback, stop ) {
 629
 630                         callback = callback || $.noop;
 631                         speed = speed || 400;
 632                         stop = stop || false;
 633
 634                         if ( ! element.is(':visible') )
 635                                 return element;
 636
 637                         if ( api.fade.transitions ) {
 638                                 element.first().one( api.fade.transitionend, function() {
 639                                         if ( element.hasClass('fade-trigger') )
 640                                                 return;
 641
 642                                         element.hide();
 643                                         callback();
 644                                 });
 645                                 setTimeout( function() { element.removeClass( 'fade-trigger' ); }, this.sensitivity );
 646                         } else {
 647                                 if ( stop )
 648                                         element.stop();
 649
 650                                 element.first().fadeOut( speed, callback );
 651
 652                                 if ( element.length > 1 )
 653                                         element.not(':first').fadeOut( speed );
 654                         }
 655
 656                         return element;
 657                 },
 658
 659                 transitions: (function() { // Check if the browser supports CSS 3.0 transitions
 660                         var s = document.documentElement.style;
 661
 662                         return ( typeof ( s.WebkitTransition ) == 'string' ||
 663                                 typeof ( s.MozTransition ) == 'string' ||
 664                                 typeof ( s.OTransition ) == 'string' ||
 665                                 typeof ( s.transition ) == 'string' );
 666                 })()
 667         };
 668
 669
 670         /**
 671          * Resize API
 672          *
 673          * Automatically updates textarea height.
 674          */
 675
 676         api.bind_resize = function() {
 677                 $(s.textarea_obj).bind('keypress.grow click.grow paste.grow', function(){
 678                         setTimeout( api.resize_textarea, 200 );
 679                 });
 680         }
 681
 682         api.oldheight = 0;
 683         api.resize_textarea = function() {
 684                 var txt = s.textarea_obj, newheight;
 685
 686                 newheight = txt.scrollHeight > 300 ? txt.scrollHeight : 300;
 687
 688                 if ( newheight != api.oldheight ) {
 689                         txt.style.height = newheight + 'px';
 690                         api.oldheight = newheight;
 691                 }
 692         };
 693
 694 })(jQuery);