← All changes | includes/widgets/Video_Popup/Video_Popup.php +98 -26 51.1.64 → 51.1.87 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
761		- $class_selector_js = esc_attr(wp_json_encode('.' . $class_ID));
762		- $overlay_selector_js = esc_attr(wp_json_encode('.' . $overlay_ID));
	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'));
763	779
764	780	// Overlay
765		- echo '<div class="king-addons-video-popup-overlay ' .
766		- esc_attr($overlay_ID) . '" onclick="';
767		- echo "document.querySelector(" . $class_selector_js . ").classList.toggle('king-addons-video-popup-active'); document.querySelector(" . $overlay_selector_js . ").style.opacity = '0'; document.body.style.pointerEvents = 'none'; setTimeout(function () {document.querySelector(" . $overlay_selector_js . ").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,12 +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(" . $class_selector_js . ").classList.toggle('king-addons-video-popup-active'); document.querySelector(" . $overlay_selector_js . ").style.display = 'block'; document.body.style.pointerEvents = 'none'; setTimeout(function () {document.querySelector(" . $overlay_selector_js . ").style.opacity = '1';}, 1); setTimeout(function () {document.body.style.pointerEvents = '';}, 500);";
815		- 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']) . '">';
816	827
817	828	Icons_Manager::render_icon($settings['kng_video_popup_btn_icon']);
818	829
819	830	echo '</button>';
		@@ -821,8 +832,10 @@
821	832	echo '</div>';
822	833
823	834	}
824	835
	836	+ $hosted_autoplay_js = $hosted_autoplay ? 'true' : 'false';
	837	+
825	838	$inline_js_1 = "
826	839	document.addEventListener('DOMContentLoaded', function () {
827	840
828	841	const offCanvas = document.querySelector('." . esc_js($class_ID) . "');
		@@ -827,33 +840,92 @@
827	840
828	841	const offCanvas = document.querySelector('." . esc_js($class_ID) . "');
829	842	const overlay = document.querySelector('." . esc_js($overlay_ID) . "');
830	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	+
831	909	// Moves all Popupes to right after the <body> opens
832	910	document.body.insertBefore(overlay, document.body.firstChild);
833	911	document.body.insertBefore(offCanvas, document.body.firstChild);
834	912
835	913	// Change display from none to block to prevent dancing of the Popup before the DOM content loaded
836		- offCanvas.style.display = 'block';";
	914	+ offCanvas.style.display = 'block';
837	915
	916	+ overlay.addEventListener('click', closePopup);
	917	+
	918	+ if (popupButton) {
	919	+ popupButton.addEventListener('click', togglePopup);
	920	+ }";
	921	+
838	922	$inline_js_2 = "";
839	923	if ('' != $settings['kng_video_popup_class']) {
840	924	$inline_js_2 = "
841	925	// Adds click listener for custom triggers that have the custom class
842	926	const customOffCanvasTrigger = document.querySelectorAll('." . esc_js($settings['kng_video_popup_class']) . "');
843		- customOffCanvasTrigger.forEach(element => element.addEventListener('click', () => {
844		- offCanvas.classList.toggle('king-addons-video-popup-active');
845		- document.body.style.pointerEvents = 'none';
846		- if (offCanvas.classList.contains('king-addons-video-popup-active')) {
847		- overlay.style.display = 'block';
848		- setTimeout(function () {
849		- overlay.style.opacity = '1';
850		- }, 1);
851		- }
852		- setTimeout(function () {
853		- document.body.style.pointerEvents = '';
854		- }, 500);
855		- }));
	927	+ customOffCanvasTrigger.forEach(element => element.addEventListener('click', togglePopup));
856	928	customOffCanvasTrigger.forEach(element => element.style.cursor = 'pointer'); ";
857	929	}
858	930
859	931	$inline_js_3 = "});";