<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta charset="utf-8">
<title>panelz</title>
<meta name="description" content="panelz machine">
<link rel="stylesheet" type="text/css" href="//necolas.github.io/normalize.css/2.1.3/normalize.css">
<link rel="stylesheet" type="text/css" href="panelz.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.hammer-full.js"></script>
<script type="text/javascript" src="panelz.js"></script>
<script type="text/javascript">
// Wait for the DOM to be ready.
$(function(){
var
// Get the textarea, its element and its range setter,
textArea = $('#scriptArea'),
textAreaElement = textArea.get(0),
// and define a function that gets and sets its cursor position (in supportive browsers).
cursor = textArea.cursor = function(position){
if('undefined' === typeof position) return textAreaElement.selectionStart;
else if('function' === typeof textAreaElement.setSelectionRange) textAreaElement.setSelectionRange(position, position);
},
// Get the script name from the querystring (defaulting to "welcome"),
name = window.location.search.substr(1).match(/\w*/)[0] || 'welcome',
// and the position from the hash (defaulting to false).
line = window.location.hash.substr(1) || false;
// Bind the file input to load a script into the textarea,
$('#fileSel').change(function(e){
var fileReader = new FileReader();
fileReader.onload = function(e){
textArea.val(e.target.result);
};
fileReader.readAsText(e.target.files[0], "UTF-8");
});
// and the run button to run the script that's in it.
$('#runBtn').click(function(e){
// Define Canvas position for dragging.
var pos;
// Get the script and the cursor position from the textarea,
var
script = textArea.val(),
position = textArea.cursor();
// and figure out how many lines are before it.
position = position ? script.substr(0, position).match(/\n/g).length : line;
// Initialize panelz with the #panelz div and the script,
panelz(script, $('#panelz')).
// which returns the new frame to which we bind hammer events.
hammer().on('tap swipe touch drag', function(e){
e.gesture.preventDefault();
e.gesture.stopPropagation();
if('tap' == e.type) panelz.go(1);
else if('swipe' === e.type){
if('right' === e.gesture.direction) panelz.go(-1);
else panelz.go(1);
}else{
if('touch' === e.type){
pos = panelz.canvasPosition();
// This has to be a drag event
}else{
panelz.canvasPosition(pos.left + e.gesture.deltaX, pos.top + e.gesture.deltaY);
}
}
return false;
});
// Bind the keys.
$(document).keydown(function(e){
// Right arrow and space go forward,
if(39 === e.which || 32 === e.which) panelz.go(1);
// left arrow goes back,
else if(37 === e.which) panelz.go(-1);
// and 'q' quits the show.
else if(81 === e.which){
panelz.unload();
// Get the position in the script from the current bookmark,
for(
var idx = 0, line = 0, lines = textArea.val().split("\n");
line < panelz.bookmark;
idx += lines[line].length + 1, line++
);
// put the cursor there (if the browser supports it),
textArea.focus().cursor(idx);
// and unbinds the UI.
$(document).off('keydown');
// Anything else logs itself, to make it easier for me to bind new keys, and returns true so that someone else will handle it,
}else{
console.log('unknown key', e.which);
return true;
}
// Handled commands return false to stop propagation.
return false;
});
// and forward the Story to the cursor's line
while(panelz.bookmark < position) panelz.go(1);
});
// Load the requested script into the textarea and its CSS into the head tag,
$.when(
$.get('scripts/' + name + '.txt', function(script){
textArea.val(script).focus().cursor(0);
}),
$.get('scripts/' + name + '.css', function(css){
$("<style type=\"text/css\">" + css + "</style>").appendTo(document.head);
})
// and click the run button when done.
).always(function(){
$('#runBtn').click();
});
// And finally, remove the noscript warning and hope for the best.
$('#noscript').remove();
});
</script>
</head>
<body>
<a href="https://github.com/israellevin/panelz"><img style="position: absolute; top: 0; right: 0; border: 0; z-index:100;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Panelz on GitHub"></a>
<div id="noscript" style="position: absolute; z-index: 100; background-color: red; color: white;">Either you have javascript disabled, or I have a bug. One of us should do something about it.</div>
<div id="panelz">
<div style="position: absolute; bottom: 0px; right: 0px; text-align: center;">
Load:
<input id="fileSel" type="file">
<input id="runBtn" type="button" value="Run">
</div>
<textarea id="scriptArea" style="width: 100%; height: 100%;">
]
:You seem to be requesting a nonexistent script. Either you are running locally, or someone mistyped the URI. Press 'q' to access the editor and load local scripts.
</textarea>
</div>
</body>
</html>