@turingflow/cookie-banner-sdk
Version:
A simple cookie consent banner SDK.
1 lines • 14.8 kB
JavaScript
!function(e){window.addEventListener("message",(function(e){e.data&&e.data.command&&"checkInstallStatus"===e.data.command&&e.source.postMessage({command:"isInstalled",callId:e.data.callId,result:!0},e.origin)}));const t={reject:a({zh:"全部拒绝",en:"Reject All"}),save:a({zh:"保存我的偏好",en:"Save My Preferences"}),accept:a({zh:"全部接受",en:"Accept All"})};function n(){return o().startsWith("zh")?{title:"我们重视您的隐私",message:"我们使用 Cookie 来提升您的浏览体验、个性化内容和广告,并分析我们的流量。点击“全部接受”即表示您同意我们使用 Cookie。",customize:"自定义",decline:"全部拒绝",accept:"全部接受",policyLabel:"隐私政策",policyURL:""}:{title:"We value your privacy",message:'We use cookies to enhance your browsing experience, serve personalised ads or content, and analyse our traffic. By clicking "Accept All", you consent to our use of cookies.',customize:"customize",decline:"Reject All",accept:"Accept All",policyLabel:"Privacy Policy",policyURL:""}}function o(){const e=(navigator.language||navigator.userLanguage||"en").toLowerCase();return e.startsWith("zh")?"zh":e.startsWith("en")?"en":e.startsWith("vi")?"vi":"en"}function i(e,t,n){if(!n)return;const o=document.createElement("a");o.href=e.policyURL||`https://gcomply.aotsea.com/consent/${t.id||""}/cookie-policy.html`,o.style.cssText="color:#1a73e8;text-decoration:underline;",o.innerHTML=e.policyLabel,o.target="_blank",o.onclick=e=>{e.stopPropagation()},n.appendChild(o)}const c={init:function(e){if(localStorage.getItem("cookie_banner_accepted"))return;if(document.getElementById("cookie-banner-root"))return;const t=e?.customizeSetting?.[o()]||e?.customizeSetting?.zh||{},c=t?.cookieNotice||n(),a=e?.layout||"bottom",s="#fff",r=this.createBannerElement(a,s);if("middle"===a){const t=this.createModalElement(s),n=this.createTitleElement(c.title,a),o=this.createMessageElement(c.message,a);i(c,e,o);const l=this.createButtonGroup(e,r);t.appendChild(n),t.appendChild(o),t.appendChild(l),r.appendChild(t)}else{const t=this.createLeftContent(c,e,a),n=this.createButtonGroup(e,r,!0);r.appendChild(t),r.appendChild(n)}document.body.appendChild(r)},createBannerElement:function(e,t){const n=document.createElement("div");return n.id="cookie-banner-root",n.style.cssText="middle"===e?"\n position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 9999;\n display: flex; align-items: center; justify-content: center;\n background: rgba(0,0,0,0.04);\n ":`\n position:fixed;left:0;right:0;${e}:0;z-index:9999;\n background:${t};color:#222;padding: 16.5px 24px;\n box-shadow:0 -2px 16px rgba(66, 53, 53, 0.08);\n display:flex;align-items:center;justify-content:space-between;gap:32px;\n font-size:16px;min-height:80px;\n `,n},createModalElement:function(e){const t=document.createElement("div");return t.style.cssText=`\n background: ${e}; color: #222; padding: 32px 36px 24px 36px;\n border-radius: 16px; box-shadow: 0 4px 32px rgba(0,0,0,0.10);\n min-width: 420px; max-width: 50vw; min-height: 220px;\n display: flex; flex-direction: column; align-items: center;\n `,t},createTitleElement:function(e,t){const n=document.createElement("div");return n.innerText=e,n.style.cssText="middle"===t?"font-weight:600;font-size:18px;margin-bottom:16px;text-align:center;":"font-weight:600;font-size:18px;margin-bottom:2px;",n},createMessageElement:function(e,t){const n=document.createElement("div");return n.innerHTML=e,n.style.cssText="middle"===t?"font-size:16px;line-height:1.7;text-align:center;margin-bottom:28px;":"font-size:14px;line-height:1.4;",n},createLeftContent:function(e,t,n){const o=document.createElement("div");o.style.cssText="display:flex;flex-direction:column;gap:8px;max-width:55vw;";const c=this.createTitleElement(e.title,n),a=this.createMessageElement(e.message,n);return i(e,t,a),o.appendChild(c),o.appendChild(a),o},createButtonGroup:function(e,i,c=!1){const s=e.customizeSetting[o()]||e.customizeSetting.zh||{},r=s?.cookieNotice||n(),l=document.createElement("div");l.style.cssText=c?"display:flex;gap:12px;":"display:flex;gap:16px;width:100%;justify-content:center;";const d=this.createButton(r.customize,c?"compact":"normal",(()=>function(e,n){if(document.getElementById("cookie-customize-modal"))return;const i=document.createElement("div");i.id="cookie-customize-modal",i.style.cssText="\n position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:10000;\n background:rgba(0,0,0,0.15);display:flex;align-items:center;justify-content:center;\n ";const c=document.createElement("div");c.style.cssText="\n background:#fff;border-radius:12px;max-width:700px;width:90vw;max-height:90vh;overflow-y:hidden;\n box-shadow:0 4px 32px rgba(0,0,0,0.10);padding:32px 32px 16px 32px;position:relative;\n display:flex;flex-direction:column;\n ";const s=document.createElement("span");s.innerHTML="×",s.style.cssText="\n position:absolute;right:24px;top:18px;font-size:28px;cursor:pointer;color:#888;\n font-weight:400;line-height:1;\n ",s.onclick=()=>i.remove();const r=e?.cookieCustomize||(o().startsWith("zh")?{title:"自定义 Cookie 偏好",description:"我们使用 Cookie 帮助您高效浏览和实现某些功能。您可以在下方每个类别下找到详细说明。<br>\n 被归类为“必要”的 Cookie 是网站基本功能所必需的,将始终启用。<br>\n 我们还会使用第三方 Cookie,帮助我们分析您如何使用本网站、存储您的偏好,并为您提供相关内容和广告。这些 Cookie 仅在您同意后存储在您的浏览器中。<br>\n 您可以选择开启或关闭部分 Cookie,但关闭部分 Cookie可能会影响您的浏览体验。",allwaysEnabled:"始终启用",nameColumn:"Cookie 名称",domainColumn:"域名",durationColumn:"有效期(天)",descriptionColumn:"描述",accept:"全部接受",decline:"全部拒绝",savePreferences:"保存我的偏好",cookieCategories:{necessary:{title:"必要的",description:"必要的cookie对于网站的基本功能至关重要,没有它们,网站将无法正常工作。这些cookie不会存储任何个人身份数据。"},functional:{title:"功能性",description:"功能性cookie用于增强网站的功能和服务,例如记住您的偏好设置。"},analytics:{title:"分析工具",description:"分析工具cookie用于收集和分析网站使用情况,以帮助我们改进网站性能和用户体验。"},performance:{title:"表现",description:"表现cookie用于提升网站性能。"},advertising:{title:"广告",description:"广告cookie用于个性化广告内容。"}}}:{title:"Customize Cookie Preferences",description:'We use cookies to help you browse efficiently and enable certain features. You can find detailed descriptions under each category below.<br>\n Cookies classified as "Necessary" are essential for the basic functions of the website and will always be enabled.<br>\n We also use third-party cookies to help us analyze how you use this site, store your preferences, and provide relevant content and ads. These cookies are stored in your browser only after you consent.<br>\n You can choose to enable or disable some cookies, but disabling certain cookies may affect your browsing experience.',allwaysEnabled:"Always Enabled",nameColumn:"Cookie Name",domainColumn:"Domain",durationColumn:"Duration (days)",descriptionColumn:"Description",accept:"Accept All",decline:"Decline All",savePreferences:"Save My Preferences",cookieCategories:{necessary:{title:"Necessary",description:"Necessary cookies are essential for the basic functionality of the website. Without these cookies, the website cannot function properly. They do not store any personal data."},functional:{title:"Functional",description:"Functional cookies are used to enhance the functionality and services of the website, such as remembering your preferences."},analytics:{title:"Analytics",description:"Analytics cookies are used to collect and analyze website usage to help us improve website performance and user experience."},performance:{title:"Performance",description:"Performance cookies are used to enhance the performance of the website."},advertising:{title:"Advertising",description:"Advertising cookies are used to personalize advertising content."}}}),l=document.createElement("div");l.innerText=r.title,l.style.cssText="font-size:22px;font-weight:600;margin-bottom:16px;";const d=document.createElement("div");d.style.cssText="color:#444;font-size:15px;line-height:1.7;margin-bottom:16px;",d.innerHTML=r.description;const p=document.createElement("div");p.style.cssText="margin-bottom:20px;";const u={};Object.keys(n).forEach((e=>{const t=r.cookieCategories[e],o=n[e];let i=!1;const c=document.createElement("div");c.style.cssText="\n margin-bottom:12px;\n position:relative;overflow:hidden;\n transition:max-height 0.2s;\n ";const s=document.createElement("div");s.style.cssText="font-weight:600;font-size:16px;display:flex;align-items:center;cursor:pointer;user-select:none;";const l=document.createElement("span");l.innerHTML='<svg width="16" height="16" style="vertical-align:middle;transition:transform 0.2s;"><polyline points="4,6 8,10 12,6" style="fill:none;stroke:#888;stroke-width:2"/></svg>',l.style.marginRight="8px",s.appendChild(l);const d=document.createElement("span");if(d.innerText=t.title,s.appendChild(d),"necessary"===e){const e=document.createElement("span");e.innerText=r.allwaysEnabled,e.style.cssText="color:#16c784;font-size:14px;font-weight:500;margin-left:auto;",s.appendChild(e)}else{const t=document.createElement("input");t.type="checkbox",t.checked=!0,t.style.cssText="width:30px;height:18px;accent-color:#1677ff;margin-left:auto;cursor:pointer;",t.onclick=function(e){e.stopPropagation()},u[e]=t,s.appendChild(t)}const m=document.createElement("div");m.style.cssText="font-size:14px;color:#555;margin:4px 0 0 24px;",m.innerText=t.description;const x=document.createElement("div");x.style.display="none",x.style.margin="10px",x.style.boxSizing="border-box",x.style.border="1px solid #e5e7eb",x.style.borderRadius="8px",x.style.background="#f6f8fa",x.style.padding="0";const f={key:r.nameColumn||a({zh:"Cookie 名称",en:"Cookie Name"}),domain:r.domainColumn||a({zh:"域名",en:"Domain"}),duration:r.durationColumn||a({zh:"有效期(天)",en:"Duration (Day)"}),description:r.descriptionColumn||a({zh:"说明",en:"Description"})},h=document.createElement("table");h.style.cssText="width:100%;margin:0;border-collapse:collapse;font-size:13px;",h.innerHTML=`\n <thead>\n <tr style="background:#f3f4f6;">\n <th style="padding:6px 8px;text-align:left;">${f.key}</th>\n <th style="padding:6px 8px;text-align:left;">${f.domain}</th>\n <th style="padding:6px 8px;text-align:left;">${f.duration}</th>\n <th style="padding:6px 8px;text-align:left;">${f.description}</th>\n </tr>\n </thead>\n <tbody>\n ${o.map((e=>`\n <tr>\n <td style="padding:6px 8px;">${e.key||""}</td>\n <td style="padding:6px 8px;">${e.domain||""}</td>\n <td style="padding:6px 8px;">${e.duration||""}</td>\n <td style="padding:6px 8px;">${a(e.description)}</td>\n </tr>\n `)).join("")}\n </tbody>\n `,x.appendChild(h),s.onclick=function(){i=!i,x.style.display=i?"block":"none",l.style.transform=i?"rotate(0deg)":"rotate(270deg)"},x.style.display="none",l.style.transform="rotate(270deg)",c.appendChild(s),c.appendChild(m),c.appendChild(x),p.appendChild(c)}));const m=document.createElement("div");m.style.cssText="display:flex;gap:16px;justify-content:space-between;margin-top:24px;";const x=document.createElement("button");x.innerText=r.decline||t.reject,x.style.cssText="\n flex:1;padding:0 24px;height:44px;background:#fff;color:#1a73e8;\n border:2px solid #1a73e8;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;\n transition:background 0.2s;\n ",x.onclick=function(){i.remove(),localStorage.setItem("cookie_banner_accepted","rejected"),Object.values(u).forEach((e=>e.checked=!1))};const f=document.createElement("button");f.innerText=r.savePreferences||t.save,f.style.cssText="\n flex:1;padding:0 24px;height:44px;background:#1677ff;color:#fff;\n border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;\n transition:background 0.2s;\n ",f.onclick=function(){i.remove();const e={};Object.keys(u).forEach((t=>e[t]=u[t].checked)),localStorage.setItem("cookie_banner_preferences",JSON.stringify(e)),localStorage.setItem("cookie_banner_accepted","custom")};const h=document.createElement("button");h.innerText=r.accept||t.accept,h.style.cssText="\n flex:1;padding:0 24px;height:44px;background:#1a73e8;color:#fff;\n border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;\n transition:background 0.2s;\n ",h.onclick=function(){i.remove(),localStorage.setItem("cookie_banner_accepted","accepted"),Object.values(u).forEach((e=>e.checked=!0))},m.appendChild(x),m.appendChild(f),m.appendChild(h);const g=document.createElement("div");g.style.cssText="\n flex:1 1 auto;\n padding:8px;\n box-sizing:border-box;\n overflow-y:auto;\n max-height:60vh;\n min-height:120px;\n display:flex;\n flex-direction:column;\n ",g.appendChild(d),g.appendChild(p),c.appendChild(s),c.appendChild(l),c.appendChild(g),c.appendChild(m),i.appendChild(c),document.body.appendChild(i)}(s,e.cookies))),p=this.createButton(r.decline,c?"compact":"normal",(()=>{i.remove(),localStorage.setItem("cookie_banner_accepted","rejected")}),!0),u=this.createButton(r.accept,c?"compact":"normal",(()=>{i.remove(),localStorage.setItem("cookie_banner_accepted","accepted")}),!0);return l.appendChild(d),l.appendChild(p),l.appendChild(u),l},createButton:function(e,t,n,o=!1){const i=document.createElement("button");i.innerText=e;const c="compact"===t,a=`\n padding:0 24px;\n height:${c?"40px":"44px"};\n background:${o?"#1a73e8":"#fff"};\n color:${o?"#fff":"#1a73e8"};\n border:${o?"none":"2px solid #1a73e8"};\n border-radius:${c?"4px":"6px"};\n font-size:${c?"14px":"16px"};\n font-weight:500;cursor:pointer;\n transition:background 0.2s;\n ${c?"":"flex:1;min-width:100px;"}\n `;return i.style.cssText=a,o||(i.onmouseenter=()=>i.style.background="#f5faff",i.onmouseleave=()=>i.style.background="#fff"),i.onclick=n,i}};function a(e){return e[o()]||e.zh||""}e.CookieBanner=c}(window);