kmx git

Commit f237061857cbf362340c69e10b8ab71795a7fe2c

2012-07-16T17:02:20
Simplified markup and added simple templating
diff --git a/code.js b/code.js
index cc2f871..3252f2d 100644
--- a/code.js
+++ b/code.js
@@ -1,21 +1,35 @@
-$$('pre[data-src]').forEach(function(pre) {
-	var src = pre.getAttribute('data-src');
+$$('[data-src]').forEach(function(element) {
+	var src = element.getAttribute('data-src'),
+	    html = element.getAttribute('data-type') === 'text/html',
+	    contentProperty = html? 'innerHTML' : 'textContent';
 	
+	$u.xhr({
+		url: src,
+		callback: function(xhr) {
+			element[contentProperty] = xhr.responseText;
+			
+			$u.event.fire(element, 'contentreceived', {
+				src: src
+			});
+		}
+	});
+});
+
+document.body.addEventListener('contentreceived', function(evt) {
+	var pre = evt.target;
+	
+	if(!/pre/i.test(pre.nodeName)) {
+		return;
+	}
+
 	var language = {
 		'js': 'javascript',
 		'css': 'css',
 		'html': 'markup',
 		'svg': 'markup'
-	}[(src.match(/\.(\w+)$/) || [,''])[1]]
+	}[(evt.src.match(/\.(\w+)$/) || [,''])[1]];
 	
 	pre.className = 'prism language-' + language;
 	
-	$u.xhr({
-		url: src,
-		callback: function(xhr) {
-			pre.textContent = xhr.responseText;
-			
-			Prism.highlight(pre, true);
-		}
-	});
+	Prism.highlight(pre, true);
 });
\ No newline at end of file
diff --git a/examples.html b/examples.html
index 7ade7a9..dad43dc 100644
--- a/examples.html
+++ b/examples.html
@@ -11,19 +11,12 @@
 </head>
 <body>
 
-<header><div class="wrapper">
-	<div class="intro">
-		<h1><img src="logo.svg" alt="Prism" /></h1>
-	
-		<p>
-			Prism is a new elegant, robust and lightweight syntax highlighter, built with modern web standards in mind.
-		 	It’s a spin-off project from the popular code playground <a href="http://dabblet.com">Dabblet</a> and is extensively tested there daily by thousands of users.
-		</p>
-	</div>	
+<header>
+	<div class="intro" data-src="templates/header-main.html" data-type="text/html"></div>
 	
 	<h2>Examples</h2>
 	<p>The examples in this page serve a dual purpose: They act as unit tests, making it easy to spot bugs, and at the same time demonstrate what Prism can do, on simple and on edge cases.</p>
-</div></header>
+</header>
 
 <section>
 	<h1>Markup</h1>
@@ -128,11 +121,11 @@ var comment = /\/\*[\w\W]*?\*\//g;</code></pre>
 	<pre class="prism"><code class="language-javascript">env.content + '&lt;/' + env.tag + '>'</code></pre>
 </section>
 
-<footer><div class="wrapper">
-	<p>Handcrafted with love, by Lea Verou</p>
-</div></footer>
+<footer data-src="templates/footer.html" data-type="text/html"></footer>
 
 <script src="prism.js"></script>
+<script src="utopia.js"></script>
+<script src="code.js"></script>
 
 </body>
 </html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 51448f1..6a6a699 100644
--- a/index.html
+++ b/index.html
@@ -15,15 +15,8 @@
 </head>
 <body>
 
-<header><div class="wrapper">
-	<div class="intro">
-		<h1><img src="logo.svg" alt="Prism" /></h1>
-	
-		<p>
-			Prism is a new elegant, robust and lightweight syntax highlighter, built with modern web standards in mind.
-		 	It’s a spin-off project from the popular code playground <a href="http://dabblet.com">Dabblet</a> and is extensively tested there daily by thousands of users.
-		</p>
-	</div>
+<header>
+	<div class="intro" data-src="templates/header-main.html" data-type="text/html"></div>
 	 
 	<p class="download">
 		<a href="" class="full-script">Download Prism</a>
@@ -49,8 +42,7 @@
 		</li>
 	</ul>
 	
-	
-</div></header>
+</header>
 
 <section id="features-full">
 	<h1>Full list of features</h1>
@@ -226,9 +218,7 @@
 	</ul>
 </section>
 
-<footer><div class="wrapper">
-	<p>Handcrafted with love, by Lea Verou</p>
-</div></footer>
+<footer data-src="templates/footer.html" data-type="text/html"></footer>
 
 <script src="prism.js"></script>
 <script src="utopia.js"></script>
diff --git a/plugins/line-highlight/index.html b/plugins/line-highlight/index.html
index 917722f..0c8afbd 100644
--- a/plugins/line-highlight/index.html
+++ b/plugins/line-highlight/index.html
@@ -12,12 +12,12 @@
 </head>
 <body>
 
-<header><div class="wrapper">
+<header>
 	<h1><img src="../../logo.svg" alt="Prism" /> plugins</h1>
 
 	<h2>Line highlight plugin</h2>
 	<p>Highlights specific lines and/or line ranges.</p>
-</div></header>
+</header>
 
 <section>
 	<h1>How to use</h1>
@@ -88,9 +88,7 @@
 }</code></pre>
 </section>
 
-<footer><div class="wrapper">
-	<p>Handcrafted with love, by Lea Verou</p>
-</div></footer>
+<footer data-src="templates/footer.html" data-type="text/html"></footer>
 
 <script src="../../prism.js"></script>
 <script src="prism-line-highlight.js"></script>
diff --git a/style.css b/style.css
index 7003fd4..9512708 100644
--- a/style.css
+++ b/style.css
@@ -9,21 +9,6 @@ section h1,
 	font: italic 100% Baskerville, Palatino Linotype, Georgia, serif;
 }
 
-header > .wrapper,
-footer > .wrapper {
-	padding: 30px 0;
-}
-
-header:after,
-footer:before {
-	content: '';
-	display: block;
-	height: 10px;
-	background-size: 20px 20px;
-	background-repeat: repeat-x;
-}
-
-
 /*
  Styles
  */
@@ -80,23 +65,27 @@ pre {
 		box-sizing: border-box;
 	}
 
-.wrapper,
+header,
 body > section {
 	display: block;
 	max-width: 900px;
 	margin: auto;
 }
 
-header {
-	background: black url(img/spectrum.png) repeat-x top;
-	background-size: cover;
+header, footer {
+	padding: 30px calc(50% - 450px);
+	background-size: 20px 20px, 20px 20px, cover;
+	background-repeat: repeat-x;
+	background-position: bottom, bottom, top;
 	color: white;
 	text-shadow: 0 -1px 2px black;
 }
 
-header:after {
+header {
 	background-image: linear-gradient(45deg, white 50%, transparent 50%),
-		linear-gradient(-45deg, transparent 50%, white 50%);
+	                  linear-gradient(-45deg, transparent 50%, white 50%),
+	                  url(img/spectrum.png);
+	
 }
 
 	header .intro,
@@ -189,26 +178,16 @@ header:after {
 			text-decoration: none;
 		}
 
-iframe, #innerHTML {
-	width: 100%;
-	height: 30em;
-	border: 1px solid rgba(0,0,0,.2);
-	overflow: auto;
-}
-
-#api section h1 {
-	font-style: normal;
-}
-
 footer {
 	margin-top: 2em;
-	background: black url(img/spectrum.png) repeat-x bottom;
-	background-size: cover;
+	background-image: linear-gradient(45deg, transparent 50%, white 50%),
+	                  linear-gradient(-45deg, white 50%, transparent 50%),
+	                  url(img/spectrum.png);
+	background-position: top, top, bottom;
 	color: white;
 	text-shadow: 0 -1px 2px black;
 }
 
-footer:before {
-	background-image: linear-gradient(45deg, transparent 75%, white 75%),
-		linear-gradient(-45deg, white 25%, transparent 25%);
+#api section h1 {
+	font-style: normal;
 }
diff --git a/templates/footer.html b/templates/footer.html
new file mode 100644
index 0000000..485b208
--- /dev/null
+++ b/templates/footer.html
@@ -0,0 +1 @@
+<p>Handcrafted with love, by Lea Verou</p>
\ No newline at end of file
diff --git a/templates/header-main.html b/templates/header-main.html
new file mode 100644
index 0000000..ffc7c64
--- /dev/null
+++ b/templates/header-main.html
@@ -0,0 +1,6 @@
+<h1><img src="logo.svg" alt="Prism" /></h1>
+
+<p>
+	Prism is a new elegant, robust and lightweight syntax highlighter, built with modern web standards in mind.
+ 	It’s a spin-off project from the popular code playground <a href="http://dabblet.com">Dabblet</a> and is extensively tested there daily by thousands of users.
+</p>
\ No newline at end of file
diff --git a/utopia.js b/utopia.js
index 948a45d..ed9fe74 100644
--- a/utopia.js
+++ b/utopia.js
@@ -325,7 +325,7 @@ var _ = window.Utopia = {
 				evt.custom = true;
 		
 				if(properties) {
-					_.merge(evt, properties);
+					_.attach(evt, properties);
 				}
 		
 				target.dispatchEvent(evt);
kmx.io/prism.js

Commit f237061857cbf362340c69e10b8ab71795a7fe2c
