From d4946a7904bcf222fa13992264dfb641ac7b792c Mon Sep 17 00:00:00 2001 From: Andrew Ozz Date: Wed, 26 Nov 2014 02:49:41 +0000 Subject: [PATCH] Editor: - Add CSS reset for the TinyMCE fullscreen mode when used on the Edit Post screen. - Fix loading of the old and new DFW buttons, use another arg. passed to WP_Editors. - Reset editor-expand when exiting TinyMCE fullscreen mode. Fixes #30453. git-svn-id: https://develop.svn.wordpress.org/trunk@30573 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/css/edit.css | 20 +++++++++++++++++++ src/wp-admin/edit-form-advanced.php | 4 +++- src/wp-admin/js/editor-expand.js | 17 ++++++++++++---- src/wp-includes/class-wp-editor.php | 11 ++++++---- src/wp-includes/css/editor.css | 5 +++++ src/wp-includes/js/quicktags.js | 6 ++++-- .../js/tinymce/plugins/wpfullscreen/plugin.js | 2 +- 7 files changed, 53 insertions(+), 12 deletions(-) diff --git a/src/wp-admin/css/edit.css b/src/wp-admin/css/edit.css index 7d531fa67d..af5250c301 100644 --- a/src/wp-admin/css/edit.css +++ b/src/wp-admin/css/edit.css @@ -435,6 +435,26 @@ td.plugin-title p { z-index: 999; } +/* TinyMCE native fullscreen mode override */ +.mce-fullscreen #wp-content-wrap .mce-menubar, +.mce-fullscreen #wp-content-wrap .mce-toolbar-grp, +.mce-fullscreen #wp-content-wrap .mce-edit-area, +.mce-fullscreen #wp-content-wrap .mce-statusbar { + position: static !important; + width: auto !important; + padding: 0 !important; +} + +.mce-fullscreen #wp-content-wrap .mce-statusbar { + visibility: visible !important; +} + +.post-php.mce-fullscreen #wpadminbar, +.mce-fullscreen #wp-content-wrap .mce-wp-dfw { + display: none; +} +/* End TinyMCE native fullscreen mode override */ + #wp-content-editor-tools { background-color: #f1f1f1; padding-top: 20px; diff --git a/src/wp-admin/edit-form-advanced.php b/src/wp-admin/edit-form-advanced.php index a01ed2751d..29daeddc68 100644 --- a/src/wp-admin/edit-form-advanced.php +++ b/src/wp-admin/edit-form-advanced.php @@ -11,7 +11,7 @@ if ( !defined('ABSPATH') ) die('-1'); wp_enqueue_script('post'); -$_wp_editor_expand = false; +$_wp_editor_expand = $_content_editor_dfw = false; /** * Filter whether to enable the 'expand' functionality in the post editor. @@ -25,6 +25,7 @@ if ( post_type_supports( $post_type, 'editor' ) && ! wp_is_mobile() && apply_filters( 'wp_editor_expand', true ) ) { wp_enqueue_script('editor-expand'); + $_content_editor_dfw = true; $_wp_editor_expand = ( get_user_setting( 'editor_expand', 'on' ) === 'on' ); } @@ -512,6 +513,7 @@ if ( post_type_supports($post_type, 'editor') ) {
post_content, 'content', array( + '_content_editor_dfw' => $_content_editor_dfw, 'drag_drop_upload' => true, 'tabfocus_elements' => 'content-html,save-post', 'editor_height' => 300, diff --git a/src/wp-admin/js/editor-expand.js b/src/wp-admin/js/editor-expand.js index 9085c27b16..7cec72d21a 100644 --- a/src/wp-admin/js/editor-expand.js +++ b/src/wp-admin/js/editor-expand.js @@ -242,6 +242,12 @@ } } + function mceFullscreenToggled( event ) { + if ( ! event.state ) { + adjust(); + } + } + // Adjust when switching editor modes. function mceShow() { $window.on( 'scroll.mce-float-panels', hideFloatPanels ); @@ -280,8 +286,10 @@ editor.on( 'wp-toolbar-toggle', toggleAdvanced ); // Adjust when the editor resizes. editor.on( 'setcontent wp-autoresize wp-toolbar-toggle', adjust ); - // Don't hide the caret after undo/redo + // Don't hide the caret after undo/redo. editor.on( 'undo redo', mceScroll ); + // Adjust when exiting TinyMCE's fullscreen mode. + editor.on( 'FullscreenStateChanged', mceFullscreenToggled ); $window.off( 'scroll.mce-float-panels' ).on( 'scroll.mce-float-panels', hideFloatPanels ); }; @@ -293,6 +301,7 @@ editor.off( 'wp-toolbar-toggle', toggleAdvanced ); editor.off( 'setcontent wp-autoresize wp-toolbar-toggle', adjust ); editor.off( 'undo redo', mceScroll ); + editor.off( 'FullscreenStateChanged', mceFullscreenToggled ); $window.off( 'scroll.mce-float-panels' ); }; @@ -765,7 +774,7 @@ $editorWindow = $(), $editorIframe = $(), _isActive = window.getUserSetting( 'editor_expand', 'on' ) === 'on', - _isOn = _isActive ? !! parseInt( window.getUserSetting( 'dfw', '1' ), 10 ) : false, + _isOn = _isActive ? window.getUserSetting( 'post_dfw' ) === 'on' : false, traveledX = 0, traveledY = 0, buffer = 20, @@ -825,7 +834,7 @@ fadeOut(); - window.setUserSetting( 'dfw', '1' ); + window.setUserSetting( 'post_dfw', 'on' ); $document.trigger( 'dfw-on' ); } @@ -841,7 +850,7 @@ $editor.off( '.focus' ); - window.setUserSetting( 'dfw', '0' ); + window.setUserSetting( 'post_dfw', 'off' ); $document.trigger( 'dfw-off' ); } diff --git a/src/wp-includes/class-wp-editor.php b/src/wp-includes/class-wp-editor.php index 460d39b6ac..f0b34ca0ce 100644 --- a/src/wp-includes/class-wp-editor.php +++ b/src/wp-includes/class-wp-editor.php @@ -183,7 +183,7 @@ final class _WP_Editors { $wrap_class = 'wp-core-ui wp-editor-wrap ' . $switch_class; - if ( $set['dfw'] ) { + if ( $set['_content_editor_dfw'] ) { $wrap_class .= ' has-dfw'; } @@ -278,8 +278,9 @@ final class _WP_Editors { if ( $set['dfw'] ) $qtInit['buttons'] .= ',fullscreen'; - if ( $editor_id === 'content' && ! wp_is_mobile() ) + if ( $set['_content_editor_dfw'] ) { $qtInit['buttons'] .= ',dfw'; + } /** * Filter the Quicktags settings. @@ -549,14 +550,16 @@ final class _WP_Editors { $mce_buttons = apply_filters( 'teeny_mce_buttons', array('bold', 'italic', 'underline', 'blockquote', 'strikethrough', 'bullist', 'numlist', 'alignleft', 'aligncenter', 'alignright', 'undo', 'redo', 'link', 'unlink', 'fullscreen'), $editor_id ); $mce_buttons_2 = $mce_buttons_3 = $mce_buttons_4 = array(); } else { - $mce_buttons = array( 'bold', 'italic', 'strikethrough', 'bullist', 'numlist', 'blockquote', 'hr', 'alignleft', 'aligncenter', 'alignright', 'link', 'unlink', 'wp_more', 'spellchecker', 'wp_adv' ); + $mce_buttons = array( 'bold', 'italic', 'strikethrough', 'bullist', 'numlist', 'blockquote', 'hr', 'alignleft', 'aligncenter', 'alignright', 'link', 'unlink', 'wp_more', 'spellchecker' ); - if ( $editor_id ) { + if ( $set['_content_editor_dfw'] ) { $mce_buttons[] = 'dfw'; } else { $mce_buttons[] = 'fullscreen'; } + $mce_buttons[] = 'wp_adv'; + /** * Filter the first-row list of TinyMCE buttons (Visual tab). * diff --git a/src/wp-includes/css/editor.css b/src/wp-includes/css/editor.css index 21fac3ba29..5d759316be 100644 --- a/src/wp-includes/css/editor.css +++ b/src/wp-includes/css/editor.css @@ -1099,6 +1099,11 @@ i.mce-i-hr:before { margin: 5px 5px 0 0; } +.qt-fullscreen { + position: static; + margin: 2px; +} + @media screen and ( max-width: 782px ) { .mce-toolbar .mce-btn button, .qt-dfw { diff --git a/src/wp-includes/js/quicktags.js b/src/wp-includes/js/quicktags.js index ecb5a4104c..9b2f8c8d66 100644 --- a/src/wp-includes/js/quicktags.js +++ b/src/wp-includes/js/quicktags.js @@ -301,7 +301,9 @@ function edButton(id, display, tagStart, tagEnd, access) { ed.toolbar.innerHTML = html; ed.theButtons = theButtons; - window.jQuery && window.jQuery( document ).trigger( 'quicktags-init', [ ed ] ); + if ( typeof jQuery !== 'undefined' ) { + jQuery( document ).triggerHandler( 'quicktags-init', [ ed ] ); + } } t.buttonsInitDone = true; }; @@ -416,7 +418,7 @@ function edButton(id, display, tagStart, tagEnd, access) { dfw = ( wp = window.wp ) && wp.editor && wp.editor.dfw; if ( this.id === 'fullscreen' ) { - return ''; + return ''; } else if ( this.id === 'dfw' ) { active = dfw && dfw.isActive() ? '' : ' disabled="disabled"'; on = dfw && dfw.isOn() ? ' active' : ''; diff --git a/src/wp-includes/js/tinymce/plugins/wpfullscreen/plugin.js b/src/wp-includes/js/tinymce/plugins/wpfullscreen/plugin.js index f5d80e6576..9e0940e9e7 100644 --- a/src/wp-includes/js/tinymce/plugins/wpfullscreen/plugin.js +++ b/src/wp-includes/js/tinymce/plugins/wpfullscreen/plugin.js @@ -65,7 +65,7 @@ tinymce.PluginManager.add( 'wpfullscreen', function( editor ) { tooltip: 'Distraction Free Writing', shortcut: 'Alt+Shift+W', onclick: toggleFullscreen, - classes: 'wp-dfw btn widget' // This overwrites all classes on the container! + classes: 'wp-fullscreen btn widget' // This overwrites all classes on the container! }); editor.addMenuItem( 'wp_fullscreen', {