WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

PressThis: 

- Close the sidebar on moving the focus outside of it (by clicking or by "tabbing").
- Fix a (weird) structural CSS problem where clicks go through the sidebar when it is open.
- Clean up the JS a bit.
Fixes #31457.
Built from https://develop.svn.wordpress.org/trunk@31651


git-svn-id: http://core.svn.wordpress.org/trunk@31632 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Ozz 2015-03-06 22:57:26 +00:00
parent 47efbd9dcb
commit a27967aa05
8 changed files with 92 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
wp-admin/css/press-this-rtl.css
View File

@ -1219,7 +1219,8 @@ html {
}
.options-open.is-hidden,
.options-close.is-hidden {
.options-close.is-hidden,
.options-panel-back.is-hidden {
display: none;
}
@ -1798,11 +1799,20 @@ html {
width: 320px;
border-right: 1px solid #e5e5e5;
font-size: 14px;
/* Keeps background the full height of the screen */
/* Keeps background the full height of the screen, but only visually. Clicks go through. */
-webkit-box-shadow: -5001px 5000px 0 5000px #fff, -5000px 5000px 0 5000px #e5e5e5;
box-shadow: -5001px 5000px 0 5000px #fff, -5000px 5000px 0 5000px #e5e5e5;
}
.options-panel-back {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 320px;
outline: 0;
}
@media (max-width: 900px) {
.options-panel {
background: #fff;
@ -1832,6 +1842,10 @@ html {
-webkit-box-shadow: -5001px 5000px 0 5000px #fff;
box-shadow: -5001px 5000px 0 5000px #fff;
}
.options-panel-back {
width: 100%;
}
}
.post-options {

2
wp-admin/css/press-this-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

18
wp-admin/css/press-this.css
View File

@ -1219,7 +1219,8 @@ html {
}
.options-open.is-hidden,
.options-close.is-hidden {
.options-close.is-hidden,
.options-panel-back.is-hidden {
display: none;
}
@ -1798,11 +1799,20 @@ html {
width: 320px;
border-left: 1px solid #e5e5e5;
font-size: 14px;
/* Keeps background the full height of the screen */
/* Keeps background the full height of the screen, but only visually. Clicks go through. */
-webkit-box-shadow: 5001px 5000px 0 5000px #fff, 5000px 5000px 0 5000px #e5e5e5;
box-shadow: 5001px 5000px 0 5000px #fff, 5000px 5000px 0 5000px #e5e5e5;
}
.options-panel-back {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 320px;
outline: 0;
}
@media (max-width: 900px) {
.options-panel {
background: #fff;
@ -1832,6 +1842,10 @@ html {
-webkit-box-shadow: 5001px 5000px 0 5000px #fff;
box-shadow: 5001px 5000px 0 5000px #fff;
}
.options-panel-back {
width: 100%;
}
}
.post-options {

2
wp-admin/css/press-this.min.css vendored
View File

File diff suppressed because one or more lines are too long

7
wp-admin/includes/class-wp-press-this.php
View File

@ -791,7 +791,7 @@ class WP_Press_This {
) );
?>
</div>
<button type="button" class="button add-cat-submit"><?php _e( 'Add' ); ?></button>
<button type="button" class="add-cat-submit"><?php _e( 'Add' ); ?></button>
</div>
<?php } ?>
<div class="categories-search-wrapper">
@ -834,7 +834,7 @@ class WP_Press_This {
<label class="screen-reader-text" for="new-tag-post_tag"><?php _e( 'Tags' ); ?></label>
<p>
<input type="text" id="new-tag-post_tag" name="newtag[post_tag]" class="newtag form-input-tip" size="16" autocomplete="off" value="" />
<button type="button" class="button tagadd"><?php _e( 'Add' ); ?></button>
<button type="button" class="tagadd"><?php _e( 'Add' ); ?></button>
</p>
</div>
<p class="howto">
@ -1035,7 +1035,8 @@ $admin_body_classes = apply_filters( 'admin_body_class', '' );
</div>
</div>
<div class="options-panel is-off-screen is-hidden">
<div class="options-panel-back is-hidden" tabindex="-1"></div>
<div class="options-panel is-off-screen is-hidden" tabindex="-1">
<div class="post-options">
<?php if ( $supports_formats ) : ?>

113
wp-admin/js/press-this.js
View File

@ -7,6 +7,7 @@
var editor,
saveAlert = false,
textarea = document.createElement( 'textarea' ),
sidebarIsOpen = false,
siteConfig = window.wpPressThisConfig || {},
data = window.wpPressThisData || {},
smallestWidth = 128,
@ -17,6 +18,9 @@
suggestedContentStr = getSuggestedContent( data ),
hasSetFocus = false,
catsCache = [],
isOffScreen = 'is-off-screen',
isHidden = 'is-hidden',
offscreenHidden = isOffScreen + ' ' + isHidden,
transitionEndEvent = ( function() {
var style = document.documentElement.style;
@ -638,9 +642,7 @@
* Interactive navigation behavior for the options modal (post format, tags, categories)
*/
function monitorOptionsModal() {
var isOffScreen = 'is-off-screen',
isHidden = 'is-hidden',
$postOptions = $( '.post-options' ),
var $postOptions = $( '.post-options' ),
$postOption = $( '.post-option' ),
$settingModal = $( '.setting-modal' ),
$modalClose = $( '.modal-close' );
@ -649,16 +651,12 @@
var index = $( this ).index(),
$targetSettingModal = $settingModal.eq( index );
event.preventDefault();
$postOptions
.addClass( isOffScreen )
$postOptions.addClass( isOffScreen )
.one( transitionEndEvent, function() {
$( this ).addClass( isHidden );
} );
$targetSettingModal
.removeClass( isOffScreen + ' ' + isHidden )
$targetSettingModal.removeClass( offscreenHidden )
.one( transitionEndEvent, function() {
$( this ).find( '.modal-close' ).focus();
} );
@ -668,20 +666,15 @@
var $targetSettingModal = $( this ).parent(),
index = $targetSettingModal.index();
event.preventDefault();
$postOptions.removeClass( offscreenHidden );
$targetSettingModal.addClass( isOffScreen );
$postOptions
.removeClass( isOffScreen + ' ' + isHidden );
$targetSettingModal
.addClass( isOffScreen )
.one( transitionEndEvent, function() {
if ( transitionEndEvent ) {
$targetSettingModal.one( transitionEndEvent, function() {
$( this ).addClass( isHidden );
$postOption.eq( index - 1 ).focus();
} );
// For browser that don't support transitionend.
if ( ! transitionEndEvent ) {
} else {
setTimeout( function() {
$targetSettingModal.addClass( isHidden );
$postOption.eq( index - 1 ).focus();
@ -693,45 +686,31 @@
/**
* Interactive behavior for the sidebar toggle, to show the options modals
*/
function monitorSidebarToggle() {
var $optOpen = $( '.options-open' ),
$optClose = $( '.options-close' ),
$postOption = $( '.post-option' ),
$sidebar = $( '.options-panel' ),
$postActions = $( '.press-this-actions' ),
$scanbar = $( '#scanbar' ),
isOffScreen = 'is-off-screen',
isHidden = 'is-hidden',
ifOffHidden = isOffScreen + ' ' + isHidden;
function openSidebar() {
sidebarIsOpen = true;
$optOpen.on( 'click', function(){
$optOpen.addClass( isHidden );
$optClose.removeClass( isHidden );
$postActions.addClass( isHidden );
$scanbar.addClass( isHidden );
$( '.options-open, .press-this-actions, #scanbar' ).addClass( isHidden );
$( '.options-close, .options-panel-back' ).removeClass( isHidden );
$sidebar
.removeClass( ifOffHidden )
.one( 'transitionend', function() {
$postOption.eq( 0 ).focus();
} );
} );
$( '.options-panel' ).removeClass( offscreenHidden )
.one( 'transitionend', function() {
$( '.post-option:first' ).focus();
} );
}
function closeSidebar() {
sidebarIsOpen = false;
$optClose.on( 'click', function(){
$optClose.addClass( isHidden );
$optOpen.removeClass( isHidden );
$postActions.removeClass( isHidden );
$scanbar.removeClass( isHidden );
$( '.options-close, .options-panel-back' ).addClass( isHidden );
$( '.options-open, .press-this-actions, #scanbar' ).removeClass( isHidden );
$sidebar
.addClass( isOffScreen )
.one( 'transitionend', function() {
$( this ).addClass( isHidden );
// Reset to options list
$( '.post-options' ).removeClass( ifOffHidden );
$( '.setting-modal').addClass( ifOffHidden );
} );
} );
$( '.options-panel' ).addClass( isOffScreen )
.one( 'transitionend', function() {
$( this ).addClass( isHidden );
// Reset to options list
$( '.post-options' ).removeClass( offscreenHidden );
$( '.setting-modal').addClass( offscreenHidden );
} );
}
/**
@ -787,9 +766,27 @@
} );
monitorOptionsModal();
monitorSidebarToggle();
monitorPlaceholder();
$( '.options-open' ).on( 'click.press-this', openSidebar );
$( '.options-close' ).on( 'click.press-this', closeSidebar );
// Close the sidebar when focus moves outside of it.
$( '.options-panel, .options-panel-back' ).on( 'focusout.press-this', function() {
setTimeout( function() {
var node = document.activeElement,
$node = $( node );
if ( sidebarIsOpen && node && ! $node.hasClass( 'options-panel-back' ) &&
( node.nodeName === 'BODY' ||
( ! $node.closest( '.options-panel' ).length &&
! $node.closest( '.options-open' ).length ) ) ) {
closeSidebar();
}
}, 50 );
});
$( '#post-formats-select input' ).on( 'change', function() {
var $this = $( this );
@ -798,12 +795,6 @@
}
} );
// Needs more work, doesn't detect when the other JS changes the value of #tax-input-post_tag
$( '#tax-input-post_tag' ).on( 'change', function() {
var val = $( this ).val();
$( '#post-option-tags' ).text( ( val ) ? val.replace( /,([^\s])/g, ', $1' ) : '' );
} );
$( window ).on( 'beforeunload.press-this', function() {
if ( saveAlert || ( editor && editor.isDirty() ) ) {
return __( 'saveAlert' );

2
wp-admin/js/press-this.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
wp-includes/version.php
View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.2-alpha-31650';
$wp_version = '4.2-alpha-31651';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.