Skip to content

Replace jQuery logic with native DOM #1880

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

Merged
merged 7 commits into from
Nov 15, 2019
Merged

Replace jQuery logic with native DOM #1880

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e6e3c6b
replace jQuery with native logic
locks Sep 6, 2019
1334323
use native DOM instead of jQuery
locks Sep 6, 2019
afd9079
replace jQuery with native DOM
locks Oct 26, 2019
26fe82e
remove unused code
locks Oct 26, 2019
e0de9c7
make closeOnChildClick default to 'a:link'
locks Oct 26, 2019
ae0f5a5
remove conditional logic that does nothing
locks Oct 26, 2019
c6c87e1
remove unused import
locks Oct 26, 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
5 changes: 3 additions & 2 deletions app/components/api-token-row.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,9 @@ export default Component.extend({
serverError: null,

didInsertElement() {
if (this.get('api_token.isNew')) {
this.$('input').focus();
let input = this.element.querySelector('input');
if (input.focus) {
input.focus();
}
},

Expand Down
14 changes: 4 additions & 10 deletions app/components/crate-readme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,12 @@ import Component from '@ember/component';

export default Component.extend({
rendered: '',

didRender() {
this._super(...arguments);
this.$('pre > code').each(function() {
window.Prism.highlightElement(this);
});
this.scrollToFragment();
},

scrollToFragment() {
if (location.hash) {
let anchor_id = location.hash.substr(1);
document.getElementById(anchor_id).scrollIntoView();
}
this.element.querySelectorAll('pre > code').forEach(function(node) {
window.Prism.highlightElement(node);
});
},
});
24 changes: 7 additions & 17 deletions app/components/rl-dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import Component from '@ember/component';
import { alias } from '@ember/object/computed';
import { computed } from '@ember/object';
import $ from 'jquery';

import RlDropdownContainer from './rl-dropdown-container';

Expand All @@ -15,26 +14,17 @@ export default Component.extend({

isExpanded: alias('dropdownContainer.dropdownExpanded'),

closeOnChildClick: false,

propagateClicks: true,

click(event) {
let closeOnChildClick = this.closeOnChildClick;
let propagateClicks = this.propagateClicks;
let $target = $(event.target);
let $c = this.$();
let closeOnChildClick = 'a:link';
let $target = event.target;
let $c = this.element;
Comment on lines +19 to +20
Copy link
Contributor

Choose a reason for hiding this comment

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

Both of them are not jQuery objects anymore. It would be better to remove $ from the names.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I left them as is to minimize the changes in the code. Also, this code will likely be changed or moved in a subsequent pass.


if ($target !== $c) {
if ((closeOnChildClick === true || closeOnChildClick === 'true') && $target.closest($c).length) {
this.set('isExpanded', false);
} else if (closeOnChildClick && $target.closest(closeOnChildClick, $c).length) {
this.set('isExpanded', false);
}
if ($target === $c) {
return;
}

if (propagateClicks === false || propagateClicks === 'false') {
event.stopPropagation();
if ($target.closest(closeOnChildClick, $c).length) {
this.set('isExpanded', false);
}
},
});
6 changes: 3 additions & 3 deletions app/templates/application.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
<span class='arrow'></span>
{{/rl-dropdown-toggle}}

{{#rl-dropdown tagName="ul" id="doc-links" class="dropdown" closeOnChildClick="a:link"}}
{{#rl-dropdown tagName="ul" id="doc-links" class="dropdown"}}
<li><a href='https://doc.rust-lang.org/cargo/getting-started/'>Getting Started</a></li>
<li><a href='https://doc.rust-lang.org/cargo/guide/'>Guide</a></li>
<li><a href='https://doc.rust-lang.org/cargo/reference/specifying-dependencies.html'>Specifying Dependencies</a></li>
Expand All @@ -66,7 +66,7 @@
<span class='arrow'></span>
{{/rl-dropdown-toggle}}

{{#rl-dropdown tagName="ul" class="dropdown current-user-links" closeOnChildClick="a:link"}}
{{#rl-dropdown tagName="ul" class="dropdown current-user-links"}}
<li>{{#link-to 'dashboard'}}Dashboard{{/link-to}}</li>
<li>{{#link-to 'me'}}Account Settings{{/link-to}}</li>
<li>{{#link-to 'me.pending-invites'}}Owner Invites{{/link-to}}</li>
Expand All @@ -87,7 +87,7 @@
Menu
<span class='arrow'></span>
{{/rl-dropdown-toggle}}
{{#rl-dropdown tagName='ul' class='dropdown current-user-links' closeOnChildClick='a:link'}}
{{#rl-dropdown tagName='ul' class='dropdown current-user-links'}}
<li>{{#link-to "crates"}}Browse All Crates{{/link-to}}</li>
{{#if session.currentUser}}
<li>{{#link-to 'dashboard'}}Dashboard{{/link-to}}</li>
Expand Down
2 changes: 1 addition & 1 deletion app/templates/categories.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<span class='arrow'></span>
{{/rl-dropdown-toggle}}

{{#rl-dropdown tagName="ul" class="dropdown" closeOnChildClick="a:link"}}
{{#rl-dropdown tagName="ul" class="dropdown"}}
<li>
{{#link-to (query-params sort="alpha")}}
Alphabetical
Expand Down
2 changes: 1 addition & 1 deletion app/templates/category/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
<span class='arrow'></span>
{{/rl-dropdown-toggle}}

{{#rl-dropdown tagName="ul" class="dropdown" closeOnChildClick="a:link"}}
{{#rl-dropdown tagName="ul" class="dropdown"}}
<li>
{{#link-to (query-params sort="alpha")}}
Alphabetical
Expand Down
6 changes: 4 additions & 2 deletions app/templates/components/api-token-row.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,10 @@
placeholder="New token name"
disabled=api_token.isSaving
value=api_token.name
autofocus=true
enter="saveToken"}}
autofocus="autofocus"
enter="saveToken"
data-test-focused-input=true
}}
{{else}}
{{ api_token.name }}
{{/if}}
Expand Down
2 changes: 1 addition & 1 deletion app/templates/crates.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
<span class='arrow'></span>
{{/rl-dropdown-toggle}}

{{#rl-dropdown tagName="ul" class="dropdown" closeOnChildClick="a:link"}}
{{#rl-dropdown tagName="ul" class="dropdown"}}
<li>
{{#link-to (query-params page=1 sort="alpha")}}
Alphabetical
Expand Down
2 changes: 1 addition & 1 deletion app/templates/keyword/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
<span class='arrow'></span>
{{/rl-dropdown-toggle}}

{{#rl-dropdown tagName="ul" class="dropdown" closeOnChildClick="a:link"}}
{{#rl-dropdown tagName="ul" class="dropdown"}}
<li>
{{#link-to (query-params sort="alpha")}}
Alphabetical
Expand Down
2 changes: 1 addition & 1 deletion app/templates/keywords.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<span class='arrow'></span>
{{/rl-dropdown-toggle}}

{{#rl-dropdown tagName="ul" class="dropdown" closeOnChildClick="a:link"}}
{{#rl-dropdown tagName="ul" class="dropdown"}}
<li>
{{#link-to (query-params sort="alpha")}}
Alphabetical
Expand Down
2 changes: 1 addition & 1 deletion app/templates/me/crates.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
<span class='arrow'></span>
{{/rl-dropdown-toggle}}

{{#rl-dropdown tagName="ul" class="dropdown" closeOnChildClick="a:link"}}
{{#rl-dropdown tagName="ul" class="dropdown"}}
<li>
{{#link-to (query-params sort="alpha")}}
Alphabetical
Expand Down
2 changes: 1 addition & 1 deletion app/templates/me/following.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<span class='arrow'></span>
{{/rl-dropdown-toggle}}

{{#rl-dropdown tagName="ul" class="dropdown" closeOnChildClick="a:link"}}
{{#rl-dropdown tagName="ul" class="dropdown"}}
<li>
{{#link-to (query-params sort="alpha")}}
Alphabetical
Expand Down
2 changes: 1 addition & 1 deletion app/templates/search.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
<span class='arrow'></span>
{{/rl-dropdown-toggle}}

{{#rl-dropdown tagName="ul" class="dropdown" closeOnChildClick="a:link"}}
{{#rl-dropdown tagName="ul" class="dropdown"}}
<li>
{{#link-to (query-params page=1 sort="relevance")}}
Relevance
Expand Down
2 changes: 1 addition & 1 deletion app/templates/team.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
<span class='arrow'></span>
{{/rl-dropdown-toggle}}

{{#rl-dropdown tagName="ul" class="dropdown" closeOnChildClick="a:link"}}
{{#rl-dropdown tagName="ul" class="dropdown"}}
<li>
{{#link-to (query-params sort="alpha")}}
Alphabetical
Expand Down
2 changes: 1 addition & 1 deletion app/templates/user.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
<span class='arrow'></span>
{{/rl-dropdown-toggle}}

{{#rl-dropdown tagName="ul" class="dropdown" closeOnChildClick="a:link"}}
{{#rl-dropdown tagName="ul" class="dropdown"}}
<li>
{{#link-to (query-params sort="alpha")}}
Alphabetical
Expand Down
19 changes: 19 additions & 0 deletions tests/integration/components/api-token-row-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
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 | api-token-row', function(hooks) {
setupRenderingTest(hooks);

test('input is focused if token is new', async function(assert) {
// Set any properties with this.set('myProperty', 'value');
// Handle any actions with this.set('myAction', function(val) { ... });
this.set('api_token', {
isNew: true,
});

await render(hbs`{{api-token-row api_token=api_token}}`);
assert.dom('[data-test-focused-input]').isFocused();
});
});