WPVR – 360 Panorama viewer and Virtual Tour Builder for WordPress / 9.1.3

WPVR – 360 Panorama viewer and Virtual Tour Builder for WordPress v9.1.3

wpvr / app / admin / create-tour-modal.js

create-tour-modal.js in WPVR – 360 Panorama viewer and Virtual Tour Builder for WordPress 9.1.3, at app/admin/create-tour-modal.js

149 lines 4.6 KB

Raw Download Zip

1	/* global wpvrListingModal */
2	(function () {
3	'use strict';
4
5	var cfg = wpvrListingModal;
6	var selectedType = 'image';
7	var isSubmitting = false;
8
9	document.addEventListener( 'DOMContentLoaded', function () {
10	var overlay = document.getElementById( 'wpvr-ctm-overlay' );
11	var nameInput = document.getElementById( 'wpvr-ctm-name' );
12	var nameError = document.getElementById( 'wpvr-ctm-name-error' );
13	var submitBtn = document.getElementById( 'wpvr-ctm-submit' );
14	var cards = document.querySelectorAll( '.wpvr-ctm__card:not([disabled])' );
15
16	// Intercept "Add New" button.
17	var addNewLinks = document.querySelectorAll( 'a.page-title-action:not(.wpvr-import-button), a[href*="post-new.php?post_type=wpvr_item"]' );
18	addNewLinks.forEach( function ( link ) {
19	link.addEventListener( 'click', function ( e ) {
20	e.preventDefault();
21	openModal();
22	} );
23	} );
24
25	// Close triggers.
26	document.getElementById( 'wpvr-ctm-close' ).addEventListener( 'click', closeModal );
27	document.getElementById( 'wpvr-ctm-cancel' ).addEventListener( 'click', closeModal );
28
29	overlay.addEventListener( 'click', function ( e ) {
30	if ( e.target === overlay ) closeModal();
31	} );
32
33	document.addEventListener( 'keydown', function ( e ) {
34	if ( e.key === 'Escape' && overlay.style.display !== 'none' ) closeModal();
35	} );
36
37	// Card selection.
38	cards.forEach( function ( card ) {
39	card.addEventListener( 'click', function () {
40	selectCard( this );
41	} );
42	} );
43
44	// Name input — clear error on type.
45	nameInput.addEventListener( 'input', function () {
46	nameError.style.display = 'none';
47	} );
48
49	// Submit.
50	submitBtn.addEventListener( 'click', handleSubmit );
51
52	// Allow Enter in name field to submit.
53	nameInput.addEventListener( 'keydown', function ( e ) {
54	if ( e.key === 'Enter' ) {
55	e.preventDefault();
56	handleSubmit();
57	}
58	} );
59	} );
60
61	function openModal() {
62	var overlay = document.getElementById( 'wpvr-ctm-overlay' );
63	var nameInput = document.getElementById( 'wpvr-ctm-name' );
64	var nameError = document.getElementById( 'wpvr-ctm-name-error' );
65	var submitBtn = document.getElementById( 'wpvr-ctm-submit' );
66
67	nameInput.value = '';
68	nameError.style.display = 'none';
69	submitBtn.textContent = '+ Create Tour';
70	submitBtn.disabled = false;
71	isSubmitting = false;
72
73	// Reset to image selection.
74	selectCardByType( 'image' );
75
76	overlay.style.display = 'flex';
77	setTimeout( function () { nameInput.focus(); }, 60 );
78	}
79
80	function closeModal() {
81	document.getElementById( 'wpvr-ctm-overlay' ).style.display = 'none';
82	}
83
84	function selectCard( card ) {
85	document.querySelectorAll( '.wpvr-ctm__card' ).forEach( function ( c ) {
86	c.classList.remove( 'wpvr-ctm__card--selected' );
87	var radio = c.querySelector( '.wpvr-ctm__card-radio' );
88	if ( radio ) radio.classList.remove( 'wpvr-ctm__card-radio--checked' );
89	var img = c.querySelector( '.wpvr-ctm__card-icon' );
90	if ( img && img.dataset.inactive ) img.src = img.dataset.inactive;
91	} );
92
93	card.classList.add( 'wpvr-ctm__card--selected' );
94	var radio = card.querySelector( '.wpvr-ctm__card-radio' );
95	if ( radio ) radio.classList.add( 'wpvr-ctm__card-radio--checked' );
96	var img = card.querySelector( '.wpvr-ctm__card-icon' );
97	if ( img && img.dataset.active ) img.src = img.dataset.active;
98
99	selectedType = card.dataset.type;
100	}
101
102	function selectCardByType( type ) {
103	var card = document.querySelector( '.wpvr-ctm__card[data-type="' + type + '"]' );
104	if ( card && ! card.disabled ) selectCard( card );
105	}
106
107	function handleSubmit() {
108	if ( isSubmitting ) return;
109
110	var nameInput = document.getElementById( 'wpvr-ctm-name' );
111	var nameError = document.getElementById( 'wpvr-ctm-name-error' );
112	var submitBtn = document.getElementById( 'wpvr-ctm-submit' );
113	var name = nameInput.value.trim();
114
115	if ( ! name ) {
116	nameError.style.display = 'block';
117	nameInput.focus();
118	return;
119	}
120
121	isSubmitting = true;
122	submitBtn.textContent = 'Creating…';
123	submitBtn.disabled = true;
124
125	fetch( cfg.apiBase + '/tours', {
126	method: 'POST',
127	headers: {
128	'Content-Type': 'application/json',
129	'X-WP-Nonce': cfg.nonce,
130	},
131	body: JSON.stringify( { title: name, tourType: selectedType } ),
132	} )
133	.then( function ( res ) { return res.json(); } )
134	.then( function ( data ) {
135	if ( data.id ) {
136	window.location.href = cfg.editorUrl + '&tour_id=' + data.id;
137	} else {
138	throw new Error( 'No id in response' );
139	}
140	} )
141	.catch( function () {
142	submitBtn.textContent = '+ Create Tour';
143	submitBtn.disabled = false;
144	isSubmitting = false;
145	alert( 'Failed to create tour. Please try again.' );
146	} );
147	}
148	} )();
149