Partial refactor

embed.js

const EMBED_ID = '<%= embedId %>'
const APP_URL = '<%= appUrl %>'
const RGB = '<%= rgb %>'
const TEXT_COLOR = '<%= textColor %>'
const RED = '<%= red %>'
const GREEN = '<%= green %>'
const BLUE = '<%= blue %>'

const _getElement = selector => {
  return document.querySelector(selector)
}

const _getModalContainer = id => {
  return _getElement(`${id}-modal-container`)
}

const _getModal = id => {
  return _getElement(`${id}-modal`)
}

const _createElement = (element, properties = {}) => {
  const newElement = document.createElement(element)

  Object.keys(properties).map(property => {
    // if (property === 'style') {
    //   newElement[property].cssText = properties[property]
    // } else {
      newElement[property] = properties[property]
    // }
  })

  return newElement
}

const _attachEvent = (type, element, listener) => {
  if (element.attachEvent) {
    return element.attachEvent(type, listener)
  } else {
    return element.addEventListener(type, listener, false)
  }
}

const _detachEvent = (type, element, listener) => {
  if (element.detachEvent) {
    return element.detachEvent(type, listener)
  } else {
    return element.removeEventListener(type, listener, false)
  }
}

const _createLaunchBtn = (base_url, id) => {
  const icon = _createElement('img', {
    src: `${base_url}/chat-bubble.svg`,
    width: 65
  })

  const btn = _createElement('a', {
    id: `${id}-appBtn`
  })

  return btn.appendChild(icon)
}

const _createFeedbackForm = id => {
  const form = _createElement('form', {
    id: `${id}-form`
  })

  const nameInput = _createElement('input', {
    id: `${id}-form-input-name`,
    className: `${id}-form-input`,
    name: 'name',
    type: 'text',
    placeholder: 'Your name',
    required: true
  })

  const emailInput = _createElement('input', {
    id: `${id}-form-input-email`,
    className: `${id}-form-input`,
    name: 'email',
    type: 'email',
    placeholder: 'Your email',
    required: true
  })

  const messageTextarea = _createElement('textarea', {
    id: `${id}-form-message`,
    className: `${id}-form-textarea`,
    name: 'message',
    placeholder: 'Do you have any feedback?',
    rows: 8
  })

  const submitButton = _createElement('button', {
    type: 'submit',
    innerText: 'Send Feedback',
    className: `${id}-form-submit`
  })

  form.appendChild(nameInput)
  form.appendChild(emailInput)
  form.appendChild(messageTextarea)
  form.appendChild(submitButton)

  return form
}

const _createModalContainer = id => {
  return _createElement('div', {
    id: `${id}-modal-container`
  })
}

const _createModal = id => {
  return _createElement('div', {
    id: `${id}-modal`
  })
}

const _handleFormSubmit = e => {
  e.preventDefault()

  alert('Form submitted')
}

const _handleModalAppearance = (id, callback) => {
  const container = _getModalContainer(id)
  const existingModal = _getModal(id)

  if (document.body.contains(existingModal)) {
    return callback(existingModal, container)
  } else {
    const newModal = _createModal(id)
    const feedbackForm = _createFeedbackForm(id)

    newModal.appendChild(feedbackForm)
    _attachEvent('submit', feedbackForm, _handleFormSubmit)

    return callback(newModal, container)
  }
}

const displayModal = (undefined, modal, container) => {
  console.log('container', container)
  console.log('container', modal)

  _handleModalAppearance(EMBED_ID, (modal, container) => {
    _animateModalIn(modal, container)
  })
}

const _animateModalIn = (modal, container) => {
  container.style.opacity = '1'
  container.style.display = 'block'

  modal.style.opacity = '1'
  modal.style.transform = 'scale(1) translateY(0)'
  modal.style.transition = 'all 0.3s cubic-bezier(.48,1.2,.43,1.38) 0.2s'
}

const onReady = cb => {
  if (document.readyState != 'loading') {
    cb()
  } else {
    document.addEventListener('DOMContentLoaded', cb)
  }
}

const init = () => {
  const body = _getElement('body')
  const id = EMBED_ID
  const base_url = APP_URL

  const launchBtn = _createLaunchBtn(base_url, id)
  const container = _createModalContainer(id)
  const modal = _createModal(id)
  const feedbackForm = _createFeedbackForm(id)

  body.appendChild(container)
  container.appendChild(modal)
  modal.appendChild(feedbackForm)

  console.log('inside init', container)
  console.log('inside init', modal)

  body.appendChild(launchBtn)
  _attachEvent('click', launchBtn, displayModal.bind(this, this, modal, container))
}

//   const _handleFormSubmit = e => {
//     e.preventDefault()
//
//     const modal = _getElement(`#${EMBED_ID}-modal`)
//     modal.className = 'thankyou'
//     modal.innerHTML = ''
//
//     const thumbsUpIcon = _createElement('img', {
//       src: `${APP_URL}/thumbsup.svg`,
//       width: '65'
//     })
//
//     modal.appendChild(thumbsUpIcon)
//     modal.appendChild(document.createElement('p').innerText = document.createTextNode('Thank you!'))
//
//     setTimeout(() => {
//       _hideModal()
//
//       setTimeout(() => {
//         modal.remove()
//       }, 350)
//     }, 3000)
//   }
//
//     return form
//   }

//   const _hideModal = () => {
//     const launchBtn = _getElement('#<%= embedId %>-appBtn')
//     const container = _getElement('#<%= embedId %>-modalContainer')
//
//     const modal = _getElement(`#${EMBED_ID}-modal`)
//
//     setTimeout(() => {
//       modal.style.opacity = '0'
//       modal.style.transform = 'scale(0.5) translateY(50px)';
//       modal.style.transition = 'all 0.3s cubic-bezier(.48,1.2,.43,1.38) 0.2s';
//
//       setTimeout(() => {
//         container.style.opacity = '0';
//
//         setTimeout(() => {
//           container.style.display = 'none';
//         }, 350)
//       }, 350)
//     }, 1)
//
//     _detachEvent('click', launchBtn, _hideModal)
//     _attachEvent('click', launchBtn, _displayModal)
//   }
//
//   const animateModalIn = (modal, container) => {
//     setTimeout(() => {
//       container.style.display = 'block';
//
//       setTimeout(() => {
//         container.style.opacity = '1';
//
//         setTimeout(() => {
//           modal.style.opacity = '1'
//           modal.style.transform = 'scale(1) translateY(0)'
//           modal.style.transition = 'all 0.3s cubic-bezier(.48,1.2,.43,1.38) 0.2s'
//         }, 1)
//       }, 1)
//     }, 100)
//   }
//
//   const _displayModal = e => {
//     e.preventDefault()
//
//     const container = _getElement('#<%= embedId %>-modalContainer')
//     const existingModal = _getElement(`#${EMBED_ID}-modal`)
//
//     if (document.body.contains(existingModal)) {
//       animateModalIn(existingModal, container)
//     }
//
//     else {
//       const modal = document.createElement('div')
//       modal.id = '<%= embedId %>-modal'
//
//       const form = createForm()
//
//       modal.appendChild(form)
//       container.appendChild(modal)
//
//       if (form.addEventListener) {
//         form.addEventListener('submit', _handleFormSubmit, false)
//       } else {
//         form.attachEvent('submit', _handleFormSubmit)
//       }
//
//       const poweredBy = document.createElement('span')
//       poweredBy.id = '<%= embedId %>-powered-by'
//       poweredBy.innerText = 'Powered by App Name Here'
//       modal.appendChild(poweredBy)
//
//       setTimeout(function() {
//         animateModalIn(modal, container)
//       }, 1)
//     }
//
//     const launchBtn = _getElement('#<%= embedId %>-appBtn')
//     launchBtn.removeEventListener('click', _displayModal)
//     launchBtn.addEventListener('click', _hideModal)
//   }
//
//   const _setupStage = () => {
//
//     body.appendChild(launchBtn)
//     body.appendChild(modalContainer)
//
//     setTimeout(() => {
//       _attachEvent('click', launchBtn, _displayModal)
//       launchBtn.style.opacity = '1'
//     }, 200)
//   }
//
//   const _writeStyles = () => {
//     document.write(`<style media="screen" type="text/css">
//       a#${EMBED_ID}-appBtn {
//         position: fixed;
//         right: 30px;
//         bottom: 20px;
//         cursor: pointer;
//         z-index: 9999;
//         transition: all 0.2s ease-in;
//         opacity: 0;
//       }
//
//       #${EMBED_ID}-modalContainer {
//         position: fixed;
//         top: 0;
//         right: 0;
//         bottom: 0;
//         left: 0;
//         opacity: 0;
//         overflow: auto;
//         background: rgba(0, 0, 0, 0.15);
//         background: radial-gradient(ellipse at bottom right, rgba(0, 0, 0, 0.15) 0%, transparent 30%);
//         transition: opacity 0.2s ease-in-out;
//         display: none;
//         z-index: 9998;
//       }
//
//       #${EMBED_ID}-modal {
//         color: rgba(0, 0, 0, 0.2);
//         right: 30px;
//         bottom: 110px;
//         padding: 30px;
//         opacity: 0;
//         width: 300px;
//         background: white;
//         position: absolute;
//         border-radius: 8px;
//         transform: scale(0.5) translateY(50px);
//         -moz-transform: scale(0.5) translateY(125px);
//         -webkit-transform: scale(0.5) translateY(125px);
//         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
//         box-sizing: border-box;
//         overflow-x: hidden;
//         overflow-y: auto;
//         -webkit-transform-origin: 100% 100%;
//         -moz-transform-origin: 100% 100%;
//         -o-transform-origin: 100% 100%;
//         -ms-transform-origin: 100% 100%;
//         transform-origin: 100% 100%;
//         transition: all 0.35s ease-in-out;
//       }
//
//       #${EMBED_ID}-modal.thankyou img {
//         margin: 0 auto 30px;
//         display: block;
//       }
//
//       #${EMBED_ID}-modal.thankyou {
//         text-align: center;
//         font: 16px/1.6 "Helvetica Neue", Helvetica, sans-serif;
//         width: 200px;
//       }
//
//       .${EMBED_ID}-form-input {
//         box-sizing: border-box;
//         font-size: 15px;
//         width: 100%;
//         height: 40px;
//         margin-bottom: 15px;
//         border-radius: 5px;
//         background-color: rgba(0, 0, 0, 0.05);
//         outline: 0;
//         border: 0;
//         color: rgba(0, 0, 0, 0.5);
//         line-height: 40px;
//         padding: 0 15px;
//       }
//
//       .${EMBED_ID}-form-textarea {
//         box-sizing: border-box;
//         font-size: 15px;
//         line-height: 1.6;
//         width: 100%;
//         margin-bottom: 15px;
//         border-radius: 5px;
//         background-color: rgba(0, 0, 0, 0.05);
//         outline: 0;
//         border: 0;
//         color: rgba(0, 0, 0, 0.5);
//         padding: 15px;
//       }
//
//       .${EMBED_ID}-form-input:hover,
//       .${EMBED_ID}-form-input:focus,
//       .${EMBED_ID}-form-textarea:hover,
//       .${EMBED_ID}-form-textarea:focus {
//         background-color: rgba(0, 0, 0, 0.075);
//       }
//
//       .${EMBED_ID}-form-submit {
//         box-sizing: border-box;
//         background-color: ${RGB};
//         outline: none;
//         width: 100%;
//         height: 40px;
//         font-size: 15px;
//         text-align: center;
//         line-height: 40px;
//         padding: 0 15px;
//         border-radius: 5px;
//         outline: 0;
//         border: 0;
//         color: <%= textColor %>;
//         cursor: pointer;
//         opacity: 0.75;
//       }
//
//       .${EMBED_ID}-form-submit:hover {
//         opacity: 1;
//       }
//
//       #${EMBED_ID}-powered-by {
//         font: 16px/1.6 "Helvetica Neue", Helvetica, sans-serif;
//         text-align: center;
//         color: rgba(0, 0, 0, 0.2);
//         font-size: 14px;
//         width: 100%;
//         display: block;
//         margin-top: 15px;
//       }
//
//       #${EMBED_ID}-powered-by > a {
//         color: rgba(0, 0, 0, 0.2);
//         text-decoration: none;
//       }
//
//       #${EMBED_ID}-powered-by > a:hover {
//         color: ${RGB};
//       }
//     </style>`)
//   }
//
//   const init = () => {
//     _writeStyles()
//     _setupStage()
//   }
//
//   return {
//     load: init
//   }
// })()

onReady(init)