From eca9555208beed284c3fdfb8f5eb1b5540192bf3 Mon Sep 17 00:00:00 2001 From: Roman Pyrih Date: Thu, 7 May 2026 10:56:50 +0200 Subject: [PATCH] New widget --- .paul/PROJECT.md | 28 + .paul/ROADMAP.md | 32 ++ .paul/STATE.md | 55 ++ .paul/config.md | 33 ++ CLAUDE.md | 37 ++ .../elementor-addon/assets/css/main.css | 143 +++++ .../plugins/elementor-addon/assets/js/main.js | 117 ++++ .../elementor-addon/assets/scss/main.scss | 163 ++++++ .../elementor-addon/elementor-addon.php | 60 ++ .../widgets/info-box-popup.php | 536 ++++++++++++++++++ 10 files changed, 1204 insertions(+) create mode 100644 .paul/PROJECT.md create mode 100644 .paul/ROADMAP.md create mode 100644 .paul/STATE.md create mode 100644 .paul/config.md create mode 100644 CLAUDE.md create mode 100644 wp-content/plugins/elementor-addon/assets/css/main.css create mode 100644 wp-content/plugins/elementor-addon/assets/js/main.js create mode 100644 wp-content/plugins/elementor-addon/assets/scss/main.scss create mode 100644 wp-content/plugins/elementor-addon/elementor-addon.php create mode 100644 wp-content/plugins/elementor-addon/widgets/info-box-popup.php diff --git a/.paul/PROJECT.md b/.paul/PROJECT.md new file mode 100644 index 0000000..917c9c4 --- /dev/null +++ b/.paul/PROJECT.md @@ -0,0 +1,28 @@ +# Project: luxmed2.pagedev.pl + +## Description +Landing page dla klienta, ktorego glownym celem jest pozyskiwanie leadow przez formularz na stronie. + +## Core Value +Strona pozyskuje klientow z formularza na landing page. + +## Requirements + +### Must Have +- [To be defined during planning] + +### Should Have +- [To be defined during planning] + +### Nice to Have +- [To be defined during planning] + +## Constraints +- [To be identified during planning] + +## Success Criteria +- Strona pozyskuje klientow z formularza na landing page is achieved +- [To be refined during planning] + +--- +*Created: 2026-05-07 10:04* diff --git a/.paul/ROADMAP.md b/.paul/ROADMAP.md new file mode 100644 index 0000000..6d4e5ce --- /dev/null +++ b/.paul/ROADMAP.md @@ -0,0 +1,32 @@ +# Roadmap: luxmed2.pagedev.pl + +## Overview +Landing page dla klienta, ktorego glownym celem jest pozyskiwanie leadow przez formularz na stronie. + +## Current Milestone +**v0.1 Initial Release** (v0.1.0) +Status: In progress +Phases: 1 of 1 complete + +## Phases + +| Phase | Name | Plans | Status | Completed | +|-------|------|-------|--------|-----------| +| 1 | Elementor popup widget | Direct implementation | Complete | 2026-05-07 | + +## Phase Details + +### Phase 1: Elementor popup widget + +Goal: Provide an Elementor widget that renders a configurable button and opens editable WYSIWYG content in a full-screen popup. + +Delivered: +- Custom Elementor widget registered from `wp-content/plugins/elementor-addon/widgets/info-box-popup.php`. +- Button text and popup content controls in Elementor. +- Style controls for button, overlay, popup box, popup content, and close button. +- Frontend JavaScript for opening, closing, Escape key, overlay click, and focus management. +- Native `` top-layer popup so it appears above slider slides and full viewport. +- SCSS source added at `wp-content/plugins/elementor-addon/assets/scss/main.scss`, with compiled CSS still loaded from `assets/css/main.css`. + +--- +*Roadmap created: 2026-05-07 10:04* diff --git a/.paul/STATE.md b/.paul/STATE.md new file mode 100644 index 0000000..c528fff --- /dev/null +++ b/.paul/STATE.md @@ -0,0 +1,55 @@ +# Project State + +## Project Reference + +See: .paul/PROJECT.md (updated 2026-05-07 10:04) + +**Core value:** Strona pozyskuje klientow z formularza na landing page. +**Current focus:** Elementor popup widget reconciled after implementation + +## Current Position + +Milestone: v0.1 Initial Release +Phase: 1 - Elementor popup widget +Plan: Direct implementation from user request +Status: Phase complete, ready for manual Elementor/browser verification +Last activity: 2026-05-07 10:54 - Reconciled plan vs actual with $paul-unify + +Progress: +- Milestone: [##########] 100% + +## Loop Position + +Current loop state: +``` +PLAN --> APPLY --> UNIFY + x x x [Phase reconciled] +``` + +## Accumulated Context + +### Codebase Mapped +Date: 2026-05-07 +Documents: .paul/codebase/ (9 files) + +### Decisions +- Implement popup as a native `` so it opens in the browser top layer above Elementor slider transforms. +- Keep `assets/css/main.css` as the WordPress-loaded stylesheet and add `assets/scss/main.scss` as the editable source. +- Use Elementor controls for button text, WYSIWYG popup content, and styling of button/overlay/dialog/content/close button. + +### Deferred Issues +- PHP lint could not be run because `php` is not available in PATH. +- SCSS compilation could not be run because `sass` is not available in PATH. + +### Blockers/Concerns +- Manual verification in Elementor frontend/editor is still recommended after clearing cache/regenerating Elementor CSS. + +## Session Continuity + +Last session: 2026-05-07 10:54 +Stopped at: Elementor popup widget complete and reconciled +Next action: Test the widget in the target Elementor slider and confirm popup opens full-screen above all slides +Resume file: wp-content/plugins/elementor-addon/widgets/info-box-popup.php + +--- +*STATE.md - Updated after every significant action* diff --git a/.paul/config.md b/.paul/config.md new file mode 100644 index 0000000..8981207 --- /dev/null +++ b/.paul/config.md @@ -0,0 +1,33 @@ +# Project Config + +**Project:** luxmed2.pagedev.pl +**Created:** 2026-05-07 10:04 + +## Project Settings + +```yaml +project: + name: luxmed2.pagedev.pl + version: 0.0.0 +``` + +## Integrations + +### SonarQube + +```yaml +sonarqube: + enabled: false + reason: "User declined during init" +``` + +## Preferences + +```yaml +preferences: + auto_commit: false + verbose_output: false +``` + +--- +*Config created: 2026-05-07 10:04* diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..1764e85 --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,37 @@ +# Projektowe zasady dla luxmed2.pagedev.pl + +## Stack +- **Jezyk:** PHP, JavaScript, CSS +- **Framework/CMS:** WordPress +- **Frontend:** Elementor / Elementor Pro +- **Motyw:** Hello Elementor + +## Zasady kodu +- Stosuj standardy WordPress Coding Standards dla PHP, JS i CSS. +- Zmiany trzymaj mozliwie blisko motywu potomnego, wtyczki projektowej albo warstwy Elementor, zgodnie z istniejacym ukladem projektu. +- Nie edytuj rdzenia WordPressa w `wp-admin/` ani `wp-includes/`. +- Nie modyfikuj plikow zewnetrznych wtyczek, chyba ze zadanie wyraznie tego wymaga i nie ma bezpieczniejszej sciezki. +- Komentarze dodawaj tylko wtedy, gdy wyjasniaja decyzje albo nietypowe ograniczenie. + +## Baza danych +- Projekt korzysta z bazy WordPress. +- Zmiany w strukturze danych dokumentuj w `.paul/codebase/db_schema.md`, gdy zostanie wygenerowany przez `$paul-map-codebase`. +- Nie wykonuj operacji migracyjnych ani importow bez jasnego potwierdzenia. + +## Testy +- Brak wykrytego standardowego polecenia testowego. +- Po zmianach frontendowych sprawdz widok strony i formularz kontaktowy w przegladarce lub na srodowisku testowym. + +## Dokumentacja +- Dokumentacja techniczna PAUL mieszka w `.paul/codebase/`. +- Pliki w `.paul/codebase/` generuje `$paul-map-codebase`. +- Przy wiekszych zmianach aktualizuj odpowiednie notatki projektowe PAUL. + +## Wdrazanie +- Procedura deploy do uzupelnienia. +- Projekt wyglada na kopie WordPress synchronizowana przez FTP/SFTP, wiec przed zmianami produkcyjnymi traktuj stan plikow jako potencjalnie wrazliwy. + +## UI/Frontend +- Glowny cel strony to pozyskiwanie leadow przez formularz. +- Dbaj o czytelny przeplyw do formularza, szybkie ladowanie strony i brak przeszkod w konwersji na mobile. +- Zmiany wizualne powinny respektowac istniejacy styl landing page oraz komponenty Elementor. diff --git a/wp-content/plugins/elementor-addon/assets/css/main.css b/wp-content/plugins/elementor-addon/assets/css/main.css new file mode 100644 index 0000000..eb2e846 --- /dev/null +++ b/wp-content/plugins/elementor-addon/assets/css/main.css @@ -0,0 +1,143 @@ +.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/js/main.js b/wp-content/plugins/elementor-addon/assets/js/main.js new file mode 100644 index 0000000..6b53e3b --- /dev/null +++ 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 new file mode 100644 index 0000000..498758d --- /dev/null +++ b/wp-content/plugins/elementor-addon/elementor-addon.php @@ -0,0 +1,60 @@ +register( new \Elementor_Info_Box_Popup() ); +} +add_action( 'elementor/widgets/register', 'register_elementor_addon_widgets' ); + +/** + * Register scripts/styles only. + * Do not enqueue them globally. + */ +function elementor_addon_register_assets() { + $css_path = plugin_dir_path( __FILE__ ) . 'assets/css/main.css'; + $css_url = plugin_dir_url( __FILE__ ) . 'assets/css/main.css'; + $css_ver = file_exists( $css_path ) ? filemtime( $css_path ) : '1.0.0'; + + $js_path = plugin_dir_path( __FILE__ ) . 'assets/js/main.js'; + $js_url = plugin_dir_url( __FILE__ ) . 'assets/js/main.js'; + $js_ver = file_exists( $js_path ) ? filemtime( $js_path ) : '1.0.0'; + + // Widget CSS + wp_register_style( + 'elementor-addon-main-css', + $css_url, + [], + $css_ver + ); + + // Widget JS + wp_register_script( + 'elementor-addon-main-js', + $js_url, + [ 'jquery' ], + $js_ver, + true + ); +} +add_action( 'elementor/frontend/after_register_styles', 'elementor_addon_register_assets' ); +add_action( 'elementor/frontend/after_register_scripts', 'elementor_addon_register_assets' ); 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' ); ?>> + + + +
+