-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
141 lines (129 loc) · 6.04 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!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>