Commit Graph

47 Commits

Author SHA1 Message Date
Andrea Fercia aee4324b9e Accessibility: Media: Improve accessibility of the status and error messages in the Image Editor.
- improves focus management by moving focus to the notices, if any, or to the first "tabbable" element
- this avoids a focus loss and helps Braille-only and screen magnification users to be aware of the messages
- adds an ARIA role `alert` to all the notices 
- uses `wp.a11y.speak()` to announce messages to assistive technology
- this way, all visual users will see the messages while assistive technology users will get an audible message
- uses `wp.i18n` for translatable strings in `wp-admin/js/image-edit.js`

Props anevins, ryanshoover, antpb, SergeyBiryukov, afercia.
See #20491.
Fixes #47147.

Built from https://develop.svn.wordpress.org/trunk@48375


git-svn-id: http://core.svn.wordpress.org/trunk@48144 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-07-07 13:45:02 +00:00
Andrea Fercia 45d19872fc Accessibility: Media: Fix the Image Editor mismatching keyboard focus order and visual reading order.
Swaps the DOM order of the two main columns within the admin Image Editor.

When the sequence in which content is presented affects its meaning and the navigation sequences affect meaning or operation, visual order and DOM order must match. See WCAG 2.1 Success Criterion 1.3.2 Meaningful Sequence and Success Criterion 2.4.3 Focus Order.

Props sabernhardt, anevins, audrasjb, afercia.
Fixes #47136.

Built from https://develop.svn.wordpress.org/trunk@48265


git-svn-id: http://core.svn.wordpress.org/trunk@48034 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-07-01 14:29:01 +00:00
Sergey Biryukov be16bb9fba Docs: Remove extra spaces from `@param` tags.
Per the documentation standards, `@param` tags should be aligned with each other, but not with the `@return` tag.

See #49572.
Built from https://develop.svn.wordpress.org/trunk@48110


git-svn-id: http://core.svn.wordpress.org/trunk@47879 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-06-20 12:58:10 +00:00
Sergey Biryukov e13c363b17 Docs: Capitalize "ID", when referring to a post ID, term ID, etc. in a more consistent way.
See #49572.
Built from https://develop.svn.wordpress.org/trunk@48104


git-svn-id: http://core.svn.wordpress.org/trunk@47873 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-06-20 12:02:12 +00:00
antpb 036eca242a Media: Reset aspect ratio constraints when width and height fields fail numeric validation.
Props TBschen, valentinbora.
Fixes #49073.

Built from https://develop.svn.wordpress.org/trunk@47262


git-svn-id: http://core.svn.wordpress.org/trunk@47062 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-02-11 04:40:10 +00:00
Andrew Ozz e4f36258f9 Media: Ensure imgareaselect.js is not initialized twice for the same image. May happen when uploading an image into a post and then clicking on Edit Image.
Fixes #49262.
Built from https://develop.svn.wordpress.org/trunk@47229


git-svn-id: http://core.svn.wordpress.org/trunk@47029 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-02-10 02:54:05 +00:00
Sergey Biryukov 001ffe81fb Docs: Improve inline comments per the documentation standards.
Includes minor code layout fixes for better readability.

See #48303.
Built from https://develop.svn.wordpress.org/trunk@47122


git-svn-id: http://core.svn.wordpress.org/trunk@46922 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-01-29 00:45:18 +00:00
Sergey Biryukov 2a0489ec49 Docs: Replace `@returns` tags in JS docs with `@return`.
Per the documentation standards, `@returns` is an unsupported synonym, `@return` should be used instead:
https://make.wordpress.org/core/handbook/best-practices/inline-documentation-standards/javascript/

See #48303.
Built from https://develop.svn.wordpress.org/trunk@46800


git-svn-id: http://core.svn.wordpress.org/trunk@46600 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-11-29 18:01:03 +00:00
antpb 247e7eb7d5 Media: Revert [46354] preventing bad clipping of text in image details page.
See #47115.

Built from https://develop.svn.wordpress.org/trunk@46355


git-svn-id: http://core.svn.wordpress.org/trunk@46154 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 17:12:59 +00:00
antpb 7c8028febf Media: Prevents clipping of text when scaling image edit screen.
Props sabernhardt, audrasjb, afercia.
See #47115.

Built from https://develop.svn.wordpress.org/trunk@46354


git-svn-id: http://core.svn.wordpress.org/trunk@46153 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-30 16:34:58 +00:00
atimmer bde558be2f Docs: Add file doc `@output` annotations.
These annotations make it clear to the reader of a JavaScript source
where the build process outputs to. These annotations can later be
integrated in a webpack configuration. This way there is one source of
truth.

The `build` folder is omitted from the paths, because a single JS file
shouldn't not be responsible of knowing where outputs in general will
end up at. A file only knows its output location relative to the
project.

Props adamsilverstein, herregroen, omarreiss, pento.
Fixes #44361.

Built from https://develop.svn.wordpress.org/trunk@43347


git-svn-id: http://core.svn.wordpress.org/trunk@43175 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2018-06-28 02:30:15 +00:00
Adam Silverstein e70caa19a1 Media: Fix image cropping on touch screen devices.
* In initCrop, handle touch events in addition to mouse events.
* In imageSelect jQuery plugin, accept event.which of 0 as provided by touch events.

Props yahil, alexgso, joemcgill.
Fixes #41242.

Built from https://develop.svn.wordpress.org/trunk@42818


git-svn-id: http://core.svn.wordpress.org/trunk@42648 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2018-03-09 17:27:31 +00:00
atimmer f6a37e7d39 Docs: Remove `@summary` tags from JSDoc.
As decided in the JavaScript core chat. With a few reasons:

* It is visually cleaner when reading the source.
* This bring the JavaScript documentation closer to the PHP documentation.

The only disadvantage is that the JSDoc parser doesn't split out the summary and the description in the new format. We've decided to solve this when building the JavaScript documentation parser.

Props herregroen.
Fixes #42901.

Built from https://develop.svn.wordpress.org/trunk@42411


git-svn-id: http://core.svn.wordpress.org/trunk@42240 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-12-18 14:14:53 +00:00
Adam Silverstein d82e2b02be Media: improve flows for cropping on attachment details screen.
On the "Attachment Details" screen:
* The crop button is always 'enabled'.
* Clicking the crop button with no selection selects the entire image.
* Clicking the crop button with the entire image selected doesn't do anything.
* Clicking the crop button with a selection crops as expected.

Props sonjanyc, afercia, mikeschroder.
Fixes #30155.

Built from https://develop.svn.wordpress.org/trunk@42404


git-svn-id: http://core.svn.wordpress.org/trunk@42233 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-12-15 22:03:50 +00:00
atimmer 1f707de9dd Docs: Improve wp-admin JSDoc structural data globally.
JSDoc takes it structural data from `@namespace`, `@lends` and `@memberOf`. This change fixes these tags for all JavaScript files in the wp-admin folder.

* Add jsdoc configuration to parse wp-admin/js files. Use `jsdoc -c jsdoc.conf.json` to generate JSDoc.
* Define all used namespaces using `@namespace`.
* Define each usage of the extend function as a prototype assignment using `@lends`.
* Add `@alias` if JSDoc cannot detect the correct name automatically.

This has previously been corrected for all `wp-includes` JavaScript files: [41351].

Props herregroen.
Fixes #42485.

Built from https://develop.svn.wordpress.org/trunk@42403


git-svn-id: http://core.svn.wordpress.org/trunk@42232 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-12-15 13:42:46 +00:00
Adam Silverstein a6d772108d Media: ensure JavaScript initialized when media edit screen is loaded directly.
Fix a JavaScript error when the media edit screen is loaded directly via a url such as `/wp-admin/post.php?post={post_id}&action=edit&image-editor`. Add a check in `imgLoaded` for `this.hold.sizer` which is set up during initialization and required for the cropping tool. Call `init` if this is undefined.

Props NoseGraze.
Fixes #38138.

Built from https://develop.svn.wordpress.org/trunk@40020


git-svn-id: http://core.svn.wordpress.org/trunk@39957 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-01-27 18:30:43 +00:00
Sergey Biryukov 6032bd6e32 Docs: Use 3-digit, x.x.x style semantic versioning for `@since` entries in `wp-admin/js/image-edit.js`.
See #38748.
Built from https://develop.svn.wordpress.org/trunk@39740


git-svn-id: http://core.svn.wordpress.org/trunk@39680 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-01-06 22:13:20 +00:00
Adam Silverstein 113833953d Docs: Add inline documentation for `image-edit.js`.
Adds JSDoc DocBlocks to the imageEdit methods.

Props: andizer, rensw90.
Fixes #38748.

Built from https://develop.svn.wordpress.org/trunk@39493


git-svn-id: http://core.svn.wordpress.org/trunk@39433 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-12-04 21:35:40 +00:00
Dominik Schilling de3b2db1e2 Media: Improve form validation errors handling when editing images.
* Use the same check for a numeric value used on the crop fields on all the other fields: don't display "NaN", just empty the field.
* Remove the inline script that runs the initialization of the image editor and call it after the editor UI is fully ready.

Props afercia.
Fixes #36316.
Built from https://develop.svn.wordpress.org/trunk@37966


git-svn-id: http://core.svn.wordpress.org/trunk@37907 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-07-05 13:37:29 +00:00
Andrea Fercia ae1575bd80 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
2016-01-08 19:13:26 +00:00
Andrea Fercia 1b3ee7098a Media: set the image editor spinner on the smallest possible area.
When using spinners as background images, the re-painted area should be the smallest
possible one. See similar performance issue in #31196, #33311, #33322, and #34951.

Fixes #35296.
Built from https://develop.svn.wordpress.org/trunk@36162


git-svn-id: http://core.svn.wordpress.org/trunk@36128 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-01-03 16:49:28 +00:00
Scott Taylor e649fabb6a Accessibility: add missing `alt` attributes to a gaggle of `<img>`s.
Props afercia.
Fixes #34583.

Built from https://develop.svn.wordpress.org/trunk@35567


git-svn-id: http://core.svn.wordpress.org/trunk@35531 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-11-07 16:12:27 +00:00
Helen Hou-Sandí 3ac1a19529 Spinners: Toggle a class instead of show/hide.
Toggling spinners also now uses visibility instead of display, so that the space is always reserved and nothing moves around unexpectedly.

props cdog, MikeHansenMe, valendesigns.
fixes #22839. see #31875, #30725.

Built from https://develop.svn.wordpress.org/trunk@31996


git-svn-id: http://core.svn.wordpress.org/trunk@31975 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-04-03 04:52:27 +00:00
Scott Taylor 6352d703a0 Media Grid/Modal Keyboard navigation improvements:
* Add focus to arrows on Next/Previous in the grid's modal on left/right keypress, and add the necessary CSS for `:focus`
* When in a disabled input in the grid modal, allow the left/right keys to work
* Make the image editor return a `$.Deferred` so that there isn't a race condition with UI loading. 
* Assign focus when the edit image mode is rendered so that the modal can be closed on Esc press

Props wonderboymusic, adamsilverstein (for the initial patch).
See #23560.

Built from https://develop.svn.wordpress.org/trunk@29560


git-svn-id: http://core.svn.wordpress.org/trunk@29335 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-08-21 02:35:17 +00:00
Dominik Schilling e78867dc88 Fix jshint errors introduced in [29259]. see #11325.
Built from https://develop.svn.wordpress.org/trunk@29269


git-svn-id: http://core.svn.wordpress.org/trunk@29051 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-22 20:03:15 +00:00
Sergey Biryukov 51db702770 Remove requirement for a minimum image size in the image editor.
props ericlewis, solarissmoke.
fixes #11325.
Built from https://develop.svn.wordpress.org/trunk@29259


git-svn-id: http://core.svn.wordpress.org/trunk@29042 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-07-21 19:10:14 +00:00
Scott Taylor ecdcfb55bb Make the image editor less jumpy when opening.
Props eddiemoya, ericlewis.
Fixes #22793.


Built from https://develop.svn.wordpress.org/trunk@28639


git-svn-id: http://core.svn.wordpress.org/trunk@28457 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-05-30 19:53:15 +00:00
Sergey Biryukov 13cbcc92cf Fix closing tag in image editor.
props t4k1s.
fixes #28130.
Built from https://develop.svn.wordpress.org/trunk@28255


git-svn-id: http://core.svn.wordpress.org/trunk@28083 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-05-05 10:17:19 +00:00
Andrew Nacin 3c1cdaa362 Restyle the image editor so it looks way less hideous.
props avryl.
see #27544.

Built from https://develop.svn.wordpress.org/trunk@27842


git-svn-id: http://core.svn.wordpress.org/trunk@27676 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-29 08:51:14 +00:00
Andrew Ozz 4e30461545 Editing image file: properly refresh the view after restoring the original image or rescaling the image. Props gcorne, see #21811
Built from https://develop.svn.wordpress.org/trunk@27644


git-svn-id: http://core.svn.wordpress.org/trunk@27487 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-20 23:25:14 +00:00
Helen Hou-Sandí 4bb7e03548 At long last, a first pass at bringing the image editor into the media modal. props gcorne, DH-Shredder, tomauger. see #21811.
Built from https://develop.svn.wordpress.org/trunk@27445


git-svn-id: http://core.svn.wordpress.org/trunk@27292 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2014-03-06 22:55:14 +00:00
Sergey Biryukov 49a0254863 Fix the ability to save changes made to an image.
props markoheijnen.
fixes #26000.
Built from https://develop.svn.wordpress.org/trunk@26425


git-svn-id: http://core.svn.wordpress.org/trunk@26325 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-26 23:31:10 +00:00
Sergey Biryukov 701cd7bf86 Fix JSHint errors in image-edit.js.
props dougwollison.
fixes #26000.
Built from https://develop.svn.wordpress.org/trunk@26292


git-svn-id: http://core.svn.wordpress.org/trunk@26197 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-11-20 22:47:10 +00:00
Dominik Schilling 390d4e2272 Image Edit: Replace deprecated $.load() and $.error() methods to prevent warnings by jQuery Migrate, fixes #25371.
Built from https://develop.svn.wordpress.org/trunk@25547


git-svn-id: http://core.svn.wordpress.org/trunk@25467 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2013-09-21 11:24:09 +00:00
Daryl Koopersmith 0d08430cfe Media: Replace the thumbnail on post.php using a request variable instead of the referer. props ocean90. fixes #21391.
git-svn-id: http://core.svn.wordpress.org/trunk@22807 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-22 03:43:16 +00:00
Andrew Nacin 52007a46c1 Round rather than floor values in image editing JS to avoid decrementing values on each run. props SergeyBiryukov. fixes #22011.
git-svn-id: http://core.svn.wordpress.org/trunk@22592 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-15 02:20:29 +00:00
Andrew Nacin 1acd8b556f New HiDPI spinner. Uses clean <span class="spinner"></span> markup.
Be on the lookout for weirdness.
props lessbloat. see #21456.



git-svn-id: http://core.svn.wordpress.org/trunk@22019 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-09-26 19:57:44 +00:00
Andrew Nacin 2710bcade1 Switch to .min for compressed JS and CSS files.
* This moves our "development" versions from .dev.js to .js (same for css).
 * The compressed version then moves from .js to .min.js (same for css).

By switching to the standard .min convention, it sets expectations for developers,
and works nicely with existing tools such as ack.

fixes #21633.



git-svn-id: http://core.svn.wordpress.org/trunk@21592 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-23 00:04:18 +00:00
azaozz 8315e48d3a Add error message when loading the preview image in the image editor fails, fixes #18723
git-svn-id: http://svn.automattic.com/wordpress/trunk@18798 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2011-09-28 06:08:56 +00:00
azaozz 65f9c441a7 Replace .attr() with .prop() as per jQuery 1.6.1. Also fixes couple places where the JS wasn't working because attr('some', '') does not remove the HTML property now, see #17311
git-svn-id: http://svn.automattic.com/wordpress/trunk@18027 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2011-05-25 01:04:12 +00:00
azaozz 9e4bee6c26 Add quotes to [value="some"] selectors, see #16426
git-svn-id: http://svn.automattic.com/wordpress/trunk@17777 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2011-04-30 02:15:08 +00:00
azaozz fb0d8b44ee Fix image meta after editing image, disable the Save button when no changes, fixes #11115
git-svn-id: http://svn.automattic.com/wordpress/trunk@12163 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2009-11-11 11:24:01 +00:00
azaozz 6f099a9117 Image Editor: add load and save image filters, fix backup sizes meta, see #10528
git-svn-id: http://svn.automattic.com/wordpress/trunk@11984 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2009-09-30 08:38:32 +00:00
azaozz 1e611d37da Image Editor: fix preview size calculation when cropping small part of a very large image, see #10528
git-svn-id: http://svn.automattic.com/wordpress/trunk@11973 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2009-09-26 04:07:27 +00:00
azaozz 33836d522b Image Editor: fix JS prompt, add size to 'load_image_to_edit' filter, see #10528
git-svn-id: http://svn.automattic.com/wordpress/trunk@11967 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2009-09-24 08:47:33 +00:00
azaozz 48932f96fe Image Editor improvements, see #10528
git-svn-id: http://svn.automattic.com/wordpress/trunk@11965 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2009-09-24 01:54:07 +00:00
azaozz 1c161c23c2 Image editing (first run). Includes code by stephanreiter, see #10528
git-svn-id: http://svn.automattic.com/wordpress/trunk@11911 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2009-09-10 22:07:33 +00:00