diff --git a/modules/conversion-center/assets/js/frontend/handlers/contact-buttons.js b/modules/conversion-center/assets/js/frontend/handlers/contact-buttons.js index a5de4a9755eb..3d135e94abbd 100644 --- a/modules/conversion-center/assets/js/frontend/handlers/contact-buttons.js +++ b/modules/conversion-center/assets/js/frontend/handlers/contact-buttons.js @@ -63,6 +63,7 @@ export default class ContactButtonsHandler extends Base { if ( this.elements.contentWrapper ) { this.elements.contentWrapper.addEventListener( 'click', this.onChatButtonTrackClick.bind( this ) ); + window.addEventListener( 'keyup', this.onDocumentKeyup.bind( this ) ); } window.addEventListener( 'beforeunload', () => { @@ -72,6 +73,46 @@ export default class ContactButtonsHandler extends Base { } ); } + contentWrapperIsHidden( hide ) { + if ( ! this.elements.contentWrapper ) { + return false; + } + + const { hidden } = this.getSettings( 'constants' ); + + // Set current state + if ( true === hide ) { + this.elements.contentWrapper.classList.add( hidden ); + this.elements.contentWrapper.setAttribute( 'aria-hidden', 'true' ); + return; + } + + if ( false === hide ) { + this.elements.contentWrapper.classList.remove( hidden ); + this.elements.contentWrapper.setAttribute( 'aria-hidden', 'false' ); + return; + } + + // Get current state + return this.elements.contentWrapper.classList.contains( hidden ); + } + + onDocumentKeyup( event ) { + // Bail if not ESC key + if ( event.keyCode !== 27 || ! this.elements.main ) { + return; + } + + /* eslint-disable @wordpress/no-global-active-element */ + if ( + ! this.contentWrapperIsHidden() && + this.elements.main.contains( document.activeElement ) + ) { + this.closeChatBox(); + } + /* eslint-enable @wordpress/no-global-active-element */ + } + onChatButtonTrackClick( event ) { const targetElement = event.target || event.srcElement; const selectors = this.getSettings( 'selectors' ); @@ -182,7 +223,7 @@ export default class ContactButtonsHandler extends Base { } openChatBox() { - const { hasAnimations, visible, hidden } = this.getSettings( 'constants' ); + const { hasAnimations, visible } = this.getSettings( 'constants' ); if ( this.elements.main && this.elements.main.classList.contains( hasAnimations ) ) { this.chatBoxEntranceAnimation(); @@ -191,11 +232,13 @@ export default class ContactButtonsHandler extends Base { } if ( this.elements.contentWrapper ) { - this.elements.contentWrapper.classList.remove( hidden ); + this.contentWrapperIsHidden( false ); + this.elements.contentWrapper.setAttribute( 'tabindex', '0' ); + this.elements.contentWrapper.focus( { focusVisible: true } ); } if ( this.elements.chatButton ) { - this.elements.chatButton.setAttribute( 'aria-expanded', 'false' ); + this.elements.chatButton.setAttribute( 'aria-expanded', 'true' ); } if ( this.elements.closeButton ) { @@ -204,7 +247,7 @@ export default class ContactButtonsHandler extends Base { } closeChatBox() { - const { hasAnimations, visible, hidden } = this.getSettings( 'constants' ); + const { hasAnimations, visible } = this.getSettings( 'constants' ); if ( this.elements.main && this.elements.main.classList.contains( hasAnimations ) ) { this.chatBoxExitAnimation(); @@ -213,11 +256,12 @@ export default class ContactButtonsHandler extends Base { } if ( this.elements.contentWrapper ) { - this.elements.contentWrapper.classList.add( hidden ); + this.contentWrapperIsHidden( true ); } if ( this.elements.chatButton ) { - this.elements.chatButton.setAttribute( 'aria-expanded', 'true' ); + this.elements.chatButton.setAttribute( 'aria-expanded', 'false' ); + this.elements.chatButton.focus( { focusVisible: true } ); } if ( this.elements.closeButton ) { @@ -226,9 +270,7 @@ export default class ContactButtonsHandler extends Base { } onChatButtonClick() { - const { hidden } = this.getSettings( 'constants' ); - - if ( this.elements.contentWrapper && this.elements.contentWrapper.classList.contains( hidden ) ) { + if ( this.elements.contentWrapper && this.contentWrapperIsHidden() ) { this.openChatBox(); } else { this.closeChatBox(); @@ -274,6 +316,33 @@ export default class ContactButtonsHandler extends Base { } initDefaultState() { + // Manage accessibility + if ( this.elements.contentWrapper ) { + const randomishId = String( + Date.now().toString( 32 ) + + Math.random().toString( 16 ), + ).replace( /\./g, '' ); + + const wrapperID = this.elements.contentWrapper.id + ? this.elements.contentWrapper.id + : `e-contact-buttons__content-wrapper-${ randomishId }`; + + const isHidden = this.contentWrapperIsHidden(); + + this.elements.contentWrapper.setAttribute( 'id', wrapperID ); + + if ( this.elements.chatButton ) { + this.elements.chatButton.setAttribute( 'aria-expanded', ! isHidden ); + this.elements.chatButton.setAttribute( 'aria-controls', wrapperID ); + } + + if ( this.elements.closeButton ) { + this.elements.closeButton.setAttribute( 'aria-expanded', ! isHidden ); + this.elements.closeButton.setAttribute( 'aria-controls', wrapperID ); + } + } + + // Default to open in Editor if ( elementorFrontend.isEditMode() ) { this.openChatBox(); } @@ -290,8 +359,10 @@ export default class ContactButtonsHandler extends Base { this.initDefaultState(); - if ( this.elements.chatButton.classList.contains( hasEntranceAnimation ) ) { - this.initChatButtonEntranceAnimation(); + if ( this.elements.chatButton ) { + if ( this.elements.chatButton.classList.contains( hasEntranceAnimation ) ) { + this.initChatButtonEntranceAnimation(); + } } } } diff --git a/modules/conversion-center/assets/scss/frontend.scss b/modules/conversion-center/assets/scss/frontend.scss index 368788ed5971..c8fa2c65bca9 100644 --- a/modules/conversion-center/assets/scss/frontend.scss +++ b/modules/conversion-center/assets/scss/frontend.scss @@ -13,3 +13,5 @@ @import "widgets/contact-buttons-var-6"; @import "widgets/contact-buttons-var-7"; @import "widgets/contact-buttons-var-8"; +@import "widgets/contact-buttons-var-9"; +@import "widgets/contact-buttons-var-10"; diff --git a/modules/conversion-center/assets/scss/widgets/contact-buttons-var-10.scss b/modules/conversion-center/assets/scss/widgets/contact-buttons-var-10.scss new file mode 100644 index 000000000000..2236264325f3 --- /dev/null +++ b/modules/conversion-center/assets/scss/widgets/contact-buttons-var-10.scss @@ -0,0 +1,267 @@ +.e-contact-buttons-var-10 { + --e-contact-buttons-size-small: 40px; + --e-contact-buttons-size-medium: 48px; + --e-contact-buttons-size-large: 56px; + --e-contact-buttons-svg-size-small: 20px; + --e-contact-buttons-svg-size-medium: 24px; + --e-contact-buttons-svg-size-large: 28px; + --e-contact-buttons-svg-size: var(var(--e-contact-buttons-svg-size-medium)); + --e-contact-buttons-horizontal-offset: 0; + --e-contact-buttons-transition-duration: .3s; + --e-contact-buttons-transition: all var(--e-contact-buttons-transition-duration); + + width: auto; + + .has-corners-rounded { + --e-contact-buttons-border-radius: #{$contact-buttons-border-radius-rounded}; + } + + .has-corners-round { + --e-contact-buttons-border-radius: #{$contact-buttons-border-radius-round}; + } + + .has-corners-sharp { + --e-contact-buttons-border-radius: #{$contact-buttons-border-radius-sharp}; + } + + .has-size-small { + --e-contact-buttons-svg-size: var(--e-contact-buttons-svg-size-small); + } + + .has-size-medium { + --e-contact-buttons-svg-size: var(--e-contact-buttons-svg-size-medium); + } + + .has-size-large { + --e-contact-buttons-svg-size: var(--e-contact-buttons-svg-size-large); + } + + .e-contact-buttons { + + &__contact-links { + display: flex; + gap: var(--e-contact-buttons-contact-gap); + } + + &__contact-icon-container { + align-items: center; + display: inline-flex; + justify-content: center; + + svg { + height: var(--e-contact-buttons-svg-size); + width: var(--e-contact-buttons-svg-size); + } + } + + &__contact-icon-link { + align-items: center; + background-color: var(--e-contact-buttons-contact-button-bg); + color: var(--e-contact-buttons-contact-button-icon); + display: flex; + gap: 8px; + padding-block-end: var(--e-contact-buttons-contact-padding-block-end); + padding-block-start: var(--e-contact-buttons-contact-padding-block-start); + padding-inline-end: var(--e-contact-buttons-contact-padding-inline-end); + padding-inline-start: var(--e-contact-buttons-contact-padding-inline-start); + transition: $transition-hover; + + svg { + fill: var(--e-contact-buttons-contact-button-icon); + } + + &:hover, + &:focus { + background-color: var(--e-contact-buttons-contact-button-bg); + color: var(--e-contact-buttons-contact-button-icon); + transition: $transition-hover; + + svg { + fill: var(--e-contact-buttons-contact-button-icon); + } + } + } + } + + &.has-h-alignment-start { + + .e-contact-buttons__contact-icon-link { + --e-contact-buttons-margin-offset: 8px; + + justify-content: flex-end; + transform: translateX(calc(-100% + calc(var(--e-contact-buttons-svg-size) * 2) - var(--e-contact-buttons-margin-offset))); + transition: var(--e-contact-buttons-transition); + + &.has-size-small { + --e-contact-buttons-margin-offset: 2px; + } + } + + .e-contact-buttons__contact-links { + align-items: flex-start; + flex-direction: column; + } + + .e-contact-buttons__contact-icon-link { + border-start-start-radius: 0; + border-start-end-radius: var(--e-contact-buttons-border-radius); + border-end-start-radius: 0; + border-end-end-radius: var(--e-contact-buttons-border-radius); + + &:hover, + &:focus { + + @media (min-width: $screen-tablet-min) { + transform: none; + transition: var(--e-contact-buttons-transition); + } + } + + &.active { + transform: none; + transition: var(--e-contact-buttons-transition); + } + } + } + + &.has-h-alignment-end { + + .e-contact-buttons__contact-icon-link { + --e-contact-buttons-margin-offset: 8px; + + transform: translateX(calc(100% - calc(var(--e-contact-buttons-svg-size) * 2) + var(--e-contact-buttons-margin-offset))); + transition: var(--e-contact-buttons-transition); + + &:hover, + &:focus { + + @media (min-width: $screen-tablet-min) { + transform: none; + transition: var(--e-contact-buttons-transition); + } + } + + &.active { + transform: none; + transition: var(--e-contact-buttons-transition); + } + + &.has-size-small { + --e-contact-buttons-margin-offset: 2px; + } + } + + .e-contact-buttons__contact-links { + align-items: flex-end; + flex-direction: column; + } + + .e-contact-buttons__contact-icon-container { + order: 1; + } + + .e-contact-buttons__contact-title { + order: 2; + } + + .e-contact-buttons__contact-icon-link { + border-start-start-radius: var(--e-contact-buttons-border-radius); + border-start-end-radius: 0; + border-end-start-radius: var(--e-contact-buttons-border-radius); + border-end-end-radius: 0; + } + } + + &.has-h-alignment-center { + + .e-contact-buttons__contact-icon-link { + flex-direction: column; + } + + .e-contact-buttons__contact-title { + writing-mode: vertical-lr; + } + } + + &.has-h-alignment-center.has-v-alignment-bottom { + + .e-contact-buttons__contact-links { + align-items: flex-end; + } + + .e-contact-buttons__contact-icon-container { + order: 1; + } + + .e-contact-buttons__contact-title { + order: 2; + } + + .e-contact-buttons__contact-icon-link { + --e-contact-buttons-margin-offset: 14px; + + border-start-start-radius: var(--e-contact-buttons-border-radius); + border-start-end-radius: var(--e-contact-buttons-border-radius); + border-end-start-radius: 0; + border-end-end-radius: 0; + + transform: translateY(calc(100% - var(--e-contact-buttons-svg-size) * 2 + var(--e-contact-buttons-margin-offset))); + transition: var(--e-contact-buttons-transition); + + &:hover, + &:focus { + + @media (min-width: $screen-tablet-min) { + transform: none; + transition: var(--e-contact-buttons-transition); + } + } + + &.active { + transform: none; + transition: var(--e-contact-buttons-transition); + } + + &.has-size-small { + --e-contact-buttons-margin-offset: 5px; + } + } + } + + &.has-h-alignment-center.has-v-alignment-top { + + .e-contact-buttons__contact-links { + align-items: flex-start; + } + + .e-contact-buttons__contact-icon-container { + align-items: flex-end; + } + + .e-contact-buttons__contact-icon-link { + --e-contact-buttons-margin-offset: 14px; + + border-start-start-radius: 0; + border-start-end-radius: 0; + border-end-start-radius: var(--e-contact-buttons-border-radius); + border-end-end-radius: var(--e-contact-buttons-border-radius); + justify-content: flex-end; + transform: translateY(calc(-100% + var(--e-contact-buttons-svg-size) + var(--e-contact-buttons-margin-offset))); + transition: var(--e-contact-buttons-transition); + + &:hover, + &:focus { + + @media (min-width: $screen-tablet-min) { + transform: none; + transition: var(--e-contact-buttons-transition); + } + } + + &.active { + transform: none; + transition: var(--e-contact-buttons-transition); + } + } + } +} \ No newline at end of file diff --git a/modules/conversion-center/assets/scss/widgets/contact-buttons-var-3.scss b/modules/conversion-center/assets/scss/widgets/contact-buttons-var-3.scss index fcfa44dc21a4..3ac7a25292e8 100644 --- a/modules/conversion-center/assets/scss/widgets/contact-buttons-var-3.scss +++ b/modules/conversion-center/assets/scss/widgets/contact-buttons-var-3.scss @@ -48,7 +48,7 @@ &__chat-button { - &[aria-expanded="false"] { + &[aria-expanded="true"] { background-color: var(--e-contact-buttons-active-button-bg); svg { @@ -63,27 +63,27 @@ &.has-size-small { height: var(--e-contact-buttons-size-small); width: var(--e-contact-buttons-size-small); - + svg { height: var(--e-contact-buttons-svg-size-small); width: var(--e-contact-buttons-svg-size-small); } } - + &.has-size-medium { height: var(--e-contact-buttons-size-medium); width: var(--e-contact-buttons-size-medium); - + svg { height: var(--e-contact-buttons-svg-size-medium); width: var(--e-contact-buttons-svg-size-medium); } } - + &.has-size-large { height: var(--e-contact-buttons-size-large); width: var(--e-contact-buttons-size-large); - + svg { height: var(--e-contact-buttons-svg-size-large); width: var(--e-contact-buttons-svg-size-large); @@ -113,7 +113,7 @@ position: absolute; inset-inline-end: 0; top: 0; - + &:hover, &:focus { background: none; @@ -168,7 +168,7 @@ } &.has-icon-position-start { - + .e-contact-buttons__contact-icon-container { order: 1; } diff --git a/modules/conversion-center/assets/scss/widgets/contact-buttons-var-4.scss b/modules/conversion-center/assets/scss/widgets/contact-buttons-var-4.scss index dfd13a949f20..034330e8a3aa 100644 --- a/modules/conversion-center/assets/scss/widgets/contact-buttons-var-4.scss +++ b/modules/conversion-center/assets/scss/widgets/contact-buttons-var-4.scss @@ -13,7 +13,7 @@ width: auto; &.has-h-alignment-end { - + .e-contact-buttons__chat-button-container { padding-inline-end: 0; } @@ -91,7 +91,7 @@ & .e-contact-buttons__contact-icon-container { height: var(--e-contact-buttons-size-small); width: var(--e-contact-buttons-size-small); - + svg { height: var(--e-contact-buttons-icon-small); width: var(--e-contact-buttons-icon-small); @@ -105,7 +105,7 @@ & .e-contact-buttons__contact-icon-container { height: var(--e-contact-buttons-size-medium); width: var(--e-contact-buttons-size-medium); - + svg { height: var(--e-contact-buttons-icon-medium); width: var(--e-contact-buttons-icon-medium); @@ -119,7 +119,7 @@ & .e-contact-buttons__contact-icon-container { height: var(--e-contact-buttons-size-large); width: var(--e-contact-buttons-size-large); - + svg { height: var(--e-contact-buttons-icon-large); width: var(--e-contact-buttons-icon-large); @@ -132,7 +132,7 @@ &__chat-buttons-container { display: flex; } - + &__close-button { background-color: var(--e-contact-buttons-active-button-bg); color: var(--e-contact-buttons-active-button-color); @@ -142,28 +142,35 @@ position: relative; top: unset; } - - &__close-button, + + &__chat-button { - + + &[aria-expanded="true"] { + display: none; + } + } + + &__close-button { + &[aria-expanded="false"] { display: none; } } - + &__content { border-radius: 0; box-shadow: none; margin: 0; overflow: visible; } - + &__contact-links { display: flex; flex-direction: column; gap: var(--e-contact-buttons-contact-gap); } - + &__contact-icon-container { align-items: center; background-color: var(--e-contact-buttons-contact-button-bg); @@ -172,31 +179,31 @@ justify-content: center; transition: $transition-hover; } - + &__contact-icon-link { align-items: center; display: flex; flex-direction: row; gap: 14px; - + svg { fill: var(--e-contact-buttons-contact-button-icon); } - + &:hover, &:focus { - + .e-contact-buttons__contact-icon-container { background-color: var(--e-contact-buttons-contact-button-bg-hover); transition: $transition-hover; } - + svg { fill: var(--e-contact-buttons-contact-button-icon-hover); } } } - + &__contact-tooltip { background-color: var(--e-contact-buttons-tooltip-bg); border-radius: 16px; @@ -206,7 +213,7 @@ line-height: 25px; padding: 4px 14px; position: relative; - + &::after { border-style: solid; content: ""; @@ -218,4 +225,4 @@ } } } -} \ No newline at end of file +} diff --git a/modules/conversion-center/assets/scss/widgets/contact-buttons-var-8.scss b/modules/conversion-center/assets/scss/widgets/contact-buttons-var-8.scss index ba8eba9c724d..391126190fda 100644 --- a/modules/conversion-center/assets/scss/widgets/contact-buttons-var-8.scss +++ b/modules/conversion-center/assets/scss/widgets/contact-buttons-var-8.scss @@ -22,23 +22,23 @@ &.has-platform-url { --e-contact-buttons-contact-button-icon: #467FF7; } - + &.has-platform-whatsapp { --e-contact-buttons-contact-button-icon: #25D366; } - + &.has-platform-skype { --e-contact-buttons-contact-button-icon: #00AFF0; } - + &.has-platform-messenger { --e-contact-buttons-contact-button-icon: #168AFF; } - + &.has-platform-viber { --e-contact-buttons-contact-button-icon: #7360F2; } - + &.has-platform-waze { --e-contact-buttons-contact-button-icon: #33CCFF; } @@ -79,7 +79,7 @@ &__chat-buttons-container { display: flex; } - + &__close-button { background-color: var(--e-contact-buttons-active-button-bg); border-radius: 50%; @@ -89,34 +89,40 @@ position: relative; top: unset; } - - &__close-button, + &__chat-button { - + + &[aria-expanded="true"] { + display: none; + } + } + + &__close-button { + &[aria-expanded="false"] { display: none; } } - + &__top-bar-title { font-size: 16px; line-height: 24px; font-weight: 600; } - + &__top-bar-subtitle { font-size: 12px; line-height: 16px; font-weight: 500px; } - + &__contact-links { display: flex; flex-direction: column; gap: 12px; padding: 12px; } - + &__contact-icon-link { background-color: var(--e-contact-buttons-contact-button-bg); border-start-end-radius: 15px; @@ -128,39 +134,39 @@ grid-column-gap: 12px; grid-row-gap: 0; padding: 10px 20px; - + svg { fill: var(--e-contact-buttons-contact-button-icon); } } - + &__contact-icon-link.has-size-small { svg { height: 22px; width: 22px; } } - + &__contact-icon-link.has-size-medium { svg { height: 28px; width: 28px; } } - + &__contact-icon-link.has-size-large { svg { height: 36px; width: 36px; } } - + &__contact-icon-container { align-items: center; display: flex; grid-area: 1 / 1 / 3 / 2; } - + &__contact-title { color: var(--e-contact-buttons-contact-title-text-color); grid-area: 1 / 2 / 2 / 3; @@ -168,7 +174,7 @@ font-weight: 600; line-height: 24px; } - + &__contact-description { color: var(--e-contact-buttons-contact-description-text-color); grid-area: 2 / 2 / 3 / 3; @@ -176,9 +182,9 @@ font-weight: 300; line-height: 16px; } - + &__links-container { background-color: var(--e-contact-buttons-chat-box-bg); } } -} \ No newline at end of file +} diff --git a/modules/conversion-center/assets/scss/widgets/contact-buttons-var-9.scss b/modules/conversion-center/assets/scss/widgets/contact-buttons-var-9.scss new file mode 100644 index 000000000000..5bc97164c1f6 --- /dev/null +++ b/modules/conversion-center/assets/scss/widgets/contact-buttons-var-9.scss @@ -0,0 +1,276 @@ +.e-contact-buttons-var-9 { + --e-contact-buttons-size-small: 48px; + --e-contact-buttons-size-medium: 56px; + --e-contact-buttons-size-large: 64px; + --e-contact-buttons-svg-size-small: 24px; + --e-contact-buttons-svg-size-medium: 28px; + --e-contact-buttons-svg-size-large: 32px; + --e-contact-buttons-transition-duration: .5s; + --e-contact-buttons-transition: all var(--e-contact-buttons-transition-duration); + --e-contact-buttons-overlap-margin: -10px; + + width: auto; + + .e-contact-buttons { + + &__chat-button-icon-container { + align-items: center; + background-color: var(--e-contact-buttons-button-bg); + border-radius: 50%; + display: flex; + justify-content: center; + position: relative; + transition: var(--e-contact-buttons-transition); + z-index: $first-layer; + + svg { + position: relative; + z-index: $second-layer; + } + } + + &__chat-button-text { + background-color: var(--e-contact-buttons-button-bg); + color: var(--e-contact-buttons-button-icon); + font-size: 16px; + font-weight: 500; + line-height: 24px; + padding-block-end: var(--e-contact-buttons-chat-button-padding-block-end); + padding-block-start: var(--e-contact-buttons-chat-button-padding-block-start); + padding-inline-end: var(--e-contact-buttons-chat-button-padding-inline-end); + padding-inline-start: var(--e-contact-buttons-chat-button-padding-inline-start); + position: relative; + transition: var(--e-contact-buttons-transition); + } + + &__chat-button { + background-color: transparent; + border-radius: 0; + color: var(--e-contact-buttons-button-icon); + height: auto; + width: auto; + + &:hover, + &:focus { + color: var(--e-contact-buttons-button-icon-hover); + + .e-contact-buttons__chat-button-icon-container, + .e-contact-buttons__chat-button-text, + .e-contact-buttons__chat-button-text::before { + background-color: var(--e-contact-buttons-button-bg-hover); + color: var(--e-contact-buttons-button-icon-hover); + transition: var(--e-contact-buttons-transition); + } + } + + &.has-size-small { + + .e-contact-buttons__chat-button-icon-container { + height: var(--e-contact-buttons-size-small); + width: var(--e-contact-buttons-size-small); + + svg { + height: var(--e-contact-buttons-svg-size-small); + width: var(--e-contact-buttons-svg-size-small); + } + } + } + + &.has-size-medium { + + .e-contact-buttons__chat-button-icon-container { + height: var(--e-contact-buttons-size-medium); + width: var(--e-contact-buttons-size-medium); + + svg { + height: var(--e-contact-buttons-svg-size-medium); + width: var(--e-contact-buttons-svg-size-medium); + } + } + } + + &.has-size-large { + + .e-contact-buttons__chat-button-icon-container { + height: var(--e-contact-buttons-size-large); + width: var(--e-contact-buttons-size-large); + + svg { + height: var(--e-contact-buttons-svg-size-large); + width: var(--e-contact-buttons-svg-size-large); + } + } + } + } + } + + &.has-h-alignment-end { + + .e-contact-buttons__chat-button-container { + padding-inline-end: 0; + } + + .e-contact-buttons__chat-button-icon-container { + + @media (min-width: $screen-desktop-min) { + position: absolute; + inset-inline-end: -5px; + transition: var(--e-contact-buttons-transition); + } + } + + .e-contact-buttons__chat-button-text { + border-start-start-radius: 0; + border-end-start-radius: 0; + border-start-end-radius: 50px; + border-end-end-radius: 50px; + margin-inline-start: var(--e-contact-buttons-overlap-margin); + + @media (min-width: $screen-desktop-min) { + clip-path: inset(0 0 0 100%); + } + } + + .e-contact-buttons__chat-button { + + &:hover, + &:focus { + + @media (min-width: $screen-desktop-min) { + + .e-contact-buttons__chat-button-text { + clip-path: inset(0 0 0 0); + transition: var(--e-contact-buttons-transition); + } + + .e-contact-buttons__chat-button-icon-container { + inset-inline-end: 100%; + transition: var(--e-contact-buttons-transition); + } + } + } + } + } + + + &.has-h-alignment-start { + + .e-contact-buttons__chat-button-container { + padding-inline-start: 0; + } + + .e-contact-buttons__chat-button-icon-container { + order: 2; + + @media (min-width: $screen-desktop-min) { + position: absolute; + inset-inline-start: -5px; + transition: var(--e-contact-buttons-transition); + } + } + + .e-contact-buttons__chat-button-text { + border-start-start-radius: 50px; + border-end-start-radius: 50px; + border-start-end-radius: 0; + border-end-end-radius: 0; + margin-inline-end: var(--e-contact-buttons-overlap-margin); + order: 1; + + @media (min-width: $screen-desktop-min) { + clip-path: inset(0 100% 0 0); + transition: var(--e-contact-buttons-transition); + } + } + + .e-contact-buttons__chat-button { + + &:hover, + &:focus { + + @media (min-width: $screen-desktop-min) { + + .e-contact-buttons__chat-button-text { + clip-path: inset(0 0 0 0); + transition: var(--e-contact-buttons-transition); + } + + .e-contact-buttons__chat-button-icon-container { + inset-inline-start: 100%; + transition: var(--e-contact-buttons-transition); + } + } + } + } + } + + &.has-h-alignment-center { + + .e-contact-buttons__chat-button-icon-container { + + @media (min-width: $screen-desktop-min) { + order: 2; + position: absolute; + inset-inline-start: 50%; + transform: translateX(-50%); + } + } + + .e-contact-buttons__chat-button-text { + border-start-start-radius: 0; + border-end-start-radius: 0; + border-start-end-radius: 50px; + border-end-end-radius: 50px; + margin-inline-start: var(--e-contact-buttons-overlap-margin); + + @media (min-width: $screen-desktop-min) { + inset-inline-end: 50%; + order: 1; + clip-path: inset(0 0 0 100%); + } + } + + .e-contact-buttons__chat-button { + + &:hover, + &:focus { + + @media (min-width: $screen-desktop-min) { + + .e-contact-buttons__chat-button-text { + clip-path: inset(0 0 0 0); + transition: var(--e-contact-buttons-transition); + } + + .e-contact-buttons__chat-button-icon-container { + inset-inline-start: -100%; + transform: unset; + transition: var(--e-contact-buttons-transition); + } + } + } + + &.has-size-small { + + &:hover, + &:focus { + + .e-contact-buttons__chat-button-icon-container { + inset-inline-start: calc(-100% + 10px); + } + } + } + + &.has-size-large { + + &:hover, + &:focus { + + .e-contact-buttons__chat-button-icon-container { + inset-inline-start: calc(-100% - 5px); + } + } + } + } + } +} \ No newline at end of file diff --git a/modules/conversion-center/assets/scss/widgets/link-in-bio-base.scss b/modules/conversion-center/assets/scss/widgets/link-in-bio-base.scss index 421366959067..0be50a3bbd51 100644 --- a/modules/conversion-center/assets/scss/widgets/link-in-bio-base.scss +++ b/modules/conversion-center/assets/scss/widgets/link-in-bio-base.scss @@ -23,9 +23,11 @@ --e-link-in-bio-identity-image-cover-border-color: transparent; --e-link-in-bio-identity-image-cover-border-style: none; --e-link-in-bio-identity-image-cover-height: 170px; + --e-link-in-bio-identity-image-cover-position: center center; // Identity config - Profile --e-link-in-bio-identity-image-profile-border-color: transparent; + --e-link-in-bio-identity-image-profile-position: center center; --e-link-in-bio-identity-image-profile-border-radius: 50%; --e-link-in-bio-identity-image-profile-border-style: none; --e-link-in-bio-identity-image-profile-border-width: 0; @@ -209,6 +211,10 @@ &.has-border { --e-link-in-bio-identity-image-cover-border-style: solid; } + + .e-link-in-bio__identity-image-element { + object-position: var(--e-link-in-bio-identity-image-cover-position); + } } .e-link-in-bio__identity-image-profile { @@ -237,6 +243,7 @@ .e-link-in-bio__identity-image-element { aspect-ratio: inherit; + object-position: var(--e-link-in-bio-identity-image-profile-position); } } diff --git a/modules/conversion-center/base/widget-contact-button-base.php b/modules/conversion-center/base/widget-contact-button-base.php index 096e18f273db..04bbb598321d 100644 --- a/modules/conversion-center/base/widget-contact-button-base.php +++ b/modules/conversion-center/base/widget-contact-button-base.php @@ -41,6 +41,8 @@ public static function get_configuration() { 'has_notification_dot_default_enabled' => true, 'has_active_tab' => false, 'has_display_text' => false, + 'display_text_label' => esc_html__( 'Call now', 'elementor' ), + 'has_display_text_select' => true, 'platform' => [ 'group' => [ Social_Network_Provider::EMAIL, @@ -145,11 +147,25 @@ public static function get_configuration() { 'chat_button_section' => [ 'has_entrance_animation' => true, 'has_box_shadow' => true, + 'has_drop_shadow' => false, 'has_padding' => false, 'has_button_size' => true, + 'button_size_default' => 'small', 'has_typography' => false, 'has_icon_position' => false, 'has_icon_spacing' => false, + 'has_tabs' => true, + 'has_platform_color_controls' => false, + 'hover_animation_type' => 'default', + 'icon_color_label' => esc_html__( 'Icon Color', 'elementor' ), + 'padding_defaults' => [ + 'top' => '16', + 'bottom' => '16', + 'left' => '20', + 'right' => '20', + 'unit' => 'px', + 'isLinked' => false, + ], ], 'top_bar_section' => [ 'has_title_heading' => true, @@ -169,11 +185,22 @@ public static function get_configuration() { 'has_buttons_size' => true, 'has_box_shadow' => false, 'has_buttons_spacing' => false, + 'buttons_spacing_default' => [ + 'unit' => 'px', + 'size' => 15, + ], 'has_hover_animation' => true, 'has_chat_box_animation' => false, 'has_icon_bg_color' => true, 'has_button_bar' => false, 'has_tabs' => true, + 'has_text_color' => false, + 'has_bg_color' => false, + 'has_padding' => false, + 'has_button_corners' => false, + 'has_typography' => false, + 'icon_color_label' => esc_html__( 'Icon Color', 'elementor' ), + 'has_hover_transition_duration' => false, ], 'send_button_section' => [ 'has_platform_colors' => true, @@ -217,6 +244,10 @@ public function get_stack( $with_common_controls = true ): array { return parent::get_stack( false ); } + public function get_help_url(): string { + return 'https://elementor.com/help/'; + } + protected function register_controls(): void { $this->add_content_tab(); @@ -403,6 +434,16 @@ private function social_media_controls(): void { ); } + private function get_display_text_condition( $condition ) { + $config = static::get_configuration(); + + if ( true == $config['content']['chat_button_section']['has_display_text_select'] ) { + return $condition; + } + + return null; + } + protected function add_chat_button_section(): void { $config = static::get_configuration(); @@ -467,18 +508,21 @@ protected function add_chat_button_section(): void { } if ( $config['content']['chat_button_section']['has_display_text'] ) { - $this->add_control( - 'chat_button_display_text_select', - [ - 'label' => esc_html__( 'Display Text', 'elementor' ), - 'type' => Controls_Manager::SELECT, - 'default' => 'details', - 'options' => [ - 'details' => esc_html__( 'Contact Details', 'elementor' ), - 'cta' => esc_html__( 'Call to Action', 'elementor' ), - ], - ] - ); + + if ( $config['content']['chat_button_section']['has_display_text_select'] ) { + $this->add_control( + 'chat_button_display_text_select', + [ + 'label' => esc_html__( 'Display Text', 'elementor' ), + 'type' => Controls_Manager::SELECT, + 'default' => 'details', + 'options' => [ + 'details' => esc_html__( 'Contact Details', 'elementor' ), + 'cta' => esc_html__( 'Call to Action', 'elementor' ), + ], + ] + ); + } $this->add_control( 'chat_button_display_text', @@ -490,10 +534,10 @@ protected function add_chat_button_section(): void { ], 'label_block' => true, 'placeholder' => esc_html__( 'Enter the text', 'elementor' ), - 'default' => esc_html__( 'Call now', 'elementor' ), - 'condition' => [ + 'default' => $config['content']['chat_button_section']['display_text_label'], + 'condition' => $this-> get_display_text_condition([ 'chat_button_display_text_select' => 'cta', - ], + ]), ], ); } @@ -1037,7 +1081,7 @@ protected function add_style_chat_button_section(): void { [ 'label' => esc_html__( 'Size', 'elementor' ), 'type' => Controls_Manager::SELECT, - 'default' => 'small', + 'default' => $config['style']['chat_button_section']['button_size_default'], 'options' => [ 'small' => esc_html__( 'Small', 'elementor' ), 'medium' => esc_html__( 'Medium', 'elementor' ), @@ -1108,158 +1152,207 @@ protected function add_style_chat_button_section(): void { ); } - $this->start_controls_tabs( - 'style_button_color_tabs' - ); + if ( $config['style']['chat_button_section']['has_tabs'] ) { + $this->start_controls_tabs( + 'style_button_color_tabs' + ); - $this->start_controls_tab( - 'style_button_color_tabs_normal', - [ - 'label' => esc_html__( 'Normal', 'elementor' ), - ] - ); + $this->start_controls_tab( + 'style_button_color_tabs_normal', + [ + 'label' => esc_html__( 'Normal', 'elementor' ), + ] + ); + + if ( $config['style']['has_platform_colors'] ) { + $this->add_control( + 'style_button_color_select', + [ + 'label' => esc_html__( 'Colors', 'elementor' ), + 'type' => Controls_Manager::SELECT, + 'default' => 'default', + 'options' => [ + 'default' => esc_html__( 'Default', 'elementor' ), + 'custom' => esc_html__( 'Custom', 'elementor' ), + ], + ] + ); + } - if ( $config['style']['has_platform_colors'] ) { $this->add_control( - 'style_button_color_select', + 'style_button_color_icon', [ - 'label' => esc_html__( 'Colors', 'elementor' ), - 'type' => Controls_Manager::SELECT, - 'default' => 'default', - 'options' => [ - 'default' => esc_html__( 'Default', 'elementor' ), - 'custom' => esc_html__( 'Custom', 'elementor' ), + 'label' => $config['style']['chat_button_section']['icon_color_label'], + 'type' => Controls_Manager::COLOR, + 'selectors' => [ + '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-button-icon: {{VALUE}}', ], + 'condition' => $this->get_platform_color_condition( [ + 'style_button_color_select' => 'custom', + ] ), ] ); - } - $this->add_control( - 'style_button_color_icon', - [ - 'label' => esc_html__( 'Icon Color', 'elementor' ), - 'type' => Controls_Manager::COLOR, - 'selectors' => [ - '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-button-icon: {{VALUE}}', - ], - 'condition' => $this->get_platform_color_condition( [ - 'style_button_color_select' => 'custom', - ] ), - ] - ); + $this->add_control( + 'style_button_color_background', + [ + 'label' => esc_html__( 'Background Color', 'elementor' ), + 'type' => Controls_Manager::COLOR, + 'selectors' => [ + '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-button-bg: {{VALUE}}', + ], + 'condition' => $this->get_platform_color_condition( [ + 'style_button_color_select' => 'custom', + ] ), + ] + ); - $this->add_control( - 'style_button_color_background', - [ - 'label' => esc_html__( 'Background Color', 'elementor' ), - 'type' => Controls_Manager::COLOR, - 'selectors' => [ - '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-button-bg: {{VALUE}}', - ], - 'condition' => $this->get_platform_color_condition( [ - 'style_button_color_select' => 'custom', - ] ), - ] - ); + $this->end_controls_tab(); - $this->end_controls_tab(); + $this->start_controls_tab( + 'style_button_color_tabs_hover', + [ + 'label' => esc_html__( 'Hover', 'elementor' ), + ] + ); - $this->start_controls_tab( - 'style_button_color_tabs_hover', - [ - 'label' => esc_html__( 'Hover', 'elementor' ), - ] - ); + if ( $config['style']['has_platform_colors'] ) { + $this->add_control( + 'style_button_color_select_hover', + [ + 'label' => esc_html__( 'Colors', 'elementor' ), + 'type' => Controls_Manager::SELECT, + 'default' => 'default', + 'options' => [ + 'default' => esc_html__( 'Default', 'elementor' ), + 'custom' => esc_html__( 'Custom', 'elementor' ), + ], + ] + ); + } - if ( $config['style']['has_platform_colors'] ) { $this->add_control( - 'style_button_color_select_hover', + 'style_button_color_icon_hover', [ - 'label' => esc_html__( 'Colors', 'elementor' ), - 'type' => Controls_Manager::SELECT, - 'default' => 'default', - 'options' => [ - 'default' => esc_html__( 'Default', 'elementor' ), - 'custom' => esc_html__( 'Custom', 'elementor' ), + 'label' => $config['style']['chat_button_section']['icon_color_label'], + 'type' => Controls_Manager::COLOR, + 'selectors' => [ + '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-button-icon-hover: {{VALUE}}', ], + 'condition' => $this->get_platform_color_condition( [ + 'style_button_color_select_hover' => 'custom', + ] ), ] ); - } - $this->add_control( - 'style_button_color_icon_hover', - [ - 'label' => esc_html__( 'Icon Color', 'elementor' ), - 'type' => Controls_Manager::COLOR, - 'selectors' => [ - '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-button-icon-hover: {{VALUE}}', - ], - 'condition' => $this->get_platform_color_condition( [ - 'style_button_color_select_hover' => 'custom', - ] ), - ] - ); + $this->add_control( + 'style_button_color_background_hover', + [ + 'label' => esc_html__( 'Background Color', 'elementor' ), + 'type' => Controls_Manager::COLOR, + 'selectors' => [ + '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-button-bg-hover: {{VALUE}}', + ], + 'condition' => $this->get_platform_color_condition( [ + 'style_button_color_select_hover' => 'custom', + ] ), + ] + ); - $this->add_control( - 'style_button_color_background_hover', - [ - 'label' => esc_html__( 'Background Color', 'elementor' ), - 'type' => Controls_Manager::COLOR, - 'selectors' => [ - '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-button-bg-hover: {{VALUE}}', - ], - 'condition' => $this->get_platform_color_condition( [ - 'style_button_color_select_hover' => 'custom', - ] ), - ] - ); + if ( 'default' == $config['style']['chat_button_section']['hover_animation_type'] ) { + $this->add_control( + 'style_button_color_hover_animation', + [ + 'label' => esc_html__( 'Hover Animation', 'elementor' ), + 'type' => Controls_Manager::HOVER_ANIMATION, + 'frontend_available' => true, + ] + ); + } - $this->add_control( - 'style_button_color_hover_animation', - [ - 'label' => esc_html__( 'Hover Animation', 'elementor' ), - 'type' => Controls_Manager::HOVER_ANIMATION, - 'frontend_available' => true, - ] - ); + $this->end_controls_tab(); - $this->end_controls_tab(); + if ( $config['content']['chat_button_section']['has_active_tab'] ) { + $this->start_controls_tab( + 'style_button_color_tabs_active', + [ + 'label' => esc_html__( 'Active', 'elementor' ), + ] + ); - if ( $config['content']['chat_button_section']['has_active_tab'] ) { - $this->start_controls_tab( - 'style_button_color_tabs_active', + $this->add_control( + 'style_button_color_icon_active', + [ + 'label' => esc_html__( 'Icon Color', 'elementor' ), + 'type' => Controls_Manager::COLOR, + 'selectors' => [ + '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-active-button-color: {{VALUE}}', + ], + ] + ); + + $this->add_control( + 'style_button_color_background_active', + [ + 'label' => esc_html__( 'Background Color', 'elementor' ), + 'type' => Controls_Manager::COLOR, + 'selectors' => [ + '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-active-button-bg: {{VALUE}}', + ], + ] + ); + + $this->end_controls_tab(); + } + + $this->end_controls_tabs(); + } + + if ( $config['style']['chat_button_section'] + ['has_platform_color_controls'] ) { + $this->add_control( + 'style_platform_control_select', [ - 'label' => esc_html__( 'Active', 'elementor' ), + 'label' => esc_html__( 'Colors', 'elementor' ), + 'type' => Controls_Manager::SELECT, + 'default' => 'default', + 'options' => [ + 'default' => esc_html__( 'Default', 'elementor' ), + 'custom' => esc_html__( 'Custom', 'elementor' ), + ], + 'separator' => 'before', ] ); $this->add_control( - 'style_button_color_icon_active', + 'style_button_color_icon', [ - 'label' => esc_html__( 'Icon Color', 'elementor' ), + 'label' => $config['style']['chat_button_section']['icon_color_label'], 'type' => Controls_Manager::COLOR, 'selectors' => [ - '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-active-button-color: {{VALUE}}', + '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-button-icon: {{VALUE}}', + ], + 'condition' => [ + 'style_platform_control_select' => 'custom', ], ] ); $this->add_control( - 'style_button_color_background_active', + 'style_button_color_background', [ 'label' => esc_html__( 'Background Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'selectors' => [ - '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-active-button-bg: {{VALUE}}', + '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-button-bg: {{VALUE}}', + ], + 'condition' => [ + 'style_platform_control_select' => 'custom', ], ] ); - - $this->end_controls_tab(); } - $this->end_controls_tabs(); - if ( $config['style']['chat_button_section']['has_entrance_animation'] ) { $this->add_responsive_control( 'style_chat_button_animation', @@ -1315,6 +1408,32 @@ protected function add_style_chat_button_section(): void { ); } + if ( $config['style']['chat_button_section']['has_drop_shadow'] ) { + $this->add_group_control( + Group_Control_Box_Shadow::get_type(), + [ + 'name' => 'style_chat_button_box_shadow', + 'fields_options' => [ + 'box_shadow_type' => [ + 'default' => 'yes', + ], + 'box_shadow' => [ + 'default' => [ + 'horizontal' => 4, + 'vertical' => 4, + 'blur' => 10, + 'spread' => 0, + 'color' => 'rgba(0,0,0,0.15)', + ], + 'selectors' => [ + '{{WRAPPER}} .e-contact-buttons__chat-button-drop-shadow' => 'filter: drop-shadow({{HORIZONTAL}}px {{VERTICAL}}px {{BLUR}}px {{COLOR}});', + ], + ], + ], + ] + ); + } + if ( $config['style']['chat_button_section']['has_padding'] ) { $this->add_responsive_control( 'style_chat_button_padding', @@ -1322,14 +1441,7 @@ protected function add_style_chat_button_section(): void { 'label' => esc_html__( 'Padding', 'elementor' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em', 'rem' ], - 'default' => [ - 'top' => '16', - 'bottom' => '16', - 'left' => '20', - 'right' => '20', - 'unit' => 'px', - 'isLinked' => false, - ], + 'default' => $config['style']['chat_button_section']['padding_defaults'], 'selectors' => [ '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-chat-button-padding-block-end: {{BOTTOM}}{{UNIT}}; --e-contact-buttons-chat-button-padding-block-start: {{TOP}}{{UNIT}}; --e-contact-buttons-chat-button-padding-inline-end: {{RIGHT}}{{UNIT}}; --e-contact-buttons-chat-button-padding-inline-start: {{LEFT}}{{UNIT}};', ], @@ -1338,6 +1450,48 @@ protected function add_style_chat_button_section(): void { ); } + if ( 'custom' == $config['style']['chat_button_section']['hover_animation_type'] ) { + $this->add_control( + 'style_chat_button_custom_animation_heading', + [ + 'label' => esc_html__( 'Hover Animation', 'elementor' ), + 'type' => Controls_Manager::HEADING, + 'separator' => 'before', + ] + ); + + $this->add_control( + 'style_chat_button_custom_animation_alert', + [ + 'type' => Controls_Manager::ALERT, + 'alert_type' => 'info', + 'content' => __( 'Hover animation is desktop only', 'elementor' ), + ] + ); + + $this->add_control( + 'style_chat_button_custom_animation_transition', + [ + 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)', + 'type' => Controls_Manager::SLIDER, + 'range' => [ + 's' => [ + 'min' => 0, + 'max' => 3, + 'step' => 0.1, + ], + ], + 'default' => [ + 'unit' => 's', + 'size' => 0.3, + ], + 'selectors' => [ + '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-transition-duration: {{SIZE}}{{UNIT}}', + ], + ] + ); + } + $this->end_controls_section(); } @@ -1759,31 +1913,32 @@ protected function add_style_contact_section(): void { ); } - $this->start_controls_tabs( - 'style_contact_button_color_tabs' - ); - - $this->start_controls_tab( - 'style_contact_button_color_tabs_normal', - [ - 'label' => esc_html__( 'Normal', 'elementor' ), - ] - ); + if ( $config['style']['contact_section']['has_text_color'] ) { + $this->add_control( + 'style_contact_button_text_color', + [ + 'label' => $config['style']['contact_section']['icon_color_label'], + 'type' => Controls_Manager::COLOR, + 'selectors' => [ + '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-contact-button-icon: {{VALUE}}', + ], + ] + ); + } - $this->add_control( - 'style_contact_button_color_icon', - [ - 'label' => esc_html__( 'Icon Color', 'elementor' ), - 'type' => Controls_Manager::COLOR, - 'selectors' => [ - '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-contact-button-icon: {{VALUE}}', - ], - ] - ); + if ( $config['style']['contact_section']['has_typography'] ) { + $this->add_group_control( + Group_Control_Typography::get_type(), + [ + 'name' => 'style_contact_typography', + 'selector' => '{{WRAPPER}} .e-contact-buttons__contact-icon-link', + ] + ); + } - if ( $config['style']['contact_section']['has_icon_bg_color'] ) { + if ( $config['style']['contact_section']['has_bg_color'] ) { $this->add_control( - 'style_contact_button_color_background', + 'style_contact_button_bg_color', [ 'label' => esc_html__( 'Background Color', 'elementor' ), 'type' => Controls_Manager::COLOR, @@ -1794,53 +1949,90 @@ protected function add_style_contact_section(): void { ); } - $this->end_controls_tab(); - - $this->start_controls_tab( - 'style_contact_button_color_tabs_hover', - [ - 'label' => esc_html__( 'Hover', 'elementor' ), - ] - ); + if ( $config['style']['contact_section']['has_tabs'] ) { + $this->start_controls_tabs( + 'style_contact_button_color_tabs' + ); - $this->add_control( - 'style_contact_button_color_icon_hover', - [ - 'label' => esc_html__( 'Icon Color', 'elementor' ), - 'type' => Controls_Manager::COLOR, - 'selectors' => [ - '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-contact-button-icon-hover: {{VALUE}}', - ], - ] - ); + $this->start_controls_tab( + 'style_contact_button_color_tabs_normal', + [ + 'label' => esc_html__( 'Normal', 'elementor' ), + ] + ); - if ( $config['style']['contact_section']['has_icon_bg_color'] ) { $this->add_control( - 'style_contact_button_color_background_hover', + 'style_contact_button_color_icon', [ - 'label' => esc_html__( 'Background Color', 'elementor' ), + 'label' => $config['style']['contact_section']['icon_color_label'], 'type' => Controls_Manager::COLOR, 'selectors' => [ - '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-contact-button-bg-hover: {{VALUE}}', + '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-contact-button-icon: {{VALUE}}', ], ] ); - } - if ( $config['style']['contact_section']['has_hover_animation'] ) { + if ( $config['style']['contact_section']['has_icon_bg_color'] ) { + $this->add_control( + 'style_contact_button_color_background', + [ + 'label' => esc_html__( 'Background Color', 'elementor' ), + 'type' => Controls_Manager::COLOR, + 'selectors' => [ + '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-contact-button-bg: {{VALUE}}', + ], + ] + ); + } + + $this->end_controls_tab(); + + $this->start_controls_tab( + 'style_contact_button_color_tabs_hover', + [ + 'label' => esc_html__( 'Hover', 'elementor' ), + ] + ); + $this->add_control( - 'style_contact_button_hover_animation', + 'style_contact_button_color_icon_hover', [ - 'label' => esc_html__( 'Hover Animation', 'elementor' ), - 'type' => Controls_Manager::HOVER_ANIMATION, - 'frontend_available' => true, + 'label' => esc_html__( 'Icon Color', 'elementor' ), + 'type' => Controls_Manager::COLOR, + 'selectors' => [ + '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-contact-button-icon-hover: {{VALUE}}', + ], ] ); - } - $this->end_controls_tab(); + if ( $config['style']['contact_section']['has_icon_bg_color'] ) { + $this->add_control( + 'style_contact_button_color_background_hover', + [ + 'label' => esc_html__( 'Background Color', 'elementor' ), + 'type' => Controls_Manager::COLOR, + 'selectors' => [ + '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-contact-button-bg-hover: {{VALUE}}', + ], + ] + ); + } - $this->end_controls_tabs(); + if ( $config['style']['contact_section']['has_hover_animation'] ) { + $this->add_control( + 'style_contact_button_hover_animation', + [ + 'label' => esc_html__( 'Hover Animation', 'elementor' ), + 'type' => Controls_Manager::HOVER_ANIMATION, + 'frontend_available' => true, + ] + ); + } + + $this->end_controls_tab(); + + $this->end_controls_tabs(); + } if ( $config['style']['contact_section']['has_buttons_spacing'] ) { @@ -1859,10 +2051,7 @@ protected function add_style_contact_section(): void { 'max' => 100, ], ], - 'default' => [ - 'unit' => 'px', - 'size' => 15, - ], + 'default' => $config['style']['contact_section']['buttons_spacing_default'], 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], 'selectors' => [ '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-contact-gap: {{SIZE}}{{UNIT}}', @@ -1872,6 +2061,22 @@ protected function add_style_contact_section(): void { ); } + if ( $config['style']['contact_section']['has_button_corners'] ) { + $this->add_control( + 'style_contact_corners', + [ + 'label' => esc_html__( 'Corners', 'elementor' ), + 'type' => Controls_Manager::SELECT, + 'default' => 'round', + 'options' => [ + 'round' => esc_html__( 'Round', 'elementor' ), + 'rounded' => esc_html__( 'Rounded', 'elementor' ), + 'sharp' => esc_html__( 'Sharp', 'elementor' ), + ], + ] + ); + } + if ( $config['style']['contact_section']['has_box_shadow'] ) { $this->add_group_control( Group_Control_Box_Shadow::get_type(), @@ -1985,6 +2190,70 @@ protected function add_style_contact_section(): void { ); } + if ( $config['style']['contact_section']['has_padding'] ) { + $this->add_responsive_control( + 'style_contact_padding', + [ + 'label' => esc_html__( 'Padding', 'elementor' ), + 'type' => Controls_Manager::DIMENSIONS, + 'size_units' => [ 'px', '%', 'em', 'rem' ], + 'default' => [ + 'top' => '8', + 'bottom' => '8', + 'left' => '12', + 'right' => '12', + 'unit' => 'px', + 'isLinked' => true, + ], + 'selectors' => [ + '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-contact-padding-block-end: {{BOTTOM}}{{UNIT}}; --e-contact-buttons-contact-padding-block-start: {{TOP}}{{UNIT}}; --e-contact-buttons-contact-padding-inline-end: {{RIGHT}}{{UNIT}}; --e-contact-buttons-contact-padding-inline-start: {{LEFT}}{{UNIT}};', + ], + 'separator' => 'before', + ] + ); + } + + if ( $config['style']['contact_section']['has_hover_transition_duration'] ) { + $this->add_control( + 'style_contact_custom_animation_heading', + [ + 'label' => esc_html__( 'Animation', 'elementor' ), + 'type' => Controls_Manager::HEADING, + ] + ); + + $this->add_control( + 'style_contact_custom_animation_alert', + [ + 'type' => Controls_Manager::ALERT, + 'alert_type' => 'info', + 'content' => __( 'Adjust transition duration to change the speed of the hover animation on desktop and the click animation on touchscreen.', 'elementor' ), + ] + ); + + $this->add_control( + 'style_contact_custom_animation_transition', + [ + 'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)', + 'type' => Controls_Manager::SLIDER, + 'range' => [ + 's' => [ + 'min' => 0, + 'max' => 3, + 'step' => 0.1, + ], + ], + 'default' => [ + 'unit' => 's', + 'size' => 0.3, + ], + 'selectors' => [ + '{{WRAPPER}} .e-contact-buttons' => '--e-contact-buttons-transition-duration: {{SIZE}}{{UNIT}}', + ], + ] + ); + } + $this->end_controls_section(); } diff --git a/modules/conversion-center/base/widget-link-in-bio-base.php b/modules/conversion-center/base/widget-link-in-bio-base.php index c71cdef9bdd1..eaf985948c99 100644 --- a/modules/conversion-center/base/widget-link-in-bio-base.php +++ b/modules/conversion-center/base/widget-link-in-bio-base.php @@ -155,6 +155,21 @@ public function get_keywords(): array { return [ 'buttons', 'bio', 'widget', 'link in bio' ]; } + public function get_image_position_options(): array { + return [ + '' => esc_html__( 'Default', 'elementor' ), + 'center center' => esc_html__( 'Center Center', 'elementor' ), + 'center left' => esc_html__( 'Center Left', 'elementor' ), + 'center right' => esc_html__( 'Center Right', 'elementor' ), + 'top center' => esc_html__( 'Top Center', 'elementor' ), + 'top left' => esc_html__( 'Top Left', 'elementor' ), + 'top right' => esc_html__( 'Top Right', 'elementor' ), + 'bottom center' => esc_html__( 'Bottom Center', 'elementor' ), + 'bottom left' => esc_html__( 'Bottom Left', 'elementor' ), + 'bottom right' => esc_html__( 'Bottom Right', 'elementor' ), + ]; + } + public function show_in_panel(): bool { return Plugin::$instance->experiments->is_feature_active( ConversionCenterModule::EXPERIMENT_NAME ); } @@ -904,6 +919,24 @@ protected function add_identity_section(): void { ], ] ); + + $this->add_responsive_control( + 'identity_image_cover_position', + [ + 'label' => esc_html__( 'Position', 'elementor' ), + 'type' => Controls_Manager::SELECT, + 'desktop_default' => 'center center', + 'tablet_default' => 'center center', + 'mobile_default' => 'center center', + 'options' => $this->get_image_position_options(), + 'selectors' => [ + '{{WRAPPER}} .e-link-in-bio' => '--e-link-in-bio-identity-image-cover-position: {{VALUE}}', + ], + 'condition' => [ + 'identity_image_cover[url]!' => '', + ], + ] + ); } if ( $config['content']['identity_section']['has_heading_text'] ) { @@ -942,6 +975,24 @@ protected function add_identity_section(): void { ] ); + $this->add_responsive_control( + 'identity_image_position', + [ + 'label' => esc_html__( 'Position', 'elementor' ), + 'type' => Controls_Manager::SELECT, + 'desktop_default' => 'center center', + 'tablet_default' => 'center center', + 'mobile_default' => 'center center', + 'options' => $this->get_image_position_options(), + 'selectors' => [ + '{{WRAPPER}} .e-link-in-bio' => '--e-link-in-bio-identity-image-profile-position: {{VALUE}}', + ], + 'condition' => [ + 'identity_image[url]!' => '', + ], + ] + ); + $this->end_controls_section(); } diff --git a/modules/conversion-center/classes/render/contact-buttons-core-render.php b/modules/conversion-center/classes/render/contact-buttons-core-render.php index 397ebde88c38..d6a4928e4132 100644 --- a/modules/conversion-center/classes/render/contact-buttons-core-render.php +++ b/modules/conversion-center/classes/render/contact-buttons-core-render.php @@ -13,6 +13,7 @@ class Contact_Buttons_Core_Render extends Contact_Buttons_Render_Base { public function render(): void { $this->build_layout_render_attribute(); + $this->add_content_wrapper_render_attribute(); $content_classnames = 'e-contact-buttons__content'; $animation_duration = $this->settings['style_chat_box_animation_duration']; @@ -26,7 +27,7 @@ public function render(): void { ] ); ?>
widget->get_render_attribute_string( 'layout' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>> -