Formatting updates and trimming whitespace.

zaneray · Nov 5, 2015 · 7d0dbf0 · 7d0dbf0
1 parent 7b014b8
commit 7d0dbf0
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 18 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
     "name": "SourceView",
-    "version": "v1.0.0",
+    "version": "v1.0.1",
     "main": "source-view.js",
     "dependencies": {
       "jquery": ">=1.10.2"

diff --git a/index.html b/index.html
@@ -0,0 +1,55 @@
+<html>
+<head>
+  <title>SourceView Demo</title>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+  <link rel="stylesheet" href="source-view.css">
+</head>
+<body>
+  <div class="container">
+    <div class="view-source">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+      <h1>Source View</h1>
+      <p>Here is a code block you can use to view source</p>
+      <ul class="my-list">
+        <li><a href="http://www.zaneray.com">ZaneRay</a></li>
+        <li><a href="http://giphy.com/search/rad/">Some Rad Gifs</a></li>
+        <li><a href="http://www.lingscars.com/">My Favorite Site</a></li>
+      </ul>
+
+
+
+
+
+
+
+
+    </div>
+  </div>
+  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+  <script src="source-view.js"></script>
+  <script>
+    $(function(){
+      $('.view-source').SourceCodeView();
+    });
+  </script>
+</body>
+</html>
diff --git a/source-view.css b/source-view.css
@@ -0,0 +1,21 @@
+.sourceviewer {
+  display: none;
+  background-color: #EEE;
+  width: 100%;
+  padding: 1em;
+  overflow: auto;
+  font-size: .85em;
+}
+.viewbtn {
+  font-size: .85em;
+  color: white;
+  background-color: #111;
+  margin-top: 10px;
+  outline: none;
+  border: none;
+  padding: .4em .8em;
+}
+.showing {
+  background-color: #222;
+  color: white;
+}
diff --git a/source-view.js b/source-view.js
@@ -2,26 +2,23 @@
 	$.fn.SourceCodeView = function(element){
 		this.each(function(){
 
-			var button = $('<button>');
-			var container = $('<div>');
+			var button = $('<button class="viewbtn" type="button">View Source Code</button>');
+			var container = $('<div class="sourceviewer">');
+
+			var sourceCode = $(this).html();
 
-			button.html('View Source Code');
-			button.addClass('viewbtn');
-			button.attr('type', 'button');
+			sourceCode = sourceCode.trim();
 
-			container.html("<xmp>" + $(this).html() + "</xmp>");
-			container.addClass('sourceviewer');
+			container.html("<xmp>" + sourceCode + "</xmp>");
 
 			$(this).after(button);
 			button.after(container);
 
 			button.on('click', function(){
-				if ($(this).hasClass('showing')){
-					$(this).removeClass('showing');
-					$(this).html('View Source Code');
+				if (button.hasClass('showing')){
+					button.removeClass('showing').html('View Source Code');
 				} else {
-					$(this).addClass('showing');
-					$(this).html('Hide Source Code');
+					button.addClass('showing').html('Hide Source Code');
 				}
 
 				$(this).next().slideToggle( 300, function() {

diff --git a/source-view.less b/source-view.less
@@ -1,21 +1,20 @@
-// Source Viewer
 .sourceviewer {
   display: none;
   background-color: #EEE;
   width: 100%;
   padding: 1em;
   overflow: auto;
-  font-size: .85rem;
+  font-size: .85em;
 }
-
 .viewbtn {
-  font-size: .85rem;
+  font-size: .85em;
   color: white;
   background-color: #111;
   margin-top: 10px;
   outline: none;
+  border: none;
+  padding: .4em .8em;
 }
-
 .showing {
   background-color: #222;
   color: white;