Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Handle popup right after first popup detected (#326) #327

Merged
merged 15 commits into from
Jan 25, 2024
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,12 @@ node_modules/
dist/
_site
test/lit-html/
test-results/
*.bundle.js
*.min.css
rules/rules.*
lib/**/*.js
addon/*.js
.vscode/
.env
.DS_Store
106 changes: 72 additions & 34 deletions lib/web.ts
Original file line number Diff line number Diff line change
Expand Up @@ -145,9 +145,22 @@ export default class AutoConsent {
this.updateState({ lifecycle: 'cmpDetected' });

// we resort to cosmetic rules only if no non-cosmetic rules are found
let foundPopups = await this.detectPopups(foundCmps.filter(r => !r.isCosmetic))
const staticCmps: AutoCMP[] = []
const cosmeticCmps: AutoCMP[] = []

for (const cmp of foundCmps) {
if (cmp.isCosmetic) {
cosmeticCmps.push(cmp)
} else {
staticCmps.push(cmp)
}
}

let result: Promise<boolean>

let foundPopups = await this.detectPopups(staticCmps, cmp => { result = this.handlePopup(cmp) })
if (foundPopups.length === 0) {
foundPopups = await this.detectPopups(foundCmps.filter(r => r.isCosmetic))
foundPopups = await this.detectPopups(cosmeticCmps, cmp => { result = this.handlePopup(cmp) })
}

if (foundPopups.length === 0) {
Expand All @@ -158,11 +171,6 @@ export default class AutoConsent {
return false;
}

this.updateState({ lifecycle: 'openPopupDetected' });
if (this.config.enablePrehide && !this.state.prehideOn) { // prehide might have timeouted by this time, apply it again
this.prehideElements();
}

if (foundPopups.length > 1) {
const errorDetails = {
msg: `Found multiple CMPs, check the detection rules.`,
Expand All @@ -175,16 +183,7 @@ export default class AutoConsent {
});
}

this.foundCmp = foundPopups[0];

if (this.config.autoAction === 'optOut') {
return await this.doOptOut();
} else if (this.config.autoAction === 'optIn') {
return await this.doOptIn();
} else {
enableLogs && console.log("waiting for opt-out signal...", location.href);
return true;
}
return result
}

async findCmp(retries: number): Promise<AutoCMP[]> {
Expand Down Expand Up @@ -219,24 +218,63 @@ export default class AutoConsent {
return foundCMPs;
}

async detectPopups(cmps: AutoCMP[]): Promise<AutoCMP[]> {
const result: AutoCMP[] = [];
const popupLookups = cmps.map((cmp) => this.waitForPopup(cmp).then((isOpen) => {
if (isOpen) {
this.updateState({ detectedPopups: this.state.detectedPopups.concat([cmp.name]) });
this.sendContentMessage({
type: 'popupFound',
cmp: cmp.name,
url: location.href,
}); // notify the browser
result.push(cmp);
async detectPopup(cmp: AutoCMP): Promise<AutoCMP> {
const isOpen = await this.waitForPopup(cmp);

if (isOpen) {
this.updateState({ detectedPopups: this.state.detectedPopups.concat([cmp.name]) });
this.sendContentMessage({
type: 'popupFound',
cmp: cmp.name,
url: location.href,
}); // notify the browser
}

return cmp
}

detectPopups(cmps: AutoCMP[], onFirstPopupAppears: (cmp: AutoCMP) => unknown = () => {}): Promise<AutoCMP[]> {
seia-soto marked this conversation as resolved.
Show resolved Hide resolved
return new Promise(resolve => {
const foundCmps: AutoCMP[] = []
let completed = 0

for (let i = 0, l = cmps.length; i < l; i++) {
this.detectPopup(cmps[i])
.then(cmp => {
foundCmps.push(cmp)

if (foundCmps.length === 1) {
onFirstPopupAppears(cmp)
}
})
.catch(error => {
enableLogs && console.warn(`error waiting for a popup for ${cmps[i].name}`, error)
})
.finally(() => {
if (++completed === l) {
resolve(foundCmps)
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could this be rewritten with async/await? I find that easier to follow, and matches the code-style in the rest of the project.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I converted the function using Promise.race and Promise.allSettled. Generally agreeing to code-style problem.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • changing as later review stated that Promise.any should be used.

})
}
}).catch((e) => {
enableLogs && console.warn(`error waiting for a popup for ${cmp.name}`, e);
return null
}));
await Promise.all(popupLookups);
return result;
})
}

async handlePopup(cmp: AutoCMP): Promise<boolean> {
this.updateState({ lifecycle: 'openPopupDetected' });
if (this.config.enablePrehide && !this.state.prehideOn) { // prehide might have timeouted by this time, apply it again
this.prehideElements();
}

this.foundCmp = cmp;

if (this.config.autoAction === 'optOut') {
return await this.doOptOut();
} else if (this.config.autoAction === 'optIn') {
return await this.doOptIn();
} else {
enableLogs && console.log("waiting for opt-out signal...", location.href);
return true;
}
}

async doOptOut(): Promise<boolean> {
Expand Down