Rev 26 | Rev 32 | Go to most recent revision | Only display areas with differences | Regard whitespace | Details | Blame | Last modification | View Log | RSS feed
Rev 26 | Rev 29 | ||
---|---|---|---|
1 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" |
1 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" |
2 | "http://www.w3.org/TR/html4/strict.dtd"> |
2 | "http://www.w3.org/TR/html4/strict.dtd"> |
3 | <html lang="de"> |
3 | <html lang="de"> |
4 | <head> |
4 | <head> |
5 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
5 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
6 | <title>Seri-o-meter</title> |
6 | <title>Seri-o-meter</title> |
7 | <link rel="stylesheet" href="style.css" type="text/css"> |
7 | <link rel="stylesheet" href="style.css" type="text/css"> |
8 | <script type="text/javascript"> |
8 | <script type="text/javascript"> |
9 | /* |
9 | /* |
10 | function setStyle(obj, style) |
10 | function setStyle(obj, style) |
11 | { |
11 | { |
12 | var styleProperties = Object.getOwnPropertyNames(style); |
12 | var styleProperties = Object.getOwnPropertyNames(style); |
13 | for (var i = styleProperties.length; i--;) |
13 | for (var i = styleProperties.length; i--;) |
14 | { |
14 | { |
15 | var prop = styleProperties[i]; |
15 | var prop = styleProperties[i]; |
16 | obj.style[prop] = style[prop]; |
16 | obj.style[prop] = style[prop]; |
17 | } |
17 | } |
18 | } |
18 | } |
19 | 19 | ||
20 | function editor() |
20 | function editor() |
21 | { |
21 | { |
22 | var div = document.createElement("div"); |
22 | var div = document.createElement("div"); |
23 | setStyle(div, { |
23 | setStyle(div, { |
24 | position: "fixed", |
24 | position: "fixed", |
25 | right: "0", |
25 | right: "0", |
26 | top: "0", |
26 | top: "0", |
27 | width: "200px", |
27 | width: "200px", |
28 | bottom: "0", |
28 | bottom: "0", |
29 | backgroundColor: "#ccc" |
29 | backgroundColor: "#ccc" |
30 | }); |
30 | }); |
31 | document.body.appendChild(div); |
31 | document.body.appendChild(div); |
32 | 32 | ||
33 | function findRules(selectorText) |
33 | function findRules(selectorText) |
34 | { |
34 | { |
35 | var slice = Array.prototype.slice; |
35 | var slice = Array.prototype.slice; |
36 | function toArray(obj) |
36 | function toArray(obj) |
37 | { |
37 | { |
38 | return slice.call(obj); |
38 | return slice.call(obj); |
39 | } |
39 | } |
40 | 40 | ||
41 | var rx = new RegExp("(^|\\s)" + selectorText.replace(/[^$.(){}\[\]]/, "\\$&") + "\\s*$"); |
41 | var rx = new RegExp("(^|\\s)" + selectorText.replace(/[^$.(){}\[\]]/, "\\$&") + "\\s*$"); |
42 | var hits = toArray(document.styleSheets).map(function (styleSheet) { |
42 | var hits = toArray(document.styleSheets).map(function (styleSheet) { |
43 | return toArray(styleSheet.cssRules || styleSheet.rules).filter(function (rule) { |
43 | return toArray(styleSheet.cssRules || styleSheet.rules).filter(function (rule) { |
44 | return rx.test(rule.selectorText); |
44 | return rx.test(rule.selectorText); |
45 | }); |
45 | }); |
46 | }).filter(function (hit) { |
46 | }).filter(function (hit) { |
47 | return hit.length > 0; |
47 | return hit.length > 0; |
48 | }); |
48 | }); |
49 | 49 | ||
50 | return Array.prototype.concat.apply([], hits); |
50 | return Array.prototype.concat.apply([], hits); |
51 | } |
51 | } |
52 | 52 | ||
53 | var afterRule = findRules(".heroes .o::after"); |
53 | var afterRule = findRules(".heroes .o::after"); |
54 | var rxBgImage = new RegExp( |
54 | var rxBgImage = new RegExp( |
55 | "{RADIALGRADIENT}\\(\\s*({POSITION}\\s*,\\s*)?({SHAPE}\\s*,\\s*)?{COLORSTOP}(\\s*,\\s*{COLORSTOP})+\\s*\\)" |
55 | "{RADIALGRADIENT}\\(\\s*({POSITION}\\s*,\\s*)?({SHAPE}\\s*,\\s*)?{COLORSTOP}(\\s*,\\s*{COLORSTOP})+\\s*\\)" |
56 | .replace(/\{RADIALGRADIENT\}/g, "(-(webkit|moz|o|ms)-)?radial-gradient") |
56 | .replace(/\{RADIALGRADIENT\}/g, "(-(webkit|moz|o|ms)-)?radial-gradient") |
57 | .replace(/\{POSITION\}/g, "{LENGTH}(\\s+{LENGTH})?") |
57 | .replace(/\{POSITION\}/g, "{LENGTH}(\\s+{LENGTH})?") |
58 | .replace(/\{SHAPE\}/g, "\\s*((circle|ellipse)(\\s+({EDGE}))?|{LENGTH}(\\s+{LENGTH}))") |
58 | .replace(/\{SHAPE\}/g, "\\s*((circle|ellipse)(\\s+({EDGE}))?|{LENGTH}(\\s+{LENGTH}))") |
59 | .replace(/\{EDGE\}/g, "cover|closest-corner|closest-side|farthest-corner|farthest-side") |
59 | .replace(/\{EDGE\}/g, "cover|closest-corner|closest-side|farthest-corner|farthest-side") |
60 | .replace(/\{COLORSTOP\}/g, "{COLOR}(\\s*{PERCENTAGE})?") |
60 | .replace(/\{COLORSTOP\}/g, "{COLOR}(\\s*{PERCENTAGE})?") |
61 | .replace(/\{LENGTH\}/g, "{NUMBER}{UNIT}") |
61 | .replace(/\{LENGTH\}/g, "{NUMBER}{UNIT}") |
62 | .replace(/\{COLOR\}/g, "({COLORNAME}|{RGB}|{RGBA})") |
62 | .replace(/\{COLOR\}/g, "({COLORNAME}|{RGB}|{RGBA})") |
63 | .replace(/\{RGB\}/g, "rgb\\s*\\(\\s*{COLORCOMP}(\\s*,\\s*{COLORCOMP}){2}\\s*\\)") |
63 | .replace(/\{RGB\}/g, "rgb\\s*\\(\\s*{COLORCOMP}(\\s*,\\s*{COLORCOMP}){2}\\s*\\)") |
64 | .replace(/\{RGBA\}/g, "rgba\\s*\\(\\s*{COLORCOMP}(\\s*,\\s*{COLORCOMP}){2}\\s*,\\s*{PERCENTAGE}\\s*\\)") |
64 | .replace(/\{RGBA\}/g, "rgba\\s*\\(\\s*{COLORCOMP}(\\s*,\\s*{COLORCOMP}){2}\\s*,\\s*{PERCENTAGE}\\s*\\)") |
65 | .replace(/\{COLORCOMP\}/g, "{NUMBER}%?") |
65 | .replace(/\{COLORCOMP\}/g, "{NUMBER}%?") |
66 | .replace(/\{COLORNAME\}/g, "black|transparent") |
66 | .replace(/\{COLORNAME\}/g, "black|transparent") |
67 | .replace(/\{PERCENTAGE\}/g, "{NUMBER}%?") |
67 | .replace(/\{PERCENTAGE\}/g, "{NUMBER}%?") |
68 | .replace(/\{NUMBER\}/g, "\\d+") |
68 | .replace(/\{NUMBER\}/g, "\\d+") |
69 | .replace(/\{UNIT\}/g, "(px|%|em|ex|pt)") |
69 | .replace(/\{UNIT\}/g, "(px|%|em|ex|pt)") |
70 | , "g"); |
70 | , "g"); |
71 | console.log(rxBgImage); |
71 | console.log(rxBgImage); |
72 | var value = afterRule[0].style.getPropertyValue("background-image"); |
72 | var value = afterRule[0].style.getPropertyValue("background-image"); |
73 | console.log(value); |
73 | console.log(value); |
74 | var backgroundImages = value.match(rxBgImage); |
74 | var backgroundImages = value.match(rxBgImage); |
75 | console.log(backgroundImages); |
75 | console.log(backgroundImages); |
76 | } |
76 | } |
77 | */ |
77 | */ |
78 | function net() |
78 | function net() |
79 | { |
79 | { |
80 | var map = { |
80 | var map = { |
81 | "gene-roddenberry's-andromeda": "andromeda", |
81 | "gene-roddenberry's-andromeda": "andromeda", |
82 | "battlestar-galactica-2004": "battlestar-galactica", |
82 | "battlestar-galactica-2004": "battlestar-galactica", |
83 | "battlestar-galactica-2004-de": "battlestar-galactica", |
83 | "battlestar-galactica-2004-de": "battlestar-galactica", |
84 | "buffy-the-vampire-slayer": "buffy", |
84 | "buffy-the-vampire-slayer": "buffy", |
85 | get: function (key) { |
85 | get: function (key) { |
86 | return this.hasOwnProperty(key) ? this[key] : key; |
86 | return this.hasOwnProperty(key) ? this[key] : key; |
87 | } |
87 | } |
88 | }; |
88 | }; |
89 | 89 | ||
90 | var f = function (e) { |
90 | var f = function (e) { |
91 | if (e && e.shiftKey && e.ctrlKey) |
91 | if (e && e.shiftKey && e.ctrlKey) |
92 | { |
92 | { |
93 | var key = map.get(this.textContent.toLowerCase() |
93 | var key = map.get(this.textContent.toLowerCase() |
94 | .replace(/[,()–]/g, "").replace(/\s+/g, "-").replace("-de", "")); |
94 | .replace(/[,()–]/g, "").replace(/\s+/g, "-").replace("-de", "")); |
95 | window.open("http://serienjunkies.org/serie/" + encodeURIComponent(key)); |
95 | window.open("http://serienjunkies.org/serie/" + encodeURIComponent(key)); |
96 | e.preventDefault(); |
96 | e.preventDefault(); |
97 | } |
97 | } |
98 | }; |
98 | }; |
99 | 99 | ||
100 | try |
100 | try |
101 | { |
101 | { |
102 | for (var a = document.links, i = a.length; i--;) |
102 | for (var a = document.links, i = a.length; i--;) |
103 | { |
103 | { |
104 | var e = a[i]; |
104 | var e = a[i]; |
105 | e.addEventListener("click", f, false); |
105 | e.addEventListener("click", f, false); |
106 | } |
106 | } |
107 | } |
107 | } |
108 | catch (e) {} |
108 | catch (e) {} |
109 | } |
109 | } |
110 | </script> |
110 | </script> |
111 | </head> |
111 | </head> |
112 | 112 | ||
113 | <body onload="net() // editor()"> |
113 | <body onload="net() // editor()"> |
114 | <h1 class="hidden">Seri-o-meter</h1> |
114 | <h1 class="hidden">Seri-o-meter</h1> |
115 | <?php // var_dump($serien); ?> |
115 | <?php // var_dump($serien); ?> |
116 | <table> |
116 | <table> |
117 | <?php |
117 | <?php |
118 | setlocale(LC_ALL, 'de_CH.UTF-8'); |
118 | setlocale(LC_ALL, 'de_CH.UTF-8'); |
119 | foreach ($serien as $name => &$serie) |
119 | foreach ($serien as $name => &$serie) |
120 | { |
120 | { |
121 | ?> |
121 | ?> |
122 | <tr> |
122 | <tr> |
123 | <td style="text-align: center"><?php |
123 | <td style="text-align: center"><?php |
124 | $recommended = ($name === $min_series); |
124 | $recommended = ($name === $min_series); |
125 | if ($recommended) { ?>→<?php } |
125 | if ($recommended) { ?>→<?php } |
126 | if (isset($serie['ignore']) && $serie['ignore']) |
126 | if (isset($serie['ignore']) && $serie['ignore']) |
127 | { |
127 | { |
128 | ?><span style="color: red; font-weight: bold">i</span><?php |
128 | ?>→<span style="color: red; font-weight: bold">⃠</span><?php |
129 | } |
129 | } |
130 | ?></td> |
130 | ?></td> |
131 | <th<?php if ($recommended) { ?> class="recommended"<?php } ?>><?php |
131 | <th<?php if ($recommended) { ?> class="recommended"<?php } ?>><?php |
132 | $ep_list = isset($serie['episode_list']); |
132 | $ep_list = isset($serie['episode_list']); |
133 | if ($ep_list) |
133 | if ($ep_list) |
134 | { |
134 | { |
135 | ?><a href="<?php |
135 | ?><a href="<?php |
136 | echo htmlspecialchars($serie['episode_list']); |
136 | echo htmlspecialchars($serie['episode_list']); |
137 | ?>" title="Episodenliste"><?php |
137 | ?>" title="Episodenliste"><?php |
138 | } |
138 | } |
139 | echo $name; |
139 | echo $name; |
140 | if ($ep_list) { ?></a><?php } |
140 | if ($ep_list) { ?></a><?php } |
141 | ?><br> |
141 | ?><br> |
142 | <span style="font-weight: normal"><?php |
142 | <span style="font-weight: normal"><?php |
143 | if (array_key_exists('channel', $serie)) echo $serie['channel']; |
143 | if (array_key_exists('channel', $serie)) echo $serie['channel']; |
144 | 144 | ||
145 | if (array_key_exists('showtimes', $serie)) |
145 | if (array_key_exists('showtimes', $serie)) |
146 | { |
146 | { |
147 | echo ', ' . $serie['showtimes']; |
147 | echo ', ' . $serie['showtimes']; |
148 | } |
148 | } |
149 | ?></span></th> |
149 | ?></span></th> |
150 | <td<?php if ($recommended) { ?> class="recommended"<?php } ?>> |
150 | <td<?php if ($recommended) { ?> class="recommended"<?php } ?>> |
151 | <div>Gesehen: <?php |
151 | <div>Gesehen: <?php |
152 | echo implode(', ', $serie['coverage']) . ' ('. $serie['count']; |
152 | echo implode(', ', $serie['coverage']) . ' ('. $serie['count']; |
153 | ?> von <?php $total = $serie['total']; echo $total; ?> Episoden)<?php |
153 | ?> von <?php $total = $serie['total']; echo $total; ?> Episoden)<?php |
154 | if (isset($serie['last_seen'])) |
154 | if (isset($serie['last_seen'])) |
155 | { |
155 | { |
156 | ?>; zuletzt am <?php |
156 | ?>; zuletzt am <?php |
157 | echo strftime('%A, %e. %B %Y %H:%M %z', $serie['last_seen']); |
157 | echo strftime('%A, %e. %B %Y %H:%M %z', $serie['last_seen']); |
158 | } |
158 | } |
159 | ?></div> |
159 | ?></div> |
160 | <div class="box"> |
160 | <div class="box"> |
161 | <div class="meter" |
161 | <div class="meter" |
162 | style="width: <?php |
162 | style="width: <?php |
163 | $percentage = $serie['percentage']; |
163 | $percentage = $serie['percentage']; |
164 | echo $percentage; ?>%" |
164 | echo $percentage; ?>%" |
165 | ></div> |
165 | ></div> |
166 | <?php |
166 | <?php |
167 | if (array_key_exists('seasons', $serie)) |
167 | if (array_key_exists('seasons', $serie)) |
168 | { |
168 | { |
169 | $offset = 0; |
169 | $offset = 0; |
170 | foreach ($serie['seasons'] as $key => $season) |
170 | foreach ($serie['seasons'] as $key => $season) |
171 | { |
171 | { |
172 | ?> |
172 | ?> |
173 | <div class="season" |
173 | <div class="season" |
174 | <?php |
174 | <?php |
175 | if (!is_numeric($key)) |
175 | if (!is_numeric($key)) |
176 | { |
176 | { |
177 | ?> title="<?php echo htmlspecialchars($key); ?>"<?php |
177 | ?> title="<?php echo htmlspecialchars($key); ?>"<?php |
178 | } |
178 | } |
179 | ?> |
179 | ?> |
180 | style="<?php |
180 | style="<?php |
181 | if ($key === 0) |
181 | if ($key === 0) |
182 | { |
182 | { |
183 | ?>border-left: none; <?php |
183 | ?>border-left: none; <?php |
184 | } |
184 | } |
185 | ?>left: <?php echo $offset; ?>%; |
185 | ?>left: <?php echo $offset; ?>%; |
186 | width: <?php echo $season / $total * 100; ?>%" |
186 | width: <?php echo $season / $total * 100; ?>%" |
187 | ><?php |
187 | ><?php |
188 | if (is_numeric($key)) |
188 | if (is_numeric($key)) |
189 | { |
189 | { |
190 | echo ($key + 1); |
190 | echo ($key + 1); |
191 | } |
191 | } |
192 | else |
192 | else |
193 | { |
193 | { |
194 | echo $key; |
194 | echo $key; |
195 | } |
195 | } |
196 | ?></div> |
196 | ?></div> |
197 | <?php |
197 | <?php |
198 | $offset += round($season / $total * 100, 1); |
198 | $offset += round($season / $total * 100, 1); |
199 | } |
199 | } |
200 | } |
200 | } |
201 | 201 | ||
202 | if (isset($serie['episodes'])) |
202 | if (isset($serie['episodes'])) |
203 | { |
203 | { |
204 | $prevNumber = null; |
204 | $prevNumber = null; |
205 | foreach ($serie['episodes'] as $episode => $description) |
205 | foreach ($serie['episodes'] as $episode => $description) |
206 | { |
206 | { |
207 | $episode_str = $episode; |
207 | $episode_str = $episode; |
208 | if (isset($serie['season_ranges']) && is_array($serie['season_ranges'])) |
208 | if (isset($serie['season_ranges']) && is_array($serie['season_ranges'])) |
209 | { |
209 | { |
210 | foreach ($serie['season_ranges'] as $season_key => $season_range) |
210 | foreach ($serie['season_ranges'] as $season_key => $season_range) |
211 | { |
211 | { |
212 | if ($episode >= $season_range[0] && $episode <= $season_range[1]) |
212 | if ($episode >= $season_range[0] && $episode <= $season_range[1]) |
213 | { |
213 | { |
214 | $episode_str = sprintf("%u (%ux%02u)", $episode, $season_key, $episode - $season_range[0] + 1); |
214 | $episode_str = sprintf("%u (%ux%02u)", $episode, $season_key, $episode - $season_range[0] + 1); |
215 | } |
215 | } |
216 | } |
216 | } |
217 | } |
217 | } |
218 | ?> |
218 | ?> |
219 | <div class="coverage" |
219 | <div class="coverage" |
220 | style="<?php |
220 | style="<?php |
221 | if (is_null($prevNumber) || $prevNumber !== $episode - 1) |
221 | if (is_null($prevNumber) || $prevNumber !== $episode - 1) |
222 | { |
222 | { |
223 | ?>border-left: 1px solid rgba(0, 218, 0, 0.5); <?php |
223 | ?>border-left: 1px solid rgba(0, 218, 0, 0.5); <?php |
224 | } |
224 | } |
225 | ?> |
225 | ?> |
226 | border-right: 1px solid rgba(0, 218, 0, 0.5); |
226 | border-right: 1px solid rgba(0, 218, 0, 0.5); |
227 | background-color: transparent; |
227 | background-color: transparent; |
228 | left: <?php echo ($episode - 1) / $total * 100; ?>%; |
228 | left: <?php echo ($episode - 1) / $total * 100; ?>%; |
229 | width: <?php echo 1 / $total * 100; ?>%" |
229 | width: <?php echo 1 / $total * 100; ?>%" |
230 | title="<?php |
230 | title="<?php |
231 | echo "{$episode_str}: " . htmlspecialchars($description); |
231 | echo "{$episode_str}: " . htmlspecialchars($description); |
232 | ?>"></div><?php |
232 | ?>"></div><?php |
233 | $prevNumber = $episode; |
233 | $prevNumber = $episode; |
234 | } |
234 | } |
235 | } |
235 | } |
236 | 236 | ||
237 | if (isset($serie['seen'])) |
237 | if (isset($serie['seen'])) |
238 | { |
238 | { |
239 | foreach ($serie['seen'] as $range) |
239 | foreach ($serie['seen'] as $range) |
240 | { |
240 | { |
241 | if (!is_array($range)) |
241 | if (!is_array($range)) |
242 | { |
242 | { |
243 | $range = array($range, $range); |
243 | $range = array($range, $range); |
244 | } |
244 | } |
245 | /* |
245 | /* |
246 | for ($i = $episode[0]; $i < $episode[1]; ++$i) |
246 | for ($i = $episode[0]; $i < $episode[1]; ++$i) |
247 | { |
247 | { |
248 | ?> |
248 | ?> |
249 | <div class="coverage" |
249 | <div class="coverage" |
250 | style="left: <?php echo ($episode[0] - 1) / $total * 100; ?>%; |
250 | style="left: <?php echo ($episode[0] - 1) / $total * 100; ?>%; |
251 | width: <?php echo ($episode[1] - $episode[0] + 1) / $total * 100; ?>%" |
251 | width: <?php echo ($episode[1] - $episode[0] + 1) / $total * 100; ?>%" |
252 | ></div> |
252 | ></div> |
253 | <?php |
253 | <?php |
254 | } |
254 | } |
255 | } |
255 | } |
256 | else |
256 | else |
257 | */ |
257 | */ |
258 | 258 | ||
259 | for ($episode = $range[0]; $episode <= $range[1]; ++$episode) |
259 | for ($episode = $range[0]; $episode <= $range[1]; ++$episode) |
260 | { |
260 | { |
261 | $episode_str = $episode; |
261 | $episode_str = $episode; |
262 | if (isset($serie['season_ranges']) && is_array($serie['season_ranges'])) |
262 | if (isset($serie['season_ranges']) && is_array($serie['season_ranges'])) |
263 | { |
263 | { |
264 | foreach ($serie['season_ranges'] as $season_key => $season_range) |
264 | foreach ($serie['season_ranges'] as $season_key => $season_range) |
265 | { |
265 | { |
266 | if ($episode >= $season_range[0] && $episode <= $season_range[1]) |
266 | if ($episode >= $season_range[0] && $episode <= $season_range[1]) |
267 | { |
267 | { |
268 | $episode_str = sprintf("%u (%ux%02u)", $episode, $season_key, $episode - $season_range[0] + 1); |
268 | $episode_str = sprintf("%u (%ux%02u)", $episode, $season_key, $episode - $season_range[0] + 1); |
269 | } |
269 | } |
270 | } |
270 | } |
271 | } |
271 | } |
272 | ?> |
272 | ?> |
273 | <div class="coverage" |
273 | <div class="coverage" |
274 | style="left: <?php echo ($episode - 1) / $total * 100; ?>%; |
274 | style="left: <?php echo ($episode - 1) / $total * 100; ?>%; |
275 | width: <?php echo 1 / $total * 100; ?>%" |
275 | width: <?php echo 1 / $total * 100; ?>%" |
276 | <?php |
276 | <?php |
277 | if (isset($serie['episodes']) && array_key_exists($episode, $serie['episodes'])) |
277 | if (isset($serie['episodes']) && array_key_exists($episode, $serie['episodes'])) |
278 | { |
278 | { |
279 | ?>title="<?php |
279 | ?>title="<?php |
280 | echo "{$episode_str}: " . htmlspecialchars($serie['episodes'][$episode]); |
280 | echo "{$episode_str}: " . htmlspecialchars($serie['episodes'][$episode]); |
281 | ?>"<?php |
281 | ?>"<?php |
282 | } |
282 | } |
283 | ?>></div> |
283 | ?>></div> |
284 | <?php |
284 | <?php |
285 | } |
285 | } |
286 | } |
286 | } |
287 | } |
287 | } |
288 | ?> |
288 | ?> |
289 | <span class="percentage"><?php echo round($percentage, 1); ?>%</span> |
289 | <span class="percentage"><?php echo round($percentage, 1); ?>%</span> |
290 | </div> |
290 | </div> |
291 | </td> |
291 | </td> |
292 | </tr> |
292 | </tr> |
293 | <?php |
293 | <?php |
294 | } |
294 | } |
295 | ?> |
295 | ?> |
296 | </table> |
296 | </table> |
297 | </body> |
297 | </body> |
298 | </html> |
298 | </html> |