Initial import

LeaVerou · Feb 14, 2011 · 588db3f · 588db3f
commit 588db3f
Show file tree

Hide file tree

Showing 4 changed files with 163 additions and 0 deletions.
diff --git a/README.markdown b/README.markdown
@@ -0,0 +1,4 @@
+# Incrementable
+### Increment length values in textfields
+
+Warning: Only works in latest Firefox, Opera, Safari or Chrome.
diff --git a/demo.html b/demo.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+
+<title>Incrementable demo</title>
+<link href="style.css" rel="stylesheet" />
+
+</head>
+<body>
+
+<h1>Incrementable demo</h1>
+<textarea>background: linear-gradient(0deg, #fed 50%, #fdc 50%);
+background-size:3em;</textarea>
+<p><strong>Instructions:</strong> Place the cursor on a number inside the textarea and press the up or down keyboard arrow</p>
+<script src="incrementable.js"></script>
+<script>
+	new Incrementable(document.getElementsByTagName('textarea')[0]);
+</script>
+<footer>
+	By <a href="http://leaverou.me/">Lea Verou</a>
+</footer>
+</body>
+</html>
diff --git a/incrementable.js b/incrementable.js
@@ -0,0 +1,76 @@
+/**
+ * Script for making multiple numbers in a textfield incrementable/decrementable (like Firebug's CSS values)
+ * @author Lea Verou
+ * @version 1.0
+ */
+
+/**
+ * Constructor
+ * @param textField {HTMLElement} An input or textarea element
+ * @param modifiers {Object} An object with params ctrlKey, altKey and/or shiftKey. The key combination must have a sum of >= 3.
+ * 							For example, {altKey: 1, ctrlKey: 3, shiftKey: 2} means that either Ctrl has to be pressed with the arrows, or alt+shift, or alt+ctrl, or all three.
+ *							The default is 0, which means no modifiers needed.
+ */
+function Incrementable(textField, modifiers, units) {
+	if(!textField || !/input|textarea/i.test(textField)) {
+		throw Error('Invalid text field provided');
+	}
+
+	var me = this;
+
+	this.textField = textField;
+
+	modifiers = modifiers || {};
+	this.modifiers = {
+		ctrlKey: modifiers.ctrlKey || 0,
+		altKey: modifiers.altKey || 0,
+		shiftKey: modifiers.shiftKey || 0
+	};
+
+	if(units) {
+		this.units = units;
+	}
+
+	this.textField.addEventListener('keydown', function(evt) {
+		if(me.checkModifiers(evt) && (evt.keyCode == 38 || evt.keyCode == 40)) {
+			// Up or down arrow pressed, check if there's something 
+			// increment/decrement-able where the caret is
+			var caret = this.selectionStart, text = this.value,
+				regex = new RegExp('^([\\s\\S]{0,' + caret + '}[^-0-9\\.])(-?[0-9]*(?:\\.?[0-9]+)(?:' + me.units + '))\\b', 'i');
+
+			this.value = this.value.replace(regex, function($0, $1, $2) {
+				if($1.length <= caret && $1.length + $2.length >= caret) {
+					return $1 + Incrementable.step($2, evt.keyCode == 40);
+				}
+				else {
+					return $1 + $2;
+				}
+			});
+
+			this.selectionStart = this.selectionEnd = caret;
+
+			evt.preventDefault();
+			evt.stopPropagation();
+		}
+	}, false);
+}
+
+Incrementable.prototype = {
+	checkModifiers: function(evt) {
+		var m = this.modifiers;
+
+		return m.ctrlKey * evt.ctrlKey + m.altKey * evt.altKey + m.shiftKey * evt.shiftKey >= 3
+				|| (m.ctrlKey + m.altKey + m.shiftKey == 0);
+	},
+
+	units: '|%|deg|px|r?em|ex|ch|in|cm|mm|pt|pc|vm|vw|vh|gd|m?s'
+};
+
+/**
+ * Gets a <length> and increments or decrements it
+ */
+Incrementable.step = function(length, decrement) {
+	var val = parseFloat(length) + (decrement? -1 : 1);
+
+	return val + length.replace(/^-|[0-9]+|\./g, '');
+};
diff --git a/style.css b/style.css
@@ -0,0 +1,60 @@
+@font-face {
+  font-family: 'Lobster';
+  font-style: normal;
+  font-weight: normal;
+  src: local('Lobster1.4'), local('Lobster'), url('http://themes.googleusercontent.com/font?kit=TSDaXhyJuDJ-NBU0popSWA') format('truetype');
+}
+
+html {
+	background: #fdc;
+	background: -moz-linear-gradient(0deg, #fed 50%, #fdc 50%);
+	background: -o-linear-gradient(0deg, #fed 50%, #fdc 50%);
+	background: -webkit-gradient(linear, left top, right top, color-stop(50%, #fed), color-stop(50%, #fdc));
+
+	-webkit-background-size: 100px;
+	-moz-background-size: 100px;
+	background-size: 100px;
+}
+
+body {
+	background: rgba(255, 255, 255, .5);
+	padding: 10px;
+	font-family: Lobster, sans-serif;
+	text-shadow: 1px 1px 2px rgba(0,0,0,.3);
+	font-size: 200%;
+	max-width: 750px;
+	margin: 50px auto 0;
+	text-align: center;
+
+	-moz-box-shadow: 0 0 50px 50px rgba(255, 255, 255, .5);
+	-webkit-box-shadow: 0 0 50px 50px rgba(255, 255, 255, .5);
+	box-shadow: 0 0 50px 50px rgba(255, 255, 255, .5);
+	border-radius: 50%;
+}
+
+a {
+	color: inherit;
+}
+
+h1 {
+	font-size: 280%;
+	color: #f08;
+}
+
+textarea {
+	font-size: 75%;
+	font-family: Consolas, 'Andale Mono', 'Courier New', monospace;
+	width: 100%;
+	background: transparent;
+	border: 0;
+	padding: .4em 0 0 .5em;
+
+	-webkit-box-shadow: 2px 2px 10px rgba(0,0,0,.3) inset;
+	-moz-box-shadow: 2px 2px 10px rgba(0,0,0,.3) inset;
+	box-shadow: 2px 2px 10px rgba(0,0,0,.3) inset;
+}
+
+footer {
+	display: block;
+	font-size: 60%;
+}