From 1b013cc029d1ef0ab26c2aa7adf97aa759e7b5f9 Mon Sep 17 00:00:00 2001 From: Nathan Sobo Date: Tue, 2 Oct 2012 11:23:50 -1000 Subject: [PATCH] Add ability to move through select list and 'event-palette:cancel' event --- spec/extensions/event-palette-spec.coffee | 41 ++++++++++++++++--- src/app/editor.coffee | 4 +- .../event-palette/event-palette.coffee | 37 ++++++++++++++++- .../event-palette/event-palette.css | 15 ++++++- 4 files changed, 86 insertions(+), 11 deletions(-) diff --git a/spec/extensions/event-palette-spec.coffee b/spec/extensions/event-palette-spec.coffee index 72d31946a..cd6658a40 100644 --- a/spec/extensions/event-palette-spec.coffee +++ b/spec/extensions/event-palette-spec.coffee @@ -1,6 +1,7 @@ RootView = require 'root-view' EventPalette = require 'event-palette' $ = require 'jquery' +_ = require 'underscore' describe "EventPalette", -> [rootView, palette] = [] @@ -9,14 +10,44 @@ describe "EventPalette", -> rootView = new RootView(require.resolve('fixtures/sample.js')) rootView.activateExtension(EventPalette) palette = EventPalette.instance + rootView.attachToDom().focus() + rootView.trigger 'event-palette:show' afterEach -> rootView.remove() - describe "when shown", -> - it "shows a list of all valid events for the previously focused element, then focuses the mini-editor", -> - rootView.attachToDom().focus() - rootView.trigger 'event-palette:show' + 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.miniEditor.isFocused).toBeTruthy() \ No newline at end of file + + expect(palette.miniEditor.isFocused).toBeTruthy() + expect(palette.find('.event:first')).toHaveClass 'selected' + + describe "when event-palette:cancel is triggered on the event palette", -> + fit "detaches the event palette", -> + expect(palette.hasParent()).toBeTruthy() + palette.trigger('event-palette:cancel') + expect(palette.hasParent()).toBeFalsy() + + describe "when 'move-up' and 'move-down' events are triggered on the mini editor", -> + fit "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') diff --git a/src/app/editor.coffee b/src/app/editor.coffee index bbac15e95..450a10721 100644 --- a/src/app/editor.coffee +++ b/src/app/editor.coffee @@ -93,8 +93,6 @@ class Editor extends View editorBindings = 'move-right': @moveCursorRight 'move-left': @moveCursorLeft - 'move-down': @moveCursorDown - 'move-up': @moveCursorUp 'move-to-next-word': @moveCursorToNextWord 'move-to-previous-word': @moveCursorToPreviousWord 'select-right': @selectRight @@ -136,6 +134,8 @@ class Editor extends View unless @mini _.extend editorBindings, + 'move-down': @moveCursorDown + 'move-up': @moveCursorUp 'save': @save 'newline-below': @insertNewlineBelow 'toggle-soft-wrap': @toggleSoftWrap diff --git a/src/extensions/event-palette/event-palette.coffee b/src/extensions/event-palette/event-palette.coffee index 2a9b90abe..81932420d 100644 --- a/src/extensions/event-palette/event-palette.coffee +++ b/src/extensions/event-palette/event-palette.coffee @@ -11,14 +11,47 @@ class EventPalette extends View @content: -> @div class: 'event-palette', => - @div class: 'event-list', outlet: 'eventList' + @div class: 'select-list', outlet: 'eventList' @subview 'miniEditor', new Editor(mini: true) initialize: (@rootView) -> + @on 'move-up', => @selectPrevious() + @on 'move-down', => @selectNext() + @on 'event-palette:cancel', => @detach() + + selectPrevious: -> + current = @getSelectedItem() + previous = @getSelectedItem().prev() + if previous.length + current.removeClass('selected') + previous.addClass('selected') + @scrollToItem(previous) + + selectNext: -> + current = @getSelectedItem() + next = @getSelectedItem().next() + if next.length + current.removeClass('selected') + next.addClass('selected') + @scrollToItem(next) + + 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') attach: -> @previouslyFocusedElement = $(':focus') @populateEventList() + @eventList.find('.event:first').addClass('selected') @appendTo(@rootView) @miniEditor.focus() @@ -27,7 +60,7 @@ class EventPalette extends View table = $$ -> @table => for [event, description] in events - @tr => + @tr class: 'event', => @td event @td description if description diff --git a/src/extensions/event-palette/event-palette.css b/src/extensions/event-palette/event-palette.css index f6c2f19c6..9a784c7b7 100644 --- a/src/extensions/event-palette/event-palette.css +++ b/src/extensions/event-palette/event-palette.css @@ -1,10 +1,21 @@ .event-palette { position: absolute; + width: 100%; bottom: 0; } -.event-palette .event-list { +.select-list { + background-color: black; + position: relative; max-height: 300px; color: white; overflow-y: auto; -} \ No newline at end of file +} + +.select-list table { + width: 100%; +} + +.select-list .selected { + background-color: green; +}