<wall-of-consent><template>
<blockquote class="twitter-tweet" data-conversation="none" data-lang="en" data-dnt="true">
<p lang="en" dir="ltr">Doge spelled backwards is Egod</p>
— Elon Musk (@elonmusk)
<a href="https://twitter.com/elonmusk/status/1368058884837928970?ref_src=twsrc%5Etfw">March 6, 2021</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</template>
<p class="standalone" data-hide-if-consent>
An dieser Stelle befindet sich ein Tweet. Um ihn zu sehen, musst Du dem
Laden von Fremdinhalten zustimmen.
</p>
<div class="custom-form-control checkbox">
<input id="custom-checkbox-1" type="checkbox" class="form-control__input" /><label for="custom-checkbox-1" class="form-label">Tweets anzeigen (<a href="https://www.innoq.com/datenschutz/">Datenschutzhinweise</a>)</label>
</div>
</wall-of-consent>
<wall-of-consent><template>
<blockquote class="twitter-tweet" data-conversation="none" data-lang="en" data-dnt="true">
<p lang="en" dir="ltr">From thence to Mars,<br />And hence the Stars.</p>
— Elon Musk (@elonmusk)
<a href="https://twitter.com/elonmusk/status/1366860749503557636?ref_src=twsrc%5Etfw">March 2, 2021</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</template>
<p class="standalone" data-hide-if-consent>
An dieser Stelle befindet sich ein Tweet. Um ihn zu sehen, musst Du dem
Laden von Fremdinhalten zustimmen.
</p>
<div class="custom-form-control checkbox">
<input id="custom-checkbox-2" type="checkbox" class="form-control__input" /><label for="custom-checkbox-2" class="form-label">Tweets anzeigen (<a href="https://www.innoq.com/datenschutz/">Datenschutzhinweise</a>)</label>
</div>
</wall-of-consent>
<wall-of-consent>
<template>
<blockquote class="twitter-tweet" data-conversation="none" data-lang="en" data-dnt="true"><p lang="en" dir="ltr">Doge spelled backwards is Egod</p>— Elon Musk (@elonmusk) <a href="https://twitter.com/elonmusk/status/1368058884837928970?ref_src=twsrc%5Etfw">March 6, 2021</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</template>
<p class="standalone" data-hide-if-consent>An dieser Stelle befindet sich ein Tweet. Um ihn zu sehen, musst Du dem Laden von Fremdinhalten zustimmen.</p>
<div class="custom-form-control checkbox">
<input id="custom-checkbox-1" type="checkbox" class="form-control__input" />
<label for="custom-checkbox-1" class="form-label">Tweets anzeigen (<a href="https://www.innoq.com/datenschutz/">Datenschutzhinweise</a>)</label>
</div>
</wall-of-consent>
<wall-of-consent>
<template>
<blockquote class="twitter-tweet" data-conversation="none" data-lang="en" data-dnt="true"><p lang="en" dir="ltr">From thence to Mars,<br />And hence the Stars.</p>— Elon Musk (@elonmusk) <a href="https://twitter.com/elonmusk/status/1366860749503557636?ref_src=twsrc%5Etfw">March 2, 2021</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</template>
<p class="standalone" data-hide-if-consent>An dieser Stelle befindet sich ein Tweet. Um ihn zu sehen, musst Du dem Laden von Fremdinhalten zustimmen.</p>
<div class="custom-form-control checkbox">
<input id="custom-checkbox-2" type="checkbox" class="form-control__input" />
<label for="custom-checkbox-2" class="form-label">Tweets anzeigen (<a href="https://www.innoq.com/datenschutz/">Datenschutzhinweise</a>)</label>
</div>
</wall-of-consent>
/* No context defined. */
wall-of-consent {
display: block;
margin-bottom: $spacer-sm;
}
const EVENT_NAME = 'embeds-consent'
const STORAGE = 'consent-to-embeds'
export default class WallOfConsent extends HTMLElement {
connectedCallback () {
this.content = document.createElement('div')
if (localStorage.getItem(STORAGE) === '1') {
this.revealContent()
}
this.checkbox.addEventListener('change', this.onToggle.bind(this))
this.toggleContent = this.toggleContent.bind(this)
document.body.addEventListener(EVENT_NAME, this.toggleContent)
}
disconnectedCallback () {
document.body.removeEventListener(EVENT_NAME, this.toggleContent)
}
onToggle (event) {
if (event.target.checked) {
localStorage.setItem(STORAGE, '1')
} else {
localStorage.removeItem(STORAGE)
}
const ev = new Event(EVENT_NAME)
document.body.dispatchEvent(ev)
}
toggleContent () {
if (localStorage.getItem(STORAGE) === '1') {
this.revealContent()
} else {
this.removeContent()
}
}
revealContent () {
const template = this.querySelector('template')
const templateContent = template.content
this.content.replaceChildren(templateContent.cloneNode(true))
this.prepend(this.content)
this.toggleInitialElements(true)
this.checkbox.checked = true
}
removeContent () {
this.content.innerHTML = ''
this.toggleInitialElements(false)
this.checkbox.checked = false
}
toggleInitialElements (hidden) {
this.querySelectorAll('[data-hide-if-consent]').forEach((node) => {
node.hidden = hidden
})
}
get checkbox () {
return this.querySelector('input[type=checkbox]')
}
}
No notes defined.