v2.6.0

README.md

@@ -1,8 +1,9 @@
-## [ProKeys](https://chrome.google.com/webstore/detail/prokeys/ekfnbpgmmeahnnlpjibofkobpdkifapn)
+[![logo of prokeys](http://s27.postimg.org/7z02emgg3/main_logo.png)](https://chrome.google.com/webstore/detail/prokeys/ekfnbpgmmeahnnlpjibofkobpdkifapn)
+
 **Latest version**: 2.5.4
 **Status**: active, stable build
 
-A completely free Google Chrome and Opera extension that lets you be productive in online text-related work with its number of features like:
+ProKeys is a completely free, [Google Chrome](https://chrome.google.com/webstore/detail/prokeys/ekfnbpgmmeahnnlpjibofkobpdkifapn) and [Opera](https://addons.opera.com/en/extensions/details/prokeys/?display=en) extension that lets you be productive in online text-related work with its number of features like:
 
 [More info on all these in Help section inside the app]  
 1. **Snippets** - define custom abbreviations, and retrieve the text associated with them simply by pressing the hotkey (default: Shift+Space). Example: "brb" can expand to "Be right back!"  
@@ -29,7 +30,7 @@ First of all, thanks for contribution! Every small bit of it counts! You can:
 3. Fork the repo, make changes, and submit a pull request, describing the changes made.
 4. Help me translate ProKeys to your native language.
 5. Share the word about ProKeys with people!
-6. [Flattr ProKeys](https://flattr.com/thing/3a21a326ed09014a80254c2938cd5bee) - buy me a beer!
+6. [Flattr ProKeys](https://flattr.com/thing/3a21a326ed09014a80254c2938cd5bee) - buy me a ~~beer~~ coffee!
 
 **Contact me** - [email protected] - to discuss anything related to the above if you want to.
 
@@ -39,12 +40,32 @@ First of all, thanks for contribution! Every small bit of it counts! You can:
 
 1. Snippets/settings access in context menus
 2. Clipboard access in snippet body
-3. Update Opera with latest release
-4. Create ProKeys for Firefox, IE, Edge, Safari
+3. Get started with gaurangtandon.github.io/prokeys. Use http://dns.js.org/ for hosting. Use: https://github.com/Khan/tota11y
+4. Update Opera with latest release
+5. Create ProKeys for Firefox, IE, Edge, Safari
 
 ## Change Log
 
-**2.5.4** - Current -  14/08/2015
+**2.6.2** - upcoming
+- settings access in context menu // (show modal in settings page on context menu click)
+
+**2.6.1** - upcoming
+- remove case-sensitivity for snippet names!
+-  highlight snippet on save, edit to indicate save
+-  fix for certain keycodes not corresponding with their actual key name (in hotkey feature)
+-  support for http://ckeditor.com/demo // (if possible)
+
+**2.6.0** - Current - 06/10/2015
+- shorter image names
+- minified images - saving nearly 10 KB :)
+- new Google Plus logo in About page
+- fix for [excessive CPU usage issue](https://github.com/GaurangTandon/ProKeys/issues/3)
+- disabled ProKeys for input boxes using ReactJS (they possess `reactid ` in `dataset`)
+- refactored detector.js code and others with ESLint
+- fix for bug when pressing hotkey while having some text selected
+- fix for GitHub, JSFiddle, and other sites which use their own editor (CodeMirror, ace, etc. which interferes with ProKeys)
+
+**2.5.4** - 14/08/2015
 - changes in links to the tryit editor in Help section
 - fix super ugly bug of "Search" button in popup
 

css/options.css

@@ -283,6 +283,19 @@ ol{
 	display: none;
 }
 
+#help dd a{
+	color: #1143BB;
+}
+
+#help dd a[data-target="#tryit"]{
+	display: inline-block;
+    min-width: 150px;
+    max-width: 350px;
+    margin: 10px 0;
+    color: #1143BB;
+	cursor: pointer;	
+}
+
 #help h3{
 	font-size: 26px;
 	margin-bottom: 15px;
@@ -319,35 +332,39 @@ ol{
 	font-size: 15px;
 }
 
-.tryit{
+#tryit{
 	margin: auto;
 	width: 70%;
 	height: 210px;
 	border: 1px solid grey;
 }
 
-.tryit .nav{
+#tryit .nav{
 	width: 100%;
 	height: 30px;
 	background: rgb(232, 232, 232);
 }
 
-.tryit .nav p{
+#tryit .nav span{
+	padding-left: 10px;	
+}
+
+#tryit .nav p{
 	display: inline-block;
 	height: 100%;
 	max-width: 200px;
 	padding: 5px;
 	cursor: pointer;
 	min-width: 50px;
-	margin: auto 10px;
+	margin: auto 0 auto 5px;
 	font-family: 'Segoe UI', Tahoma, sans-serif;
 }
 
-.tryit .nav .show{
+#tryit .nav .show{
 	background: white;
 }
 
-.tryit > .show{
+#tryit > .show{
 	display: block;
 	height: 180px;
 	width: 100%;
@@ -358,11 +375,11 @@ ol{
 	overflow-y: auto;
 }
 
-.tryit textarea{
+#tryit textarea{
 	resize: none;
 }
 
-.tryit > :not(.nav):not(.show){
+#tryit > :not(.nav):not(.show){
 	display: none;
 }
 
@@ -472,12 +489,12 @@ td{
 }
 
 .tw-share{
-	background: url("../imgs/twitter.png");
+	background: url("../imgs/t.png");
 	background-size: cover;
 }
 
 .fb-share{
-	background: url("../imgs/facebook.png");
+	background: url("../imgs/f.png");
 	background-size: cover;
 }
 
@@ -656,4 +673,4 @@ td{
 		width: 55px;
 		height: 55px;
 	}
-}
+}

css/popup.css

@@ -42,7 +42,7 @@ ol, ul, li{
     font-size: 15px;
     padding: 2px 2px 3px 30px;
     outline: 0;
-    background: #fff url(../imgs/search_icon.png) left center no-repeat;
+    background: #fff url(../imgs/s.png) left center no-repeat;
     position: absolute;
 	top: 93px;
     left: 58.5%;
@@ -716,4 +716,4 @@ body.darkened .fade{
 
 .zoom75 .new_user_msg button{
 	font-size: 25px;
-}
+}

css/reset.css

@@ -33,4 +33,4 @@ body {
 table {
 	border-collapse: collapse;
 	border-spacing: 0;
-}
+}

html/options.html

@@ -4,7 +4,8 @@
 	<title>ProKeys | Options</title>
 	<meta charset="utf-8"/>
 	<link href="../css/reset.css" rel="stylesheet">
-	<link href="../css/options.css" rel="stylesheet">	
+	<link href="../css/options.css" rel="stylesheet">
+	<script src="../js/pre.js"></script>
 	<script src="../js/options.js"></script>
 	<script src="../js/detector.js"></script>
 	<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -13,7 +14,7 @@
 	<div id="sidebar">
 		<div id="logo">
 			<a href="https://chrome.google.com/webstore/detail/prokeys/ekfnbpgmmeahnnlpjibofkobpdkifapn">
-				<img src="../imgs/logo128.png" alt="ProKeys - logo">
+				<img src="../imgs/r.png" alt="ProKeys - logo">
 			</a>
 		</div>		
 		<a href="https://chrome.google.com/webstore/detail/prokeys/ekfnbpgmmeahnnlpjibofkobpdkifapn">ProKeys</a>
@@ -74,7 +75,7 @@ <h3>Set data storage mode to:</h3>
 				<b>Block Sites</b> - ProKeys will not work on the following sites:<br>
 				<ul></ul>
 				<br><br>
-				Add website to be blocked (for example: `xyz.abcd.com`, `xyz.com/path`; but without `www` or `https://` or `http://`):
+				Add website to block (for example: `xyz.abcd.com`, `xyz.com/path`; but without `www` or `https://` or `http://`):
 				<br>
 				<input type="text" placeholder="Type address here" class="siteBlockInput">
 				<button>Block site</button>
@@ -84,14 +85,15 @@ <h1>Help</h1>
 
 				<section>
 					<p class="warning"><em><strong>Heads up!</strong> "Using a snippet" means performing snippet substitution in a web page with an already created snippet. "Creating a snippet" means creating a new snippet in the popup box.</em></p>
-					<p>Click the question you want to know about. Try the features as you learn them in this editor.</p>
+					<p>Click the question you want to know about. Try the features in this editor</p>
 
-					<div class="tryit">
+					<div id="tryit">
 						<div class="nav">
+							<span>Swap editor mode: </span>
 							<p class="show" data-selector="textarea">Textarea</p>
 							<p data-selector=".editor">Editable Div</p>
 						</div>
-						<textarea class="show">This is a normal text editor. It does not support HTML formatting.
+						<textarea class="show">This is a normal text editor. It does not support bold, italics, etc. formatting using HTML.
 
 But multiline text is still supported.</textarea>
 						<div class="editor" contenteditable=true>This is a contenteditable or editable div. These editors are generally found in your email client like Gmail, Outlook, etc.<br><br><i>This editor supports </i><b>HTML formatting</b>. You can use the "my_sign" sample snippet here, and see the effect.</div>
@@ -104,15 +106,15 @@ <h2>Info</h2>
 							<p><b>Example:</b> Snippet with snippet name - "brb". The snippet name is the abbreviation. It is <b>case-sensitive</b>, so "brb", "BRB", and "bRb" are all different.
 							Typing "brb" and pressing the hotkey, would replace it with the snippet body, which here is "be right back".
 							Snippets can be created in the popup box.</p>
-							<p><b>Try this in editor:</b> in the editor above, use any of the sample snippets that have been provided to you in the popup box.</p></dd>
+							<a href="#tryit">Try snippets in editor</a> - you can view the snippets in the popup box</dd>
 
 						<dt>Can a deleted snippet be restored?</dt>
 						<dd>No, unfortunately, snippets once deleted cannot be restored. Therefore, it is recommended you take a backup regularly.</dd>
 
 						<dt>What are Placeholders?</dt>
 						<dd><p>Placeholders are fields in the snippet body which are populated with dynamic values provided by you on using the snippet. A placeholder has the format `%text%` such that the text can only contain alphabets, digits and the underscore symbol.</p>
 							<p><b>Example:</b> snippet "wishBDay", which you can use to wish your friends Happy Birthday! Since the name of the friend keeps changing, so you can add a placeholder to the snippet body, as "%name%"(without quotes). It would be auto-highlighted whenever you use the snippet and you can type your friend's name into it.</p>
-							<p><b>Try this in editor:</b> in the editor above, use the "letter" sample snippet to see placeholders in action.</p>
+							<a href="#tryit">Try the "letter" sample snippet in editor</a>
 							<p><b>Usage</b> of a placeholder:
 							<ol>
 								<li>Insert placeholders into the snippet body while creating or editing a snippet. Then, use this snippet.</li>
@@ -133,7 +135,7 @@ <h2>Info</h2>
 								<li>Press `=` (equals) key and the result of evaluation would replace the `[[...=]]`!</li>
 							</ol>
 							</p>
-							<p><b>Try this in editor:</b>Type some expression like: "[[5^3=]]"</p>
+							<a href="#tryit">Try math expressions in the editor</a> (like "[[5^3=]]")
 						</dd>
 
 						<dt>What are Date/Time macros?</dt>
@@ -239,8 +241,8 @@ <h2>Info</h2>
 							<p><B>Evaluation</b> of these symbols is from left to right, and the symbol that appears first (at the top) in the symbols list, is evaluated first.</p></p>
 							<p><b>Example: </b>Consider this date/time macro: <span class="code">[[%d(YYYY:MM:D)]]</span>. If you want to move 10 days forward and 5 months backward,
 							 you could write: <span class="code">[[%d(YYYY:MM-5:D+10)]]</span> This was independent calculation. If you it to be relative, use <span class="code">[[%d(!YYYY:MM-5:D+10)]]</span> (with that <span class="code">!</span>)</p>
-							 <p><b>Try this in editor: </b>In the editor above, use the "dateArithmetic" sample snippet to see magic of date and time arithmetic.</p>
-							 <p><b>Limitation</b>: The "date" and "time" symbols do not support date and time arithmetic (for now; I might fix this in future).</p>
+							 <a href="#tryit">Try date and time arithmetic in editor</a> (use dateArithmetic sample snippet)
+							 <p><b>Limitation</b>: The "date" and "time" symbols do not support date and time arithmetic (I might fix this in future).</p>
 							 </dd>
 						<dt>What are Variables?</dt>
 						<dd><p>Variables are used to insert dynamic values at any time while typing. They are inbuilt and cannot be created by you. Of course, I would love a recommendation from you for a new variable! (email: [email protected])</p>
@@ -273,7 +275,7 @@ <h2>Info</h2>
 								</tr>
 							</table>
 							</p>
-							<p><b>Try this in editor:</b> Use any of the three variables (usage as specified above)</p>
+							<a href="#tryit">Try these variables in editor</a>
 						</dd>
 						<dt>How are Variables different from Snippets?</dt>
 						<dd>Variables are more useful when you need to retrieve system-related dynamic values. Like the version of the browser, which would need to be manually entered into a snippet. A Variable would get it automatically.</dd>
@@ -297,7 +299,11 @@ <h2>Troubleshoot</h2>
 			<div id="about">
 				<h1>About</h1>
 				Made by <a href="https://plus.google.com/u/0/110764286121755681313/posts">Gaurang Tandon</a><br>
-				Version: 2.5.3<br>
+<<<<<<< HEAD
+				Version: 2.6.0<br>
+=======
+				Version: 2.5.4<br>
+>>>>>>> origin/master
 				&copy; 2015 Copyright Reserved<br><br>
 
 				Check out the <a href="https://github.com/GaurangTandon/ProKeys">change log and source code on GitHub!</a><br><br>
@@ -314,7 +320,7 @@ <h1>About</h1>
 				<a target="_blank" class='tw-share' href="http://twitter.com/intent/tweet?text=Increase%20your%20efficiency%3B%20write%20less,%20do%20more!%20Install%20ProKeys%20now,%20and%20impress%20everyone!%20%23chrome-extension%20%23chrome&url=https://chrome.google.com/webstore/detail/prokeys/ekfnbpgmmeahnnlpjibofkobpdkifapn"></a>
 
 				<!-- G+ button-->
-				<a href="https://plus.google.com/share?url=https://chrome.google.com/webstore/detail/prokeys/ekfnbpgmmeahnnlpjibofkobpdkifapn" class="g-plus"><img src="../imgs/gplus-32.png" alt="Share on Google+"/></a>
+				<a href="https://plus.google.com/share?url=https://chrome.google.com/webstore/detail/prokeys/ekfnbpgmmeahnnlpjibofkobpdkifapn" class="g-plus"><img src="../imgs/g.png" alt="Share on Google+"/></a>
 
 				<br>
 				<div class="buttons">
@@ -323,9 +329,11 @@ <h1>About</h1>
 					<a href="https://docs.google.com/forms/d/1DcwQB5vnNCH0pP_Y-wVvOF6gsI0gaXGPPngctb4tCdA/viewform?usp=send_form" target="_blank">Anonymous Feedback</a>
 				</div>
 
+				<!--
 				<hr>
 				Please support me! Thank you so much! (You might see (No Title) instead of "ProKeys" in the name box; that's because ProKeys has got no Flattrs yet)<br>
 				<a id="flattr" href="https://flattr.com/thing/3a21a326ed09014a80254c2938cd5bee" alt="Flattr link">Flattr ProKeys</a>
+				-->
 
 				<hr>
 				<span class="disclaimer-heading">DISCLAIMER:</span><br> <p>Every effort has been made to avoid bugs in this extension. In spite of this, some bugs might have crept in. Any mistake, error or
@@ -377,4 +385,4 @@ <h1>Backup, Restore and Print</h1>
 		</div>
 	</main>
 </body>
-</html>
+</html>

html/popup.html

@@ -5,11 +5,12 @@
 	<meta charset="utf-8"/>
 	<link href="../css/reset.css" rel="stylesheet">
 	<link href="../css/popup.css" rel="stylesheet">
+	<script src="../js/pre.js"></script>
 	<script src="../js/popup.js"></script>
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>	
-	<img src="../imgs/main_logo.png" id="appLogo" alt="ProKeys main logo">
+	<img src="../imgs/m.png" id="appLogo" alt="ProKeys main logo">
 
 	<div id="headArea">
 		<button class="button settingsBtn" aria-label="Settings or Help" title="Settings or Help" tabIndex=10>Settings/Help</button> <!--Opens option.html in new window-->
@@ -50,4 +51,4 @@
 	<!--used to fade the body when modal is shown-->
 	<div class="fade"></div>
 </body>
-</html>
+</html>

js/.eslintrc

@@ -0,0 +1,28 @@
+{
+    "rules": {
+        "indent": [
+            1,
+            "tab",
+			{"SwitchCase": 1}
+        ],
+        "quotes": [
+            1,
+            "double"
+        ],
+        "linebreak-style": [
+            2,
+            "windows"
+        ],
+        "semi": [2, "always"],
+		"no-console": [0],
+		"no-constant-condition": [0]
+    },
+    "env": {
+        "browser": true
+    },
+	"globals":{
+		"chrome": false,
+		"console": false
+	},
+    "extends": "eslint:recommended"
+}