diff options
author | Jacob Schatz <jacobschatz@Jacobs-MBP.fios-router.home> | 2016-04-09 14:09:45 -0400 |
---|---|---|
committer | Jacob Schatz <jacobschatz@Jacobs-MBP.fios-router.home> | 2016-04-09 14:09:45 -0400 |
commit | 78110f97c3d39e1d2d8490634642eefd237e3d11 (patch) | |
tree | 653d9c1f91a1f9449bba64741f155a2c37ae33a2 | |
parent | cedcc1453cbbd4a8ba43cf932b8765d891f19e0c (diff) | |
download | gitlab-ce-text-select-poc.tar.gz |
Text selection POCtext-select-poc
-rw-r--r-- | app/assets/javascripts/application.js.coffee | 24 | ||||
-rw-r--r-- | app/assets/javascripts/lib/textpopup.js.coffee | 66 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/editor.scss | 40 |
3 files changed, 130 insertions, 0 deletions
diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee index f01c67e9474..4d14d33f21a 100644 --- a/app/assets/javascripts/application.js.coffee +++ b/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() diff --git a/app/assets/javascripts/lib/textpopup.js.coffee b/app/assets/javascripts/lib/textpopup.js.coffee new file mode 100644 index 00000000000..3d5d901b3c4 --- /dev/null +++ b/app/assets/javascripts/lib/textpopup.js.coffee @@ -0,0 +1,66 @@ +((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 diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss index 0f0592a0ab8..daa0dcc4ea1 100644 --- a/app/assets/stylesheets/pages/editor.scss +++ b/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 |