PDPAコンプライアンス

'; var isEmailValid = 関数(メール) { 正規表現 = /^(([^()\[\]\\.,;:\s@"]+(\.[^()\[\]\\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\ .[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; if (email == '' || email == 未定義) { false を返します。 } それ以外 { regex.test(email) を返します。 } } var pdpaSendRequest = 関数 (コールバック) { フェッチ('https://www.cloudflare.com/cdn-cgi/trace', { メソッド: 'GET'、 ヘッダー: { 'コンテンツタイプ': 'text/plain', }, }) .then(resp => resp.text()) .then(応答 => { （！resp.error）の場合{ ipInfo = resp; とします。 let formData = new FormData(); フォームデータを追加します。 formData.append('email', email); フォームデータを追加します。 フォームデータを追加します('sourceOfRequest', 9); フォームデータを追加します('ipAddress', ipInfo); formData.append('同意が得られました', 同意が得られました); formData.append('ページ', 'pdpa'); formData.append('lang', Shopify.locale ? Shopify.locale : ''); formData.append('gtranslateLang', isenseGDPR.Cookies.get('googtrans') ? isenseGDPR.Cookies.get('googtrans') : ''); フェッチ('https://gdpr.apps.isenselabs.com/gdprRequests/submitRequest', { メソッド: 'POST'、 本文: フォームデータ }) .then(resp => resp.json()) .then(応答 => { （！resp.error）の場合{ pdpaSlideUpAll(); if (resp.メッセージの長さ) { アラート(resp.メッセージ); } それ以外 { alert('リクエストは正常に送信されました。詳細についてはメールを確認してください。'); } } それ以外 { アラート(resp.メッセージ); } if (typeof コールバック == 'function') { コールバック(応答); } }) .catch(エラー => { アラート(エラーメッセージ); }) } それ以外 { アラート(resp.メッセージ); } }) } // モーダルを本体に追加します。そうしないと、位置が固定されていても中央に配置されません。 document.querySelector("body").insertAdjacentHTML('beforeend', verifyModalContent); document.addEventListener("DOMContentLoaded", 関数() { // ユーザーが(x) をクリックすると、モーダルが閉じます document.querySelector('.data-verification-close').addEventListener('click', function (e) { e.preventDefault(); 検証モーダルを閉じます(); // 選択されたリクエストタイプのボタンにフォーカスを当てる pdpaForms を document.querySelectorAll('.form-pdpa-request') とします。 pdpaForms.forEach(関数(pdpaForm) { if (pdpaForm.style.display !== "なし") { pdpaFormLinks を pdpaForm.previousElementSibling.querySelectorAll('li') にします。 pdpaFormLinks.length === 1 の場合 { pdpaFormLinks[0].querySelector('button').focus(); } } }); }); document.querySelector('#data-verification-icon, #data-verification-container p').addEventListener('click', function (e) { e.preventDefault(); // 上書きされるため、a href のクリックを検出します。 if (e.target.tagName === "A") { ウィンドウを開きます(e.target.href、'_blank')。 戻る; } document.querySelector('#data-verification-icon').classList.add("クリックされました"); タイムアウトを設定する(() => { トグルフェードインセンス(document.querySelector("#データ検証モーダル"), false); document.querySelector('#data-verification-background .loading').style.display = 'inline-block'; 同意 = true; pdpaSendRequest(関数 (応答) { 同意 = false; 検証モーダルを閉じます(); }); }, 400); }); }); 関数 openVerificationModal() { if(!isEmailValid(メール)) { alert('無効なメール'); 戻る; } トグルフェードインセンス(document.querySelector("#データ検証モーダル"), true); トグルフェードインセンス(document.querySelector('#データ検証背景'), true); document.querySelector('#データ検証コンテナ入力').focus(); } 関数closeVerificationModal() { トグルフェードインセンス(document.querySelector("#データ検証背景"), false); document.querySelector('#data-verification-icon').classList.remove("クリックされました"); document.querySelector('#data-verification-background .loading').style.display = 'なし'; // 選択されたリクエストタイプのボタンにフォーカスを当てる pdpaForms を document.querySelectorAll('.form-pdpa-request') とします。 pdpaForms.forEach(関数(pdpaForm) { if (pdpaForm.style.display !== "なし") { pdpaFormLinks を pdpaForm.previousElementSibling.querySelectorAll('li') にします。 pdpaFormLinks.length === 1 の場合 { pdpaFormLinks[0].querySelector('button').focus(); } それ以外 { // データポータビリティ要求のフォーカスロジック pdpaFormLinks = pdpaForm.parentElement; pdpaFormLinks.nodeName === 'LI' の場合 { pdpaFormLinks.querySelector('button').focus(); } } } }); } document.querySelector('#btn-pdpa-edit-account-request').addEventListener('click', function (e) { e.preventDefault(); pdpaSlideUpAll(); スライドダウン(document.querySelector('#form-pdpa-edit-account-request'), 200); this.setAttribute("aria-expanded", "true"); }); document.querySelector('#form-pdpa-edit-account-request-submit').addEventListener('click', function (e) { e.preventDefault(); メールアドレス = document.querySelector('#form-pdpa-edit-account-request-email').value; タイプ = '顧客/編集'; 検証モーダルを開きます(); }); document.querySelector('#btn-pdpa-requests-request').addEventListener('click', function(e) { e.preventDefault(); pdpaSlideUpAll(); スライドダウン(document.querySelector('#form-pdpa-requests-request'), 200); this.setAttribute("aria-expanded", "true"); }); document.querySelector('#form-pdpa-requests-request-submit').addEventListener('click', function(e) { e.preventDefault(); 電子メール = document.querySelector('#form-pdpa-requests-request-email').value; タイプ = '顧客/リクエスト'; 検証モーダルを開きます(); }); document.querySelector('#btn-pdpa-personal-information-request').addEventListener('click', function(e) { e.preventDefault(); pdpaSlideUpAll(); slideDown(document.querySelector('#form-pdpa-personal-information-request'), 200); this.setAttribute("aria-expanded", "true"); }); document.querySelector('#form-pdpa-personal-information-request-submit').addEventListener('click', function(e) { e.preventDefault(); 電子メール = document.querySelector('#form-pdpa-personal-information-request-email').value; タイプ = '顧客/個人情報'; 検証モーダルを開きます(); }); document.querySelector('#btn-pdpa-orders-request').addEventListener('click', function(e) { e.preventDefault(); pdpaSlideUpAll(); slideDown(document.querySelector('#form-pdpa-orders-request'), 200); this.setAttribute("aria-expanded", "true"); }); document.querySelector('#form-pdpa-orders-request-submit').addEventListener('click', function(e) { e.preventDefault(); 電子メール = document.querySelector('#form-pdpa-orders-request-email').value; タイプ = '顧客/注文'; 検証モーダルを開きます(); }); document.querySelector('#btn-pdpa-personal-data-report-request').addEventListener('click', function (e) { e.preventDefault(); pdpaSlideUpAll(); slideDown(document.querySelector('#form-pdpa-personal-data-report-request'), 200); this.setAttribute("aria-expanded", "true"); }); document.querySelector('#form-pdpa-personal-data-report-request-submit').addEventListener('click', function (e) { e.preventDefault(); 電子メール = document.querySelector('#form-pdpa-personal-data-report-request-email').value; タイプ = '顧客/レポート'; 検証モーダルを開きます(); }); document.querySelector('#btn-pdpa-delete-account-request').addEventListener('click', function(e) { e.preventDefault(); pdpaSlideUpAll(); slideDown(document.querySelector('#form-pdpa-delete-account-request'), 200); this.setAttribute("aria-expanded", "true"); }); document.querySelector('#form-pdpa-delete-account-request-submit').addEventListener('click', function(e) { e.preventDefault(); 電子メール = document.querySelector('#form-pdpa-delete-account-request-email').value; タイプ = '顧客/削除'; 検証モーダルを開きます(); }); // アクセシビリティのためのデータ検証モーダルでのキーボードナビゲーション document.querySelector('#data-verification-modal').addEventListener('keydown', function(e) { isTabPressed = e.keyCode === 9 とします || e.key === "タブ" || e.code === "タブ"; isEscapePressed = e.keyCode === 27 とします。 e.key === "エスケープ" || e.code === "エスケープ"; isSpacePressed = event.keyCode === 32 とします。 e.key === " " || event.code === "スペース"; isEnterPressed = event.keyCode === 13 とします。 e.key === "Enter" || event.code === "Enter"; dataVerificationCloseButton を document.querySelector('.data-verification-close'); に設定します。 dataVerificationCheckbox を document.querySelector('#data-verification-container input') とします。 dataVerificationLink を document.querySelector('#data-verification-container a') とします。 // この関数はフォーカスするたびにe.preventDefault()を呼び出す手間を省きます executeFocus = (focusElement) => {focusElement.focus();e.preventDefault();} を実行します。 if (isEscapePressed) { if (データ検証閉じるボタン) { dataVerificationCloseButton.click(); } } if (isSpacePressed || isEnterPressed) { if (document.activeElement === dataVerificationCheckbox) { document.querySelector('#データ検証コンテナー #データ検証アイコン').click(); } } タブが押された場合 if (e.shiftKey) { if (dataVerificationCloseButton && document.activeElement === dataVerificationCloseButton) { データ検証リンクを実行します。 } } それ以外 { if (dataVerificationLink && document.activeElement === dataVerificationLink) { フォーカスを実行します(データ検証閉じるボタン); } } } }); // ]]>