https://kenchikuno-fujisawa.co.jp/wp/wp-content/plugins/confirm-pl…/assets/js/scripts.js?ver=20240125_011352

1(function ($) {
2	// IEなら処理回避
3	var userAgent = window.navigator.userAgent.toLowerCase();
4	if (userAgent.indexOf('msie') != -1 || userAgent.indexOf('trident') != -1) {
5		return;
6	}
7
8
9	// 初期表示時
10	$( 'input[name=_wpcf7]' ) . each( function() {
11		$(this).after('<input type="hidden" name="_wpcf7cp" value="status_input" />');
12		return false;
13	});
14
15
16	// ボタンラベルの変更
17	$( 'form.wpcf7-form input.wpcf7-submit' ) . attr( 'value', data_arr . cfm_btn );
18	$( 'form.wpcf7-form button.wpcf7-submit' ).text( data_arr . cfm_btn );
19
20
21	// 初期値の保持
22	var resetValues = $( 'form.wpcf7-form' ) . serializeArray();
23
24
25	// フォームのリセット
26	var resetForm = function() {
27		var formObj = $( 'form.wpcf7-form' );
28		for ( var i = 0; i < resetValues . length; i++ ) {
29			formObj . find( '[name=' + resetValues[i] . name + ']' ) . val( resetValues[i] . value );
30		}
31		formObj . find( ':file' ) . val( null );
32	};
33
34
35	// サニタイズ＆改行コード変換
36	var sanitizeText = function( textVal ) {
37		return textVal.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/`/g, '&#x60;').replace(/\r?\n/g, '<br>');
38	};
39
40
41	// テキストセットの取得
42	var getTextSet = function( inputObj ) {
43		var textSetObj = inputObj . closest( '.text-set-contactform7' );
44		if ( ! textSetObj ) {
45			return null;
46		}
47		var textSetObjClone = textSetObj . clone();
48		var inputToReplaces = textSetObjClone . find( 'input, select' );
49		for ( var i = 0; i < inputToReplaces . length; i++ ) {
50			var inputToReplace = $( inputToReplaces[i] );
51			var inputName = inputToReplace . attr( 'name' );
52			if ( inputName ) {
53				inputToReplace . replaceWith( '{%' + inputName . replace( '[]', '' ) + '%}' );
54			}
55		}
56		return textSetObjClone . text();
57	};
58
59	// 区切り文字（将来的にWP管理画面から設定可能に？）
60	var splitter = ', ';
61
62
63	// 確認ボタン押下で確認画面を表示
64	var wpcf7cp_confirm = function(unit_tag) {
65		const NEW_LINE_CODE = /\r\n|\r|\n/;	// 改行コード
66		const PATH_CODE = /[\\\/]/;			// Path区切りコード
67
68		// ステータスを入力状態から確認状態に変更
69		changeFormStatus( 'confirm' );
70
71		var textAreaList = new Array(); 			// テキストエリアのタイトル名を保持するリスト
72		var noTitleDammyStr = 'CF7CfmPlsNoTitle';	// タイトルが存在しない場合のダミー文字列
73		var noTitleOuterHTMLs = [];					// タイトルが存在しない親P要素のHTML配列
74
75		var dispList = {}; // タイトル、入力値を保持するリスト
76
77		// 対象フォーム検索
78		$( 'input[name=_wpcf7_unit_tag]' ).each(function(){
79			if($(this).val() == unit_tag) {
80				var formElm = $(this).parents("form");
81
82				// 送信完了メッセージを非表示にする
83				var responseOutput = formElm.find('div.wpcf7-response-output');
84				responseOutput.addClass("wpcf7cp-force-hide");
85
86				// 入力値取得: avoid-confirmクラス付与要素は回避
87				formElm . find( 'input, select, textarea' ) . filter( ':visible:not(.avoid-confirm)' ) . each( function() {
88					var title = null;
89					var val = null;
90					var tagName = $(this).prop("tagName");
91
92					var name = $( this )  . attr( 'name' );
93					if ( name ) name = name . replace( '[]' , '' );
94
95					if ("INPUT" == tagName) {
96						var inputType = $(this).attr("type");
97
98						switch (inputType) {
99							case "submit":
100							case "button":
101							case "hidden":
102							case "image":
103								// 処理不要
104								break;
105							case "radio":
106							case "checkbox":
107								if ( ! $(this) . is( ':checked' ) ) {
108									break;
109								}
110
111								title = wpcf7cp_get_title( $( this ) );
112
113								val = $( this ) . val();
114								if( '1' === val || 'on' === val ) {
115									val = data_arr . checked_msg;
116								}
117								break;
118
119							case "file":
120								title = wpcf7cp_get_title($(this));
121								val = $(this).val().split(PATH_CODE).pop();
122								break;
123
124							default:
125								if ( $( this ) . hasClass( 'wpcf7-quiz' ) ) {
126									// CF7の送信可否判定用クイズは確認項目としない
127									return;
128								}
129								title = wpcf7cp_get_title($(this));
130								// サニタイズ
131								val = sanitizeText( $(this).val() );
132						}
133
134					} else if ("TEXTAREA" == tagName) {
135						title = wpcf7cp_get_title($(this));
136						// サニタイズ＆改行コード変換
137						val = sanitizeText( $(this).val() );
138						textAreaList.push(title);
139
140					} else if("SELECT" == tagName) {
141						title = wpcf7cp_get_title($(this));
142						val = $(this) . val();
143					}
144
145					// 有効なタイトルのない場合はouterHTMLに基づくシステム文字列を適用
146					if ( ! title ) {
147						var outerHTML = $( this ) . parents( 'p' ) . prop( 'outerHTML' );
148						var k = $ . inArray( outerHTML, noTitleOuterHTMLs );
149						if ( k === -1 ) {
150							// 同一のouterHTMLが未格納なら新たなINPUTセットとして処理
151							noTitleOuterHTMLs . push( outerHTML );
152							k = noTitleOuterHTMLs . length - 1;
153						}
154						title = noTitleDammyStr + k;
155					}
156

157					// 入力値をリストにセット
158					if ( title !== null && val !== null ) {
159						if ( ! dispList[title] ) {
160							dispList[title] = {
161								values: {},
162								textSet: getTextSet( $( this ) )
163							};
164						}
165						if ( typeof dispList[title]['values'][name] === 'undefined' ) {
166							dispList[title]['values'][name] = '';
167						} else {
168							dispList[title]['values'][name] += splitter;
169						}
170						dispList[title]['values'][name] += ( typeof val === 'object' ? val . join( splitter ) : val );	// multiple selectならjoin()
171					}
172				});
173
174				// form全体を非表示にする
175				formElm.addClass('wpcf7cp-form-hide');
176			}
177		});
178
179		// 確認画面表示
180		$( 'div.wpcf7' ).each(function(){
181			var cfm_btn_edit = data_arr.cfm_btn_edit;				// 修正ボタン名
182			var cfm_btn_mail_send = data_arr.cfm_btn_mail_send;		// この内容で送信するボタン名
183
184			// 確認内容生成
185			var wrapperDivObj = $( '<div id="wpcf7cpcnf">' ) . appendTo( this );
186			var tableObj = $( '<table>' ) . appendTo( wrapperDivObj );
187			for (key in dispList) {
188				// タイトルが空欄の場合
189				var keyToShow = key;
190				var regexp = new RegExp( '^' + noTitleDammyStr + '[0-9]+$');
191				if ( keyToShow . match( regexp ) ) {
192					// システム文字列を除去して空タイトル表示
193					keyToShow = '';
194				}
195
196				var title = $( '<p>' ) . text( keyToShow );
197				var titleElm = $( '<th>' ) . append( title );
198				var val = '';
199				if ( ! dispList[key]['textSet'] ) {
200					for ( k in dispList[key]['values'] ) {
201						if ( val !== '' ) {
202							val += splitter;
203						}
204						val += dispList[key]['values'][k];
205					}
206					val = '<p>' + val + '</p>';
207				} else {
208					val = dispList[key]['textSet'];
209					for ( k in dispList[key]['values'] ) {
210						val = val . replace( new RegExp( '\{%' + k + '%\}', 'g' ), String( dispList[key]['values'][k] ) );
211					}
212				}
213				var valElm = $( '<td>' ) . append( val );
214				var rowElm = $( '<tr>' ) . append( titleElm ) . append( valElm );
215
216				tableObj . append( rowElm );
217			}
218
219			// 修正、送信ボタン生成
220			var btnTableElm = $( '<div class="wpcf7cp-btns">' ) . append(
221				$(
222					'<button type="button" class="wpcf7-form-control wpcf7cp-cfm-edit-btn">' + cfm_btn_edit + '</button>'
223				) . click( function() {
224					wpcf7cp_edit();
225					changeFormStatus( 'input' );
226				} )
227			) . append(
228				$(
229					'<button type="button" class="wpcf7-form-control wpcf7-submit wpcf7cp-cfm-submit-btn">' + cfm_btn_mail_send + '</button>'
230				) . click( function() {
231					wpcf7cp_mail_send();
232				} )
233			);
234			wrapperDivObj . append( btnTableElm );
235
236			// 確認画面トップまでスクロール
237			var position = $(this).offset().top;
238
239			var popupHeight = $( '#wpcf7cpcnf' ) . height();
240			var windowHeight = document.documentElement . clientHeight;
241
242			var topOffset = 50;
243			if ( popupHeight < windowHeight ) {
244				// 確認ポップアップの高さがブラウザ高さより小さければ上下中央表示
245				topOffset = Math . round( ( windowHeight - popupHeight ) / 2 );
246			}
247
248			var speed = 500;
249			$("html, body").animate({scrollTop: position - topOffset }, speed, "swing");
250		});
251	}
252
253
254	// 確認画面から「修正」ボタンで編集画面に復帰
255	var wpcf7cp_edit = function(){
256		// 確認画面の修正ボタン押下時の処理
257		// 非表示としたformを再表示する
258		$( '.wpcf7cp-form-hide' ) . each( function() {
259			$(this).removeClass("wpcf7cp-form-hide");
260		});
261
262		// 確認画面を閉じる
263		$( '#wpcf7cpcnf' ) . each( function() {
264			$(this) . remove();
265			return false;
266		});
267	}
268
269
270	// 入力フォームのステータスをinput/confirmに変更
271	var changeFormStatus = function( statusTo ) {
272		if ( -1 === $ . inArray( statusTo, ['input', 'confirm'] ) ) {
273			return;
274		}
275
276		$( 'input[name=_wpcf7cp]' ) . each( function() {
277			$( this ) . val( 'status_' + statusTo );
278			return false;
279		});
280	};
281
282
283	// 確認画面からメールを送信
284	var wpcf7cp_mail_send = function(){
285		// 確認画面の、この内容で送信するボタン押下時の処理
286		// $( '.wpcf7-form' ) . submit();
287
288		// フォーム送信と確認画面除去
289		var submitButton = $( 'form.wpcf7-form .wpcf7-submit' );
290		var forms = submitButton . parents( 'form' );
291		var responseOutput = forms . find( 'div.wpcf7-response-output' );
292		forms . one( 'submit', function() {
293			// clickイベントによるsubmitイベント発生後に実行
294			setTimeout( function() {
295				responseOutput . removeClass( 'wpcf7cp-force-hide' );
296				wpcf7cp_edit();
297			} );
298		} );
299		submitButton . click();
300
301		// プログレス表示
302		var progressContents = $( '<div class="wpcf7cp-progress-cover"></div><div class="wpcf7cp-progress-content"><p>Progress...</p></div>' ) . appendTo( forms[0] );
303		progressContents . height( progressContents . height() );	// height: 100%を絶対値に変換して送信完了メッセージ読み込み時のガタつき防止
304

305		// AJAXメッセージの反映を待ってスクロール
306		var intervalId = setInterval( function() {
307			// メッセージ反映チェック
308			if ( ! responseOutput . text() . length || ! responseOutput . is( ':visible' ) ) {
309				return;
310			}
311
312			// フォーム初期化
313			resetForm();
314			changeFormStatus( 'input' );
315
316			// プログレス表示の除去
317			progressContents . remove();
318
319			// メッセージ表示箇所までスクロール
320			var responsePosi = responseOutput . offset() . top;
321			var scrollToPosi = responsePosi - ( $( window ) . height() / 2 );
322			$( 'html, body' ) . animate( { scrollTop: scrollToPosi }, 500, 'swing' );
323
324			// 定時処理終了
325			clearInterval( intervalId );
326		}, 300 );
327	}
328
329
330	// タイトル取得
331	var wpcf7cp_get_title = function (element) {
332		var title = null;
333
334		var makeTitle = function( titleObj ) {
335			var titleObjClone = titleObj . clone();
336			titleObjClone . find( '.avoid-confirm' ) . remove();
337			if (titleObjClone.length > 1) {
338				titleObjClone = titleObjClone.first();
339			}
340			return $ . trim( titleObjClone . text() );
341		};
342
343		// タイプの取得
344		var thisObj = $( element );
345		var inputType = thisObj . attr( 'type' );
346
347		// checkbox/radioの場合はlegend要素を最優先
348		if ( inputType === 'checkbox' || inputType === 'radio' ) {
349			var legend = thisObj . closest( 'fieldset' ) . find( 'legend' );
350			if ( legend . length ) {
351				// filedset/legendが適用されていればタイトルに使用
352				title = makeTitle( legend );
353			}
354		}
355
356		if ( ! title ) {
357			// name対応label要素によるタイトル取得
358			var nameVal = thisObj . attr( 'name' )  . replace(/\[\]$/, '');
359			if ( inputType !== 'radio' ) {
360				var labelObjWithForAttr = $( 'label[for="' + nameVal + '"]' );
361				if ( labelObjWithForAttr ) {
362					title = makeTitle( labelObjWithForAttr );
363				}
364
365				// 親label要素（CF7方式）でのタイトル取得
366				if ( ! title && inputType !== 'checkbox' ) {
367					var closestLabelObj = thisObj . closest( 'label' );
368					if ( closestLabelObj ) {
369						if ( 'SELECT' == thisObj . prop( 'tagName' ) ) {
370							// セレクトメニューなら複製→オプション要素を除去
371							closestLabelObjClone = closestLabelObj . clone();
372							closestLabelObjClone . find( 'option' ) . remove();
373							title = makeTitle( closestLabelObjClone );
374						} else {
375							title = makeTitle( closestLabelObj );
376						}
377					}
378				}
379			}
380
381			// クラス名による明示に対応
382			if ( ! title ) {
383				var classLabelObj = $( '.title-contactform7.for-' + ( nameVal ) );
384				if ( classLabelObj ) {
385					title = makeTitle( classLabelObj );
386				}
387			}
388
389			// テーブルの同一行に存在する.title-contactform7要素に対応
390			if ( ! title ) {
391				var closestTrObj = thisObj . closest( 'tr' );
392				if ( closestTrObj ) {
393					var labelInSameTrObj = closestTrObj . find( '.title-contactform7' );
394					if ( labelInSameTrObj ) {
395						title = makeTitle( labelInSameTrObj );
396					}
397				}
398			}
399
400			// 親label要素（CF7方式）の単独チェックボックスに対応（規約確認など）
401			if ( ! title && inputType === 'checkbox' ) {
402				var closestLabelObj = thisObj . closest( 'label' );
403				if ( closestLabelObj ) {
404					title = makeTitle( closestLabelObj );
405				}
406			}
407		}
408
409		return title;
410	};
411
412
413	// CF7のAJAXイベント
414	document . addEventListener( 'wpcf7submit', function( event ) {
415		if ( 'wpcf7cp_confirm' === event.detail.status) {
416			wpcf7cp_confirm( event.detail.unitTag );
417		}
418	}, false );
419} )( jQuery );