2013-06-26 02:44:11 +04:00
|
|
|
<html>
|
2013-07-20 23:23:46 +04:00
|
|
|
<style>
|
|
|
|
|
|
|
|
|
|
#bootstrap {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
#bootstrap[shown] {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.command {
|
|
|
|
|
padding-left: 5px;
|
|
|
|
|
padding-right: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.command:hover {
|
|
|
|
|
background: #eee;
|
|
|
|
|
cursor: hand;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.command:empty:after {
|
|
|
|
|
content: "input code here...";
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
}
|
|
|
|
|
.command:focus:before {
|
|
|
|
|
position: absolute;
|
|
|
|
|
content: "ctrl+enter to run";
|
|
|
|
|
opacity: 0.3;
|
|
|
|
|
right: 15px;
|
|
|
|
|
}
|
|
|
|
|
.command:focus:after {
|
|
|
|
|
opacity: 0.2;
|
|
|
|
|
}
|
2013-07-23 01:09:10 +04:00
|
|
|
.command:last-child {
|
|
|
|
|
border: red 2px solid;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
box-shadow: 2px 2px 5px 0px silver;
|
|
|
|
|
}
|
2013-07-20 23:23:46 +04:00
|
|
|
|
2013-07-23 00:37:17 +04:00
|
|
|
.error {
|
|
|
|
|
color: red;
|
|
|
|
|
font-style: italic;
|
|
|
|
|
}
|
2013-07-20 23:23:46 +04:00
|
|
|
.output {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
2013-07-23 00:37:17 +04:00
|
|
|
.error:before,
|
2013-07-20 23:23:46 +04:00
|
|
|
.output:before {
|
|
|
|
|
content: ">";
|
2013-07-23 00:37:17 +04:00
|
|
|
color: red;
|
2013-07-20 23:23:46 +04:00
|
|
|
font-weight: bold;
|
|
|
|
|
margin: 5px;
|
|
|
|
|
}
|
2013-07-23 00:37:17 +04:00
|
|
|
.output:before {
|
|
|
|
|
color: blue;
|
|
|
|
|
}
|
2013-07-20 23:23:46 +04:00
|
|
|
|
2013-12-30 05:07:53 +04:00
|
|
|
#words {
|
|
|
|
|
font-family: monospace;
|
|
|
|
|
}
|
2013-07-20 23:23:46 +04:00
|
|
|
|
|
|
|
|
#stack {
|
|
|
|
|
opacity: 0.8;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
2013-06-26 02:44:11 +04:00
|
|
|
<script src="slang.js"></script>
|
2013-07-20 23:23:46 +04:00
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
2013-12-30 04:54:40 +04:00
|
|
|
function stringifySlangCode(code){
|
2013-12-30 05:07:53 +04:00
|
|
|
if(typeof(code) == typeof('str') && /\s/.test(code)){
|
|
|
|
|
return '\''+code+'\''
|
|
|
|
|
} else if(code.constructor.name == 'Array'){
|
|
|
|
|
return '[ '+code.map(stringifySlangCode).join(' ')+' ]'
|
2013-12-30 04:54:40 +04:00
|
|
|
}
|
|
|
|
|
return code
|
|
|
|
|
}
|
|
|
|
|
|
2013-07-20 23:23:46 +04:00
|
|
|
function runCommand(){
|
|
|
|
|
var stack = document.getElementById('stack')
|
|
|
|
|
var console = document.getElementById('console')
|
|
|
|
|
var commands = document.getElementsByClassName('command')
|
|
|
|
|
var command = commands[commands.length-1]
|
|
|
|
|
command.removeAttribute('contenteditable')
|
|
|
|
|
|
|
|
|
|
command.addEventListener('click', function(e){
|
|
|
|
|
var commands = document.getElementsByClassName('command')
|
|
|
|
|
var c = commands[commands.length-1]
|
|
|
|
|
c.innerText = command.innerText
|
|
|
|
|
c.focus()
|
|
|
|
|
}, false)
|
|
|
|
|
|
|
|
|
|
try{
|
2013-12-30 04:54:40 +04:00
|
|
|
stack.innerText = 'stack: ' + stringifySlangCode(slang(command.innerText))
|
2013-07-20 23:23:46 +04:00
|
|
|
|
|
|
|
|
} catch(e) {
|
2013-12-30 05:07:53 +04:00
|
|
|
stack.innerText = 'stack: ' + stringifySlangCode(CONTEXT.stack)
|
2013-07-20 23:23:46 +04:00
|
|
|
var err = document.createElement('div')
|
|
|
|
|
err.classList.add('error')
|
|
|
|
|
if(e.message != null){
|
|
|
|
|
err.innerText = e.message
|
|
|
|
|
} else {
|
|
|
|
|
err.innerText = e
|
|
|
|
|
}
|
|
|
|
|
console.appendChild(err)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// create the next element...
|
|
|
|
|
var next = document.createElement('div')
|
|
|
|
|
next.classList.add('command')
|
|
|
|
|
next.setAttribute('contenteditable', true)
|
|
|
|
|
console.appendChild(next)
|
|
|
|
|
next.focus()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
NAMESPACE.print = function(context){
|
|
|
|
|
var c = document.getElementById('console')
|
|
|
|
|
var o = context.stack[context.stack.length-1]
|
|
|
|
|
console.log('>>>', o)
|
|
|
|
|
|
|
|
|
|
var data = document.createElement('div')
|
|
|
|
|
data.classList.add('output')
|
|
|
|
|
data.innerHTML = o
|
|
|
|
|
c.appendChild(data)
|
|
|
|
|
}
|
|
|
|
|
|
2013-07-23 00:37:17 +04:00
|
|
|
// XXX should this break exec?
|
2013-07-20 23:23:46 +04:00
|
|
|
NAMESPACE.err = function(context){
|
2013-07-23 00:37:17 +04:00
|
|
|
var c = document.getElementById('console')
|
|
|
|
|
var e = context.stack[context.stack.length-1]
|
|
|
|
|
console.error('>>>', e)
|
|
|
|
|
|
|
|
|
|
var err = document.createElement('div')
|
|
|
|
|
err.classList.add('error')
|
|
|
|
|
if(e.message != null){
|
|
|
|
|
err.innerText = e.message
|
|
|
|
|
} else {
|
|
|
|
|
err.innerText = e
|
|
|
|
|
}
|
|
|
|
|
c.appendChild(err)
|
2013-07-20 23:23:46 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function toggleBootstrapCode(){
|
|
|
|
|
var bootstrap = document.getElementById('bootstrap')
|
|
|
|
|
if(bootstrap.hasAttribute('shown')){
|
|
|
|
|
bootstrap.removeAttribute('shown')
|
|
|
|
|
} else {
|
|
|
|
|
bootstrap.setAttribute('shown')
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2013-12-30 04:54:40 +04:00
|
|
|
function showAvailableWords(){
|
2013-12-30 05:07:53 +04:00
|
|
|
document.getElementById('words').innerHTML = Object.keys(NAMESPACE)
|
|
|
|
|
.sort()
|
|
|
|
|
.filter(function(e){
|
|
|
|
|
// skip words starting with '_'...
|
|
|
|
|
if(e[0] == '_'){
|
|
|
|
|
return false
|
|
|
|
|
}
|
|
|
|
|
return true
|
|
|
|
|
})
|
|
|
|
|
.map(function(e){
|
|
|
|
|
var code = NAMESPACE[e]
|
|
|
|
|
if(code.constructor.name == 'Array'){
|
|
|
|
|
code = stringifySlangCode(code)
|
|
|
|
|
}
|
|
|
|
|
return '<span title="'+code+'">'+e+'</span>'
|
|
|
|
|
})
|
|
|
|
|
.join(', ')
|
2013-12-30 04:54:40 +04:00
|
|
|
}
|
|
|
|
|
|
2013-07-20 23:23:46 +04:00
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
2013-06-26 02:44:11 +04:00
|
|
|
<body>
|
2013-07-20 23:23:46 +04:00
|
|
|
<h1>Slang</h1>
|
|
|
|
|
<a href="#" onclick="toggleBootstrapCode()">Toggle bootstrap code view...</a>
|
|
|
|
|
<div id="bootstrap"></div>
|
2013-12-30 04:54:40 +04:00
|
|
|
<h2>Available words</h2>
|
|
|
|
|
<p id="words"></p>
|
2013-07-20 23:23:46 +04:00
|
|
|
<h2>Slang Console</h2>
|
|
|
|
|
<div id="console">
|
|
|
|
|
<div class="command" contenteditable="true"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="stack"></div>
|
2013-06-26 02:44:11 +04:00
|
|
|
</body>
|
|
|
|
|
<script>
|
2013-07-20 23:23:46 +04:00
|
|
|
document.getElementById('bootstrap').innerHTML='<pre>'+BOOTSTRAP
|
2013-06-26 02:44:11 +04:00
|
|
|
.replace(/&/g, '&')
|
|
|
|
|
.replace(/>/g, '>')
|
|
|
|
|
.replace(/</g, '<')+'</pre>'
|
2013-07-20 23:23:46 +04:00
|
|
|
|
|
|
|
|
document.getElementById('console')
|
|
|
|
|
.addEventListener("keyup", function(e) {
|
|
|
|
|
if(e.keyCode == 13 && e.ctrlKey){
|
|
|
|
|
runCommand()
|
2013-12-30 04:54:40 +04:00
|
|
|
showAvailableWords()
|
2013-07-20 23:23:46 +04:00
|
|
|
}
|
|
|
|
|
}, false);
|
|
|
|
|
|
2013-12-30 04:54:40 +04:00
|
|
|
showAvailableWords()
|
|
|
|
|
|
2013-06-26 02:44:11 +04:00
|
|
|
</script>
|
|
|
|
|
</html>
|
