Skip to content
Browse files

Initial import

  • Loading branch information...
0 parents commit 588db3f21df1e8588551e13fb66da41ad7c93d31 Lea Verou committed Feb 14, 2011
Showing with 163 additions and 0 deletions.
  1. +4 −0 README.markdown
  2. +23 −0 demo.html
  3. +76 −0 incrementable.js
  4. +60 −0 style.css
4 README.markdown
@@ -0,0 +1,4 @@
+# Incrementable
+### Increment length values in textfields
+
+Warning: Only works in latest Firefox, Opera, Safari or Chrome.
23 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>
76 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, '');
+};
60 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%;
+}

0 comments on commit 588db3f

Please sign in to comment.
Something went wrong with that request. Please try again.