Skip to content

Commit f009903

Browse files
committed
Auto merge of #2209 - Turbo87:rl-dropdown, r=locks
Refactor `RlDropdown` components This PR applies a bunch of refactorings to the `RlDropdown` components. Ultimately, this removes their reliance on jQuery and replaces it with a dependency on `ember-click-outside` and the already existing `ember-keyboard` dependency. r? @locks
2 parents 4c42ea7 + 713eb69 commit f009903

21 files changed

+125
-260
lines changed

app/components/dropdown.hbs

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<div
2+
...attributes
3+
{{on-click-outside (action (mut this.dropdownExpanded) false)}}
4+
>
5+
{{yield (hash
6+
Trigger=(component "dropdown/trigger" toggle=(action "toggleDropdown"))
7+
Content=(component "dropdown/content" isExpanded=this.dropdownExpanded)
8+
)}}
9+
</div>

app/components/dropdown.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import Component from '@ember/component';
2+
import { EKMixin, EKOnInsertMixin, keyDown } from 'ember-keyboard';
3+
import { on } from '@ember/object/evented';
4+
5+
export default Component.extend(EKMixin, EKOnInsertMixin, {
6+
tagName: '',
7+
8+
dropdownExpanded: false,
9+
10+
onEscape: on(keyDown('Escape'), function() {
11+
this.set('dropdownExpanded', false);
12+
}),
13+
14+
actions: {
15+
toggleDropdown() {
16+
this.toggleProperty('dropdownExpanded');
17+
},
18+
},
19+
});

app/components/dropdown/content.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import Component from '@ember/component';
2+
3+
export default Component.extend({
4+
classNames: ['rl-dropdown'],
5+
classNameBindings: ['isExpanded:open'],
6+
});
Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import Component from '@ember/component';
22
import { computed } from '@ember/object';
33

4-
import RlDropdownContainer from './rl-dropdown-container';
5-
64
export default Component.extend({
75
classNames: ['rl-dropdown-toggle'],
86

@@ -18,25 +16,11 @@ export default Component.extend({
1816
return this.tagName === 'a' ? 'button' : null;
1917
}),
2018

21-
dropdownContainer: computed(function() {
22-
return this.nearestOfType(RlDropdownContainer);
23-
}),
24-
25-
action: 'toggleDropdown',
26-
27-
propagateClicks: true,
28-
2919
disabled: false,
3020

31-
click(event) {
21+
click() {
3222
if (!this.disabled) {
33-
let propagateClicks = this.propagateClicks;
34-
35-
this.dropdownContainer.send(this.action);
36-
37-
if (propagateClicks === false || propagateClicks === 'false') {
38-
event.stopPropagation();
39-
}
23+
this.toggle();
4024
}
4125
},
4226
});

app/components/rl-dropdown-container.hbs

Lines changed: 0 additions & 1 deletion
This file was deleted.

app/components/rl-dropdown-container.js

Lines changed: 0 additions & 7 deletions
This file was deleted.

app/components/rl-dropdown.js

Lines changed: 0 additions & 30 deletions
This file was deleted.

app/mixins/rl-dropdown-component.js

Lines changed: 0 additions & 126 deletions
This file was deleted.

app/templates/application.hbs

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,13 @@
4040
Browse All Crates
4141
</LinkTo>
4242
<span class="sep">|</span>
43-
<RlDropdownContainer class="dropdown-container">
44-
<RlDropdownToggle class="dropdown">
43+
<Dropdown class="dropdown-container" as |dd|>
44+
<dd.Trigger class="dropdown">
4545
Docs
4646
<span class='arrow'></span>
47-
</RlDropdownToggle>
47+
</dd.Trigger>
4848

49-
<RlDropdown @tagName="ul" @id="doc-links" class="dropdown">
49+
<dd.Content @tagName="ul" @id="doc-links" class="dropdown">
5050
<li><a href='https://doc.rust-lang.org/cargo/getting-started/'>Getting Started</a></li>
5151
<li><a href='https://doc.rust-lang.org/cargo/guide/'>Guide</a></li>
5252
<li><a href='https://doc.rust-lang.org/cargo/reference/specifying-dependencies.html'>Specifying Dependencies</a></li>
@@ -61,24 +61,24 @@
6161
<li><a href='https://doc.rust-lang.org/cargo/reference/external-tools.html'>External Tools</a></li>
6262
<li><LinkTo @route="policies">Policies</LinkTo></li>
6363
<li><LinkTo @route="category-slugs">List of category slugs</LinkTo></li>
64-
</RlDropdown>
65-
</RlDropdownContainer>
64+
</dd.Content>
65+
</Dropdown>
6666
<span class="sep">|</span>
6767
{{#if this.session.currentUser}}
68-
<RlDropdownContainer class="dropdown-container" data-test-user-menu>
69-
<RlDropdownToggle class="dropdown" data-test-toggle>
68+
<Dropdown class="dropdown-container" data-test-user-menu as |dd|>
69+
<dd.Trigger class="dropdown" data-test-toggle>
7070
<UserAvatar @user={{this.session.currentUser}} @size="small" data-test-avatar />
7171
{{ this.session.currentUser.name }}
7272
<span class='arrow'></span>
73-
</RlDropdownToggle>
73+
</dd.Trigger>
7474

75-
<RlDropdown @tagName="ul" class="dropdown current-user-links">
75+
<dd.Content @tagName="ul" class="dropdown current-user-links">
7676
<li><LinkTo @route="dashboard">Dashboard</LinkTo></li>
7777
<li><LinkTo @route="me">Account Settings</LinkTo></li>
7878
<li><LinkTo @route="me.pending-invites">Owner Invites</LinkTo></li>
7979
<li class='last'><LinkTo @route="logout">Sign Out</LinkTo></li>
80-
</RlDropdown>
81-
</RlDropdownContainer>
80+
</dd.Content>
81+
</Dropdown>
8282
{{else}}
8383
<LinkTo @route="login" data-test-login-link>
8484
{{svg-jar "lock"}}
@@ -88,12 +88,12 @@
8888
</div>
8989

9090
<div class='menu'>
91-
<RlDropdownContainer class="dropdown-container">
92-
<RlDropdownToggle class="dropdown">
91+
<Dropdown class="dropdown-container" as |dd|>
92+
<dd.Trigger class="dropdown">
9393
Menu
9494
<span class='arrow'></span>
95-
</RlDropdownToggle>
96-
<RlDropdown @tagName="ul" class="dropdown current-user-links">
95+
</dd.Trigger>
96+
<dd.Content @tagName="ul" class="dropdown current-user-links">
9797
<li><LinkTo @route="crates">Browse All Crates</LinkTo></li>
9898
{{#if this.session.currentUser}}
9999
<li><LinkTo @route="dashboard">Dashboard</LinkTo></li>
@@ -103,8 +103,8 @@
103103
{{else}}
104104
<li><LinkTo @route="login">Log in with GitHub</LinkTo></li>
105105
{{/if}}
106-
</RlDropdown>
107-
</RlDropdownContainer>
106+
</dd.Content>
107+
</Dropdown>
108108
</div>
109109

110110
<div class='links'>

app/templates/categories.hbs

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,14 @@
1616

1717
<div class='sort' data-test-categories-sort>
1818
<span class='small'>Sort by</span>
19-
<RlDropdownContainer class="dropdown-container">
20-
<RlDropdownToggle @tagName="a" class="dropdown" data-test-current-order>
19+
<Dropdown class="dropdown-container" as |dd|>
20+
<dd.Trigger @tagName="a" class="dropdown" data-test-current-order>
2121
{{svg-jar "sort"}}
2222
{{ this.currentSortBy }}
2323
<span class='arrow'></span>
24-
</RlDropdownToggle>
24+
</dd.Trigger>
2525

26-
<RlDropdown @tagName="ul" class="dropdown">
26+
<dd.Content @tagName="ul" class="dropdown">
2727
<li>
2828
<LinkTo @query={{hash sort="alpha"}}>
2929
Alphabetical
@@ -34,8 +34,8 @@
3434
# Crates
3535
</LinkTo>
3636
</li>
37-
</RlDropdown>
38-
</RlDropdownContainer>
37+
</dd.Content>
38+
</Dropdown>
3939
</div>
4040
</div>
4141

0 commit comments

Comments
 (0)