wide/static/js/playground.js

516 lines
18 KiB
JavaScript
Raw Normal View History

2015-02-13 04:59:51 +03:00
/*
* Copyright (c) 2014-2015, b3log.org
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
var playground = {
autocompleteMutex: false,
2015-02-13 04:59:51 +03:00
editor: undefined,
pid: undefined,
2015-02-14 15:38:33 +03:00
_resize: function () {
2015-03-01 16:13:21 +03:00
if (config.disqus) {
return false;
}
2015-02-20 04:42:05 +03:00
if (config.embed) {
2015-03-01 16:28:30 +03:00
$("#editorDiv").parent().height($(window).height() - 33 - $(".footer").height());
2015-02-20 04:42:05 +03:00
playground.editor.setSize("auto", ($("#editorDiv").parent().height() * 0.7) + "px");
} else {
2015-03-01 16:13:21 +03:00
$("#editor, #output").height($(window).height() - 60 - $(".footer").height());
2015-02-20 04:42:05 +03:00
playground.editor.setSize("auto", $("#editor").height() + "px");
}
2015-02-14 15:38:33 +03:00
},
_initShare: function () {
2015-02-15 08:53:02 +03:00
$("#dialogShare").dialog({
"modal": true,
"title": config.label.share,
2015-02-20 04:42:05 +03:00
"hideFooter": true
2015-02-15 06:09:17 +03:00
});
},
_initWideShare: function () {
2015-02-14 15:38:33 +03:00
$(".share-panel .font-ico").click(function () {
var key = $(this).attr('class').split('-')[2];
var url = "https://wide.b3log.org", pic = 'https://wide.b3log.org/static/images/wide-logo.png';
var urls = {};
urls.email = "mailto:?subject=" + $('title').text()
+ "&body=" + $('meta[name=description]').attr('content') + ' ' + url;
var twitterShare = encodeURIComponent($('meta[name=description]').attr('content') + " " + url + " #golang");
urls.twitter = "https://twitter.com/intent/tweet?status=" + twitterShare;
urls.facebook = "https://www.facebook.com/sharer/sharer.php?u=" + url;
urls.googleplus = "https://plus.google.com/share?url=" + url;
var title = encodeURIComponent($('title').text() + '. \n' + $('meta[name=description]').attr('content')
+ " #golang#");
urls.weibo = "http://v.t.sina.com.cn/share/share.php?title=" + title + "&url=" + url + "&pic=" + pic;
urls.tencent = "http://share.v.t.qq.com/index.php?c=share&a=index&title=" + title +
"&url=" + url + "&pic=" + pic;
window.open(urls[key], "_blank", "top=100,left=200,width=648,height=618");
2015-02-15 05:08:51 +03:00
2015-02-14 15:38:33 +03:00
$(".menu .share-panel").hide();
});
},
2015-02-13 04:59:51 +03:00
init: function () {
2015-02-15 09:24:49 +03:00
CodeMirror.registerHelper("hint", "go", function (editor) {
var word = /[\w$]+/;
var cur = editor.getCursor(), curLine = editor.getLine(cur.line);
var start = cur.ch, end = start;
while (end < curLine.length && word.test(curLine.charAt(end))) {
++end;
}
while (start && word.test(curLine.charAt(start - 1))) {
--start;
}
var request = newWideRequest();
request.code = editor.getValue();
request.cursorLine = cur.line;
request.cursorCh = cur.ch;
var autocompleteHints = [];
if (playground.autocompleteMutex && editor.state.completionActive) {
console.log(1);
return;
}
playground.autocompleteMutex = true;
2015-02-15 09:24:49 +03:00
$.ajax({
async: false, // 同步执行
type: 'POST',
url: config.context + '/playground/autocomplete',
data: JSON.stringify(request),
dataType: "json",
success: function (data) {
var autocompleteArray = data[1];
if (autocompleteArray) {
for (var i = 0; i < autocompleteArray.length; i++) {
var displayText = '',
text = autocompleteArray[i].name;
switch (autocompleteArray[i].class) {
case "type":
displayText = '<span class="fn-clear"><span class="ico-type ico"></span>'// + autocompleteArray[i].class
+ '<b>' + autocompleteArray[i].name + '</b> '
+ autocompleteArray[i].type + '</span>';
break;
case "const":
displayText = '<span class="fn-clear"><span class="ico-const ico"></span>'// + autocompleteArray[i].class
+ '<b>' + autocompleteArray[i].name + '</b> '
+ autocompleteArray[i].type + '</span>';
break;
case "var":
displayText = '<span class="fn-clear"><span class="ico-var ico"></span>'// + autocompleteArray[i].class
+ '<b>' + autocompleteArray[i].name + '</b> '
+ autocompleteArray[i].type + '</span>';
break;
case "package":
displayText = '<span class="fn-clear"><span class="ico-package ico"></span>'// + autocompleteArray[i].class
+ '<b>' + autocompleteArray[i].name + '</b> '
+ autocompleteArray[i].type + '</span>';
break;
case "func":
displayText = '<span><span class="ico-func ico"></span>'// + autocompleteArray[i].class
+ '<b>' + autocompleteArray[i].name + '</b>'
+ autocompleteArray[i].type.substring(4) + '</span>';
text += '()';
break;
default:
console.warn("Can't handle autocomplete [" + autocompleteArray[i].class + "]");
break;
}
autocompleteHints[i] = {
displayText: displayText,
text: text
};
}
}
}
});
setTimeout(function () {
playground.autocompleteMutex = false;
}, 20);
2015-02-15 09:24:49 +03:00
return {list: autocompleteHints, from: CodeMirror.Pos(cur.line, start), to: CodeMirror.Pos(cur.line, end)};
});
CodeMirror.commands.autocompleteAnyWord = function (cm) {
cm.showHint({hint: CodeMirror.hint.auto});
};
CodeMirror.commands.autocompleteAfterDot = function (cm) {
var mode = cm.getMode();
if (mode && "go" !== mode.name) {
return CodeMirror.Pass;
}
var token = cm.getTokenAt(cm.getCursor());
if ("comment" === token.type || "string" === token.type) {
return CodeMirror.Pass;
}
setTimeout(function () {
if (!cm.state.completionActive) {
cm.showHint({hint: CodeMirror.hint.go, completeSingle: false});
}
}, 50);
return CodeMirror.Pass;
};
2015-02-14 15:38:33 +03:00
playground.editor = CodeMirror.fromTextArea($("#editor")[0], {
2015-02-13 04:59:51 +03:00
lineNumbers: true,
autoCloseBrackets: true,
matchBrackets: true,
highlightSelectionMatches: {showToken: /\w/},
2015-02-13 19:00:38 +03:00
rulers: [{color: "#ccc", column: 80, lineStyle: "dashed"}],
2015-02-13 04:59:51 +03:00
styleActiveLine: true,
theme: "wide",
tabSize: 4,
indentUnit: 4,
2015-09-17 16:43:49 +03:00
indentWithTabs: true,
2015-02-13 04:59:51 +03:00
foldGutter: true,
2015-02-15 05:08:51 +03:00
cursorHeight: 1,
2015-02-15 09:24:49 +03:00
viewportMargin: 500,
extraKeys: {
"Ctrl-\\": "autocompleteAnyWord",
".": "autocompleteAfterDot"
}
2015-02-14 15:38:33 +03:00
});
2015-03-25 11:00:59 +03:00
playground.editor.setOption("gutters", ["CodeMirror-lint-markers", "CodeMirror-foldgutter"]);
2015-02-15 05:08:51 +03:00
2015-02-14 15:38:33 +03:00
$(window).resize(function () {
playground._resize();
2015-02-13 04:59:51 +03:00
});
2015-02-14 12:49:21 +03:00
2015-03-01 16:28:30 +03:00
if (config.embed) {
playground.editor.setSize("auto", ($("#editorDiv").parent().height() * 0.7) + "px");
} else {
playground.editor.setSize("auto", $("#editor").height() + "px");
}
2015-02-14 12:49:21 +03:00
var hovered = false;
$(".menu .ico-share").hover(function () {
$(".menu .share-panel").show();
hovered = true;
}, function () {
if (!hovered) {
$(".menu .share-panel").hide();
}
hovered = false;
setTimeout(function () {
if (!hovered) {
$(".menu .share-panel").hide();
}
}, 500);
});
$(".menu .share-panel").hover(function () {
$(".menu .share-panel").show();
hovered = true;
}, function () {
$(".menu .share-panel").hide();
hovered = false;
});
2015-02-13 07:57:12 +03:00
playground.editor.on('changes', function (cm) {
$("#url").html("");
2015-08-15 06:41:37 +03:00
});
2015-08-15 06:41:37 +03:00
playground.editor.on('keydown', function (cm, evt) {
if (evt.altKey || evt.ctrlKey || evt.shiftKey) {
return;
}
var k = evt.which;
if (k < 48) {
return;
}
// hit [0-9]
2015-08-15 06:41:37 +03:00
if (k > 57 && k < 65) {
return;
}
// hit [a-z]
if (k > 90) {
return;
}
if (config.autocomplete) {
if (0.5 <= Math.random()) {
CodeMirror.commands.autocompleteAfterDot(cm);
}
}
2015-02-13 07:57:12 +03:00
});
2015-02-13 04:59:51 +03:00
this._initWS();
2015-02-14 15:38:33 +03:00
this._resize();
2015-02-15 06:09:17 +03:00
this._initWideShare();
2015-02-14 15:38:33 +03:00
this._initShare();
menu._initAbout();
2015-02-13 04:59:51 +03:00
},
_initWS: function () {
// Used for session retention, server will release all resources of the session if this channel closed
var sessionWS = new ReconnectingWebSocket(config.channel + '/session/ws?sid=' + config.wideSessionId);
sessionWS.onopen = function () {
console.log('[session onopen] connected');
};
sessionWS.onmessage = function (e) {
console.log('[session onmessage]' + e.data);
};
sessionWS.onclose = function (e) {
console.log('[session onclose] disconnected (' + e.code + ')');
};
sessionWS.onerror = function (e) {
console.log('[session onerror] ' + JSON.parse(e));
};
var playgroundWS = new ReconnectingWebSocket(config.channel + '/playground/ws?sid=' + config.wideSessionId);
playgroundWS.onopen = function () {
console.log('[playground onopen] connected');
};
playgroundWS.onmessage = function (e) {
console.log('[playground onmessage]' + e.data);
var data = JSON.parse(e.data);
2015-02-14 12:49:21 +03:00
2015-02-13 05:50:14 +03:00
if ("init-playground" === data.cmd) {
return;
}
2015-02-13 04:59:51 +03:00
playground.pid = data.pid;
var val = $("#output").val();
$("#output").val(val + data.output);
};
playgroundWS.onclose = function (e) {
console.log('[playground onclose] disconnected (' + e.code + ')');
};
playgroundWS.onerror = function (e) {
console.log('[playground onerror] ' + JSON.parse(e));
};
},
2015-02-15 08:53:02 +03:00
share: function () {
if (!playground.editor) {
return;
}
var code = playground.editor.getValue();
var request = newWideRequest();
request.code = code;
$.ajax({
type: 'POST',
url: config.context + '/playground/save',
data: JSON.stringify(request),
dataType: "json",
2015-11-24 12:39:35 +03:00
success: function (result) {
var data = result.data;
2015-02-15 08:53:02 +03:00
playground.editor.setValue(data.code);
2015-11-24 12:39:35 +03:00
if (!result.succ) {
2015-02-16 12:10:21 +03:00
console.log(data);
2015-02-15 08:53:02 +03:00
return;
}
var url = window.location.protocol + "//" + window.location.host + '/playground/' + data.fileName;
2015-02-16 12:10:21 +03:00
var request = newWideRequest();
request.url = url;
$.ajax({
type: 'POST',
url: config.context + '/playground/short-url',
data: JSON.stringify(request),
dataType: "json",
2015-11-24 12:39:35 +03:00
success: function (result) {
if (!result.succ) {
console.log(result);
2015-02-16 12:10:21 +03:00
return;
}
2015-03-01 16:28:30 +03:00
var html = '<div class="fn-clear"><label>' + config.label.url
+ config.label.colon + '</label><a href="'
2015-02-21 07:38:03 +03:00
+ url + '" target="_blank">' + url + "</a><br/>";
2015-03-01 16:28:30 +03:00
html += '<label>' + config.label.short_url + config.label.colon
2015-11-24 12:39:35 +03:00
+ '</label><a href="' + result.data + '" target="_blank">'
+ result.data + '</a><br/>';
2015-03-01 16:28:30 +03:00
html += '<label>' + config.label.embeded + config.label.colon
2015-02-21 07:38:03 +03:00
+ '</label><br/><textarea rows="5" style="width:100%" readonly><iframe style="border:1px solid" src="'
2015-04-08 05:34:36 +03:00
+ url + '?embed=true" width="99%" height="600"></iframe></textarea>';
2015-02-17 05:29:30 +03:00
html += '</div>';
2015-02-16 12:10:21 +03:00
$("#dialogShare").html(html);
$("#dialogShare").dialog("open");
}});
2015-02-15 08:53:02 +03:00
}
});
},
2015-03-01 17:03:56 +03:00
disqus: function () {
var url = window.location.href;
if (url.indexOf("?") >= 0) {
if (url.indexOf("disqus=") >= 0) {
url = url.replace("disqus=false", "disqus=true");
console.log(url);
} else {
url += "&disqus=true";
}
} else {
url += "?disqus=true";
}
window.location.href = url;
},
2015-02-13 04:59:51 +03:00
stop: function () {
2015-02-15 05:08:51 +03:00
if (!playground.editor) {
return;
}
var cursor = playground.editor.getCursor();
playground.editor.focus();
playground.editor.setCursor(cursor);
if (!playground.pid) {
2015-02-13 04:59:51 +03:00
return;
}
var request = newWideRequest();
request.pid = playground.pid;
$.ajax({
type: 'POST',
url: config.context + '/playground/stop',
data: JSON.stringify(request),
dataType: "json"
});
},
run: function () {
if (!playground.editor) {
return;
}
2015-02-15 05:08:51 +03:00
var cursor = playground.editor.getCursor();
playground.editor.focus();
2015-02-13 04:59:51 +03:00
var code = playground.editor.getValue();
// Step 1. save & format code
var request = newWideRequest();
request.code = code;
$("#output").val("");
$.ajax({
type: 'POST',
url: config.context + '/playground/save',
data: JSON.stringify(request),
dataType: "json",
2015-11-24 12:39:35 +03:00
success: function (result) {
var data = result.data;
2015-02-13 04:59:51 +03:00
playground.editor.setValue(data.code);
2015-02-15 05:08:51 +03:00
playground.editor.setCursor(cursor);
2015-02-13 04:59:51 +03:00
2015-11-24 12:39:35 +03:00
if (!result.succ) {
2015-02-13 04:59:51 +03:00
return;
}
// Step 2. compile code
var request = newWideRequest();
2015-02-13 05:50:14 +03:00
request.fileName = data.fileName;
2015-02-13 04:59:51 +03:00
$.ajax({
type: 'POST',
url: config.context + '/playground/build',
data: JSON.stringify(request),
dataType: "json",
2015-11-24 12:39:35 +03:00
success: function (result) {
2015-11-27 11:55:28 +03:00
console.log(result);
2015-11-24 12:39:35 +03:00
var data = result.data;
2015-02-13 04:59:51 +03:00
$("#output").val(data.output);
2015-11-24 12:39:35 +03:00
if (!result.succ) {
2015-02-13 04:59:51 +03:00
return;
}
// Step 3. run the executable binary and handle its output
var request = newWideRequest();
request.executable = data.executable;
$.ajax({
type: 'POST',
url: config.context + '/playground/run',
data: JSON.stringify(request),
dataType: "json",
2015-11-24 12:39:35 +03:00
success: function (result) {
2015-02-13 04:59:51 +03:00
// console.log(data);
}
});
}
});
}
});
2015-02-14 12:49:21 +03:00
},
format: function () {
if (!playground.editor) {
return;
}
2015-02-15 05:08:51 +03:00
var cursor = playground.editor.getCursor();
playground.editor.focus();
2015-02-14 12:49:21 +03:00
var code = playground.editor.getValue();
var request = newWideRequest();
request.code = code;
$.ajax({
type: 'POST',
url: config.context + '/playground/save',
data: JSON.stringify(request),
dataType: "json",
2015-11-24 12:39:35 +03:00
success: function (result) {
playground.editor.setValue(result.data.code);
2015-02-15 05:08:51 +03:00
playground.editor.setCursor(cursor);
2015-02-14 12:49:21 +03:00
}
});
2015-02-13 04:59:51 +03:00
}
};
$(document).ready(function () {
playground.init();
});