From b805dc6e7ec44c433cb44d682376ae5acc911c6a Mon Sep 17 00:00:00 2001 From: Roman Pyrih Date: Thu, 7 May 2026 13:16:20 +0200 Subject: [PATCH] Save --- .../elementor-addon/assets/css/main.css | 144 ++- .../elementor-addon/assets/css/main.css.map | 1 - .../elementor-addon/assets/css/main.scss | 180 --- .../plugins/elementor-addon/assets/js/main.js | 117 ++ .../elementor-addon/assets/scss/main.scss | 163 +++ .../elementor-addon/elementor-addon.php | 12 +- .../widgets/info-box-popup.php | 536 +++++++++ .../elementor-addon/widgets/number-box.php | 1002 ----------------- .../widgets/vertical-separator.php | 143 --- 9 files changed, 964 insertions(+), 1334 deletions(-) delete mode 100644 wp-content/plugins/elementor-addon/assets/css/main.css.map delete mode 100644 wp-content/plugins/elementor-addon/assets/css/main.scss create mode 100644 wp-content/plugins/elementor-addon/assets/scss/main.scss create mode 100644 wp-content/plugins/elementor-addon/widgets/info-box-popup.php delete mode 100644 wp-content/plugins/elementor-addon/widgets/number-box.php delete mode 100644 wp-content/plugins/elementor-addon/widgets/vertical-separator.php diff --git a/wp-content/plugins/elementor-addon/assets/css/main.css b/wp-content/plugins/elementor-addon/assets/css/main.css index e60a811..eb2e846 100644 --- a/wp-content/plugins/elementor-addon/assets/css/main.css +++ b/wp-content/plugins/elementor-addon/assets/css/main.css @@ -1 +1,143 @@ -.elementor-vertical-separator{display:flex;align-items:center;height:100%}.elementor-vertical-separator__line{width:1px;height:100px;background:#000}.elementor-widget-number-box .elementor-number-box-wrapper{display:flex;flex-direction:column;text-align:center}.elementor-widget-number-box .elementor-number-box-number{display:inline-block;flex:0 0 auto;line-height:0}.elementor-widget-number-box .elementor-number-box-content{flex-grow:1;width:100%}.elementor-widget-number-box .elementor-number-box-title{margin:0}.elementor-widget-number-box .elementor-number-box-title a{color:inherit;margin:0}.elementor-widget-number-box .elementor-number-box-description{margin:0}.elementor-widget-number-box.elementor-position-inline-end .elementor-number-box-wrapper{flex-direction:row-reverse;text-align:end}.elementor-widget-number-box.elementor-position-inline-start .elementor-number-box-wrapper{flex-direction:row;text-align:start}.elementor-widget-number-box.elementor-position-block-start .elementor-number-box-wrapper{align-items:unset !important;flex-direction:column;text-align:center}.elementor-widget-number-box.elementor-position-block-end .elementor-number-box-wrapper{align-items:unset !important;flex-direction:column-reverse;text-align:center}@media(min-width: ELEMENTOR_SCREEN_WIDESCREEN_MIN){.elementor-widget-number-box.elementor-widescreen-position-inline-end .elementor-number-box-wrapper{flex-direction:row-reverse;text-align:end}.elementor-widget-number-box.elementor-widescreen-position-inline-start .elementor-number-box-wrapper{flex-direction:row;text-align:start}.elementor-widget-number-box.elementor-widescreen-position-block-start .elementor-number-box-wrapper{align-items:unset !important;flex-direction:column;text-align:center}.elementor-widget-number-box.elementor-widescreen-position-block-end .elementor-number-box-wrapper{align-items:unset !important;flex-direction:column-reverse;text-align:center}}@media(max-width: ELEMENTOR_SCREEN_LAPTOP_MAX){.elementor-widget-number-box.elementor-laptop-position-inline-end .elementor-number-box-wrapper{flex-direction:row-reverse;text-align:end}.elementor-widget-number-box.elementor-laptop-position-inline-start .elementor-number-box-wrapper{flex-direction:row;text-align:start}.elementor-widget-number-box.elementor-laptop-position-block-start .elementor-number-box-wrapper{align-items:unset !important;flex-direction:column;text-align:center}.elementor-widget-number-box.elementor-laptop-position-block-end .elementor-number-box-wrapper{align-items:unset !important;flex-direction:column-reverse;text-align:center}}@media(max-width: ELEMENTOR_SCREEN_TABLET_EXTRA_MAX){.elementor-widget-number-box.elementor-tablet_extra-position-inline-end .elementor-number-box-wrapper{flex-direction:row-reverse;text-align:end}.elementor-widget-number-box.elementor-tablet_extra-position-inline-start .elementor-number-box-wrapper{flex-direction:row;text-align:start}.elementor-widget-number-box.elementor-tablet_extra-position-block-start .elementor-number-box-wrapper{align-items:unset !important;flex-direction:column;text-align:center}.elementor-widget-number-box.elementor-tablet_extra-position-block-end .elementor-number-box-wrapper{align-items:unset !important;flex-direction:column-reverse;text-align:center}}@media(max-width: ELEMENTOR_SCREEN_TABLET_MAX){.elementor-widget-number-box.elementor-tablet-position-inline-end .elementor-number-box-wrapper{flex-direction:row-reverse;text-align:end}.elementor-widget-number-box.elementor-tablet-position-inline-start .elementor-number-box-wrapper{flex-direction:row;text-align:start}.elementor-widget-number-box.elementor-tablet-position-block-start .elementor-number-box-wrapper{align-items:unset !important;flex-direction:column;text-align:center}.elementor-widget-number-box.elementor-tablet-position-block-end .elementor-number-box-wrapper{align-items:unset !important;flex-direction:column-reverse;text-align:center}}@media(max-width: ELEMENTOR_SCREEN_MOBILE_EXTRA_MAX){.elementor-widget-number-box.elementor-mobile_extra-position-inline-end .elementor-number-box-wrapper{flex-direction:row-reverse;text-align:end}.elementor-widget-number-box.elementor-mobile_extra-position-inline-start .elementor-number-box-wrapper{flex-direction:row;text-align:start}.elementor-widget-number-box.elementor-mobile_extra-position-block-start .elementor-number-box-wrapper{align-items:unset !important;flex-direction:column;text-align:center}.elementor-widget-number-box.elementor-mobile_extra-position-block-end .elementor-number-box-wrapper{align-items:unset !important;flex-direction:column-reverse;text-align:center}}@media(max-width: ELEMENTOR_SCREEN_MOBILE_MAX){.elementor-widget-number-box.elementor-mobile-position-inline-end .elementor-number-box-wrapper{flex-direction:row-reverse;text-align:end}.elementor-widget-number-box.elementor-mobile-position-inline-start .elementor-number-box-wrapper{flex-direction:row;text-align:start}.elementor-widget-number-box.elementor-mobile-position-block-start .elementor-number-box-wrapper{align-items:unset !important;flex-direction:column;text-align:center}.elementor-widget-number-box.elementor-mobile-position-block-end .elementor-number-box-wrapper{align-items:unset !important;flex-direction:column-reverse;text-align:center}}/*# sourceMappingURL=main.css.map */ \ No newline at end of file +.ea-popup-widget { + display: block; +} + +.ea-popup-button { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + min-height: 20px; + padding: 12px 24px; + border: 1px solid transparent; + border-radius: 4px; + background: #1f7a8c; + color: #fff; + font: inherit; + line-height: 1.2; + text-align: center; + text-decoration: none; + cursor: pointer; + transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; +} + +.ea-popup-button:hover, +.ea-popup-button:focus { + background: #195f6d; + color: #fff; + text-decoration: none; +} + +.ea-popup-button:focus-visible, +.ea-popup-close:focus-visible { + outline: 2px solid currentColor; + outline-offset: 3px; +} + +.ea-popup-modal { + position: fixed; + inset: 0; + z-index: 2147483647; + width: 100vw; + max-width: none; + height: 100vh; + max-height: none; + margin: 0; + display: flex; + align-items: center; + justify-content: center; + padding: 24px; + border: 0; + background: rgba(0, 0, 0, 0.55); + opacity: 0; + visibility: hidden; + pointer-events: none; + transition: opacity 0.2s ease, visibility 0.2s ease; +} + +.ea-popup-modal:not([open]) { + display: none; +} + +.ea-popup-modal.is-open { + display: flex; + opacity: 1; + visibility: visible; + pointer-events: auto; +} + +.ea-popup-modal::backdrop { + background: transparent; +} + +.ea-popup-dialog { + position: relative; + width: 100%; + margin: auto; + max-width: 720px; + max-height: calc(100vh - 48px); + overflow: auto; + padding: 32px; + border-radius: 8px; + background: #fff; + color: #1a1a1a; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); + transform: translateY(12px); + transition: transform 0.2s ease; +} + +.ea-popup-modal.is-open .ea-popup-dialog { + transform: translateY(0); +} + +.ea-popup-close { + position: absolute; + top: 12px; + right: 12px; + display: inline-flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + padding: 0; + border: 0; + border-radius: 50%; + background: transparent; + color: #333; + font-size: 28px; + line-height: 1; + cursor: pointer; +} + +.ea-popup-close:hover, +.ea-popup-close:focus { + background: rgba(0, 0, 0, 0.08); + color: #111; +} + +.ea-popup-content { + padding-right: 20px; +} + +.ea-popup-content > :first-child { + margin-top: 0; +} + +.ea-popup-content > :last-child { + margin-bottom: 0; +} + +body.ea-popup-lock { + overflow: hidden; +} + +@media (max-width: 767px) { + .ea-popup-modal { + padding: 16px; + } + + .ea-popup-dialog { + max-height: calc(100vh - 32px); + padding: 28px 22px; + } +} diff --git a/wp-content/plugins/elementor-addon/assets/css/main.css.map b/wp-content/plugins/elementor-addon/assets/css/main.css.map deleted file mode 100644 index feb6b01..0000000 --- a/wp-content/plugins/elementor-addon/assets/css/main.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["main.scss"],"names":[],"mappings":"AAAA,8BACC,YAAA,CACA,kBAAA,CACA,WAAA,CAGD,oCACC,SAAA,CACA,YAAA,CACA,eAAA,CAIA,2DACC,YAAA,CACA,qBAAA,CACA,iBAAA,CAED,0DACC,oBAAA,CACA,aAAA,CACA,aAAA,CAED,2DACC,WAAA,CACA,UAAA,CAED,yDACC,QAAA,CAED,2DACC,aAAA,CACA,QAAA,CAED,+DACC,QAAA,CAED,yFACC,0BAAA,CACA,cAAA,CAED,2FACC,kBAAA,CACA,gBAAA,CAED,0FACC,4BAAA,CACA,qBAAA,CACA,iBAAA,CAED,wFACC,4BAAA,CACA,6BAAA,CACA,iBAAA,CAED,mDACC,oGACC,0BAAA,CACA,cAAA,CAED,sGACC,kBAAA,CACA,gBAAA,CAED,qGACC,4BAAA,CACA,qBAAA,CACA,iBAAA,CAED,mGACC,4BAAA,CACA,6BAAA,CACA,iBAAA,CAAA,CAGF,+CACC,gGACC,0BAAA,CACA,cAAA,CAED,kGACC,kBAAA,CACA,gBAAA,CAED,iGACC,4BAAA,CACA,qBAAA,CACA,iBAAA,CAED,+FACC,4BAAA,CACA,6BAAA,CACA,iBAAA,CAAA,CAGF,qDACC,sGACC,0BAAA,CACA,cAAA,CAED,wGAEC,kBAAA,CACA,gBAAA,CAED,uGAEC,4BAAA,CACA,qBAAA,CACA,iBAAA,CAED,qGACC,4BAAA,CACA,6BAAA,CACA,iBAAA,CAAA,CAGF,+CACC,gGACC,0BAAA,CACA,cAAA,CAED,kGACC,kBAAA,CACA,gBAAA,CAED,iGACC,4BAAA,CACA,qBAAA,CACA,iBAAA,CAED,+FACC,4BAAA,CACA,6BAAA,CACA,iBAAA,CAAA,CAGF,qDACC,sGACC,0BAAA,CACA,cAAA,CAED,wGAEC,kBAAA,CACA,gBAAA,CAED,uGAEC,4BAAA,CACA,qBAAA,CACA,iBAAA,CAED,qGACC,4BAAA,CACA,6BAAA,CACA,iBAAA,CAAA,CAGF,+CACC,gGACC,0BAAA,CACA,cAAA,CAED,kGACC,kBAAA,CACA,gBAAA,CAED,iGACC,4BAAA,CACA,qBAAA,CACA,iBAAA,CAED,+FACC,4BAAA,CACA,6BAAA,CACA,iBAAA,CAAA","file":"main.css"} \ No newline at end of file diff --git a/wp-content/plugins/elementor-addon/assets/css/main.scss b/wp-content/plugins/elementor-addon/assets/css/main.scss deleted file mode 100644 index 25f693d..0000000 --- a/wp-content/plugins/elementor-addon/assets/css/main.scss +++ /dev/null @@ -1,180 +0,0 @@ -.elementor-vertical-separator { - display: flex; - align-items: center; - height: 100%; -} - -.elementor-vertical-separator__line { - width: 1px; - height: 100px; - background: #000; -} - -.elementor-widget-number-box { - .elementor-number-box-wrapper { - display: flex; - flex-direction: column; - text-align: center; - } - .elementor-number-box-number { - display: inline-block; - flex: 0 0 auto; - line-height: 0; - } - .elementor-number-box-content { - flex-grow: 1; - width: 100%; - } - .elementor-number-box-title { - margin: 0; - } - .elementor-number-box-title a { - color: inherit; - margin: 0; - } - .elementor-number-box-description { - margin: 0; - } - &.elementor-position-inline-end .elementor-number-box-wrapper { - flex-direction: row-reverse; - text-align: end; - } - &.elementor-position-inline-start .elementor-number-box-wrapper { - flex-direction: row; - text-align: start; - } - &.elementor-position-block-start .elementor-number-box-wrapper { - align-items: unset !important; - flex-direction: column; - text-align: center; - } - &.elementor-position-block-end .elementor-number-box-wrapper { - align-items: unset !important; - flex-direction: column-reverse; - text-align: center; - } - @media (min-width: ELEMENTOR_SCREEN_WIDESCREEN_MIN) { - &.elementor-widescreen-position-inline-end .elementor-number-box-wrapper { - flex-direction: row-reverse; - text-align: end; - } - &.elementor-widescreen-position-inline-start .elementor-number-box-wrapper { - flex-direction: row; - text-align: start; - } - &.elementor-widescreen-position-block-start .elementor-number-box-wrapper { - align-items: unset !important; - flex-direction: column; - text-align: center; - } - &.elementor-widescreen-position-block-end .elementor-number-box-wrapper { - align-items: unset !important; - flex-direction: column-reverse; - text-align: center; - } - } - @media (max-width: ELEMENTOR_SCREEN_LAPTOP_MAX) { - &.elementor-laptop-position-inline-end .elementor-number-box-wrapper { - flex-direction: row-reverse; - text-align: end; - } - &.elementor-laptop-position-inline-start .elementor-number-box-wrapper { - flex-direction: row; - text-align: start; - } - &.elementor-laptop-position-block-start .elementor-number-box-wrapper { - align-items: unset !important; - flex-direction: column; - text-align: center; - } - &.elementor-laptop-position-block-end .elementor-number-box-wrapper { - align-items: unset !important; - flex-direction: column-reverse; - text-align: center; - } - } - @media (max-width: ELEMENTOR_SCREEN_TABLET_EXTRA_MAX) { - &.elementor-tablet_extra-position-inline-end .elementor-number-box-wrapper { - flex-direction: row-reverse; - text-align: end; - } - &.elementor-tablet_extra-position-inline-start - .elementor-number-box-wrapper { - flex-direction: row; - text-align: start; - } - &.elementor-tablet_extra-position-block-start - .elementor-number-box-wrapper { - align-items: unset !important; - flex-direction: column; - text-align: center; - } - &.elementor-tablet_extra-position-block-end .elementor-number-box-wrapper { - align-items: unset !important; - flex-direction: column-reverse; - text-align: center; - } - } - @media (max-width: ELEMENTOR_SCREEN_TABLET_MAX) { - &.elementor-tablet-position-inline-end .elementor-number-box-wrapper { - flex-direction: row-reverse; - text-align: end; - } - &.elementor-tablet-position-inline-start .elementor-number-box-wrapper { - flex-direction: row; - text-align: start; - } - &.elementor-tablet-position-block-start .elementor-number-box-wrapper { - align-items: unset !important; - flex-direction: column; - text-align: center; - } - &.elementor-tablet-position-block-end .elementor-number-box-wrapper { - align-items: unset !important; - flex-direction: column-reverse; - text-align: center; - } - } - @media (max-width: ELEMENTOR_SCREEN_MOBILE_EXTRA_MAX) { - &.elementor-mobile_extra-position-inline-end .elementor-number-box-wrapper { - flex-direction: row-reverse; - text-align: end; - } - &.elementor-mobile_extra-position-inline-start - .elementor-number-box-wrapper { - flex-direction: row; - text-align: start; - } - &.elementor-mobile_extra-position-block-start - .elementor-number-box-wrapper { - align-items: unset !important; - flex-direction: column; - text-align: center; - } - &.elementor-mobile_extra-position-block-end .elementor-number-box-wrapper { - align-items: unset !important; - flex-direction: column-reverse; - text-align: center; - } - } - @media (max-width: ELEMENTOR_SCREEN_MOBILE_MAX) { - &.elementor-mobile-position-inline-end .elementor-number-box-wrapper { - flex-direction: row-reverse; - text-align: end; - } - &.elementor-mobile-position-inline-start .elementor-number-box-wrapper { - flex-direction: row; - text-align: start; - } - &.elementor-mobile-position-block-start .elementor-number-box-wrapper { - align-items: unset !important; - flex-direction: column; - text-align: center; - } - &.elementor-mobile-position-block-end .elementor-number-box-wrapper { - align-items: unset !important; - flex-direction: column-reverse; - text-align: center; - } - } -} diff --git a/wp-content/plugins/elementor-addon/assets/js/main.js b/wp-content/plugins/elementor-addon/assets/js/main.js index e69de29..6b53e3b 100644 --- a/wp-content/plugins/elementor-addon/assets/js/main.js +++ b/wp-content/plugins/elementor-addon/assets/js/main.js @@ -0,0 +1,117 @@ +(function () { + 'use strict'; + + var activeModal = null; + var activeButton = null; + + function getFocusableElements(container) { + return Array.prototype.slice.call( + container.querySelectorAll('a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])') + ); + } + + function openPopup(button) { + var widget = button.closest('.ea-popup-widget'); + var modal = widget ? widget.querySelector('[data-ea-popup-modal]') : null; + + if (!modal) { + return; + } + + activeModal = modal; + activeButton = button; + + if (typeof modal.showModal === 'function' && !modal.open) { + modal.showModal(); + } else if (!modal.open) { + modal.setAttribute('open', ''); + } + + modal.classList.add('is-open'); + modal.setAttribute('aria-hidden', 'false'); + button.setAttribute('aria-expanded', 'true'); + document.body.classList.add('ea-popup-lock'); + + var focusable = getFocusableElements(modal); + if (focusable.length) { + focusable[0].focus(); + } + } + + function closePopup(modal) { + if (!modal) { + return; + } + + modal.classList.remove('is-open'); + modal.setAttribute('aria-hidden', 'true'); + + if (typeof modal.close === 'function' && modal.open) { + modal.close(); + } else { + modal.removeAttribute('open'); + } + + if (activeButton) { + activeButton.setAttribute('aria-expanded', 'false'); + activeButton.focus(); + } + + document.body.classList.remove('ea-popup-lock'); + activeModal = null; + activeButton = null; + } + + function trapFocus(event) { + if (!activeModal || event.key !== 'Tab') { + return; + } + + var focusable = getFocusableElements(activeModal); + if (!focusable.length) { + event.preventDefault(); + return; + } + + var first = focusable[0]; + var last = focusable[focusable.length - 1]; + + if (event.shiftKey && document.activeElement === first) { + event.preventDefault(); + last.focus(); + } else if (!event.shiftKey && document.activeElement === last) { + event.preventDefault(); + first.focus(); + } + } + + document.addEventListener('click', function (event) { + var openButton = event.target.closest('.ea-popup-button'); + var closeButton = event.target.closest('[data-ea-popup-close]'); + + if (openButton) { + event.preventDefault(); + openPopup(openButton); + return; + } + + if (closeButton) { + event.preventDefault(); + closePopup(closeButton.closest('[data-ea-popup-modal]')); + return; + } + + if (event.target.matches('[data-ea-popup-modal]')) { + closePopup(event.target); + } + }); + + document.addEventListener('keydown', function (event) { + if (event.key === 'Escape' && activeModal) { + closePopup(activeModal); + return; + } + + trapFocus(event); + }); +})(); diff --git a/wp-content/plugins/elementor-addon/assets/scss/main.scss b/wp-content/plugins/elementor-addon/assets/scss/main.scss new file mode 100644 index 0000000..c2ecf41 --- /dev/null +++ b/wp-content/plugins/elementor-addon/assets/scss/main.scss @@ -0,0 +1,163 @@ +$popup-button-bg: #1f7a8c; +$popup-button-bg-hover: #195f6d; +$popup-button-color: #fff; +$popup-overlay-bg: rgba(0, 0, 0, 0.55); +$popup-box-bg: #fff; +$popup-box-color: #1a1a1a; +$popup-close-color: #333; +$popup-close-color-hover: #111; +$popup-transition: 0.2s ease; +$popup-z-index: 2147483647; + +.ea-popup-widget { + display: block; +} + +.ea-popup-button { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + min-height: 44px; + padding: 12px 24px; + border: 1px solid transparent; + border-radius: 4px; + background: $popup-button-bg; + color: $popup-button-color; + font: inherit; + line-height: 1.2; + text-align: center; + text-decoration: none; + cursor: pointer; + transition: + background-color $popup-transition, + border-color $popup-transition, + color $popup-transition, + box-shadow $popup-transition, + transform $popup-transition; + + &:hover, + &:focus { + background: $popup-button-bg-hover; + color: $popup-button-color; + text-decoration: none; + } + + &:focus-visible { + outline: 2px solid currentColor; + outline-offset: 3px; + } +} + +.ea-popup-modal { + position: fixed; + inset: 0; + z-index: $popup-z-index; + width: 100vw; + max-width: none; + height: 100vh; + max-height: none; + margin: 0; + display: flex; + align-items: center; + justify-content: center; + padding: 24px; + border: 0; + background: $popup-overlay-bg; + opacity: 0; + visibility: hidden; + pointer-events: none; + transition: opacity $popup-transition, visibility $popup-transition; + + &:not([open]) { + display: none; + } + + &.is-open { + display: flex; + opacity: 1; + visibility: visible; + pointer-events: auto; + + .ea-popup-dialog { + transform: translateY(0); + } + } + + &::backdrop { + background: transparent; + } +} + +.ea-popup-dialog { + position: relative; + width: 100%; + margin: auto; + max-width: 720px; + max-height: calc(100vh - 48px); + overflow: auto; + padding: 32px; + border-radius: 8px; + background: $popup-box-bg; + color: $popup-box-color; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); + transform: translateY(12px); + transition: transform $popup-transition; +} + +.ea-popup-close { + position: absolute; + top: 12px; + right: 12px; + display: inline-flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + padding: 0; + border: 0; + border-radius: 50%; + background: transparent; + color: $popup-close-color; + font-size: 28px; + line-height: 1; + cursor: pointer; + + &:hover, + &:focus { + background: rgba(0, 0, 0, 0.08); + color: $popup-close-color-hover; + } + + &:focus-visible { + outline: 2px solid currentColor; + outline-offset: 3px; + } +} + +.ea-popup-content { + padding-right: 20px; + + > :first-child { + margin-top: 0; + } + + > :last-child { + margin-bottom: 0; + } +} + +body.ea-popup-lock { + overflow: hidden; +} + +@media (max-width: 767px) { + .ea-popup-modal { + padding: 16px; + } + + .ea-popup-dialog { + max-height: calc(100vh - 32px); + padding: 28px 22px; + } +} diff --git a/wp-content/plugins/elementor-addon/elementor-addon.php b/wp-content/plugins/elementor-addon/elementor-addon.php index 9781c33..498758d 100644 --- a/wp-content/plugins/elementor-addon/elementor-addon.php +++ b/wp-content/plugins/elementor-addon/elementor-addon.php @@ -1,7 +1,7 @@ register( new \Elementor_Vertical_Separator() ); - $widgets_manager->register( new \Elementor_Number_Box() ); + $widgets_manager->register( new \Elementor_Info_Box_Popup() ); } -add_action( 'elementor/widgets/register', 'register_hello_world_widget' ); +add_action( 'elementor/widgets/register', 'register_elementor_addon_widgets' ); /** * Register scripts/styles only. diff --git a/wp-content/plugins/elementor-addon/widgets/info-box-popup.php b/wp-content/plugins/elementor-addon/widgets/info-box-popup.php new file mode 100644 index 0000000..934dcf8 --- /dev/null +++ b/wp-content/plugins/elementor-addon/widgets/info-box-popup.php @@ -0,0 +1,536 @@ +start_controls_section( + 'section_content', + [ + 'label' => esc_html__( 'Content', 'elementor-addon' ), + ] + ); + + $this->add_control( + 'button_text', + [ + 'label' => esc_html__( 'Button Text', 'elementor-addon' ), + 'type' => Controls_Manager::TEXT, + 'default' => esc_html__( 'Czytaj wiecej', 'elementor-addon' ), + 'placeholder' => esc_html__( 'Czytaj wiecej', 'elementor-addon' ), + 'label_block' => true, + ] + ); + + $this->add_control( + 'popup_content', + [ + 'label' => esc_html__( 'Popup Content', 'elementor-addon' ), + 'type' => Controls_Manager::WYSIWYG, + 'default' => '

' . esc_html__( 'Write your popup content here.', 'elementor-addon' ) . '

', + 'show_label' => true, + ] + ); + + $this->add_control( + 'close_label', + [ + 'label' => esc_html__( 'Close Button Label', 'elementor-addon' ), + 'type' => Controls_Manager::TEXT, + 'default' => esc_html__( 'Close popup', 'elementor-addon' ), + 'label_block' => true, + ] + ); + + $this->end_controls_section(); + + $this->start_controls_section( + 'section_button_style', + [ + 'label' => esc_html__( 'Button', 'elementor-addon' ), + 'tab' => Controls_Manager::TAB_STYLE, + ] + ); + + $this->add_responsive_control( + 'button_align', + [ + 'label' => esc_html__( 'Alignment', 'elementor-addon' ), + 'type' => Controls_Manager::CHOOSE, + 'options' => [ + 'left' => [ + 'title' => esc_html__( 'Left', 'elementor-addon' ), + 'icon' => 'eicon-text-align-left', + ], + 'center' => [ + 'title' => esc_html__( 'Center', 'elementor-addon' ), + 'icon' => 'eicon-text-align-center', + ], + 'right' => [ + 'title' => esc_html__( 'Right', 'elementor-addon' ), + 'icon' => 'eicon-text-align-right', + ], + ], + 'default' => 'left', + 'selectors' => [ + '{{WRAPPER}} .ea-popup-widget' => 'text-align: {{VALUE}};', + ], + ] + ); + + $this->add_control( + 'button_full_width', + [ + 'label' => esc_html__( 'Full Width', 'elementor-addon' ), + 'type' => Controls_Manager::SWITCHER, + 'label_on' => esc_html__( 'Yes', 'elementor-addon' ), + 'label_off' => esc_html__( 'No', 'elementor-addon' ), + 'return_value' => 'yes', + 'selectors' => [ + '{{WRAPPER}} .ea-popup-button' => 'width: 100%;', + ], + ] + ); + + $this->add_group_control( + Group_Control_Typography::get_type(), + [ + 'name' => 'button_typography', + 'selector' => '{{WRAPPER}} .ea-popup-button', + ] + ); + + $this->add_responsive_control( + 'button_padding', + [ + 'label' => esc_html__( 'Padding', 'elementor-addon' ), + 'type' => Controls_Manager::DIMENSIONS, + 'size_units' => [ 'px', 'em', 'rem' ], + 'selectors' => [ + '{{WRAPPER}} .ea-popup-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', + ], + ] + ); + + $this->add_group_control( + Group_Control_Border::get_type(), + [ + 'name' => 'button_border', + 'selector' => '{{WRAPPER}} .ea-popup-button', + ] + ); + + $this->add_responsive_control( + 'button_border_radius', + [ + 'label' => esc_html__( 'Border Radius', 'elementor-addon' ), + 'type' => Controls_Manager::DIMENSIONS, + 'size_units' => [ 'px', '%', 'em', 'rem' ], + 'selectors' => [ + '{{WRAPPER}} .ea-popup-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', + ], + ] + ); + + $this->add_group_control( + Group_Control_Box_Shadow::get_type(), + [ + 'name' => 'button_box_shadow', + 'selector' => '{{WRAPPER}} .ea-popup-button', + ] + ); + + $this->start_controls_tabs( 'button_style_tabs' ); + + $this->start_controls_tab( + 'button_style_normal', + [ + 'label' => esc_html__( 'Normal', 'elementor-addon' ), + ] + ); + + $this->add_control( + 'button_text_color', + [ + 'label' => esc_html__( 'Text Color', 'elementor-addon' ), + 'type' => Controls_Manager::COLOR, + 'selectors' => [ + '{{WRAPPER}} .ea-popup-button' => 'color: {{VALUE}};', + ], + ] + ); + + $this->add_control( + 'button_background_color', + [ + 'label' => esc_html__( 'Background Color', 'elementor-addon' ), + 'type' => Controls_Manager::COLOR, + 'selectors' => [ + '{{WRAPPER}} .ea-popup-button' => 'background-color: {{VALUE}};', + ], + ] + ); + + $this->end_controls_tab(); + + $this->start_controls_tab( + 'button_style_hover', + [ + 'label' => esc_html__( 'Hover', 'elementor-addon' ), + ] + ); + + $this->add_control( + 'button_hover_text_color', + [ + 'label' => esc_html__( 'Text Color', 'elementor-addon' ), + 'type' => Controls_Manager::COLOR, + 'selectors' => [ + '{{WRAPPER}} .ea-popup-button:hover, {{WRAPPER}} .ea-popup-button:focus' => 'color: {{VALUE}};', + ], + ] + ); + + $this->add_control( + 'button_hover_background_color', + [ + 'label' => esc_html__( 'Background Color', 'elementor-addon' ), + 'type' => Controls_Manager::COLOR, + 'selectors' => [ + '{{WRAPPER}} .ea-popup-button:hover, {{WRAPPER}} .ea-popup-button:focus' => 'background-color: {{VALUE}};', + ], + ] + ); + + $this->add_control( + 'button_hover_border_color', + [ + 'label' => esc_html__( 'Border Color', 'elementor-addon' ), + 'type' => Controls_Manager::COLOR, + 'selectors' => [ + '{{WRAPPER}} .ea-popup-button:hover, {{WRAPPER}} .ea-popup-button:focus' => 'border-color: {{VALUE}};', + ], + ] + ); + + $this->end_controls_tab(); + $this->end_controls_tabs(); + $this->end_controls_section(); + + $this->start_controls_section( + 'section_overlay_style', + [ + 'label' => esc_html__( 'Overlay', 'elementor-addon' ), + 'tab' => Controls_Manager::TAB_STYLE, + ] + ); + + $this->add_control( + 'overlay_background_color', + [ + 'label' => esc_html__( 'Background Color', 'elementor-addon' ), + 'type' => Controls_Manager::COLOR, + 'default' => 'rgba(0, 0, 0, 0.55)', + 'selectors' => [ + '{{WRAPPER}} .ea-popup-modal' => 'background-color: {{VALUE}};', + ], + ] + ); + + $this->end_controls_section(); + + $this->start_controls_section( + 'section_popup_style', + [ + 'label' => esc_html__( 'Popup Box', 'elementor-addon' ), + 'tab' => Controls_Manager::TAB_STYLE, + ] + ); + + $this->add_responsive_control( + 'popup_width', + [ + 'label' => esc_html__( 'Width', 'elementor-addon' ), + 'type' => Controls_Manager::SLIDER, + 'size_units' => [ 'px', '%', 'vw' ], + 'range' => [ + 'px' => [ + 'min' => 260, + 'max' => 1200, + ], + '%' => [ + 'min' => 20, + 'max' => 100, + ], + 'vw' => [ + 'min' => 20, + 'max' => 100, + ], + ], + 'default' => [ + 'unit' => 'px', + 'size' => 720, + ], + 'selectors' => [ + '{{WRAPPER}} .ea-popup-dialog' => 'max-width: {{SIZE}}{{UNIT}};', + ], + ] + ); + + $this->add_responsive_control( + 'popup_padding', + [ + 'label' => esc_html__( 'Padding', 'elementor-addon' ), + 'type' => Controls_Manager::DIMENSIONS, + 'size_units' => [ 'px', 'em', 'rem' ], + 'selectors' => [ + '{{WRAPPER}} .ea-popup-dialog' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', + ], + ] + ); + + $this->add_group_control( + Group_Control_Background::get_type(), + [ + 'name' => 'popup_background', + 'types' => [ 'classic', 'gradient' ], + 'selector' => '{{WRAPPER}} .ea-popup-dialog', + ] + ); + + $this->add_group_control( + Group_Control_Border::get_type(), + [ + 'name' => 'popup_border', + 'selector' => '{{WRAPPER}} .ea-popup-dialog', + ] + ); + + $this->add_responsive_control( + 'popup_border_radius', + [ + 'label' => esc_html__( 'Border Radius', 'elementor-addon' ), + 'type' => Controls_Manager::DIMENSIONS, + 'size_units' => [ 'px', '%', 'em', 'rem' ], + 'selectors' => [ + '{{WRAPPER}} .ea-popup-dialog' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', + ], + ] + ); + + $this->add_group_control( + Group_Control_Box_Shadow::get_type(), + [ + 'name' => 'popup_box_shadow', + 'selector' => '{{WRAPPER}} .ea-popup-dialog', + ] + ); + + $this->end_controls_section(); + + $this->start_controls_section( + 'section_popup_content_style', + [ + 'label' => esc_html__( 'Popup Content', 'elementor-addon' ), + 'tab' => Controls_Manager::TAB_STYLE, + ] + ); + + $this->add_control( + 'content_text_color', + [ + 'label' => esc_html__( 'Text Color', 'elementor-addon' ), + 'type' => Controls_Manager::COLOR, + 'selectors' => [ + '{{WRAPPER}} .ea-popup-content' => 'color: {{VALUE}};', + ], + ] + ); + + $this->add_group_control( + Group_Control_Typography::get_type(), + [ + 'name' => 'content_typography', + 'selector' => '{{WRAPPER}} .ea-popup-content', + ] + ); + + $this->add_responsive_control( + 'content_align', + [ + 'label' => esc_html__( 'Alignment', 'elementor-addon' ), + 'type' => Controls_Manager::CHOOSE, + 'options' => [ + 'left' => [ + 'title' => esc_html__( 'Left', 'elementor-addon' ), + 'icon' => 'eicon-text-align-left', + ], + 'center' => [ + 'title' => esc_html__( 'Center', 'elementor-addon' ), + 'icon' => 'eicon-text-align-center', + ], + 'right' => [ + 'title' => esc_html__( 'Right', 'elementor-addon' ), + 'icon' => 'eicon-text-align-right', + ], + ], + 'selectors' => [ + '{{WRAPPER}} .ea-popup-content' => 'text-align: {{VALUE}};', + ], + ] + ); + + $this->end_controls_section(); + + $this->start_controls_section( + 'section_close_style', + [ + 'label' => esc_html__( 'Close Button', 'elementor-addon' ), + 'tab' => Controls_Manager::TAB_STYLE, + ] + ); + + $this->add_control( + 'close_color', + [ + 'label' => esc_html__( 'Color', 'elementor-addon' ), + 'type' => Controls_Manager::COLOR, + 'selectors' => [ + '{{WRAPPER}} .ea-popup-close' => 'color: {{VALUE}};', + ], + ] + ); + + $this->add_control( + 'close_background_color', + [ + 'label' => esc_html__( 'Background Color', 'elementor-addon' ), + 'type' => Controls_Manager::COLOR, + 'selectors' => [ + '{{WRAPPER}} .ea-popup-close' => 'background-color: {{VALUE}};', + ], + ] + ); + + $this->add_responsive_control( + 'close_size', + [ + 'label' => esc_html__( 'Size', 'elementor-addon' ), + 'type' => Controls_Manager::SLIDER, + 'size_units' => [ 'px', 'em', 'rem' ], + 'range' => [ + 'px' => [ + 'min' => 24, + 'max' => 80, + ], + ], + 'selectors' => [ + '{{WRAPPER}} .ea-popup-close' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};', + ], + ] + ); + + $this->add_responsive_control( + 'close_icon_size', + [ + 'label' => esc_html__( 'Icon Size', 'elementor-addon' ), + 'type' => Controls_Manager::SLIDER, + 'size_units' => [ 'px', 'em', 'rem' ], + 'range' => [ + 'px' => [ + 'min' => 12, + 'max' => 48, + ], + ], + 'selectors' => [ + '{{WRAPPER}} .ea-popup-close' => 'font-size: {{SIZE}}{{UNIT}};', + ], + ] + ); + + $this->end_controls_section(); + } + + protected function render() { + $settings = $this->get_settings_for_display(); + $widget_id = 'ea-popup-' . $this->get_id(); + $button_id = $widget_id . '-button'; + $dialog_id = $widget_id . '-dialog'; + $button_text = ! empty( $settings['button_text'] ) ? $settings['button_text'] : esc_html__( 'Czytaj wiecej', 'elementor-addon' ); + $close_label = ! empty( $settings['close_label'] ) ? $settings['close_label'] : esc_html__( 'Close popup', 'elementor-addon' ); + + $this->add_render_attribute( + 'wrapper', + [ + 'class' => 'ea-popup-widget', + ] + ); + + $this->add_render_attribute( + 'button', + [ + 'id' => $button_id, + 'class' => 'ea-popup-button', + 'type' => 'button', + 'aria-haspopup' => 'dialog', + 'aria-controls' => $dialog_id, + 'aria-expanded' => 'false', + ] + ); + ?> +
print_render_attribute_string( 'wrapper' ); ?>> + + + +
+ start_controls_section( - 'section_number', - [ - 'label' => esc_html__( 'Number Box', 'elementor-addon' ), - ] - ); - - $this->add_control( - 'number_text', - [ - 'label' => esc_html__( 'Number', 'elementor-addon' ), - 'type' => Controls_Manager::TEXT, - 'dynamic' => [ - 'active' => true, - ], - 'default' => '1', - 'placeholder' => esc_html__( 'Enter number', 'elementor-addon' ), - ] - ); - - $this->add_control( - 'view', - [ - 'label' => esc_html__( 'View', 'elementor-addon' ), - 'type' => Controls_Manager::SELECT, - 'options' => [ - 'default' => esc_html__( 'Default', 'elementor-addon' ), - 'stacked' => esc_html__( 'Stacked', 'elementor-addon' ), - 'framed' => esc_html__( 'Framed', 'elementor-addon' ), - ], - 'default' => 'default', - 'prefix_class' => 'elementor-view-', - ] - ); - - $this->add_control( - 'shape', - [ - 'label' => esc_html__( 'Shape', 'elementor-addon' ), - 'type' => Controls_Manager::SELECT, - 'options' => [ - 'square' => esc_html__( 'Square', 'elementor-addon' ), - 'rounded' => esc_html__( 'Rounded', 'elementor-addon' ), - 'circle' => esc_html__( 'Circle', 'elementor-addon' ), - ], - 'default' => 'circle', - 'condition' => [ - 'view!' => 'default', - ], - 'prefix_class' => 'elementor-shape-', - ] - ); - - $this->add_control( - 'title_text', - [ - 'label' => esc_html__( 'Title', 'elementor-addon' ), - 'type' => Controls_Manager::TEXT, - 'dynamic' => [ - 'active' => true, - ], - 'default' => esc_html__( 'This is the heading', 'elementor-addon' ), - 'placeholder' => esc_html__( 'Enter your title', 'elementor-addon' ), - 'label_block' => true, - ] - ); - - $this->add_control( - 'description_text', - [ - 'label' => esc_html__( 'Description', 'elementor-addon' ), - 'type' => Controls_Manager::TEXTAREA, - 'dynamic' => [ - 'active' => true, - ], - 'default' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor-addon' ), - 'placeholder' => esc_html__( 'Enter your description', 'elementor-addon' ), - 'rows' => 10, - ] - ); - - $this->add_control( - 'link', - [ - 'label' => esc_html__( 'Link', 'elementor-addon' ), - 'type' => Controls_Manager::URL, - 'dynamic' => [ - 'active' => true, - ], - 'separator' => 'before', - ] - ); - - $this->add_control( - 'title_size', - [ - 'label' => esc_html__( 'Title HTML Tag', 'elementor-addon' ), - 'type' => Controls_Manager::SELECT, - 'options' => [ - 'h1' => 'H1', - 'h2' => 'H2', - 'h3' => 'H3', - 'h4' => 'H4', - 'h5' => 'H5', - 'h6' => 'H6', - 'div' => 'div', - 'span' => 'span', - 'p' => 'p', - ], - 'default' => 'h3', - ] - ); - - $this->end_controls_section(); - - // Style: Box - $this->start_controls_section( - 'section_style_box', - [ - 'label' => esc_html__( 'Box', 'elementor-addon' ), - 'tab' => Controls_Manager::TAB_STYLE, - ] - ); - - $this->add_responsive_control( - 'position', - [ - 'label' => esc_html__( 'Number Position', 'elementor-addon' ), - 'type' => Controls_Manager::CHOOSE, - 'default' => 'block-start', - 'mobile_default' => 'block-start', - 'options' => [ - 'inline-start' => [ - 'title' => esc_html__( 'Start', 'elementor-addon' ), - 'icon' => 'eicon-h-align-left', - ], - 'inline-end' => [ - 'title' => esc_html__( 'End', 'elementor-addon' ), - 'icon' => 'eicon-h-align-right', - ], - 'block-start' => [ - 'title' => esc_html__( 'Top', 'elementor-addon' ), - 'icon' => 'eicon-v-align-top', - ], - 'block-end' => [ - 'title' => esc_html__( 'Bottom', 'elementor-addon' ), - 'icon' => 'eicon-v-align-bottom', - ], - ], - 'classes' => 'elementor-control-start-end', - 'classes_dictionary' => [ - 'left' => is_rtl() ? 'inline-end' : 'inline-start', - 'right' => is_rtl() ? 'inline-start' : 'inline-end', - 'top' => 'block-start', - 'bottom' => 'block-end', - ], - 'prefix_class' => 'elementor%s-position-', - ] - ); - - $this->add_responsive_control( - 'content_vertical_alignment', - [ - 'label' => esc_html__( 'Vertical Alignment', 'elementor-addon' ), - 'type' => Controls_Manager::CHOOSE, - 'options' => [ - 'top' => [ - 'title' => esc_html__( 'Top', 'elementor-addon' ), - 'icon' => 'eicon-v-align-top', - ], - 'middle' => [ - 'title' => esc_html__( 'Middle', 'elementor-addon' ), - 'icon' => 'eicon-v-align-middle', - ], - 'bottom' => [ - 'title' => esc_html__( 'Bottom', 'elementor-addon' ), - 'icon' => 'eicon-v-align-bottom', - ], - ], - 'default' => 'top', - 'selectors_dictionary' => [ - 'top' => 'start', - 'middle' => 'center', - 'bottom' => 'end', - ], - 'selectors' => [ - '{{WRAPPER}} .elementor-number-box-wrapper' => 'align-items: {{VALUE}};', - ], - 'condition' => [ - 'position' => [ 'left', 'right', 'inline-start', 'inline-end' ], - ], - ] - ); - - $this->add_responsive_control( - 'text_align', - [ - 'label' => esc_html__( 'Alignment', 'elementor-addon' ), - 'type' => Controls_Manager::CHOOSE, - 'options' => [ - 'start' => [ - 'title' => esc_html__( 'Start', 'elementor-addon' ), - 'icon' => 'eicon-text-align-left', - ], - 'center' => [ - 'title' => esc_html__( 'Center', 'elementor-addon' ), - 'icon' => 'eicon-text-align-center', - ], - 'end' => [ - 'title' => esc_html__( 'End', 'elementor-addon' ), - 'icon' => 'eicon-text-align-right', - ], - 'justify' => [ - 'title' => esc_html__( 'Justified', 'elementor-addon' ), - 'icon' => 'eicon-text-align-justify', - ], - ], - 'classes' => 'elementor-control-start-end', - 'selectors_dictionary' => [ - 'left' => is_rtl() ? 'end' : 'start', - 'right' => is_rtl() ? 'start' : 'end', - ], - 'selectors' => [ - '{{WRAPPER}} .elementor-number-box-wrapper' => 'text-align: {{VALUE}};', - ], - 'separator' => 'after', - ] - ); - - $this->add_responsive_control( - 'number_space', - [ - 'label' => esc_html__( 'Number Spacing', 'elementor-addon' ), - 'type' => Controls_Manager::SLIDER, - 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], - 'default' => [ - 'size' => 15, - ], - 'range' => [ - 'px' => [ - 'max' => 100, - ], - 'em' => [ - 'max' => 10, - ], - 'rem' => [ - 'max' => 10, - ], - ], - 'selectors' => [ - '{{WRAPPER}} .elementor-number-box-wrapper' => 'gap: {{SIZE}}{{UNIT}};', - ], - ] - ); - - $this->add_responsive_control( - 'title_bottom_space', - [ - 'label' => esc_html__( 'Content Spacing', 'elementor-addon' ), - 'type' => Controls_Manager::SLIDER, - 'size_units' => [ 'px', 'em', 'rem', 'custom' ], - 'range' => [ - 'px' => [ - 'max' => 100, - ], - 'em' => [ - 'min' => 0, - 'max' => 10, - ], - 'rem' => [ - 'min' => 0, - 'max' => 10, - ], - ], - 'selectors' => [ - '{{WRAPPER}} .elementor-number-box-title' => 'margin-block-end: {{SIZE}}{{UNIT}};', - ], - ] - ); - - $this->end_controls_section(); - - // Style: Number - $this->start_controls_section( - 'section_style_number', - [ - 'label' => esc_html__( 'Number', 'elementor-addon' ), - 'tab' => Controls_Manager::TAB_STYLE, - ] - ); - - $this->add_responsive_control( - 'number_box_width', - [ - 'label' => esc_html__( 'Width', 'elementor-addon' ), - 'type' => Controls_Manager::SLIDER, - 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], - 'range' => [ - 'px' => [ - 'min' => 10, - 'max' => 500, - ], - ], - 'selectors' => [ - '{{WRAPPER}} .elementor-number-box-number' => 'width: {{SIZE}}{{UNIT}};', - ], - ] - ); - - $this->add_responsive_control( - 'number_box_height', - [ - 'label' => esc_html__( 'Height', 'elementor-addon' ), - 'type' => Controls_Manager::SLIDER, - 'size_units' => [ 'px', '%', 'em', 'rem', 'vh', 'custom' ], - 'range' => [ - 'px' => [ - 'min' => 10, - 'max' => 500, - ], - ], - 'selectors' => [ - '{{WRAPPER}} .elementor-number-box-number' => 'height: {{SIZE}}{{UNIT}};', - ], - ] - ); - - $this->add_responsive_control( - 'number_box_justify', - [ - 'label' => esc_html__( 'Horizontal Alignment', 'elementor-addon' ), - 'type' => Controls_Manager::CHOOSE, - 'options' => [ - 'flex-start' => [ - 'title' => esc_html__( 'Start', 'elementor-addon' ), - 'icon' => 'eicon-h-align-left', - ], - 'center' => [ - 'title' => esc_html__( 'Center', 'elementor-addon' ), - 'icon' => 'eicon-h-align-center', - ], - 'flex-end' => [ - 'title' => esc_html__( 'End', 'elementor-addon' ), - 'icon' => 'eicon-h-align-right', - ], - ], - 'default' => 'center', - 'selectors' => [ - '{{WRAPPER}} .elementor-number-box-number' => 'display: flex; justify-content: {{VALUE}};', - ], - ] - ); - - $this->add_responsive_control( - 'number_box_align', - [ - 'label' => esc_html__( 'Vertical Alignment', 'elementor-addon' ), - 'type' => Controls_Manager::CHOOSE, - 'options' => [ - 'flex-start' => [ - 'title' => esc_html__( 'Top', 'elementor-addon' ), - 'icon' => 'eicon-v-align-top', - ], - 'center' => [ - 'title' => esc_html__( 'Middle', 'elementor-addon' ), - 'icon' => 'eicon-v-align-middle', - ], - 'flex-end' => [ - 'title' => esc_html__( 'Bottom', 'elementor-addon' ), - 'icon' => 'eicon-v-align-bottom', - ], - ], - 'default' => 'center', - 'selectors' => [ - '{{WRAPPER}} .elementor-number-box-number' => 'display: flex; align-items: {{VALUE}};', - ], - ] - ); - - $this->add_control( - 'number_box_bg_color', - [ - 'label' => esc_html__( 'Background Color', 'elementor-addon' ), - 'type' => Controls_Manager::COLOR, - 'selectors' => [ - '{{WRAPPER}} .elementor-number-box-number' => 'background-color: {{VALUE}};', - ], - 'separator' => 'before', - ] - ); - - $this->add_control( - 'number_box_text_color', - [ - 'label' => esc_html__( 'Number Color', 'elementor-addon' ), - 'type' => Controls_Manager::COLOR, - 'selectors' => [ - '{{WRAPPER}} .elementor-number-box-number .elementor-number' => 'color: {{VALUE}};', - ], - ] - ); - - $this->add_responsive_control( - 'number_box_border_radius', - [ - 'label' => esc_html__( 'Border Radius', 'elementor-addon' ), - 'type' => Controls_Manager::DIMENSIONS, - 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ], - 'selectors' => [ - '{{WRAPPER}} .elementor-number-box-number' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', - ], - 'separator' => 'after', - ] - ); - - $this->start_controls_tabs( 'number_colors' ); - - $this->start_controls_tab( - 'number_colors_normal', - [ - 'label' => esc_html__( 'Normal', 'elementor-addon' ), - ] - ); - - $this->add_control( - 'primary_color', - [ - 'label' => esc_html__( 'Primary Color', 'elementor-addon' ), - 'type' => Controls_Manager::COLOR, - 'global' => [ - 'default' => Global_Colors::COLOR_PRIMARY, - ], - 'default' => '', - 'selectors' => [ - '{{WRAPPER}}.elementor-view-stacked .elementor-number' => 'background-color: {{VALUE}};', - '{{WRAPPER}}.elementor-view-framed .elementor-number, {{WRAPPER}}.elementor-view-default .elementor-number' => 'color: {{VALUE}}; border-color: {{VALUE}};', - ], - ] - ); - - $this->add_control( - 'secondary_color', - [ - 'label' => esc_html__( 'Secondary Color', 'elementor-addon' ), - 'type' => Controls_Manager::COLOR, - 'default' => '', - 'condition' => [ - 'view!' => 'default', - ], - 'selectors' => [ - '{{WRAPPER}}.elementor-view-framed .elementor-number' => 'background-color: {{VALUE}};', - '{{WRAPPER}}.elementor-view-stacked .elementor-number' => 'color: {{VALUE}};', - ], - ] - ); - - $this->end_controls_tab(); - - $this->start_controls_tab( - 'number_colors_hover', - [ - 'label' => esc_html__( 'Hover', 'elementor-addon' ), - ] - ); - - $this->add_control( - 'hover_primary_color', - [ - 'label' => esc_html__( 'Primary Color', 'elementor-addon' ), - 'type' => Controls_Manager::COLOR, - 'default' => '', - 'selectors' => [ - '{{WRAPPER}}.elementor-view-stacked:has(:hover) .elementor-number, - {{WRAPPER}}.elementor-view-stacked:has(:focus) .elementor-number' => 'background-color: {{VALUE}};', - '{{WRAPPER}}.elementor-view-framed:has(:hover) .elementor-number, - {{WRAPPER}}.elementor-view-default:has(:hover) .elementor-number, - {{WRAPPER}}.elementor-view-framed:has(:focus) .elementor-number, - {{WRAPPER}}.elementor-view-default:has(:focus) .elementor-number' => 'color: {{VALUE}}; border-color: {{VALUE}};', - ], - ] - ); - - $this->add_control( - 'hover_secondary_color', - [ - 'label' => esc_html__( 'Secondary Color', 'elementor-addon' ), - 'type' => Controls_Manager::COLOR, - 'default' => '', - 'condition' => [ - 'view!' => 'default', - ], - 'selectors' => [ - '{{WRAPPER}}.elementor-view-framed:has(:hover) .elementor-number, - {{WRAPPER}}.elementor-view-framed:has(:focus) .elementor-number' => 'background-color: {{VALUE}};', - '{{WRAPPER}}.elementor-view-stacked:has(:hover) .elementor-number, - {{WRAPPER}}.elementor-view-stacked:has(:focus) .elementor-number' => 'color: {{VALUE}};', - ], - ] - ); - - $this->add_control( - 'hover_number_colors_transition_duration', - [ - 'label' => esc_html__( 'Transition Duration', 'elementor-addon' ), - 'type' => Controls_Manager::SLIDER, - 'size_units' => [ 's', 'ms', 'custom' ], - 'default' => [ - 'unit' => 's', - ], - 'selectors' => [ - '{{WRAPPER}} .elementor-number' => 'transition-duration: {{SIZE}}{{UNIT}};', - ], - ] - ); - - $this->add_control( - 'hover_animation', - [ - 'label' => esc_html__( 'Hover Animation', 'elementor-addon' ), - 'type' => Controls_Manager::HOVER_ANIMATION, - ] - ); - - $this->end_controls_tab(); - - $this->end_controls_tabs(); - - $this->add_responsive_control( - 'number_size', - [ - 'label' => esc_html__( 'Size', 'elementor-addon' ), - 'type' => Controls_Manager::SLIDER, - 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], - 'range' => [ - 'px' => [ - 'min' => 6, - 'max' => 300, - ], - ], - 'selectors' => [ - '{{WRAPPER}} .elementor-number' => 'font-size: {{SIZE}}{{UNIT}};', - ], - ] - ); - - $this->add_group_control( - Group_Control_Typography::get_type(), - [ - 'name' => 'number_typography', - 'selector' => '{{WRAPPER}} .elementor-number', - 'global' => [ - 'default' => Global_Typography::TYPOGRAPHY_PRIMARY, - ], - ] - ); - - $this->add_group_control( - Group_Control_Text_Stroke::get_type(), - [ - 'name' => 'number_stroke', - 'selector' => '{{WRAPPER}} .elementor-number', - ] - ); - - $this->add_group_control( - Group_Control_Text_Shadow::get_type(), - [ - 'name' => 'number_shadow', - 'selector' => '{{WRAPPER}} .elementor-number', - ] - ); - - $this->add_responsive_control( - 'number_padding', - [ - 'label' => esc_html__( 'Padding', 'elementor-addon' ), - 'type' => Controls_Manager::SLIDER, - 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], - 'selectors' => [ - '{{WRAPPER}} .elementor-number' => 'padding: {{SIZE}}{{UNIT}};', - ], - 'range' => [ - 'px' => [ - 'max' => 50, - ], - 'em' => [ - 'min' => 0, - 'max' => 5, - ], - 'rem' => [ - 'min' => 0, - 'max' => 5, - ], - ], - 'condition' => [ - 'view!' => 'default', - ], - ] - ); - - $this->add_responsive_control( - 'border_width', - [ - 'label' => esc_html__( 'Border Width', 'elementor-addon' ), - 'type' => Controls_Manager::DIMENSIONS, - 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], - 'selectors' => [ - '{{WRAPPER}} .elementor-number' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', - ], - 'condition' => [ - 'view' => 'framed', - ], - ] - ); - - $this->add_responsive_control( - 'border_radius', - [ - 'label' => esc_html__( 'Border Radius', 'elementor-addon' ), - 'type' => Controls_Manager::DIMENSIONS, - 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ], - 'selectors' => [ - '{{WRAPPER}} .elementor-number' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', - ], - 'condition' => [ - 'view!' => 'default', - ], - 'separator' => 'before', - ] - ); - - $this->end_controls_section(); - - // Style: Content - $this->start_controls_section( - 'section_style_content', - [ - 'label' => esc_html__( 'Content', 'elementor-addon' ), - 'tab' => Controls_Manager::TAB_STYLE, - ] - ); - - $this->add_control( - 'heading_title', - [ - 'label' => esc_html__( 'Title', 'elementor-addon' ), - 'type' => Controls_Manager::HEADING, - 'separator' => 'before', - ] - ); - - $this->add_group_control( - Group_Control_Typography::get_type(), - [ - 'name' => 'title_typography', - 'selector' => '{{WRAPPER}} .elementor-number-box-title, {{WRAPPER}} .elementor-number-box-title a', - 'global' => [ - 'default' => Global_Typography::TYPOGRAPHY_PRIMARY, - ], - ] - ); - - $this->add_group_control( - Group_Control_Text_Stroke::get_type(), - [ - 'name' => 'text_stroke', - 'selector' => '{{WRAPPER}} .elementor-number-box-title', - ] - ); - - $this->add_group_control( - Group_Control_Text_Shadow::get_type(), - [ - 'name' => 'title_shadow', - 'selector' => '{{WRAPPER}} .elementor-number-box-title', - ] - ); - - $this->start_controls_tabs( 'number_box_title_colors' ); - - $this->start_controls_tab( - 'number_box_title_colors_normal', - [ - 'label' => esc_html__( 'Normal', 'elementor-addon' ), - ] - ); - - $this->add_control( - 'title_color', - [ - 'label' => esc_html__( 'Color', 'elementor-addon' ), - 'type' => Controls_Manager::COLOR, - 'default' => '', - 'selectors' => [ - '{{WRAPPER}} .elementor-number-box-title' => 'color: {{VALUE}};', - ], - 'global' => [ - 'default' => Global_Colors::COLOR_PRIMARY, - ], - ] - ); - - $this->end_controls_tab(); - - $this->start_controls_tab( - 'number_box_title_colors_hover', - [ - 'label' => esc_html__( 'Hover', 'elementor-addon' ), - ] - ); - - $this->add_control( - 'hover_title_color', - [ - 'label' => esc_html__( 'Color', 'elementor-addon' ), - 'type' => Controls_Manager::COLOR, - 'default' => '', - 'selectors' => [ - '{{WRAPPER}}:has(:hover) .elementor-number-box-title, - {{WRAPPER}}:has(:focus) .elementor-number-box-title' => 'color: {{VALUE}};', - ], - 'global' => [ - 'default' => Global_Colors::COLOR_PRIMARY, - ], - ] - ); - - $this->add_control( - 'hover_title_color_transition_duration', - [ - 'label' => esc_html__( 'Transition Duration', 'elementor-addon' ), - 'type' => Controls_Manager::SLIDER, - 'size_units' => [ 's', 'ms', 'custom' ], - 'default' => [ - 'unit' => 's', - ], - 'selectors' => [ - '{{WRAPPER}} .elementor-number-box-title' => 'transition-duration: {{SIZE}}{{UNIT}};', - ], - ] - ); - - $this->end_controls_tab(); - - $this->end_controls_tabs(); - - $this->add_responsive_control( - 'title_width', - [ - 'label' => esc_html__( 'Width', 'elementor-addon' ), - 'type' => Controls_Manager::SLIDER, - 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], - 'range' => [ - 'px' => [ - 'min' => 10, - 'max' => 1000, - ], - ], - 'selectors' => [ - '{{WRAPPER}} .elementor-number-box-title' => 'width: {{SIZE}}{{UNIT}};', - ], - ] - ); - - $this->add_control( - 'heading_description', - [ - 'label' => esc_html__( 'Description', 'elementor-addon' ), - 'type' => Controls_Manager::HEADING, - 'separator' => 'before', - ] - ); - - $this->add_group_control( - Group_Control_Typography::get_type(), - [ - 'name' => 'description_typography', - 'selector' => '{{WRAPPER}} .elementor-number-box-description', - 'global' => [ - 'default' => Global_Typography::TYPOGRAPHY_TEXT, - ], - ] - ); - - $this->add_group_control( - Group_Control_Text_Shadow::get_type(), - [ - 'name' => 'description_shadow', - 'selector' => '{{WRAPPER}} .elementor-number-box-description', - ] - ); - - $this->add_responsive_control( - 'description_width', - [ - 'label' => esc_html__( 'Width', 'elementor-addon' ), - 'type' => Controls_Manager::SLIDER, - 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ], - 'range' => [ - 'px' => [ - 'min' => 10, - 'max' => 1000, - ], - ], - 'selectors' => [ - '{{WRAPPER}} .elementor-number-box-description' => 'width: {{SIZE}}{{UNIT}};', - ], - ] - ); - - $this->add_control( - 'description_color', - [ - 'label' => esc_html__( 'Color', 'elementor-addon' ), - 'type' => Controls_Manager::COLOR, - 'default' => '', - 'selectors' => [ - '{{WRAPPER}} .elementor-number-box-description' => 'color: {{VALUE}};', - ], - 'global' => [ - 'default' => Global_Colors::COLOR_TEXT, - ], - ] - ); - - $this->end_controls_section(); - } - - protected function render() { - $settings = $this->get_settings_for_display(); - $has_link = ! empty( $settings['link']['url'] ); - $html_tag = $has_link ? 'a' : 'span'; - - $this->add_render_attribute( 'number', 'class', 'elementor-number' ); - - if ( ! empty( $settings['hover_animation'] ) ) { - $this->add_render_attribute( 'number', 'class', 'elementor-animation-' . $settings['hover_animation'] ); - } - - $has_number = ! \Elementor\Utils::is_empty( $settings['number_text'] ); - $has_content = ! \Elementor\Utils::is_empty( $settings['title_text'] ) || ! \Elementor\Utils::is_empty( $settings['description_text'] ); - - if ( ! $has_number && ! $has_content ) { - return; - } - - if ( $has_link ) { - $this->add_link_attributes( 'link', $settings['link'] ); - $this->add_render_attribute( 'number', 'tabindex', '-1' ); - if ( ! empty( $settings['title_text'] ) ) { - $this->add_render_attribute( 'number', 'aria-label', $settings['title_text'] ); - } - } - - $this->add_render_attribute( 'description_text', 'class', 'elementor-number-box-description' ); - - $this->add_inline_editing_attributes( 'title_text', 'none' ); - $this->add_inline_editing_attributes( 'description_text' ); - ?> -
- - -
- < print_render_attribute_string( 'link' ); ?> print_render_attribute_string( 'number' ); ?>> - - > -
- - - -
- - - < class="elementor-number-box-title"> - < print_render_attribute_string( 'link' ); ?> print_render_attribute_string( 'title_text' ); ?>> - - > - > - - - -

print_render_attribute_string( 'description_text' ); ?>> - -

- - -
- - -
- - <# - var hasNumber = !! settings.number_text; - var hasContent = settings.title_text || settings.description_text; - - if ( ! hasNumber && ! hasContent ) { - return; - } - - var hasLink = settings.link?.url, - htmlTag = hasLink ? 'a' : 'span', - titleSizeTag = elementor.helpers.validateHTMLTag( settings.title_size ); - - view.addRenderAttribute( 'number', 'class', 'elementor-number' ); - - if ( '' !== settings.hover_animation ) { - view.addRenderAttribute( 'number', 'class', 'elementor-animation-' + settings.hover_animation ); - } - - if ( hasLink ) { - view.addRenderAttribute( 'link', 'href', elementor.helpers.sanitizeUrl( settings.link?.url ) ); - view.addRenderAttribute( 'number', 'tabindex', '-1' ); - if ( '' !== settings.title_text ) { - view.addRenderAttribute( 'number', 'aria-label', settings.title_text ); - } - } - - view.addRenderAttribute( 'description_text', 'class', 'elementor-number-box-description' ); - - view.addInlineEditingAttributes( 'title_text', 'none' ); - view.addInlineEditingAttributes( 'description_text' ); - #> -
- - <# if ( hasNumber ) { #> -
- <{{{ htmlTag }}} {{{ view.getRenderAttributeString( 'link' ) }}} {{{ view.getRenderAttributeString( 'number' ) }}}> - {{{ elementor.helpers.sanitize( settings.number_text ) }}} - -
- <# } #> - - <# if ( hasContent ) { #> -
- - <# if ( settings.title_text ) { #> - <{{{ titleSizeTag }}} class="elementor-number-box-title"> - <{{{ htmlTag }}} {{{ view.getRenderAttributeString( 'link' ) }}} {{{ view.getRenderAttributeString( 'title_text' ) }}}> - {{{ elementor.helpers.sanitize( settings.title_text ) }}} - - - <# } #> - - <# if ( settings.description_text ) { #> -

{{{ elementor.helpers.sanitize( settings.description_text ) }}}

- <# } #> - -
- <# } #> - -
- start_controls_section( - 'section_setting', - [ - 'label' => esc_html__( 'Settings', 'elementor' ), - 'tab' => Controls_Manager::TAB_CONTENT, - ] - ); - - $this->add_control( - 'line_color', - [ - 'label' => esc_html__( 'Color', 'elementor-addon' ), - 'type' => Controls_Manager::COLOR, - 'default' => '#000000', - 'selectors' => [ - '{{WRAPPER}} .elementor-vertical-separator__line' => 'background: {{VALUE}};' - ], - ] - ); - - $this->add_responsive_control( - 'line_thickness', - [ - 'label' => esc_html__( 'Thickness', 'elementor-addon' ), - 'type' => Controls_Manager::SLIDER, - 'size_units' => [ 'px' ], - 'range' => [ - 'px' => [ - 'min' => 1, - 'max' => 20, - ], - ], - 'default' => [ - 'size' => 1, - 'unit' => 'px', - ], - 'selectors' => [ - '{{WRAPPER}} .elementor-vertical-separator__line' => 'width: {{SIZE}}{{UNIT}};' - ], - ] - ); - - $this->add_responsive_control( - 'line_height', - [ - 'label' => esc_html__( 'Height', 'elementor-addon' ), - 'type' => Controls_Manager::SLIDER, - 'size_units' => [ 'px', '%' ], - 'range' => [ - 'px' => [ - 'min' => 10, - 'max' => 600, - ], - '%' => [ - 'min' => 10, - 'max' => 100, - ], - ], - 'default' => [ - 'size' => 100, - 'unit' => 'px', - ], - 'selectors' => [ - '{{WRAPPER}} .elementor-vertical-separator__line' => 'height: {{SIZE}}{{UNIT}};' - ], - ] - ); - - $this->add_responsive_control( - 'line_alignment', - [ - 'label' => esc_html__( 'Alignment', 'elementor-addon' ), - 'type' => Controls_Manager::CHOOSE, - 'default' => 'center', - 'options' => [ - 'flex-start' => [ - 'title' => esc_html__( 'Left', 'elementor-addon' ), - 'icon' => 'eicon-text-align-left', - ], - 'center' => [ - 'title' => esc_html__( 'Center', 'elementor-addon' ), - 'icon' => 'eicon-text-align-center', - ], - 'flex-end' => [ - 'title' => esc_html__( 'Right', 'elementor-addon' ), - 'icon' => 'eicon-text-align-right', - ], - ], - 'selectors' => [ - '{{WRAPPER}} .elementor-vertical-separator' => 'justify-content: {{VALUE}};' - ], - ] - ); - - $this->end_controls_section(); - } - - protected function render() { - ?> -
- -
-