Add container directive for fonts

Author: Nick Litwin

app/directives/font-submission/font-submission.directive.js

@@ -0,0 +1,17 @@
+(function() {
+  'use strict';
+
+  angular.module('tcUIComponents').directive('fontSubmission', fontSubmission);
+
+  function fontSubmission() {
+    return {
+      restrict: 'E',
+      templateUrl: 'directives/font-submission/font-submission.html',
+      scope: true,
+      controller: ['$scope', function($scope) {
+        console.log('scope on font submission directive: ', $scope.submissionForm);
+      }],
+      controllerAs: 'fontSubmission'
+    }
+  }
+})();

app/directives/font-submission/font-submission.jade

@@ -0,0 +1,25 @@
+label.tc-label Font Source
+
+dropdown(
+  name="'font-source{{$index + 1}}'",
+  options="vm.fontList{{$index + 1}}",
+  placeholder="'Select from the list'",
+  searchable="false",
+  clearable="false",
+  on-change="vm.selectFont",
+  value="vm.submissionForm.fonts[{{$index}}].source"
+)
+
+tc-input.fieldset__input(
+  label-text="Font Name",
+  placeholder="Select font source to edit field"
+  input-value="font.name",
+  input-name="fontName{{$index}}"
+)
+
+tc-input.fieldset__input(
+  label-text="Font URL",
+  placeholder="Select font source to edit field",
+  input-value="font.sourceUrl",
+  input-name="fontUrl{{$index}}"
+)

app/index.jade

@@ -212,6 +212,7 @@ html
     script(src="directives/external-account/external-links-data.directive.js")
     script(src="directives/external-account/external-web-links.directive.js")
     script(src="directives/focus-on.directive.js")
+    script(src="directives/font-submission/font-submission.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")

app/submissions/submit-file/submit-file.jade

@@ -111,32 +111,7 @@
 
       .form-block__fields
         .fieldsets
-          ng-form.fieldset(name="font{{$index + 1}}", ng-repeat="font in vm.submissionForm.fonts track by font.id")
-            label.tc-label Font Source
-
-            dropdown(
-              name="'font-source{{$index + 1}}'",
-              options="vm.fontList{{$index + 1}}",
-              placeholder="'Select from the list'",
-              searchable="false",
-              clearable="false",
-              on-change="vm.selectFont",
-              value="vm.submissionForm.fonts[{{$index}}].source"
-            )
-
-            tc-input.fieldset__input(
-              label-text="Font Name",
-              placeholder="Select font source to edit field"
-              input-value="font.name",
-              input-name="fontName{{$index}}"
-            )
-
-            tc-input.fieldset__input(
-              label-text="Font URL",
-              placeholder="Select font source to edit field",
-              input-value="font.sourceUrl",
-              input-name="fontUrl{{$index}}"
-            )
+          font-submission.fieldset(ng-repeat="font in vm.submissionForm.fonts track by font.id")
 
           button.fieldset__button.tc-btn.tc-btn-s(type="button", ng-click="vm.createAnotherFontFieldset()") + Add Font