← All changes | includes/widgets/Video_Popup/Video_Popup.php +99 -30 51.1.38 → 51.1.86 View file →

		@@ -178,8 +178,24 @@
178	178	]
179	179	);
180	180
181	181	$this->add_control(
	182	+ 'kng_video_popup_hosted_autoplay',
	183	+ [
	184	+ 'label' => esc_html__('Autoplay on Open', 'king-addons'),
	185	+ 'type' => Controls_Manager::SWITCHER,
	186	+ 'label_on' => esc_html__('Yes', 'king-addons'),
	187	+ 'label_off' => esc_html__('No', 'king-addons'),
	188	+ 'return_value' => 'yes',
	189	+ 'default' => 'yes',
	190	+ 'description' => esc_html__('Start playback when the popup opens. Playback stops when the popup is closed.', 'king-addons'),
	191	+ 'condition' => [
	192	+ 'kng_video_popup_video_type' => ['hosted', 'external-hosted'],
	193	+ ],
	194	+ ]
	195	+ );
	196	+
	197	+ $this->add_control(
182	198	'kng_video_popup_start_time',
183	199	[
184	200	'label' => esc_html__('Start Time', 'king-addons'),
185	201	'type' => Controls_Manager::NUMBER,
		@@ -757,16 +773,13 @@
757	773	$this_ID = $this->get_id();
758	774	$class_ID = 'king-addons-video-popup-' . $this_ID;
759	775	$overlay_ID = 'king-addons-video-popup-overlay-' . $this_ID;
760	776
	777	+ $is_hosted_video = in_array($settings['kng_video_popup_video_type'], ['hosted', 'external-hosted'], true);
	778	+ $hosted_autoplay = $is_hosted_video && ('yes' === ($settings['kng_video_popup_hosted_autoplay'] ?? 'yes'));
	779	+
761	780	// Overlay
762		- echo '<div class="king-addons-video-popup-overlay ' .
763		- esc_attr($overlay_ID) . '" onclick="';
764		- echo "document.querySelector('." .
765		- esc_attr($class_ID) . "').classList.toggle('king-addons-video-popup-active'); document.querySelector('." .
766		- esc_attr($overlay_ID) . "').style.opacity = '0'; document.body.style.pointerEvents = 'none'; setTimeout(function () {document.querySelector('." .
767		- esc_attr($overlay_ID) . "').style.display = 'none'; document.body.style.pointerEvents = '';}, 500);";
768		- echo '"></div>';
	781	+ echo '<div class="king-addons-video-popup-overlay ' . esc_attr($overlay_ID) . '"></div>';
769	782
770	783	// START: Popup box
771	784	echo '<div class="king-addons-video-popup ' .
772	785	esc_attr($class_ID) . ' king-addons-video-popup-position-' .
		@@ -790,14 +803,14 @@
790	803	}
791	804
792	805	// Hosted
793	806	if ('hosted' === $settings['kng_video_popup_video_type']) {
794		- echo '<video src="' . esc_url($settings['kng_video_popup_hosted_url']['url']) . '" controls></video>';
	807	+ echo '<video class="king-addons-video-popup-video" src="' . esc_url($settings['kng_video_popup_hosted_url']['url']) . '" controls playsinline></video>';
795	808	}
796	809
797	810	// External Hosted
798	811	if ('external-hosted' === $settings['kng_video_popup_video_type']) {
799		- echo '<video src="' . esc_url($settings['kng_video_popup_external_url']['url']) . '" controls></video>';
	812	+ echo '<video class="king-addons-video-popup-video" src="' . esc_url($settings['kng_video_popup_external_url']['url']) . '" controls playsinline></video>';
800	813	}
801	814
802	815	echo '</div>';
803	816	/** END: VIDEO */
		@@ -808,15 +821,10 @@
808	821	if ('' == $settings['kng_video_popup_disable_btn']) {
809	822
810	823	echo '<div class="king-addons-video-popup-button-wrap">';
811	824
812		- echo '<button class="king-addons-video-popup-button king-addons-video-popup-button-' .
813		- esc_attr($this_ID) . ' king-addons-video-popup-button-effect-' . esc_attr($settings['kng_video_popup_btn_effect_type']) . '" onclick="';
814		- echo "document.querySelector('." .
815		- esc_attr($class_ID) . "').classList.toggle('king-addons-video-popup-active'); document.querySelector('." .
816		- esc_attr($overlay_ID) . "').style.display = 'block'; document.body.style.pointerEvents = 'none'; setTimeout(function () {document.querySelector('." .
817		- esc_attr($overlay_ID) . "').style.opacity = '1';}, 1); setTimeout(function () {document.body.style.pointerEvents = '';}, 500);";
818		- echo '">';
	825	+ echo '<button type="button" class="king-addons-video-popup-button king-addons-video-popup-button-' .
	826	+ esc_attr($this_ID) . ' king-addons-video-popup-button-effect-' . esc_attr($settings['kng_video_popup_btn_effect_type']) . '">';
819	827
820	828	Icons_Manager::render_icon($settings['kng_video_popup_btn_icon']);
821	829
822	830	echo '</button>';
		@@ -824,8 +832,10 @@
824	832	echo '</div>';
825	833
826	834	}
827	835
	836	+ $hosted_autoplay_js = $hosted_autoplay ? 'true' : 'false';
	837	+
828	838	$inline_js_1 = "
829	839	document.addEventListener('DOMContentLoaded', function () {
830	840
831	841	const offCanvas = document.querySelector('." . esc_js($class_ID) . "');
		@@ -830,33 +840,92 @@
830	840
831	841	const offCanvas = document.querySelector('." . esc_js($class_ID) . "');
832	842	const overlay = document.querySelector('." . esc_js($overlay_ID) . "');
833	843
	844	+ // With no template picked the widget prints a placeholder instead of
	845	+ // the panel markup, so these lookups come back empty. Bail out rather
	846	+ // than throwing on insertBefore and losing the handlers below.
	847	+ if (!offCanvas || !overlay) {
	848	+ return;
	849	+ }
	850	+ const video = offCanvas ? offCanvas.querySelector('.king-addons-video-popup-video') : null;
	851	+ const autoplayEnabled = " . $hosted_autoplay_js . ";
	852	+ const popupButton = document.querySelector('.king-addons-video-popup-button-" . esc_js((string) $this_ID) . "');
	853	+
	854	+ /**
	855	+ * Opens the video popup and optionally starts self-hosted video playback.
	856	+ *
	857	+ * @return {void}
	858	+ */
	859	+ function openPopup() {
	860	+ offCanvas.classList.add('king-addons-video-popup-active');
	861	+ overlay.style.display = 'block';
	862	+ document.body.style.pointerEvents = 'none';
	863	+ setTimeout(function () {
	864	+ overlay.style.opacity = '1';
	865	+ }, 1);
	866	+ setTimeout(function () {
	867	+ document.body.style.pointerEvents = '';
	868	+ }, 500);
	869	+
	870	+ if (autoplayEnabled && video) {
	871	+ video.play().catch(function () {});
	872	+ }
	873	+ }
	874	+
	875	+ /**
	876	+ * Closes the video popup and stops self-hosted video playback.
	877	+ *
	878	+ * @return {void}
	879	+ */
	880	+ function closePopup() {
	881	+ offCanvas.classList.remove('king-addons-video-popup-active');
	882	+ overlay.style.opacity = '0';
	883	+ document.body.style.pointerEvents = 'none';
	884	+
	885	+ if (video) {
	886	+ video.pause();
	887	+ video.currentTime = 0;
	888	+ }
	889	+
	890	+ setTimeout(function () {
	891	+ overlay.style.display = 'none';
	892	+ document.body.style.pointerEvents = '';
	893	+ }, 500);
	894	+ }
	895	+
	896	+ /**
	897	+ * Toggles popup visibility based on the current active state.
	898	+ *
	899	+ * @return {void}
	900	+ */
	901	+ function togglePopup() {
	902	+ if (offCanvas.classList.contains('king-addons-video-popup-active')) {
	903	+ closePopup();
	904	+ } else {
	905	+ openPopup();
	906	+ }
	907	+ }
	908	+
834	909	// Moves all Popupes to right after the <body> opens
835	910	document.body.insertBefore(overlay, document.body.firstChild);
836	911	document.body.insertBefore(offCanvas, document.body.firstChild);
837	912
838	913	// Change display from none to block to prevent dancing of the Popup before the DOM content loaded
839		- offCanvas.style.display = 'block';";
	914	+ offCanvas.style.display = 'block';
840	915
	916	+ overlay.addEventListener('click', closePopup);
	917	+
	918	+ if (popupButton) {
	919	+ popupButton.addEventListener('click', togglePopup);
	920	+ }";
	921	+
841	922	$inline_js_2 = "";
842	923	if ('' != $settings['kng_video_popup_class']) {
843	924	$inline_js_2 = "
844	925	// Adds click listener for custom triggers that have the custom class
845	926	const customOffCanvasTrigger = document.querySelectorAll('." . esc_js($settings['kng_video_popup_class']) . "');
846		- customOffCanvasTrigger.forEach(element => element.addEventListener('click', () => {
847		- offCanvas.classList.toggle('king-addons-video-popup-active');
848		- document.body.style.pointerEvents = 'none';
849		- if (offCanvas.classList.contains('king-addons-video-popup-active')) {
850		- overlay.style.display = 'block';
851		- setTimeout(function () {
852		- overlay.style.opacity = '1';
853		- }, 1);
854		- }
855		- setTimeout(function () {
856		- document.body.style.pointerEvents = '';
857		- }, 500);
858		- }));
	927	+ customOffCanvasTrigger.forEach(element => element.addEventListener('click', togglePopup));
859	928	customOffCanvasTrigger.forEach(element => element.style.cursor = 'pointer'); ";
860	929	}
861	930
862	931	$inline_js_3 = "});";