Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

✨Autofocus on show() #20687

Merged
merged 9 commits into from
Feb 6, 2019
Merged

✨Autofocus on show() #20687

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
087dc7e
✨Honor autofocus on show/toggle
alanorozco Feb 5, 2019
27b5f70
minimum markup
alanorozco Feb 5, 2019
d3e1a74
doc
alanorozco Feb 5, 2019
35cdc49
md format
alanorozco Feb 5, 2019
e910dec
wording
alanorozco Feb 5, 2019
cdc8d21
Merge branch 'master' of github.com:ampproject/amphtml into autofocus
alanorozco Feb 5, 2019
ec0542a
?
alanorozco Feb 6, 2019
aba3d67
Check for iOS instead
alanorozco Feb 6, 2019
d45614a
Remove unnecessary assertElement
alanorozco Feb 6, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions spec/amp-actions-and-events.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -312,11 +312,15 @@ event.response</pre></td>
</tr>
<tr>
<td><code>show</code></td>
<td>Shows the target element.</td>
<td>Shows the target element. If an
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autofocus"><code>autofocus</code> element</a> becomes visible as a
result, it gains focus.</td>
</tr>
<tr>
<td><code>toggleVisibility</code></td>
<td>Toggles the visibility of the target element.</td>
<td>Toggles the visibility of the target element. If an
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autofocus"><code>autofocus</code> element</a> becomes visible as a
result, it gains focus.</td>
</tr>
<tr>
<td><code>toggleClass(class=STRING, force=BOOLEAN)</code></td>
Expand Down
49 changes: 40 additions & 9 deletions src/service/standard-actions-impl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,18 @@ function isShowable(element) {
return element.hasAttribute('hidden');
}

/**
* @param {!Element} element
* @return {?Element}
* @visibleForTesting
*/
export function getAutofocusElementForShowAction(element) {
if (element.hasAttribute('autofocus')) {
return element;
}
return element.querySelector('[autofocus]');
}

/** @const {string} */
const TAG = 'STANDARD-ACTIONS';

Expand Down Expand Up @@ -287,8 +299,8 @@ export class StandardActions {
* @param {!./action-impl.ActionInvocation} invocation
* @return {?Promise}
*/
handleShow(invocation) {
const target = dev().assertElement(invocation.node);
handleShow({node}) {
const target = dev().assertElement(node);
const ownerWindow = toWin(target.ownerDocument.defaultView);

if (target.classList.contains(getLayoutClass(Layout.NODISPLAY))) {
Expand All @@ -311,17 +323,36 @@ export class StandardActions {
}
});

this.resources_.mutateElement(target, () => {
if (target.classList.contains('i-amphtml-element')) {
target./*OK*/expand();
} else {
toggle(target, true);
}
});
const autofocusElOrNull = getAutofocusElementForShowAction(target);

// Safari only honors focus in sync operations.
if (autofocusElOrNull && Services.platformFor(ownerWindow).isSafari()) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Check for iOS instead, it is an iOS thing (I don't think isSafari catches Chrome on iOS for example)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gotcha, fixed. PTAL.

this.handleShowSync_(target, autofocusElOrNull);
} else {
this.resources_.mutateElement(target, () => {
this.handleShowSync_(target, autofocusElOrNull);
});
}

return null;
}

/**
* @param {!Element} target
* @param {?Element} autofocusElOrNull
* @private
*/
handleShowSync_(target, autofocusElOrNull) {
if (target.classList.contains('i-amphtml-element')) {
target./*OK*/expand();
} else {
toggle(target, true);
}
if (autofocusElOrNull) {
tryFocus(dev().assertElement(autofocusElOrNull));
}
}

/**
* Handles "toggle" action.
* @param {!./action-impl.ActionInvocation} invocation
Expand Down
93 changes: 93 additions & 0 deletions test/manual/autofocus-on-show.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
<!--
Copyright 2019 The AMP HTML Authors. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS-IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the license.
-->
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Autofocus on show</title>
<link rel="canonical" href="https://ampproject.org/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>
body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
<noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<style amp-custom>
body, button, input {
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
line-height: 20px;
}
body {
padding: 40px;
}
input, button {
padding: 12px 16px;
}
input {
flex: 1;
background: white;
margin-right: 12px;
border: 1px solid #ccc;
}
input:focus {
border-color: #005af0;
outline: 1px solid #005af0;
}
input + span {
opacity: 0;
text-transform: uppercase;
font-size: 12px;
}
input:focus + span {
opacity: 1;
color: #005af0;
font-weight: bold;
}
button {
border: none;
background: #005af0;
color: white;
font-weight: bold;
border-radius: 4px;
margin: 0 12px 0 0;
}
#wrapper {
display: flex;
align-items: center;
padding: 20px 0;
}
</style>
</head>
<body>
<button on="tap: wrapper.show">
Show
</button>
<button on="tap: wrapper.hide">
Hide
</button>
<button on="tap: wrapper.toggleVisibility">
Toggle
</button>
<div id="wrapper" hidden>
<input type="text"
autofocus
autocomplete="off"
placeholder="I'm a placeholder">
<span>focused</span>
</div>
</body>
</html>
Loading