@defra/flood-webchat 0.0.1-alpha.9 → 0.0.1-beta.2

package/src/client/lib/keyboard.js

@@ -1,149 +0,0 @@
-import Utils from './utils.js'
-
-class Keyboard {
-  static _isKeyboard = false
-
-  static init (state) {
-    this._state = state
-    this._detectFocus()
-
-    Utils.listenForDevice('mobile', this._updateInert.bind(this))
-  }
-
-  static _detectFocus () {
-    document.addEventListener('keydown', e => {
-      this._isKeyboard = true
-      if (e.key === 'Tab' || e.key === 'Escape' || e.key === 'Esc') {
-        this._constrainFocus(e)
-      }
-    })
-
-    document.addEventListener('keyup', e => {
-      this._isKeyboard = true
-      if (e.key === 'Tab') {
-        const el = this._focusParent()
-        if (el) {
-          this._toggleInert(el)
-        }
-      }
-    })
-
-    document.addEventListener('pointerdown', e => {
-      this._isKeyboard = false
-    })
-
-    document.addEventListener('focus', e => {
-      const isScope = !!e.target.closest('#wc-availability, #wc-panel')
-      if (!isScope) {
-        return
-      }
-      const target = e.target.hasAttribute('data-wc-focus-parent') ? e.target.parentNode : e.target
-      target.classList.toggle('wc-focus-visible', this._isKeyboard)
-    }, true)
-
-    document.addEventListener('blur', e => {
-      const target = e.target.hasAttribute('data-wc-focus-parent') ? e.target.parentNode : e.target
-      target.classList.remove('wc-focus-visible')
-    }, true)
-  }
-
-  static _isFocusable (el) {
-    const tagNames = ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT']
-    const isHidden = el.hidden || el.style.display === 'none'
-    const isTextbox = el.getAttribute('role') === 'textbox'
-
-    return (tagNames.includes(el.tagName) || el.tabIndex >= 0 || isTextbox) && !isHidden
-  }
-
-  static _focusParent () {
-    const el = document.querySelector('[data-wc]')
-
-    if (el && !document.activeElement.closest('[data-wc]')) {
-      el.focus()
-    }
-
-    return el
-  }
-
-  static _constrainFocus (e) {
-    const el = this._focusParent()
-    if (!el) {
-      return
-    }
-
-    const focusableEls = this._getFocusableEls(el)
-    const firstFocusableEl = focusableEls[0]
-    const lastFocusableEl = focusableEls[focusableEls.length - 1]
-
-    if (e.shiftKey) {
-      if (document.activeElement === firstFocusableEl) {
-        lastFocusableEl.focus()
-        e.preventDefault()
-      }
-    } else {
-      if (document.activeElement === lastFocusableEl) {
-        firstFocusableEl.focus()
-        e.preventDefault()
-      }
-    }
-  }
-
-  static _toggleInert (el) {
-    const inert = document.querySelectorAll('[data-wc-inert]')
-    for (let i = 0; i < inert.length; i++) {
-      const el = inert[i]
-      el.removeAttribute('aria-hidden')
-      el.removeAttribute('data-wc-inert')
-    }
-    if (el) {
-      while (el.parentNode && el !== document.body) {
-        let sibling = el.parentNode.firstChild
-        while (sibling) {
-          if (sibling.nodeType === 1 && sibling !== el) {
-            if (!sibling.hasAttribute('aria-hidden')) {
-              sibling.setAttribute('aria-hidden', true)
-              sibling.setAttribute('data-wc-inert', '')
-            }
-          }
-          sibling = sibling.nextSibling
-        }
-        el = el.parentNode
-      }
-    }
-  }
-
-  static _updateInert () {
-    const isOpen = this._state.isOpen
-    const activeElement = document.activeElement
-    const isWithinDialog = activeElement && !!document.activeElement.closest('[data-wc][role="dialog"][open]')
-    const containerEl = document.querySelector('[data-wc]')
-    if (!isWithinDialog) {
-      this._toggleInert(isOpen ? containerEl : null)
-    }
-  }
-
-  static _getFocusableEls (el) {
-    const selectors = [
-      'a[href]:not([disabled])',
-      'button:not([disabled])',
-      'textarea:not([disabled])',
-      'input:not([disabled])',
-      'select:not([disabled])',
-      '*[tabindex="0"]:not([disabled])'
-    ]
-    let focusableEls = Array.from(el.querySelectorAll(selectors.join(',')))
-    focusableEls = focusableEls.filter(e => !e.closest('[hidden]') && !e.closest('[aria-hidden="true"]'))
-    return focusableEls
-  }
-
-  static toggleInert (el) {
-    this._toggleInert(el)
-  }
-
-  static getFirstFocusableEl () {
-    const focusableEls = this._getFocusableEls(document)
-    return focusableEls.length ? focusableEls[0] : null
-  }
-}
-
-export default Keyboard

package/src/client/lib/notification.js

@@ -1,59 +0,0 @@
-export default class Notification {
-  constructor (url) {
-    this._url = url
-
-    // Create context
-    const context = new (window.AudioContext || window.webkitAudioContext)()
-    // context.addEventListener('statechange', () => {
-    //   console.log('Audio: ', context.state)
-    // })
-    this._context = context
-
-    // Unlock audio
-    this._unlockAudioContext()
-
-    // Load buffer
-    this._init(url)
-  }
-
-  _init () {
-    const context = this._context
-    const url = this._url
-
-    fetch(url)
-      .then(response => response.arrayBuffer())
-      .then(buffer => context.decodeAudioData(buffer))
-      .then(decodedData => {
-        this._buffer = decodedData
-      })
-      .catch(console.error)
-  }
-
-  _unlockAudioContext () {
-    const context = this._context
-    if (context.state === 'suspended') {
-      const events = ['touchstart', 'touchend', 'mousedown', 'wheel', 'keydown', 'click']
-      const unlock = e => {
-        events.forEach(event => {
-          document.body.removeEventListener(event, unlock)
-        })
-        context.resume()
-      }
-      events.forEach(event => {
-        document.body.addEventListener(event, unlock, false)
-      })
-    }
-  }
-
-  playSound () {
-    const context = this._context
-    const buffer = this._buffer
-    console.log('Play sound (context state: ', context.state, ')')
-
-    // Create source
-    const source = context.createBufferSource()
-    source.buffer = buffer
-    source.connect(context.destination)
-    source.start()
-  }
-}

package/src/client/lib/nunjucks.js

@@ -1,3 +0,0 @@
-import '../../../dist/templates.js'
-import nunjucks from 'nunjucks/browser/nunjucks-slim.js'
-export default nunjucks

package/src/client/lib/panel.js

@@ -1,293 +0,0 @@
-import { Button, CharacterCount } from 'govuk-frontend'
-import Utils from './utils.js'
-import Config from './config.js'
-import Keyboard from './keyboard.js'
-import nunjucks from './nunjucks.js'
-
-class Panel {
-  constructor () {
-    this._container = null
-    this._timeout = Utils.getDuration(Config.timeout)
-  }
-
-  _initComponents (el) {
-    // Initialise GOV.UK components
-    const buttons = el.querySelectorAll('[data-module="govuk-button"]')
-    for (const button of buttons) {
-      new Button(button).init()
-    }
-    const characterCounts = el.querySelectorAll('[data-module="govuk-character-count"]')
-    for (const characterCount of characterCounts) {
-      new CharacterCount(characterCount).init()
-    }
-    // Initialise autoresize
-    const textbox = el.querySelector('[data-wc-textbox]')
-    if (textbox) {
-      Utils.autosize(textbox)
-    }
-  }
-
-  _updateMessagesLabel (total) {
-    const body = this.body
-    const label = `Conversation with ${total} message${total > 1 ? 's' : ''}`
-    body.setAttribute('aria-label', label)
-  }
-
-  _scrollToLatest (isScroll) {
-    if (!isScroll) {
-      return
-    }
-
-    // Scroll to latest
-    this.body.scrollTop = this.body.scrollHeight
-  }
-
-  create (state, addEvents) {
-    console.log('panel.create()')
-
-    const model = {
-      ...state
-    }
-    const html = nunjucks.render('panel.html', { model })
-    document.body.insertAdjacentHTML('beforeend', html)
-
-    const container = document.querySelector('[data-wc]')
-    const header = container.querySelector('[data-wc-header]')
-    const body = container.querySelector('[data-wc-body]')
-    const footer = container.querySelector('[data-wc-footer]')
-    this.container = container
-    this.header = header
-    this.body = body
-    this.footer = footer
-
-    // Move focus to container and set inert
-    container.focus()
-    Keyboard.toggleInert(container)
-
-    Utils.listenForDevice('mobile', this.setAttributes.bind(this, state))
-
-    // Message events
-    container.addEventListener('keyup', e => {
-      if (e.target.hasAttribute('data-wc-textbox')) {
-        const textbox = e.target
-        const label = textbox.previousElementSibling
-        // Conditionally show label
-        Utils.toggleLabel(label, e.key, textbox)
-        // Conditionally submit form
-        Utils.submit(e, textbox)
-      }
-    })
-    container.addEventListener('keydown', e => {
-      if (e.target.hasAttribute('data-wc-textbox')) {
-        const textbox = e.target
-        const label = textbox.previousElementSibling
-        // Conditionally hide label
-        Utils.toggleLabel(label, e.key, textbox)
-        // Conditionally suppress enter
-        Utils.suppressEnter(e, textbox)
-      }
-    })
-    container.addEventListener('change', e => {
-      if (e.target.hasAttribute('data-wc-textbox')) {
-        console.log('change', e.target)
-        const textbox = e.target
-        const label = textbox.previousElementSibling
-        Utils.toggleLabel(label, null, textbox)
-      }
-    }, true)
-
-    // Add panel events
-    addEvents()
-  }
-
-  update (state, error) {
-    console.log('panel.updateAll()')
-
-    const container = document.getElementById('wc-panel')
-    if (!container) {
-      return
-    }
-
-    // Update labelledyby
-    this.container.setAttribute('aria-labelledyby', error ? 'wc-title wc-subtitle wc-error' : 'wc-title wc-subtitle')
-
-    this.updateHeader(state)
-    this.updateBody(state, error)
-    this.updateFooter(state)
-  }
-
-  updateHeader (state) {
-    console.log('panel.updateHeader()')
-
-    const container = document.getElementById('wc-panel')
-    if (!container) {
-      return
-    }
-
-    // Model
-    const model = {
-      ...state
-    }
-
-    const header = this.header
-    header.innerHTML = nunjucks.render('header.html', { model })
-
-    this._initComponents(header)
-  }
-
-  updateBody (state, error) {
-    console.log('panel.updateBody()')
-
-    const container = document.getElementById('wc-panel')
-    if (!container) {
-      return
-    }
-
-    // Model
-    const model = {
-      ...state,
-      error,
-      timeout: this._timeout
-    }
-
-    const body = this.body
-    body.innerHTML = nunjucks.render('body.html', { model })
-
-    // Toggle body keyboard accessibility
-    const isViewOpen = state.view === 'OPEN'
-    if (isViewOpen) {
-      body.tabIndex = 0
-      const total = state.messages.length
-      this._updateMessagesLabel(total)
-      this._scrollToLatest(state.isScroll)
-    } else {
-      body.removeAttribute('tabindex')
-      body.removeAttribute('aria-label')
-    }
-
-    this._initComponents(body)
-  }
-
-  updateFooter (state) {
-    console.log('panel.updateFooter()')
-
-    const container = document.getElementById('wc-panel')
-    if (!container) {
-      return
-    }
-
-    // Model
-    const model = {
-      ...state
-    }
-
-    const footer = this.footer
-    footer.innerHTML = nunjucks.render('footer.html', { model })
-
-    this._initComponents(footer)
-  }
-
-  addMessage (state, message) {
-    const list = this.container.querySelector('[data-wc-list]')
-    if (!list) {
-      return
-    }
-
-    list.insertAdjacentHTML('beforeend', message.html)
-
-    // Update message label
-    const total = state.messages.length
-    this._updateMessagesLabel(total)
-
-    // Scroll messages
-    this._scrollToLatest(state.isScroll)
-  }
-
-  toggleAgentTyping (state, isTyping) {
-    const list = this.body.querySelector('[data-wc-list]')
-    if (!list) {
-      return
-    }
-
-    // Add or remove elements from list
-    const el = list.querySelector('[data-wc-agent-typing]')
-    if (isTyping) {
-      list.insertAdjacentHTML('beforeend', nunjucks.render('agent-typing.html', {
-        model: {
-          name: state.assignee
-        }
-      }))
-
-      // Scroll to show new elements
-      this._scrollToLatest(state.isScroll)
-    } else if (el) {
-      el.remove()
-    }
-  }
-
-  toggleTimeout (state, hasTimeout) {
-    const container = this.container
-    const timeout = container.querySelector('[data-wc-timeout]')
-
-    if (hasTimeout) {
-      const list = container.querySelector('[data-wc-list]')
-
-      // *** If we have the list but don't already have the timeout markup
-      if (list && !timeout) {
-        list.insertAdjacentHTML('afterend', `
-          <div class="wc-timeout" data-wc-timeout>
-            <div class="wc-timeout__inner">
-              <div class="wc-timeout__message">Webchat will end in <span data-wc-countdown>${this._timeout} seconds</span></div>
-            </div>
-            <a href="#" class="wc-cancel-timeout-btn" data-wc-cancel-timeout>Continue webchat</a>
-          </div>
-        `)
-        this._scrollToLatest(state.isScroll)
-
-        // Clear timeout
-        const clearBtn = container.querySelector('[data-wc-cancel-timeout]')
-        clearBtn.addEventListener('click', e => {
-          e.preventDefault()
-          this._resetTimeout()
-        })
-      }
-    } else if (timeout) {
-      timeout.remove()
-    }
-  }
-
-  setAttributes (state) {
-    const container = this.container
-    if (!container) {
-      return
-    }
-
-    const isFullscreen = state.isMobile && state.isOpen
-    const root = document.getElementsByTagName('html')[0]
-    root.classList.toggle('wc-html', isFullscreen)
-    document.body.classList.toggle('wc-body', isFullscreen)
-    container.setAttribute('aria-modal', true)
-
-    const backBtn = container.querySelector('[data-wc-back-btn]')
-    const hideBtn = container.querySelector('[data-wc-hide-btn]')
-    const closeBtn = container.querySelector('[data-wc-close-btn]')
-
-    if (backBtn) {
-      backBtn.hidden = !isFullscreen
-    }
-    if (hideBtn) {
-      hideBtn.hidden = isFullscreen
-    }
-    if (closeBtn) {
-      closeBtn.hidden = isFullscreen
-    }
-
-    // Toggle textbox behaviour
-    const textbox = container.querySelector('[data-wc-textbox]')
-    if (textbox) {
-      textbox.toggleAttribute('data-wc-enter-submit', !state.isMobile)
-    }
-  }
-}
-
-export default Panel

package/src/client/lib/provider.js

@@ -1,11 +0,0 @@
-// 'use strict'
-//
-// import { ChatSdk, EnvironmentName, ChatEvent } from '@nice-devone/nice-cxone-chat-web-sdk'
-//
-// class Provider {
-//   static authorise () {
-//     return null
-//   }
-// }
-//
-// export default Provider

package/src/client/lib/skiplink.js

@@ -1,27 +0,0 @@
-import nunjucks from './nunjucks.js'
-
-class Skiplink {
-  constructor () {
-    this.target = document.querySelector('a[data-module="govuk-skip-link"]')
-    this.skiplink = null
-  }
-
-  toggle (hasSkip) {
-    const target = this.target
-    const skiplink = this.skiplink
-    if (!target) {
-      return
-    }
-
-    if (hasSkip && !skiplink) {
-      // Add skiplink
-      target.insertAdjacentHTML('afterend', nunjucks.render('skiplink.html'))
-      this.skiplink = target.nextElementSibling
-    } else if (skiplink && !hasSkip) {
-      // Remove skiplink
-      this.skiplink.remove()
-    }
-  }
-}
-
-export default Skiplink

package/src/client/lib/state.js

@@ -1,82 +0,0 @@
-import Utils from './utils.js'
-
-class State {
-  constructor (openChat, closeChat) {
-    const threadId = window.localStorage.getItem('THREAD_ID')
-    const isBack = window.sessionStorage.getItem('IS_BACK') === 'true'
-    const isOpen = window.location.hash === '#webchat'
-    const view = threadId ? 'OPEN' : null
-
-    // Settings
-    const settings = window.localStorage.getItem('SETTINGS')
-    const hasAudio = settings ? settings.split(',')[0] : true
-    const isScroll = settings ? settings.split(',')[1] : true
-
-    // Public properties
-    this.threadId = threadId
-    this.availability = null
-    this.status = null
-    this.view = view
-    this.assignee = null
-    this.unseen = 0
-    this.isAuthorised = false
-    this.hasAudio = hasAudio
-    this.isScroll = isScroll
-    this.isMobile = true
-    this.isBack = isBack
-    this.isOpen = isOpen
-    this.messages = []
-    this.name = null
-    this.question = null
-
-    // Private methods (callbacks)
-    this._openChat = openChat
-    this._closeChat = closeChat
-
-    // Help with browser back behaviour
-    if (window.history.length <= 1) {
-      this._isBack = false
-      window.sessionStorage.removeItem('IS_BACK')
-    }
-
-    // We need to toggle some attributes depending on screen size
-    Utils.listenForDevice('mobile', (isMobile) => { this.isMobile = isMobile })
-
-    // Events
-    window.addEventListener('popstate', this._popstate.bind(this))
-  }
-
-  _popstate (e) {
-    if (window.location.hash === '#webchat') {
-      this._openChat(e)
-    } else {
-      this._closeChat(e)
-    }
-  }
-
-  replaceState () {
-    this.isOpen = false
-    const url = window.location.href.split('#')[0]
-    window.history.replaceState(null, null, url)
-  }
-
-  pushState () {
-    this._isOpen = true
-    this._isBack = true
-    const url = `${window.location.href.split('#')[0]}#webchat`
-    window.history.pushState({ view: 'webchat', isBack: true }, '', url)
-    window.sessionStorage.setItem('IS_BACK', true)
-  }
-
-  back () {
-    const offsetY = window.scrollY
-    window.history.back()
-    if (!this._isMobile) {
-      window.addEventListener('scroll', e => {
-        window.scrollTo(0, offsetY)
-      }, { once: true })
-    }
-  }
-}
-
-export default State

package/src/client/lib/transcript.js

@@ -1,34 +0,0 @@
-'use strict'
-
-class Transcript {
-  constructor (messages) {
-    const text = this._buildString(messages)
-    this.data = `data:text/plain;charset=utf-8,${encodeURIComponent(text)}`
-  }
-
-  _buildString (messages) {
-    const dateNow = this._formatDate(new Date())
-    let string = `Floodline webchat transcript at ${dateNow}\n\n`
-    for (let i = 0; i < messages.length; i++) {
-      const author = messages[i].direction === 'inbound' ? messages[i].user : `${messages[i].assignee} (Floodline adviser)`
-      const date = this._formatDate(messages[i].createdAt)
-      string += `${author} at ${date}\n${messages[i].text}\n\n`
-    }
-    string = string.replace(/<a\b[^>]*>/i, '').replace(/<\/a>/i, '')
-    return string
-  }
-
-  _formatDate (datetime) {
-    let hours = datetime.getHours()
-    let minutes = datetime.getMinutes()
-    minutes = `${minutes < 10 ? '0' : ''}${minutes}`
-    const ampm = hours >= 12 ? 'pm' : 'am'
-    hours %= 12
-    hours = hours || 12
-    const time = `${hours}:${minutes}${ampm}`
-    const date = datetime.toLocaleString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' })
-    return `${time}, ${date}`
-  }
-}
-
-export default Transcript