New widget

2026-05-07 10:56:50 +02:00
parent 04de2ac558
commit eca9555208
10 changed files with 1204 additions and 0 deletions
--- a/.paul/PROJECT.md
+++ 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*
--- a/.paul/ROADMAP.md
+++ 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 `<dialog>` 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*
--- a/.paul/STATE.md
+++ 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 `<dialog>` 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*
--- a/.paul/config.md
+++ 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*
--- a/CLAUDE.md
+++ 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.
--- a/wp-content/plugins/elementor-addon/assets/css/main.css
+++ 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;
+	}
+}
--- 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);
+	});
+})();
--- a/wp-content/plugins/elementor-addon/assets/scss/main.scss
+++ 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;
+	}
+}
--- a/wp-content/plugins/elementor-addon/elementor-addon.php
+++ b/wp-content/plugins/elementor-addon/elementor-addon.php
@@ -0,0 +1,60 @@
+<?php
+/**
+ * Plugin Name: Elementor Addon
+ * Description: Custom Elementor widgets.
+ * Version:     1.0.0
+ * Author:      Elementor Developer
+ * Author URI:  https://developers.elementor.com/
+ * Text Domain: elementor-addon
+ *
+ * Requires Plugins: elementor
+ * Elementor tested up to: 3.21.0
+ * Elementor Pro tested up to: 3.21.0
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Register widget files
+ */
+function register_elementor_addon_widgets( $widgets_manager ) {
+	require_once( __DIR__ . '/widgets/info-box-popup.php' );
+
+	$widgets_manager->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' );
--- a/wp-content/plugins/elementor-addon/widgets/info-box-popup.php
+++ b/wp-content/plugins/elementor-addon/widgets/info-box-popup.php
@@ -0,0 +1,536 @@
+<?php
+use Elementor\Controls_Manager;
+use Elementor\Group_Control_Background;
+use Elementor\Group_Control_Border;
+use Elementor\Group_Control_Box_Shadow;
+use Elementor\Group_Control_Typography;
+use Elementor\Widget_Base;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+class Elementor_Info_Box_Popup extends Widget_Base {
+	public function get_name() {
+		return 'info_box_popup';
+	}
+
+	public function get_title() {
+		return esc_html__( 'Info Box Popup', 'elementor-addon' );
+	}
+
+	public function get_icon() {
+		return 'eicon-button';
+	}
+
+	public function get_categories() {
+		return [ 'general' ];
+	}
+
+	public function get_keywords() {
+		return [ 'popup', 'modal', 'button', 'czytaj wiecej', 'content' ];
+	}
+
+	public function get_style_depends() {
+		return [ 'elementor-addon-main-css' ];
+	}
+
+	public function get_script_depends() {
+		return [ 'elementor-addon-main-js' ];
+	}
+
+	protected function register_controls() {
+		$this->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'    => '<p>' . esc_html__( 'Write your popup content here.', 'elementor-addon' ) . '</p>',
+				'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',
+			]
+		);
+		?>
+		<div <?php $this->print_render_attribute_string( 'wrapper' ); ?>>
+			<button <?php $this->print_render_attribute_string( 'button' ); ?>>
+				<?php echo esc_html( $button_text ); ?>
+			</button>
+
+			<dialog class="ea-popup-modal" data-ea-popup-modal aria-hidden="true">
+				<div class="ea-popup-dialog" id="<?php echo esc_attr( $dialog_id ); ?>" aria-labelledby="<?php echo esc_attr( $button_id ); ?>">
+					<button class="ea-popup-close" type="button" data-ea-popup-close aria-label="<?php echo esc_attr( $close_label ); ?>">
+						<span aria-hidden="true">&times;</span>
+					</button>
+
+					<div class="ea-popup-content">
+						<?php echo wp_kses_post( $this->parse_text_editor( $settings['popup_content'] ) ); ?>
+					</div>
+				</div>
+			</dialog>
+		</div>
+		<?php
+	}
+}