Skip to content
This repository has been archived by the owner on Dec 11, 2019. It is now read-only.

Commit

Permalink
Shift + click to range select
Browse files Browse the repository at this point in the history 
Auditors: @bsclifton

Test Plan:
1. Click one entry
2. Shift + click another entry in the same table
3. The entry between these two will also be selected

1. Click one entry as start point
2. command/control click other entries between start point and end point in next step
3. Shift + click an entry as end point
4. The entry between start and end point should be selected

Note that range select are not allow across tables
  • Loading branch information
@darkdh
darkdh committed Oct 10, 2016
1 parent dcc8e49 commit 965adb0
Show file tree
Hide file tree
Showing 2 changed files with 79 additions and 3 deletions.
21 changes: 21 additions & 0 deletions js/components/sortableTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,27 @@ class SortableTable extends ImmutableComponent {
} else {
targetElement.className += ' ' + 'selected'
}
} else if (e.shiftKey) {
const selected = document.querySelectorAll('.selected')
const targetID = targetElement.id
const tableEntries = targetElement.parentNode.childNodes
selected.forEach((entry) => {
if (entry.id === targetID) {
if (entry.rowIndex < targetElement.rowIndex) {
for (let i = entry.rowIndex - 1; i < targetElement.rowIndex; ++i) {
if (!tableEntries[i].className.includes(' selected')) {
tableEntries[i].className += ' ' + 'selected'
}
}
} else if (entry.rowIndex > targetElement.rowIndex) {
for (let i = targetElement.rowIndex - 1; i < entry.rowIndex; ++i) {
if (!tableEntries[i].className.includes(' selected')) {
tableEntries[i].className += ' ' + 'selected'
}
}
}
}
})
} else {
let sameTarget = false
const selected = document.querySelectorAll('.selected')
Expand Down
61 changes: 58 additions & 3 deletions test/about/historyTest.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ describe('about:history', function () {
.addSite({ location: 'https://brave.com', title: 'Brave' })
.addSite({ location: 'https://brave.com/test', customTitle: 'customTest' })
.addSite({ location: 'https://www.youtube.com' })
.addSite({ location: 'https://www.facebook.com' })
.waitForExist('.tab[data-frame-key="1"]')
.tabByIndex(0)
.url(aboutHistoryUrl)
Expand All @@ -44,7 +45,7 @@ describe('about:history', function () {
// search box

// Multi Select
it('Simulate click behavior', function * () {
it('Simulate cmd/control click behavior', function * () {
yield this.app.client
.tabByUrl(aboutHistoryUrl)
.click('table.sortableTable td.title[data-sort="Brave"]')
Expand All @@ -59,9 +60,63 @@ describe('about:history', function () {
.waitForVisible('table.sortableTable tr.selected td.title[data-sort="Brave"]')
.waitForVisible('table.sortableTable tr.selected td.title[data-sort="https://www.youtube.com"]')
.waitForVisible('table.sortableTable td.title[data-sort="https://brave.com/test"]')
.click('table.sortableTable td.title[data-sort="https://brave.com/test"]')
.waitForVisible('table.sortableTable tr.selected td.title[data-sort="https://brave.com/test"]')
// key depressed
.isDarwin().then((val) => {
if (val === true) {
return this.app.client.keys(Brave.keys.COMMAND)
} else {
return this.app.client.keys(Brave.keys.CONTROL)
}
})
.click('table.sortableTable td.title[data-sort="https://www.facebook.com"]')
.waitForVisible('table.sortableTable tr.selected td.title[data-sort="https://www.facebook.com"]')
.waitForVisible('table.sortableTable td.title[data-sort="https://brave.com/test"]')
.waitForVisible('table.sortableTable td.title[data-sort="Brave"]')
.waitForVisible('table.sortableTable td.title[data-sort="https://www.youtube.com"]')
// reset state
.click('table.sortableTable td.title[data-sort="https://www.facebook.com"]')
.waitForVisible('table.sortableTable td.title[data-sort="https://www.facebook.com"]')
})
it('Simulate shift click behavior', function * () {
yield this.app.client
.tabByUrl(aboutHistoryUrl)
.click('table.sortableTable td.title[data-sort="Brave"]')
.keys(Brave.keys.SHIFT)
.click('table.sortableTable td.title[data-sort="https://www.youtube.com"]')
.waitForVisible('table.sortableTable tr.selected td.title[data-sort="Brave"]')
.waitForVisible('table.sortableTable tr.selected td.title[data-sort="https://www.youtube.com"]')
.waitForVisible('table.sortableTable tr.selected td.title[data-sort="https://brave.com/test"]')
.waitForVisible('table.sortableTable td.title[data-sort="https://www.facebook.com"]')
// key depressed
.keys(Brave.keys.SHIFT)
.click('table.sortableTable td.title[data-sort="https://www.facebook.com"]')
.waitForVisible('table.sortableTable tr.selected td.title[data-sort="https://www.facebook.com"]')
.isDarwin().then((val) => {
if (val === true) {
return this.app.client.keys(Brave.keys.COMMAND)
} else {
return this.app.client.keys(Brave.keys.CONTROL)
}
})
.click('table.sortableTable td.title[data-sort="https://www.youtube.com"]')
.waitForVisible('table.sortableTable tr.selected td.title[data-sort="https://www.youtube.com"]')
// key depressed
.isDarwin().then((val) => {
if (val === true) {
return this.app.client.keys(Brave.keys.COMMAND)
} else {
return this.app.client.keys(Brave.keys.CONTROL)
}
})
.keys(Brave.keys.SHIFT)
.click('table.sortableTable td.title[data-sort="Brave"]')
.waitForVisible('table.sortableTable tr.selected td.title[data-sort="Brave"]')
.waitForVisible('table.sortableTable tr.selected td.title[data-sort="https://www.youtube.com"]')
.waitForVisible('table.sortableTable tr.selected td.title[data-sort="https://brave.com/test"]')
.waitForVisible('table.sortableTable tr.selected td.title[data-sort="https://www.facebook.com"]')
// reset state
// key depressed
.keys(Brave.keys.SHIFT)
.click('table.sortableTable td.title[data-sort="Brave"]')
})
})

0 comments on commit 965adb0

Please sign in to comment.