gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix double-click and mousemove issues and do some linting

Browse Source
This commit is contained in:
Arsen Melikyan
2016-01-16 10:49:44 +04:00
parent e1aec710aa
commit d380640480
1 changed files with 47 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
client/commonFramework/create-editor.js
View File

@ -37,7 +37,7 @@ window.common = (function(global) {
} }
); );
var clipboard = new Clipboard('.demo1', { var clipboard = new Clipboard('.copy-btn', {
text: function(trigger) { text: function(trigger) {
var type; var type;
switch (common.challengeType) { switch (common.challengeType) {
@ -63,6 +63,7 @@ window.common = (function(global) {
editor.replaceSelection(editor.getSelection()); editor.replaceSelection(editor.getSelection());
return returnValue; return returnValue;
case 'link': case 'link':
default:
editor.replaceSelection(editor.getSelection()); editor.replaceSelection(editor.getSelection());
return '[Challenge - ' + common.challengeName + return '[Challenge - ' + common.challengeName +
(common.username ? ' (' + common.username + '\'s solution)' : '') (common.username ? ' (' + common.username + '\'s solution)' : '')
@ -73,45 +74,62 @@ window.common = (function(global) {
common.clipboard = clipboard; common.clipboard = clipboard;
var copyButton = `<a id="demo" href="/" data-toggle="popover" \ var copyButton = `<a id="copy-btn-parent" href="/" data-toggle="popover" \
data-trigger="manual" data-content="<a class='demo1' id='link' href='/' \ data-trigger="manual" data-content="<a class='copy-btn' id='link' href='/' \
data-toggle='popover' data-trigger='manual' \ data-toggle='popover' data-trigger='manual' \
title='Copy the link to this challenge'>Copy Link</a><br><a class='demo1' \ title='Copy the link to this challenge'>Copy Link</a><br><a class='copy-btn' \
id='markdown' href='/' data-toggle='popover'\ data-trigger='manual' \ id='markdown' href='/' data-toggle='popover'\ data-trigger='manual' \
title='Copy the contents of code editor with Markdown syntax \ title='Copy the contents of code editor with Markdown syntax \
highlighting'>Copy as Pretty Code</a><br><a class='demo1' id='plain' \ highlighting'>Copy as Pretty Code</a><br><a class='copy-btn' id='plain' \
href='/' data-toggle='popover' data-trigger='manual' title='Copy the \ href='/' data-toggle='popover' data-trigger='manual' title='Copy the \
contents of code editor'>Copy as Plain Code</a>"></a>`; contents of code editor'>Copy as Plain Code</a>"></a>`;
var left, top; var left = -5, top = -5;
$(document).mousemove(function(event) { $(document).mousemove(function(event) {
left = event.pageX; left = event.pageX;
top = event.pageY; top = event.pageY;
}); });
function showPopover() { function debounce(func, wait, immediate) {
setTimeout(function() { var timeout;
if (editor.somethingSelected()) { return function() {
$('#demo').popover('show'); var context = this, args = arguments;
var editorOffset = $('#mainEditorPanel > form.code').offset(), var later = function() {
editorHeight = $('#mainEditorPanel > form.code').height(), timeout = null;
editorWidth = $('#mainEditorPanel > form.code').width(), if (!immediate) {
theHeight = $('.popover').height(), func.apply(context, args);
theWidth = $('.popover').width();
if (left < editorOffset.left
|| left > editorOffset.left + editorWidth - theWidth) {
left = (editorOffset.left + editorWidth) / 2;
} }
if (top < editorOffset.top };
|| top > editorOffset.top + editorHeight - theHeight) { var callNow = immediate && !timeout;
top = (editorOffset.top + editorHeight) / 2; clearTimeout(timeout);
} timeout = setTimeout(later, wait);
$('.popover').css('left', (left + 10) + 'px'); if (callNow) {
$('.popover').css('top', (top - (theHeight / 2)) + 'px'); func.apply(context, args);
} }
}, 100); };
} }
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 ( if (
challengeType === challengeTypes.HTML || challengeType === challengeTypes.HTML ||
challengeType === challengeTypes.JS || challengeType === challengeTypes.JS ||
@ -119,17 +137,17 @@ contents of code editor'>Copy as Plain Code</a>"></a>`;
) { ) {
$('body').append(copyButton); $('body').append(copyButton);
$('#demo').popover({html: true}); $('#copy-btn-parent').popover({html: true});
CodeMirror.on(document, 'mousedown', function() { CodeMirror.on(document, 'mousedown', function() {
$('#demo').popover('hide'); $('#copy-btn-parent').popover('hide');
}); });
CodeMirror.on(document, 'mouseup', showPopover); CodeMirror.on(document, 'mouseup', showPopover);
$(document).on('click', '.demo1', function(e) { $(document).on('click', '.copy-btn', function(e) {
e.preventDefault(); e.preventDefault();
$('#demo').popover('hide'); $('#copy-btn-parent').popover('hide');
}); });
} }