Javascript Applet

howto.md

Add the following tags to your head

<meta name="pluscriber-verification" content="YOUR PUBLICATION ID">
<script async src="https://pluscriber.com/assets/pluscriber.js"></script>

redirect.js

document.addEventListener('DOMContentLoaded', async function () {
  loadPluscriber()
}

function loadPluscriber() {
  try {
    addCssToHead()
    addModalToBody()
    const form = getForm()
    const pubId = getPublicationId()
    form.addEventListener('submit', (ev) => {
      showModal()
    })
  } catch (e) {
    console.error(e)
    // log event to pluscriber backend and exit gracefully
  }
}

function getForm() {
  const inputs = document.querySelectorAll('input[type="email"]')
  if (inputs.length > 1) {
    throw new Error(
      `Expected 1 input of type email - found ${inputs.length}. Additional configuration needed`
    )
  }
  const input = Array.from(inputs)[0]
  const form = input.closest('form')
  if (!form) {
    throw new Error(`No form element found. Additional configuration needed.`)
  }
  return form
}

function addCssToHead() {
  const style = document.createElement('style')
  style.setAttribute('type', 'text/css')
  style.appendChild(document.createTextNode(css))
  document.getElementsByTagName('head')[0].appendChild(style)
}

const css = `
@keyframes overlayShow {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes contentShow {
  from {
    opacity: 0;
    transform: translate(-50%, -48%) scale(.96);
  }

  to {
    opacity: 1;
    transform: translate(-50%,-50%) scale(1)
  }
}

.ps-overlay {
  background-color: hsla(0, 0%, 0%, 0.439);
  position: fixed;
  inset: 0;
  animation-name: overlayShow;
  animation-duration: 150ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: forwards;
}

.ps-content {
  background-color: white;
  border-radius: 6px;
  box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  max-width: 450px;
  max-height: 85vh;
  padding: 25px;
  animation-name: contentShow;
  animation-duration: 150ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: forwards;
}
`

function showModal() {
  const overlay = document.createElement('div')
  overlay.classList.add('ps-overlay')

  const content = document.createElement('div')
  content.classList.add('ps-content')
  content.innerHTML = `<div>HERE IS SOME TEXT</div>`

  const modal = document.querySelector('div#ps-modal')

  document.body.appendChild(overlay)
  modal.appendChild(content)
}

function addModalToBody() {
  const pubId = getPublicationId()
  const body = document.querySelector('body')
  if (!body) {
    throw new Error('What? No body!')
  }
  const modal = document.createElement('div')
  modal.setAttribute('id', 'ps-modal')
  modal.setAttribute('data-id', pubId)
  body.appendChild(modal)
}

function getPublicationId() {
  const meta = document.querySelector('meta[name="pluscriber-verification"]')
  if (!meta) {
    throw new Error('No publicationId provided in meta tag')
  }
  const content = meta.getAttribute('content')

  if (!content) {
    throw new Error('No publicationId provided in meta tag')
  }
  return content
}