Skip to content

Commit

Permalink
Refactor functions
Browse files Browse the repository at this point in the history
  • Loading branch information
@Claudio-Emmolo
Claudio-Emmolo committed Oct 23, 2023
1 parent 44e1e1d commit acdecd1
Show file tree
Hide file tree
Showing 9 changed files with 315 additions and 269 deletions.
82 changes: 41 additions & 41 deletions dist/antiAdBlocker.min.js
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,19 @@
import{detectAdBlock}from"/resources/detectAdBlock.js";export default class AntiAdBlocker{constructor({hiddenBody:e}){const t={hiddenBody:e??!0},n="it-IT"===navigator.language,o=document.querySelector("body");function i(){return`<div id="content-1" style="display: flex; padding: 30px 10px 10px; min-height: 305px;">
<div style="margin-left: 10px;">
<div style="display:flex; justify-content: space-between;">
<p>
${n?'<span style="text-transform: uppercase;">Alt!</span> Mi è sembrato di vedere un...':'<span style="text-transform: uppercase;">Alt!</span> I thought I saw an...'}
<br>
<span style="font-size: 3rem; font-weight: bold; text-transform: uppercase;">Adblock!</span>
</p>
<img src="./assets/adIconSmall.png" id="ad-icon-small">
</div>
<p style="font-size: 1.1rem; color: rgb(107, 114, 128); line-height: 28px; margin: 20px 0;">
${n?"Abbiamo limitato la pubblicità sui nostri siti, ti chiediamo la cortesia di disabilitare l'AdBlock per continuare a navigare. Grazie!":"We have limited advertising on our sites, we ask you to disable AdBlock to continue browsing. Thank you!"}
</p>
</div>
<img src="./assets/adIcon.png" id="ad-icon" style="width: 100%; height: 100%;">
</div> `}function a(){return n?"Come lo disattivo?":"How to disable?"}window.onload=async()=>{var e;await detectAdBlock()&&(o.setAttribute("aria-hidden","true"),t.hiddenBody&&(o.innerHTML=""),o.style.overflow="hidden",o.innerHTML+=`
<div style="${function(){const t=[{name:"width",value:"100%"},{name:"height",value:"100vh"},{name:"padding",value:"10px"},{name:"background-color",value:"rgba(0,0,0,0.68)"},{name:"position",value:"fixed"},{name:"top",value:"0"},{name:"left",value:"0"},{name:"z-index",value:"999999"},{name:"display",value:"flex"},{name:"font-family",value:"-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol"},{name:"backdrop-filter",value:"blur(5px)"}],e=Array.from({length:t.length},(e,t)=>t).sort(()=>Math.random()-.5);return e.map(e=>`${t[e].name}: ${t[e].value};`).join(" ")}()};">
async function detectAdBlock(){let t=!1;try{var e=["uBlock","height:1px!important"],n=await fetch(new Request("https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"));n.headers.get("content-length")||(t=!0);const o=await n.text();e.some(e=>o.includes(e))&&(t=!0)}catch(e){t=!0}finally{console.log("AdBlock Enabled: "+t)}return t}const hiddenBody=!1,isItalianLanguage="it-IT"===navigator.language,imagesCdnUrl="https://cdn.jsdelivr.net/gh/The-3Labs-Team/js-anti-adblock@main/assets",body=document.querySelector("body");function showBannerAdBlock(){body.style.overflow="hidden",body.innerHTML+=`
<div style="${getRandomStyle()};">
<!-- <div class="style"> -->
<div style="width: 100%; max-width: 500px; margin: auto; background-color: white; border-radius: 1rem; overflow: hidden; position: relative;">
<img src="./assets/logo-small.svg" style="position: absolute; top: 0; right: 0; background-color: #D9D9D9; padding: 10px; border-bottom-left-radius: 1rem;">
<img src="${imagesCdnUrl}/logo-small.svg" style="position: absolute; top: 0; right: 0; background-color: #D9D9D9; padding: 10px; border-bottom-left-radius: 1rem;">
<!-- Content -->
<section id="content">
${i()}
${getContentFirstPage()}
</section>
<p style="text-align: center; margin: 20px 0; font-size: .9rem;">
${n?"Adblock Detector è un progetto di":"Adblock Detector is a project by"} <a href="https://www.3labs.it" target="_blank" style="font-weight: bold; text-decoration: none; color: black;">3Labs™ Team</a>
${isItalianLanguage?"Adblock Detector è un progetto di":"Adblock Detector is a project by"} <a href="https://www.3labs.it" target="_blank" style="font-weight: bold; text-decoration: none; color: black;">3Labs™ Team</a>
</p>
Expand All @@ -42,10 +22,10 @@ import{detectAdBlock}from"/resources/detectAdBlock.js";export default class Anti
<div style="display: flex; border-top: 1px solid #E5E7EB">
<span onclick="toggleContent()" id="how-to-remove" style="width: 50%; height: 60px; padding: 10px; text-align: center; display: flex; justify-content: center; align-items:center; cursor: pointer; background-color: white; ">
${a()}
${getHowDisableButton()}
</span>
<span onclick="location.reload()" style="width: 50%; height: 60px; padding: 10px; text-align: center; display: flex; justify-content: center; align-items:center; cursor: pointer; background-color: black; color: white; font-weight: bold; ">
${n?"Ok, fatto!":"Ok, done!"}
${isItalianLanguage?"Ok, fatto!":"Ok, done!"}
</span>
</div>
Expand Down Expand Up @@ -77,35 +57,55 @@ import{detectAdBlock}from"/resources/detectAdBlock.js";export default class Anti
}
</style>
`,(e=document.createElement("script")).textContent=`
`;var e=document.createElement("script");e.textContent=`
function toggleContent() {
const content = document.getElementById('content');
const button = document.getElementById('how-to-remove');
if (content.innerHTML.includes('<div id="content-1"')) {
content.innerHTML = \`${`<div id="content-2" style="padding: 30px 10px 10px; min-height: 305px">
content.innerHTML = \`${getContentSecondPage()}\`;
button.innerHTML = \`${getReturnBackButton()}\`;
} else {
content.innerHTML = \`${getContentFirstPage()}\`;
button.innerHTML = \`${getHowDisableButton()}\`;
}
}
`,body.appendChild(e)}function getRandomStyle(){const t=[{name:"width",value:"100%"},{name:"height",value:"100vh"},{name:"padding",value:"10px"},{name:"background-color",value:"rgba(0,0,0,0.68)"},{name:"position",value:"fixed"},{name:"top",value:"0"},{name:"left",value:"0"},{name:"z-index",value:"999999"},{name:"display",value:"flex"},{name:"font-family",value:"-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol"},{name:"backdrop-filter",value:"blur(5px) grayscale(100%)"}];return Array.from({length:t.length},(e,t)=>t).sort(()=>Math.random()-.5).map(e=>`${t[e].name}: ${t[e].value};`).join(" ")}function getContentFirstPage(){return`<div id="content-1" style="display: flex; padding: 30px 10px 10px; min-height: 305px;">
<div style="margin-left: 10px;">
<div style="display:flex; justify-content: space-between;">
<p>
${isItalianLanguage?'<span style="text-transform: uppercase;">Alt!</span> Mi è sembrato di vedere un...':'<span style="text-transform: uppercase;">Alt!</span> I thought I saw an...'}
<br>
<span style="font-size: 3rem; font-weight: bold; text-transform: uppercase;">Adblock!</span>
</p>
<img src="${imagesCdnUrl}/adIconSmall.png" id="ad-icon-small">
</div>
<p style="font-size: 1.1rem; color: rgb(107, 114, 128); line-height: 28px; margin: 20px 0;">
${isItalianLanguage?"Abbiamo limitato la pubblicità sui nostri siti, ti chiediamo la cortesia di disabilitare l'AdBlock per continuare a navigare. Grazie!":"We have limited advertising on our sites, we ask you to disable AdBlock to continue browsing. Thank you!"}
</p>
</div>
<img src="${imagesCdnUrl}/adIcon.png" id="ad-icon" style="width: 100%; height: 100%;">
</div> `}function getContentSecondPage(){return`<div id="content-2" style="padding: 30px 10px 10px; min-height: 305px">
<div style="margin-left: 10px;">
<p style="font-weight: bold; font-size: 1.5rem; margin-bottom: 20px;">
${n?"Come disattivare l'Ad Blocker":"How to disable Ad Blocker"}
${isItalianLanguage?"Come disattivare l'Ad Blocker":"How to disable Ad Blocker"}
</p>
<ol style="font-size: 1.1rem; color: rgb(107, 114, 128);">
<li style="margin: 25px 20px;">
${n?"<span style=\"font-weight: bold;\">Clicca sull'icona dell'estensione per il blocco annunci</span>. Di solito si trova nell'angolo in alto a destra dello schermo.":'<span style="font-weight: bold;">Click on the extension icon for the ad blocker</span>. It is usually located in the top right corner of the screen.'}
${isItalianLanguage?"<span style=\"font-weight: bold;\">Clicca sull'icona dell'estensione per il blocco annunci</span>. Di solito si trova nell'angolo in alto a destra dello schermo.":'<span style="font-weight: bold;">Click on the extension icon for the ad blocker</span>. It is usually located in the top right corner of the screen.'}
</li>
<li style="margin: 25px 20px;">
${n?'Segui le istruzioni per <span style="font-weight: bold;">disattivare il blocco annunci</span>.':'Follow the instructions to <span style="font-weight: bold;">disable ad blocking</span>.'}
${isItalianLanguage?'Segui le istruzioni per <span style="font-weight: bold;">disattivare il blocco annunci</span>.':'Follow the instructions to <span style="font-weight: bold;">disable ad blocking</span>.'}
</li>
<li style="margin: 25px 20px;">
${n?'Aggiorna la pagina cliccando su <span style="font-weight: bold;">"Ok, fatto!"</span>':'Refresh the page by clicking on <span style="font-weight: bold;">"Ok, done!"</span>'}
${isItalianLanguage?'Aggiorna la pagina cliccando su <span style="font-weight: bold;">"Ok, fatto!"</span>':'Refresh the page by clicking on <span style="font-weight: bold;">"Ok, done!"</span>'}
</li>
</ol>
</div>
</div>`}\`;
button.innerHTML = \`${n?"Indietro":"Back"}\`;
} else {
content.innerHTML = \`${i()}\`;
button.innerHTML = \`${a()}\`;
}
}
`,o.appendChild(e))}}}
</div>`}function getHowDisableButton(){return isItalianLanguage?"Come lo disattivo?":"How to disable?"}function getReturnBackButton(){return isItalianLanguage?"Indietro":"Back"}window.onload=async()=>{await detectAdBlock()&&(body.setAttribute("aria-hidden","true"),hiddenBody&&(body.innerHTML=""),showBannerAdBlock())};
Loading

0 comments on commit acdecd1

Please sign in to comment.