initial code push
This commit is contained in:
mage
@@ -0,0 +1,69 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title></title>
|
||||
<script src="live.js"></script>
|
||||
<style>
|
||||
body {
|
||||
font-family: Helvetica, Arial;
|
||||
}
|
||||
#wrapper {
|
||||
width: 980px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 300px;
|
||||
}
|
||||
.toc {
|
||||
background: #fefefe;
|
||||
width: 200px;
|
||||
position: fixed;
|
||||
border: 1px solid #ddd;
|
||||
color: #333;
|
||||
}
|
||||
.toc a {
|
||||
color: #333;
|
||||
}
|
||||
.toc .tocH2 {
|
||||
margin-left: 10px
|
||||
}
|
||||
.toc .tocH3 {
|
||||
margin-left: 20px
|
||||
}
|
||||
.toc-active {
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.toc.right {
|
||||
right: 0
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="toc">
|
||||
</div>
|
||||
<div class="toc right">
|
||||
</div>
|
||||
<div id="wrapper">
|
||||
<h1>Page Title</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum ligula a augue sollicitudin a tincidunt felis tincidunt. Donec et urna augue, sed consectetur lacus. Maecenas tincidunt volutpat lorem. Suspendisse turpis tellus, sodales ac commodo id, rhoncus vel augue. Vestibulum nisl nibh, rutrum eu bibendum vitae, bibendum et libero. Suspendisse vel odio vitae leo commodo lacinia. Sed non lacinia nulla. Pellentesque faucibus euismod dictum. Suspendisse potenti.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum ligula a augue sollicitudin a tincidunt felis tincidunt. Donec et urna augue, sed consectetur lacus. Maecenas tincidunt volutpat lorem. Suspendisse turpis tellus, sodales ac commodo id, rhoncus vel augue. Vestibulum nisl nibh, rutrum eu bibendum vitae, bibendum et libero. Suspendisse vel odio vitae leo commodo lacinia. Sed non lacinia nulla. Pellentesque faucibus euismod dictum. Suspendisse potenti.</p>
|
||||
<h2>Sub Heading</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum ligula a augue sollicitudin a tincidunt felis tincidunt. Donec et urna augue, sed consectetur lacus. Maecenas tincidunt volutpat lorem. Suspendisse turpis tellus, sodales ac commodo id, rhoncus vel augue. Vestibulum nisl nibh, rutrum eu bibendum vitae, bibendum et libero. Suspendisse vel odio vitae leo commodo lacinia. Sed non lacinia nulla. Pellentesque faucibus euismod dictum. Suspendisse potenti.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum ligula a augue sollicitudin a tincidunt felis tincidunt. Donec et urna augue, sed consectetur lacus. Maecenas tincidunt volutpat lorem. Suspendisse turpis tellus, sodales ac commodo id, rhoncus vel augue. Vestibulum nisl nibh, rutrum eu bibendum vitae, bibendum et libero. Suspendisse vel odio vitae leo commodo lacinia. Sed non lacinia nulla. Pellentesque faucibus euismod dictum. Suspendisse potenti.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum ligula a augue sollicitudin a tincidunt felis tincidunt. Donec et urna augue, sed consectetur lacus. Maecenas tincidunt volutpat lorem. Suspendisse turpis tellus, sodales ac commodo id, rhoncus vel augue. Vestibulum nisl nibh, rutrum eu bibendum vitae, bibendum et libero. Suspendisse vel odio vitae leo commodo lacinia. Sed non lacinia nulla. Pellentesque faucibus euismod dictum. Suspendisse potenti.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum ligula a augue sollicitudin a tincidunt felis tincidunt. Donec et urna augue, sed consectetur lacus. Maecenas tincidunt volutpat lorem. Suspendisse turpis tellus, sodales ac commodo id, rhoncus vel augue. Vestibulum nisl nibh, rutrum eu bibendum vitae, bibendum et libero. Suspendisse vel odio vitae leo commodo lacinia. Sed non lacinia nulla. Pellentesque faucibus euismod dictum. Suspendisse potenti.</p>
|
||||
<h2>Sub Heading</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum ligula a augue sollicitudin a tincidunt felis tincidunt. Donec et urna augue, sed consectetur lacus. Maecenas tincidunt volutpat lorem. Suspendisse turpis tellus, sodales ac commodo id, rhoncus vel augue. Vestibulum nisl nibh, rutrum eu bibendum vitae, bibendum et libero. Suspendisse vel odio vitae leo commodo lacinia. Sed non lacinia nulla. Pellentesque faucibus euismod dictum. Suspendisse potenti.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum ligula a augue sollicitudin a tincidunt felis tincidunt. Donec et urna augue, sed consectetur lacus. Maecenas tincidunt volutpat lorem. Suspendisse turpis tellus, sodales ac commodo id, rhoncus vel augue. Vestibulum nisl nibh, rutrum eu bibendum vitae, bibendum et libero. Suspendisse vel odio vitae leo commodo lacinia. Sed non lacinia nulla. Pellentesque faucibus euismod dictum. Suspendisse potenti.</p>
|
||||
<h3>SubSub Heading</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum ligula a augue sollicitudin a tincidunt felis tincidunt. Donec et urna augue, sed consectetur lacus. Maecenas tincidunt volutpat lorem. Suspendisse turpis tellus, sodales ac commodo id, rhoncus vel augue. Vestibulum nisl nibh, rutrum eu bibendum vitae, bibendum et libero. Suspendisse vel odio vitae leo commodo lacinia. Sed non lacinia nulla. Pellentesque faucibus euismod dictum. Suspendisse potenti.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum ligula a augue sollicitudin a tincidunt felis tincidunt. Donec et urna augue, sed consectetur lacus. Maecenas tincidunt volutpat lorem. Suspendisse turpis tellus, sodales ac commodo id, rhoncus vel augue. Vestibulum nisl nibh, rutrum eu bibendum vitae, bibendum et libero. Suspendisse vel odio vitae leo commodo lacinia. Sed non lacinia nulla. Pellentesque faucibus euismod dictum. Suspendisse potenti.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum ligula a augue sollicitudin a tincidunt felis tincidunt. Donec et urna augue, sed consectetur lacus. Maecenas tincidunt volutpat lorem. Suspendisse turpis tellus, sodales ac commodo id, rhoncus vel augue. Vestibulum nisl nibh, rutrum eu bibendum vitae, bibendum et libero. Suspendisse vel odio vitae leo commodo lacinia. Sed non lacinia nulla. Pellentesque faucibus euismod dictum. Suspendisse potenti.</p>
|
||||
</div>
|
||||
<script src="jquery.js"></script>
|
||||
<script src="../lib/toc.js"></script>
|
||||
<script>
|
||||
$('.toc').toc({
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,233 @@
|
||||
/*
|
||||
Live.js - One script closer to Designing in the Browser
|
||||
Written for Handcraft.com by Martin Kool (@mrtnkl).
|
||||
|
||||
Version 4.
|
||||
Recent change: Made stylesheet and mimetype checks case insensitive.
|
||||
|
||||
http://livejs.com
|
||||
http://livejs.com/license (MIT)
|
||||
@livejs
|
||||
|
||||
Include live.js#css to monitor css changes only.
|
||||
Include live.js#js to monitor js changes only.
|
||||
Include live.js#html to monitor html changes only.
|
||||
Mix and match to monitor a preferred combination such as live.js#html,css
|
||||
|
||||
By default, just include live.js to monitor all css, js and html changes.
|
||||
|
||||
Live.js can also be loaded as a bookmarklet. It is best to only use it for CSS then,
|
||||
as a page reload due to a change in html or css would not re-include the bookmarklet.
|
||||
To monitor CSS and be notified that it has loaded, include it as: live.js#css,notify
|
||||
*/
|
||||
(function () {
|
||||
|
||||
var headers = { "Etag": 1, "Last-Modified": 1, "Content-Length": 1, "Content-Type": 1 },
|
||||
resources = {},
|
||||
pendingRequests = {},
|
||||
currentLinkElements = {},
|
||||
oldLinkElements = {},
|
||||
interval = 1000,
|
||||
loaded = false,
|
||||
active = { "html": 1, "css": 1, "js": 1 };
|
||||
|
||||
var Live = {
|
||||
|
||||
// performs a cycle per interval
|
||||
heartbeat: function () {
|
||||
if (document.body) {
|
||||
// make sure all resources are loaded on first activation
|
||||
if (!loaded) Live.loadresources();
|
||||
Live.checkForChanges();
|
||||
}
|
||||
setTimeout(Live.heartbeat, interval);
|
||||
},
|
||||
|
||||
// loads all local css and js resources upon first activation
|
||||
loadresources: function () {
|
||||
|
||||
// helper method to assert if a given url is local
|
||||
function isLocal(url) {
|
||||
var loc = document.location,
|
||||
reg = new RegExp("^\\.|^\/(?!\/)|^[\\w]((?!://).)*$|" + loc.protocol + "//" + loc.host);
|
||||
return url.match(reg);
|
||||
}
|
||||
|
||||
// gather all resources
|
||||
var scripts = document.getElementsByTagName("script"),
|
||||
links = document.getElementsByTagName("link"),
|
||||
uris = [];
|
||||
|
||||
// track local js urls
|
||||
for (var i = 0; i < scripts.length; i++) {
|
||||
var script = scripts[i], src = script.getAttribute("src");
|
||||
if (src && isLocal(src))
|
||||
uris.push(src);
|
||||
if (src && src.match(/\blive.js#/)) {
|
||||
for (var type in active)
|
||||
active[type] = src.match("[#,|]" + type) != null
|
||||
if (src.match("notify"))
|
||||
alert("Live.js is loaded.");
|
||||
}
|
||||
}
|
||||
if (!active.js) uris = [];
|
||||
if (active.html) uris.push(document.location.href);
|
||||
|
||||
// track local css urls
|
||||
for (var i = 0; i < links.length && active.css; i++) {
|
||||
var link = links[i], rel = link.getAttribute("rel"), href = link.getAttribute("href", 2);
|
||||
if (href && rel && rel.match(new RegExp("stylesheet", "i")) && isLocal(href)) {
|
||||
uris.push(href);
|
||||
currentLinkElements[href] = link;
|
||||
}
|
||||
}
|
||||
|
||||
// initialize the resources info
|
||||
for (var i = 0; i < uris.length; i++) {
|
||||
var url = uris[i];
|
||||
Live.getHead(url, function (url, info) {
|
||||
resources[url] = info;
|
||||
});
|
||||
}
|
||||
|
||||
// add rule for morphing between old and new css files
|
||||
var head = document.getElementsByTagName("head")[0],
|
||||
style = document.createElement("style"),
|
||||
rule = "transition: all .3s ease-out;"
|
||||
css = [".livejs-loading * { ", rule, " -webkit-", rule, "-moz-", rule, "-o-", rule, "}"].join('');
|
||||
style.setAttribute("type", "text/css");
|
||||
head.appendChild(style);
|
||||
style.styleSheet ? style.styleSheet.cssText = css : style.appendChild(document.createTextNode(css));
|
||||
|
||||
// yep
|
||||
loaded = true;
|
||||
},
|
||||
|
||||
// check all tracking resources for changes
|
||||
checkForChanges: function () {
|
||||
for (var url in resources) {
|
||||
if (pendingRequests[url])
|
||||
continue;
|
||||
|
||||
Live.getHead(url, function (url, newInfo) {
|
||||
var oldInfo = resources[url],
|
||||
hasChanged = false;
|
||||
resources[url] = newInfo;
|
||||
for (var header in oldInfo) {
|
||||
// do verification based on the header type
|
||||
var oldValue = oldInfo[header],
|
||||
newValue = newInfo[header],
|
||||
contentType = newInfo["Content-Type"];
|
||||
switch (header.toLowerCase()) {
|
||||
case "etag":
|
||||
if (!newValue) break;
|
||||
// fall through to default
|
||||
default:
|
||||
hasChanged = oldValue != newValue;
|
||||
break;
|
||||
}
|
||||
// if changed, act
|
||||
if (hasChanged) {
|
||||
Live.refreshResource(url, contentType);
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// act upon a changed url of certain content type
|
||||
refreshResource: function (url, type) {
|
||||
switch (type.toLowerCase()) {
|
||||
// css files can be reloaded dynamically by replacing the link element
|
||||
case "text/css":
|
||||
var link = currentLinkElements[url],
|
||||
html = document.body.parentNode,
|
||||
head = link.parentNode,
|
||||
next = link.nextSibling,
|
||||
newLink = document.createElement("link");
|
||||
|
||||
html.className = html.className.replace(/\s*livejs\-loading/gi, '') + ' livejs-loading';
|
||||
newLink.setAttribute("type", "text/css");
|
||||
newLink.setAttribute("rel", "stylesheet");
|
||||
newLink.setAttribute("href", url + "?now=" + new Date() * 1);
|
||||
next ? head.insertBefore(newLink, next) : head.appendChild(newLink);
|
||||
currentLinkElements[url] = newLink;
|
||||
oldLinkElements[url] = link;
|
||||
|
||||
// schedule removal of the old link
|
||||
Live.removeoldLinkElements();
|
||||
break;
|
||||
|
||||
// check if an html resource is our current url, then reload
|
||||
case "text/html":
|
||||
if (url != document.location.href)
|
||||
return;
|
||||
|
||||
// local javascript changes cause a reload as well
|
||||
case "text/javascript":
|
||||
case "application/javascript":
|
||||
case "application/x-javascript":
|
||||
document.location.reload();
|
||||
}
|
||||
},
|
||||
|
||||
// removes the old stylesheet rules only once the new one has finished loading
|
||||
removeoldLinkElements: function () {
|
||||
var pending = 0;
|
||||
for (var url in oldLinkElements) {
|
||||
// if this sheet has any cssRules, delete the old link
|
||||
try {
|
||||
var link = currentLinkElements[url],
|
||||
oldLink = oldLinkElements[url],
|
||||
html = document.body.parentNode,
|
||||
sheet = link.sheet || link.styleSheet,
|
||||
rules = sheet.rules || sheet.cssRules;
|
||||
if (rules.length >= 0) {
|
||||
oldLink.parentNode.removeChild(oldLink);
|
||||
delete oldLinkElements[url];
|
||||
setTimeout(function () {
|
||||
html.className = html.className.replace(/\s*livejs\-loading/gi, '');
|
||||
}, 100);
|
||||
}
|
||||
} catch (e) {
|
||||
pending++;
|
||||
}
|
||||
if (pending) setTimeout(Live.removeoldLinkElements, 50);
|
||||
}
|
||||
},
|
||||
|
||||
// performs a HEAD request and passes the header info to the given callback
|
||||
getHead: function (url, callback) {
|
||||
pendingRequests[url] = true;
|
||||
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XmlHttp");
|
||||
xhr.open("HEAD", url, true);
|
||||
xhr.onreadystatechange = function () {
|
||||
delete pendingRequests[url];
|
||||
if (xhr.readyState == 4 && xhr.status != 304) {
|
||||
xhr.getAllResponseHeaders();
|
||||
var info = {};
|
||||
for (var h in headers) {
|
||||
var value = xhr.getResponseHeader(h);
|
||||
// adjust the simple Etag variant to match on its significant part
|
||||
if (h.toLowerCase() == "etag" && value) value = value.replace(/^W\//, '');
|
||||
if (h.toLowerCase() == "content-type" && value) value = value.replace(/^(.*?);.*?$/i, "$1");
|
||||
info[h] = value;
|
||||
}
|
||||
callback(url, info);
|
||||
}
|
||||
}
|
||||
xhr.send();
|
||||
}
|
||||
};
|
||||
|
||||
// start listening
|
||||
if (document.location.protocol != "file:") {
|
||||
if (!window.liveJsLoaded)
|
||||
Live.heartbeat();
|
||||
|
||||
window.liveJsLoaded = true;
|
||||
}
|
||||
else if (window.console)
|
||||
console.log("Live.js doesn't support the file protocol. It needs http.");
|
||||
})();
|
||||
Reference in New Issue
Block a user