-removed unnecessary ids -changed id syntax -updated readme to reflec…

…t site
mikewgd · Dec 3, 2014 · e0ec255 · e0ec255
1 parent 62cdfff
commit e0ec255
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 55 deletions.
diff --git a/README.md b/README.md
@@ -3,69 +3,50 @@ Console.Log
 
 A simple script that makes debugging easier on browsers that do not support console and viewing the log on mobile/tablet devices. The script overwrites the console object and the log function. Each calling of console.log gets inserted into an li element.
 
-**Stable Build**: Please go here (http://console.mikewgd.com/)
-
-## How It Works/What is it?
+**Stable Build:** Please go here (http://console.mikewgd.com/)  
+**CDN:** `<script src="http://cdn.jsdelivr.net/console-log/latest/console.min.js"></script>`
 
+## How It Works/What is it?  
 A tool for programmers to see a viewable console in the browser. Meant to be used on mobile devices and/or browsers that do not support the console object. The script uses device detection (user agent sniffing) and if the `console` object is `undefined`; It then overwrites the `console` object and the `log` function.
 
 ### Features
-
-*   Does not use any JavaScript libraries.
-*   Hide/Show the console logs.
-*   Change height of console. (added in v2)
-*   Query params (added in v2.1) **NEW!**
-
-### Limitations
-*   Complex nested objects
-*   Viewing HTML Elements
+*   Does not use any JavaScript libraries
+*   Toggle console
+*   Change height of console.
+*   Query params
+*   Execute code in the browser **NEW!**
+
+### Limitations/Issues
+*   Nested objects (window, document)
 *   Have an issue? [Log it here!](https://github.com/mikewgd/console-log/issues)
 
 ## Implementation
-
 Just add the script on the page before the js file(s) that contain `console.log` and your good to go! No rewriting code!
 
-Look below for an example:
-
-            ...
-            
-            <!-- Add console log script above the other script. -->
-            <script type="text/javascript" src="//console.min.js"></script>
+### Parameters
+You may also use parameters to set default settings for the console (visibility and height). Simply add '?' to the end of the src attribute on the script tag.
 
-            <!-- Some random js file with console.log -->
-            <script type="text/javascript" src="//test.js"></script>
+**EXAMPLE:**
 
-        </body>
-    </html>
+            ...
+        
+             <!-- Add console log script above the other script. (with default settings) -->
+             <script type="text/javascript" src="//console.min.js"></script>
+             <script type="text/javascript" src="//console.min.js?400"></script> <!--console expanded, height 400px-->
+             <script type="text/javascript" src="//console.min.js?hide&400"></script> <!-- console collapsed, height 400px-->
 
-### **NEW!** Parameters
-Visibility and height are the current parameters you can implement.
+             <!-- Some random js file with console.log -->
+             <script type="text/javascript" src="//test.js"></script>
 
-Simply add '?' to the end of the src attribute on the script tag. View the example below for different implementations of usage.
-
-            ...
-
-            <!-- Console will be expanded with a height of 400px -->
-            <script type="text/javascript" src="//console.min.js?400"></script>
-
-            <!-- Console will be collapsed with a default height -->
-            <script type="text/javascript" src="//console.min.js?hide"></script>
-
-            <!-- Console will be collapsed with a height of 400px -->
-            <script type="text/javascript" src="//console.min.js?hide&400"></script>
-
         </body>
     </html>
 
 ## Try it out! [View the demo](http://console.mikewgd.com/demo)
-
 Remember you need to view it on a device or change your user agent.
 
 ### Future Features
-
-*   Executing code (working on it!)
-*   Clear console button (working on it!)
-*   Syntax highlighting (working on it!)
+*   Clear console button
+*   Syntax highlighting
 *   More function support, not just log
 *   Showing line numbers
-*   Style like Chrome console (working on it!)
+*   Style like Chrome console
diff --git a/js/console.js b/js/console.js
@@ -197,12 +197,12 @@
 			windowHeight = window.innerHeight || document.body.clientHeight,
 			height = Math.round(windowHeight/4),
 			div = CLcreate('div', {id: 'consoleLog'}),
-			header = CLcreate('div', {id: 'consoleLog-header'}),
-			ul = CLcreate('ul', {id: 'consoleLog-ul'}),
-			input = CLcreate('input', {id: 'consoleLog-input', type: 'text', value: height, maxlength: 3}),
+			header = CLcreate('div'),
+			ul = CLcreate('ul'),
+			input = CLcreate('input', {id: 'consoleLogInput', type: 'text', value: height, maxlength: 3}),
 			toggleText = '['+((!consoleShown) ? 'show' : 'hide')+']',
-			liExecute = CLcreate('li', {id: 'consoleLog-liExecute', 'class': 'li-execute'}),
-			inputExecute = CLcreate('textarea', {id: 'consoleLog-inputExecute'}),
+			liExecute = CLcreate('li'),
+			inputExecute = CLcreate('textarea', {id: 'consoleLogExecute'}),
 			isExecute = false;
 
 		// Loop through script tags on page.
@@ -227,7 +227,7 @@
 		}
 
 		header.innerHTML = '<h6 style="margin:5px 3px;padding:0;float:left;font-size:13px;">CONSOLE LOG</h6>'+
-						   '<a id="consoleLog-toggle" href="javascript:void(0);" style="padding:5px; display:block;font-weight:bold;float:right;color:#ccc;text-decoration:none;font-size:13px;">'+toggleText+'</a>'+
+						   '<a id="consoleLogToggle" href="javascript:void(0);" style="padding:5px; display:block;font-weight:bold;float:right;color:#ccc;text-decoration:none;font-size:13px;">'+toggleText+'</a>'+
 						   '<span style="float:right;margin-right:10px;">Height: </span>';
 
 		// Styles the individual elements
@@ -257,16 +257,16 @@
 			if (element.nodeType == 3) // defeat Safari bug
 				element = element.parentNode;
 
-			if (element.id == 'consoleLog-toggle') {
+			if (element.id == 'consoleLogToggle') {
 				ul.style.display = (consoleShown) ? 'none' : 'block';
 				consoleShown = (consoleShown) ? false : true;
 				element.innerHTML = '['+((!consoleShown) ? 'show' : 'hide')+']';
-			} else if (element.id == 'consoleLog-executeBtn' && inputExecute.value !== '') {
+			} else if (element.id == 'consoleLogExecuteBtn' && inputExecute.value !== '') {
 				isExecute = true;
 				console.log(inputExecute.value, eval(inputExecute.value));
 			}
 
-			if (element.id == 'consoleLog-toggle' || element.id == 'consoleLog-executeBtn') {
+			if (element.id == 'consoleLogToggle' || element.id == 'consoleLogExecuteBtn') {
 				return false;
 			}
 		};
@@ -342,7 +342,7 @@
 				ul.appendChild(li);
 
 				ul.appendChild(liExecute);
-				liExecute.innerHTML = '<a href="#" style="display:block;width:21%;text-align:center;padding:10px 0;height:80%;position:absolute;right:0;top:5px;" id="consoleLog-executeBtn">EXECUTE</a>';
+				liExecute.innerHTML = '<a href="#" style="display:block;width:21%;text-align:center;padding:10px 0;height:80%;position:absolute;right:0;top:5px;" id="consoleLogExecuteBtn">EXECUTE</a>';
 				liExecute.appendChild(inputExecute);
 
 				// Scroll to latest log

diff --git a/js/console.min.js b/js/console.min.js