forked from remy/html5demos
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.php
119 lines (106 loc) · 4.16 KB
/
index.php
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
<?php
$demos = json_decode(file_get_contents('demos.json'));
function support($support) {
$browsers = split(' ', 'ie firefox opera safari chrome'); // big 5 - should I add iPhone (for geo, etc)?
$live = isset($support->live) ? split(' ', $support->live) : array();
$nightly = isset($support->nightly) ? split(' ', $support->nightly) : array();
$html = '';
foreach ($browsers as $browser) {
$class = '';
if (in_array($browser, $live)) {
$class .= ' live';
} else if (in_array($browser, $nightly)) {
$class .= ' nightly';
} else {
$class .= ' none';
}
$html .= '<span title="' . trim($class) . '" class="' . $browser . $class . '">' . $browser . ':' . $class . '</span> ';
}
return $html;
}
function spans($list) {
$items = split(' ', $list);
$html = '';
foreach ($items as $item) {
$html .= '<span>' . $item . '</span> ';
}
return $html;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=620" />
<title>HTML5 Demos and Examples</title>
<link rel="stylesheet" href="/css/html5demos.css" type="text/css" />
<script src="js/h5utils.js"></script>
</head>
<body>
<section id="wrapper">
<header>
<h1><abbr>HTML</abbr> 5 Demos and Examples</h1>
</header>
<article>
<p><abbr>HTML</abbr> 5 experimentation and demos I've hacked together. Click on the browser support icon or the technology tag to filter the demos (the filter is an <code>OR</code> filter).</p>
<section>
<a href="http://full-frontal.org" id="ffad" title="JavaScript Conference: Full Frontal, 12th November">
<img src="http://2010.full-frontal.org/images/ff2010.png" alt="Full Frontal Logo" />
<p><strong>Learn more HTML5 & JavaScript:</strong> Full Frontal is a conference, <em>run by</em> front end developers <em>for</em> front end developers, held in the UK on 12th November.</p>
<p>Early bird tickets start at £100. Find out more: <em class="url">http://full-frontal.org</em></p>
</a>
</section>
<table id="demos">
<thead>
<th>Demo</th>
<th>Support</th>
<th>Technology</th>
</thead>
<tbody>
<?php foreach ($demos as $demo) :?>
<tr>
<td class="demo"><a href="<?=$demo->url?>"><?=$demo->desc?></a><?php if (isset($demo->note)) { echo ' <small>' . $demo->note . '</small>'; }?></td>
<td class="support"><?=support($demo->support)?></td>
<td class="tags"><?=spans($demo->tags)?></td>
</tr>
<?php endforeach ?>
</tbody>
</table>
<p>All content, code, video and audio is <a rel="license" href="http://creativecommons.org/licenses/by-sa/2.0/uk/">Creative Commons Share Alike 2.0</a></p>
</article>
<footer><a id="built" href="http://twitter.com/rem">@rem built this</a></footer>
</section>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$('tbody tr span').click(function () {
var $tag = $(this), tag = $tag.text(), type = $tag.closest('td').attr('class');
if ($tag.is('.selected')) {
$('.' + type + ' span:contains(' + tag + ')').removeClass('selected');
} else {
$('.' + type + ' span:contains(' + tag + ')').addClass('selected');
}
// it's an AND filter
var $trs = $('.' + type + ':has(span.selected)').closest('tr');
if ($trs.length) {
$('tbody tr').hide();
$trs.show();
} else {
$('tbody tr').show();
}
});
// $('tr td.demo').click(function () {
// window.location = $(this).find('a').attr('href');
// });
</script>
<a href="http://github.com/remy/html5demos"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" /></a>
<script>
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script>
try {
var pageTracker = _gat._getTracker("UA-1656750-18");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>