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>&mdash; 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>&mdash; 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>&mdash; 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>&mdash; 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. */
  • Content: 
    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]')
  }
}
  • URL: /components/raw/wall-of-consent/wall-of-consent.js
  • Filesystem Path: components/04-molecules/article&blog-post-elements/wall-of-consent/wall-of-consent.js
  • Size: 1.6 KB
  • Handle: @wall-of-consent
  • Preview:
  • Filesystem Path: components/04-molecules/article&blog-post-elements/wall-of-consent/wall-of-consent.html

No notes defined.