woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-06 12:25:15 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

Adjustments to apm button layouts.

Browse source
This commit is contained in:
Pedro Silva 2023-12-11 17:14:43 +00:00
parent 55c7900a3e
commit ec0dd5221d
No known key found for this signature in database
GPG key ID: E2EE20C0669D24B3
11 changed files with 159 additions and 174 deletions
Download patch file Download diff file Expand all files Collapse all files

5
modules/ppcp-button/resources/css/gateway.scss
View file

@ -23,6 +23,11 @@
line-height: 0;
}
#ppc-button-minicart {
line-height: 0;
display: block;
}
.ppcp-button-apm {
@include apm-button.button;
}

26
modules/ppcp-button/resources/css/mixins/apm-button.scss
View file

@ -1,8 +1,22 @@
@mixin button {
min-width: 200px;
overflow: hidden;
min-width: 0;
max-width: 750px;
line-height: 0;
border-radius: 4px;
// Defaults
height: 45px;
margin-top: 14px;
&.ppcp-button-pill {
border-radius: 50px;
}
&.ppcp-button-minicart {
display: block;
}
.ppcp-width-min & {
height: 35px;
@ -15,4 +29,14 @@
.ppcp-width-500 & {
height: 55px;
}
// No margin on block layout.
.wp-block-woocommerce-checkout &, .wp-block-woocommerce-cart & {
margin: 0;
min-width: 0;
}
.wp-admin & {
pointer-events: none;
}
}

83
modules/ppcp-button/resources/js/modules/Helper/ApmButton.js
View file

@ -1,83 +0,0 @@
export const apmButtonInit = (selector = '.ppcp-button-apm') => {
if (window.apmButton) {
return;
}
window.apmButton = new ApmButton(selector);
}
export class ApmButton {
constructor(selector) {
this.selector = selector;
this.containers = [];
jQuery(window).resize(() => {
this.refresh();
}).resize();
// TODO: detect changes don't rely on setInterval
setInterval(() => {
jQuery(selector).each((index, el) => {
const parent = jQuery(el).parent();
if (!this.containers.some($el => $el.is(parent))) {
this.containers.push(parent);
}
});
this.refresh();
}, 100);
}
refresh() {
for (const container of this.containers) {
const containerClasses = [];
const $container = jQuery(container);
// Check width and add classes
const width = $container.width();
if (width >= 500) {
containerClasses.push('ppcp-width-500');
} else if (width >= 300) {
containerClasses.push('ppcp-width-300');
} else {
containerClasses.push('ppcp-width-min');
}
$container.removeClass('ppcp-width-500 ppcp-width-300 ppcp-width-min');
$container.addClass(containerClasses.join(' '));
// Check first apm button
const $firstApmButton = $container.find(this.selector + ':visible').first();
const $firstElement = $container.children(':visible').first();
let $spacingTopButton = null;
if (!$firstApmButton.is($firstElement)) {
$spacingTopButton = $firstApmButton;
}
// Check last apm button
const $lastApmButton = $container.find(this.selector + ':visible').last();
// Assign margins to buttons
$container.find(this.selector).each((index, el) => {
const $el = jQuery(el);
const height = $el.height();
if ($el.is($spacingTopButton)) {
$el.css('margin-top', `${Math.round(height * 0.3)}px`);
}
if ($el.is($lastApmButton)) {
$el.css('margin-bottom', `0px`);
return true;
}
$el.css('margin-bottom', `${Math.round(height * 0.3)}px`);
});
}
}
}

100
modules/ppcp-button/resources/js/modules/Helper/ApmButtons.js Normal file
View file

@ -0,0 +1,100 @@
export const apmButtonsInit = (selector = '.ppcp-button-apm') => {
if (window.ppcpApmButtons) {
return;
}
window.ppcpApmButtons = new ApmButtons(selector);
}
export class ApmButtons {
constructor(selector) {
this.selector = selector;
this.containers = [];
// Reloads button containers.
this.reloadContainers();
// Refresh button layout.
jQuery(window).resize(() => {
this.refresh();
}).resize();
// Observes for new buttons.
(new MutationObserver(this.observeElementsCallback.bind(this)))
.observe(document.body, { childList: true, subtree: true });
}
observeElementsCallback(mutationsList, observer) {
const observeSelector = this.selector + ', .widget_shopping_cart, .widget_shopping_cart_content';
let shouldReload = false;
for (let mutation of mutationsList) {
if (mutation.type === 'childList') {
mutation.addedNodes.forEach(node => {
if (node.matches && node.matches(observeSelector)) {
shouldReload = true;
}
});
}
}
if (shouldReload) {
this.reloadContainers();
this.refresh();
}
};
reloadContainers() {
jQuery(this.selector).each((index, el) => {
const parent = jQuery(el).parent();
if (!this.containers.some($el => $el.is(parent))) {
this.containers.push(parent);
}
});
console.log('this.containers', this.containers);
}
refresh() {
for (const container of this.containers) {
const $container = jQuery(container);
// Check width and add classes
const width = $container.width();
$container.removeClass('ppcp-width-500 ppcp-width-300 ppcp-width-min');
if (width >= 500) {
$container.addClass('ppcp-width-500');
} else if (width >= 300) {
$container.addClass('ppcp-width-300');
} else {
$container.addClass('ppcp-width-min');
}
// Check first apm button
const $firstApmButton = $container.find(this.selector + ':visible').first();
const $firstElement = $container.children(':visible').first();
let isFirstElement = false;
if ($firstApmButton.is($firstElement)) {
isFirstElement = true;
}
// Assign margins to buttons
$container.find(this.selector).each((index, el) => {
const $el = jQuery(el);
const height = $el.height();
if (isFirstElement) {
$el.css('margin-top', `0px`);
return true;
}
$el.css('margin-top', `${Math.round(height * 0.3)}px`);
});
}
}
}