add polyfill directive js

Author: Vikas Gulatii

README.md

@@ -1,4 +1,19 @@
 angularjs-placeholder.js
 ========================
 
-AngularJs directive pollyfill for html5 placeholder without jQuery dependency.
+AngularJs directive pollyfill for html5 placeholder *without jQuery dependency*.
+Inspired from https://gist.github.com/veeracs/5770791.
+
+Requires
+==========================
+1. Angularjs - obviously!
+1. Modernizr.js with placeholder support detection (Get your custom build here http://modernizr.com/download/#-input-inputtypes-forms_placeholder)
+
+
+Installation
+==========================
+1. Download the angularjs-placeholder-polyfill.js file.
+1. Include it in your site.
+1. Include Modernizr in your site.
+1. Install customPlaceholder module in your angular app.
+

angularjs-placeholder-polyfill.js

@@ -0,0 +1,48 @@
+angular.module('customPlaceholder', []).directive('placeholder', function(){
+    //	cn-placeholder directive definition object
+    return {
+        restrict: 'A',
+        require: 'ngModel',
+        link: function(scope, elm, attrs, ctrl) {
+            if (!Modernizr.placeholder) {
+                //	setup the label overlay for input
+                var computedStyle = window.getComputedStyle(elm[0], null),
+                    leftPadding = computedStyle.getPropertyValue('padding-left'),
+                    topPadding = computedStyle.getPropertyValue('padding-top'),
+                    placeholderLabel = angular.element(elm.parent()
+                            .css({'position':'relative'})
+                            .prepend('<span>' + elm.attr('placeholder') + '</span>')
+                            .find('span')[0])
+                        .css({  'color':'#999',
+                            'position':'absolute',
+                            'top': topPadding,
+                            'left':leftPadding}),
+                    placeholderBindClick = function(){
+                        placeholderLabel.bind('click', function(){
+                            elm[0].focus();
+                        });
+                    };
+
+                placeholderBindClick();
+
+                //	removes the label overlay when a value is typed
+                var elemPlaceHandlePlaceholder = function(){
+                    if (elm.val() !== '') {
+                        placeholderLabel.remove();
+                    } else {
+                        elm.parent().prepend(placeholderLabel);
+                        placeholderBindClick();
+                    }
+                };
+
+                scope.$watch(attrs.ngModel, function(newValue, oldValue) {
+                    elemPlaceHandlePlaceholder();
+                });
+
+                elm.bind('keyup keydown', function(){
+                    elemPlaceHandlePlaceholder();
+                });
+            }
+        }
+    };
+});