diff --git a/bower.json b/bower.json index b43360485a..361ecbf7bc 100644 --- a/bower.json +++ b/bower.json @@ -22,6 +22,7 @@ "lightbox2": "~2.8.1", "rxjs": "~4.0.6", "CodeMirror": "~5.8.0", - "chai": "~3.4.1" + "chai": "~3.4.1", + "clipboard": "~1.5.5" } } diff --git a/client/commonFramework/create-editor.js b/client/commonFramework/create-editor.js index 7990fb9c4f..6282967149 100644 --- a/client/commonFramework/create-editor.js +++ b/client/commonFramework/create-editor.js @@ -3,6 +3,7 @@ window.common = (function(global) { Rx: { Subject, Observable }, CodeMirror, emmetCodeMirror, + Clipboard, common = { init: [] } } = global; @@ -36,6 +37,120 @@ window.common = (function(global) { } ); + var clipboard = new Clipboard('.copy-btn', { + text: function(trigger) { + var type; + switch (common.challengeType) { + case common.challengeTypes.HTML: + type = 'html'; + break; + case common.challengeTypes.JS: + case common.challengeTypes.BONFIRE: + type = 'js'; + break; + default: + type = ''; + } + + var returnValue = ''; + switch (trigger.id) { + case 'markdown': + returnValue = '```' + type + '\n' + editor.getSelection() + '\n```'; + editor.replaceSelection(editor.getSelection()); + return returnValue; + case 'plain': + returnValue = editor.getSelection(); + editor.replaceSelection(editor.getSelection()); + return returnValue; + case 'link': + default: + editor.replaceSelection(editor.getSelection()); + return '[Challenge - ' + common.challengeName + + (common.username ? ' (' + common.username + '\'s solution)' : '') + + '](' + String(window.location).replace(/\)/g, '%29') + ')'; + } + } + }); + + common.clipboard = clipboard; + + var copyButton = ``; + + var left = -5, top = -5; + $(document).mousemove(function(event) { + left = event.pageX; + top = event.pageY; + }); + + function debounce(func, wait, immediate) { + var timeout; + return function() { + var context = this, args = arguments; + var later = function() { + timeout = null; + if (!immediate) { + func.apply(context, args); + } + }; + var callNow = immediate && !timeout; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + if (callNow) { + func.apply(context, args); + } + }; + } + + var showPopover = debounce(function() { + if (editor.somethingSelected()) { + $('#copy-btn-parent').popover('show'); + var editorOffset = $('#mainEditorPanel > form.code').offset(), + editorHeight = $('#mainEditorPanel > form.code').height(), + editorWidth = $('#mainEditorPanel > form.code').width(), + theHeight = $('.popover').height(), + theWidth = $('.popover').width(); + if ((left < editorOffset.left + || left > editorOffset.left + editorWidth - theWidth) || left === -5) { + left = (editorOffset.left + editorWidth) / 2; + } + if ((top < editorOffset.top + || top > editorOffset.top + editorHeight - theHeight) || top === -5) { + top = (editorOffset.top + editorHeight) / 2; + } + $('.popover').css('left', (left + 10) + 'px'); + $('.popover').css('top', (top - (theHeight / 2) - 7) + 'px'); + } + }, 250); + + if ( + challengeType === challengeTypes.HTML || + challengeType === challengeTypes.JS || + challengeType === challengeTypes.BONFIRE + ) { + + $('body').append(copyButton); + $('#copy-btn-parent').popover({html: true}); + + CodeMirror.on(document, 'mousedown', function() { + $('#copy-btn-parent').popover('hide'); + }); + + CodeMirror.on(document, 'mouseup', showPopover); + + $(document).on('click', '.copy-btn', function(e) { + e.preventDefault(); + $('#copy-btn-parent').popover('hide'); + }); + } + editor.setSize('100%', 'auto'); common.editorExecute$ = new Subject(); @@ -68,6 +183,14 @@ window.common = (function(global) { 'Cmd-Enter': function() { common.editorExecute$.onNext(); return false; + }, + 'Ctrl-A': function(cm) { + cm.execCommand('selectAll'); + showPopover(); + }, + 'Cmd-A': function(cm) { + cm.execCommand('selectAll'); + showPopover(); } }); diff --git a/gulpfile.js b/gulpfile.js index 902f142ce3..45e64095bf 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -80,6 +80,7 @@ var paths = { vendorChallenges: [ 'public/bower_components/jshint/dist/jshint.js', 'public/bower_components/chai/chai.js', + 'public/bower_components/clipboard/dist/clipboard.min.js', 'public/bower_components/CodeMirror/lib/codemirror.js', 'public/bower_components/CodeMirror/addon/edit/closebrackets.js', 'public/bower_components/CodeMirror/addon/edit/matchbrackets.js', diff --git a/server/views/challenges/showHTML.jade b/server/views/challenges/showHTML.jade index 7ee05e21a8..8a6b2355d5 100644 --- a/server/views/challenges/showHTML.jade +++ b/server/views/challenges/showHTML.jade @@ -85,6 +85,8 @@ block content common.dashedName = !{JSON.stringify(dashedName)}; common.isCompleted = !{JSON.stringify(isCompleted)}; + common.username = !{JSON.stringify(user && user.username || '')}; + common.init.push(function() { common.editor.setOption('lint', false); common.editor.setOption('mode', 'text/html'); diff --git a/server/views/challenges/showJS.jade b/server/views/challenges/showJS.jade index 7ce81d65b3..444fa4549f 100644 --- a/server/views/challenges/showJS.jade +++ b/server/views/challenges/showJS.jade @@ -89,6 +89,8 @@ block content common.dashedName = !{JSON.stringify(dashedName)}; common.isCompleted = !{JSON.stringify(isCompleted)}; + common.username = !{JSON.stringify(user && user.username || '')}; + include ../partials/challenge-footer script. common.init.push(function() {