Skip to content

Commit 9515dea

Browse files
jeffharrelljeffharrell
committed
CSS tweaks for resizing and to test file
1 parent a9ce4c0 commit 9515dea

7 files changed

Lines changed: 179 additions & 96 deletions

File tree

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
node_modules
22
.DS_Store
3-
*.log
3+
*.log
4+
*.orig

‎dist/paypal-button-minicart.js‎

Lines changed: 79 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,33 @@ PAYPAL.apps = PAYPAL.apps || {};
2929
period: 't3',
3030
callback: 'notify_url'
3131
},
32-
buttonImgs = {
33-
buynow: '//www.paypalobjects.com/{locale}/i/btn/btn_buynow_{size}.gif',
34-
cart: '//www.paypalobjects.com/{locale}/i/btn/btn_cart_{size}.gif',
35-
donate: '//www.paypalobjects.com/{locale}/i/btn/btn_donate_{size}.gif',
36-
subscribe: '//www.paypalobjects.com/{locale}/i/btn/btn_subscribe_{size}.gif'
32+
buttonText = {
33+
da_DK: { buynow: 'Køb nu', cart: 'Læg i indkøbsvogn', donate: 'Doner', subscribe: 'Abonner', item_name: 'Vare', number: 'Nummer', amount: 'Pris', quantity: 'Antal' },
34+
de_DE: { buynow: 'Jetzt kaufen', cart: 'In den Warenkorb', donate: 'Spenden', subscribe: 'Abonnieren', item_name: 'Artikel', number: 'Nummer', amount: 'Betrag', quantity: 'Menge' },
35+
en_AU: { buynow: 'Buy Now', cart: 'Add to Cart', donate: 'Donate', subscribe: 'Subscribe', item_name: 'Item', number: 'Number', amount: 'Amount', quantity: 'Quantity' },
36+
en_GB: { buynow: 'Buy Now', cart: 'Add to Cart', donate: 'Donate', subscribe: 'Subscribe', item_name: 'Item', number: 'Number', amount: 'Amount', quantity: 'Quantity' },
37+
en_US: { buynow: 'Buy Now', cart: 'Add to Cart', donate: 'Donate', subscribe: 'Subscribe', item_name: 'Item', number: 'Number', amount: 'Amount', quantity: 'Quantity' },
38+
es_ES: { buynow: 'Comprar ahora', cart: 'Añadir al carro', donate: 'Donar', subscribe: 'Suscribirse', item_name: 'Artículo', number: 'Número', amount: 'Importe', quantity: 'Cantidad' },
39+
es_XC: { buynow: 'Comprar ahora', cart: 'Añadir al carrito', donate: 'Donar', subscribe: 'Suscribirse', item_name: 'Artículo', number: 'Número', amount: 'Importe', quantity: 'Cantidad' },
40+
fr_CA: { buynow: 'Acheter', cart: 'Ajouter au panier', donate: 'Faire un don', subscribe: 'Souscrire', item_name: 'Objet', number: 'Numéro', amount: 'Montant', quantity: 'Quantité' },
41+
fr_FR: { buynow: 'Acheter', cart: 'Ajouter au panier', donate: 'Faire un don', subscribe: 'Souscrire', item_name: 'Objet', number: 'Numéro', amount: 'Montant', quantity: 'Quantité' },
42+
fr_XC: { buynow: 'Acheter', cart: 'Ajouter au panier', donate: 'Faire un don', subscribe: 'Souscrire', item_name: 'Objet', number: 'Numéro', amount: 'Montant', quantity: 'Quantité' },
43+
he_IL: { buynow: 'וישכע הנק', cart: 'תוינקה לסל ףסוה', donate: 'םורת', subscribe: 'יונמכ ףרטצה', item_name: 'טירפ', number: 'רפסמ', amount: 'םוכס', quantity: 'מותכ' },
44+
id_ID: { buynow: 'Beli Sekarang', cart: 'Tambah ke Keranjang', donate: 'Donasikan', subscribe: 'Berlangganan', item_name: 'Barang', number: 'Nomor', amount: 'Harga', quantity: 'Kuantitas' },
45+
it_IT: { buynow: 'Paga adesso', cart: 'Aggiungi al carrello', donate: 'Donazione', subscribe: 'Iscriviti', item_name: 'Oggetto', number: 'Numero', amount: 'Importo', quantity: 'Quantità' },
46+
ja_JP: { buynow: '今すぐ購入', cart: 'カートに追加', donate: '寄付', subscribe: '購読', item_name: '商品', number: '番号', amount: '価格', quantity: '数量' },
47+
nl_NL: { buynow: 'Nu kopen', cart: 'Aan winkelwagentje toevoegen', donate: 'Doneren', subscribe: 'Abonneren', item_name: 'Item', number: 'Nummer', amount: 'Bedrag', quantity: 'Hoeveelheid' },
48+
no_NO: { buynow: 'Kjøp nå', cart: 'Legg til i kurv', donate: 'Doner', subscribe: 'Abonner', item_name: 'Vare', number: 'Nummer', amount: 'Beløp', quantity: 'Antall' },
49+
pl_PL: { buynow: 'Kup teraz', cart: 'Dodaj do koszyka', donate: 'Przekaż darowiznę', subscribe: 'Subskrybuj', item_name: 'Przedmiot', number: 'Numer', amount: 'Kwota', quantity: 'Ilość' },
50+
pt_BR: { buynow: 'Comprar agora', cart: 'Adicionar ao carrinho', donate: 'Doar', subscribe: 'Assinar', item_name: 'Produto', number: 'Número', amount: 'Valor', quantity: 'Quantidade' },
51+
ru_RU: { buynow: 'Купить сейчас', cart: 'Добавить в корзину', donate: 'Пожертвовать', subscribe: 'Подписаться', item_name: 'Товар', number: 'Номер', amount: 'Сумма', quantity: 'Количество' },
52+
sv_SE: { buynow: 'Köp nu', cart: 'Lägg till i kundvagn', donate: 'Donera', subscribe: 'Abonnera', item_name: 'Objekt', number: 'Nummer', amount: 'Belopp', quantity: 'Antal' },
53+
th_TH: { buynow: 'ซื้อทันที', cart: 'เพิ่มลงตะกร้า', donate: 'บริจาค', subscribe: 'บอกรับสมาชิก', item_name: 'ชื่อสินค้า', number: 'รหัสสินค้า', amount: 'ราคา', quantity: 'จำนวน' },
54+
tr_TR: { buynow: 'Hemen Alın', cart: 'Sepete Ekleyin', donate: 'Bağış Yapın', subscribe: 'Abone Olun', item_name: 'Ürün', number: 'Numara', amount: 'Tutar', quantity: 'Miktar' },
55+
zh_CN: { buynow: '立即购买', cart: '添加到购物车', donate: '捐赠', subscribe: '租用', item_name: '物品', number: '编号', amount: '金额', quantity: '数量' },
56+
zh_HK: { buynow: '立即買', cart: '加入購物車', donate: '捐款', subscribe: '訂用', item_name: '項目', number: '號碼', amount: '金額', quantity: '數量' },
57+
zh_TW: { buynow: '立即購', cart: '加到購物車', donate: '捐款', subscribe: '訂閱', item_name: '商品', number: '商品編號', amount: '單價', quantity: '數量' },
58+
zh_XC: { buynow: '立即购买', cart: '添加到购物车', donate: '捐赠', subscribe: '租用', item_name: '物品', number: '编号', amount: '金额', quantity: '数量' }
3759
};
3860

3961
if (!PAYPAL.apps.ButtonFactory) {
@@ -42,12 +64,7 @@ PAYPAL.apps = PAYPAL.apps || {};
4264
* Initial config for the app. These values can be overridden by the page.
4365
*/
4466
app.config = {
45-
labels: {
46-
item_name: 'Item',
47-
item_number: 'Number',
48-
amount: 'Amount',
49-
quantity: 'Quantity'
50-
}
67+
labels: {}
5168
};
5269

5370
/**
@@ -116,6 +133,9 @@ PAYPAL.apps = PAYPAL.apps || {};
116133
button = buildForm(data, type);
117134
}
118135

136+
// Inject CSS
137+
injectCSS();
138+
119139
// Register it
120140
this.buttons[type] += 1;
121141

@@ -141,18 +161,22 @@ PAYPAL.apps = PAYPAL.apps || {};
141161
*/
142162
function buildForm(data, type) {
143163
var form = document.createElement('form'),
144-
btn = document.createElement('input'),
164+
btn = document.createElement('button'),
145165
hidden = document.createElement('input'),
146166
items = data.items,
147-
item, child, label, input, key, size, locale;
167+
item, child, label, input, key, size, locale, localeText;
148168

149-
btn.type = 'image';
150-
hidden.type = 'hidden';
151169
form.method = 'post';
152170
form.action = paypalURL;
153171
form.className = 'paypal-button';
154172
form.target = '_top';
155173

174+
hidden.type = 'hidden';
175+
176+
size = items.size && items.size.value || 'large';
177+
locale = items.lc && items.lc.value || 'en_US';
178+
localeText = buttonText[locale] || buttonText.en_US;
179+
156180
for (key in items) {
157181
item = items[key];
158182

@@ -165,7 +189,7 @@ PAYPAL.apps = PAYPAL.apps || {};
165189

166190
label = document.createElement('label');
167191
label.className = 'paypal-label';
168-
label.appendChild(document.createTextNode(app.config.labels[item.key] + ' ' || ''));
192+
label.appendChild(document.createTextNode(app.config.labels[item.key] || localeText[item.key]));
169193
label.appendChild(input);
170194

171195
child = document.createElement('p');
@@ -180,11 +204,11 @@ PAYPAL.apps = PAYPAL.apps || {};
180204
form.appendChild(child);
181205
}
182206

183-
size = items.size && items.size.value;
184-
locale = items.lc && items.lc.value;
207+
btn.type = 'submit';
208+
btn.className = 'paypal-button ' + size;
209+
btn.appendChild(document.createTextNode(localeText[type]));
185210

186211
form.appendChild(btn);
187-
btn.src = getButtonImg(type, size, locale);
188212

189213
// If the Mini Cart is present then register the form
190214
if (PAYPAL.apps.MiniCart && data.items.cmd.value === '_cart') {
@@ -200,6 +224,42 @@ PAYPAL.apps = PAYPAL.apps || {};
200224
return form;
201225
}
202226

227+
/**
228+
* Injects button CSS in the <head>
229+
*
230+
* @return {void}
231+
*/
232+
function injectCSS() {
233+
var css, styleEl, paypalButton, paypalInput;
234+
235+
if (document.getElementById('paypal-button')) {
236+
return;
237+
}
238+
239+
css = '';
240+
styleEl = document.createElement('style');
241+
paypalButton = '.paypal-button';
242+
paypalInput = paypalButton + ' button[type=submit]';
243+
244+
css += paypalButton + ' { white-space: nowrap; }';
245+
css += paypalInput + ' { white-space: nowrap; overflow: hidden; border-radius: 13px; font-family: "Arial", bold, italic; font-weight: bold; font-style: italic; border: 1px solid #ffa823; color: #0E3168; background: transparent; position: relative; text-shadow: 0 1px 0 rgba(255,255,255,.5); cursor: pointer; }';
246+
css += paypalInput + ':before { content: " "; position: absolute; width: 100%; height: 100%; border-radius: 11px; top: 0; left: 0; background: #ffa823; background: -webkit-linear-gradient(top, #FFAA00 0%,#FFAA00 80%,#FFF8FC 100%); background: -moz-linear-gradient(top, #FFAA00 0%,#FFAA00 80%,#FFF8FC 100%); background: -ms-linear-gradient(top, #FFAA00 0%,#FFAA00 80%,#FFF8FC 100%); background: linear-gradient(top, #FFAA00 0%,#FFAA00 80%,#FFF8FC 100%); z-index: -2; }';
247+
css += paypalInput + ':after { content: " "; position: absolute; width: 98%; height: 60%; border-radius: 40px 40px 38px 38px; top: 0; left: 0; background: -webkit-linear-gradient(top, #fefefe 0%, #fed994 100%); background: -moz-linear-gradient(top, #fefefe 0%, #fed994 100%); background: -ms-linear-gradient(top, #fefefe 0%, #fed994 100%); background: linear-gradient(top, #fefefe 0%, #fed994 100%); z-index: -1; -webkit-transform: translateX(1%);-moz-transform: translateX(1%); -ms-transform: translateX(1%); transform: translateX(1%); }';
248+
css += paypalInput + '.small { padding: 3px 15px; font-size: 12px; }';
249+
css += paypalInput + '.large { padding: 4px 19px; font-size: 14px; }';
250+
251+
styleEl.type = 'text/css';
252+
styleEl.id = 'paypal-button';
253+
254+
if (styleEl.styleSheet) {
255+
styleEl.styleSheet.cssText = css;
256+
} else {
257+
styleEl.appendChild(document.createTextNode(css));
258+
}
259+
260+
document.getElementsByTagName('head')[0].appendChild(styleEl);
261+
}
262+
203263

204264
/**
205265
* Builds the image for a QR code
@@ -230,25 +290,6 @@ PAYPAL.apps = PAYPAL.apps || {};
230290
}
231291

232292

233-
/**
234-
* Utility function to return the rendered button image URL
235-
*
236-
* @param type {String} The type of button to render
237-
* @param size {String} The size of button (small/large)
238-
* @param locale {String} The locale
239-
* @return {String}
240-
*/
241-
function getButtonImg(type, size, locale) {
242-
var img = buttonImgs[type] || buttonImgs.buynow;
243-
244-
// Image defaults
245-
locale = locale || 'en_US';
246-
size = (size === 'small') ? 'SM' : 'LG';
247-
248-
return img.replace(/\{locale\}/, locale).replace(/\{size\}/, size);
249-
}
250-
251-
252293
/**
253294
* Utility function to polyfill dataset functionality with a bit of a spin
254295
*

0 commit comments

Comments
 (0)