initial commit

DimitarChristoff · Nov 4, 2011 · 9514eed · 9514eed
commit 9514eed
Show file tree

Hide file tree

Showing 4 changed files with 209 additions and 0 deletions.
diff --git a/Demo/index.html b/Demo/index.html
@@ -0,0 +1,66 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+    <title>mooPlaceholder Demo Page</title>
+    <meta name="description" content="use placeholder= functionality in older browsers.">
+    <meta name="author" content="Dimitar Christoff">
+
+    <link rel="stylesheet" href="../Source/css/mooPlaceholder.css">
+    <link class="stylesheet" rel="stylesheet" href="https://raw.github.com/necolas/normalize.css/master/normalize.css">
+    <script src="http://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"></script>
+    <script type="text/javascript" src="../Source/js/mooPlaceholder.js.js" defer="defer"></script>
+</head>
+<body>
+<div>
+    <form id="myform" action="#" method="get">
+        <input id="foo" name="foo" placeholder="gay" class="foo" />
+        <input id="foo2" name="foo2" placeholder="bar" class="foo" />
+    </form>
+</div>
+<div>
+    <button id="remove">remove</button> <button id="attach">attach</button>
+</div>
+
+<script type="text/javascript">
+    window.addEvent("domready", function() {
+        var ph = new mooPlaceholder().attachToElements();
+
+        document.id("attach").addEvent("click", function() {
+            ph.attachToElements()
+        });
+        document.id("remove").addEvent("click", function() {
+            ph.detachFromElements();
+        });
+
+        // example form submit.
+        document.id("myform").addEvent("submit", function(e) {
+
+            // first, remove placeholder values.
+            ph.detachFromElements();
+
+            // simple validation to check for required value.
+            var hasEmptyFields = this.getElements("input").get("value").some(function(el) {
+                return el.trim() === '';
+            });
+
+            // if it has failed, restore it and stop submit
+            if (hasEmptyFields) {
+                // restore placeholder values
+                ph.attachToElements();
+                alert("please fill in all required fields");
+                e && e.preventDefault();
+            }
+            else {
+                // allow it to bubble.
+                alert("submitting the form");
+            }
+
+        });
+
+    });
+</script>
+</body>
+</html>
diff --git a/README.md b/README.md
@@ -0,0 +1,16 @@
+mooPlaceholder
+==============
+
+A MooTools plugin that enables placholder= functionality on older browsers
+
+
+How to use
+----------
+
+Check the `Demo/index.html`
+
+
+Example
+-------
+
+[http://jsfiddle.net/dimitar/bYQ8P/](http://jsfiddle.net/dimitar/bYQ8P/)
diff --git a/Source/css/mooPlaceholder.css b/Source/css/mooPlaceholder.css
@@ -0,0 +1,3 @@
+input.unchanged {
+    color: #A9A9A9;
+}
diff --git a/Source/js/mooPlaceholder.js b/Source/js/mooPlaceholder.js
@@ -0,0 +1,124 @@
+/*
+---
+
+name: mooPlaceholder
+
+description: provides placeholder= behaviour to browsers that don't support it.
+
+author: Dimitar Christoff, Qmetric Group Limited
+
+license: MIT-style license.
+
+version: 1.5
+
+requires:
+  - Core/String
+  - Core/Event
+  - Core/Element
+  - Core/Array
+  - Core/Class
+
+provides: mooPlaceholder
+
+...
+*/
+(function() {
+
+    var mooPlaceholder = this.mooPlaceholder = new Class({
+        // behaviour for default values of inputs class
+
+        Implements: [Options],
+
+        options: {
+            // default options
+            htmlPlaceholder: "placeholder", // the element attribute, eg, data-placeholder="MM/YY" -> "data-placeholder"
+            unmoddedClass: "unchanged", // apply a class to the unmodded input, say, to grey it out
+            parentNode: document, // limit to a particular set of child nodes
+            defaultSelector: "input[placeholder]"
+        },
+
+        initialize: function(options) {
+            this.setOptions(options);
+            this.nativeSupport = !!'placeholder' in document.createElement('input');
+        },
+
+        attachToElements: function(selector) {
+            // basic function example that uses a class selector to
+            this.inputs = this.options.parentNode.getElements(selector || this.options.defaultSelector);
+
+            if (this.inputs.length) {
+                this.inputs.each(function(el) {
+                    this.attachEvents(el);
+                }, this);
+            }
+        }, // end attachToElements
+
+        detachFromElements: function() {
+            // reset managed fields values. call this on form submit before validation!
+            var className = this.options.unmoddedClass;
+            if (!this.inputs)
+                return;
+
+            this.inputs.each(function(el) {
+                if (el.get("value") == el.get("placeholder")) {
+                    el.set("value", "").removeClass(className);
+                }
+                el.removeEvents(el.retrieve("bound")).eliminate("bound");
+            });
+
+        },
+
+        attachEvents: function(el, placeholder) {
+            // method that attaches the events to an input element.
+            placeholder = placeholder || el.get(this.options.htmlPlaceholder);
+            if (this.nativeSupport || !document.id(el) || !placeholder || !placeholder.length)
+                return;
+
+            var hasValue = !!el.get("value").length;
+
+            if (!hasValue)
+                el.set("value", placeholder);
+
+            el.store("placeholder", placeholder);
+
+            // append unmodded class to input at start
+            if (this.options.unmoddedClass && !hasValue)
+                el.addClass(this.options.unmoddedClass);
+
+            // now cater for the events
+            var boundEvents = {
+                change: this.change.bind(this, el),
+                focus: this.focus.bind(this, el),
+                blur: this.blur.bind(this, el)
+            };
+
+            el.addEvents(boundEvents).store("bound", boundEvents);
+        },
+
+        change: function(el) {
+            // when value changes
+            var value = el.get("value").trim(), placeholder = el.retrieve("placeholder");
+            if (value != placeholder) {
+                // once it changes, remove this check and remove the unmoddedClass
+                el.removeClass(this.options.unmoddedClass).removeEvents("change");
+            }
+
+        },
+
+        focus: function(el) {
+            var value = el.get("value").trim(), placeholder = el.retrieve("placeholder");
+            if (value == placeholder) {
+                el.set("value", "").removeClass(this.options.unmoddedClass);
+            }
+        },
+
+        blur: function(el) {
+            var value = el.get("value").trim(), placeholder = el.retrieve("placeholder");
+            if (value == placeholder || value == "") {
+                el.set("value", placeholder).addClass(this.options.unmoddedClass);
+            }
+        }
+
+    });
+
+})();