Use data attributes instead of class
This commit is contained in:
parent
d565b30ce6
commit
60d2a7c355
7 changed files with 30 additions and 33 deletions
|
@ -83,14 +83,14 @@ class FilteredSearchManager {
|
||||||
if (this.stateFilters) {
|
if (this.stateFilters) {
|
||||||
this.searchStateWrapper = this.searchState.bind(this);
|
this.searchStateWrapper = this.searchState.bind(this);
|
||||||
|
|
||||||
this.stateFilters.querySelector('.state-opened')
|
this.stateFilters.querySelector('[data-state="opened"]')
|
||||||
.addEventListener('click', this.searchStateWrapper);
|
.addEventListener('click', this.searchStateWrapper);
|
||||||
this.stateFilters.querySelector('.state-closed')
|
this.stateFilters.querySelector('[data-state="closed"]')
|
||||||
.addEventListener('click', this.searchStateWrapper);
|
.addEventListener('click', this.searchStateWrapper);
|
||||||
this.stateFilters.querySelector('.state-all')
|
this.stateFilters.querySelector('[data-state="all"]')
|
||||||
.addEventListener('click', this.searchStateWrapper);
|
.addEventListener('click', this.searchStateWrapper);
|
||||||
|
|
||||||
this.mergedState = this.stateFilters.querySelector('.state-merged');
|
this.mergedState = this.stateFilters.querySelector('[data-state="merged"]');
|
||||||
if (this.mergedState) {
|
if (this.mergedState) {
|
||||||
this.mergedState.addEventListener('click', this.searchStateWrapper);
|
this.mergedState.addEventListener('click', this.searchStateWrapper);
|
||||||
}
|
}
|
||||||
|
@ -99,11 +99,11 @@ class FilteredSearchManager {
|
||||||
|
|
||||||
unbindStateEvents() {
|
unbindStateEvents() {
|
||||||
if (this.stateFilters) {
|
if (this.stateFilters) {
|
||||||
this.stateFilters.querySelector('.state-opened')
|
this.stateFilters.querySelector('[data-state="opened"]')
|
||||||
.removeEventListener('click', this.searchStateWrapper);
|
.removeEventListener('click', this.searchStateWrapper);
|
||||||
this.stateFilters.querySelector('.state-closed')
|
this.stateFilters.querySelector('[data-state="closed"]')
|
||||||
.removeEventListener('click', this.searchStateWrapper);
|
.removeEventListener('click', this.searchStateWrapper);
|
||||||
this.stateFilters.querySelector('.state-all')
|
this.stateFilters.querySelector('[data-state="all"]')
|
||||||
.removeEventListener('click', this.searchStateWrapper);
|
.removeEventListener('click', this.searchStateWrapper);
|
||||||
|
|
||||||
if (this.mergedState) {
|
if (this.mergedState) {
|
||||||
|
@ -500,15 +500,12 @@ class FilteredSearchManager {
|
||||||
|
|
||||||
searchState(e) {
|
searchState(e) {
|
||||||
const target = e.currentTarget;
|
const target = e.currentTarget;
|
||||||
|
|
||||||
// remove focus outline after click
|
// remove focus outline after click
|
||||||
target.blur();
|
target.blur();
|
||||||
|
|
||||||
// return class name that has a prefix of `state-`
|
const state = target.dataset && target.dataset.state;
|
||||||
const stateClassName = [].find.call(target.classList, name => name.match(/(state-)(\w+)/g));
|
|
||||||
|
|
||||||
if (stateClassName) {
|
if (state) {
|
||||||
const state = stateClassName.replace('state-', '');
|
|
||||||
this.search(state);
|
this.search(state);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,20 +5,20 @@
|
||||||
|
|
||||||
%ul.nav-links.issues-state-filters
|
%ul.nav-links.issues-state-filters
|
||||||
%li{ class: active_when(params[:state] == 'opened') }>
|
%li{ class: active_when(params[:state] == 'opened') }>
|
||||||
%button.btn.btn-link.state-opened{ id: 'state-opened', title: "Filter by #{page_context_word} that are currently opened.", type: 'button' }
|
%button.btn.btn-link{ id: 'state-opened', title: "Filter by #{page_context_word} that are currently opened.", type: 'button', data: { state: 'opened' } }
|
||||||
#{issuables_state_counter_text(type, :opened)}
|
#{issuables_state_counter_text(type, :opened)}
|
||||||
|
|
||||||
- if type == :merge_requests
|
- if type == :merge_requests
|
||||||
%li{ class: active_when(params[:state] == 'merged') }>
|
%li{ class: active_when(params[:state] == 'merged') }>
|
||||||
%button.btn.btn-link.state-merged{ id: 'state-merged', title: 'Filter by merge requests that are currently merged.', type: 'button' }
|
%button.btn.btn-link{ id: 'state-merged', title: 'Filter by merge requests that are currently merged.', type: 'button', data: { state: 'merged' } }
|
||||||
#{issuables_state_counter_text(type, :merged)}
|
#{issuables_state_counter_text(type, :merged)}
|
||||||
|
|
||||||
- closed_title = 'Filter by merge requests that are currently closed and unmerged.'
|
- closed_title = 'Filter by merge requests that are currently closed and unmerged.'
|
||||||
|
|
||||||
%li{ class: active_when(params[:state] == 'closed') }>
|
%li{ class: active_when(params[:state] == 'closed') }>
|
||||||
%button.btn.btn-link.state-closed{ id: 'state-closed', title: closed_title, type: 'button' }
|
%button.btn.btn-link{ id: 'state-closed', title: closed_title, type: 'button', data: { state: 'closed' } }
|
||||||
#{issuables_state_counter_text(type, :closed)}
|
#{issuables_state_counter_text(type, :closed)}
|
||||||
|
|
||||||
%li{ class: active_when(params[:state] == 'all') }>
|
%li{ class: active_when(params[:state] == 'all') }>
|
||||||
%button.btn.btn-link.state-all{ id: 'state-all', title: "Show all #{page_context_word}.", type: 'button' }
|
%button.btn.btn-link{ id: 'state-all', title: "Show all #{page_context_word}.", type: 'button', data: { state: 'all' } }
|
||||||
#{issuables_state_counter_text(type, :all)}
|
#{issuables_state_counter_text(type, :all)}
|
||||||
|
|
|
@ -28,7 +28,7 @@ class Spinach::Features::ProjectIssues < Spinach::FeatureSteps
|
||||||
end
|
end
|
||||||
|
|
||||||
step 'I click link "Closed"' do
|
step 'I click link "Closed"' do
|
||||||
find('.issues-state-filters .state-closed span', text: 'Closed').click
|
find('.issues-state-filters [data-state="closed"] span', text: 'Closed').click
|
||||||
end
|
end
|
||||||
|
|
||||||
step 'I click button "Unsubscribe"' do
|
step 'I click button "Unsubscribe"' do
|
||||||
|
@ -44,7 +44,7 @@ class Spinach::Features::ProjectIssues < Spinach::FeatureSteps
|
||||||
end
|
end
|
||||||
|
|
||||||
step 'I click link "All"' do
|
step 'I click link "All"' do
|
||||||
find('.issues-state-filters .state-all span', text: 'All').click
|
find('.issues-state-filters [data-state="all"] span', text: 'All').click
|
||||||
# Waits for load
|
# Waits for load
|
||||||
expect(find('.issues-state-filters > .active')).to have_content 'All'
|
expect(find('.issues-state-filters > .active')).to have_content 'All'
|
||||||
end
|
end
|
||||||
|
|
|
@ -26,7 +26,7 @@ class Spinach::Features::ProjectMergeRequests < Spinach::FeatureSteps
|
||||||
end
|
end
|
||||||
|
|
||||||
step 'I click link "All"' do
|
step 'I click link "All"' do
|
||||||
find('.issues-state-filters .state-all span', text: 'All').click
|
find('.issues-state-filters [data-state="all"] span', text: 'All').click
|
||||||
# Waits for load
|
# Waits for load
|
||||||
expect(find('.issues-state-filters > .active')).to have_content 'All'
|
expect(find('.issues-state-filters > .active')).to have_content 'All'
|
||||||
end
|
end
|
||||||
|
@ -36,7 +36,7 @@ class Spinach::Features::ProjectMergeRequests < Spinach::FeatureSteps
|
||||||
end
|
end
|
||||||
|
|
||||||
step 'I click link "Closed"' do
|
step 'I click link "Closed"' do
|
||||||
find('.issues-state-filters .state-closed span', text: 'Closed').click
|
find('.issues-state-filters [data-state="closed"] span', text: 'Closed').click
|
||||||
end
|
end
|
||||||
|
|
||||||
step 'I should see merge request "Wiki Feature"' do
|
step 'I should see merge request "Wiki Feature"' do
|
||||||
|
|
|
@ -777,17 +777,17 @@ describe 'Filter issues', js: true, feature: true do
|
||||||
end
|
end
|
||||||
|
|
||||||
it 'open state' do
|
it 'open state' do
|
||||||
find('.issues-state-filters .state-closed').click
|
find('.issues-state-filters [data-state="closed"]').click
|
||||||
wait_for_requests
|
wait_for_requests
|
||||||
|
|
||||||
find('.issues-state-filters .state-opened').click
|
find('.issues-state-filters [data-state="opened"]').click
|
||||||
wait_for_requests
|
wait_for_requests
|
||||||
|
|
||||||
expect(page).to have_selector('.issues-list .issue', count: 4)
|
expect(page).to have_selector('.issues-list .issue', count: 4)
|
||||||
end
|
end
|
||||||
|
|
||||||
it 'closed state' do
|
it 'closed state' do
|
||||||
find('.issues-state-filters .state-closed').click
|
find('.issues-state-filters [data-state="closed"]').click
|
||||||
wait_for_requests
|
wait_for_requests
|
||||||
|
|
||||||
expect(page).to have_selector('.issues-list .issue', count: 1)
|
expect(page).to have_selector('.issues-list .issue', count: 1)
|
||||||
|
@ -795,7 +795,7 @@ describe 'Filter issues', js: true, feature: true do
|
||||||
end
|
end
|
||||||
|
|
||||||
it 'all state' do
|
it 'all state' do
|
||||||
find('.issues-state-filters .state-all').click
|
find('.issues-state-filters [data-state="all"]').click
|
||||||
wait_for_requests
|
wait_for_requests
|
||||||
|
|
||||||
expect(page).to have_selector('.issues-list .issue', count: 5)
|
expect(page).to have_selector('.issues-list .issue', count: 5)
|
||||||
|
|
|
@ -40,13 +40,13 @@ describe 'Filter merge requests', feature: true do
|
||||||
end
|
end
|
||||||
|
|
||||||
it 'does not change when closed link is clicked' do
|
it 'does not change when closed link is clicked' do
|
||||||
find('.issues-state-filters .state-closed').click
|
find('.issues-state-filters [data-state="closed"]').click
|
||||||
|
|
||||||
expect_assignee_visual_tokens()
|
expect_assignee_visual_tokens()
|
||||||
end
|
end
|
||||||
|
|
||||||
it 'does not change when all link is clicked' do
|
it 'does not change when all link is clicked' do
|
||||||
find('.issues-state-filters .state-all').click
|
find('.issues-state-filters [data-state="all"]').click
|
||||||
|
|
||||||
expect_assignee_visual_tokens()
|
expect_assignee_visual_tokens()
|
||||||
end
|
end
|
||||||
|
@ -73,13 +73,13 @@ describe 'Filter merge requests', feature: true do
|
||||||
end
|
end
|
||||||
|
|
||||||
it 'does not change when closed link is clicked' do
|
it 'does not change when closed link is clicked' do
|
||||||
find('.issues-state-filters .state-closed').click
|
find('.issues-state-filters [data-state="closed"]').click
|
||||||
|
|
||||||
expect_milestone_visual_tokens()
|
expect_milestone_visual_tokens()
|
||||||
end
|
end
|
||||||
|
|
||||||
it 'does not change when all link is clicked' do
|
it 'does not change when all link is clicked' do
|
||||||
find('.issues-state-filters .state-all').click
|
find('.issues-state-filters [data-state="all"]').click
|
||||||
|
|
||||||
expect_milestone_visual_tokens()
|
expect_milestone_visual_tokens()
|
||||||
end
|
end
|
||||||
|
@ -161,13 +161,13 @@ describe 'Filter merge requests', feature: true do
|
||||||
end
|
end
|
||||||
|
|
||||||
it 'does not change when closed link is clicked' do
|
it 'does not change when closed link is clicked' do
|
||||||
find('.issues-state-filters .state-closed').click
|
find('.issues-state-filters [data-state="closed"]').click
|
||||||
|
|
||||||
expect_assignee_label_visual_tokens()
|
expect_assignee_label_visual_tokens()
|
||||||
end
|
end
|
||||||
|
|
||||||
it 'does not change when all link is clicked' do
|
it 'does not change when all link is clicked' do
|
||||||
find('.issues-state-filters .state-all').click
|
find('.issues-state-filters [data-state="all"]').click
|
||||||
|
|
||||||
expect_assignee_label_visual_tokens()
|
expect_assignee_label_visual_tokens()
|
||||||
end
|
end
|
||||||
|
|
|
@ -106,7 +106,6 @@ describe('Filtered Search Manager', () => {
|
||||||
const e = {
|
const e = {
|
||||||
currentTarget: {
|
currentTarget: {
|
||||||
blur: () => {},
|
blur: () => {},
|
||||||
classList: [],
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
spyOn(e.currentTarget, 'blur').and.callThrough();
|
spyOn(e.currentTarget, 'blur').and.callThrough();
|
||||||
|
@ -119,7 +118,6 @@ describe('Filtered Search Manager', () => {
|
||||||
const e = {
|
const e = {
|
||||||
currentTarget: {
|
currentTarget: {
|
||||||
blur: () => {},
|
blur: () => {},
|
||||||
classList: [],
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -131,7 +129,9 @@ describe('Filtered Search Manager', () => {
|
||||||
const e = {
|
const e = {
|
||||||
currentTarget: {
|
currentTarget: {
|
||||||
blur: () => {},
|
blur: () => {},
|
||||||
classList: ['class-name', 'state-opened'],
|
dataset: {
|
||||||
|
state: 'opened',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue