Added support for the Prototype JS library. Also, there is a known bu…

…g in my Prototype and Dojo implementations, because neither one's wrap() function carries over event listeners. It'd on the to-do list.
nathansmith · Oct 26, 2010 · 5ac4fe4 · 5ac4fe4
1 parent a8d9d53
commit 5ac4fe4
Show file tree

Hide file tree

Showing 14 changed files with 813 additions and 9 deletions.
diff --git a/README.txt b/README.txt
@@ -1,4 +1,5 @@
 CREDITS
+
 Mootools port by Ryan Florence:
 http://github.com/rpflorence
 

diff --git a/assets/javascripts/dojo.formalize.js b/assets/javascripts/dojo.formalize.js
@@ -43,7 +43,7 @@ var FORMALIZE = (function(window, document, undefined) {
 
 				// This fixes width: 100% on <textarea> and class="input_full".
 				// It ensures that form elements don't go wider than container.
-				dojo.query('textarea, input.input_full').wrap('<span class="input_full_wrap"></span>');
+				// dojo.query('textarea, input.input_full').wrap('<span class="input_full_wrap"></span>');
 			},
 			// FORMALIZE.init.ie6_skin_inputs
 			ie6_skin_inputs: function() {

diff --git a/assets/javascripts/mootools.formalize.js b/assets/javascripts/mootools.formalize.js
@@ -43,7 +43,7 @@ var FORMALIZE = (function(window, document, undefined) {
 
 				// This fixes width: 100% on <textarea> and class="input_full".
 				// It ensures that form elements don't go wider than container.
-				$$('textarea, input.input_full').each(function(el){
+				$$('textarea, input.input_full').each(function(el) {
 					new Element('span.input_full_wrap').wraps(el);
 				});
 
@@ -94,7 +94,6 @@ var FORMALIZE = (function(window, document, undefined) {
 			// FORMALIZE.init.placeholder
 			placeholder: function() {
 				if (PLACEHOLDER_SUPPORTED || !$$('[placeholder]').length) {
-
 					// Exit if placeholder is supported natively,
 					// or if page does not have any placeholder.
 					return;

diff --git a/assets/javascripts/prototype.formalize.js b/assets/javascripts/prototype.formalize.js
@@ -0,0 +1,157 @@
+//
+// Note: This file depends on the Prototype library.
+//
+
+// Automatically calls all functions in FORMALIZE.init
+$(document).observe('dom:loaded', function() {
+	FORMALIZE.go();
+});
+
+// Module pattern:
+// http://yuiblog.com/blog/2007/06/12/module-pattern/
+var FORMALIZE = (function(window, document, undefined) {
+	// Private constants.
+	var PLACEHOLDER_SUPPORTED = 'placeholder' in document.createElement('input');
+	var AUTOFOCUS_SUPPORTED = 'autofocus' in document.createElement('input');
+	var WEBKIT = 'webkitAppearance' in document.createElement('select').style;
+
+	var IE6 = (function(x) {
+		x.innerHTML = '<!--[if IE 6]><br><![endif]-->';
+		return x.getElementsByTagName('br').length ? true : false;
+	})(document.createElement('b'));
+
+	var IE7 = (function(x) {
+		x.innerHTML = '<!--[if IE 7]><br><![endif]-->';
+		return x.getElementsByTagName('br').length ? true : false;
+	})(document.createElement('b'));
+
+	// Expose innards of FORMALIZE.
+	return {
+		// FORMALIZE.go
+		go: function() {
+			for (var i in FORMALIZE.init) {
+				FORMALIZE.init[i]();
+			}
+		},
+		// FORMALIZE.init
+		init: {
+			detect_webkit: function() {
+				if (!WEBKIT) {
+					return;
+				}
+
+				// Tweaks for Safari + Chrome.
+				$$('html')[0].addClassName('is_webkit');
+			},
+			// FORMALIZE.init.full_input_size
+			full_input_size: function() {
+				if (!(IE6 || IE7) || !$$('textarea, input.input_full').length) {
+					return;
+				}
+
+				// This fixes width: 100% on <textarea> and class="input_full".
+				// It ensures that form elements don't go wider than container.
+				$$('textarea, input.input_full').each(function(el) {
+					// el.wrap('span', {'class': 'input_full_wrap'});
+				});
+			},
+			// FORMALIZE.init.ie6_skin_inputs
+			ie6_skin_inputs: function() {
+				// Test for Internet Explorer 6.
+				if (!IE6 || !$$('input, select, textarea').length) {
+					// Exit if the browser is not IE6,
+					// or if no form elements exist.
+					return;
+				}
+
+				// For <input type="submit" />, etc.
+				var button_regex = /button|submit|reset/;
+
+				// For <input type="text" />, etc.
+				var type_regex = /date|datetime|datetime-local|email|month|number|password|range|search|tel|text|time|url|week/;
+
+				$$('input').each(function(el) {
+					// Is it a button?
+					if (el.type.match(button_regex)) {
+						el.addClassName('ie6_button');
+
+						/* Is it disabled? */
+						if (el.disabled) {
+							el.addClassName('ie6_button_disabled');
+						}
+					}
+					// Or is it a textual input?
+					else if (el.type.match(type_regex)) {
+						el.addClassName('ie6_input');
+
+						/* Is it disabled? */
+						if (el.disabled) {
+							el.addClassName('ie6_input_disabled');
+						}
+					}
+				});
+
+				$$('textarea, select').each(function(el) {
+					/* Is it disabled? */
+					if (el.disabled) {
+						el.addClassName('ie6_input_disabled');
+					}
+				});
+			},
+			// FORMALIZE.init.placeholder
+			placeholder: function() {
+				if (PLACEHOLDER_SUPPORTED || !$$('[placeholder]').length) {
+					// Exit if placeholder is supported natively,
+					// or if page does not have any placeholder.
+					return;
+				}
+
+				$$('[placeholder]').each(function(el) {
+					var text = el.getAttribute('placeholder');
+					var form = el.up('form');
+
+					function add_placeholder() {
+						if (!el.value || el.value === text) {
+							el.value = text;
+							el.addClassName('placeholder_text');
+						}
+					}
+
+					add_placeholder();
+
+					el.observe('focus', function() {
+						if (el.value === text) {
+							el.value = '';
+							el.removeClassName('placeholder_text');;
+						}
+					});
+
+					el.observe('blur', function() {
+						add_placeholder();
+					});
+
+					// Prevent <form> from accidentally
+					// submitting the placeholder text.
+					form.observe('submit', function() {
+						if (el.value === text) {
+							el.value = '';
+						}
+					});
+
+					form.observe('reset', function() {
+						setTimeout(add_placeholder, 50);
+					});
+				});
+			},
+			// FORMALIZE.init.autofocus
+			autofocus: function() {
+				if (AUTOFOCUS_SUPPORTED || !$$('[autofocus]').length) {
+					return;
+				}
+
+				$$('[autofocus]')[0].select();
+			}
+		}
+	};
+// Alias window, document.
+})(this, this.document);
diff --git a/index.html b/index.html
@@ -82,6 +82,20 @@ <h1>
 		<a href="mootools_errors.html">Errors</a>
 	</li>
 </ul>
+<p>
+	Demo with Prototype...
+</p>
+<ul>
+	<li>
+		<a href="prototype_demo.html">Normal</a>
+	</li>
+	<li>
+		<a href="prototype_disabled.html">Disabled</a>
+	</li>
+	<li>
+		<a href="prototype_errors.html">Errors</a>
+	</li>
+</ul>
 <p>
 	Demo with YUI...
 </p>

diff --git a/jquery_demo.html b/jquery_demo.html
@@ -4,7 +4,7 @@
 <meta charset="utf-8" />
 <title>Formalize CSS</title>
 <link rel="stylesheet" href="assets/stylesheets/master.css" />
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
 <script src="assets/javascripts/jquery.formalize.js"></script>
 </head>
 <body>

diff --git a/jquery_disabled.html b/jquery_disabled.html
@@ -4,7 +4,7 @@
 <meta charset="utf-8" />
 <title>Formalize CSS</title>
 <link rel="stylesheet" href="assets/stylesheets/master.css" />
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
 <script src="assets/javascripts/jquery.formalize.js"></script>
 </head>
 <body>

diff --git a/jquery_errors.html b/jquery_errors.html
@@ -4,7 +4,7 @@
 <meta charset="utf-8" />
 <title>Formalize CSS</title>
 <link rel="stylesheet" href="assets/stylesheets/master.css" />
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
 <script src="assets/javascripts/jquery.formalize.js"></script>
 </head>
 <body>

diff --git a/mootools_demo.html b/mootools_demo.html
@@ -4,7 +4,7 @@
 <meta charset="utf-8" />
 <title>Formalize CSS</title>
 <link rel="stylesheet" href="assets/stylesheets/master.css" />
-<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>
+<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>
 <script src="assets/javascripts/mootools.formalize.js"></script>
 </head>
 <body>

diff --git a/mootools_disabled.html b/mootools_disabled.html
@@ -4,7 +4,7 @@
 <meta charset="utf-8" />
 <title>Formalize CSS</title>
 <link rel="stylesheet" href="assets/stylesheets/master.css" />
-<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>
+<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>
 <script src="assets/javascripts/mootools.formalize.js"></script>
 </head>
 <body>

diff --git a/mootools_errors.html b/mootools_errors.html
@@ -4,7 +4,7 @@
 <meta charset="utf-8" />
 <title>Formalize CSS</title>
 <link rel="stylesheet" href="assets/stylesheets/master.css" />
-<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>
+<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>
 <script src="assets/javascripts/mootools.formalize.js"></script>
 </head>
 <body>