# Wall Of Consent

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <wall-of-consent type="twitter">
        <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="wall-of-consent__text" 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 type="twitter">
        <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="wall-of-consent__text" 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 type="youtube">
        <template>
            <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </template>
        <p class="wall-of-consent__text" data-hide-if-consent>An dieser Stelle befindet sich ein Youtube Video. Um es zu sehen, musst Du dem Laden von Fremdinhalten zustimmen.</p>
        <div class="custom-form-control checkbox">
            <input id="custom-checkbox-3" type="checkbox" class="form-control__input" />
            <label for="custom-checkbox-3" class="form-label">Youtube Videos anzeigen (<a href="https://www.innoq.com/datenschutz/">Datenschutzhinweise</a>)</label>
        </div>
    </wall-of-consent>

    <wall-of-consent type="youtube">
        <template>
            <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </template>
        <p class="wall-of-consent__text" data-hide-if-consent>An dieser Stelle befindet sich ein Youtube Video. Um es zu sehen, musst Du dem Laden von Fremdinhalten zustimmen.</p>
        <div class="custom-form-control checkbox">
            <input id="custom-checkbox-4" type="checkbox" class="form-control__input" />
            <label for="custom-checkbox-4" class="form-label">Youtube Videos anzeigen (<a href="https://www.innoq.com/datenschutz/">Datenschutzhinweise</a>)</label>
        </div>
    </wall-of-consent>

`
`

    <wall-of-consent type="twitter">
        <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="wall-of-consent__text" 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 type="twitter">
        <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="wall-of-consent__text" 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 type="youtube">
        <template>
            <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </template>
        <p class="wall-of-consent__text" data-hide-if-consent>An dieser Stelle befindet sich ein Youtube Video. Um es zu sehen, musst Du dem Laden von Fremdinhalten zustimmen.</p>
        <div class="custom-form-control checkbox">
            <input id="custom-checkbox-3" type="checkbox" class="form-control__input" />
            <label for="custom-checkbox-3" class="form-label">Youtube Videos anzeigen (<a href="https://www.innoq.com/datenschutz/">Datenschutzhinweise</a>)</label>
        </div>
    </wall-of-consent>

    <wall-of-consent type="youtube">
        <template>
            <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </template>
        <p class="wall-of-consent__text" data-hide-if-consent>An dieser Stelle befindet sich ein Youtube Video. Um es zu sehen, musst Du dem Laden von Fremdinhalten zustimmen.</p>
        <div class="custom-form-control checkbox">
            <input id="custom-checkbox-4" type="checkbox" class="form-control__input" />
            <label for="custom-checkbox-4" class="form-label">Youtube Videos anzeigen (<a href="https://www.innoq.com/datenschutz/">Datenschutzhinweise</a>)</label>
        </div>
    </wall-of-consent>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      wall-of-consent {
        display: block;
        width: 100%;
        padding: $spacer-sm;
      }

      wall-of-consent:not(.revealed) {
        background-color: $brand-apricot-25;
      }

      .wall-of-consent__text {
        @extend %heading-font-regular;

        font-size: $font-size-base;
      }

  `
- URL: /components/raw/wall-of-consent/_wall-of-consent.scss
- Filesystem Path: components/04-molecules/wall-of-consent/_wall-of-consent.scss
- Size: 243 Bytes

- Content:
  `

      export default class WallOfConsent extends HTMLElement {
        connectedCallback() {
          this.content = document.createElement('div')

          if (localStorage.getItem(this.localStorageName) === '1') {
            this.revealContent()
          }

          this.checkbox.addEventListener('change', this.onToggle.bind(this))
          this.toggleContent = this.toggleContent.bind(this)
          document.body.addEventListener(this.eventName, this.toggleContent)
        }

        disconnectedCallback() {
          document.body.removeEventListener(this.eventName, this.toggleContent)
        }

        onToggle(event) {
          if (event.target.checked) {
            localStorage.setItem(this.localStorageName, '1')
          } else {
            localStorage.removeItem(this.localStorageName)
          }

          const ev = new Event(this.eventName)
          document.body.dispatchEvent(ev)
        }

        toggleContent() {
          if (localStorage.getItem(this.localStorageName) === '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
          this.classList.add('revealed')
        }

        removeContent() {
          this.content.innerHTML = ''
          this.toggleInitialElements(false)
          this.checkbox.checked = false
          this.classList.remove('revealed')
        }

        toggleInitialElements(hidden) {
          this.querySelectorAll('[data-hide-if-consent]').forEach((node) => {
            node.hidden = hidden
          })
        }

        get checkbox() {
          return this.querySelector('input[type=checkbox]')
        }

        get eventName() {
          return `embeds-consent-from-${this.getAttribute('type')}`
        }

        get localStorageName() {
          return `consent-to-embeds-from-${this.getAttribute('type')}`
        }
      }

  `
- URL: /components/raw/wall-of-consent/wall-of-consent.js
- Filesystem Path: components/04-molecules/wall-of-consent/wall-of-consent.js
- Size: 1.9 KB

- Handle: @wall-of-consent
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/04-molecules/wall-of-consent/wall-of-consent.html

No notes defined.