NoLog.cz/decide.nolog.cz
6
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

simplify autofocus implementation using a modifier (#465)

Browse source
This commit is contained in:
Jeldrik Hanschke 2020-10-27 22:34:08 +01:00 committed by GitHub
parent 7da65be276
commit 4fd4333c3c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 83 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
app/components/autofocusable-element.js
View file

@ -1,15 +0,0 @@
import classic from 'ember-classic-decorator';
import Component from '@ember/component';
@classic
export default class AutofocusableElement extends Component {
autofocus = true;
didInsertElement() {
super.didInsertElement(...arguments);
if (this.autofocus) {
this.element.focus();
}
}
}

13
app/components/bs-form/element/control/input.js
View file

@ -1,13 +0,0 @@
import classic from 'ember-classic-decorator';
import BaseBsInput from 'ember-bootstrap/components/bs-form/element/control/input';
@classic
export default class CustomizedBsInput extends BaseBsInput {
didInsertElement() {
super.didInsertElement(...arguments);
if (this.autofocus) {
this.element.focus();
}
}
}

9
app/modifiers/autofocus.js Normal file
View file

@ -0,0 +1,9 @@
import { modifier } from 'ember-modifier';
export default modifier(function autofocus(element, params, { enabled = true }) {
if (!enabled) {
return;
}
element.focus();
});

4
app/templates/components/create-options-datetime.hbs
View file

@ -43,12 +43,14 @@
>
<div class="input-group">
<el.control
@autofocus={{unless index true false}}
@onChange={{fn this.inputChanged date}}
@placeholder="00:00"
@type="time"
@value={{el.value}}
{{! focus input if it's the first one }}
{{autofocus enabled=(eq index 0)}}
{{! run validation for partially filled input on focusout event }}
{{on "focusout" (fn this.validateInput date)}}

5
app/templates/components/create-options-text.hbs
View file

@ -10,11 +10,12 @@
>
<div class="input-group">
<el.control
{{! first control should be autofocused }}
@autofocus={{unless index true false}}
@onChange={{action (mut el.value)}}
@value={{el.value}}
id={{el.id}}
{{! first control should be focused automatically }}
{{autofocus enabled=(eq index 0)}}
/>
<div class="input-group-append">
<BsButton

8
app/templates/create/index.hbs
View file

@ -15,11 +15,11 @@
class="poll-type"
as |el|
>
<AutofocusableElement
@tagName="select"
@change={{action (mut el.value) value="target.value"}}
<select
id={{el.id}}
class="form-control"
{{on "change" (action (mut el.value) value="target.value")}}
{{autofocus}}
>
<option value="FindADate" selected={{eq el.value "FindADate"}}>
{{t "pollTypes.findADate.label"}}
@ -27,7 +27,7 @@
<option value="MakeAPoll" selected={{eq el.value "MakeAPoll"}}>
{{t "pollTypes.makeAPoll.label"}}
</option>
</AutofocusableElement>
</select>
</form.element>
<div class="row cr-steps-bottom-nav">

6
app/templates/create/meta.hbs
View file

@ -8,13 +8,15 @@
as |form|
>
<form.element
@autofocus={{true}}
@controlType="text"
@label={{t "create.meta.input.title.label"}}
@placeholder={{t "create.meta.input.title.placeholder"}}
@property="title"
class="title"
/>
as |el|
>
<el.control {{autofocus}} />
</form.element>
<form.element
@controlType="textarea"
@label={{t "create.meta.input.description.label"}}

8
app/templates/create/settings.hbs
View file

@ -15,18 +15,18 @@
class="answer-type"
as |el|
>
<AutofocusableElement
@tagName="select"
@change={{action "updateAnswerType" value="target.value"}}
<select
id={{el.id}}
class="custom-select"
{{on "change" (action "updateAnswerType" value="target.value")}}
{{autofocus}}
>
{{#each this.answerTypes as |answerType|}}
<option value={{answerType.id}} selected={{eq el.value answerType.id}}>
{{t answerType.labelTranslation}}
</option>
{{/each}}
</AutofocusableElement>
</select>
</form.element>
<form.element
@controlType="select"

6
app/templates/poll/participation.hbs
View file

@ -8,14 +8,16 @@
as |form|
>
<form.element
@autofocus={{true}}
@controlType="text"
@label={{t "poll.input.newUserName.label"}}
@placeholder={{t "poll.input.newUserName.placeholder"}}
@property="name"
class="name"
data-test-form-element="name"
/>
as |el|
>
<el.control {{autofocus}} />
</form.element>
<div class="selections">
{{#each this.selections as |selection|}}
{{#if this.isFreeText}}

1
package.json
View file

@ -66,6 +66,7 @@
"ember-load-initializers": "^2.1.1",
"ember-math-helpers": "^2.8.1",
"ember-maybe-import-regenerator": "^0.1.6",
"ember-modifier": "^2.1.1",
"ember-moment": "^8.0.0",
"ember-page-title": "^5.0.0",
"ember-power-calendar": "^0.16.0",

28
tests/integration/components/autofocusable-element-test.js
View file

@ -1,28 +0,0 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
module('Integration | Component | autofocusable-element', function(hooks) {
setupRenderingTest(hooks);
test('it supports block mode', async function(assert) {
await render(hbs`
{{#autofocusable-element}}
template block text
{{/autofocusable-element}}
`);
assert.equal(this.element.textContent.trim(), 'template block text');
});
test('it focus element', async function(assert) {
await render(hbs`
{{#autofocusable-element tagName='input' autofocus=true}}
template block text
{{/autofocusable-element}}
`);
assert.ok(this.element.querySelector('input') === document.activeElement);
});
});

28
tests/integration/modifiers/autofocus-test.js Normal file
View file

@ -0,0 +1,28 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';
module('Integration | Modifier | autofocus', function(hooks) {
setupRenderingTest(hooks);
test('it focuses the element', async function(assert) {
await render(hbs`<input {{autofocus}} />`);
assert.dom('input').isFocused();
});
test('it focuses the element if `enabled` is `true`', async function(assert) {
this.set('enabled', true);
await render(hbs`<input {{autofocus enabled=this.enabled}} />`);
assert.dom('input').isFocused();
});
test('it does not focus the element if `enabled` is `false`', async function(assert) {
this.set('enabled', false);
await render(hbs`<input {{autofocus enabled=this.enabled}} />`);
assert.dom('input').isNotFocused();
});
});

25
yarn.lock
View file

@ -6406,7 +6406,7 @@ ember-cli@~3.22.0:
workerpool "^6.0.1"
yam "^1.0.0"
ember-compatibility-helpers@^1.0.2, ember-compatibility-helpers@^1.1.1, ember-compatibility-helpers@^1.1.2, ember-compatibility-helpers@^1.2.0:
ember-compatibility-helpers@^1.0.2, ember-compatibility-helpers@^1.1.1, ember-compatibility-helpers@^1.1.2, ember-compatibility-helpers@^1.2.0, ember-compatibility-helpers@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/ember-compatibility-helpers/-/ember-compatibility-helpers-1.2.1.tgz#87c92c4303f990ff455c28ca39fb3ee11441aa16"
integrity sha512-6wzYvnhg1ihQUT5yGqnLtleq3Nv5KNv79WhrEuNU9SwR4uIxCO+KpyC7r3d5VI0EM7/Nmv9Nd0yTkzmTMdVG1A==
@ -6502,6 +6502,15 @@ ember-decorators@^6.1.0, ember-decorators@^6.1.1:
"@ember-decorators/object" "^6.1.1"
ember-cli-babel "^7.7.3"
ember-destroyable-polyfill@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/ember-destroyable-polyfill/-/ember-destroyable-polyfill-2.0.2.tgz#2cc7532bd3c00e351b4da9b7fc683f4daff79671"
integrity sha512-9t+ya+9c+FkNM5IAyJIv6ETG8jfZQaUnFCO5SeLlV0wkSw7TOexyb61jh5GVee0KmknfRhrRGGAyT4Y0TwkZ+w==
dependencies:
ember-cli-babel "^7.22.1"
ember-cli-version-checker "^5.1.1"
ember-compatibility-helpers "^1.2.1"
ember-element-helper@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/ember-element-helper/-/ember-element-helper-0.2.0.tgz#eacdf4d8507d6708812623206e24ad37bad487e7"
@ -6665,7 +6674,7 @@ ember-maybe-in-element@^0.4.0:
dependencies:
ember-cli-babel "^7.1.0"
ember-modifier-manager-polyfill@^1.0.1, ember-modifier-manager-polyfill@^1.1.0:
ember-modifier-manager-polyfill@^1.0.1, ember-modifier-manager-polyfill@^1.1.0, ember-modifier-manager-polyfill@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/ember-modifier-manager-polyfill/-/ember-modifier-manager-polyfill-1.2.0.tgz#cf4444e11a42ac84f5c8badd85e635df57565dda"
integrity sha512-bnaKF1LLKMkBNeDoetvIJ4vhwRPKIIumWr6dbVuW6W6p4QV8ZiO+GdF8J7mxDNlog9CeL9Z/7wam4YS86G8BYA==
@ -6674,6 +6683,18 @@ ember-modifier-manager-polyfill@^1.0.1, ember-modifier-manager-polyfill@^1.1.0:
ember-cli-version-checker "^2.1.2"
ember-compatibility-helpers "^1.2.0"
ember-modifier@^2.1.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/ember-modifier/-/ember-modifier-2.1.1.tgz#aa3a12e2d6cf1622f774f3f1eab4880982a43fa9"
integrity sha512-g9mcpFWgw5lgNU40YNf0USNWqoGTJ+EqjDQKjm7556gaRNDeGnLylFKqx9O3opwLHEt6ZODnRDy9U0S5YEMREg==
dependencies:
ember-cli-babel "^7.22.1"
ember-cli-normalize-entity-name "^1.0.0"
ember-cli-string-utils "^1.1.0"
ember-cli-typescript "^3.1.3"
ember-destroyable-polyfill "^2.0.2"
ember-modifier-manager-polyfill "^1.2.0"
ember-moment@^8.0.0:
version "8.0.0"
resolved "https://registry.yarnpkg.com/ember-moment/-/ember-moment-8.0.0.tgz#f3993711df0af444558f0f3922dc3f412af72410"