Skip to content
This repository was archived by the owner on Mar 4, 2025. It is now read-only.

Commit d850588

Browse files
author
Nick Litwin
committed
Refactor fonts section to have its own directive and controller
1 parent 752d034 commit d850588

File tree

8 files changed

+108
-96
lines changed

8 files changed

+108
-96
lines changed

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

Lines changed: 0 additions & 17 deletions
This file was deleted.

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

Lines changed: 0 additions & 25 deletions
This file was deleted.

‎app/directives/tc-form-fonts/tc-form-fonts.directive.js

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
(function() {
2+
'use strict';
3+
4+
angular.module('tcUIComponents').directive('tcFormFonts', tcFormFonts);
5+
6+
function tcFormFonts() {
7+
return {
8+
restrict: 'E',
9+
templateUrl: 'directives/tc-form-fonts/tc-form-fonts.html',
10+
scope: {
11+
formFonts: '='
12+
},
13+
link: function(scope, element, attrs) {
14+
// console.log('scope on font submission directive: ', scope.submissionForm);
15+
16+
},
17+
controller: ['$scope', function($scope) {
18+
// Must provide React Select component a list with ID, since currently
19+
// the onChange callback does not indicate which dropdown called the callback.
20+
// There are pull requests pending for react-select which will clean this code up
21+
$scope.fontList0 = [
22+
{ label: 'Studio Standard Fonts List', value: 'STUDIO_STANDARD_FONTS_LIST', id: 0 },
23+
{ label: 'Fonts.com', value: 'FONTS_DOT_COM', id: 0 },
24+
{ label: 'MyFonts', value: 'MYFONTS', id: 0 },
25+
{ label: 'Adobe Fonts', value: 'ADOBE_FONTS', id: 0 },
26+
{ label: 'Font Shop', value: 'FONT_SHOP', id: 0 },
27+
{ label: 'T.26 Digital Type Foundry', value: 'T26_DIGITAL_TYPE_FOUNDRY', id: 0 },
28+
{ label: 'Font Squirrel', value: 'FONT_SQUIRREL', id: 0 },
29+
{ label: 'Typography.com', value: 'TYPOGRAPHY_DOT_COM', id: 0 }
30+
];
31+
32+
$scope.urlRegEx = new RegExp(/^(http(s?):\/\/)?(www\.)?[a-zA-Z0-9\.\-\_]+(\.[a-zA-Z]{2,3})+(\/[a-zA-Z0-9\_\-\s\.\/\?\%\#\&\=]*)?$/);
33+
34+
$scope.selectFont = function(newFont) {
35+
// Find the right font section and change that source value to the value that the user selected
36+
var id = newFont.id;
37+
$scope.formFonts[id].source = newFont.value;
38+
};
39+
40+
$scope.createAdditionalFontFieldset = function() {
41+
var newId = $scope.formFonts.length;
42+
43+
// Create copy of list with new, incremented ID
44+
var newFontList = $scope['fontList' + newId] = angular.copy($scope['fontList' + (newId - 1)]);
45+
46+
newFontList.forEach(function(font) {
47+
font.id++;
48+
});
49+
50+
$scope.formFonts.push({
51+
id: newId,
52+
source: '',
53+
name: '',
54+
sourceUrl: ''
55+
});
56+
}
57+
}]
58+
}
59+
}
60+
})();

‎app/directives/tc-form-fonts/tc-form-fonts.jade

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.fieldset(ng-repeat="font in formFonts track by font.id")
2+
label.tc-label Font Source
3+
4+
dropdown(
5+
name="'font-source{{$index}}'",
6+
options="fontList{{$index}}",
7+
placeholder="'Select from the list'",
8+
searchable="false",
9+
clearable="false",
10+
on-change="selectFont",
11+
value="formFonts[{{$index}}].source"
12+
)
13+
14+
tc-input.fieldset__input(
15+
label-text="Font Name",
16+
placeholder="Select font source to edit field"
17+
input-value="font.name",
18+
input-name="fontName{{$index}}"
19+
)
20+
21+
tc-input.fieldset__input(
22+
label-text="Font URL",
23+
placeholder="Select font source to edit field",
24+
input-value="font.sourceUrl",
25+
input-name="fontUrl{{$index}}"
26+
)
27+
28+
button.fieldset__button.tc-btn.tc-btn-s(type="button", ng-click="createAdditionalFontFieldset()") + Add Font

‎app/index.jade

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,6 @@ html
212212
script(src="directives/external-account/external-links-data.directive.js")
213213
script(src="directives/external-account/external-web-links.directive.js")
214214
script(src="directives/focus-on.directive.js")
215-
script(src="directives/font-submission/font-submission.directive.js")
216215
script(src="directives/header/header-menu-item.directive.js")
217216
script(src="directives/history-graph/history-graph.directive.js")
218217
script(src="directives/input-sticky-placeholder/input-sticky-placeholder.directive.js")
@@ -228,6 +227,7 @@ html
228227
script(src="directives/srm-tile/srm-tile.directive.js")
229228
script(src="directives/tc-endless-paginator/tc-endless-paginator.directive.js")
230229
script(src="directives/tc-file-input/tc-file-input.directive.js")
230+
script(src="directives/tc-form-fonts/tc-form-fonts.directive.js")
231231
script(src="directives/tc-input/tc-input.directive.js")
232232
script(src="directives/tc-paginator/tc-paginator.directive.js")
233233
script(src="directives/tc-section/tc-section.directive.js")

‎app/submissions/submit-file/submit-file.controller.js

Lines changed: 12 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -7,25 +7,19 @@
77

88
function SubmitFileController($stateParams, UserService, SubmissionsService, challengeToSubmitTo) {
99
var vm = this;
10-
11-
// Must provide React Select component a list with ID, since currently
12-
// the onChange callback does not indicate which dropdown called the callback.
13-
// There are pull requests pending for react-select which will clean this code up
14-
vm.fontList1 = [
15-
{ label: 'Studio Standard Fonts List', value: 'STUDIO_STANDARD_FONTS_LIST', id: 1 },
16-
{ label: 'Fonts.com', value: 'FONTS_DOT_COM', id: 1 },
17-
{ label: 'MyFonts', value: 'MYFONTS', id: 1 },
18-
{ label: 'Adobe Fonts', value: 'ADOBE_FONTS', id: 1 },
19-
{ label: 'Font Shop', value: 'FONT_SHOP', id: 1 },
20-
{ label: 'T.26 Digital Type Foundry', value: 'T26_DIGITAL_TYPE_FOUNDRY', id: 1 },
21-
{ label: 'Font Squirrel', value: 'FONT_SQUIRREL', id: 1 },
22-
{ label: 'Typography.com', value: 'TYPOGRAPHY_DOT_COM', id: 1 }
23-
];
24-
2510
var files = {};
2611
vm.urlRegEx = new RegExp(/^(http(s?):\/\/)?(www\.)?[a-zA-Z0-9\.\-\_]+(\.[a-zA-Z]{2,3})+(\/[a-zA-Z0-9\_\-\s\.\/\?\%\#\&\=]*)?$/);
2712
vm.rankRegEx = new RegExp(/^[1-9]\d*$/);
2813
vm.comments = '';
14+
15+
// New formFonts prop
16+
vm.formFonts = [{
17+
id: 0,
18+
source: '',
19+
name: '',
20+
sourceUrl: ''
21+
}];
22+
2923
vm.submissionForm = {
3024
files: [],
3125

@@ -35,12 +29,7 @@
3529

3630
submitterRank: 1,
3731
submitterComments: '',
38-
fonts: [{
39-
id: 1,
40-
source: '',
41-
name: '',
42-
sourceUrl: ''
43-
}],
32+
fonts: [],
4433
stockArts: [{
4534
id: 1,
4635
description: '',
@@ -77,8 +66,6 @@
7766
vm.setRankTo1 = setRankTo1;
7867
vm.setFileReference = setFileReference;
7968
vm.uploadSubmission = uploadSubmission;
80-
vm.selectFont = selectFont;
81-
vm.createAnotherFontFieldset = createAnotherFontFieldset;
8269
vm.createAnotherStockArtFieldset = createAnotherStockArtFieldset;
8370

8471
activate();
@@ -114,8 +101,6 @@
114101
fileObject.mediaType = file.type;
115102
}
116103

117-
118-
119104
// If user picks a new file, replace the that file's fileObject with a new one
120105
// Or add it the list if it's not there
121106
if (vm.submissionsBody.data.files.length) {
@@ -131,31 +116,6 @@
131116
}
132117
}
133118

134-
function selectFont(newFont) {
135-
// See above for explanation
136-
var id = newFont.id - 1;
137-
vm.submissionForm.fonts[id].source = newFont.value;
138-
}
139-
140-
function createAnotherFontFieldset() {
141-
// See above for explanation on why this is done the way it is
142-
var id = vm.submissionForm.fonts.length;
143-
144-
// Create copy of list with new, incremented ID
145-
var newFontList = vm['fontList' + (id + 1)] = angular.copy(vm['fontList' + id]);
146-
147-
newFontList.forEach(function(font) {
148-
font.id++;
149-
});
150-
151-
vm.submissionForm.fonts.push({
152-
id: vm.submissionForm.fonts.length + 1,
153-
source: '',
154-
name: '',
155-
sourceUrl: ''
156-
});
157-
}
158-
159119
function createAnotherStockArtFieldset() {
160120
vm.submissionForm.stockArts.push({
161121
id: vm.submissionForm.stockArts.length + 1,
@@ -191,6 +151,8 @@
191151
});
192152
}
193153

154+
console.log('ABOUT TO SEND: ', vm.submissionsBody);
155+
return;
194156
SubmissionsService.getPresignedURL(vm.submissionsBody, files);
195157
}
196158
}

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -111,9 +111,7 @@
111111

112112
.form-block__fields
113113
.fieldsets
114-
font-submission.fieldset(ng-repeat="font in vm.submissionForm.fonts track by font.id")
115-
116-
button.fieldset__button.tc-btn.tc-btn-s(type="button", ng-click="vm.createAnotherFontFieldset()") + Add Font
114+
tc-form-fonts(form-fonts="vm.formFonts")
117115

118116
.form-block.flex.wrap
119117
.form-block__instructions

‎assets/css/submissions/submit-file.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,12 @@
3838
margin-top: 10px;
3939
}
4040

41+
tc-form-fonts {
42+
.fieldset {
43+
max-width: 500px;
44+
}
45+
}
46+
4147
.Select {
4248
max-width: 300px;
4349
margin-bottom: 20px;

0 commit comments

Comments
 (0)