<στυλ>
#form-ccpa-edit-account-request,
#form-ccpa-data-account-request,
#form-ccpa-personal-data-report-request,
#form-ccpa-delete-account-request ,
#form-ccpa-do-not-sell-request {
οθόνη: καμία;
}
#ccpa_page button {
Χρώμα φόντου: διαφανές.
περίγραμμα: 0;
περίγραμμα-κάτω: 1px συμπαγές μαύρο;
padding: 0px;
}
/* Modal background */
#data-verification-background {
οθόνη: καμία;
θέση: σταθερή;
z-index: 1;
padding-top: calc(50vh - 83px);
αριστερά: 0;
κορυφή: 0;
πλάτος: 100%;
ύψος: 100%;
υπερχείλιση: αυτόματη;
χρώμα φόντου: rgb(0,0,0);
χρώμα φόντου: rgba(0,0,0,0.4);
αδιαφάνεια: unset;
z-index: 9999;
}
/* Τροπικό περιεχόμενο */
#data-verification-modal {
φόντο-χρώμα: #fefefe;
περιθώριο: αυτόματο;
padding: 16px;
περίγραμμα: 1px στερεό #888;
πλάτος: 38%;
}
/* Κουμπί Modal Close */
.data-verification-close {
χρώμα: #aaaaaa;
float: δεξιά;
μέγεθος γραμματοσειράς: 28 px;
βάρος γραμματοσειράς: έντονη;
Ύψος γραμμής: 17 px;
}
.data-verification-close:hover,
.data-verification-close:focus {
χρώμα: #000;
κείμενο-διακόσμηση: κανένα;
δρομέας: δείκτης;
}
/* Κείμενο πλαισίου ελέγχου */
#data-verification-container p{
οθόνη: inline-block;
padding: 0;
περιθώριο: 0;
Ύψος γραμμής: 24 px;
padding-αριστερά: 10px;
κατακόρυφη ευθυγράμμιση: επάνω;
πλάτος: υπολογισμός (100% - 45 px);
}
#data-verification-container a, #data-verification-container a:hover{
κείμενο-διακόσμηση: υπογράμμιση!σημαντικό;
χρώμα: #4285f4;
}
/* Εικονίδιο πλαισίου ελέγχου */
#data-verification-icon {
δρομέας: δείκτης;
θέση: σχετική;
περιθώριο: αυτόματο;
πλάτος: 18 px;
ύψος: 18 px;
-webkit-tap-highlight-color: διαφανές.
transform: translate3d(0, 0, 0);
margin-top: 2px;
}
#data-verification-icon:before {
περιεχόμενο: "";
θέση: απόλυτη;
κορυφή: -7 px;
αριστερά: -7 px;
πλάτος: 32 px;
ύψος: 32px;
ακτίνα συνόρων: 50%;
φόντο: rgba(34,50,84,0.03);
αδιαφάνεια: 0;
μετάβαση: αδιαφάνεια 0,2 δευτ. ευκολία.
}
#data-verification-icon svg {
θέση: σχετική;
z-index: 1;
γέμισμα: κανένας;
stroke-linecap: στρογγυλό;
stroke-linejoin: στρογγυλό;
εγκεφαλικό επεισόδιο: #c8ccd4;
πλάτος διαδρομής: 1,5;
transform: translate3d(0, 0, 0);
μετάβαση: όλα τα 0,2s ευκολία?
}
#data-verification-icon διαδρομή svg {
stroke-dasharray: 60;
stroke-dashoffset: 0;
}
#data-verification-icon svg polyline {
stroke-dasharray: 22;
stroke-dashoffset: 66;
}
#data-verification-icon:hover:before {
αδιαφάνεια: 1;
}
#data-verification-container:hover #data-verification-icon svg {
εγκεφαλικό επεισόδιο: #4285f4;
}
#data-verification-icon.clicked svg {
εγκεφαλικό επεισόδιο: #4285f4;
}
#data-verification-icon.clicked svg path {
stroke-dashoffset: 60;
μετάβαση: όλα τα 0,3 s γραμμικά.
}
#data-verification-icon.clicked svg polyline {
stroke-dashoffset: 42;
μετάβαση: όλα τα 0,2 s γραμμικά.
μετάβαση-καθυστέρηση: 0,15s;
}
#ccpa_page .list-unstyled li button {
δρομέας: δείκτης;
}
.show-isense {
μετάβαση: αδιαφάνεια 400ms !σημαντικό;
}
.hide-isense {
αδιαφάνεια: 0 !σημαντικό;
μετάβαση: 0,4s ease-out;
}
/* Τροπικές αλλαγές στην ανάλυση κινητού*/
οθόνη @media μόνο και (μέγιστο πλάτος: 600 pixel) {
#data-verification-modal {
πλάτος: 90%;
}
}
/* Φόρτωση στοιχείου */
.φόρτωση {
οθόνη: καμία;
κορυφή: 50vh;
αριστερά:50vw;
θέση: σταθερή;
}
.loading:not(:required):after {
περιεχόμενο: '';
οθόνη: μπλοκ;
μέγεθος γραμματοσειράς: 10px;
πλάτος: 1em;
ύψος: 1em;
margin-top: -0,5em;
-webkit-animation: spinner 1500ms άπειρη γραμμική.
-moz-animation: spinner 1500ms άπειρο γραμμικό.
-ms-animation: spinner 1500ms άπειρο γραμμικό.
-o-animation: spinner 1500ms άπειρο γραμμικό.
animation: spinner 1500ms infinite linear?
ακτίνα συνόρων: 0,5 εκ.
-webkit-box-shadow: 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,5,50 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,250,250, rgba. (255,255,255, 1) 1,1em -1,1em 0 0;
box-shadow: 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,51,5 , 0 1,5,5 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, 155,25,25, 15,25,25, 15,25,00 1) 1.1em -1.1em 0 0;
}
/* Κινούμενα σχέδια */
@-webkit-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
μετασχηματισμός: περιστροφή (360 μοίρες);
}
}
@-moz-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate (360deg);
μετασχηματισμός: περιστροφή (360 μοίρες);
}
}
@-o-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
μετασχηματισμός: περιστροφή (360 μοίρες);
}
}
@keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate (360deg);
μετασχηματισμός: περιστροφή (360 μοίρες);
}
}
<σενάριο>
/* SLIDE UP */
ας slideUp = (στόχος, διάρκεια=500) => {
target.style.transitionProperty = 'ύψος, περιθώριο, επένδυση';
target.style.transitionDuration = διάρκεια + 'ms';
target.style.boxSizing = 'border-box';
target.style.height = target.offsetΎψος + 'px';
target.offsetΎψος;
target.style.overflow = 'κρυφό';
target.style.height = 0;
target.style.paddingTop = 0;
target.style.paddingBottom = 0;
target.style.marginTop = 0;
target.style.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('overflow');
target.style.removeProperty('transition-duration');
target.style.removeProperty('transition-property');
}, διάρκεια);
}
/* SLIDE DOWN */
ας slideDown = (στόχος, διάρκεια=500) => {
setTimeout(function(){
target.style.removeProperty('display');
Αφήστε εμφάνιση = window.getComputedStyle(target).display;
if (display === 'none') display = 'block';
target.style.display = εμφάνιση;
ας ύψος = target.offsetΎψος;
target.style.overflow = 'κρυφό';
target.style.height = 0;
target.style.paddingTop = 0;
target.style.paddingBottom = 0;
target.style.marginTop = 0;
target.style.marginBottom = 0;
target.offsetΎψος;
target.style.boxSizing = 'border-box';
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('overflow');
target.style.removeProperty('transition-duration');
target.style.removeProperty('transition-property');
}, διάρκεια);
}, 100)
}
/* TOOGLE */
var slideToggle = (στόχος, διάρκεια = 500) => {
if (window.getComputedStyle(target).display === 'κανένα') {
επιστροφή slideDown(στόχος, διάρκεια)·
} αλλο {
επιστροφή slideUp(στόχος, διάρκεια);
}
}
/* ΞΑΘΑΝΙΣΗ */
var toggleFadeiSense = (elem, εμφάνιση) => {
αν (εμφάνιση) {
elem.style.display = "μπλοκ";
setTimeout(function(){
elem.classList.add('show-isense');
elem.classList.remove('hide-isense');
},20)
} αλλο {
elem.classList.remove('show-isense');
elem.classList.add('hide-isense');
setTimeout(() => {
elem.style.display = 'κανένα';
}, 400)
}
}
var ccpaSlideUpAll = function() {
slideUp(document.querySelector('#form-ccpa-edit-account-request'), 100);
slideUp(document.querySelector('#form-ccpa-data-account-request'), 100);
slideUp(document.querySelector('#form-ccpa-personal-data-report-request'), 100);
slideUp(document.querySelector('#form-ccpa-do-not-sell-request'), 100);
slideUp(document.querySelector('#form-ccpa-delete-account-request'), 100);
document.querySelector('#ccpa_page button').setAttribute("aria-expanded", "false");
};
var email, type, consentGiven = false;
var verificationModalContent = '
';
var ccpaSendRequest = συνάρτηση (ανάκληση) {
fetch('https://www.cloudflare.com/cdn-cgi/trace', {
μέθοδος: 'GET',
κεφαλίδες: {
'Τύπος περιεχομένου': 'κείμενο/απλό',
},
})
.then(resp => resp.text())
.then(resp => {
αν (!resp.error) {
ας ipInfo = resp;
ας formData = new FormData();
εάν (τύπος === 'πελάτης/δεν-πώληση') {
isenseGDPR.Cookies.set('cookieconsent_preferences_disabled', 'analytics,marketing,functionality,', { expires: 365 });
isenseGDPR.Cookies.set('cookieconsent_status', 'accept_selected', { expires: 365 });
window.Shopify.trackingConsent.setTrackingConsent(false,function() { console.log('setTrackingConsent false')});
if (document.querySelector('.cc-window')) {
document.querySelector('.cc-window').style.display = 'κανένα';
}
// επαναφορά αναδυόμενου κειμένου
document.querySelector('#ccpa-modal-container-text').innerHTML = 'Δίνω τη συγκατάθεσή μου για τη συλλογή του email και της διεύθυνσης IP μου με σκοπό την επεξεργασία αυτού του αιτήματος. Για περισσότερα, ελέγξτε την
Πολιτική απορρήτου και τους Όρους Παροχής Υπηρεσιών.';
}
formData.append('shop', Shopify.shop);
formData.append('email', email);
formData.append('type', type);
formData.append('sourceOfRequest', 2);
formData.append('ipAddress', ipInfo);
formData.append('consentGiven', consentGiven);
formData.append('page', 'ccpa');
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',
σώμα: formData
})
.then(resp => resp.json())
.then(resp => {
αν (!resp.error) {
ccpaSlideUpAll();
if (resp.message.length) {
alert(resp.message);
} αλλο {
alert('Το αίτημά σας υποβλήθηκε με επιτυχία. Ελέγξτε το email σας για περισσότερες πληροφορίες.');
}
} αλλο {
alert(resp.message);
}
εάν (τύπος επανάκλησης == 'λειτουργία') {
επανάκληση (resp);
}
})
.catch(error => {
alert(error.message);
})
}
άλλο {
alert(resp.message);
}
})
}
//Προσθήκη modal στο σώμα, γιατί διαφορετικά δεν θα παραμείνει στο κέντρο (ακόμα και αν η θέση είναι σταθερή)
document.querySelector("body").insertAdjacentHTML( 'beforeend', verificationModalContent);
document.addEventListener("DOMContentLoaded", function() {
ας searchParams = new URLSearchParams(window.location.search);
let param = searchParams.get('id');
if(param) {
document.getElementById(param).scrollIntoView();
}
// Όταν ο χρήστης κάνει κλικ στο
(x), κλείστε το modal
document.querySelector('.data-verification-close').addEventListener('click', function(e) {
e.preventDefault();
closeVerificationModal();
});
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("κλικ");
setTimeout(()=>{
toggleFadeiSense(document.querySelector("#data-verification-modal"), false);
document.querySelector('#data-verification-background .loading').style.display = 'inline-block';
συναίνεσηΔεδομένη = αληθής;
ccpaSendRequest(function(resp) {
consentGiven = ψευδής;
closeVerificationModal();
});
}, 400);
});
});
συνάρτηση openVerificationModal(){
toggleFadeiSense(document.querySelector("#data-verification-modal"), true);
toggleFadeiSense(document.querySelector('#data-verification-background'), true);
}
συνάρτηση closeVerificationModal(){
toggleFadeiSense(document.querySelector("#data-verification-background"), false);
document.querySelector('#data-verification-icon').classList.remove("κλικ");
document.querySelector('#data-verification-background .loading').style.display = 'κανένα';
}
document.querySelector('#btn-ccpa-edit-account-request').addEventListener('click', function(e) {
e.preventDefault();
ccpaSlideUpAll();
slideDown(document.querySelector('#form-ccpa-edit-account-request'), 200);
this.setAttribute("aria-expanded", "true");
});
document.querySelector('#form-ccpa-edit-account-request-submit').addEventListener('click', function(e) {
e.preventDefault();
email = document.querySelector('#form-ccpa-edit-account-request-email').value;
type = 'πελάτης/επεξεργασία';
openVerificationModal();
});
document.querySelectorAll('#btn-ccpa-requests-request, #btn-ccpa-personal-information-request, #btn-ccpa-orders-request').forEach(element => {
element.addEventListener('click', function(e) {
e.preventDefault();
ccpaSlideUpAll();
τύπος = '';
// Επαναφορά του αναδυόμενου μηνύματος
document.querySelector('#ccpa-modal-container-text').innerHTML = 'Δίνω τη συγκατάθεσή μου για τη συλλογή του email και της διεύθυνσης IP μου με σκοπό την επεξεργασία αυτού του αιτήματος. Για περισσότερα, ελέγξτε την Πολιτική απορρήτου και τους Όρους Παροχής Υπηρεσιών.';
switch(this.getAttribute('id')) {
περίπτωση 'btn-ccpa-requests-request':
type = 'πελάτης/αιτήματα';
διακοπή;
υπόθεση 'btn-ccpa-personal-information-request':
type = 'πελάτης/προσωπικές_πληροφορίες';
διακοπή;
περίπτωση 'btn-ccpa-orders-request':
type = 'πελάτης/παραγγελίες';
διακοπή;
}
document.querySelector('#form-ccpa-data-account-request-request-type').value = type;
slideDown(document.querySelector('#form-ccpa-data-account-request'), 200);
this.setAttribute("aria-expanded", "true");
})
});
document.querySelector('#form-ccpa-data-account-request-submit').addEventListener('click', function(e) {
e.preventDefault();
email = document.querySelector('#form-ccpa-data-account-request-email').value;
type = document.querySelector('#form-ccpa-data-account-request-request-type').value;
openVerificationModal();
});
document.querySelector('#btn-ccpa-personal-data-report-request').addEventListener('click', function(e) {
e.preventDefault();
ccpaSlideUpAll();
slideDown(document.querySelector('#form-ccpa-personal-data-report-request'), 200);
this.setAttribute("aria-expanded", "true");
});
document.querySelector('#form-ccpa-personal-data-report-request-submit').addEventListener('click', function(e) {
e.preventDefault();
email = document.querySelector('#form-ccpa-personal-data-report-request-email').value;
type = 'πελάτης/αναφορά';
openVerificationModal();
});
document.querySelector('#btn-ccpa-do-not-sell-request').addEventListener('click', function(e) {
e.preventDefault();
ccpaSlideUpAll();
slideDown(document.querySelector('#form-ccpa-do-not-sell-request'), 200);
this.setAttribute("aria-expanded", "true");
});
document.querySelector('#form-ccpa-do-not-sell-request-submit').addEventListener('click', function(e) {
e.preventDefault();
email = document.querySelector('#form-ccpa-do-not-sell-request-email').value;
type = 'πελάτης/δεν-πουλώ';
// Ελέγξτε εάν ο πελάτης είναι συνδεδεμένος
αν (__st.cid != απροσδιόριστο) {
document.querySelector('#ccpa-modal-container-text').innerHTML = 'Δίνω τη συγκατάθεσή μου για τη συλλογή του email και της διεύθυνσης IP μου με σκοπό την επεξεργασία αυτού του αιτήματος. Για περισσότερα, ελέγξτε την Πολιτική απορρήτου και τους Όρους Παροχής Υπηρεσιών.';
} αλλο {
document.querySelector('#ccpa-modal-container-text').innerHTML = 'Δίνω τη συγκατάθεσή μου για τη συλλογή του email και της διεύθυνσης IP μου με σκοπό την επεξεργασία αυτού του αιτήματος. Για περισσότερα, ελέγξτε την Πολιτική απορρήτου και τους Όρους Παροχής Υπηρεσιών. Σημείωση: Εάν είστε επισκέπτης χρήστης ή δεν είστε συνδεδεμένοι στο λογαριασμό σας, η επιλογή εξαίρεσης θα ισχύει μόνο για αυτήν την περίοδο λειτουργίας του προγράμματος περιήγησης.';
}
openVerificationModal();
});
document.querySelector('#btn-ccpa-delete-account-request').addEventListener('click', function(e) {
e.preventDefault();
ccpaSlideUpAll();
slideDown(document.querySelector('#form-ccpa-delete-account-request'), 200);
this.setAttribute("aria-expanded", "true");
});
document.querySelector('#form-ccpa-delete-account-request-submit').addEventListener('click', function(e) {
e.preventDefault();
email = document.querySelector('#form-ccpa-delete-account-request-email').value;
type = 'πελάτης/διαγραφή';
openVerificationModal();
});