Skip to content

Commit d1a14fb

Browse files
author
Jeff Harrell
committed
Initial, and broken, pass at templates
1 parent d2e5157 commit d1a14fb

File tree

8 files changed

+1880
-214
lines changed

8 files changed

+1880
-214
lines changed

‎dist/all.js‎

Lines changed: 1746 additions & 108 deletions
Large diffs are not rendered by default.

‎src/button.js‎

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,31 @@
11
'use strict';
22

33

4-
var constants = require('./constants'),
5-
css = require('./util/css');
4+
var template = require('./util/template'),
5+
constants = require('./constants'),
6+
css = require('./util/css'),
7+
hasCss = false;
68

79

810
module.exports = function Button(label, data, config) {
9-
var locale = data.get('lc') || 'en_US',
10-
btn = document.createElement('button'),
11-
btnLogo = document.createElement('span'),
12-
btnContent = document.createElement('span');
11+
var model, locale, style;
1312

14-
// Defaults
1513
config = config || {};
16-
config.style = config.style || constants.DEFAULT_STYLE;
17-
config.size = config.size || constants.DEFAULT_SIZE;
18-
19-
btn.className += 'paypal-button ' + config.style + ' ' + config.size;
20-
21-
btnLogo.className = 'paypal-button-logo';
22-
btnLogo.innerHTML = '<img src="' + constants.LOGO + '" />';
23-
24-
btnContent.className = 'paypal-button-content';
25-
btnContent.innerHTML = constants.STRINGS[locale][label].replace('{wordmark}', '<img src="' + constants.WORDMARK[config.style] + '" alt="PayPal" />');
26-
27-
btn.appendChild(btnLogo);
28-
btn.appendChild(btnContent);
29-
30-
css.inject(document.getElementsByTagName('head')[0], constants.STYLES);
31-
32-
return btn;
14+
locale = data.get('lc') || constants.DEFAULT_LOCALE;
15+
style = config.style || constants.DEFAULT_STYLE;
16+
17+
model = {
18+
style: style,
19+
size: config.size || constants.DEFAULT_SIZE,
20+
logo: constants.LOGO,
21+
wordmark: constants.WORDMARK[style],
22+
label: constants.STRINGS[locale][label]
23+
};
24+
25+
if (!hasCss) {
26+
hasCss = true;
27+
css.inject(document.getElementsByTagName('head')[0], constants.STYLES);
28+
}
29+
30+
return template(constants.TEMPLATE.button, model);
3331
};

‎src/constants.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,12 @@ module.exports = {
3434

3535
DEFAULT_STYLE: 'primary',
3636

37+
DEFAULT_LOCALE: 'en_US',
38+
3739
DEFAULT_ENV: 'www',
3840

41+
TEMPLATES: $TEMPLATES$,
42+
3943
STRINGS: $STRINGS$,
4044

4145
STYLES: '$STYLES$',

‎src/factory.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,6 @@ module.exports = function factory(business, raw, config) {
7474
return {
7575
label: label,
7676
type: type,
77-
el: el
77+
el: document.createElement('div').innerHTML = el
7878
};
7979
};

‎src/form.js‎

Lines changed: 75 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -2,66 +2,67 @@
22

33

44
var constants = require('./constants'),
5-
Button = require('./button');
5+
template = require('./util/template'),
6+
Button = require('./button');
67

78

89
module.exports = function Form(type, data, config) {
9-
var form = document.createElement('form'),
10-
hidden = document.createElement('input'),
11-
paraElem = document.createElement('p'),
12-
labelElem = document.createElement('label'),
13-
inputTextElem = document.createElement('input'),
14-
selectElem = document.createElement('select'),
15-
optionElem = document.createElement('option'),
16-
items = data.items,
17-
optionFieldArr = [],
18-
item, child, label, input, key, selector, optionField, fieldDetails = {}, fieldDetail, fieldValue, field, labelText, btn;
19-
20-
// Defaults
21-
config = config || {};
22-
config.host = config.host || constants.DEFAULT_HOST;
23-
24-
form.method = 'post';
25-
form.action = constants.PAYPAL_URL.replace('{host}', config.host);
26-
form.className = 'paypal-button-widget';
27-
form.target = '_top';
28-
29-
inputTextElem.type = 'text';
30-
inputTextElem.className = 'paypal-input';
31-
paraElem.className = 'paypal-group';
32-
labelElem.className = 'paypal-label';
33-
selectElem.className = 'paypal-select';
34-
35-
hidden.type = 'hidden';
36-
37-
for (key in items) {
38-
item = items[key];
39-
40-
41-
if (item.hasOptions) {
42-
optionFieldArr.push(item);
43-
} else if (item.isEditable) {
44-
input = inputTextElem.cloneNode(true);
45-
input.name = item.key;
46-
input.value = item.value;
47-
48-
label = labelElem.cloneNode(true);
49-
// FIXME: This needs to resolve to user strings
50-
labelText = item.key;
51-
label.htmlFor = item.key;
52-
label.appendChild(document.createTextNode(labelText));
53-
label.appendChild(input);
54-
55-
child = paraElem.cloneNode(true);
56-
child.appendChild(label);
57-
form.appendChild(child);
58-
} else {
59-
input = child = hidden.cloneNode(true);
60-
input.name = item.key;
61-
input.value = item.value;
62-
form.appendChild(child);
63-
}
64-
}
10+
// var form = document.createElement('form'),
11+
// hidden = document.createElement('input'),
12+
// paraElem = document.createElement('p'),
13+
// labelElem = document.createElement('label'),
14+
// inputTextElem = document.createElement('input'),
15+
// selectElem = document.createElement('select'),
16+
// optionElem = document.createElement('option'),
17+
// items = data.items,
18+
// optionFieldArr = [],
19+
// item, child, label, input, key, selector, optionField, fieldDetails = {}, fieldDetail, fieldValue, field, labelText, btn;
20+
21+
// // Defaults
22+
// config = config || {};
23+
// config.host = config.host || constants.DEFAULT_HOST;
24+
25+
// form.method = 'post';
26+
// form.action = constants.PAYPAL_URL.replace('{host}', config.host);
27+
// form.className = 'paypal-button-widget';
28+
// form.target = '_top';
29+
30+
// inputTextElem.type = 'text';
31+
// inputTextElem.className = 'paypal-input';
32+
// paraElem.className = 'paypal-group';
33+
// labelElem.className = 'paypal-label';
34+
// selectElem.className = 'paypal-select';
35+
36+
// hidden.type = 'hidden';
37+
38+
// for (key in items) {
39+
// item = items[key];
40+
41+
42+
// if (item.hasOptions) {
43+
// optionFieldArr.push(item);
44+
// } else if (item.isEditable) {
45+
// input = inputTextElem.cloneNode(true);
46+
// input.name = item.key;
47+
// input.value = item.value;
48+
49+
// label = labelElem.cloneNode(true);
50+
// // FIXME: This needs to resolve to user strings
51+
// labelText = item.key;
52+
// label.htmlFor = item.key;
53+
// label.appendChild(document.createTextNode(labelText));
54+
// label.appendChild(input);
55+
56+
// child = paraElem.cloneNode(true);
57+
// child.appendChild(label);
58+
// form.appendChild(child);
59+
// } else {
60+
// input = child = hidden.cloneNode(true);
61+
// input.name = item.key;
62+
// input.value = item.value;
63+
// form.appendChild(child);
64+
// }
65+
// }
6566

6667
// optionFieldArr = sortOptionFields(optionFieldArr);
6768

@@ -128,34 +129,28 @@ module.exports = function Form(type, data, config) {
128129
// form.appendChild(child);
129130
// }
130131
// }
131-
132-
btn = new Button(type, data, config);
133-
134-
// Safari won't let you set read-only attributes on buttons.
135-
try {
136-
btn.type = 'submit';
137-
} catch (e) {
138-
btn.setAttribute('type', 'submit');
139-
}
140-
141-
// Add the correct button
142-
form.appendChild(btn);
143-
144-
return form;
132+
133+
var model = {
134+
data: data.items,
135+
button: new Button(type, data, config),
136+
url: constants.PAYPAL_URL.replace('{host}', config.host || constants.DEFAULT_HOST)
137+
};
138+
139+
return template(constants.TEMPLATE.form, model);
145140
};
146141

147142

148143

149-
/**
150-
* Sort Optional Fields by display order
151-
*/
152-
function sortOptionFields(optionFieldArr) {
153-
optionFieldArr.sort(function (a, b) {
154-
return a.displayOrder - b.displayOrder;
155-
});
144+
// /**
145+
// * Sort Optional Fields by display order
146+
// */
147+
// function sortOptionFields(optionFieldArr) {
148+
// optionFieldArr.sort(function (a, b) {
149+
// return a.displayOrder - b.displayOrder;
150+
// });
156151

157-
return optionFieldArr;
158-
}
152+
// return optionFieldArr;
153+
// }
159154

160155

161156

‎src/theme/button.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<button class="paypal-button <%= style %> <%= size %>" type="submit">
2+
<span class="paypal-button-logo">
3+
<img src="<%= logo %>" />
4+
</span>
5+
<span class="paypal-button-content">
6+
<img src="<%= wordmark %>" alt="PayPal" />
7+
</span>
8+
</button>

‎src/theme/form.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<form method="post" action="<%= url %>" class="paypal-button-widget" target="_top">
2+
<% for (var key in data) { %>
3+
<input type="hidden" name="<%= key %>" value="<%= data[key] %>" />
4+
<% } %>
5+
6+
<%= button %>
7+
</form>

‎tasks/themify.js‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,24 @@ module.exports = function (grunt) {
2121
logo: '$LOGO$',
2222
primary: '$WORDMARK_PRIMARY$',
2323
secondary: '$WORDMARK_SECONDARY$',
24-
strings: '$STRINGS$'
24+
strings: '$STRINGS$',
25+
templates: '$TEMPLATES$'
2526
};
2627

28+
function processTemplates(str) {
29+
var files = grunt.file.expand('src/theme/**/*.html'),
30+
templates = {},
31+
name;
32+
33+
files.forEach(function (file) {
34+
name = file.split(/src\/theme\/(.*).html/);
35+
name = name[1];
36+
37+
templates[name] = trim(grunt.file.read(file));
38+
});
39+
40+
return str.replace(tokens.templates, JSON.stringify(templates));
41+
}
2742

2843
function processCss(str) {
2944
var styles = trim(grunt.file.read('src/theme/css/index.css'));
@@ -75,6 +90,7 @@ module.exports = function (grunt) {
7590
grunt.registerTask('themify', 'Bundles the theme files into the JavaScript.', function () {
7691
var out = grunt.file.read(src);
7792

93+
out = processTemplates(out);
7894
out = processCss(out);
7995
out = processImages(out);
8096
out = processContent(out);

0 commit comments

Comments
 (0)