Text selection POC

app/assets/javascripts/application.js.coffee

@@ -282,5 +282,29 @@ $ ->
     .on "resize", (e) ->
       fitSidebarForSize()
+  $('.note-text').textPopup({
+    buttons: [{
+      icon: 'fa fa-arrow-down',
+      title: 'copy markdown',
+      click: (e) ->
+        console.log('icon click')
+      },{
+      icon: 'fa fa-font',
+      title: 'copy plain text'
+      click: (e) ->
+        console.log('icon font')
+      },{
+      icon: 'fa fa-comment',
+      title: 'comment',
+      click: (e) ->
+        console.log('icon comment')
+      },{
+      icon: 'fa fa-link',
+      title: 'copy link',
+      click: (e) ->
+        console.log('link clicked')
+    }]
+  })
+
   checkInitialSidebarSize()
   new Aside()

app/assets/javascripts/lib/textpopup.js.coffee

+((w) ->
+  if not w.gl? then w.gl = {}
+  if not gl.text? then gl.text = {}
+  if not gl.mouse? then gl.mouse = {}
+
+  gl.text.getSelectionText = ->
+    text = ''
+    if w.getSelection
+      text = w.getSelection().toString()
+    else if document.selection and document.selection.type is not "Control"
+      text = document.selection.createRange().text
+    text
+
+  gl.mouse.isRightClick = (e) ->
+    if not e? then e = window.event
+    if e.which
+      isItRightClick = (e.which is 3)
+    else if e.button
+      isItRightClick = (e.button is 2)
+    isItRightClick
+
+
+  $.fn.textPopup = (options) ->
+    return this.each(->
+      tooltipTemplate = _.template('
+      <div class="text-selection-popup">
+        <% _.each(buttons, function(button){ %>
+          <a href="#" class="text-selection-icon" title="<%= button.title %>">
+            <i class="<%= button.icon %>"></i>
+          </a>
+        <% }); %>
+      </div>
+      ')
+      $(this).on('mousedown', (e) ->
+        $('body').attr('mouse-top', e.clientY + window.pageYOffset)
+        $('body').attr('mouse-left', e.clientX)
+
+        if not gl.mouse.isRightClick(e) and gl.text.getSelectionText().length > 0
+          $('.text-selection-popup').remove()
+          document.getSelection().removeAllRanges()
+      )
+
+      $(this).on('mouseup', (e) ->
+        $target = $(e.target)
+        selectionText = gl.text.getSelectionText()
+        if selectionText.length > 3 and not gl.mouse.isRightClick(e)
+          mouseTopStart = $('body').attr('mouse-top')
+          mouseTopEnd = e.clientY + w.pageYOffset
+          if parseInt(mouseTopStart) < parseInt(mouseTopEnd)
+            mouseTop = mouseTopStart
+          else
+            mouseTop = mouseTopEnd
+
+          mouseLeftPosition = $('body').attr('mouse-left')
+          mouseRightPosition = e.clientX
+          mouseLeft = parseInt(mouseLeftPosition) + (parseInt(mouseRightPosition) - parseInt(mouseLeftPosition)) / 2
+          $('body').append(tooltipTemplate(options))
+
+          $('.text-selection-popup').css({
+            position: 'absolute'
+            top: parseInt(mouseTop) - 60
+            left: parseInt(mouseLeft)
+          })
+      )
+    )
+) window
\ No newline at end of file

app/assets/stylesheets/pages/editor.scss

@@ -54,3 +54,43 @@
     float: right;
   }
 }
+
+.text-selection-popup {
+  position: relative;
+  background: $gray-light;
+  border: 2px solid $border-gray-dark;
+  padding: 10px;
+  border-radius: $dropdown-border-radius;
+
+  .text-selection-icon {
+    margin-left: 10px;
+    &:first-child {
+      margin-left: 0px;
+    }
+  }
+
+  &:after, &:before {
+    top: 100%;
+    left: 50%;
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+  }
+
+  &:after {
+    border-color: rgba(255, 255, 255, 0);
+    border-top-color: #ffffff;
+    border-width: 6px;
+    margin-left: -6px;
+  }
+
+  &:before {
+    border-color: rgba(204, 204, 204, 0);
+    border-top-color: $border-gray-dark;
+    border-width: 9px;
+    margin-left: -9px;
+  }
+}
\ No newline at end of file