delete PaneResizeHandleView that use jQuery and View and replaced with PaneResizeHandleElement

src/pane-axis-element.coffee

@@ -1,6 +1,6 @@
 {CompositeDisposable} = require 'event-kit'
 {callAttachHooks} = require './space-pen-extensions'
-PaneResizeHandleView = require './pane-resize-handle-view'
+PaneResizeHandleElement = require './pane-resize-handle-element'
 
 class PaneAxisElement extends HTMLElement
   createdCallback: ->
@@ -24,7 +24,7 @@ class PaneAxisElement extends HTMLElement
     this
 
   isPaneResizeHandleElement: (element) ->
-    element?.classList.contains('pane-resize-handle')
+    element?.nodeName.toLowerCase() is 'atom-pane-resize-handle'
 
   childAdded: ({child, index}) ->
     view = atom.views.getView(child)
@@ -33,16 +33,14 @@ class PaneAxisElement extends HTMLElement
     prevElement = view.previousSibling
     # if previous element is not pane resize element, then insert new resize element
     if prevElement? and not @isPaneResizeHandleElement(prevElement)
-      resizeView = new PaneResizeHandleView()
-      resizeView.initialize()
-      @insertBefore(resizeView[0], view)
+      resizeHandle = document.createElement('atom-pane-resize-handle')
+      @insertBefore(resizeHandle, view)
 
     nextElement = view.nextSibling
     # if next element isnot resize element, then insert new resize element
     if nextElement? and not @isPaneResizeHandleElement(nextElement)
-      resizeView = new PaneResizeHandleView()
-      resizeView.initialize()
-      @insertBefore(resizeView[0], nextElement)
+      resizeHandle = document.createElement('atom-pane-resize-handle')
+      @insertBefore(resizeHandle, nextElement)
 
     callAttachHooks(view) # for backward compatibility with SpacePen views
 
@@ -50,7 +48,7 @@ class PaneAxisElement extends HTMLElement
     view = atom.views.getView(child)
     siblingView = view.previousSibling
     # make sure next sibling view is pane resize view
-    if siblingView?.classList.contains('pane-resize-handle')
+    if siblingView? and @isPaneResizeHandleElement(siblingView)
       siblingView.remove()
     view.remove()
 

src/pane-resize-handle-element.coffee

@@ -0,0 +1,64 @@
+class PaneResizeHandleElement extends HTMLElement
+  createdCallback: ->
+    @resizePane = @resizePane.bind(this)
+    @resizeStopped = @resizeStopped.bind(this)
+    @subscribeToDOMEvents()
+
+  subscribeToDOMEvents: ->
+    @addEventListener 'dblclick', @resizeToFitContent.bind(this)
+    @addEventListener 'mousedown', @resizeStarted.bind(this)
+
+  attachedCallback: ->
+    @isHorizontal = @parentElement.classList.contains("horizontal")
+
+  resizeToFitContent: ->
+    # clear flex-grow css style of both pane
+    @previousSibling.style.flexGrow = ''
+    @nextSibling.style.flexGrow = ''
+
+  resizeStarted: (e)->
+    e.stopPropagation()
+    document.addEventListener 'mousemove', @resizePane
+    document.addEventListener 'mouseup', @resizeStopped
+
+  resizeStopped: ->
+    document.removeEventListener 'mousemove', @resizePane
+    document.removeEventListener 'mouseup', @resizeStopped
+
+  calcRatio: (ratio1, ratio2, total) ->
+    allRatio = ratio1 + ratio2
+    [total * ratio1 / allRatio, total * ratio2 / allRatio]
+
+  getFlexGrow: (element) ->
+    parseFloat window.getComputedStyle(element).flexGrow
+
+  setFlexGrow: (prevSize, nextSize) ->
+    flexGrow = @getFlexGrow(@previousSibling) + @getFlexGrow(@nextSibling)
+    flexGrows = @calcRatio(prevSize, nextSize, flexGrow)
+    @previousSibling.style.flexGrow = flexGrows[0]
+    @nextSibling.style.flexGrow = flexGrows[1]
+
+  fixInRange: (val, minValue, maxValue) ->
+    Math.min(Math.max(val, minValue), maxValue)
+
+  resizePane: ({clientX, clientY, which}) ->
+    return @resizeStopped() unless which is 1
+
+    if @isHorizontal
+      totalWidth = @previousSibling.clientWidth + @nextSibling.clientWidth
+      #get the left and right width after move the resize view
+      leftWidth = clientX - @previousSibling.getBoundingClientRect().left
+      leftWidth = @fixInRange(leftWidth, 0, totalWidth)
+      rightWidth = totalWidth - leftWidth
+      # set the flex grow by the ratio of left width and right width
+      # to change pane width
+      @setFlexGrow(leftWidth, rightWidth)
+    else
+      totalHeight = @previousSibling.clientHeight + @nextSibling.clientHeight
+      topHeight = clientY - @previousSibling.getBoundingClientRect().top
+      topHeight = @fixInRange(topHeight, 0, totalHeight)
+      bottomHeight = totalHeight - topHeight
+      @setFlexGrow(topHeight, bottomHeight)
+
+module.exports = PaneResizeHandleElement =
+document.registerElement 'atom-pane-resize-handle', prototype: PaneResizeHandleElement.prototype

src/pane-resize-handle-view.coffee

@@ -1,67 +0,0 @@
-{$, View} = require 'atom-space-pen-views'
-
-module.exports =
-class PaneResizeHandleView extends View
-  @content: ->
-    @div class: 'pane-resize-handle'
-
-  initialize: ->
-    @handleEvents()
-
-  attached: ->
-    @isHorizontal = @parent().hasClass("horizontal")
-
-  detached: ->
-
-  handleEvents: ->
-    @on 'dblclick', =>
-      @resizeToFitContent()
-    @on 'mousedown', (e) =>
-      @resizeStarted(e)
-
-  resizeToFitContent: ->
-    # clear flex-grow css style of both pane
-    @prev().css('flexGrow', '')
-    @next().css('flexGrow', '')
-
-  resizeStarted: (e)->
-    e.stopPropagation()
-    $(document).on('mousemove', @resizePane)
-    $(document).on('mouseup', @resizeStopped)
-
-  calcRatio: (ratio1, ratio2, total) ->
-    allRatio = ratio1 + ratio2
-    [total * ratio1 / allRatio, total * ratio2 / allRatio]
-
-  getFlexGrow: (element) ->
-    parseFloat element.css('flexGrow')
-
-  setFlexGrow: (prevSize, nextSize) ->
-    flexGrow = @getFlexGrow(@prev()) + @getFlexGrow(@next())
-    flexGrows = @calcRatio(prevSize, nextSize, flexGrow)
-    @prev().css('flexGrow', flexGrows[0].toString())
-    @next().css('flexGrow', flexGrows[1].toString())
-
-  fixInRange: (val, minValue, maxValue) ->
-    Math.min(Math.max(val, minValue), maxValue)
-
-  resizePane: ({pageX, pageY, which}) =>
-    return @resizeStopped() unless which is 1
-
-    if @isHorizontal
-      totalWidth = @prev().outerWidth() + @next().outerWidth()
-      #get the left and right width after move the resize view
-      leftWidth = @fixInRange(pageX - @prev().offset().left, 0, totalWidth)
-      rightWidth = totalWidth - leftWidth
-      # set the flex grow by the ratio of left width and right width
-      # to change pane width
-      @setFlexGrow(leftWidth, rightWidth)
-    else
-      totalHeight = @prev().outerHeight() + @next().outerHeight()
-      topHeight = @fixInRange(pageY - @prev().offset().top, 0, totalHeight)
-      bottomHeight = totalHeight - topHeight
-      @setFlexGrow(topHeight, bottomHeight)
-
-  resizeStopped: =>
-    $(document).off('mousemove', @resizePane)
-    $(document).off('mouseup', @resizeStopped)