node-wings
Version:
node-wings ==========
508 lines (477 loc) • 18.1 kB
text/jade
doctype html
html
head
title Coding Trainer
link(rel='stylesheet', href='/stylesheets/layout-default-latest.css')
link(rel='stylesheet', href='/stylesheets/ui.notify.css')
link(rel='stylesheet', href='/stylesheets/jquery.terminal.css')
link(rel='stylesheet', href='/stylesheets/style.css')
body
block content
#container(style='z-index:10000')
#withIcon.hide
a.ui-notify-close.ui-notify-cross(href='#', data-notification='\#{idNotification}') x
div(style='float: left; margin: 0 15px 10px 0;')
img(src='\#{icon}', alt='warning', style='width: 42px;')
h1 \#{title}
p \#{text}
script(src="javascripts/jquery-1.10.2.min.js")
script(src="javascripts/jquery-ui-latest.js")
script(src="javascripts/jquery.layout-latest.js")
script(src="javascripts/jquery.layout.resizeTabLayout-latest.js")
script(src="javascripts/jquery.notify.js")
script(src="javascripts/ace-src-min/ace.js")
//script(src="javascripts/jquery.jconsole.js")
script(src="javascripts/jquery.mousewheel-min.js")
script(src="javascripts/jquery.terminal-0.7.0.min.js")
script(src="javascripts/jquery.jbrowser.js")
script(src='/socket.io/socket.io.js')
script(src='https://www.youtube.com/iframe_api')
script.
//Ace Editor
var editor = ace.edit("editor"), NW = {}, term;
//Sockets
var port = (window.location.port=="")?":80":"";
var socket = io.connect('http://'+window.location.host+port,{'sync disconnect on unload': true });
socket.on('cmdResponse', function (data) {
console.log('cmdResponse>>',data);
if(!data.match(/]2;/)){
if(data.match(/.*@.*[$~%#]/)){
var prompt = data.replace(/\[m/g,"").replace(/\[1m/g," ").replace(/\[.{0,2}m/g,"");
term.set_prompt(prompt);
}else{
term.echo(data);
}
}
$('.console').scrollTop($('.console')[0].scrollHeight);
});
socket.on('fileReadResponse', function (fName, data) {
editor.setValue(data);
term.echo('ace-open: file opened '+fName);
});
$(document).ready(function() {
//Panels
$('body').layout({
/* applyDemoStyles: true, */
south__minSize: 200,
east__size: 450,
west__size: 430,
center__size: 50,
east: {
initClosed: true,
togglerLength_open: 450,
maxSize: 0
},
south: {
initClosed: true
},
east__onresize: function() {
editor.renderer.onResize();
editor.renderer.updateFull();
}
});
NW.toggleEditor = function() {
var myLayout = $("body").layout();
if($('.ace_content:visible').size()===0){
myLayout.sizePane("east", 4500);
}
myLayout.toggle('east');
}
NW.toggleTerminal = function() {
var myLayout = $("body").layout();
myLayout.sizePane("south", 280);
myLayout.toggle('south');
}
$('button.send').click(function(e){
e.preventDefault();
e.stopPropagation();
$.post('/api/test', { script: editor.getValue() }, function(data){
$('#salida').attr("class","");
$('#salida').empty();
console.log(data);
if(data.result=="'Hola Mundo'") {
$('#salida').addClass("success");
$('#salida').append("<p class='res'>Correcto!!<p>");
} else {
$('#salida').addClass("failure");
$('#salida').append("<p class='res'>Hubo un error:<p>");
}
$.each(data.console, function(i,v){
$('#salida').append("<p>"+v+"<p>");
});
$('#salida').append("<p>"+data.result+"<p>");
});
});
$('button#tedior').click(function(e){
e.preventDefault();
e.stopPropagation();
NW.toggleEditor();
});
$('button#tterm').click(function(e){
e.preventDefault();
e.stopPropagation();
NW.toggleTerminal();
});
// Terminal
//$('#console').jconsole({allowExecution:true, symbol: 'cortezcristian@nodewings: ~$ '});
term = $('#console').terminal(function(command, term) {
if (command !== '') {
try {
var params = command.split(' ');
switch(params[0]){
case "ace-open":
if(params.length!=2){
term.error("ace-open: Two arguments were expected");
}else{
socket.emit("readFile", params[1]);
}
break;
default:
socket.emit("sendCmd", command);
break;
}
// Eval JS
/*
var result = window.eval(command);
if (result !== undefined) {
term.echo(new String(result));
}
*/
} catch(e) {
term.error(new String(e));
}
} else {
term.echo('');
}
}, {
greetings: 'Welcome to Node Wings!',
name: 'js_demo',
//height: 200,
prompt: 'cortezcristian@nodewings: ~$ '
});
$container = $("#container").notify();
/*$container.notify("create", "withIcon", {
idNotification:'NaN',
title:'Node Wings',
text:'Welcome to Node Wings!',
icon:'/images/Retro-P-Wing-icon.png'
}, { expires:false });
*/
NW.browser = {};
NW.browser.his = [];
NW.browser.i = 0;
$('.browser-nav-bar').jbrowser({his:NW.browser.his, index:NW.browser.i});
NW.browser.iframeRef = function(frameRef){
return frameRef.contentWindow ? frameRef.contentWindow.document : frameRef.contentDocument
};
NW.browser.sendClick = function(p){
var inside = NW.browser.iframeRef(document.getElementById('navone'));
$(inside).find(p || '.navigate-right').click();
};
//NW.browser.sendClick('.navigate-right')
});
editor.setTheme("ace/theme/twilight");
editor.setFontSize(16);
editor.getSession().setMode("ace/mode/javascript");
NW.editor = editor;
NW.typing = false;
//Simulate typing: bs = Before Start
NW.type = function(txt,bs,cb){
var ed=NW.editor, count = 0, ts = 50, bs = bs || function(){}, cb = cb || function(){};
(function(){
if(!NW.typing){
bs.call();
NW.typing = true;
(function(){
//console.log("cotando... "+count);
if(count==txt.length){
NW.typing = false;
cb.call();
//return;
}else{
ed.insert(txt.charAt(count));
count++;
setTimeout(arguments.callee, ts);
}
})();
}else{
setTimeout(arguments.callee, ts);
}
})();
}
//Tutorial
NW.tutorial = {}; //namespace for the particular tutorial
NW.tutorial.started = false;
NW.tutorial.data = {
//Video index is the main key
'k9-9MQ5tqsc': {
'actions': [{
'time': 6,
'name' : 'eval',
'params': [
'console.log("sobre mi")',
'NW.browser.sendClick(".navigate-right")'
]
},{
'time': 39,
'name' : 'eval',
'params': [
'console.log("tengo una idea")',
'NW.browser.sendClick(".navigate-right")'
]
},{
'time': 46,
'name' : 'eval',
'params': [
'console.log("que")',
'NW.browser.sendClick(".navigate-down")'
]
},{
'time': 55,
'name' : 'eval',
'params': [
'console.log("motiv")',
'NW.browser.sendClick(".navigate-down")'
]
},{
'time': 102,
'name' : 'eval',
'params': [
'console.log("como")',
'NW.browser.sendClick(".navigate-right")'
]
},{
'time': 105,
'name' : 'eval',
'params': [
'console.log("sustentable")',
'NW.browser.sendClick(".navigate-down")'
]
},{
'time': 120,
'name' : 'eval',
'params': [
'console.log("equipo")',
'NW.browser.sendClick(".navigate-down")'
]
},{
'time': 140,
'name' : 'eval',
'params': [
'console.log("plataforma")',
'NW.browser.sendClick(".navigate-down")'
]
},{
'time': 151,
'name' : 'eval',
'params': [
'console.log("diferenciacion")',
'NW.browser.sendClick(".navigate-right")'
]
},{
'time': 153,
'name' : 'eval',
'params': [
'console.log("producto base")',
'NW.browser.sendClick(".navigate-down")'
]
},{
'time': 162,
'name' : 'eval',
'params': [
'console.log("producto aumentado")',
'NW.browser.sendClick(".navigate-down")'
]
},{
'time': 184,
'name' : 'eval',
'params': [
'console.log("innovar")',
'NW.browser.sendClick(".navigate-down")'
]
}]
},
'bVbKNHghLZo': {
'actions': [{
'time': 1,
'name' : 'eval',
'params': [
'NW.browser.sendClick(".navigate-right")'
]
},{
'time': 27,
'name' : 'eval',
'params': [
'$("#tedior").click()'
]
},{
'time': 50,
'name' : 'eval',
'params': [
'$(".send").eq(0).click()'
]
},{
'time': 68,
'name' : 'wLines',
'params': {
"2": "error"
}
},{
'time': 79,
'name' : 'eval',
'params': [
'$(".send").eq(0).click()',
'console.log("exec task 9")'
]
},{
'time': 86,
'name' : 'eval',
'params': [
'$("#tedior").click()'
]
}]
}
};
NW.tutorial.player = {};
NW.tutorial.player.ctime = 0;
NW.tutorial.player.ctask = 0;
NW.tutorial.player.cvideo = '';
NW.tutorial.player.start = function(){};
NW.tutorial.player.stop = function(){};
NW.tutorial.player.next = function(){};
NW.playList = [];
NW.playListIndex = 0;
NW.fillList = function(){
$('#videoPlaylist li a').each(function(){
NW.playList.push($(this).attr('href').replace('#',''));
});
}
NW.fillList();
$('#videoPlaylist li a:not(.selected)').click(function(e){
e.preventDefault();
e.stopPropagation();
$('.selected').removeClass('selected');
//just in case to continue from that video
NW.playListIndex = $('#videoPlaylist li a').index($(this));
NW.playVideo($(this).addClass('selected').attr('href').replace('#',''));
});
NW.callNextAction = function(cTime){
if(typeof NW.tutorial.data[NW.tutorial.player.cvideo].actions[NW.tutorial.player.ctask] != 'undefined'){
console.log(cTime+' - '+NW.tutorial.data[NW.tutorial.player.cvideo].actions[NW.tutorial.player.ctask].time);
if(cTime>NW.tutorial.data[NW.tutorial.player.cvideo].actions[NW.tutorial.player.ctask].time){
console.log("task"+NW.tutorial.player.ctask);
switch(NW.tutorial.data[NW.tutorial.player.cvideo].actions[NW.tutorial.player.ctask].name){
case 'wLines':
$.each(NW.tutorial.data[NW.tutorial.player.cvideo].actions[NW.tutorial.player.ctask].params, function(i,v){
NW.type(v, function(){
NW.editor.gotoLine(parseInt(i));
},
function(){
NW.editor.splitLine();
NW.editor.gotoLine(parseInt(i)+1);
});
});
break;
case 'eval':
switch(typeof NW.tutorial.data[NW.tutorial.player.cvideo].actions[NW.tutorial.player.ctask].params){
case 'string':
eval(NW.tutorial.data[NW.tutorial.player.cvideo].actions[NW.tutorial.player.ctask].params);
break;
case 'object':
$.each(NW.tutorial.data[NW.tutorial.player.cvideo].actions[NW.tutorial.player.ctask].params,function(i,v){
eval(v);
});
break;
default:
break;
}
break;
default:
break;
}
NW.tutorial.player.ctask++;
}
}
}
// Process
function updatePlayerInfo(o){
if(o && o.getDuration) {
var ct = o.getCurrentTime();
if(ct!=NW.tutorial.player.ctime){
console.log(ct);
NW.tutorial.player.ctime = ct;
NW.callNextAction(ct);
}
$("#videoDuration").html(o.getDuration());
$("#videoCurrentTime").html(o.getCurrentTime());
$("#bytesTotal").html(o.getVideoBytesTotal());
$("#startBytes").html(o.getVideoStartBytes());
$("#bytesLoaded").html(o.getVideoBytesLoaded());
}
}
// Video
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '300',
width: '400',
videoId: 'k9-9MQ5tqsc',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
//keep Moving
(function(){
updatePlayerInfo(player);
setTimeout(arguments.callee, '500');
})();
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
console.log(event);
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
console.log(event);
var newState = event.data;
switch(newState){
case 0:
if(NW.playListIndex<NW.playList.length){
NW.playListIndex++;
console.log("next>>", NW.playListIndex);
NW.tutorial.player.ctime = 0;
NW.tutorial.player.ctask = 0;
NW.tutorial.player.cvideo = NW.playList[NW.playListIndex];
event.target.loadVideoById(NW.playList[NW.playListIndex]);
//$('#videoPlaylist li a').eq(NW.playListIndex).click();
}
break;
case 1:
if(!NW.tutorial.started){
//first video
NW.tutorial.player.cvideo = (event.target.getVideoData())['video_id'];
NW.tutorial.started = true;
}
break;
default:
break;
}
//if (event.data == YT.PlayerState.PLAYING && !done) {
//setTimeout(stopVideo, 6000);
//done = true;
//}
}
function stopVideo() {
player.stopVideo();
}