diff --git a/spec/app/editor-spec.coffee b/spec/app/editor-spec.coffee index 078cf4936..f94881b4d 100644 --- a/spec/app/editor-spec.coffee +++ b/spec/app/editor-spec.coffee @@ -71,17 +71,17 @@ describe "Editor", -> editor.setCursorScreenPosition([8, 28]) advanceClock() - previousScrollTop = editor.scrollbar.scrollTop() + previousScrollTop = editor.verticalScrollbar.scrollTop() previousScrollLeft = editor.scrollView.scrollLeft() editor.setBuffer(new Buffer) expect(editor.getCursorScreenPosition()).toEqual [0, 0] - expect(editor.scrollbar.scrollTop()).toBe 0 + expect(editor.verticalScrollbar.scrollTop()).toBe 0 expect(editor.scrollView.scrollLeft()).toBe 0 editor.setBuffer(buffer) expect(editor.getCursorScreenPosition()).toEqual [8, 28] - expect(editor.scrollbar.scrollTop()).toBe previousScrollTop + expect(editor.verticalScrollbar.scrollTop()).toBe previousScrollTop expect(editor.scrollView.scrollLeft()).toBe previousScrollLeft it "recalls the undo history of the buffer when it is re-assigned", -> @@ -400,56 +400,56 @@ describe "Editor", -> expectedPaddingBottom = (buffer.numLines() - 6) * editor.lineHeight expect(editor.lines.css('padding-bottom')).toBe "#{expectedPaddingBottom}px" - describe "when the vertical scrollbar element is scrolled", -> + describe "when the vertical verticalScrollbar element is scrolled", -> describe "whes scrolling less than the editor's height", -> it "removes lines that become invisible and builds lines that become visisble", -> - editor.scrollbar.scrollTop(editor.lineHeight * 2.5) - editor.scrollbar.trigger 'scroll' + editor.verticalScrollbar.scrollTop(editor.lineHeight * 2.5) + editor.verticalScrollbar.trigger 'scroll' expect(editor.lines.find('.line').length).toBe 6 expect(editor.lines.find('.line:first').text()).toBe buffer.lineForRow(2) expect(editor.lines.find('.line:last').text()).toBe buffer.lineForRow(7) - editor.scrollbar.scrollTop(editor.lineHeight * 3.5) - editor.scrollbar.trigger 'scroll' + editor.verticalScrollbar.scrollTop(editor.lineHeight * 3.5) + editor.verticalScrollbar.trigger 'scroll' expect(editor.lines.find('.line').length).toBe 6 expect(editor.lines.find('.line:first').text()).toBe buffer.lineForRow(3) expect(editor.lines.find('.line:last').text()).toBe buffer.lineForRow(8) - editor.scrollbar.scrollTop(editor.lineHeight * 2.5) - editor.scrollbar.trigger 'scroll' + editor.verticalScrollbar.scrollTop(editor.lineHeight * 2.5) + editor.verticalScrollbar.trigger 'scroll' expect(editor.lines.find('.line').length).toBe 6 expect(editor.lines.find('.line:first').text()).toBe buffer.lineForRow(2) expect(editor.lines.find('.line:last').text()).toBe buffer.lineForRow(7) - editor.scrollbar.scrollTop(0) - editor.scrollbar.trigger 'scroll' + editor.verticalScrollbar.scrollTop(0) + editor.verticalScrollbar.trigger 'scroll' expect(editor.lines.find('.line').length).toBe 6 expect(editor.lines.find('.line:first').text()).toBe buffer.lineForRow(0) expect(editor.lines.find('.line:last').text()).toBe buffer.lineForRow(5) describe "when scrolling more than the editors height", -> it "removes lines that become invisible and builds lines that become visible", -> - editor.scrollbar.scrollBottom(editor.scrollView.prop('scrollHeight')) - editor.scrollbar.trigger 'scroll' + editor.verticalScrollbar.scrollBottom(editor.scrollView.prop('scrollHeight')) + editor.verticalScrollbar.trigger 'scroll' expect(editor.lines.find('.line').length).toBe 6 expect(editor.lines.find('.line:first').text()).toBe buffer.lineForRow(7) expect(editor.lines.find('.line:last').text()).toBe buffer.lineForRow(12) - editor.scrollbar.scrollBottom(0) - editor.scrollbar.trigger 'scroll' + editor.verticalScrollbar.scrollBottom(0) + editor.verticalScrollbar.trigger 'scroll' expect(editor.lines.find('.line').length).toBe 6 expect(editor.lines.find('.line:first').text()).toBe buffer.lineForRow(0) expect(editor.lines.find('.line:last').text()).toBe buffer.lineForRow(5) it "adjusts the vertical padding of the lines element to account for non-rendered lines", -> - editor.scrollbar.scrollTop(editor.lineHeight * 2.5) - editor.scrollbar.trigger 'scroll' + editor.verticalScrollbar.scrollTop(editor.lineHeight * 2.5) + editor.verticalScrollbar.trigger 'scroll' expect(editor.lines.css('padding-top')).toBe "#{2 * editor.lineHeight}px" expectedPaddingBottom = (buffer.numLines() - 8) * editor.lineHeight expect(editor.lines.css('padding-bottom')).toBe "#{expectedPaddingBottom}px" - editor.scrollbar.scrollBottom(editor.scrollView.prop('scrollHeight')) - editor.scrollbar.trigger 'scroll' + editor.verticalScrollbar.scrollBottom(editor.scrollView.prop('scrollHeight')) + editor.verticalScrollbar.trigger 'scroll' expect(editor.lines.css('padding-top')).toBe "#{7 * editor.lineHeight}px" expect(editor.lines.css('padding-bottom')).toBe "0px" @@ -519,16 +519,16 @@ describe "Editor", -> expect(editor.gutter).not.toHaveClass('drop-shadow') - it "scrolls the buffer to match the scroll top of the scrollbar", -> + it "scrolls the buffer to match the scroll top of the verticalScrollbar", -> editor.attachToDom() editor.height(200) - editor.scrollbar.scrollTop(50) - editor.scrollbar.trigger('scroll') + editor.verticalScrollbar.scrollTop(50) + editor.verticalScrollbar.trigger('scroll') expect(editor.gutter.scrollTop()).toBe 50 - editor.scrollbar.scrollTop(20) - editor.scrollbar.trigger('scroll') + editor.verticalScrollbar.scrollTop(20) + editor.verticalScrollbar.trigger('scroll') expect(editor.gutter.scrollTop()).toBe 20 describe "font size", -> @@ -913,7 +913,7 @@ describe "Editor", -> editor.moveCursorDown() advanceClock() - editor.scrollbar.trigger 'scroll' + editor.verticalScrollbar.trigger 'scroll' expect(editor.scrollView.scrollTop()).toBe(editor.lineHeight) expect(editor.lines.find('.line').length).toBe 10 @@ -922,7 +922,7 @@ describe "Editor", -> editor.moveCursorDown() window.advanceClock() - editor.scrollbar.trigger 'scroll' + editor.verticalScrollbar.trigger 'scroll' expect(editor.scrollView.scrollTop()).toBe(editor.lineHeight * 2) expect(editor.lines.find('.line').length).toBe 10 @@ -934,13 +934,13 @@ describe "Editor", -> editor.moveCursorUp() window.advanceClock() - editor.scrollbar.trigger 'scroll' + editor.verticalScrollbar.trigger 'scroll' expect(editor.scrollView.scrollTop()).toBe(editor.lineHeight) editor.moveCursorUp() window.advanceClock() - editor.scrollbar.trigger 'scroll' + editor.verticalScrollbar.trigger 'scroll' expect(editor.scrollView.scrollTop()).toBe(0) @@ -950,13 +950,13 @@ describe "Editor", -> _.times 3, -> editor.moveCursorDown() window.advanceClock() - editor.scrollbar.trigger 'scroll' + editor.verticalScrollbar.trigger 'scroll' expect(editor.scrollView.scrollTop()).toBe(editor.lineHeight) editor.moveCursorUp() window.advanceClock() - editor.scrollbar.trigger 'scroll' + editor.verticalScrollbar.trigger 'scroll' expect(editor.scrollView.scrollTop()).toBe(0) describe "horizontal scrolling", -> diff --git a/src/app/editor.coffee b/src/app/editor.coffee index a3da68a64..289235690 100644 --- a/src/app/editor.coffee +++ b/src/app/editor.coffee @@ -21,8 +21,8 @@ class Editor extends View @subview 'gutter', new Gutter @div class: 'scroll-view', outlet: 'scrollView', => @div class: 'lines', outlet: 'lines', => - @div class: 'scrollbar', outlet: 'scrollbar', => - @div outlet: 'scrollbarContent' + @div class: 'vertical-scrollbar', outlet: 'verticalScrollbar', => + @div outlet: 'verticalScrollbarContent' @classes: ({mini}) -> classes = ['editor'] @@ -209,12 +209,12 @@ class Editor extends View if e.wheelDeltaY newEvent = document.createEvent("WheelEvent"); newEvent.initWebKitWheelEvent(0, e.wheelDeltaY, e.view, e.screenX, e.screenY, e.clientX, e.clientY, e.ctrlKey, e.altKey, e.shiftKey, e.metaKey) - @scrollbar.get(0).dispatchEvent(newEvent) + @verticalScrollbar.get(0).dispatchEvent(newEvent) false - @scrollbar.on 'scroll', => + @verticalScrollbar.on 'scroll', => @updateLines() - scrollTop = @scrollbar.scrollTop() + scrollTop = @verticalScrollbar.scrollTop() @scrollView.scrollTop(scrollTop) @gutter.scrollTop(scrollTop) @@ -260,7 +260,7 @@ class Editor extends View @insertLineElements(0, @buildLineElements(@firstRenderedScreenRow, @lastRenderedScreenRow)) @lines.css('padding-bottom', (@getLastScreenRow() - @lastRenderedScreenRow) * @lineHeight) - @scrollbarContent.height(@lineHeight * @screenLineCount()) + @verticalScrollbarContent.height(@lineHeight * @screenLineCount()) updateLines: -> firstVisibleScreenRow = @getFirstVisibleScreenRow() @@ -293,10 +293,10 @@ class Editor extends View @lastRenderedScreenRow = lastVisibleScreenRow getFirstVisibleScreenRow: -> - Math.floor(@scrollbar.scrollTop() / @lineHeight) + Math.floor(@verticalScrollbar.scrollTop() / @lineHeight) getLastVisibleScreenRow: -> - Math.ceil((@scrollbar.scrollTop() + @scrollView.height()) / @lineHeight) - 1 + Math.ceil((@verticalScrollbar.scrollTop() + @scrollView.height()) / @lineHeight) - 1 getScreenLines: -> @renderer.getLines() @@ -356,7 +356,7 @@ class Editor extends View throw new Error("Edit session not found") unless editSession @setBuffer(editSession.buffer) unless @buffer == editSession.buffer @setCursorScreenPosition(editSession.cursorScreenPosition ? [0, 0]) - @scrollbar.scrollTop(editSession.scrollTop ? 0) + @verticalScrollbar.scrollTop(editSession.scrollTop ? 0) @scrollView.scrollLeft(editSession.scrollLeft ? 0) @activeEditSessionIndex = index @@ -364,7 +364,7 @@ class Editor extends View @editSessions[@activeEditSessionIndex] = buffer: @buffer cursorScreenPosition: @getCursorScreenPosition() - scrollTop: @scrollbar.scrollTop() + scrollTop: @verticalScrollbar.scrollTop() scrollLeft: @scrollView.scrollLeft() handleBufferChange: (e) -> @@ -381,7 +381,7 @@ class Editor extends View if @attached lineElements = @buildLineElements(newRange.start.row, newRange.end.row) @replaceLineElements(oldRange.start.row, oldRange.end.row, lineElements) - @scrollbarContent.height(@lineHeight * @screenLineCount()) + @verticalScrollbarContent.height(@lineHeight * @screenLineCount()) buildLineElements: (startRow, endRow) -> charWidth = @charWidth @@ -669,10 +669,10 @@ class Editor extends View desiredTop = pixelPosition.top - margin desiredBottom = pixelPosition.top + @lineHeight + margin - if desiredBottom > @scrollbar.scrollBottom() - @scrollbar.scrollBottom(desiredBottom) - else if desiredTop < @scrollbar.scrollTop() - @scrollbar.scrollTop(desiredTop) + if desiredBottom > @verticalScrollbar.scrollBottom() + @verticalScrollbar.scrollBottom(desiredBottom) + else if desiredTop < @verticalScrollbar.scrollTop() + @verticalScrollbar.scrollTop(desiredTop) scrollHorizontally: (pixelPosition) -> return if @softWrap diff --git a/src/extensions/autocomplete.coffee b/src/extensions/autocomplete.coffee index 32c530bf0..309441d71 100644 --- a/src/extensions/autocomplete.coffee +++ b/src/extensions/autocomplete.coffee @@ -124,7 +124,7 @@ class Autocomplete extends View { left, top } = @editor.pixelPositionForScreenPosition(originalCursorPosition) potentialTop = top + @editor.lineHeight potentialBottom = potentialTop + @outerHeight() - if potentialBottom > @editor.scrollbar.scrollBottom() + if potentialBottom > @editor.verticalScrollbar.scrollBottom() @css(left: left, bottom: @editor.lines.height() - top, top: 'inherit') else @css(left: left, top: potentialTop, bottom: 'inherit') diff --git a/static/editor.css b/static/editor.css index 557d8cc39..89096923b 100644 --- a/static/editor.css +++ b/static/editor.css @@ -36,7 +36,7 @@ -webkit-box-shadow: -2px 0px 10px 2px #222; } -.editor .scrollbar { +.editor .vertical-scrollbar { position: absolute; right: 0; top: 0;