From cc292b604dddb76aed1a27c8f7c9ac589fb0ebd6 Mon Sep 17 00:00:00 2001 From: Corey Johnson & Nathan Sobo Date: Fri, 20 Jul 2012 14:17:14 -0700 Subject: [PATCH] Select preview item when preview list is shown --- spec/extensions/command-panel-spec.coffee | 40 ++++++++++--------- .../command-panel/command-panel.coffee | 23 +++-------- .../command-panel/preview-item.coffee | 15 ------- .../command-panel/preview-list.coffee | 35 ++++++++++++++++ static/command-panel.css | 4 ++ 5 files changed, 66 insertions(+), 51 deletions(-) delete mode 100644 src/extensions/command-panel/preview-item.coffee create mode 100644 src/extensions/command-panel/preview-list.coffee diff --git a/spec/extensions/command-panel-spec.coffee b/spec/extensions/command-panel-spec.coffee index 232278fd8..75deade22 100644 --- a/spec/extensions/command-panel-spec.coffee +++ b/spec/extensions/command-panel-spec.coffee @@ -137,25 +137,6 @@ describe "CommandPanel", -> expect(buffer.lineForRow(0)).toMatch /quicktorta/ expect(buffer.lineForRow(1)).toMatch /var torta/ - describe "when the command returns operations to be previewed", -> - it "displays a preview of the operations above the mini-editor", -> - rootView.attachToDom() - editor.remove() - - rootView.trigger 'command-panel:toggle' - - waitsForPromise -> commandPanel.execute('X x/a+/') - - runs -> - expect(commandPanel).toBeVisible() - expect(commandPanel.previewList).toBeVisible() - previewItem = commandPanel.previewList.find("li:contains(dir/a):first") - expect(previewItem.find('.path').text()).toBe "dir/a" - expect(previewItem.find('.preview').text()).toBe "aaa bbb" - expect(previewItem.find('.preview > .match').text()).toBe "aaa" - - rootView.trigger 'command-panel:toggle' # ensure we can close panel without problems - describe "if the command is malformed", -> it "adds and removes an error class to the command panel and does not close it", -> rootView.trigger 'command-panel:toggle' @@ -187,6 +168,27 @@ describe "CommandPanel", -> commandPanel.miniEditor.trigger 'move-down' expect(commandPanel.miniEditor.getText()).toBe '' + describe "when the command returns operations to be previewed", -> + it "displays a preview of the operations above the mini-editor", -> + rootView.attachToDom() + editor.remove() + + rootView.trigger 'command-panel:toggle' + + waitsForPromise -> commandPanel.execute('X x/a+/') + + runs -> + expect(commandPanel).toBeVisible() + expect(commandPanel.previewList).toBeVisible() + previewItem = commandPanel.previewList.find("li:contains(dir/a):first") + expect(previewItem.find('.path').text()).toBe "dir/a" + expect(previewItem.find('.preview').text()).toBe "aaa bbb" + expect(previewItem.find('.preview > .match').text()).toBe "aaa" + + expect(commandPanel.previewList.find("li:first")).toHaveClass('selected') + + rootView.trigger 'command-panel:toggle' # ensure we can close panel without problems + describe ".execute()", -> it "executes the command and closes the command panel", -> rootView.getActiveEditor().setText("i hate love") diff --git a/src/extensions/command-panel/command-panel.coffee b/src/extensions/command-panel/command-panel.coffee index b1780029b..26eeb6860 100644 --- a/src/extensions/command-panel/command-panel.coffee +++ b/src/extensions/command-panel/command-panel.coffee @@ -2,7 +2,7 @@ CommandInterpreter = require 'command-panel/command-interpreter' RegexAddress = require 'command-panel/commands/regex-address' CompositeCommand = require 'command-panel/commands/composite-command' -PreviewItem = require 'command-panel/preview-item' +PreviewList = require 'command-panel/preview-list' Editor = require 'editor' {SyntaxError} = require('pegjs').parser @@ -31,7 +31,7 @@ class CommandPanel extends View @content: -> @div class: 'command-panel', => - @ol class: 'preview-list', outlet: 'previewList' + @subview 'previewList', new PreviewList() @div class: 'prompt-and-editor', => @div ':', class: 'prompt', outlet: 'prompt' @subview 'miniEditor', new Editor(mini: true) @@ -75,11 +75,11 @@ class CommandPanel extends View execute: (command = @miniEditor.getText()) -> try - @commandInterpreter.eval(command, @rootView.getActiveEditSession()).done (operations) => + @commandInterpreter.eval(command, @rootView.getActiveEditSession()).done (operationsToPreview) => @history.push(command) @historyIndex = @history.length - if operations?.length - @populatePreviewList(operations) + if operationsToPreview?.length + @populatePreviewList(operationsToPreview) else @detach() catch error @@ -91,18 +91,7 @@ class CommandPanel extends View populatePreviewList: (operations) -> @previewedOperations = operations - @previewList.empty() - @previewList.html $$$ -> - for operation in operations - {prefix, suffix, match} = operation.preview() - @li => - @span operation.getPath(), outlet: "path", class: "path" - @span outlet: "preview", class: "preview", => - @span prefix - @span match, class: 'match' - @span suffix - - @previewList.show() + @previewList.populate(operations) navigateBackwardInHistory: -> return if @historyIndex == 0 diff --git a/src/extensions/command-panel/preview-item.coffee b/src/extensions/command-panel/preview-item.coffee deleted file mode 100644 index dc72d2371..000000000 --- a/src/extensions/command-panel/preview-item.coffee +++ /dev/null @@ -1,15 +0,0 @@ -{View} = require 'space-pen' - -module.exports = -class PreviewItem extends View - @content: (operation) -> - {prefix, suffix, match} = operation.preview() - - @li => - @span operation.getPath(), outlet: "path", class: "path" - @span outlet: "preview", class: "preview", => - @span prefix - @span match, class: 'match' - @span suffix - - diff --git a/src/extensions/command-panel/preview-list.coffee b/src/extensions/command-panel/preview-list.coffee new file mode 100644 index 000000000..01740c11f --- /dev/null +++ b/src/extensions/command-panel/preview-list.coffee @@ -0,0 +1,35 @@ +{$$$, View} = require 'space-pen' + +module.exports = +class PreviewList extends View + @content: -> + @ol class: 'preview-list', -> + + selectedOperationIndex: 0 + operations: null + + initialize: -> + + populate: (@operations) -> + @empty() + @html $$$ -> + for operation in operations + {prefix, suffix, match} = operation.preview() + @li => + @span operation.getPath(), outlet: "path", class: "path" + @span outlet: "preview", class: "preview", => + @span prefix + @span match, class: 'match' + @span suffix + + @setSelectedOperationIndex(0) + + @show() + + setSelectedOperationIndex: (index) -> + @children(".selected").removeClass('selected') + console.log @children("li:eq(#{index})") + @children("li:eq(#{index})").addClass('selected') + + #getSelectedOperation: -> + #@operations[@selectedOperationIndex] diff --git a/static/command-panel.css b/static/command-panel.css index 89ffd8dd0..0bc89281f 100644 --- a/static/command-panel.css +++ b/static/command-panel.css @@ -36,3 +36,7 @@ font-weight: bold; padding: .2em; } + +.command-panel .preview-list li.selected { + background-color: green; +} \ No newline at end of file