Mirror
/
html5demos
mirror of https://github.com/Erreur32/html5demos.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

updated promo & moved to node-websocket-server

This commit is contained in:
remy 2010-10-19 20:07:30 +01:00
parent 1d3d90364f
commit 1e9460f2d5
3 changed files with 43 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
index.php
View File

@ -19,7 +19,7 @@ function support($support) {
$class .= ' none';
}
$html .= '<span title="' . trim($class) . '" class="' . $browser . $class . '">' . $browser . ':' . $class . '</span> ';
$html .= '<span title="' . trim($class) . '" class="tag ' . $browser . $class . '">' . $browser . ':' . $class . '</span> ';
}
return $html;
@ -29,7 +29,7 @@ function spans($list) {
$items = split(' ', $list);
$html = '';
foreach ($items as $item) {
$html .= '<span>' . $item . '</span> ';
$html .= '<span class="tag">' . $item . '</span> ';
}
return $html;
@ -52,17 +52,20 @@ function spans($list) {
<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 &amp; 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 href="http://introducinghtml5.com" id="ih5">
<p><strong>Introducing HTML5</strong> by Bruce Laweson &amp; Remy Sharp is the first full length book dedicated to HTML5.</p><p>Get it now and kick some HTML5 ass!</p>
</a>
</section>
<p id="tags" class="tags">
</p>
<table id="demos">
<thead>
<th>Demo</th>
<th>Support</th>
<th>Technology</th>
<tr>
<th>Demo</th>
<th>Support</th>
<th>Technology</th>
</tr>
</thead>
<tbody>
<?php foreach ($demos as $demo) :?>
@ -82,8 +85,9 @@ function spans($list) {
<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');
$(document).delegate('span.tag', 'click', function () {
var $tag = $(this), tag = $tag.text(), type = $tag.closest('td').attr('class') || 'tags';
if ($tag.is('.selected')) {
$('.' + type + ' span:contains(' + tag + ')').removeClass('selected');
} else {
@ -97,9 +101,21 @@ $('tbody tr span').click(function () {
$trs.show();
} else {
$('tbody tr').show();
}
});
var html = [];
$('.tags span.tag').each(function () {
var $tag = $(this), tag = $tag.text();
if (!tags[tag]) {
tags[tag] = true;
html.push('<span class="tag">' + tag + '</span> ');
}
});
$('#tags').append('<strong>Filter demos:</strong> ' + html.sort().join(''));
// $('tr td.demo').click(function () {
// window.location = $(this).find('a').attr('href');
// });

17
js/h5utils.js
View File

@ -35,8 +35,21 @@ addEvent(window, 'click', function (event) {
if (event.target.hash == '#view-source') {
// event.preventDefault();
if (!document.getElementById('view-source')) {
pre.innerHTML = ('<!DOCTYPE html>\n<html>\n' + document.documentElement.innerHTML + '\n</html>').replace(/[<>]/g, function (m) { return {'<':'&lt;','>':'&gt;'}[m]});
document.body.appendChild(pre);
// pre.innerHTML = ('<!DOCTYPE html>\n<html>\n' + document.documentElement.innerHTML + '\n</html>').replace(/[<>]/g, function (m) { return {'<':'&lt;','>':'&gt;'}[m]});
var xhr = new XMLHttpRequest();
// original source - rather than rendered source
xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
pre.innerHTML = this.responseText.replace(/[<>]/g, function (m) { return {'<':'&lt;','>':'&gt;'}[m]});
prettyPrint();
}
};
document.body.appendChild(pre);
// really need to be sync? - I like to think so
xhr.open("GET", window.location, true);
xhr.send();
}
document.body.className = 'view-source';

2
server/custom-echo.js
View File

@ -4,7 +4,7 @@ var sys = require("sys")
, fs = require("fs")
, path = require("path")
, http = require("http")
, ws = require('../lib/ws');
, ws = require(__dirname + '/node-websocket-server/lib/ws');
/*-----------------------------------------------
logging: