Merge pull request #6044 from bugron/feature/gitter-tool-pallet

Add 'copy to clipboard' buttons for easy challenge link and code copying

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"
   }
 }

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 = `<a id="copy-btn-parent" href="/" data-toggle="popover" \
+data-trigger="manual" data-content="<a class='copy-btn' id='link' href='/' \
+data-toggle='popover' data-trigger='manual' \
+title='Copy the link to this challenge'>Copy Link</a><br><a class='copy-btn' \
+id='markdown' href='/' data-toggle='popover'\ data-trigger='manual' \
+title='Copy the contents of code editor with Markdown syntax \
+highlighting'>Copy as Pretty Code</a><br><a class='copy-btn' id='plain' \
+href='/' data-toggle='popover' data-trigger='manual' title='Copy the \
+contents of code editor'>Copy as Plain Code</a>"></a>`;
+
+  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();
     }
   });
 

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',

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');

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() {