diff --git a/spec/extensions/event-palette-spec.coffee b/spec/extensions/event-palette-spec.coffee index bc5e0ab9e..6813bb512 100644 --- a/spec/extensions/event-palette-spec.coffee +++ b/spec/extensions/event-palette-spec.coffee @@ -19,68 +19,27 @@ describe "EventPalette", -> describe "when event-palette:show is triggered on the root view", -> it "shows a list of all valid events for the previously focused element, then focuses the mini-editor and selects the first event", -> for [event, description] in rootView.getActiveEditor().events() - expect(palette.eventList.find("td:contains(#{event})")).toExist() + expect(palette.list.find(".event:contains(#{event})")).toExist() expect(palette.miniEditor.isFocused).toBeTruthy() expect(palette.find('.event:first')).toHaveClass 'selected' - describe "when event-palette:cancel is triggered on the event palette", -> + describe "when the event palette is cancelled", -> it "focuses the root view and detaches the event palette", -> expect(palette.hasParent()).toBeTruthy() - palette.trigger('event-palette:cancel') + palette.cancel() expect(palette.hasParent()).toBeFalsy() expect(rootView.getActiveEditor().isFocused).toBeTruthy() - describe "when 'move-up' and 'move-down' events are triggered on the mini editor", -> - it "selects the next and previous event, if there is one, and scrolls the list to it", -> - palette.miniEditor.trigger 'move-up' - expect(palette.find('.event:eq(0)')).toHaveClass 'selected' - - palette.miniEditor.trigger 'move-down' - expect(palette.find('.event:eq(0)')).not.toHaveClass 'selected' - expect(palette.find('.event:eq(1)')).toHaveClass 'selected' - - palette.miniEditor.trigger 'move-down' - expect(palette.find('.event:eq(1)')).not.toHaveClass 'selected' - expect(palette.find('.event:eq(2)')).toHaveClass 'selected' - - palette.miniEditor.trigger 'move-up' - expect(palette.find('.event:eq(2)')).not.toHaveClass 'selected' - expect(palette.find('.event:eq(1)')).toHaveClass 'selected' - - _.times palette.find('.event').length, -> - palette.miniEditor.trigger 'move-down' - - expect(palette.eventList.scrollTop() + palette.eventList.height()).toBe palette.eventList.prop('scrollHeight') - - describe "event triggering", -> - eventHandler = null - - beforeEach -> + describe "when an event selection is confirmed", -> + it "detaches the palette, then focuses the previously focused element and emits the selected event on it", -> eventHandler = jasmine.createSpy 'eventHandler' + activeEditor = rootView.getActiveEditor() + [eventName, description] = palette.array[4] + activeEditor.preempt eventName, eventHandler - describe "when event-palette:select is triggered on the palette", -> - it "emits the selected event on the last focused element, then detaches the palette", -> - _.times 3, -> palette.miniEditor.trigger 'move-down' - - rootView.getActiveEditor().preempt palette.getSelectedEventName(), eventHandler - palette.trigger 'event-palette:select' - expect(eventHandler).toHaveBeenCalled() - - expect(rootView.getActiveEditor().isFocused).toBeTruthy() - expect(palette.hasParent()).toBeFalsy() - - describe "when an item is clicked", -> - it "selects item and triggers its event", -> - element = palette.eventList.find('.event:eq(3)') - - element.mousedown() - expect(element).toHaveClass 'selected' - - rootView.getActiveEditor().preempt palette.getSelectedEventName(), eventHandler - - element.mouseup() - expect(eventHandler).toHaveBeenCalled() - rootView.getActiveEditor().preempt palette.getSelectedEventName(), eventHandler - element.click() + palette.confirmed(palette.array[4]) + expect(activeEditor.isFocused).toBeTruthy() + expect(eventHandler).toHaveBeenCalled() + expect(palette.hasParent()).toBeFalsy() diff --git a/src/extensions/event-palette/event-palette.coffee b/src/extensions/event-palette/event-palette.coffee index ca708f06d..3b60c61f5 100644 --- a/src/extensions/event-palette/event-palette.coffee +++ b/src/extensions/event-palette/event-palette.coffee @@ -1,34 +1,35 @@ {View, $$} = require 'space-pen' +SelectList = require 'select-list' Editor = require 'editor' $ = require 'jquery' module.exports = -class EventPalette extends View +class EventPalette extends SelectList @activate: (rootView) -> requireStylesheet 'event-palette/event-palette.css' @instance = new EventPalette(rootView) rootView.on 'event-palette:show', => @instance.attach() - @content: -> - @div class: 'event-palette', => - @div class: 'select-list', outlet: 'eventList' - @subview 'miniEditor', new Editor(mini: true) + @viewClass: -> + "#{super} event-palette" + + filterKey: 0 # filter on the event name for now initialize: (@rootView) -> - @on 'move-up', => @selectPrevious() - @on 'move-down', => @selectNext() - @on 'event-palette:cancel', => @detach() - @on 'event-palette:select', => @triggerSelectedEvent() - @on 'mousedown', '.event', (e) => @selectItem($(e.target).closest('.event')) - @on 'mouseup', '.event', => @triggerSelectedEvent() + super attach: -> @previouslyFocusedElement = $(':focus') - @populateEventList() - @eventList.find('.event:first').addClass('selected') + @setArray(@previouslyFocusedElement.events()) @appendTo(@rootView) @miniEditor.focus() + itemForElement: ([eventName, description]) -> + $$ -> + @li class: 'event', => + @div eventName, class: 'event-name' + @div description, class: 'event-description' + populateEventList: -> events = @previouslyFocusedElement.events() table = $$ -> @@ -40,39 +41,10 @@ class EventPalette extends View @eventList.html(table) - selectPrevious: -> - @selectItem(@getSelectedItem().prev()) + confirmed: ([eventName, description]) -> + @cancel() + @previouslyFocusedElement.trigger(eventName) - selectNext: -> - @selectItem(@getSelectedItem().next()) - - selectItem: (item) -> - return unless item.length - @eventList.find('.selected').removeClass('selected') - item.addClass('selected') - @scrollToItem(item) - - scrollToItem: (item) -> - scrollTop = @eventList.prop('scrollTop') - desiredTop = item.position().top + scrollTop - desiredBottom = desiredTop + item.height() - - if desiredTop < scrollTop - @eventList.scrollTop(desiredTop) - else if desiredBottom > @eventList.scrollBottom() - @eventList.scrollBottom(desiredBottom) - - getSelectedItem: -> - @eventList.find('.selected') - - getSelectedEventName: -> - @getSelectedItem().find('.event-name').text() - - triggerSelectedEvent: -> + cancelled: -> @previouslyFocusedElement.focus() - @previouslyFocusedElement.trigger(@getSelectedEventName()) - @detach() - detach: -> - @rootView.focus() if @miniEditor.isFocused - super diff --git a/src/extensions/event-palette/event-palette.css b/src/extensions/event-palette/event-palette.css index 8deb678dc..8b1378917 100644 --- a/src/extensions/event-palette/event-palette.css +++ b/src/extensions/event-palette/event-palette.css @@ -1,21 +1 @@ -.event-palette { - position: absolute; - width: 100%; - bottom: 0; -} -.event-palette .select-list { - background-color: black; - position: relative; - max-height: 300px; - color: white; - overflow-y: auto; -} - -.event-palette .select-list table { - width: 100%; -} - -.event-palette .select-list .selected { - background-color: green; -}