diff --git a/spec/app/editor-spec.coffee b/spec/app/editor-spec.coffee index 1b402f6fd..078cf4936 100644 --- a/spec/app/editor-spec.coffee +++ b/spec/app/editor-spec.coffee @@ -71,18 +71,18 @@ describe "Editor", -> editor.setCursorScreenPosition([8, 28]) advanceClock() - previousScrollTop = editor.scroller.scrollTop() - previousScrollLeft = editor.scroller.scrollLeft() + previousScrollTop = editor.scrollbar.scrollTop() + previousScrollLeft = editor.scrollView.scrollLeft() editor.setBuffer(new Buffer) expect(editor.getCursorScreenPosition()).toEqual [0, 0] - expect(editor.scroller.scrollTop()).toBe 0 - expect(editor.scroller.scrollLeft()).toBe 0 + expect(editor.scrollbar.scrollTop()).toBe 0 + expect(editor.scrollView.scrollLeft()).toBe 0 editor.setBuffer(buffer) expect(editor.getCursorScreenPosition()).toEqual [8, 28] - expect(editor.scroller.scrollTop()).toBe previousScrollTop - expect(editor.scroller.scrollLeft()).toBe previousScrollLeft + expect(editor.scrollbar.scrollTop()).toBe previousScrollTop + expect(editor.scrollView.scrollLeft()).toBe previousScrollLeft it "recalls the undo history of the buffer when it is re-assigned", -> editor.insertText('xyz') @@ -400,7 +400,7 @@ describe "Editor", -> expectedPaddingBottom = (buffer.numLines() - 6) * editor.lineHeight expect(editor.lines.css('padding-bottom')).toBe "#{expectedPaddingBottom}px" - describe "when the scroller element is scrolled", -> + describe "when the vertical scrollbar 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) @@ -429,7 +429,7 @@ describe "Editor", -> describe "when scrolling more than the editors height", -> it "removes lines that become invisible and builds lines that become visible", -> - editor.scrollbar.scrollBottom(editor.scroller.prop('scrollHeight')) + editor.scrollbar.scrollBottom(editor.scrollView.prop('scrollHeight')) editor.scrollbar.trigger 'scroll' expect(editor.lines.find('.line').length).toBe 6 expect(editor.lines.find('.line:first').text()).toBe buffer.lineForRow(7) @@ -448,7 +448,7 @@ describe "Editor", -> expectedPaddingBottom = (buffer.numLines() - 8) * editor.lineHeight expect(editor.lines.css('padding-bottom')).toBe "#{expectedPaddingBottom}px" - editor.scrollbar.scrollBottom(editor.scroller.prop('scrollHeight')) + editor.scrollbar.scrollBottom(editor.scrollView.prop('scrollHeight')) editor.scrollbar.trigger 'scroll' expect(editor.lines.css('padding-top')).toBe "#{7 * editor.lineHeight}px" expect(editor.lines.css('padding-bottom')).toBe "0px" @@ -503,23 +503,23 @@ describe "Editor", -> fold.destroy() expect(editor.gutter.find('.line-number:last').text()).toBe '13' - it "adds a drop shadow when the horizontal scroller is scrolled to the right", -> + it "adds a drop shadow when the scroll view is scrolled to the right", -> editor.attachToDom() editor.width(100) expect(editor.gutter).not.toHaveClass('drop-shadow') - editor.scroller.scrollLeft(10) - editor.scroller.trigger('scroll') + editor.scrollView.scrollLeft(10) + editor.scrollView.trigger('scroll') expect(editor.gutter).toHaveClass('drop-shadow') - editor.scroller.scrollLeft(0) - editor.scroller.trigger('scroll') + editor.scrollView.scrollLeft(0) + editor.scrollView.trigger('scroll') expect(editor.gutter).not.toHaveClass('drop-shadow') - it "scrolls the buffer to match the scroll top of the scroller, which contains the lines", -> + it "scrolls the buffer to match the scroll top of the scrollbar", -> editor.attachToDom() editor.height(200) @@ -909,13 +909,13 @@ describe "Editor", -> _.times 6, -> editor.moveCursorDown() window.advanceClock() - expect(editor.scroller.scrollTop()).toBe(0) + expect(editor.scrollView.scrollTop()).toBe(0) editor.moveCursorDown() advanceClock() editor.scrollbar.trigger 'scroll' - expect(editor.scroller.scrollTop()).toBe(editor.lineHeight) + expect(editor.scrollView.scrollTop()).toBe(editor.lineHeight) expect(editor.lines.find('.line').length).toBe 10 expect(editor.lines.find('.line:first').text()).toBe buffer.lineForRow(1) expect(editor.lines.find('.line:last').html()).toBe ' ' # line 10 is blank, but a nbsp holds its height @@ -924,7 +924,7 @@ describe "Editor", -> window.advanceClock() editor.scrollbar.trigger 'scroll' - expect(editor.scroller.scrollTop()).toBe(editor.lineHeight * 2) + expect(editor.scrollView.scrollTop()).toBe(editor.lineHeight * 2) expect(editor.lines.find('.line').length).toBe 10 expect(editor.lines.find('.line:first').text()).toBe buffer.lineForRow(2) expect(editor.lines.find('.line:last').text()).toBe buffer.lineForRow(11) @@ -936,13 +936,13 @@ describe "Editor", -> window.advanceClock() editor.scrollbar.trigger 'scroll' - expect(editor.scroller.scrollTop()).toBe(editor.lineHeight) + expect(editor.scrollView.scrollTop()).toBe(editor.lineHeight) editor.moveCursorUp() window.advanceClock() editor.scrollbar.trigger 'scroll' - expect(editor.scroller.scrollTop()).toBe(0) + expect(editor.scrollView.scrollTop()).toBe(0) it "reduces scroll margins when there isn't enough height to maintain them and scroll smoothly", -> setEditorHeightInLines(editor, 5) @@ -952,12 +952,12 @@ describe "Editor", -> window.advanceClock() editor.scrollbar.trigger 'scroll' - expect(editor.scroller.scrollTop()).toBe(editor.lineHeight) + expect(editor.scrollView.scrollTop()).toBe(editor.lineHeight) editor.moveCursorUp() window.advanceClock() editor.scrollbar.trigger 'scroll' - expect(editor.scroller.scrollTop()).toBe(0) + expect(editor.scrollView.scrollTop()).toBe(0) describe "horizontal scrolling", -> charWidth = null @@ -972,28 +972,28 @@ describe "Editor", -> # moving right editor.setCursorScreenPosition([2, 24]) window.advanceClock() - expect(editor.scroller.scrollLeft()).toBe 0 + expect(editor.scrollView.scrollLeft()).toBe 0 editor.setCursorScreenPosition([2, 25]) window.advanceClock() - expect(editor.scroller.scrollLeft()).toBe charWidth + expect(editor.scrollView.scrollLeft()).toBe charWidth editor.setCursorScreenPosition([2, 28]) window.advanceClock() - expect(editor.scroller.scrollLeft()).toBe charWidth * 4 + expect(editor.scrollView.scrollLeft()).toBe charWidth * 4 # moving left editor.setCursorScreenPosition([2, 9]) window.advanceClock() - expect(editor.scroller.scrollLeft()).toBe charWidth * 4 + expect(editor.scrollView.scrollLeft()).toBe charWidth * 4 editor.setCursorScreenPosition([2, 8]) window.advanceClock() - expect(editor.scroller.scrollLeft()).toBe charWidth * 3 + expect(editor.scrollView.scrollLeft()).toBe charWidth * 3 editor.setCursorScreenPosition([2, 5]) window.advanceClock() - expect(editor.scroller.scrollLeft()).toBe 0 + expect(editor.scrollView.scrollLeft()).toBe 0 it "reduces scroll margins when there isn't enough width to maintain them and scroll smoothly", -> editor.hScrollMargin = 6 @@ -1001,15 +1001,15 @@ describe "Editor", -> editor.setCursorScreenPosition([2, 3]) window.advanceClock() - expect(editor.scroller.scrollLeft()).toBe(0) + expect(editor.scrollView.scrollLeft()).toBe(0) editor.setCursorScreenPosition([2, 4]) window.advanceClock() - expect(editor.scroller.scrollLeft()).toBe(charWidth) + expect(editor.scrollView.scrollLeft()).toBe(charWidth) editor.setCursorScreenPosition([2, 3]) window.advanceClock() - expect(editor.scroller.scrollLeft()).toBe(0) + expect(editor.scrollView.scrollLeft()).toBe(0) describe "when soft-wrap is on", -> beforeEach -> @@ -1020,23 +1020,23 @@ describe "Editor", -> # moving right editor.setCursorScreenPosition([2, 24]) - expect(editor.scroller.scrollLeft()).toBe 0 + expect(editor.scrollView.scrollLeft()).toBe 0 editor.setCursorScreenPosition([2, 25]) - expect(editor.scroller.scrollLeft()).toBe 0 + expect(editor.scrollView.scrollLeft()).toBe 0 editor.setCursorScreenPosition([2, 28]) - expect(editor.scroller.scrollLeft()).toBe 0 + expect(editor.scrollView.scrollLeft()).toBe 0 # moving left editor.setCursorScreenPosition([2, 9]) - expect(editor.scroller.scrollLeft()).toBe 0 + expect(editor.scrollView.scrollLeft()).toBe 0 editor.setCursorScreenPosition([2, 8]) - expect(editor.scroller.scrollLeft()).toBe 0 + expect(editor.scrollView.scrollLeft()).toBe 0 editor.setCursorScreenPosition([2, 5]) - expect(editor.scroller.scrollLeft()).toBe 0 + expect(editor.scrollView.scrollLeft()).toBe 0 describe "when there are multiple cursor", -> beforeEach -> @@ -1397,7 +1397,7 @@ describe "Editor", -> editor.attachToDom() setEditorHeightInLines(editor, 5) editor.lines.trigger mousedownEvent(editor: editor, point: [3, 0]) - editor.scroller.scrollTop(editor.lineHeight * 6) + editor.scrollView.scrollTop(editor.lineHeight * 6) spyOn(editor, "scrollTo").andCallThrough() diff --git a/src/app/editor.coffee b/src/app/editor.coffee index be90002e4..a3da68a64 100644 --- a/src/app/editor.coffee +++ b/src/app/editor.coffee @@ -19,7 +19,7 @@ class Editor extends View @input class: 'hidden-input', outlet: 'hiddenInput' @div class: 'flexbox', => @subview 'gutter', new Gutter - @div class: 'scroller', outlet: 'scroller', => + @div class: 'scroll-view', outlet: 'scrollView', => @div class: 'lines', outlet: 'lines', => @div class: 'scrollbar', outlet: 'scrollbar', => @div outlet: 'scrollbarContent' @@ -204,7 +204,7 @@ class Editor extends View @insertText(e.originalEvent.data) false - @scroller.on 'mousewheel', (e) => + @scrollView.on 'mousewheel', (e) => e = e.originalEvent if e.wheelDeltaY newEvent = document.createEvent("WheelEvent"); @@ -214,11 +214,12 @@ class Editor extends View @scrollbar.on 'scroll', => @updateLines() - @scroller.scrollTop(@scrollbar.scrollTop()) - @gutter.scrollTop(@scroller.scrollTop()) + scrollTop = @scrollbar.scrollTop() + @scrollView.scrollTop(scrollTop) + @gutter.scrollTop(scrollTop) - @scroller.on 'scroll', => - if @scroller.scrollLeft() == 0 + @scrollView.on 'scroll', => + if @scrollView.scrollLeft() == 0 @gutter.removeClass('drop-shadow') else @gutter.addClass('drop-shadow') @@ -295,7 +296,7 @@ class Editor extends View Math.floor(@scrollbar.scrollTop() / @lineHeight) getLastVisibleScreenRow: -> - Math.ceil((@scrollbar.scrollTop() + @scroller.height()) / @lineHeight) - 1 + Math.ceil((@scrollbar.scrollTop() + @scrollView.height()) / @lineHeight) - 1 getScreenLines: -> @renderer.getLines() @@ -355,16 +356,16 @@ 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]) - @scroller.scrollTop(editSession.scrollTop ? 0) - @scroller.scrollLeft(editSession.scrollLeft ? 0) + @scrollbar.scrollTop(editSession.scrollTop ? 0) + @scrollView.scrollLeft(editSession.scrollLeft ? 0) @activeEditSessionIndex = index saveCurrentEditSession: -> @editSessions[@activeEditSessionIndex] = buffer: @buffer cursorScreenPosition: @getCursorScreenPosition() - scrollTop: @scroller.scrollTop() - scrollLeft: @scroller.scrollLeft() + scrollTop: @scrollbar.scrollTop() + scrollLeft: @scrollView.scrollLeft() handleBufferChange: (e) -> @compositeCursor.handleBufferChange(e) @@ -440,7 +441,7 @@ class Editor extends View calcMaxLineLength: -> if @softWrap - Math.floor(@scroller.width() / @charWidth) + Math.floor(@scrollView.width() / @charWidth) else Infinity @@ -502,8 +503,8 @@ class Editor extends View screenPositionFromMouseEvent: (e) -> { pageX, pageY } = e @screenPositionFromPixelPosition - top: pageY - @scroller.offset().top + @scroller.scrollTop() - left: pageX - @scroller.offset().left + @scroller.scrollLeft() + top: pageY - @scrollView.offset().top + @scrollView.scrollTop() + left: pageX - @scrollView.offset().left + @scrollView.scrollLeft() calculateDimensions: -> fragment = $('') @@ -661,32 +662,32 @@ class Editor extends View @scrollHorizontally(pixelPosition) scrollVertically: (pixelPosition) -> - linesInView = @scroller.height() / @lineHeight + linesInView = @scrollView.height() / @lineHeight maxScrollMargin = Math.floor((linesInView - 1) / 2) scrollMargin = Math.min(@vScrollMargin, maxScrollMargin) margin = scrollMargin * @lineHeight desiredTop = pixelPosition.top - margin desiredBottom = pixelPosition.top + @lineHeight + margin - if desiredBottom > @scroller.scrollBottom() + if desiredBottom > @scrollbar.scrollBottom() @scrollbar.scrollBottom(desiredBottom) - else if desiredTop < @scroller.scrollTop() + else if desiredTop < @scrollbar.scrollTop() @scrollbar.scrollTop(desiredTop) scrollHorizontally: (pixelPosition) -> return if @softWrap - charsInView = @scroller.width() / @charWidth + charsInView = @scrollView.width() / @charWidth maxScrollMargin = Math.floor((charsInView - 1) / 2) scrollMargin = Math.min(@hScrollMargin, maxScrollMargin) margin = scrollMargin * @charWidth desiredRight = pixelPosition.left + @charWidth + margin desiredLeft = pixelPosition.left - margin - if desiredRight > @scroller.scrollRight() - @scroller.scrollRight(desiredRight) - else if desiredLeft < @scroller.scrollLeft() - @scroller.scrollLeft(desiredLeft) + if desiredRight > @scrollView.scrollRight() + @scrollView.scrollRight(desiredRight) + else if desiredLeft < @scrollView.scrollLeft() + @scrollView.scrollLeft(desiredLeft) syncCursorAnimations: -> for cursor in @getCursors() diff --git a/src/extensions/autocomplete.coffee b/src/extensions/autocomplete.coffee index a58ea2ea0..32c530bf0 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.scroller.scrollBottom() + if potentialBottom > @editor.scrollbar.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 c30b25781..557d8cc39 100644 --- a/static/editor.css +++ b/static/editor.css @@ -45,18 +45,18 @@ overflow-y: auto; } -.editor .scroller { +.editor .scroll-view { overflow-x: auto; overflow-y: hidden; width: -webkit-flex(1); height: 100%; } -.editor.mini .scroller { +.editor.mini .scroll-view { overflow: hidden; } -.editor.soft-wrap .scroller { +.editor.soft-wrap .scroll-view { overflow-x: hidden; }