src/cm/media/js/lib/flexible-js-formatting/html-form-input-mask/html-form-input-mask.js
changeset 0 40c8f766c9b8
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/cm/media/js/lib/flexible-js-formatting/html-form-input-mask/html-form-input-mask.js	Mon Nov 23 15:14:29 2009 +0100
@@ -0,0 +1,117 @@
+/*
+ * Copyright (C) 2006 Baron Schwartz <baron at xaprb dot com>
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU Lesser General Public License as published by the
+ * Free Software Foundation, version 2.1.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE.  See the GNU Lesser General Public License for more
+ * details.
+ *
+ * $Id: html-form-input-mask.js,v 1.6 2006-11-03 04:04:29 baron Exp $
+ */
+
+/* Set up a global Xaprb object to act as the Xaprb namespace, without colliding
+ * with other Xaprb scripts.
+ */
+if ( typeof(Xaprb) === 'undefined' ) {
+   Xaprb = new Object();
+}
+
+/* The Xaprb.InputMask object acts as the namespace for input masking
+ * functionality.
+ */
+Xaprb.InputMask = {
+
+   /* Each mask has a format and regex property.  The format consists
+    * of spaces and non-spaces.  A space is a placeholder for a value the user
+    * enters.  A non-space is a literal character that gets copied to that
+    * position in the value.  The regex is used to validate each character, one
+    * at a time (it is not applied against the entire value in the form field,
+    * just the characters the user enters).
+    *
+    * The way you name your masks is significant.  If you create a mask called
+    * date_us, you cause it to be applied to a form field by a) adding the
+    * input_mask class to that form field, which triggers this script to treat
+    * it specially, and b) adding the class mask_date_us to the form field,
+    * which causes this script to apply the date_us mask to it.
+    */
+   masks: {
+      date_iso: {
+         format: '    -  -  ',
+         regex:  /\d/
+      },
+      date_us: {
+         format: '  /  /    ',
+         regex:  /\d/
+      },
+      time: {
+         format: '  :  :  ',
+         regex:  /\d/
+      },
+      phone: {
+         format: '(   )   -    ',
+         regex:  /\d/
+      },
+      ssn: {
+         format: '   -  -    ',
+         regex:  /\d/
+      },
+      visa: {
+         format: '    -    -    -    ',
+         regex:  /\d/
+      }
+   },
+
+   /* Finds every element with class input_mask and applies masks to them.
+    */
+   setupElementMasks: function() {
+      if ( document.getElementsByClassName ) { // Requires the Prototype library
+         document.getElementsByClassName('input_mask').each(function(item) {
+            Event.observe(item, 'keypress',
+               Xaprb.InputMask.applyMask.bindAsEventListener(item), true);
+         });
+      }
+   },
+   
+
+   /* This is triggered when the key is pressed in the form input.  It is
+    * bound to the element, so 'this' is the input element.
+    */
+   applyMask: function(event) {
+      var match = /mask_(\w+)/.exec(this.className);
+      if ( match.length == 2 && Xaprb.InputMask.masks[match[1]] ) {
+         var mask = Xaprb.InputMask.masks[match[1]];
+         var key  = Xaprb.InputMask.getKey(event);
+
+         if ( Xaprb.InputMask.isPrintable(key) ) {
+            var ch      = String.fromCharCode(key);
+            var str     = this.value + ch;
+            var pos     = str.length;
+            if ( mask.regex.test(ch) && pos <= mask.format.length ) {
+               if ( mask.format.charAt(pos - 1) != ' ' ) {
+                  str = this.value + mask.format.charAt(pos - 1) + ch;
+               }
+               this.value = str;
+            }
+            Event.stop(event);
+         }
+      }
+   },
+
+   /* Returns true if the key is a printable character.
+    */
+   isPrintable: function(key) {
+      return ( key >= 32 && key < 127 );
+   },
+
+   /* Returns the key code associated with the event.
+    */
+   getKey: function(e) {
+      return window.event ? window.event.keyCode
+           : e            ? e.which
+           :                0;
+   }
+};