mirror of
https://github.com/pulsar-edit/pulsar.git
synced 2024-09-20 07:28:08 +03:00
Start on SelectList, a common base class for filterable lists
Like autocompleter, fuzzy-finder, and event palette
This commit is contained in:
parent
389552c057
commit
a3f25fbc9b
1
.pairs
1
.pairs
@ -3,6 +3,7 @@ pairs:
|
||||
cj: Corey Johnson; cj
|
||||
dg: David Graham; dgraham
|
||||
ks: Kevin Sawicki; kevin
|
||||
jc: Jerry Cheung; jerry
|
||||
email:
|
||||
domain: github.com
|
||||
#global: true
|
||||
|
69
spec/extensions/select-list-spec.coffee
Normal file
69
spec/extensions/select-list-spec.coffee
Normal file
@ -0,0 +1,69 @@
|
||||
SelectList = require 'select-list'
|
||||
{$$} = require 'space-pen'
|
||||
$ = require 'jquery'
|
||||
|
||||
fdescribe "SelectList", ->
|
||||
[selectList, array, list, miniEditor] = []
|
||||
|
||||
beforeEach ->
|
||||
array = [
|
||||
["A", "Alpha"], ["B", "Bravo"], ["C", "Charlie"],
|
||||
["D", "Delta"], ["E", "Echo"], ["F", "Foxtrot"]
|
||||
]
|
||||
|
||||
selectList = new SelectList
|
||||
selectList.maxItems = 4
|
||||
selectList.filterKey = 1
|
||||
selectList.itemForElement = (element) ->
|
||||
$$ -> @li element[1], class: element[0]
|
||||
|
||||
selectList.setArray(array)
|
||||
{list, miniEditor} = selectList
|
||||
|
||||
describe "when an array is assigned", ->
|
||||
it "populates the list with up to maxItems items, based on the liForElement function", ->
|
||||
expect(list.find('li').length).toBe selectList.maxItems
|
||||
expect(list.find('li:eq(0)')).toHaveText 'Alpha'
|
||||
expect(list.find('li:eq(0)')).toHaveClass 'A'
|
||||
|
||||
describe "when the text of the mini editor changes", ->
|
||||
it "filters the elements in the list based on the scoreElement function", ->
|
||||
miniEditor.insertText('la')
|
||||
expect(list.find('li').length).toBe 2
|
||||
expect(list.find('li:contains(Alpha)')).toExist()
|
||||
expect(list.find('li:contains(Delta)')).toExist()
|
||||
|
||||
describe "when move-up / move-down are triggered on the miniEditor", ->
|
||||
it "selects the previous / next item in the list, if there is one", ->
|
||||
expect(list.find('li:first')).toHaveClass 'selected'
|
||||
|
||||
miniEditor.trigger 'move-up'
|
||||
|
||||
expect(list.find('li:first')).toHaveClass 'selected'
|
||||
|
||||
miniEditor.trigger 'move-down'
|
||||
|
||||
expect(list.find('li:eq(0)')).not.toHaveClass 'selected'
|
||||
expect(list.find('li:eq(1)')).toHaveClass 'selected'
|
||||
|
||||
miniEditor.trigger 'move-down'
|
||||
|
||||
expect(list.find('li:eq(1)')).not.toHaveClass 'selected'
|
||||
expect(list.find('li:eq(2)')).toHaveClass 'selected'
|
||||
|
||||
miniEditor.trigger 'move-up'
|
||||
|
||||
expect(list.find('li:eq(2)')).not.toHaveClass 'selected'
|
||||
expect(list.find('li:eq(1)')).toHaveClass 'selected'
|
||||
|
||||
describe "the core:select event", ->
|
||||
it "triggers the selected hook", ->
|
||||
|
||||
describe "the core:cancel event", ->
|
||||
it "triggers the cancelled hook", ->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -49,8 +49,6 @@ describe 'jQuery extensions', ->
|
||||
@div id: 'c'
|
||||
@div id: 'd'
|
||||
|
||||
view.document 'A1'
|
||||
|
||||
view.document
|
||||
'a1': "This is event A2"
|
||||
'b2': "This is event b2"
|
||||
@ -76,4 +74,4 @@ describe 'jQuery extensions', ->
|
||||
['b2', "B2: Looks evil. Kinda is."],
|
||||
['a1', "A1: Waste perfectly-good steak"],
|
||||
['a2']
|
||||
]
|
||||
]
|
||||
|
47
src/app/select-list.coffee
Normal file
47
src/app/select-list.coffee
Normal file
@ -0,0 +1,47 @@
|
||||
$ = require 'jquery'
|
||||
{ View } = require 'space-pen'
|
||||
Editor = require 'editor'
|
||||
fuzzyFilter = require 'fuzzy-filter'
|
||||
|
||||
module.exports =
|
||||
class SelectList extends View
|
||||
@content: ->
|
||||
@div class: 'select-list', =>
|
||||
@subview 'miniEditor', new Editor(mini: true)
|
||||
@ol outlet: 'list'
|
||||
|
||||
maxItems: Infinity
|
||||
|
||||
initialize: ->
|
||||
@miniEditor.getBuffer().on 'change', => @populateList()
|
||||
@on 'move-up', => @selectPreviousItem()
|
||||
@on 'move-down', => @selectNextItem()
|
||||
|
||||
setArray: (@array) ->
|
||||
@populateList()
|
||||
@selectItem(@list.find('li:first'))
|
||||
|
||||
populateList: ->
|
||||
filterQuery = @miniEditor.getText()
|
||||
if filterQuery.length
|
||||
filteredArray = fuzzyFilter(@array, filterQuery, key: @filterKey)
|
||||
else
|
||||
filteredArray = @array
|
||||
|
||||
@list.empty()
|
||||
for i in [0...Math.min(filteredArray.length, @maxItems)]
|
||||
@list.append(@itemForElement(filteredArray[i]))
|
||||
|
||||
selectPreviousItem: ->
|
||||
@selectItem(@getSelectedItem().prev())
|
||||
|
||||
selectNextItem: ->
|
||||
@selectItem(@getSelectedItem().next())
|
||||
|
||||
selectItem: (item) ->
|
||||
if item.length
|
||||
@list.find('.selected').removeClass('selected')
|
||||
item.addClass 'selected'
|
||||
|
||||
getSelectedItem: ->
|
||||
@list.find('li.selected')
|
Loading…
Reference in New Issue
Block a user