Add new directive files for sticky placeholder

Author: Nick Litwin

app/account/register/register.jade

@@ -13,7 +13,7 @@
     p.form-error(ng-show="vm.errMsg") {{vm.errMsg}}
 
     .first-last-names
-      input(right-placeholder, focused-placeholder="First", ng-model="vm.firstname", maxlength="64", name="firstname", placeholder="First Name", type="text", required)
+      input(input-sticky-placeholder, sticky-placeholder="First" 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)
 

app/directives/history-graph/history-graph.directive.js

@@ -6,9 +6,7 @@
   function historyGraph() {
     return {
       restrict: 'E',
-      templateUrl: function(elem, attrs) {
-        return 'directives/history-graph/history-graph.directive.html';
-      },
+      templateUrl: 'directives/history-graph/history-graph.directive.html',
       scope: {
         promise: '=',
         rating: '=',

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

@@ -0,0 +1,27 @@
+(function() {
+  'use strict';
+
+  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 ******
+   *
+   *  Example:
+   *  input(input-sticky-placeholder, sticky-placeholder="First",
+   *  placeholder="First Name")
+   *
+   */
+
+  function inputStickyPlaceholder() {
+    return {
+      restrict: 'A',
+      transclude: true,
+      replace: true,
+      templateUrl: 'directives/input-sticky-placeholder/input-sticky-placeholder.html',
+      link: function(scope, element, attrs) {
+        scope.stickyPlaceholder = attrs.stickyPlaceholder;
+      }
+    };
+  }
+})();

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

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

app/index.jade

@@ -63,6 +63,7 @@ html
     link(rel="stylesheet", href="assets/css/directives/skill-tile.css")
     link(rel="stylesheet", href="assets/css/directives/profile-widget.css")
     link(rel="stylesheet", href="assets/css/directives/ios-card.css")
+    link(rel="stylesheet", href="assets/css/directives/input-sticky-placeholder.css")
     link(rel="stylesheet", href="assets/css/directives/history-graph.css")
     link(rel="stylesheet", href="assets/css/directives/external-link-data.css")
     link(rel="stylesheet", href="assets/css/directives/external-account.css")
@@ -153,6 +154,7 @@ html
     script(src="directives/focus-on.directive.js")
     script(src="directives/header/header-menu-item.directive.js")
     script(src="directives/history-graph/history-graph.directive.js")
+    script(src="directives/input-sticky-placeholder/input-sticky-placeholder.directive.js")
     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")

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

@@ -0,0 +1,5 @@
+@import '../partials/combined';
+
+input-sticky-placeholder {
+
+}