| 1 | if ( ! window.WP ) { window.WP = {}; } |
| 2 | WP.Fullscreen = function ( $ ) { |
| 3 | var fadeOut, |
| 4 | isRtl = ( $( 'body' ).hasClass( 'rtl' ) ), |
| 5 | mouseMovePause = false |
| 6 | oldheight = 0, |
| 7 | postBodyContent = $( '#wp-content-wrap' ), |
| 8 | sidePostbox = $( '#postbox-container-1' ), |
| 9 | textAreaResizePause = false, |
| 10 | titleBox = $( '#titlediv' ), |
| 11 | titleBoxHeight = titleBox.height(); |
| 12 | |
| 13 | function clearFadeOut () { |
| 14 | clearTimeout(fadeOut); |
| 15 | fadeOut = 0; |
| 16 | } |
| 17 | function editorEventsOff () { |
| 18 | if ( typeof tinymce != 'undefined' && tinymce.activeEditor ) { |
| 19 | tinymce.activeEditor.dom.unbind( tinymce.activeEditor.dom.doc, 'mousemove' ); |
| 20 | tinymce.activeEditor.dom.unbind( tinymce.activeEditor.dom.doc, 'mouseleave' ); |
| 21 | tinymce.activeEditor.dom.unbind( tinymce.activeEditor.dom.doc, 'click' ); |
| 22 | tinymce.activeEditor.dom.unbind( tinymce.activeEditor.dom.doc, 'keypress' ); |
| 23 | window.tinyMCE.activeEditor.dom.setStyle(window.tinyMCE.activeEditor.dom.select('body'), 'overflow', 'auto' ); |
| 24 | window.tinyMCE.activeEditor.dom.setStyle(window.tinyMCE.activeEditor.dom.select('body'), 'height', '300px' ); |
| 25 | $( '#content_ifr' ).css( 'height', '300px' ); |
| 26 | } |
| 27 | $( '#content' ).off( 'mousemove mouseleave click' ).css( 'height', '300px' ); |
| 28 | $( document ).off( 'keydown' ); |
| 29 | } |
| 30 | function editorEventsOn () { |
| 31 | editorEventsOff(); |
| 32 | |
| 33 | // Give tinymce.activeEditor a chance to set |
| 34 | setTimeout(function () { |
| 35 | if ( typeof tinymce != 'undefined' && tinymce.activeEditor ) { |
| 36 | tinymce.activeEditor.dom.bind( tinymce.activeEditor.dom.doc, 'mousemove', function( e ){ |
| 37 | fadeInThrottle(); |
| 38 | fadeOutFullscreen(); |
| 39 | }); |
| 40 | tinymce.activeEditor.dom.bind( tinymce.activeEditor.dom.doc, 'mouseleave', function( e ){ |
| 41 | clearFadeOut(); |
| 42 | }); |
| 43 | tinymce.activeEditor.dom.bind( tinymce.activeEditor.dom.doc, 'click', function( e ){ |
| 44 | fadeOutFullscreen(); |
| 45 | }); |
| 46 | tinymce.activeEditor.dom.bind( tinymce.activeEditor.dom.doc, 'keydown', function( e ){ |
| 47 | if ( 27 === e.keyCode ) { |
| 48 | fadeInFullscreen(); |
| 49 | hideFullscreenMode(); |
| 50 | return; |
| 51 | } |
| 52 | resizeEditor( $( tinymce.activeEditor.dom.doc ).find( 'body' ), 'visual' ); |
| 53 | }); |
| 54 | window.tinyMCE.activeEditor.dom.setStyle(window.tinyMCE.activeEditor.dom.select('body'), 'overflow', 'hidden' ); |
| 55 | } |
| 56 | $( '#content' ).on( 'mousemove', function () { |
| 57 | fadeInThrottle(); |
| 58 | fadeOutFullscreen(); |
| 59 | }).on( 'mouseleave', function () { |
| 60 | clearFadeOut(); |
| 61 | }).on( 'click', function () { |
| 62 | fadeOutFullscreen(); |
| 63 | }).on( 'keypress paste', function () { |
| 64 | setTimeout( function () { resizeEditor( $( '#content' ), 'text' ); }, 30); |
| 65 | }).css( 'overflow', 'hidden' ); |
| 66 | editorSetFocus(); |
| 67 | // Exit with esc key |
| 68 | $( document ).on( 'keydown', function ( e ) { |
| 69 | if ( 27 !== e.keyCode ) |
| 70 | return; |
| 71 | fadeInFullscreen(); |
| 72 | hideFullscreenMode(); |
| 73 | }); |
| 74 | }, 300); |
| 75 | } |
| 76 | function editorSetFocus () { |
| 77 | if ( typeof tinymce != 'undefined' && tinymce.activeEditor ) |
| 78 | tinymce.activeEditor.focus(); |
| 79 | else |
| 80 | $( '#content' ).focus(); |
| 81 | } |
| 82 | function fadeInFullscreen() { |
| 83 | $( '#wp-content-editor-tools, #edit-slug-box, .mceToolbar, .quicktags-toolbar, .fullscreen-mode, .mceStatusbar, #postbox-container-1, #post-status-info, #content-resize-handle' ).css( { opacity: 100 } ); |
| 84 | $( '.wp-editor-container' ).css( { borderColor: '#ccc #ccc #dfdfdf' } ); |
| 85 | } |
| 86 | function fadeInThrottle () { |
| 87 | if ( ! mouseMovePause ) { |
| 88 | mouseMovePause = true; |
| 89 | fadeInFullscreen(); |
| 90 | setTimeout( function () { mouseMovePause = false; }, 300 ) |
| 91 | } |
| 92 | } |
| 93 | function fadeOutFullscreen () { |
| 94 | clearFadeOut(); |
| 95 | fadeOut = setTimeout(function() { |
| 96 | $( '#wp-content-editor-tools, #edit-slug-box, .mceToolbar, .quicktags-toolbar, .fullscreen-mode, .mceStatusbar, #postbox-container-1, #post-status-info, #content-resize-handle' ).animate( { opacity: 0 }, 600 ); |
| 97 | $( '.wp-editor-container' ).animate( { borderColor: '#fff' }, 600 ); |
| 98 | }, 1000); |
| 99 | } |
| 100 | function hideFullscreenMode () { |
| 101 | $( '#hiddenaction' ).val( 'editpost' ); |
| 102 | $( '#fullscreen-overlay' ).fadeOut( 'slow' ); |
| 103 | $( 'body' ).removeClass( 'fullscreen-view' ); |
| 104 | $( 'html' ).animate( { marginTop: 0 }, 500 ); |
| 105 | titleBox.animate( { maxHeight: titleBoxHeight + 'px', marginBottom: '10px' }, 500 ); |
| 106 | postBodyContent.css( { 'position': 'relative' } ); |
| 107 | sidePostbox.css( { 'position': 'relative', 'opacity': 100 } ).off( 'mouseenter mouseleave' ); |
| 108 | // Has to happen after the HTML margin animation, else the screen jumps |
| 109 | setTimeout(function() { |
| 110 | postBodyContent.css( { 'zIndex': 999 } ); |
| 111 | sidePostbox.css( { 'zIndex': 999 } ); |
| 112 | $( '#wpbody-content' ).css( 'overflow','hidden' ); |
| 113 | }, 600); |
| 114 | $( '#formatdiv, #categorydiv, #tagsdiv-post_tag' ).show(); |
| 115 | $( '#misc-publishing-actions, #major-publishing-actions' ).slideDown(); |
| 116 | $( '#minor-publishing' ).css( 'border-bottom-color', '#dfdfdf' ); |
| 117 | $( '#minor-publishing-actions' ).css( 'marginBottom', '0' ); |
| 118 | // Use visiblity here vs. display - prevents jump in transition when scrollbars disappear |
| 119 | $( '#postbox-container-2' ).css( 'visibility', 'visible' ); |
| 120 | clearFadeOut(); |
| 121 | $( '.fullscreen-mode .mce_wp_fullscreen' ).css( 'background-position', '-240px -20px' ); |
| 122 | $( '#wp-content-wrap, #submitdiv' ).off('mouseenter mouseleave'); |
| 123 | $( '.wp-switch-editor' ).off( 'click' ); |
| 124 | editorSetFocus(); |
| 125 | $( '.fullscreen-view #save-post' ).off( 'click' ); |
| 126 | $( '.fullscreen-view #post' ).off( 'submit' ); |
| 127 | $( '#content' ).off( 'keypress paste' ); |
| 128 | editorEventsOff(); |
| 129 | } |
| 130 | function resizeEditor ( txt, type ) { |
| 131 | var newheight, |
| 132 | scrollHeight = txt.prop( 'scrollHeight' ), |
| 133 | newheight = scrollHeight > 300 ? scrollHeight : 300; |
| 134 | |
| 135 | if ( ! textAreaResizePause && newheight - 30 != oldheight ) { |
| 136 | textAreaResizePause = true |
| 137 | var heightVal = newheight + 30 + 'px'; |
| 138 | |
| 139 | if ( 'visual' === type ) { |
| 140 | $( '#content_ifr' ).css( 'height', heightVal ); |
| 141 | window.tinyMCE.activeEditor.dom.setStyle(window.tinyMCE.activeEditor.dom.select('body'), 'height', heightVal ); |
| 142 | } else { |
| 143 | txt.css( 'height', heightVal ); |
| 144 | } |
| 145 | oldheight = newheight; |
| 146 | |
| 147 | // Throttle resize attempts |
| 148 | setTimeout( function () { textAreaResizePause = false; }, 1000 ) |
| 149 | } |
| 150 | } |
| 151 | function saveDraft () { |
| 152 | $( '#hiddenaction' ).val( 'wp-fullscreen-save-post' ); |
| 153 | $.post( ajaxurl, $( 'form#post' ).serialize(), function( r ){ |
| 154 | $( '#minor-publishing-actions .spinner' ).hide(); |
| 155 | $( '#save-post' ).removeClass( 'button-disabled' ); |
| 156 | $( '#publish' ).removeClass( 'button-primary-disabled' ); |
| 157 | |
| 158 | $( '#last-edit' ).html( r.last_edited ); |
| 159 | |
| 160 | if ( window.history ) |
| 161 | window.history.replaceState({}, 'Saved Draft', 'post.php?post=' + r.id + '&action=edit'); |
| 162 | }, 'json' ); |
| 163 | } |
| 164 | function showFullscreenMode () { |
| 165 | $( '#fullscreen-overlay' ).fadeIn( 'fast' ); |
| 166 | $( 'body' ).addClass( 'fullscreen-view' ); |
| 167 | $( 'html' ).animate( { marginTop: $( '#post-body' ).offset().top * -1 + 20 + 'px' }, 400 ); |
| 168 | titleBox.animate( { maxHeight: 0, marginBottom: 0 }, 300 ); |
| 169 | postBodyContent.css( { 'position': 'absolute', 'zIndex': 150000 } ); |
| 170 | if ( isRtl ) |
| 171 | sidePostbox.css( { 'position': 'absolute', 'zIndex': 150000, 'left': 0 } ); |
| 172 | else |
| 173 | sidePostbox.css( { 'position': 'absolute', 'zIndex': 150000, 'right': 0 } ); |
| 174 | $( '#wpbody-content' ).css( 'overflow','visible' ); |
| 175 | $( '#formatdiv, #categorydiv, #tagsdiv-post_tag' ).hide(); |
| 176 | $( '#misc-publishing-actions, #major-publishing-actions' ).slideUp(); |
| 177 | $( '#minor-publishing' ).css( 'border-bottom-color', 'transparent' ); |
| 178 | $( '#minor-publishing-actions' ).css( 'marginBottom', '10px' ); |
| 179 | // Use visiblity here vs. display - prevents jump in transition when scrollbars disappear |
| 180 | $( '#postbox-container-2' ).css( 'visibility', 'hidden' ); |
| 181 | fadeOutFullscreen(); |
| 182 | $( '.fullscreen-mode .mce_wp_fullscreen' ).css( 'background-position', '-560px -20px' ); |
| 183 | $( '#wp-content-wrap, #submitdiv' ).on( 'mouseover', function () { |
| 184 | clearFadeOut(); |
| 185 | fadeInThrottle(); |
| 186 | }).mouseleave( function () { |
| 187 | fadeOutFullscreen(); |
| 188 | }); |
| 189 | // Attach events when visual or text tabs are clicked |
| 190 | $( '.wp-switch-editor' ).on( 'click', function () { |
| 191 | editorEventsOn(); |
| 192 | }); |
| 193 | // Catch Save Draft click event |
| 194 | $( '.fullscreen-view #save-post' ).on( 'click', function ( e ) { |
| 195 | saveDraft(); |
| 196 | e.preventDefault(); |
| 197 | }); |
| 198 | editorEventsOn(); |
| 199 | // Resize text areas |
| 200 | if ( window.tinymce.activeEditor ) |
| 201 | resizeEditor( $( window.tinymce.activeEditor.dom.doc ).find( 'body' ), 'visual' ); |
| 202 | resizeEditor( $( '#content' ), 'text' ); |
| 203 | } |
| 204 | return { |
| 205 | init: function () { |
| 206 | $( '.fullscreen-mode' ).click( function () { |
| 207 | if ( $( '#fullscreen-overlay' ).is( ':visible' ) ) |
| 208 | hideFullscreenMode(); |
| 209 | else |
| 210 | showFullscreenMode(); |
| 211 | return false; |
| 212 | }); |
| 213 | // Move #post-status-info inside #wp-content-wrap |
| 214 | $( '#post-status-info' ).detach().appendTo( '#wp-content-wrap' ); |
| 215 | } |
| 216 | } |
| 217 | } (jQuery); |
| 218 | WP.Fullscreen.init(); |
| 219 | |