Implement sticky placeholder directive

Author: Nick Litwin

app/account/register/register.jade

@@ -13,9 +13,11 @@
     p.form-error(ng-show="vm.errMsg") {{vm.errMsg}}
 
     .first-last-names
-      input(input-sticky-placeholder, sticky-placeholder="First" ng-model="vm.firstname", maxlength="64", name="firstname", placeholder="First Name", type="text", required)
+      input-sticky-placeholder(sticky-placeholder="First", ng-model="vm.firstname")
+        input(ng-model="vm.firstname", maxlength="64", name="firstname", placeholder="First Name", type="text", required)
 
-      input(right-placeholder, focused-placeholder="Last", ng-model="vm.lastname", maxlength="64", name="lastname", placeholder="Last Name", type="text", required)
+      input-sticky-placeholder(sticky-placeholder="Last", ng-model="vm.lastname")
+        input(ng-model="vm.lastname", maxlength="64", name="lastname", placeholder="Last Name", type="text", required)
 
     .country-dropdown
       angucomplete-alt(
@@ -36,7 +38,8 @@
         p.form-error(ng-show="vm.registerForm.country.$error.required") Please choose a country from the list.
 
     .validation-bar(ng-class="{ 'error-bar': (vm.registerForm.username.$error.usernameIsFree || vm.registerForm.username.$error.minlength || vm.registerForm.username.$error.maxlength), 'success-bar': (vm.registerForm.username.$valid && !vm.registerForm.username.$error.usernameIsFree) }")
-      input(right-placeholder, focused-placeholder="Username", ng-model="vm.username", ng-model-options="{ debounce: {'default': 500} }", ng-focus="vm.usernameTips = true", ng-blur="vm.usernameTips = false", ng-minlength="2", ng-maxlength="15", name="username", placeholder="Username", type="text", username-is-free, required)
+      input-sticky-placeholder(sticky-placeholder="Username", ng-model="vm.username")
+        input(ng-model="vm.username", ng-model-options="{ debounce: {'default': 500} }", ng-focus="vm.usernameTips = true", ng-blur="vm.usernameTips = false", ng-minlength="2", ng-maxlength="15", name="username", placeholder="Username", type="text", username-is-free, required)
 
       .tips.username-tips(ng-show="vm.usernameTips")
         h3 Username Tips:
@@ -53,7 +56,8 @@
       p.form-error(ng-show="vm.registerForm.username.$dirty && (vm.registerForm.username.$error.minlength || vm.registerForm.username.$error.maxlength)") That username is not the correct length or format.
 
     .validation-bar(ng-class="{ 'error-bar': (vm.registerForm.email.$dirty && vm.registerForm.email.$invalid), 'success-bar': (vm.registerForm.email.$valid) }")
-      input(right-placeholder, focused-placeholder="Email", ng-model="vm.email", ng-model-options="{ debounce: {'default': 500} }", ng-focus="vm.emailTips = true", ng-blur="vm.emailTips = false", name="email", placeholder="Enter Your Email", type="email", valid-email, email-is-available, required)
+      input-sticky-placeholder(sticky-placeholder="Email", ng-model="vm.email")
+        input(ng-model="vm.email", ng-model-options="{ debounce: {'default': 500} }", ng-focus="vm.emailTips = true", ng-blur="vm.emailTips = false", name="email", placeholder="Enter Your Email", type="email", valid-email, email-is-available, required)
 
       .tips.email-tips(ng-show="vm.emailTips")
         h3 Email Tips:

app/account/reset-password/reset-password.jade

@@ -11,7 +11,8 @@
     p.email-label Please enter your email address, and we'll send you a link to reset your password
 
     .validation-bar(ng-class="{ 'error-bar': (vm.generateTokenForm.email.$dirty && vm.generateTokenForm.email.$invalid), 'success-bar': (vm.generateTokenForm.email.$valid) }")
-      input(right-placeholder, focused-placeholder="Email", ng-model="vm.email", ng-focus="vm.emailTips = true", ng-blur="vm.emailTips = false", name="email", placeholder="EMAIL ADDRESS", type="email", valid-email, required)
+      input-sticky-placeholder(sticky-placeholder="Email", ng-model="vm.email")
+        input(ng-model="vm.email", ng-focus="vm.emailTips = true", ng-blur="vm.emailTips = false", name="email", placeholder="EMAIL ADDRESS", type="email", valid-email, required)
 
       .tips.email-tips(ng-show="vm.emailTips")
         h3 Email Tips:

app/directives/input-sticky-placeholder/input-sticky-placeholder.directive.js

@@ -4,23 +4,38 @@
   angular.module('tcUIComponents').directive('inputStickyPlaceholder', inputStickyPlaceholder);
 
   /*
-   *  ****** Make sure to style the input tag so that the text entered does
-   *  not overlap with the sticky-placeholder ******
+   *  ******
+   *         Make sure to add padding-right to the input element
+   *         so that the text entered does not overlap with the
+   *         sticky-placeholder
+   *  ******
    *
    *  Example:
-   *  input(input-sticky-placeholder, sticky-placeholder="First",
-   *  placeholder="First Name")
+   *  input-sticky-placeholder(sticky-placeholder="First", ng-model="vm.firstname")
+   *    input(ng-model="vm.firstname", ...)
    *
    */
 
   function inputStickyPlaceholder() {
     return {
-      restrict: 'A',
+      restrict: 'E',
       transclude: true,
       replace: true,
       templateUrl: 'directives/input-sticky-placeholder/input-sticky-placeholder.html',
       link: function(scope, element, attrs) {
-        scope.stickyPlaceholder = attrs.stickyPlaceholder;
+        var span = angular.element(element[0].children[1]);
+        var input = angular.element(element[0].children[0].children[0]);
+        span.text('');
+
+        scope.$watch(function() {
+          return input.val();
+        }, function(newValue, oldValue) {
+          span.text('');
+
+          if (newValue && newValue.length) {
+            span.text(attrs.stickyPlaceholder);
+          }
+        });
       }
     };
   }

app/directives/input-sticky-placeholder/input-sticky-placeholder.jade

@@ -1,4 +1,4 @@
-.input-container
+.input-sticky-placeholder-container
   div(ng-transclude)
 
-  span(ng-bind="stickyPlaceholder")
+  span.placeholder-text

app/directives/right-placeholder.directive.js

@@ -158,7 +158,6 @@ html
     script(src="directives/ios-card/ios-card.directive.js")
     script(src="directives/on-file-change.directive.js")
     script(src="directives/profile-widget/profile-widget.directive.js")
-    script(src="directives/right-placeholder.directive.js")
     script(src="directives/skill-tile/skill-tile.directive.js")
     script(src="directives/slideable.directive.js")
     script(src="directives/srm-tile/srm-tile.directive.js")

app/index.jade

@@ -33,6 +33,11 @@
 
     input[name="firstname"], input[name="lastname"] {
       width: 185px;
+      padding-right: 45px;
+    }
+
+    input[name="username"], input[name="email"] {
+      padding-right: 85px;
     }
   }
 

assets/css/account/register.scss

@@ -1,5 +1,16 @@
 @import '../partials/combined';
 
-input-sticky-placeholder {
+.input-sticky-placeholder-container {
+  position: relative;
 
+  span.placeholder-text {
+    position: absolute;
+    top: 3px;
+    right: 10px;
+    @include sofia-pro-regular;
+    font-size: 10px;
+    line-height: 40px;
+    text-transform: uppercase;
+    color: $system-gray;
+  }
 }

assets/css/directives/input-sticky-placeholder.scss

@@ -80,6 +80,7 @@
         margin-bottom: 15px;
         padding: 0 21px;
         border: 1px solid #DCDCDC;
+        background-color: $white;
         border-radius: 4px;
         @media only screen and (max-width: 767px) {
           display: inline-block;
@@ -106,7 +107,6 @@
         a {
           margin-bottom: 21px;
           @include button-m-wide;
-          @include button-ghost;
           text-decoration: none;
         }
       }

assets/css/my-dashboard/srms.scss

@@ -82,6 +82,11 @@
   font-weight: 400;
 }
 
+@mixin sofia-pro-italic {
+  @include sofia-pro-regular;
+  font-style: italic;
+}
+
 @mixin sofia-pro-medium {
   font-family: 'Sofia Pro', Arial;
   font-weight: 500;

assets/css/partials/_mixins.scss

@@ -98,46 +98,6 @@ a {
   color: #ed5d5d;
 }
 
-.focused-placeholder[placeholder]:focus::-webkit-input-placeholder {
-  padding-right: 10px;
-  padding-top: 7px;
-  line-height: normal;
-  text-align: right;
-  text-transform: uppercase;
-  font-size: 12px;
-  color: #808285;
-}
-
-.focused-placeholder[placeholder]:focus:-moz-placeholder {
-  padding-right: 10px;
-  padding-top: 7px;
-  line-height: normal;
-  text-align: right;
-  text-transform: uppercase;
-  font-size: 12px;
-  color: #808285;
-}
-
-.focused-placeholder[placeholder]:focus::-moz-placeholder {
-  padding-right: 10px;
-  padding-top: 7px;
-  line-height: normal;
-  text-align: right;
-  text-transform: uppercase;
-  font-size: 12px;
-  color: #808285;
-}
-
-.focused-placeholder[placeholder]:focus:-ms-input-placeholder {
-  padding-right: 10px;
-  padding-top: 7px;
-  line-height: normal;
-  text-align: right;
-  text-transform: uppercase;
-  font-size: 12px;
-  color: #808285;
-}
-
 .validation-bar {
   position: relative;
 
@@ -167,8 +127,7 @@ a {
   background-color: #FFCCE1;
   border: 1px solid #FF99C2;
   color: #FF0066;
-  // TODO change to italic
-  @include sofia-pro-regular;
+  @include sofia-pro-italic;
 }
 
 // Sidebar form field tips (e.g. username, email, password)