-
Notifications
You must be signed in to change notification settings - Fork 0
/
js1k.html
162 lines (140 loc) · 5.64 KB
/
js1k.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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>JS1K->Clojure(Script)</title>
<style type="text/css">
#content {height:30px}
#info {width:420px;padding:5px 0 0 10px;float:left}
#menu {width:600px;float:left}
/* menu style and javascript from Joomla! */
#menu, #menu ul, #menu li { margin: 0; padding: 0; border: 0 none; }
#menu { position:relative; z-index: 100;}
#menu li { float:left; position:relative; list-style: none; display: inline;}
#menu li a { display:block; white-space: nowrap; }
#menu li li { /*width: 100%;*/ clear: both; /*FF 1.0.7 needs this */ }
#menu li ul { visibility: hidden; position:absolute; }
#menu li li ul { top: 0; left: 0; }
#menu li.hover ul { visibility: visible; }
#menu li.hover ul li ul { visibility: hidden; }
#menu li.hover li.hover ul { visibility: visible; left: 100%; }
/* ---- Menu layout -------------------------- */
#menu li { border: 1px solid #d8d8d8; }
#menu li li { border: 0;}
#menu ul { border: 0.1em solid #ccc; background: #f6f6f6 url(resource/bg-menu.gif) repeat-y left;}
#menu ul li.node { background: transparent url(resource/j_arrow.png) no-repeat right 50%; }
#menu ul li.separator { background: #DDE1E6 url(resource/bg-menu.gif); height: 1px; }
#menu a, #menu div { padding: 0.35em 1em 0.35em; margin: 0 1px 0 1px; color: #333333; line-height: 1.6em; vertical-align: middle; font-size: 11px; font-weight: bold; text-decoration: none; cursor: default; background-repeat: no-repeat; background-position: left 50% }
#menu ul a { font-size: 11px; font-weight: normal; padding-left: 25px; padding-right: 20px; line-height: 1.2em; }
/* 1 level - hover */
#menu li.hover a { background-color: #E7EDDF; border: 1px solid #6D9D2E;margin: 0; }
/* 2 level - normal */
#menu li.hover li a { background-color: transparent; border: 0 none; margin: 2px; }
/* 2 level - hover */
#menu li.hover li.hover a { background-color: #E7EDDF; border: 1px solid #6D9D2E; margin: 1px;}
/* 3 level - normal */
#menu li.hover li.hover li a { background-color: transparent; border: 0 none; margin: 2px; }
/* 3 level - hover */
#menu li.hover li.hover li a:hover { background-color: #E7EDDF; border: 1px solid #6D9D2E; margin: 1px}
</style>
</head>
<body>
<div id="content">
<div id="info">JS1K->Clojure(Script) <br />(<a href="http://js1k.com" target="_blank">js1k.com</a> -> <a href="https://github.com/ghosthamlet/js1k">github.com/ghosthamlet/js1k</a>)</div>
<ul id="menu"></ul>
</div>
<script type="text/javascript" src="js/js1k.js"></script>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script>
var apps = {};
// var apps = js1k.core.apps;
function run(appPackageStr) {
var w = 1300, h = 600;
$('#canvas').remove();
$(document.body).append('<canvas id="canvas" width="'+w+'" height="'+h+'"></canvas>');
eachApp(apps, function(app, appPackageStr) {
js1k.util.stop(eval(appPackageStr));
});
eval(appPackageStr).init();
}
function eachApp(apps, func) {
for (var year in apps) {
if (!year) continue;
var years = apps[year];
func && func.year && func.year(year);
for (var theme in years) {
var themes = years[theme];
func && func.theme && func.theme(theme);
for (var name in themes) {
var app = themes[name];
var appPackageStr = app.pk; // 'js1k.' +year+'.'+theme+'.'+name;
func(app, appPackageStr);
}
func && func.theme && func.theme();
}
func && func.year && func.year();
}
}
function jmenu(el) {
var elements = $('li', el);
var nested = null;
elements.each(function(){
var element = $(this);
element.mouseover(function(){ $(this).addClass('hover'); })
.mouseout(function(){ $(this).removeClass('hover'); });
//find nested UL
nested = $('ul', element);
if(!nested.length) {
return;
}
//declare width
var offsetWidth = 0;
var cn=nested[0].childNodes;
//find longest child
for (var k=0, len=cn.length; k < len; k++) {
var node = cn[k];
if (node.nodeName == "LI")
offsetWidth = (offsetWidth >= node.offsetWidth) ? offsetWidth : node.offsetWidth;
}
//match longest child
for (l=0; l < cn.length; l++) {
var node = cn[l]
if (node.nodeName == "LI") {
$(node).css('width', offsetWidth+'px');
}
}
nested.css('width', offsetWidth+'px');
});
}
(function($) {
var html = [];
var cont = $('#menu');
$.getJSON('resource/apps.json', function(res) {
apps = res[0];
eachApp(apps, (function() {
var _ = function(app, appPackageStr) {
html.push('<li onclick="run('+appPackageStr+')" class="app"><a>' +app.title+ '</a></li>');
};
_.year = function(year) {
year ? html.push('<li class="year"><a>' +year+ '</a><ul class="child">') : html.push('</li></ul>');
};
_.theme = function(theme) {
theme ? html.push('<li class="theme"><a>' +theme+ '</a><ul class="child">') : html.push('</li></ul>');;
}
return _;
})());
cont.html(html.join(''));
jmenu(cont);
var loc = location.href;
var idx = loc.indexOf('?pk=');
if (idx > -1) {
var tmp = loc.substr(idx + 4);
var e = tmp.indexOf('&');
run(e > -1 ? tmp.substr(0, e) : tmp);
return;
}
});
})(jQuery);
</script>
</body>
</html>