Better input validation checks, bug fixes and code cleanup

- now only accepts valid hex values (issue #2) - minor tweaks to mockup - added Apple touch icon and other web-app settings - code cleanup including new swatch display and hide functions - updated readme - disabled spellcheck, auto correct and auto capitalization on inputs (issue #3) - can now only save values that aren't currently saved (issue #4)
philbuchanan · Feb 25, 2013 · 5eece26 · 5eece26
1 parent d08d4a1
commit 5eece26
Show file tree

Hide file tree

Showing 9 changed files with 123 additions and 66 deletions.
diff --git a/assets/apple-touch-icon.png b/assets/apple-touch-icon.png
diff --git a/assets/mockup.psd b/assets/mockup.psd
diff --git a/assets/production/apple-touch-icon.psd b/assets/production/apple-touch-icon.psd
diff --git a/assets/production/mockup.psd b/assets/production/mockup.psd
diff --git a/css/style.css b/css/style.css
diff --git a/css/style.less b/css/style.less
@@ -147,7 +147,7 @@ input {
 }
 
 
-/* LARGE PREVIEW CHIP
+/* LARGE PREVIEW SWATCH
    ---------------------------------- */
 
 .preview, .recent-preview {
@@ -175,7 +175,7 @@ input {
 			line-height: 18px;
 		}
 	}
-	.save {
+	#save {
 		color: #000;
 		background: rgba(255, 255, 255, 0.6);
 		position: relative;
@@ -194,13 +194,12 @@ input {
 	}
 }
 .preview:hover {
-	.save {opacity: 1;}
+	#save {opacity: 1;}
 }
-.cursor {cursor: pointer;}
 .transparent {opacity: 0;}
 
 
-/* SMALL PREVIEW CHIPS
+/* SMALL PREVIEW SWATCHES
    ---------------------------------- */
 
 .hide {display: none;}

diff --git a/index.html b/index.html
@@ -8,6 +8,10 @@
 
 	<link rel="stylesheet" type="text/css" href="css/style.css" />
 	<link rel="shortcut icon" href="assets/favicon.ico"/>
+
+	<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/apple-touch-icon.png" />
+	<meta name="apple-mobile-web-app-title" content="RGBTONE">
+	<meta name="apple-mobile-web-app-capable" content="yes" />
 </head>
 <body>
 <div class="container">
@@ -20,21 +24,21 @@ <h2>Convert hex to rgb and vise versa</h2>
 				<p><strong>Preview</strong></p>
 				<p class="value" id="previewtitle">#fff</p>
 			</div>
-			<div class="save">Save Color</div>
+			<div id="save">Save Color</div>
 		</div>
 	</header>
 	<section>
 		<div class="half">
 			<label for="hex">Hex #</label>
-			<input type="text" id="hex" name="hex" placeholder="#dc5a23" />
+			<input type="text" id="hex" name="hex" placeholder="#dc5a23" spellcheck="false" autocorrect="off" autocapitalize="off" />
 			<div class="help-text">
 				<p>Shorthand is supported.</p>
 				<p>You do not need to include the #.</p>
 			</div>
 		</div>
 		<div class="half last">
 			<label for="rgb">RGB Values</label>
-			<input type="text" id="rgb" name="rgb" placeholder="204, 93, 125" />
+			<input type="text" id="rgb" name="rgb" placeholder="204, 93, 125" spellcheck="false" autocorrect="off" autocapitalize="off" />
 			<div class="help-text">
 				<p>The order is red, green, blue.</p>
 				<p>Separate each color value with a comma.</p>

diff --git a/js/script.js b/js/script.js
@@ -1,27 +1,28 @@
 /**
  * Copyright 2011 Phil Buchanan
- *
+ * 
  * RGBTONE is a simple HEX to RGB (and vise versa)
  * color converting app. It also allows you to
  * save colors for later using local storage.
- *
- * @version 2.0
+ * 
+ * @version 2.1
  */
 
 
 
-var color; // Always a valid hex value
+var color  = null;
+var colors = [];
+
+var maxSave = 6;
 
 var hexInput    = document.getElementById('hex');
 var rgbInput    = document.getElementById('rgb');
 var preview     = document.getElementById('preview');
 var pcolor      = document.getElementById('previewcolor');
 var ptitle      = document.getElementById('previewtitle');
-var savedTitle  = document.getElementById('savedtitle');
 var savedColors = document.getElementById('savedcolors');
-
-var maxSave = 6;
-var colors  = [];
+var savedTitle  = document.getElementById('savedtitle');
+var saveBtn     = document.getElementById('save');
 
 var ajaxRequest;
 
@@ -40,59 +41,52 @@ function init() {
 
 	hexInput.addEventListener('keyup', getRgbValue);
 	rgbInput.addEventListener('keyup', getHexValue);
-	hexInput.addEventListener('click', function() {hexInput.select()});
-	rgbInput.addEventListener('click', function() {rgbInput.select()});
+	hexInput.addEventListener('click', function() {hexInput.select();});
+	rgbInput.addEventListener('click', function() {rgbInput.select();});
 
 	if (retrieveColors()) {
 		ajaxRequest = ajaxRequest();
 		displayRecents();
 	}
+
+	hexInput.focus();
 
 }
 
 
 
 /**
  * Get RGB Value
- *
+ * 
  * Gets the RGB string for a given HEX value and
  * prints it to the RGB input.
  */
 
 function getRgbValue() {
 
-	var value = hexInput.value;
-	value = value.replace('#', '');
-
-	if (value.length === 3) {
-		var r = value.substr(0, 1);
-		var g = value.substr(1, 1);
-		var b = value.substr(2, 1);
-		var hexValue = r + r + g + g + b + b;
-	}
-	else if (value.length === 6) {
-		var hexValue = value;
-	}
+	var value = /^([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hexInput.value.replace(/#/g, ''));
 
-	if (hexValue) {
+	if (value) {
 
-		var rgbValues = hexToRgb(hexValue);
-		if (rgbValues) {
-			color = value;
-			rgbInput.value = rgbValues['r'] + ', ' + rgbValues['g'] + ', ' + rgbValues['b'];
-			pcolor.style.background = '#' + hexValue;
-			ptitle.innerHTML = '#' + value;
-			preview.classList.remove('transparent');
-			preview.classList.add('cursor');
-			preview.addEventListener('click', save);
+		color = value[0];
+
+		var rgb = hexToRgb(color);
+		if (color.length === 3) {
+			var r = color[0] + color[0];
+			var g = color[1] + color[1];
+			var b = color[2] + color[2];
+			rgb = hexToRgb(r + g + b);
 		}
+
+		rgbInput.value = rgb.r + ', ' + rgb.g + ', ' + rgb.b;
+		showSwatch();
 
 	}
 	else {
 
 		color = null;
-		preview.classList.add('transparent');
-		preview.classList.remove('cursor');
+		rgbInput.value = null;
+		hideSwatch();
 
 	}
 
@@ -122,7 +116,7 @@ function hexToRgb(hex) {
 
 /**
  * Get HEX Value
- *
+ * 
  * Gets the HEX value for a given RGB string and
  * prints it to the HEX input.
  */
@@ -141,20 +135,16 @@ function getHexValue() {
 	if (r !== false && g !== false && b !== false) {
 
 		var hexValue = rgbToHex(r, g, b);
-		color = value;
+		color = hexValue;
 		hexInput.value = hexValue;
-		pcolor.style.background = '#' + hexValue;
-		ptitle.innerHTML = '#' + hexValue;
-		preview.classList.remove('transparent');
-		preview.classList.add('cursor');
-		preview.addEventListener('click', save);
+		showSwatch();
 
 	}
 	else {
 
 		color = null;
-		preview.classList.add('transparent');
-		preview.classList.remove('cursor');
+		hexInput.value = null;
+		hideSwatch();
 
 	}
 
@@ -196,9 +186,9 @@ function rgbToHex(r, g, b) {
 	var hg = componentToHex(g);
 	var hb = componentToHex(b);
 
-	if (hr.substr(0, 1) == hr.substr(1, 1)) {
-		if (hg.substr(0, 1) == hg.substr(1, 1)) {
-			if (hb.substr(0, 1) == hb.substr(1, 1)) {
+	if (hr.substr(0, 1) === hr.substr(1, 1)) {
+		if (hg.substr(0, 1) === hg.substr(1, 1)) {
+			if (hb.substr(0, 1) === hb.substr(1, 1)) {
 				hr = componentToHex(r).substr(0, 1);
 				hg = componentToHex(g).substr(0, 1);
 				hb = componentToHex(b).substr(0, 1);
@@ -224,37 +214,96 @@ function rgbToHex(r, g, b) {
 function componentToHex(c) {
 
 	var hex = c.toString(16);
-	return hex.length == 1 ? "0" + hex : hex;
+	return hex.length === 1 ? "0" + hex : hex;
+
+}
+
+
+
+/**
+ * Display Color Swatch
+ */
+
+function showSwatch() {
+
+	if (!contains(colors, color)) {
+		preview.addEventListener('click', save);
+		preview.style.cursor = 'pointer';
+		saveBtn.style.display = 'block';
+	}
+	else {
+		saveBtn.style.display = 'none';
+	}
+	pcolor.style.background = '#' + color;
+	ptitle.innerHTML = '#' + color;
+	preview.classList.remove('transparent');
+
+}
+
+
+
+/**
+ * Hide Color Swatch
+ */
+
+function hideSwatch() {
+
+	preview.removeEventListener('click', save);
+	preview.classList.add('transparent');
+	preview.removeAttribute('style');
 
 }
 
 
 
 /**
  * Save Colour
- *
- * Saves six color values (in a sinlge string) to
+ * 
+ * Saves six color values (in a single string) to
  * local storage for later retrieval and display.
  */
 
 function save() {
 
-	if (typeof color !== 'undefined' && color !== null) {
-		
+	if (color !== null) {
+
 		if (colors.length >= maxSave) colors.pop();
 		colors.unshift(color);
 
 		localStorage.setItem('colors', JSON.stringify(colors));
 
 		displayRecents();
 		saveColors(color);
+
+		preview.removeEventListener('click', save);
+		saveBtn.style.display = 'none';
+		preview.style.cursor = 'default';
 
 	}
 
 }
 
 
 
+/**
+ * Array Contains
+ * 
+ * Returns true if the given array contains the 
+ * object, else false.
+ */
+
+function contains(arr, obj) {
+
+	var i = arr.length;
+	while (i--) {
+		if (arr[i] === obj) return true;
+	}
+	return false;
+
+}
+
+
+
 /**
  * Retrieve Colours
  *
@@ -266,13 +315,11 @@ function save() {
  */
 
 function retrieveColors() {
-
-	if (typeof Storage === 'undefined') return false;
 
 	var s = localStorage.getItem('colors');
 
 	if (s !== null) colors = JSON.parse(s);
-	else colors = new Array();
+	else colors = [];
 
 	return true;
 
@@ -289,11 +336,11 @@ function retrieveColors() {
 function displayRecents() {
 
 	var string = '';
+	var last = '';
 
 	for (var i = 0; i < colors.length; i++) {
 
-		if (i === 5) var last = ' last';
-		else var last = '';
+		if (i === 5) last = ' last';
 		string += '<div class="recent-preview' + last + '">';
 		string += '<div class="color-area" style="background: #' + colors[i] + '"></div>';
 		string += '<div class="chip-info">';

diff --git a/readme.md b/readme.md
@@ -4,4 +4,11 @@ RGBTONE is a simple HEX to RGB (and vise versa) color converting app.
 
 It also allows you to save colors for later using local storage.
 
+The current version (2.1) has only been tested in:
+
+- Safari 5+
+- Chrome 25+
+- Firefox 19+
+- Mobile Safari in iOS 6
+
 [Use the tool](http://rgbtone.com).