Media: make the Image Editor usable with a keyboard.
For accessibility, all interactive controls must be operable from the keyboard. Replaces `<div>`s used as UI controls with buttons. Groups some logically-related form elements. Fixes #28864. Built from https://develop.svn.wordpress.org/trunk@36223 git-svn-id: http://core.svn.wordpress.org/trunk@36190 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia
parent
1f9c29d98f
commit
ae1575bd80
|
|
@ -274,11 +274,11 @@ a:active {
|
|||
a:focus,
|
||||
a:focus .media-icon img {
|
||||
color: #124964;
|
||||
-webkit-box-shadow:
|
||||
0 0 0 1px #5b9dd9,
|
||||
-webkit-box-shadow:
|
||||
0 0 0 1px #5b9dd9,
|
||||
0 0 2px 1px rgba(30, 140, 190, .8);
|
||||
box-shadow:
|
||||
0 0 0 1px #5b9dd9,
|
||||
box-shadow:
|
||||
0 0 0 1px #5b9dd9,
|
||||
0 0 2px 1px rgba(30, 140, 190, .8);
|
||||
}
|
||||
|
||||
|
|
@ -1670,7 +1670,7 @@ form.upgrade .hint {
|
|||
}
|
||||
|
||||
.screen-options + .screen-options {
|
||||
margin-top: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.metabox-prefs .submit {
|
||||
|
|
@ -2952,10 +2952,10 @@ img {
|
|||
|
||||
.js .postbox .handlediv:focus .toggle-indicator:before {
|
||||
-webkit-box-shadow:
|
||||
0 0 0 1px #5b9dd9,
|
||||
0 0 0 1px #5b9dd9,
|
||||
0 0 2px 1px rgba(30, 140, 190, .8);
|
||||
box-shadow:
|
||||
0 0 0 1px #5b9dd9,
|
||||
box-shadow:
|
||||
0 0 0 1px #5b9dd9,
|
||||
0 0 2px 1px rgba(30, 140, 190, .8);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -274,11 +274,11 @@ a:active {
|
|||
a:focus,
|
||||
a:focus .media-icon img {
|
||||
color: #124964;
|
||||
-webkit-box-shadow:
|
||||
0 0 0 1px #5b9dd9,
|
||||
-webkit-box-shadow:
|
||||
0 0 0 1px #5b9dd9,
|
||||
0 0 2px 1px rgba(30, 140, 190, .8);
|
||||
box-shadow:
|
||||
0 0 0 1px #5b9dd9,
|
||||
box-shadow:
|
||||
0 0 0 1px #5b9dd9,
|
||||
0 0 2px 1px rgba(30, 140, 190, .8);
|
||||
}
|
||||
|
||||
|
|
@ -1670,7 +1670,7 @@ form.upgrade .hint {
|
|||
}
|
||||
|
||||
.screen-options + .screen-options {
|
||||
margin-top: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.metabox-prefs .submit {
|
||||
|
|
@ -2952,10 +2952,10 @@ img {
|
|||
|
||||
.js .postbox .handlediv:focus .toggle-indicator:before {
|
||||
-webkit-box-shadow:
|
||||
0 0 0 1px #5b9dd9,
|
||||
0 0 0 1px #5b9dd9,
|
||||
0 0 2px 1px rgba(30, 140, 190, .8);
|
||||
box-shadow:
|
||||
0 0 0 1px #5b9dd9,
|
||||
box-shadow:
|
||||
0 0 0 1px #5b9dd9,
|
||||
0 0 2px 1px rgba(30, 140, 190, .8);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -640,7 +640,7 @@ border color while dragging a file over the uploader drop area */
|
|||
.edit-attachment-frame .edit-media-header .left,
|
||||
.edit-attachment-frame .edit-media-header .right {
|
||||
cursor: pointer;
|
||||
color: #777;
|
||||
color: #72777c;
|
||||
background-color: transparent;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
|
|
@ -650,7 +650,7 @@ border color while dragging a file over the uploader drop area */
|
|||
border: 0;
|
||||
border-right: 1px solid #ddd;
|
||||
-webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
|
||||
transition: color .1s ease-in-out, background .1s ease-in-out;
|
||||
transition: color .1s ease-in-out, background .1s ease-in-out;
|
||||
}
|
||||
|
||||
.upload-php .media-modal-close {
|
||||
|
|
@ -837,10 +837,16 @@ border color while dragging a file over the uploader drop area */
|
|||
|
||||
.imgedit-wrap {
|
||||
position: relative;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.imgedit-settings p {
|
||||
margin: 8px 0 0;
|
||||
.imgedit-settings p,
|
||||
.imgedit-settings fieldset {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.imgedit-settings legend {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.describe .imgedit-wrap .imgedit-settings {
|
||||
|
|
@ -853,13 +859,11 @@ border color while dragging a file over the uploader drop area */
|
|||
|
||||
.wp_attachment_holder .imgedit-wrap > div {
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
|
||||
padding-left: 16px;
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
padding: 3px 0 0 16px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.wp_attachment_holder .imgedit-wrap .imgedit-settings {
|
||||
|
|
@ -908,7 +912,6 @@ border color while dragging a file over the uploader drop area */
|
|||
color: grey;
|
||||
}
|
||||
|
||||
.wp_attachment_image,
|
||||
.A1B1 {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -928,41 +931,39 @@ border color while dragging a file over the uploader drop area */
|
|||
}
|
||||
|
||||
.imgedit-menu {
|
||||
margin: 0 0 12px;
|
||||
min-width: 300px;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.imgedit-menu div {
|
||||
.imgedit-menu .note-no-rotate {
|
||||
clear: both;
|
||||
margin: 0;
|
||||
padding: 1em 0 0;
|
||||
}
|
||||
|
||||
.image-editor .imgedit-menu .button {
|
||||
float: right;
|
||||
width: 32px;
|
||||
border: 1px solid #d5d5d5;
|
||||
background: #f1f1f1;
|
||||
margin: 0 0 0 8px;
|
||||
height: 32px;
|
||||
margin: 0 0 0 8px;
|
||||
padding: 0;
|
||||
background: #f1f1f1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
line-height: 28px;
|
||||
color: #777;
|
||||
cursor: pointer;
|
||||
line-height: 16px;
|
||||
color: #72777c;
|
||||
}
|
||||
|
||||
.imgedit-menu div:before {
|
||||
.imgedit-menu .button:before {
|
||||
font: normal 20px/1 dashicons;
|
||||
speak: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.imgedit-menu div:hover {
|
||||
border-color: #c1c1c1;
|
||||
background-color: #eaeaea;
|
||||
color: #32373c;
|
||||
}
|
||||
|
||||
.imgedit-menu div.disabled {
|
||||
.imgedit-menu .button.disabled {
|
||||
border-color: #ccc;
|
||||
background-color: #ddd;
|
||||
color: #777;
|
||||
color: #72777c;
|
||||
filter: alpha(opacity=50);
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
|
|
@ -1028,12 +1029,17 @@ border color while dragging a file over the uploader drop area */
|
|||
margin: 0 3px 0 8px;
|
||||
}
|
||||
|
||||
.imgedit-applyto img {
|
||||
margin: 0 0 0 8px;
|
||||
.imgedit-thumbnail-preview {
|
||||
margin: 10px 0 0 8px;
|
||||
}
|
||||
|
||||
.imgedit-thumbnail-preview-caption {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#poststuff .imgedit-group-top h3, /* Back-compat for pre-4.4 */
|
||||
#poststuff .imgedit-group-top h2 {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
|
|
@ -1046,8 +1052,8 @@ border color while dragging a file over the uploader drop area */
|
|||
}
|
||||
|
||||
.imgedit-applyto .imgedit-label {
|
||||
padding: 2px 0 0;
|
||||
display: block;
|
||||
padding: .5em 0 0;
|
||||
}
|
||||
|
||||
.imgedit-help {
|
||||
|
|
@ -1055,8 +1061,31 @@ border color while dragging a file over the uploader drop area */
|
|||
font-style: italic;
|
||||
}
|
||||
|
||||
a.imgedit-help-toggle {
|
||||
text-decoration: none;
|
||||
/* higher specificity than buttons */
|
||||
.image-editor .imgedit-settings .imgedit-help-toggle,
|
||||
.image-editor .imgedit-settings .imgedit-help-toggle:hover,
|
||||
.image-editor .imgedit-settings .imgedit-help-toggle:active {
|
||||
border: 1px solid transparent;
|
||||
margin: -1px -1px 0 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: #0074a2;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.image-editor .imgedit-settings .imgedit-help-toggle:focus {
|
||||
color: #0074a2;
|
||||
border-color: #5b9dd9;
|
||||
outline: none;
|
||||
-webkit-box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
|
||||
box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
|
||||
}
|
||||
|
||||
.form-table td.imgedit-response {
|
||||
|
|
@ -1073,6 +1102,8 @@ a.imgedit-help-toggle {
|
|||
|
||||
.imgedit-wrap .nowrap {
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
span.imgedit-scale-warn {
|
||||
|
|
@ -1083,11 +1114,36 @@ span.imgedit-scale-warn {
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.imgedit-save-target {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.imgedit-group {
|
||||
margin-bottom: 8px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.imgedit-settings .imgedit-scale input[type="text"],
|
||||
.imgedit-settings .imgedit-crop-ratio input[type="text"],
|
||||
.imgedit-settings .imgedit-crop-sel input[type="text"] {
|
||||
width: 50px;
|
||||
font-size: 14px;
|
||||
padding: 3px 5px;
|
||||
}
|
||||
|
||||
.imgedit-separator {
|
||||
display: inline-block;
|
||||
width: 7px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
font-size: 13px;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.imgedit-settings .imgedit-scale .button {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
audio, video {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
|
|
@ -1131,6 +1187,18 @@ audio, video {
|
|||
.media-upload-form .media-item .error {
|
||||
padding: 10px 12px 10px 0;
|
||||
}
|
||||
|
||||
.imgedit-settings .imgedit-scale input[type="text"],
|
||||
.imgedit-settings .imgedit-crop-ratio input[type="text"],
|
||||
.imgedit-settings .imgedit-crop-sel input[type="text"] {
|
||||
width: 60px;
|
||||
font-size: 16px;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.imgedit-applyto .imgedit-label {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -640,7 +640,7 @@ border color while dragging a file over the uploader drop area */
|
|||
.edit-attachment-frame .edit-media-header .left,
|
||||
.edit-attachment-frame .edit-media-header .right {
|
||||
cursor: pointer;
|
||||
color: #777;
|
||||
color: #72777c;
|
||||
background-color: transparent;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
|
|
@ -650,7 +650,7 @@ border color while dragging a file over the uploader drop area */
|
|||
border: 0;
|
||||
border-left: 1px solid #ddd;
|
||||
-webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
|
||||
transition: color .1s ease-in-out, background .1s ease-in-out;
|
||||
transition: color .1s ease-in-out, background .1s ease-in-out;
|
||||
}
|
||||
|
||||
.upload-php .media-modal-close {
|
||||
|
|
@ -837,10 +837,16 @@ border color while dragging a file over the uploader drop area */
|
|||
|
||||
.imgedit-wrap {
|
||||
position: relative;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.imgedit-settings p {
|
||||
margin: 8px 0 0;
|
||||
.imgedit-settings p,
|
||||
.imgedit-settings fieldset {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.imgedit-settings legend {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.describe .imgedit-wrap .imgedit-settings {
|
||||
|
|
@ -853,13 +859,11 @@ border color while dragging a file over the uploader drop area */
|
|||
|
||||
.wp_attachment_holder .imgedit-wrap > div {
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
|
||||
padding-right: 16px;
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
padding: 3px 16px 0 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.wp_attachment_holder .imgedit-wrap .imgedit-settings {
|
||||
|
|
@ -908,7 +912,6 @@ border color while dragging a file over the uploader drop area */
|
|||
color: grey;
|
||||
}
|
||||
|
||||
.wp_attachment_image,
|
||||
.A1B1 {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -928,41 +931,39 @@ border color while dragging a file over the uploader drop area */
|
|||
}
|
||||
|
||||
.imgedit-menu {
|
||||
margin: 0 0 12px;
|
||||
min-width: 300px;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.imgedit-menu div {
|
||||
.imgedit-menu .note-no-rotate {
|
||||
clear: both;
|
||||
margin: 0;
|
||||
padding: 1em 0 0;
|
||||
}
|
||||
|
||||
.image-editor .imgedit-menu .button {
|
||||
float: left;
|
||||
width: 32px;
|
||||
border: 1px solid #d5d5d5;
|
||||
background: #f1f1f1;
|
||||
margin: 0 8px 0 0;
|
||||
height: 32px;
|
||||
margin: 0 8px 0 0;
|
||||
padding: 0;
|
||||
background: #f1f1f1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
line-height: 28px;
|
||||
color: #777;
|
||||
cursor: pointer;
|
||||
line-height: 16px;
|
||||
color: #72777c;
|
||||
}
|
||||
|
||||
.imgedit-menu div:before {
|
||||
.imgedit-menu .button:before {
|
||||
font: normal 20px/1 dashicons;
|
||||
speak: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.imgedit-menu div:hover {
|
||||
border-color: #c1c1c1;
|
||||
background-color: #eaeaea;
|
||||
color: #32373c;
|
||||
}
|
||||
|
||||
.imgedit-menu div.disabled {
|
||||
.imgedit-menu .button.disabled {
|
||||
border-color: #ccc;
|
||||
background-color: #ddd;
|
||||
color: #777;
|
||||
color: #72777c;
|
||||
filter: alpha(opacity=50);
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
|
|
@ -1028,12 +1029,17 @@ border color while dragging a file over the uploader drop area */
|
|||
margin: 0 8px 0 3px;
|
||||
}
|
||||
|
||||
.imgedit-applyto img {
|
||||
margin: 0 8px 0 0;
|
||||
.imgedit-thumbnail-preview {
|
||||
margin: 10px 8px 0 0;
|
||||
}
|
||||
|
||||
.imgedit-thumbnail-preview-caption {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#poststuff .imgedit-group-top h3, /* Back-compat for pre-4.4 */
|
||||
#poststuff .imgedit-group-top h2 {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
|
|
@ -1046,8 +1052,8 @@ border color while dragging a file over the uploader drop area */
|
|||
}
|
||||
|
||||
.imgedit-applyto .imgedit-label {
|
||||
padding: 2px 0 0;
|
||||
display: block;
|
||||
padding: .5em 0 0;
|
||||
}
|
||||
|
||||
.imgedit-help {
|
||||
|
|
@ -1055,8 +1061,31 @@ border color while dragging a file over the uploader drop area */
|
|||
font-style: italic;
|
||||
}
|
||||
|
||||
a.imgedit-help-toggle {
|
||||
text-decoration: none;
|
||||
/* higher specificity than buttons */
|
||||
.image-editor .imgedit-settings .imgedit-help-toggle,
|
||||
.image-editor .imgedit-settings .imgedit-help-toggle:hover,
|
||||
.image-editor .imgedit-settings .imgedit-help-toggle:active {
|
||||
border: 1px solid transparent;
|
||||
margin: -1px 0 0 -1px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: #0074a2;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.image-editor .imgedit-settings .imgedit-help-toggle:focus {
|
||||
color: #0074a2;
|
||||
border-color: #5b9dd9;
|
||||
outline: none;
|
||||
-webkit-box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
|
||||
box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
|
||||
}
|
||||
|
||||
.form-table td.imgedit-response {
|
||||
|
|
@ -1073,6 +1102,8 @@ a.imgedit-help-toggle {
|
|||
|
||||
.imgedit-wrap .nowrap {
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
span.imgedit-scale-warn {
|
||||
|
|
@ -1083,11 +1114,36 @@ span.imgedit-scale-warn {
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.imgedit-save-target {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.imgedit-group {
|
||||
margin-bottom: 8px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.imgedit-settings .imgedit-scale input[type="text"],
|
||||
.imgedit-settings .imgedit-crop-ratio input[type="text"],
|
||||
.imgedit-settings .imgedit-crop-sel input[type="text"] {
|
||||
width: 50px;
|
||||
font-size: 14px;
|
||||
padding: 3px 5px;
|
||||
}
|
||||
|
||||
.imgedit-separator {
|
||||
display: inline-block;
|
||||
width: 7px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
font-size: 13px;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.imgedit-settings .imgedit-scale .button {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
audio, video {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
|
|
@ -1131,6 +1187,18 @@ audio, video {
|
|||
.media-upload-form .media-item .error {
|
||||
padding: 10px 0 10px 12px;
|
||||
}
|
||||
|
||||
.imgedit-settings .imgedit-scale input[type="text"],
|
||||
.imgedit-settings .imgedit-crop-ratio input[type="text"],
|
||||
.imgedit-settings .imgedit-crop-sel input[type="text"] {
|
||||
width: 60px;
|
||||
font-size: 16px;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.imgedit-applyto .imgedit-label {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -40,13 +40,14 @@ function wp_image_editor($post_id, $msg = false) {
|
|||
}
|
||||
|
||||
?>
|
||||
<div class="imgedit-wrap">
|
||||
<div class="imgedit-wrap wp-clearfix">
|
||||
<div id="imgedit-panel-<?php echo $post_id; ?>">
|
||||
|
||||
<div class="imgedit-settings">
|
||||
<div class="imgedit-group">
|
||||
<div class="imgedit-group-top">
|
||||
<h2><?php _e( 'Scale Image' ); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h2>
|
||||
<h2><?php _e( 'Scale Image' ); ?></h2>
|
||||
<button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Scale Image Help' ); ?></span></button>
|
||||
<div class="imgedit-help">
|
||||
<p><?php _e('You can proportionally scale the original image. For best results, scaling should be done before you crop, flip, or rotate. Images can only be scaled down, not up.'); ?></p>
|
||||
</div>
|
||||
|
|
@ -54,9 +55,22 @@ function wp_image_editor($post_id, $msg = false) {
|
|||
<p><?php printf( __('Original dimensions %s'), $meta['width'] . ' × ' . $meta['height'] ); ?></p>
|
||||
<?php endif ?>
|
||||
<div class="imgedit-submit">
|
||||
<span class="nowrap"><input type="text" id="imgedit-scale-width-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1)" style="width:4em;" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" /> × <input type="text" id="imgedit-scale-height-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0)" style="width:4em;" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
|
||||
<span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span></span>
|
||||
<input type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'scale')" class="button button-primary" value="<?php esc_attr_e( 'Scale' ); ?>" />
|
||||
|
||||
<fieldset class="imgedit-scale">
|
||||
<legend><?php _e( 'New dimensions:' ); ?></legend>
|
||||
<div class="nowrap">
|
||||
<label><span class="screen-reader-text"><?php _e( 'scale width' ); ?></span>
|
||||
<input type="text" id="imgedit-scale-width-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1)" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
|
||||
</label>
|
||||
<span class="imgedit-separator">×</span>
|
||||
<label><span class="screen-reader-text"><?php _e( 'scale height' ); ?></span>
|
||||
<input type="text" id="imgedit-scale-height-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0)" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
|
||||
</label>
|
||||
<span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span>
|
||||
<input id="imgedit-scale-button" type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'scale')" class="button button-primary" value="<?php esc_attr_e( 'Scale' ); ?>" />
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -65,7 +79,7 @@ function wp_image_editor($post_id, $msg = false) {
|
|||
|
||||
<div class="imgedit-group">
|
||||
<div class="imgedit-group-top">
|
||||
<h2><a onclick="imageEdit.toggleHelp(this);return false;" href="#"><?php _e('Restore Original Image'); ?> <span class="dashicons dashicons-arrow-down imgedit-help-toggle"></span></a></h2>
|
||||
<h2><button type="button" onclick="imageEdit.toggleHelp(this);" class="button-link"><?php _e( 'Restore Original Image' ); ?> <span class="dashicons dashicons-arrow-down imgedit-help-toggle"></span></button></h2>
|
||||
<div class="imgedit-help">
|
||||
<p><?php _e('Discard any changes and restore the original image.');
|
||||
|
||||
|
|
@ -84,7 +98,8 @@ function wp_image_editor($post_id, $msg = false) {
|
|||
|
||||
<div class="imgedit-group">
|
||||
<div class="imgedit-group-top">
|
||||
<h2><?php _e( 'Image Crop' ); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h2>
|
||||
<h2><?php _e( 'Image Crop' ); ?></h2>
|
||||
<button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Image Crop Help' ); ?></span></button>
|
||||
|
||||
<div class="imgedit-help">
|
||||
<p><?php _e('To crop the image, click on it and drag to make your selection.'); ?></p>
|
||||
|
|
@ -97,23 +112,32 @@ function wp_image_editor($post_id, $msg = false) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<?php _e('Aspect ratio:'); ?>
|
||||
<span class="nowrap">
|
||||
<input type="text" id="imgedit-crop-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" style="width:3em;" />
|
||||
:
|
||||
<input type="text" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" style="width:3em;" />
|
||||
</span>
|
||||
</p>
|
||||
<fieldset class="imgedit-crop-ratio">
|
||||
<legend><?php _e( 'Aspect ratio:' ); ?></legend>
|
||||
<div class="nowrap">
|
||||
<label><span class="screen-reader-text"><?php _e( 'crop ratio width' ); ?></span>
|
||||
<input type="text" id="imgedit-crop-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" />
|
||||
</label>
|
||||
<span class="imgedit-separator">:</span>
|
||||
<label><span class="screen-reader-text"><?php _e( 'crop ratio height' ); ?></span>
|
||||
<input type="text" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" />
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel">
|
||||
<legend><?php _e( 'Selection:' ); ?></legend>
|
||||
<div class="nowrap">
|
||||
<label><span class="screen-reader-text"><?php _e( 'selection width' ); ?></span>
|
||||
<input type="text" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" />
|
||||
</label>
|
||||
<span class="imgedit-separator">×</span>
|
||||
<label><span class="screen-reader-text"><?php _e( 'selection height' ); ?></span>
|
||||
<input type="text" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" />
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<p id="imgedit-crop-sel-<?php echo $post_id; ?>">
|
||||
<?php _e('Selection:'); ?>
|
||||
<span class="nowrap">
|
||||
<input type="text" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" style="width:4em;" />
|
||||
×
|
||||
<input type="text" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" style="width:4em;" />
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<?php if ( $thumb && $sub_sizes ) {
|
||||
|
|
@ -122,17 +146,19 @@ function wp_image_editor($post_id, $msg = false) {
|
|||
|
||||
<div class="imgedit-group imgedit-applyto">
|
||||
<div class="imgedit-group-top">
|
||||
<h2><?php _e( 'Thumbnail Settings' ); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h2>
|
||||
<h2><?php _e( 'Thumbnail Settings' ); ?></h2>
|
||||
<button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Thumbnail Settings Help' ); ?></span></button>
|
||||
<p class="imgedit-help"><?php _e('You can edit the image while preserving the thumbnail. For example, you may wish to have a square thumbnail that displays just a section of the image.'); ?></p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<figure class="imgedit-thumbnail-preview">
|
||||
<img src="<?php echo $thumb['url']; ?>" width="<?php echo $thumb_img[0]; ?>" height="<?php echo $thumb_img[1]; ?>" class="imgedit-size-preview" alt="" draggable="false" />
|
||||
<br /><?php _e('Current thumbnail'); ?>
|
||||
</p>
|
||||
<figcaption class="imgedit-thumbnail-preview-caption"><?php _e( 'Current thumbnail' ); ?></figcaption>
|
||||
</figure>
|
||||
|
||||
<p id="imgedit-save-target-<?php echo $post_id; ?>">
|
||||
<strong><?php _e('Apply changes to:'); ?></strong><br />
|
||||
<div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target">
|
||||
<fieldset>
|
||||
<legend><strong><?php _e( 'Apply changes to:' ); ?></strong></legend>
|
||||
|
||||
<label class="imgedit-label">
|
||||
<input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" />
|
||||
|
|
@ -145,35 +171,38 @@ function wp_image_editor($post_id, $msg = false) {
|
|||
<label class="imgedit-label">
|
||||
<input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
|
||||
<?php _e('All sizes except thumbnail'); ?></label>
|
||||
</p>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php } ?>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="imgedit-panel-content">
|
||||
<div class="imgedit-panel-content wp-clearfix">
|
||||
<?php echo $note; ?>
|
||||
<div class="imgedit-menu">
|
||||
<div onclick="imageEdit.crop(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-crop disabled" title="<?php esc_attr_e( 'Crop' ); ?>"></div><?php
|
||||
<div class="imgedit-menu wp-clearfix">
|
||||
<button type="button" onclick="imageEdit.crop(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-crop button disabled" disabled><span class="screen-reader-text"><?php esc_html_e( 'Crop' ); ?></span></button><?php
|
||||
|
||||
// On some setups GD library does not provide imagerotate() - Ticket #11536
|
||||
if ( wp_image_editor_supports( array( 'mime_type' => get_post_mime_type( $post_id ), 'methods' => array( 'rotate' ) ) ) ) { ?>
|
||||
<div class="imgedit-rleft" onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)" title="<?php esc_attr_e( 'Rotate counter-clockwise' ); ?>"></div>
|
||||
<div class="imgedit-rright" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)" title="<?php esc_attr_e( 'Rotate clockwise' ); ?>"></div>
|
||||
<?php } else {
|
||||
$note_no_rotate = esc_attr__('Image rotation is not supported by your web host.');
|
||||
if ( wp_image_editor_supports( array( 'mime_type' => get_post_mime_type( $post_id ), 'methods' => array( 'rotate' ) ) ) ) {
|
||||
$note_no_rotate = '';
|
||||
?>
|
||||
<div class="imgedit-rleft disabled" title="<?php echo $note_no_rotate; ?>"></div>
|
||||
<div class="imgedit-rright disabled" title="<?php echo $note_no_rotate; ?>"></div>
|
||||
<button type="button" class="imgedit-rleft button" onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)"><span class="screen-reader-text"><?php esc_html_e( 'Rotate counter-clockwise' ); ?></span></button>
|
||||
<button type="button" class="imgedit-rright button" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)"><span class="screen-reader-text"><?php esc_html_e( 'Rotate clockwise' ); ?></span></button>
|
||||
<?php } else {
|
||||
$note_no_rotate = '<p class="note-no-rotate"><em>' . __( 'Image rotation is not supported by your web host.' ) . '</em></p>';
|
||||
?>
|
||||
<button type="button" class="imgedit-rleft button disabled" disabled></button>
|
||||
<button type="button" class="imgedit-rright button disabled" disabled></button>
|
||||
<?php } ?>
|
||||
|
||||
<div onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv" title="<?php esc_attr_e( 'Flip vertically' ); ?>"></div>
|
||||
<div onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph" title="<?php esc_attr_e( 'Flip horizontally' ); ?>"></div>
|
||||
<button type="button" onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv button"><span class="screen-reader-text"><?php esc_html_e( 'Flip vertically' ); ?></span></button>
|
||||
<button type="button" onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph button"><span class="screen-reader-text"><?php esc_html_e( 'Flip horizontally' ); ?></span></button>
|
||||
|
||||
<div id="image-undo-<?php echo $post_id; ?>" onclick="imageEdit.undo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-undo disabled" title="<?php esc_attr_e( 'Undo' ); ?>"></div>
|
||||
<div id="image-redo-<?php echo $post_id; ?>" onclick="imageEdit.redo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-redo disabled" title="<?php esc_attr_e( 'Redo' ); ?>"></div>
|
||||
<br class="clear" />
|
||||
<button type="button" id="image-undo-<?php echo $post_id; ?>" onclick="imageEdit.undo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-undo button disabled" disabled><span class="screen-reader-text"><?php esc_html_e( 'Undo' ); ?></span></button>
|
||||
<button type="button" id="image-redo-<?php echo $post_id; ?>" onclick="imageEdit.redo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-redo button disabled" disabled><span class="screen-reader-text"><?php esc_html_e( 'Redo' ); ?></span></button>
|
||||
<?php echo $note_no_rotate; ?>
|
||||
</div>
|
||||
|
||||
<input type="hidden" id="imgedit-sizer-<?php echo $post_id; ?>" value="<?php echo $sizer; ?>" />
|
||||
|
|
@ -184,11 +213,11 @@ function wp_image_editor($post_id, $msg = false) {
|
|||
<input type="hidden" id="imgedit-y-<?php echo $post_id; ?>" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
|
||||
|
||||
<div id="imgedit-crop-<?php echo $post_id; ?>" class="imgedit-crop-wrap">
|
||||
<img id="image-preview-<?php echo $post_id; ?>" onload="imageEdit.imgLoaded('<?php echo $post_id; ?>')" src="<?php echo admin_url( 'admin-ajax.php', 'relative' ); ?>?action=imgedit-preview&_ajax_nonce=<?php echo $nonce; ?>&postid=<?php echo $post_id; ?>&rand=<?php echo rand(1, 99999); ?>" alt="<?php esc_attr_e( 'Image preview' ); ?>" />
|
||||
<img id="image-preview-<?php echo $post_id; ?>" onload="imageEdit.imgLoaded('<?php echo $post_id; ?>')" src="<?php echo admin_url( 'admin-ajax.php', 'relative' ); ?>?action=imgedit-preview&_ajax_nonce=<?php echo $nonce; ?>&postid=<?php echo $post_id; ?>&rand=<?php echo rand(1, 99999); ?>" alt="" />
|
||||
</div>
|
||||
|
||||
<div class="imgedit-submit">
|
||||
<input type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button" value="<?php esc_attr_e( 'Cancel' ); ?>" />
|
||||
<input type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button imgedit-cancel-btn" value="<?php esc_attr_e( 'Cancel' ); ?>" />
|
||||
<input type="button" onclick="imageEdit.save(<?php echo "$post_id, '$nonce'"; ?>)" disabled="disabled" class="button button-primary imgedit-submit-btn" value="<?php esc_attr_e( 'Save' ); ?>" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -562,8 +591,9 @@ function stream_preview_image( $post_id ) {
|
|||
|
||||
$img = wp_get_image_editor( _load_image_to_edit_path( $post_id ) );
|
||||
|
||||
if ( is_wp_error( $img ) )
|
||||
return false;
|
||||
if ( is_wp_error( $img ) ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
$changes = !empty($_REQUEST['history']) ? json_decode( wp_unslash($_REQUEST['history']) ) : null;
|
||||
if ( $changes )
|
||||
|
|
|
|||
|
|
@ -2701,7 +2701,7 @@ function edit_form_image_editor( $post ) {
|
|||
$alt_text = get_post_meta( $post->ID, '_wp_attachment_image_alt', true );
|
||||
|
||||
$att_url = wp_get_attachment_url( $post->ID ); ?>
|
||||
<div class="wp_attachment_holder">
|
||||
<div class="wp_attachment_holder wp-clearfix">
|
||||
<?php
|
||||
if ( wp_attachment_is_image( $post->ID ) ) :
|
||||
$image_edit_button = '';
|
||||
|
|
@ -2713,7 +2713,7 @@ function edit_form_image_editor( $post ) {
|
|||
|
||||
<div class="imgedit-response" id="imgedit-response-<?php echo $attachment_id; ?>"></div>
|
||||
|
||||
<div<?php if ( $open ) echo ' style="display:none"'; ?> class="wp_attachment_image" id="media-head-<?php echo $attachment_id; ?>">
|
||||
<div<?php if ( $open ) echo ' style="display:none"'; ?> class="wp_attachment_image wp-clearfix" id="media-head-<?php echo $attachment_id; ?>">
|
||||
<p id="thumbnail-head-<?php echo $attachment_id; ?>"><img class="thumbnail" src="<?php echo set_url_scheme( $thumb_url[0] ); ?>" style="max-width:100%" alt="" /></p>
|
||||
<p><?php echo $image_edit_button; ?></p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,13 +11,17 @@ var imageEdit = window.imageEdit = {
|
|||
return f | 0;
|
||||
},
|
||||
|
||||
setDisabled : function(el, s) {
|
||||
setDisabled : function( el, s ) {
|
||||
/*
|
||||
* `el` can be a single form element or a fieldset. Before #28864, the disabled state on
|
||||
* some text fields was handled targeting $('input', el). Now we need to handle the
|
||||
* disabled state on buttons too so we can just target `el` regardless if it's a single
|
||||
* element or a fieldset because when a fieldset is disabled, its descendants are disabled too.
|
||||
*/
|
||||
if ( s ) {
|
||||
el.removeClass('disabled');
|
||||
$('input', el).removeAttr('disabled');
|
||||
el.removeClass( 'disabled' ).prop( 'disabled', false );
|
||||
} else {
|
||||
el.addClass('disabled');
|
||||
$('input', el).prop('disabled', true);
|
||||
el.addClass( 'disabled' ).prop( 'disabled', true );
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -63,7 +67,11 @@ var imageEdit = window.imageEdit = {
|
|||
},
|
||||
|
||||
toggleHelp : function(el) {
|
||||
$( el ).parents( '.imgedit-group-top' ).toggleClass( 'imgedit-help-toggled' ).find( '.imgedit-help' ).slideToggle( 'fast' );
|
||||
var $el = $( el );
|
||||
$el
|
||||
.attr( 'aria-expanded', 'false' === $el.attr( 'aria-expanded' ) ? 'true' : 'false' )
|
||||
.parents( '.imgedit-group-top' ).toggleClass( 'imgedit-help-toggled' ).find( '.imgedit-help' ).slideToggle( 'fast' );
|
||||
|
||||
return false;
|
||||
},
|
||||
|
||||
|
|
@ -166,8 +174,25 @@ var imageEdit = window.imageEdit = {
|
|||
};
|
||||
|
||||
img = $( '<img id="image-preview-' + postid + '" alt="" />' )
|
||||
.on('load', function() {
|
||||
var max1, max2, parent = $('#imgedit-crop-' + postid), t = imageEdit;
|
||||
.on( 'load', { history: data.history }, function( event ) {
|
||||
var max1, max2,
|
||||
parent = $( '#imgedit-crop-' + postid ),
|
||||
t = imageEdit,
|
||||
historyObj;
|
||||
|
||||
if ( '' !== event.data.history ) {
|
||||
historyObj = JSON.parse( event.data.history );
|
||||
// If last executed action in history is a crop action.
|
||||
if ( historyObj[historyObj.length - 1].hasOwnProperty( 'c' ) ) {
|
||||
/*
|
||||
* A crop action has completed and the crop button gets disabled
|
||||
* ensure the undo button is enabled.
|
||||
*/
|
||||
t.setDisabled( $( '#image-undo-' + postid) , true );
|
||||
// Move focus to the undo button to avoid a focus loss.
|
||||
$( '#image-undo-' + postid ).focus();
|
||||
}
|
||||
}
|
||||
|
||||
parent.empty().append(img);
|
||||
|
||||
|
|
@ -305,7 +330,14 @@ var imageEdit = window.imageEdit = {
|
|||
var dfd, data, elem = $('#image-editor-' + postid), head = $('#media-head-' + postid),
|
||||
btn = $('#imgedit-open-btn-' + postid), spin = btn.siblings('.spinner');
|
||||
|
||||
btn.prop('disabled', true);
|
||||
/*
|
||||
* Instead of disabling the button, which causes a focus loss and makes screen
|
||||
* readers announce "unavailable", return if the button was already clicked.
|
||||
*/
|
||||
if ( btn.hasClass( 'button-activated' ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
spin.addClass( 'is-active' );
|
||||
|
||||
data = {
|
||||
|
|
@ -318,12 +350,15 @@ var imageEdit = window.imageEdit = {
|
|||
dfd = $.ajax({
|
||||
url: ajaxurl,
|
||||
type: 'post',
|
||||
data: data
|
||||
data: data,
|
||||
beforeSend: function() {
|
||||
btn.addClass( 'button-activated' );
|
||||
}
|
||||
}).done(function( html ) {
|
||||
elem.html( html );
|
||||
head.fadeOut('fast', function(){
|
||||
elem.fadeIn('fast');
|
||||
btn.removeAttr('disabled');
|
||||
btn.removeClass( 'button-activated' );
|
||||
spin.removeClass( 'is-active' );
|
||||
});
|
||||
});
|
||||
|
|
@ -337,6 +372,8 @@ var imageEdit = window.imageEdit = {
|
|||
this.initCrop(postid, img, parent);
|
||||
this.setCropSelection(postid, 0);
|
||||
this.toggleEditor(postid, 0);
|
||||
// Editor is ready, move focus to the first focusable element.
|
||||
$( '.imgedit-wrap .imgedit-help-toggle' ).eq( 0 ).focus();
|
||||
},
|
||||
|
||||
initCrop : function(postid, image, parent) {
|
||||
|
|
@ -429,7 +466,10 @@ var imageEdit = window.imageEdit = {
|
|||
// In case we are not accessing the image editor in the context of a View, close the editor the old-skool way
|
||||
else {
|
||||
$('#image-editor-' + postid).fadeOut('fast', function() {
|
||||
$('#media-head-' + postid).fadeIn('fast');
|
||||
$( '#media-head-' + postid ).fadeIn( 'fast', function() {
|
||||
// Move focus back to the Edit Image button. Runs also when saving.
|
||||
$( '#imgedit-open-btn-' + postid ).focus();
|
||||
});
|
||||
$(this).empty();
|
||||
});
|
||||
}
|
||||
|
|
@ -453,9 +493,9 @@ var imageEdit = window.imageEdit = {
|
|||
|
||||
addStep : function(op, postid, nonce) {
|
||||
var t = this, elem = $('#imgedit-history-' + postid),
|
||||
history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [],
|
||||
undone = $('#imgedit-undone-' + postid),
|
||||
pop = t.intval(undone.val());
|
||||
history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [],
|
||||
undone = $( '#imgedit-undone-' + postid ),
|
||||
pop = t.intval( undone.val() );
|
||||
|
||||
while ( pop > 0 ) {
|
||||
history.pop();
|
||||
|
|
@ -516,10 +556,14 @@ var imageEdit = window.imageEdit = {
|
|||
elem.val(pop);
|
||||
t.refreshEditor(postid, nonce, function() {
|
||||
var elem = $('#imgedit-history-' + postid),
|
||||
history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [];
|
||||
history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [];
|
||||
|
||||
t.setDisabled($('#image-redo-' + postid), true);
|
||||
t.setDisabled(button, pop < history.length);
|
||||
// When undo gets disabled, move focus to the redo button to avoid a focus loss.
|
||||
if ( history.length === pop ) {
|
||||
$( '#image-redo-' + postid ).focus();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -535,6 +579,10 @@ var imageEdit = window.imageEdit = {
|
|||
t.refreshEditor(postid, nonce, function() {
|
||||
t.setDisabled($('#image-undo-' + postid), true);
|
||||
t.setDisabled(button, pop > 0);
|
||||
// When redo gets disabled, move focus to the undo button to avoid a focus loss.
|
||||
if ( 0 === pop ) {
|
||||
$( '#image-undo-' + postid ).focus();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -22,6 +22,11 @@
|
|||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.media-modal legend,
|
||||
.media-modal label {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.media-frame input,
|
||||
.media-frame textarea {
|
||||
padding: 6px 8px;
|
||||
|
|
@ -110,7 +115,7 @@
|
|||
}
|
||||
|
||||
.media-frame :-moz-placeholder {
|
||||
color: #a9a9a9;
|
||||
color: #a9a9a9;
|
||||
}
|
||||
|
||||
.media-frame .hidden {
|
||||
|
|
@ -394,7 +399,7 @@
|
|||
color: #666;
|
||||
}
|
||||
|
||||
.compat-item label span {
|
||||
.compat-item label span {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
|
@ -1734,7 +1739,7 @@
|
|||
.media-modal .imgedit-wrap .imgedit-settings {
|
||||
background: #f3f3f3;
|
||||
border-right: 1px solid #ddd;
|
||||
padding: 0 16px 16px;
|
||||
padding: 20px 16px 16px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -1762,33 +1767,73 @@
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
.media-modal .imgedit-group-top {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.media-modal .imgedit-group-top h3, /* Back-compat for pre-4.4 */
|
||||
.media-modal .imgedit-group-top h2 {
|
||||
.media-modal .imgedit-group-top h2,
|
||||
.media-modal .imgedit-group-top h2 .button-link {
|
||||
display: inline-block;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin: 0;
|
||||
margin-top: 24px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.media-modal .imgedit-group-top h3 a, /* Back-compat for pre-4.4 */
|
||||
.media-modal .imgedit-group-top h2 a {
|
||||
.media-modal .imgedit-group-top h2 a,
|
||||
.media-modal .imgedit-group-top h2 .button-link {
|
||||
text-decoration: none;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.media-modal .imgedit-help-toggle {
|
||||
margin-top: -2px;
|
||||
/* higher specificity than media.css */
|
||||
.wp-core-ui.media-modal .image-editor .imgedit-help-toggle,
|
||||
.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:hover,
|
||||
.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:active {
|
||||
border: 1px solid transparent;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: #0074a2;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:focus {
|
||||
color: #0074a2;
|
||||
border-color: #5b9dd9;
|
||||
outline: none;
|
||||
-webkit-box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
|
||||
box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
|
||||
}
|
||||
|
||||
.wp-core-ui.media-modal .imgedit-group-top .dashicons-arrow-down.imgedit-help-toggle {
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
.wp-core-ui.media-modal .image-editor h3 .imgedit-help-toggle {
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
.media-modal .imgedit-help-toggled span.dashicons:before {
|
||||
content: "\f142";
|
||||
}
|
||||
|
||||
.media-modal .imgedit-group img {
|
||||
margin-top: 5px;
|
||||
.media-modal .imgedit-thumbnail-preview {
|
||||
margin: 10px 0 0 8px;
|
||||
}
|
||||
|
||||
.imgedit-thumbnail-preview-caption {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.media-modal .imgedit-wrap div.updated {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -22,6 +22,11 @@
|
|||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.media-modal legend,
|
||||
.media-modal label {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.media-frame input,
|
||||
.media-frame textarea {
|
||||
padding: 6px 8px;
|
||||
|
|
@ -110,7 +115,7 @@
|
|||
}
|
||||
|
||||
.media-frame :-moz-placeholder {
|
||||
color: #a9a9a9;
|
||||
color: #a9a9a9;
|
||||
}
|
||||
|
||||
.media-frame .hidden {
|
||||
|
|
@ -394,7 +399,7 @@
|
|||
color: #666;
|
||||
}
|
||||
|
||||
.compat-item label span {
|
||||
.compat-item label span {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
|
@ -1734,7 +1739,7 @@
|
|||
.media-modal .imgedit-wrap .imgedit-settings {
|
||||
background: #f3f3f3;
|
||||
border-left: 1px solid #ddd;
|
||||
padding: 0 16px 16px;
|
||||
padding: 20px 16px 16px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -1762,33 +1767,73 @@
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
.media-modal .imgedit-group-top {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.media-modal .imgedit-group-top h3, /* Back-compat for pre-4.4 */
|
||||
.media-modal .imgedit-group-top h2 {
|
||||
.media-modal .imgedit-group-top h2,
|
||||
.media-modal .imgedit-group-top h2 .button-link {
|
||||
display: inline-block;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin: 0;
|
||||
margin-top: 24px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.media-modal .imgedit-group-top h3 a, /* Back-compat for pre-4.4 */
|
||||
.media-modal .imgedit-group-top h2 a {
|
||||
.media-modal .imgedit-group-top h2 a,
|
||||
.media-modal .imgedit-group-top h2 .button-link {
|
||||
text-decoration: none;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.media-modal .imgedit-help-toggle {
|
||||
margin-top: -2px;
|
||||
/* higher specificity than media.css */
|
||||
.wp-core-ui.media-modal .image-editor .imgedit-help-toggle,
|
||||
.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:hover,
|
||||
.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:active {
|
||||
border: 1px solid transparent;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: #0074a2;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.wp-core-ui.media-modal .image-editor .imgedit-help-toggle:focus {
|
||||
color: #0074a2;
|
||||
border-color: #5b9dd9;
|
||||
outline: none;
|
||||
-webkit-box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
|
||||
box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
|
||||
}
|
||||
|
||||
.wp-core-ui.media-modal .imgedit-group-top .dashicons-arrow-down.imgedit-help-toggle {
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
.wp-core-ui.media-modal .image-editor h3 .imgedit-help-toggle {
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
.media-modal .imgedit-help-toggled span.dashicons:before {
|
||||
content: "\f142";
|
||||
}
|
||||
|
||||
.media-modal .imgedit-group img {
|
||||
margin-top: 5px;
|
||||
.media-modal .imgedit-thumbnail-preview {
|
||||
margin: 10px 8px 0 0;
|
||||
}
|
||||
|
||||
.imgedit-thumbnail-preview-caption {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.media-modal .imgedit-wrap div.updated {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -4,7 +4,7 @@
|
|||
*
|
||||
* @global string $wp_version
|
||||
*/
|
||||
$wp_version = '4.5-alpha-36222';
|
||||
$wp_version = '4.5-alpha-36223';
|
||||
|
||||
/**
|
||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||
|
|
|
|||
Loading…
Reference in New Issue