diff --git a/app/directives/tc-form-fonts/tc-form-fonts.directive.js b/app/directives/tc-form-fonts/tc-form-fonts.directive.js new file mode 100644 index 000000000..a5776871f --- /dev/null +++ b/app/directives/tc-form-fonts/tc-form-fonts.directive.js @@ -0,0 +1,79 @@ +(function() { + 'use strict'; + + angular.module('tcUIComponents').directive('tcFormFonts', tcFormFonts); + + function tcFormFonts() { + return { + restrict: 'E', + require: '^form', + templateUrl: 'directives/tc-form-fonts/tc-form-fonts.html', + scope: { + formFonts: '=' + }, + link: function(scope, element, attrs, formController) { + scope.submissionForm = formController; + }, + controller: ['$scope', function($scope) { + // Must provide React Select component a list with ID, since currently + // the onChange callback does not indicate which dropdown called the callback. + // There are pull requests pending for react-select which will clean this code up + $scope.fontList0 = [ + { label: 'Studio Standard Fonts List', value: 'STUDIO_STANDARD_FONTS_LIST', id: 0 }, + { label: 'Fonts.com', value: 'FONTS_DOT_COM', id: 0 }, + { label: 'MyFonts', value: 'MYFONTS', id: 0 }, + { label: 'Adobe Fonts', value: 'ADOBE_FONTS', id: 0 }, + { label: 'Font Shop', value: 'FONT_SHOP', id: 0 }, + { label: 'T.26 Digital Type Foundry', value: 'T26_DIGITAL_TYPE_FOUNDRY', id: 0 }, + { label: 'Font Squirrel', value: 'FONT_SQUIRREL', id: 0 }, + { label: 'Typography.com', value: 'TYPOGRAPHY_DOT_COM', id: 0 } + ]; + + $scope.urlRegEx = new RegExp(/^(http(s?):\/\/)?(www\.)?[a-zA-Z0-9\.\-\_]+(\.[a-zA-Z]{2,3})+(\/[a-zA-Z0-9\_\-\s\.\/\?\%\#\&\=]*)?$/); + + $scope.selectFont = function(newFont) { + // Find the right font section and change that source value to the value that the user selected + var id = newFont.id; + $scope.formFonts[id].source = newFont.value; + + if (newFont.value === 'STUDIO_STANDARD_FONTS_LIST') { + $scope.formFonts[id].isFontNameRequired = true; + $scope.formFonts[id].isFontNameDisabled = false; + $scope.formFonts[id].isFontUrlRequired = false; + $scope.formFonts[id].isFontUrlDisabled = false; + + } else if (newFont.value) { + $scope.formFonts[id].isFontNameRequired = true; + $scope.formFonts[id].isFontNameDisabled = false; + $scope.formFonts[id].isFontUrlRequired = true; + $scope.formFonts[id].isFontUrlDisabled = false; + + } + }; + + $scope.createAdditionalFontFieldset = function() { + var newId = $scope.formFonts.length; + + // Create copy of list with new, incremented ID + var newFontList = $scope['fontList' + newId] = angular.copy($scope['fontList' + (newId - 1)]); + + newFontList.forEach(function(font) { + font.id++; + }); + + $scope.formFonts.push({ + id: newId, + source: '', + name: '', + sourceUrl: '', + isFontUrlRequired: false, + isFontUrlDisabled: true, + isFontNameRequired: false, + isFontNameDisabled: true, + isFontSourceRequired: false + }); + } + }] + } + } +})(); diff --git a/app/directives/tc-form-fonts/tc-form-fonts.jade b/app/directives/tc-form-fonts/tc-form-fonts.jade new file mode 100644 index 000000000..387eb6163 --- /dev/null +++ b/app/directives/tc-form-fonts/tc-form-fonts.jade @@ -0,0 +1,46 @@ +.fieldset(ng-repeat="font in formFonts track by font.id") + label.tc-label Font Source + + dropdown( + name="'font-source{{$index}}'", + options="fontList{{$index}}", + placeholder="'Select a provider from the list'", + searchable="false", + clearable="false", + on-change="selectFont", + value="formFonts[{{$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}}", + input-required="formFonts[$index].isFontNameRequired", + input-disabled="formFonts[$index].isFontNameDisabled" + ) + + .tc-error-messages( + ng-show="submissionForm['fontName' + $index].$dirty && submissionForm['fontName' + $index].$invalid" + ng-messages="submissionForm['fontName' + $index].$error" + ) + p(ng-message="required") This field is required. + + tc-input.fieldset__input( + label-text="Font URL", + placeholder="Select font source to edit field", + input-value="font.sourceUrl", + input-name="fontUrl{{$index}}", + input-required="formFonts[$index].isFontUrlRequired", + input-disabled="formFonts[$index].isFontUrlDisabled", + input-pattern="urlRegEx" + ) + + .tc-error-messages( + ng-show="submissionForm['fontUrl' + $index].$dirty && submissionForm['fontUrl' + $index].$invalid" + ng-messages="submissionForm['fontUrl' + $index].$error" + ) + p(ng-message="pattern") Please enter a valid url. + p(ng-message="required") This field is required. + +button.fieldset__button.tc-btn.tc-btn-s(type="button", ng-click="createAdditionalFontFieldset()") + Add Font diff --git a/app/directives/tc-input/tc-input.directive.js b/app/directives/tc-input/tc-input.directive.js index 410253061..31931cdfc 100644 --- a/app/directives/tc-input/tc-input.directive.js +++ b/app/directives/tc-input/tc-input.directive.js @@ -14,6 +14,8 @@ inputName: '@', inputType: '@', inputPattern: '=', + inputRequired: '=', + inputDisabled: '=', updateValueOnBlur: '&?' }, link: function(scope, element, attrs) { diff --git a/app/directives/tc-input/tc-input.jade b/app/directives/tc-input/tc-input.jade index cd33a2efb..d1d4c33cc 100644 --- a/app/directives/tc-input/tc-input.jade +++ b/app/directives/tc-input/tc-input.jade @@ -1,3 +1,11 @@ label.tc-label {{labelText}} -input(name="{{inputName}}", type="{{inputType}}", placeholder="{{placeholder}}", ng-model="inputValue", ng-pattern="inputPattern") +input( + name="{{inputName}}", + type="{{inputType}}", + placeholder="{{placeholder}}", + ng-model="inputValue", + ng-pattern="inputPattern", + ng-required="inputRequired", + ng-disabled="inputDisabled" +) diff --git a/app/index.jade b/app/index.jade index 635966d81..e8476ccf4 100644 --- a/app/index.jade +++ b/app/index.jade @@ -227,6 +227,7 @@ html script(src="directives/srm-tile/srm-tile.directive.js") script(src="directives/tc-endless-paginator/tc-endless-paginator.directive.js") script(src="directives/tc-file-input/tc-file-input.directive.js") + script(src="directives/tc-form-fonts/tc-form-fonts.directive.js") script(src="directives/tc-input/tc-input.directive.js") script(src="directives/tc-paginator/tc-paginator.directive.js") script(src="directives/tc-section/tc-section.directive.js") diff --git a/app/submissions/submit-file/submit-file.controller.js b/app/submissions/submit-file/submit-file.controller.js index 9f1701176..2caac4ade 100644 --- a/app/submissions/submit-file/submit-file.controller.js +++ b/app/submissions/submit-file/submit-file.controller.js @@ -7,25 +7,21 @@ function SubmitFileController($stateParams, UserService, SubmissionsService, challengeToSubmitTo) { var vm = this; - - // Must provide React Select component a list with ID, since currently - // the onChange callback does not indicate which dropdown called the callback. - // There are pull requests pending for react-select which will clean this code up - vm.fontList1 = [ - { label: 'Studio Standard Fonts List', value: 'STUDIO_STANDARD_FONTS_LIST', id: 1 }, - { label: 'Fonts.com', value: 'FONTS_DOT_COM', id: 1 }, - { label: 'MyFonts', value: 'MYFONTS', id: 1 }, - { label: 'Adobe Fonts', value: 'ADOBE_FONTS', id: 1 }, - { label: 'Font Shop', value: 'FONT_SHOP', id: 1 }, - { label: 'T.26 Digital Type Foundry', value: 'T26_DIGITAL_TYPE_FOUNDRY', id: 1 }, - { label: 'Font Squirrel', value: 'FONT_SQUIRREL', id: 1 }, - { label: 'Typography.com', value: 'TYPOGRAPHY_DOT_COM', id: 1 } - ]; - var files = {}; vm.urlRegEx = new RegExp(/^(http(s?):\/\/)?(www\.)?[a-zA-Z0-9\.\-\_]+(\.[a-zA-Z]{2,3})+(\/[a-zA-Z0-9\_\-\s\.\/\?\%\#\&\=]*)?$/); vm.rankRegEx = new RegExp(/^[1-9]\d*$/); vm.comments = ''; + vm.formFonts = [{ + id: 0, + source: '', + name: '', + sourceUrl: '', + isFontUrlRequired: false, + isFontUrlDisabled: true, + isFontNameRequired: false, + isFontNameDisabled: true, + isFontSourceRequired: false + }]; vm.submissionForm = { files: [], @@ -35,12 +31,7 @@ submitterRank: 1, submitterComments: '', - fonts: [{ - id: 1, - source: '', - name: '', - sourceUrl: '' - }], + fonts: [], stockArts: [{ id: 1, description: '', @@ -77,8 +68,6 @@ vm.setRankTo1 = setRankTo1; vm.setFileReference = setFileReference; vm.uploadSubmission = uploadSubmission; - vm.selectFont = selectFont; - vm.createAnotherFontFieldset = createAnotherFontFieldset; vm.createAnotherStockArtFieldset = createAnotherStockArtFieldset; activate(); @@ -114,8 +103,6 @@ fileObject.mediaType = file.type; } - - // If user picks a new file, replace the that file's fileObject with a new one // Or add it the list if it's not there if (vm.submissionsBody.data.files.length) { @@ -131,31 +118,6 @@ } } - function selectFont(newFont) { - // See above for explanation - var id = newFont.id - 1; - vm.submissionForm.fonts[id].source = newFont.value; - } - - function createAnotherFontFieldset() { - // See above for explanation on why this is done the way it is - var id = vm.submissionForm.fonts.length; - - // Create copy of list with new, incremented ID - var newFontList = vm['fontList' + (id + 1)] = angular.copy(vm['fontList' + id]); - - newFontList.forEach(function(font) { - font.id++; - }); - - vm.submissionForm.fonts.push({ - id: vm.submissionForm.fonts.length + 1, - source: '', - name: '', - sourceUrl: '' - }); - } - function createAnotherStockArtFieldset() { vm.submissionForm.stockArts.push({ id: vm.submissionForm.stockArts.length + 1, @@ -169,6 +131,7 @@ vm.submissionsBody.data.submitterComments = vm.comments; vm.submissionsBody.data.submitterRank = vm.submissionForm.submitterRank; + // Process stock art if (vm.submissionForm.stockArts[0].description === '') { vm.submissionsBody.data.stockArts = []; } else { @@ -179,18 +142,25 @@ }); } - if (vm.submissionForm.fonts[0].source === '') { + // Process fonts + if (vm.formFonts[0].source === '') { vm.submissionsBody.data.fonts = []; } else { - var fonts = angular.copy(vm.submissionForm.fonts); + var fonts = angular.copy(vm.formFonts); vm.submissionsBody.data.fonts = fonts.map(function(font) { if (font.source) { delete font.id; + delete font.isFontUrlRequired; + delete font.isFontUrlDisabled; + delete font.isFontNameRequired; + delete font.isFontNameDisabled; + delete font.isFontSourceRequired; return font; } }); } + console.log('ABOUT TO SEND: ', vm.submissionsBody); SubmissionsService.getPresignedURL(vm.submissionsBody, files); } } diff --git a/app/submissions/submit-file/submit-file.jade b/app/submissions/submit-file/submit-file.jade index dcbcbd73c..f1f48bd20 100644 --- a/app/submissions/submit-file/submit-file.jade +++ b/app/submissions/submit-file/submit-file.jade @@ -98,51 +98,22 @@ .form-block.flex.wrap .form-block__instructions - .form-block__title Fonts + .form-block__title Did you use custom fonts? .form-block__text p Check to see if your font is on the Studio Standard Fonts list. If it is, leave the URL field blank. p Read the #[a(href="Need link") Studio Fonts Policy]. - p If you only used fonts that came with the client files, choose "I did not introduce any new fonts" from the dropdown box. - p If your font is not on the list, you must provide the URL to the font page (not file) from one of the approved font websites in the dropdown box. .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}}" - ) - - button.fieldset__button.tc-btn.tc-btn-s(type="button", ng-click="vm.createAnotherFontFieldset()") + Add Font + tc-form-fonts(form-fonts="vm.formFonts") .form-block.flex.wrap .form-block__instructions - .form-block__title Stock Art + .form-block__title Did you use stock art? .form-block__text p If you used any stock photos in your design mocks, please provide the location and details so that the client can obtain them. Follow the guidelines at our #[a(href="Need link") Studio Stock Art Policy]. @@ -166,7 +137,7 @@ ) .tc-error-messages(ng-show="submissionForm['photoURL' + $index].$dirty && submissionForm['photoURL' + $index].$invalid") - p(ng-show="submissionForm['photoURL' + $index].$error.pattern") Not a valid url. + p(ng-show="submissionForm['photoURL' + $index].$error.pattern") Please enter a valid url. tc-input.fieldset__input( label-text="File Number", diff --git a/assets/css/submissions/submit-file.scss b/assets/css/submissions/submit-file.scss index 978edbea9..ed829058b 100644 --- a/assets/css/submissions/submit-file.scss +++ b/assets/css/submissions/submit-file.scss @@ -38,6 +38,12 @@ margin-top: 10px; } +tc-form-fonts { + .fieldset { + max-width: 500px; + } +} + .Select { max-width: 300px; margin-bottom: 20px;