update readme

Author: msemenistyi

README.md

@@ -1,6 +1,7 @@
 js-mobile-console
 =====
 
+![js-mobile-console](mobile_screen.png)
 
 ## Install
 **Zip archive**:
@@ -9,18 +10,31 @@ js-mobile-console
 **Browserify**:
 > npm install js-mobile-console
 
+[![NPM](https://nodei.co/npm/js-mobile-console.png)](https://nodei.co/npm/js-mobile-console/)
+
 **Bower**:
 > bower install js-mobile-console
 
 ##Overview
 
 [Live demo](http://msemenistyi.github.io/js-mobile-console/).
 
-###Usage
+It is extremely nice, that we are on the road of specifying and unifying remote
+debugging protocol and we can already remotely debug web applications on desktop 
+chrome, but what if we want to get it working also on Android browser or 
+Safari for iOs?
+
+MobileConsole can be embedded within any page for debugging, it will catch errors
+and behave exactly as native js console in browser. It also outputs all the logs
+you've written via an API of window.console. 
+
+###Loading
+Css file should be included within html:
+<link rel="stylesheet" href="./style/mobile-console.min.css">
 
 Console may be used without any modular system:
 ```html
-<script src="./js-mobile-console.js"></script>
+<script src="./mobile-console.min.js"></script>
 ```
 
 With help of browserify:
@@ -33,11 +47,50 @@ Or AMD style (RequireJS):
 	define(['js-mobile-console'], function(mobileConsole))
 ```
 
-The actual usage:
+###Usage
+
+Simple usage:
+```js
+	mobileConsole.show();
+```
+
+Advanced usage: 
 ```js
-	mobileConsole.show(options);
+	mobileConsole.options({
+		showOnError: true,
+		proxyConsole: false,
+		isCollapsed: true,
+		catchErrors: true
+	});
 ```
 
+Conditional toggling:
+```js
+	if (condition){
+		mobileConsole.show();
+	} else {
+	mobileConsole.hide();
+}
+```
+
+###API
+
+- **show** - show console with default options.
+- **hide** - hide console.
+- **options** - method to initialize console, by default will show console, 
+accepts hash of options.
+
+###Options
+
+- **showOnError** - *Default* false. Console will be hidden if no show method 
+was called, but it will appear if any error occurs.
+- **proxyConsole** - *Default* true. Determines if window.console methods are 
+proxied to mobile console.
+- **isCollapsed** - *Default* false. Determines if Console is collpased on startup.
+- **catchErrors** - *Default* false. Determines if Console is registring 
+window.onerror method in order to catch errors.
+
+
 ##Contributing
 Feel free to open issues and send PRs. 
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "js-mobile-console",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "authors": [
     "msemenistyi <nikeiwe@gmail.com>"
   ],

mobile-console.js

@@ -10,7 +10,7 @@
 
 	var containerHtml = '' + 
 	'<div id="jsmc-collapse"></div>' +
-	'<div id="jsmc-clear">&#x2717;</div>' +
+	'<div id="jsmc-clear">&#xd7</div>' +
 	'<div id="jsmc-content">' +
 	'	<input id="jsmc-button" type="button" value="Run"/>' +
 	'	<div id="jsmc-log">' +
@@ -30,15 +30,24 @@
 		props: {
 			showOnError: false,
 			proxyConsole: true,
-			isCollapsed: false
+			isCollapsed: false,
+			catchErrors: false
 		},
 
 		init: function(){
 			if (!this.initialized){
-				this.bindErrorListener();
+				if (this.props.catchErrors){
+					this.bindErrorListener();
+				}
 				this.initializeContainers();
 				this.bindListeners();
 				this.initialized = true;
+
+				if (this.props.proxyConsole){
+					this.decorateConsole();
+				} else {
+					this.undecorateConsole();
+				}
 			}
 		},
 
@@ -55,9 +64,6 @@
 			var el = document.getElementById('js-mobile-console');
 			if (!el){
 				this.init();
-				if (this.props.proxyConsole){
-					this.decorateConsole();
-				}
 			}
 			this.$el.container.style.display = 'block';
 
@@ -67,9 +73,8 @@
 		},
 
 		hide: function(){
-			var el = document.getElementById('js-mobile-console');
-			if (el){
-				el.style.display = 'none';
+			if (this.$el && this.$el.container){
+				this.$el.container.style.display = 'none';
 			}
 		},
 
@@ -78,7 +83,7 @@
 			el.parentNode.removeChild(el);
 		},
 
-		initializeContainers: function(){
+		initializeContainers: function(options){
 			this.$el = {};
 			el = this.$el.container = document.createElement('div');
 			el.id = 'js-mobile-console';
@@ -176,16 +181,26 @@
 			this.consoleDecorated = true;
 			if (window.console){
 				if (window.console.log){
-					var log = window.console.log;
+					this.oldLog = window.console.log;
 					window.console.log = function(){
 						var args = [].slice.call(arguments);
-						log.apply(window.console, args);
+						self.oldLog.apply(window.console, args);
 						self.logValue(args.join(' '));
 					};
 				}
 			}
 		}, 
 
+		undecorateConsole: function(){
+			var self = this;
+			if (this.consoleDecorated){
+				window.console.log = function(){
+					var args = [].slice.call(arguments);
+					self.oldLog.apply(window.console, args);
+				};
+			}
+		},
+
 		logValue: function(value, error){			
 			var logEl = document.createElement('div');
 			logEl.className = 'jsmc-log-el';

mobile-console.min.js

@@ -1,6 +1,6 @@
 {
   "name": "js-mobile-console",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "description": "JS console emulator for mobile devices",
   "main": "mobile-console.js",
   "scripts": {

mobile_screen.png

@@ -9,6 +9,7 @@
 	max-height: 100px;
 	overflow-y: auto;
 	margin-right: 10px;
+	font-size: 1em;
 }
 
 #jsmc-input-container{
@@ -50,7 +51,8 @@
 	clear: both;
 }
 
-#jsmc-collapse{
+#jsmc-collapse,
+#jsmc-clear{
 	cursor: pointer;
 	width: 25px;
 	background: white;
@@ -61,11 +63,6 @@
 }
 
 #jsmc-clear{
-	cursor: pointer;
-	width: 25px;
-	background: white;
-	text-align: center;
-	color: gray;
-	border: 1px solid #808080;
-	float: left;
+	font-weight: bolder;
+	display: none;
 }