<風格> #form-appi-編輯帳號-請求， #form-appi-data-account-request， #form-appi-個人-資料-報告-請求， #form-appi-刪除-帳戶-請求， #form-appi-do-not-sell-request { 顯示：無； } #appi_page 按鈕{ 背景顏色：透明； 邊框：0； 底部邊框：1px 純黑色； 內邊距：0px； } /* 模態背景 */ #資料驗證背景{ 顯示：無； 位置：固定； z 索引：1； 頂部填充：計算（50vh - 83px）； 左：0； 頂部：0； 寬度：100%； 高度：100%； 溢出：自動； 背景顏色：rgb(0,0,0)； 背景顏色：rgba(0,0,0,0.4); 不透明度：未設定； z 索引：9999； } /* 模態內容 */ #資料驗證模式{ 背景顏色：#fefefe； 保證金：自動； 內邊距：16px； 邊框：1px實心#888； 寬度：38%； } /* 模態關閉按鈕 */ .資料驗證關閉{ 顏色：#aaaaaa； 浮動：右； 字體大小：28px； 字體粗細：粗體； 行高：17px； 背景顏色：透明； 邊框：0px； 內邊距：0px； } .資料驗證關閉：懸停{ 顏色：#000； 文字裝飾：無； 遊標：指針； } /* 複選框文字 */ #資料驗證容器 p{ 顯示：內聯塊； 填充：0； 保證金：0； 行高：24px； 左內邊距：10px； 垂直對齊：頂部； 寬度：計算（100% - 45px）； } #資料驗證容器a，#資料驗證容器a：懸停{ 文字裝飾：底線！ 顏色：#4285f4； } #資料驗證容器輸入{ 不透明度：0； 寬度：0； 高度：0； 保證金：0； 填充：0； } /* 複選框圖示 */ #資料驗證圖示{ 遊標：指針； 位置：相對； 保證金：自動； 寬度：18px； 高度：18px； -webkit-tap-highlight-color：透明； 變換：translate3d(0, 0, 0); 上邊距：2px； } #資料驗證圖示：之前{ 內容： ””; 位置：絕對； 頂部：-7px； 左：-7px； 寬度：32px； 高度：32像素； 邊界半徑：50%； 背景：rgba(34,50,84,0.03); 不透明度：0； 過渡：不透明度 0.2s 緩動； } #資料驗證圖示 svg { 位置：相對； z 索引：1； 填充：無； 筆劃線帽：圓形； 筆劃線連接：圓形； 行程：#c8ccd4； 筆畫寬度：1.5； 變換：translate3d(0, 0, 0); 過渡：全部 0.2s 緩和； } #資料驗證圖示 svg 路徑 { 筆畫破折號數組：60； 筆畫-dashoffset：0； } #data-verification-icon svg 折線 { 筆畫破折號數組：22； 筆畫-短劃線偏移：66； } #資料驗證圖示：懸停：之前{ 不透明度：1； } #資料驗證容器：懸停#資料驗證圖示 svg { 行程：#4285f4； } #data-verification-icon.clicked svg { 行程：#4285f4； } #data-verification-icon.clicked svg 路徑 { 筆畫-短劃線偏移：60； 過渡：全0.3s線性； } #data-verification-icon.clicked svg 折線 { 筆畫-dashoffset：42； 過渡：全0.2s線性； 轉換延遲：0.15s； } /* 無障礙設計 */ #data-verification-icon:focus, .data-verification-close:focus, #data-verification-container input:focus ~ #data-verification-icon svg, #data-verification-container a:focus { 盒子陰影: 0 0 0 3px rgba(21, 156, 228, 0.4); 過渡：全部 0.3s 緩和； 概要：無； 變換：縮放（1.06）； } #appi_page .list-unstyled li 按鈕 { 遊標：指針； } .show-isense { 過渡：不透明度 400 毫秒！ } .hide-isense { 不透明度：0！ 過渡：0.4s 緩出； } /* 移動解析度的模態變化*/ @media only 螢幕和（最大寬度：600px）{ #資料驗證模式{ 寬度：90%； } } /* 載入元素 */ .載入中 { 顯示：無； 頂部：50vh； 左：50大眾； 位置：固定； } .loading:not(:必填):之後{ 內容： ''; 顯示：塊； 字體大小：10px； 寬度：1em； 高度：1em； 上邊距：-0.5em； -webkit-animation：旋轉器 1500ms 無限線性； -moz-animation：旋轉器 1500ms 無限線性； -ms-animation：旋轉器 1500ms 無限線性； -o-animation：旋轉器1500ms無限線性； 動畫：旋轉器1500ms無限線性； 邊界半徑：0.5em； -webkit-box-shadow：RGBA（255,255,255，1）1.5EM 0 0 0 0，RGBA（255,255,255，1）1.1EM 1.1EM 0 0 0，RGBA（255,255,255，1）0 1.50 1. （2555,255,255,255,255,255,255,255,255,255,1） -1.1em 1.1em 0 0，rgba(255,255,255, 1) -1.5em 0 0 15 0，rgba(255,255,255, 1) 0 -1.5em 0 0，rgba (255,255,255, 1) 1.1em -1.1em 0 0; 框陰影： rgba(255,255,255, 1) 1.5em 0 0 0, rgba(255,255,255, 1) 1.1em 1.1em 0 0, rgba(255,255,255, 1) 0 0 0, rgba(255,255,255, 1) 0 0 0, rgba(255,255,255, 1) 0 15.嗯1.1 em 0 0, rgba(255,255,255, 1) -1.5em 0 0 0, rgba(255,255,255, 1) -1.1em -1.1em 0 0, rgba(255,255,255, 1) 0 -1.5em 0 0, rgba(255,255,255, 1 ) 1.1em -1.1em 0 0; } /* 動畫片 */ @-webkit-keyframes 微調器 { 0% { -webkit-transform：旋轉（0deg）； -moz變換：旋轉（0度）； -ms-變換：旋轉（0度）； -o-變換：旋轉（0度）； 變換：旋轉（0度）； } 100% { -webkit變換：旋轉（360度）； -moz變換：旋轉（360度）； -ms-變換：旋轉（360度）； -o-變換：旋轉（360度）； 變換：旋轉（360°）； } } @-moz-keyframes 微調器 { 0% { -webkit-transform：旋轉（0deg）； -moz變換：旋轉（0度）； -ms-變換：旋轉（0度）； -o-變換：旋轉（0度）； 變換：旋轉（0度）； } 100% { -webkit變換：旋轉（360度）； -moz變換：旋轉（360度）； -ms-變換：旋轉（360度）； -o-變換：旋轉（360度）； 變換：旋轉（360°）； } } @-o-關鍵影格微調器 { 0% { -webkit-transform：旋轉（0deg）； -moz變換：旋轉（0度）； -ms-變換：旋轉（0度）； -o-變換：旋轉（0度）； 變換：旋轉（0度）； } 100% { -webkit變換：旋轉（360度）； -moz變換：旋轉（360度）； -ms-變換：旋轉（360度）； -o-變換：旋轉（360度）； 變換：旋轉（360°）； } } @關鍵影格微調器{ 0% { -webkit-transform：旋轉（0deg）； -moz變換：旋轉（0度）； -ms-變換：旋轉（0度）； -o-變換：旋轉（0度）； 變換：旋轉（0度）； } 100% { -webkit變換：旋轉（360度）； -moz變換：旋轉（360度）； -ms-變換：旋轉（360度）； -o-變換：旋轉（360度）； 變換：旋轉（360°）； } } <腳本> /* 向上滑動 */ 讓slideUp =（目標，持續時間= 500）=> { target.style.transitionProperty = '高度、邊距、填充'; target.style.transitionDuration = 持續時間 + 'ms'; target.style.boxSizing = '邊框'; target.style.height = target.offsetHeight + 'px'; 目標.offsetHeight; target.style.overflow = '隱藏'; 目標.樣式.高度 = 0; 目標.樣式.paddingTop = 0; 目標.樣式.paddingBottom = 0; 目標.樣式.marginTop = 0; 目標.樣式.marginBottom = 0; window.setTimeout( () => { target.style.display = '無'; target.style.removeProperty('高度'); target.style.removeProperty('padding-top'); target.style.removeProperty('padding-bottom'); target.style.removeProperty('margin-top'); target.style.removeProperty('margin-bottom'); target.style.removeProperty('溢位'); target.style.removeProperty('transition-duration'); target.style.removeProperty('transition-property'); }， 期間）; // 關閉資料可攜性部分時，將請求類型值設定回空字串 if (target.getAttribute('id') === 'form-appi-data-account-request') { document.querySelector('#form-appi-data-account-request-request-type').value = ''; } } /* 滑下 */ 讓slideDown =（目標，持續時間= 500）=> { 設定超時（函數（）{ target.style.removeProperty('顯示'); 讓顯示 = window.getCompulatedStyle(target).display; if (display === '無') display = '塊'; target.style.display = 顯示； 讓高度=目標.offsetHeight; target.style.overflow = '隱藏'; 目標.樣式.高度 = 0; 目標.樣式.paddingTop = 0; 目標.樣式.paddingBottom = 0; 目標.樣式.marginTop = 0; 目標.樣式.marginBottom = 0; 目標.offsetHeight; target.style.boxSizing = '邊框'; target.style.transitionProperty = "高度、邊距、填滿"; target.style.transitionDuration = 持續時間 + 'ms'; target.style.height = 高度 + 'px'; target.style.removeProperty('padding-top'); target.style.removeProperty('padding-bottom'); target.style.removeProperty('margin-top'); target.style.removeProperty('margin-bottom'); window.setTimeout( () => { target.style.removeProperty('高度'); target.style.removeProperty('溢位'); target.style.removeProperty('transition-duration'); target.style.removeProperty('transition-property'); }， 期間）; }, 100) } /* 工具 */ var SlideToggle =（目標，持續時間= 500）=> { if (window.getComputedStyle(target).display === '無') { 返回幻燈片（目標，持續時間）； } 別的 { 返回幻燈片（目標，持續時間）； } } /* 褪色 */ vartoggleFadeiSense = (elem, show) => { 如果（顯示）{ elem.style.display = "區塊"; 設定超時（函數（）{ elem.classList.add('show-isense'); elem.classList.remove('hide-isense'); },20) } 別的 { elem.classList.remove('show-isense'); elem.classList.add('hide-isense'); 設定超時（（）=> { elem.style.display = '無'; }, 400) } } var appiSlideUpAll = 函數() { SlideUp(document.querySelector('#form-appi-edit-account-request'), 100); SlideUp(document.querySelector('#form-appi-data-account-request'), 100); SlideUp(document.querySelector('#form-appi-personal-data-report-request'), 100); SlideUp(document.querySelector('#form-appi-do-not-sell-request'), 100); SlideUp(document.querySelector('#form-appi-delete-account-request'), 100); document.querySelector('#appi_page 按鈕').setAttribute("aria-expanded", "false"); }; var 電子郵件，類型，consentGiven = false； var verifyModalContent = ''; var appiSendRequest = 函數（回呼）{ fetch('https://www.cloudflare.com/cdn-cgi/trace', { 方法：'獲取'， 標題：{ '內容類型'：'文字/純文字'， }, }) .then(resp => resp.text()) .then(分別=> { if (!resp.error) { 令 ipInfo = resp; 讓 formData = new FormData(); if (type === '客戶/不銷售') { isenseGDPR.Cookies.set('cookieconsent_preferences_disabled', '分析、行銷、功能,', { 過期: 365 }); isenseGDPR.Cookies.set('cookieconsent_status', 'accept_selected', { 過期: 365 }); window.Shopify.trackingConsent.setTrackingConsent(false,function() { console.log('setTrackingConsent false')}); if (document.querySelector('.cc-window')) { document.querySelector('.cc-window').style.display = 'none'; } // 重置彈出文字 document.querySelector('#appi-modal-container-text').innerHTML = '我同意收集我的電子郵件和 IP 位址以處理此請求。如需了解更多信息，請查看隱私權政策和服務條款。 } formData.append('shop', Shopify.shop); formData.append('電子郵件', 電子郵件); formData.append('類型', 類型); formData.append('sourceOfRequest', 3); formData.append('ipAddress', ipInfo); formData.append('consentGiven',consentGiven); formData.append('page', 'appi'); formData.append('lang', Shopify.locale ? Shopify.locale : ''); formData.append('gtranslateLang', isenseGDPR.Cookies.get('googtrans') ? isenseGDPR.Cookies.get('googtrans') : ''); fetch('https://gdpr.apps.isenselabs.com/gdprRequests/submitRequest', { 方法：'POST'， 正文：表單數據 }) .then(resp => resp.json()) .then(分別=> { if (!resp.error) { appiSlideUpAll(); if (resp.message.length) { 警報（或訊息）； } 別的 { alert('您的請求已成功提交。請檢查您的電子郵件以獲取更多資訊。'); } } 別的 { 警報（或訊息）； } if (回呼型別=='函數') { 回調（分別）； } }) .catch（錯誤=> { 警報（錯誤訊息）； }) } 別的 { 警報（或訊息）； } }) } //將模態附加到主體，否則它不會保持居中（即使位置固定） document.querySelector("body").insertAdjacentHTML('beforeend',verificationModalContent); document.addEventListener("DOMContentLoaded", function() { 讓 searchParams = new URLSearchParams(window.location.search); 讓 param = searchParams.get('id'); 如果（參數）{ document.getElementById(param).scrollIntoView(); } // 當使用者點選（x）時，關閉模態框 document.querySelector('.data-verification-close').addEventListener('click', function(e) { e.preventDefault(); 關閉驗證模式（）； // 聚焦所選請求類型的按鈕 讓 appiForms = document.querySelectorAll('.form-appi-request'); appiForms.forEach(函數(appiForm) { if (appiForm.style.display !== "無") { 讓 appiFormLinks = appiForm.previousElementSibling.querySelectorAll('li'); if (appiFormLinks.length === 1) { appiFormLinks[0].querySelector('button').focus(); } else if (appiFormLinks.length > 1) { appiFormPickedLinkValue = document.querySelector('#form-appi-data-account-request-request-type').value; 開關（appiFormPickedLinkValue）{ 案例“客戶/請求”： appiFormLinks[0].querySelector('button').focus(); 休息; 案例“客戶/個人資訊”： appiFormLinks[1].querySelector('button').focus(); 休息; 案例“客戶/訂單”： appiFormLinks[2].querySelector('button').focus(); 休息; 預設: 休息; } } } }); }); document.querySelector('#data-verification-icon, #data-verification-container p').addEventListener('click', function(e) { e.preventDefault(); // 偵測 href 的點擊，因為它被覆蓋了。 if(e.target.tagName === "A") { window.open(e.target.href, '_blank'); 返回; } document.querySelector('#data-verification-icon').classList.add("點擊"); 設定超時(()=>{ toggleFadeiSense(document.querySelector("#data-verification-modal"), false); document.querySelector('#data-verification-background .loading').style.display = 'inline-block'; 同意=真； appiSendRequest(函數(分別) { 同意=假； 關閉驗證模式（）； }); }, 400); }); }); 函數 openVerificationModal(){ toggleFadeiSense(document.querySelector("#data-verification-modal"), true); toggleFadeiSense(document.querySelector('#data-verification-background'), true); document.querySelector('#data-verification-container input').focus(); } 函數關閉驗證模式（）{ toggleFadeiSense(document.querySelector("#data-verification-background"), false); document.querySelector('#data-verification-icon').classList.remove("點擊"); document.querySelector('#data-verification-background .loading').style.display = 'none'; } document.querySelector('#btn-appi-edit-account-request').addEventListener('click', function(e) { e.preventDefault(); appiSlideUpAll(); SlideDown(document.querySelector('#form-appi-edit-account-request'), 200); this.setAttribute("aria-expanded", "true"); }); document.querySelector('#form-appi-edit-account-request-submit').addEventListener('click', function(e) { e.preventDefault(); email = document.querySelector('#form-appi-edit-account-request-email').value; type = '客戶/編輯'; 開啟驗證模式（）； }); document.querySelectorAll('#btn-appi-requests-request, #btn-appi-personal-information-request, #btn-appi-orders-request').forEach(element => { element.addEventListener('點選', function(e) { e.preventDefault(); appiSlideUpAll(); 型態=''； //重置彈出訊息 document.querySelector('#appi-modal-container-text').innerHTML = '我同意收集我的電子郵件和 IP 位址以處理此請求。如需了解更多信息，請查看隱私權政策和服務條款。 switch(this.getAttribute('id')) { 案例“btn-appi-requests-request”： type = '客戶/請求'; 休息; 案例“btn-appi-個人資訊請求”： 類型 = '客戶/個人資訊'; 休息; 案例“btn-appi-orders-request”： type = '顧客/訂單'; 休息; } document.querySelector('#form-appi-data-account-request-request-type').value = type; SlideDown(document.querySelector('#form-appi-data-account-request'), 200); this.setAttribute("aria-expanded", "true"); }) }); document.querySelector('#form-appi-data-account-request-submit').addEventListener('click', function(e) { e.preventDefault(); email = document.querySelector('#form-appi-data-account-request-email').value; type = document.querySelector('#form-appi-data-account-request-request-type').value; 開啟驗證模式（）； }); document.querySelector('#btn-appi-personal-data-report-request').addEventListener('click', function(e) { e.preventDefault(); appiSlideUpAll(); SlideDown(document.querySelector('#form-appi-personal-data-report-request'), 200); this.setAttribute("aria-expanded", "true"); }); document.querySelector('#form-appi-personal-data-report-request-submit').addEventListener('click', function(e) { e.preventDefault(); email = document.querySelector('#form-appi-personal-data-report-request-email').value; type = '客戶/報告'; 開啟驗證模式（）； }); document.querySelector('#btn-appi-do-not-sell-request').addEventListener('click', function(e) { e.preventDefault(); appiSlideUpAll(); SlideDown(document.querySelector('#form-appi-do-not-sell-request'), 200); this.setAttribute("aria-expanded", "true"); }); document.querySelector('#form-appi-do-not-sell-request-submit').addEventListener('click', function(e) { e.preventDefault(); email = document.querySelector('#form-appi-do-not-sell-request-email').value; type = '客戶/不銷售'; // 檢查客戶是否登入 if (__st.cid != 未定義) { document.querySelector('#appi-modal-container-text').innerHTML = '我同意收集我的電子郵件和 IP 位址以處理此請求。如需了解更多信息，請查看隱私權政策和服務條款。 } 別的 { document.querySelector('#appi-modal-container-text').innerHTML = '我同意收集我的電子郵件和 IP 位址以處理此請求。如需了解更多信息，請查看隱私權政策和服務條款。 注意： 如果您是訪客使用者或您沒有登入您的帳戶，您的登出選擇將僅在此瀏覽器工作階段中有效。 } 開啟驗證模式（）； }); document.querySelector('#btn-appi-delete-account-request').addEventListener('click', function(e) { e.preventDefault(); appiSlideUpAll(); SlideDown(document.querySelector('#form-appi-delete-account-request'), 200); this.setAttribute("aria-expanded", "true"); }); document.querySelector('#form-appi-delete-account-request-submit').addEventListener('click', function(e) { e.preventDefault(); email = document.querySelector('#form-appi-delete-account-request-email').value; type = '客戶/刪除'; 開啟驗證模式（）； }); // 合規頁面請求的鍵盤導航 document.querySelector('#appi_page').addEventListener('keydown', function(e) { 讓 isTabPressed = e.keyCode === 9 || e.key === "Tab" || e.code === "Tab"; // 這個函數省去了我們每次聚焦後呼叫 e.preventDefault() 的麻煩 讓executeFocus = (focusElement) => {focusElement.focus();e.preventDefault();} 如果（isTabPressed）{ 讓 appiFormPickedLinkValue = document.querySelector('#form-appi-data-account-request-request-type').value; 讓 appiRequestsButton = document.querySelector('#btn-appi-requests-request'); 讓personalInformationButton = document.querySelector('#btn-appi-personal-information-request'); 讓 orderButton = document.querySelector('#btn-appi-orders-request'); 讓personalDataReportButton = document.querySelector('#btn-appi-personal-data-report-request'); 讓 dataAccountFormEmailField = document.querySelector('#form-appi-data-account-request-email'); 讓 dataAccountFormSubmitButton = document.querySelector('#form-appi-data-account-request-submit'); if (e.shiftKey) { if ((document.activeElement === individualInformationButton && appiFormPickedLinkValue === '客戶/請求') || (document.activeElement === orderButton && appiFormPickedLinkValue === 'customer/personal_info')) { 執行焦點（dataAccountFormSubmitButton）； } else if (document.activeElement === dataAccountFormEmailField) { if (appiFormPickedLinkValue === '客戶/請求') { 執行焦點（appiRequestsButton）； } else if (appiFormPickedLinkValue === '客戶/個人資料') { 執行焦點（個人資訊按鈕）； } } else if (document.activeElement === individualDataReportButton) { if (appiFormPickedLinkValue !== '顧客/訂單') { 執行焦點（訂單按鈕）； } } } 別的 { if ((document.activeElement === appiRequestsButton && appiFormPickedLinkValue === '客戶/請求') || (document.activeElement === PersonalInformationButton && appiFormPickedLinkValue === 'customer/personal_info')) { 執行對焦（dataAccountFormEmailField）； } else if (document.activeElement === dataAccountFormSubmitButton) { if (appiFormPickedLinkValue === '客戶/請求') { 執行焦點（個人資訊按鈕）； } else if (appiFormPickedLinkValue === '客戶/個人資料') { 執行焦點（訂單按鈕）； } } else if (document.activeElement ===ordersButton) { if (appiFormPickedLinkValue !== '顧客/訂單') { 執行焦點（個人資料報告按鈕）； } } } } }); // 資料驗證模式中的鍵盤導航以實現可訪問性 document.querySelector('#data-verification-modal').addEventListener('keydown', function(e) { 讓 isTabPressed = e.keyCode === 9 || e.key === "Tab" || e.code === "製表符"; 讓 isEscapePressed = e.keyCode === 27 || e.key ===“轉變”|| e.code === "逃脫"; 設 isSpacePressed = event.keyCode === 32 || e.key === " " || event.code === "空間"; 讓 isEnterPressed = event.keyCode === 13 || e.key ===“輸入”|| event.code === "輸入"; 讓 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();} 如果（isEscapePressed）{ 如果（資料驗證關閉按鈕）{ dataVerificationCloseButton.click(); } } if (isSpacePressed || isEnterPressed) { if (document.activeElement === dataVerificationCheckbox) { document.querySelector('#data-verification-container #data-verification-icon').click(); } } 如果（isTabPressed）{ if (e.shiftKey) { if (dataVerificationCloseButton && document.activeElement === dataVerificationCloseButton) { 執行焦點（資料驗證連結）； } } 別的 { if (dataVerificationLink && document.activeElement === dataVerificationLink) { 執行焦點（資料驗證關閉按鈕）； } } } });