Switched init to data attribute, added inline option.

README.md

@@ -7,7 +7,7 @@ Instead of dropping in a block of markup to render as a demo, then copying and p
 ## Demos
 [Here’s the plugin in action](http://filamentgroup.github.com/X-rayHTML/).
 
-The second demo uses the plugin’s “create” event (`create.view-source` by default, but configurable) to bolt on the [Prism.js](http://prismjs.com) syntax highlighter, the third demo uses [ZeroClipboard](https://github.com/jonrohan/ZeroClipboard) to add a quick “copy to clipboard” button, and the last demo uses both. 
+The second set of demos are using the plugin’s “create” event (`create.xrayhtml` by default, but configurable) to bolt on [Prism.js](http://prismjs.com) syntax highlighting and [ZeroClipboard](https://github.com/jonrohan/ZeroClipboard) for a “copy to clipboard” button.
 
 ## Getting Started
 Download the [production version][min] or the [development version][max], and the [structural CSS][css].
@@ -32,25 +32,32 @@ and
 There are some config options up at the top of `X-rayHTML.js`:
 
 ```javascript
-var o = {
-	pluginName: "view-source",
-	text: {
-		open: "View Source",
-		close: "View Demo"
-	},
-	classes: {
-		button: "btn btn-small",
-		open: "view-source",
-		sourcepanel: "source-panel"
-	},
-	initSelector: ".source"
-}
+ var pluginName = "xrayhtml",
+        o = {
+        text: {
+            open: "View Source",
+            close: "View Demo"
+        },
+        classes: {
+            button: "btn btn-small",
+            open: "view-source",
+            sourcepanel: "source-panel"
+        },
+        initSelector: "[data-" + pluginName + "]",
+        defaultReveal: "inline"
+    }
 ```
 
-By default, functionality is hooked to the class `source`. A `pre`/`code` block gets dropped into place, so whitespace inside of `.source` counts the same way. For example:
+By default, functionality is hooked to the `xrayhtml` data attribute.
+
+`flip` as the value of the `data-xrayhtml` attribute will gives you a snazzy flip-to-reveal animation (browsers without support for 3D tranforms will simply show/hide the code snippet).</p>
+
+Leaving `data-xrayhtml` valueless or giving it a value of `inline` gives you—predictably enough—code snippets that are visible inline with the rendered code. 
+
+A `pre`/`code` block gets dropped into place, so whitespace inside of the element with that attribute counts the same way. For example, to avoid a bunch of extra whitespace at the start/end of your snippet:
 
 ```html
-<div class="source"><aside>
+<div data-xrayhtml><aside>
 	<blockquote>
 		<p>It is the unofficial force—the Baker Street irregulars.</p>
 	</blockquote>

demo/demo.css

@@ -1,5 +1,20 @@
 /* Demo
 -------------------------- */
+h1, h2 {
+	font-family: sans-serif;
+}
+h1 {
+	border-bottom: 1px solid #ddd;
+	padding: .25em 0;
+}
+h2 {
+	font-size: 1.1em;
+}
+
+
+.xrayhtml {
+	position: relative !important;
+}
 
 .btn {
 	background-color: #fefefe;
@@ -8,7 +23,6 @@
 	background-image: linear-gradient( top, rgba( 255,255,255,.1 ) 0%, rgba( 255,255,255,.1 ) 50%, rgba( 170,170,170,.1 ) 55%, rgba( 120,120,120,.15 ) 100% );
 	border: 1px solid #ccc;
 	border-radius: .4em;
-	box-shadow: 0 1px 0 rgba(255,255,255,1);
 	color: #308bd3;
 	cursor: pointer;
 	display: block;
@@ -26,30 +40,49 @@
 	-ms-box-sizing: border-box;
 	box-sizing: border-box;
 }
+
+
+.method-inline .btn {
+	width: auto;
+	display: inline-block;
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	padding-left: 1em;
+	padding-right: 1em;
+	border-radius: 5px 0 0 0;
+	border-width: 1px 0 0 1px;
+}
+
+.method-flip .btn-copy {
+	border-width: 0 0 1px 0;
+	border-radius: 0;
+}
 .btn-small {
 	display: inline-block;
 	font-size: .8em;
 	padding: .4em 2% .35em 2%;
 	width: auto;
 }
-.source {
+[data-xrayhtml] {
 	background: #aaa;
 	border: 6px solid rgba(0,0,0,.25);
 	border-radius: 7px;
 	margin: .5em 0 2.5em 0;
 }
-.source pre {
+.xrayhtml pre {
+	padding: 1em;
 	margin: 0 !important; /* Prism style override. */
 }
-.source code {
+.xrayhtml code {
 	white-space: pre-wrap !important; /* Prism style override. */
 }
 .snippet,
 .source-panel {
-	background: #eee;
+	background: #f5f2f0;
 }
 aside {
-	background: #eee;
+	background: #f5f2f0;
 	padding: .5em;
 }
 blockquote {

dist/X-rayHTML.css

@@ -3,13 +3,27 @@
 /* Code Viewer */
 
 .source {
-	position: relative;
+}
+.source-panel {
+	tab-size: 3;
+}
+.source-panel pre {
+	margin: 0;
+}
+.source-panel code {
+	white-space: pre-wrap;
+}
+
+
+/* Flip Animation */
 
+.method-flip .source {
+	position: relative;
 	-webkit-perspective: 2500px;
 	-moz-perspective: 2500px;
 	perspective: 2500px;
 }
-.snippet {
+.method-flip .snippet {
 	padding: 0;
 	margin: 0;
 	position: relative;
@@ -18,29 +32,16 @@
 	z-index: 2;
 	min-height: 100%;
 }
-.source-panel {
+.method-flip .source-panel {
 	position: absolute;
 	top: 0;
 	left: 0;
-	tab-size: 3;
 	width: 100%;
 	height: 100%;
 	overflow-x: scroll;
 }
-.source-panel pre {
-	margin: 0;
-}
-.source-panel code {
-	white-space: pre-wrap;
-}
-.btn-copy {
-	border-width: 0 0 1px 0;
-	border-radius: 0;
-}
 
-/* Flip Animation */
-
-.snippet {
+.method-flip .snippet {
 	-webkit-transform: rotateY(0deg);
 	-webkit-transform-style: preserve-3d;
 	-webkit-backface-visibility: hidden;
@@ -52,12 +53,12 @@
 	-webkit-transition: -webkit-transform .4s ease-in-out;
 	-moz-transition: -moz-transform .4s ease-in-out;
 }
-.view-source .snippet {
+.method-flip.view-source .snippet {
 	z-index: 1;
 	-webkit-transform: rotateY(180deg);
 	-moz-transform: rotateY(180deg);
 }
-.source-panel {
+.method-flip .source-panel {
 	-webkit-transform: rotateY(-180deg);
 	-webkit-backface-visibility: hidden;
 
@@ -67,7 +68,7 @@
 	-moz-transition: all .4s ease-in-out;
 	-webkit-transition: all .4s ease-in-out;
 }
-.view-source .source-panel {
+.method-flip.view-source .source-panel {
 	z-index: 2;
 	-webkit-transform: rotateY(0deg);
 	-moz-transform: rotateY(0deg);

index.html

@@ -13,38 +13,64 @@
 
 </head>
 <body>
-	<div class="source"><aside>
+	<section>
+		<h1>Basics</h1>
+		<p>By default, functionality is hooked to the <code>data-xrayhtml</code> attribute.</p>
+
+		<h2>Inline</h2>
+		<p>Bolting the <code>data-xrayhtml</code> attribute on without a value will give you inline code snippets, like so:</p>
+		<div data-xrayhtml><aside>
+	<blockquote>
+		<p>It is the unofficial force—the Baker Street irregulars.</p>
+	</blockquote>
+	<address>Sherlock Holmes</address>
+	<cite>Sign of Four</cite>
+</aside></div>
+
+		<h2>Flip</h2>
+		<p>Setting “flip” as the value of the <code>data-xrayhtml</code> attribute will give you this snazzy flip-to-reveal animation (browsers without support for 3D tranforms will simply show/hide the code snippet).</p>
+		<div data-xrayhtml="flip"><aside>
 	<blockquote>
 		<p>It is the unofficial force—the Baker Street irregulars.</p>
 	</blockquote>
 	<address>Sherlock Holmes</address>
 	<cite>Sign of Four</cite>
 </aside></div>
+	</section>
 
-	<div class="source prism"><aside>
+	<section>
+		<h1>Extras</h1>
+		<p>The plugin fires off a <code>create.xrayhtml</code> event that can be used to attach features like a “copy to clipboard” option (using <a href="https://github.com/jonrohan/ZeroClipboard">ZeroClipboard</a>, here) or syntax highlighting (using <a href="http://prismjs.com">Prism.js</a> here).</p>
+
+		<h2>Prism.js</h2>
+		<div data-xrayhtml class="prism"><aside>
 	<blockquote>
 		<p>It is the unofficial force—the Baker Street irregulars.</p>
 	</blockquote>
 	<address>Sherlock Holmes</address>
 	<cite>Sign of Four</cite>
 </aside></div>
 
-	<div class="source zeroclip"><aside>
+		<h2>ZeroClipboard</h2>
+		<div data-xrayhtml class="zeroclip"><aside>
 	<blockquote>
 		<p>It is the unofficial force—the Baker Street irregulars.</p>
 	</blockquote>
 	<address>Sherlock Holmes</address>
 	<cite>Sign of Four</cite>
 </aside></div>
 
-	<div class="source prism zeroclip"><aside>
+		<h2>Prism.js and ZeroClipboard</h2>
+		<div data-xrayhtml="flip" class="prism zeroclip"><aside>
 	<blockquote>
 		<p>It is the unofficial force—the Baker Street irregulars.</p>
 	</blockquote>
 	<address>Sherlock Holmes</address>
 	<cite>Sign of Four</cite>
 </aside></div>
 
+	</section>
+
 	<script src="libs/jquery/jquery.js"></script>
 	<script src="src/X-rayHTML.js"></script>
 
@@ -53,7 +79,7 @@
 	<script src="libs/ZeroClipboard.min.js"></script>
 
 	<script type="text/javascript">
-		$( window ).bind( "create.view-source", function( e ) {
+		$( window ).bind( "create.xrayhtml", function( e ) {
 			var prism = !!~e.target.getAttribute( "class" ).indexOf( "prism" ),
 				zeroclip = !!~e.target.getAttribute( "class" ).indexOf( "zeroclip" ),
 				flash = !!( navigator.mimeTypes[ "application/x-shockwave-flash" ] || "ActiveXObject" in window );