@brightspot/ui 3.0.1-cms-ui-migration.1 → 3.0.1-cms-ui-migration.3

package/src/legacy/tool-ui/src/main/webapp/v4/ContentLock.js

@@ -1,470 +0,0 @@
-import tabex from 'tabex'
-import Cookies from 'js.cookie'
-import onFind from './dom/onFind'
-import create from './dom/create'
-import rtc from './rtc'
-
-let networkTimeout = false
-let title
-const pollContainers = []
-
-onFind('form[data-rtc-content-id][data-content-locking="true"]', (form) => {
-  const contentId = form.getAttribute('data-rtc-content-id')
-
-  // Use the current date as an identifier for each tab
-  const now = Date.now()
-  const client = tabex.client()
-  const VIEWING_CHANNEL = contentId + '.viewing'
-  const LEAVING_CHANNEL = contentId + '.leaving'
-  const viewers = []
-  const viewing = { viewer: now }
-
-  // Listen for and keep track of new tabs viewing this content
-  client.on(VIEWING_CHANNEL, function (data) {
-    const viewer = data.viewer
-    if (viewer && viewers.indexOf(viewer) === -1) {
-      viewers.push(data.viewer)
-      // Inform the new tab of this current tab
-      client.emit(VIEWING_CHANNEL, viewing)
-    }
-  })
-
-  // Remove tabs from tracking when they leave this content
-  client.on(LEAVING_CHANNEL, function (data) {
-    const viewer = data.viewer
-    if (viewer) {
-      const idx = viewers.indexOf(viewer)
-      if (idx !== -1) {
-        viewers.splice(idx, 1)
-      }
-    }
-  })
-
-  // Inform other tabs that are viewing this content that this tab is viewing
-  client.emit(VIEWING_CHANNEL, viewing)
-
-  const queryStringBase =
-    '?contentId=' + contentId + '&typeId=' + form.getAttribute('data-type-id')
-
-  poll(form, queryStringBase)
-  const interval = setInterval(() => {
-    const fullQuery =
-      queryStringBase +
-      '&isLockOwner=' +
-      isLockOwner(form) +
-      '&isInactive=' +
-      document.hidden
-    poll(form, fullQuery)
-  }, 5000)
-
-  window.addEventListener('unload', () => {
-    sendUnlockSignal(interval, client, viewing, viewers, form, contentId)
-  })
-
-  // Attach to submit events for edge cases where the unload event is not triggered
-  // on publish
-  onFind('[data-rtc-unlock-onreceive]', (lockable) => {
-    if (lockable.dataset.rtcUnlockOnreceive) {
-      rtc.receive(lockable.dataset.rtcUnlockOnreceive, (data) => {
-        sendUnlockSignal(interval, client, viewing, viewers, form, contentId)
-      })
-    }
-  })
-
-  onFind('[data-rtc-unlock-onclick]', (item) => {
-    item.addEventListener('click', (event) => {
-      sendUnlockSignal(interval, client, viewing, viewers, form, contentId)
-    })
-  })
-})
-
-function sendUnlockSignal(interval, client, viewing, viewers, form, contentId) {
-  // Clear polling interval and let other tabs know this tab is leaving
-  clearInterval(interval)
-  client.emit(contentId + '.leaving', viewing)
-
-  // Only unlock this content if we own the lock and no other tabs are viewing
-  if (isLockOwner(form) && viewers.length === 0) {
-    if (navigator.sendBeacon) {
-      const data = new FormData()
-      data.append('unlock', true)
-      data.append('contentId', contentId)
-      data.append('_csrf', Cookies.get('bsp.csrf'))
-      navigator.sendBeacon(CONTEXT_PATH + 'contentLock', data)
-    } else {
-      // Fallback to a synchronous request so unlock is sent
-      fetch(CONTEXT_PATH + 'contentLock', {
-        method: 'POST',
-        headers: {
-          'Brightspot-CSRF': Cookies.get('bsp.csrf'),
-          'Content-Type': 'application/x-www-form-urlencoded',
-        },
-        body: 'unlock=' + true + '&contentId=' + contentId,
-      }).catch((error) => console.log(error))
-    }
-  }
-}
-
-function isLockOwner(form) {
-  return (
-    document.documentElement.getAttribute('data-user-id') ===
-    form.getAttribute('data-content-lock-owner')
-  )
-}
-
-onFind(
-  ':not(form)[data-rtc-content-id][data-content-locking="true"]',
-  (container) => {
-    if (pollContainers.length === 0) {
-      const table = container.closest('table')
-      if (table) {
-        table
-          .querySelectorAll(
-            ':not(form)[data-rtc-content-id][data-content-locking="true"]',
-          )
-          .forEach((container) => {
-            if (pollContainers.indexOf(container) === -1) {
-              pollContainers.push(container)
-            }
-          })
-      } else {
-        pollContainers.push(container)
-      }
-
-      let queryString =
-        '?' +
-        pollContainers
-          .map(
-            () => 'contentIds=' + container.getAttribute('data-rtc-content-id'),
-          )
-          .join('&')
-
-      poll(pollContainers, queryString)
-
-      const interval = setInterval(() => {
-        queryString = '?'
-        const contentIds = []
-        for (let i = pollContainers.length - 1; i >= 0; --i) {
-          const pollContainer = pollContainers[i]
-          if (!document.body.contains(pollContainer)) {
-            pollContainers.splice(i, 1)
-          } else {
-            const contentId = pollContainer.getAttribute('data-rtc-content-id')
-            if (contentIds.indexOf(contentId) === -1) {
-              contentIds.push(contentId)
-              queryString += 'contentIds=' + contentId + '&'
-            }
-          }
-        }
-
-        if (pollContainers.length !== 0 && contentIds.length !== 0) {
-          poll(pollContainers, queryString.substring(0, queryString.length - 1))
-        } else {
-          clearInterval(interval)
-        }
-      }, 5000)
-    } else if (pollContainers.indexOf(container) === -1) {
-      pollContainers.push(container)
-    }
-  },
-)
-
-function poll(containers, queryString) {
-  fetch(CONTEXT_PATH + 'contentLock' + queryString)
-    .then(function (response) {
-      if (!response.ok) {
-        throw Error(response.statusText)
-      }
-      return response.text()
-    })
-    .then(function (responseBody) {
-      try {
-        const json = JSON.parse(responseBody)
-        if (Array.isArray(containers)) {
-          updateContainers(containers, json)
-        } else if (containers.nodeName === 'FORM') {
-          updateForm(containers, json)
-        }
-      } catch (error) {
-        console.error(error)
-      }
-    })
-    .catch((error) => {
-      if (!Array.isArray(containers) && containers.nodeName === 'FORM') {
-        networkError(containers)
-      }
-      console.error(error)
-    })
-}
-
-function post(form, data) {
-  fetch(CONTEXT_PATH + 'contentLock', {
-    method: 'post',
-    headers: { 'Brightspot-CSRF': Cookies.get('bsp.csrf') },
-    body: data,
-  })
-    .then(function (response) {
-      return response.text()
-    })
-    .then(function (responseBody) {
-      try {
-        if (form) {
-          const json = JSON.parse(responseBody)
-          updateForm(form, json)
-        }
-      } catch (error) {
-        console.error(error)
-      }
-    })
-}
-
-function updateContainers(containers, data) {
-  containers.forEach((container) => {
-    const contentId = container.getAttribute('data-rtc-content-id')
-    const lockOwnerId = data.lockOwnerIds[contentId]
-    if (lockOwnerId) {
-      container.setAttribute('data-content-lock-owner', lockOwnerId)
-      updateViewers(container, lockOwnerId)
-    }
-  })
-}
-
-function updateForm(form, data) {
-  if (data.hardTimeout) {
-    // User has had lock past hard timeout, send them to homepage
-    form.setAttribute('data-content-lock-owner', null)
-    window.location.href = CONTEXT_PATH
-    return
-  }
-
-  const contentId = form.getAttribute('data-rtc-content-id')
-  const lockOwnerId = data.lockOwnerId
-  if (!lockOwnerId) return
-
-  if (networkTimeout) {
-    const timeoutDiv = form.querySelector('.ContentLockMessage-timeout')
-    if (timeoutDiv) {
-      timeoutDiv.remove()
-    }
-    networkTimeout = false
-  }
-
-  const userId = document.documentElement.getAttribute('data-user-id')
-  const lockedOut = lockOwnerId !== userId
-  const lockChange =
-    form.getAttribute('data-content-lock-owner') !== lockOwnerId
-  const unlockingDisabledChanged =
-    (form.getAttribute('data-unlocking-disabled') === 'true') !==
-    data.unlockingDisabled
-  const mainDiv = form.querySelector('.ContentEdit-main') || form
-  const widgetControlsDiv = document.querySelector('.Widget-controls')
-
-  form.classList.toggle('is-locked', lockedOut)
-  form.setAttribute('data-content-lock-owner', lockOwnerId)
-  form.setAttribute('data-unlocking-disabled', data.unlockingDisabled)
-
-  if (widgetControlsDiv) {
-    widgetControlsDiv.classList.toggle('is-locked', lockedOut)
-  }
-
-  if (lockChange) {
-    // The lock owner has changed
-    let evictionDiv = form.querySelector('.ContentLockMessage-eviction')
-
-    if (data.evictionMessage) {
-      // Lock was forcibly taken by another user
-      if (!evictionDiv) {
-        evictionDiv = create('div', {
-          className: 'ContentLockMessage-eviction message message-warning',
-        })
-        mainDiv.insertBefore(evictionDiv, mainDiv.firstChild)
-      }
-
-      evictionDiv.innerHTML = data.evictionMessage
-    } else if (evictionDiv) {
-      // Lock was not forcibly taken, so remove eviction message
-      evictionDiv.remove()
-    }
-  }
-
-  let statusDiv = form.querySelector('.ContentLockMessage-status')
-  if (lockedOut && (lockChange || unlockingDisabledChanged)) {
-    // User is currently locked out of the content
-    if (statusDiv) {
-      statusDiv.remove()
-    }
-    statusDiv = create('div', {
-      className: 'ContentLockMessage-status message message-warning',
-    })
-    mainDiv.insertBefore(statusDiv, mainDiv.firstChild)
-
-    statusDiv.innerHTML = data.statusMessage
-    const unlockLink = statusDiv.querySelector('.ContentLock-link')
-    if (unlockLink) {
-      unlockLink.onclick = () => {
-        const formData = new FormData()
-        formData.append('forceUnlock', true)
-        formData.append('contentId', contentId)
-        postOnConfirm(form, unlockLink, formData)
-      }
-    }
-
-    if (document.activeElement) {
-      document.activeElement.blur()
-    }
-  } else if (!lockedOut) {
-    // User currently has the lock
-
-    if (data.statusMessage) {
-      // User has disableUnlocking permissions, show them message
-      if (lockChange || unlockingDisabledChanged) {
-        if (statusDiv) {
-          statusDiv.remove()
-        }
-        statusDiv = create('div', {
-          className: 'ContentLockMessage-status message message-info',
-        })
-        mainDiv.insertBefore(statusDiv, mainDiv.firstChild)
-
-        statusDiv.innerHTML = data.statusMessage
-        const disableUnlockLink = statusDiv.querySelector('.ContentLock-link')
-        if (disableUnlockLink) {
-          disableUnlockLink.onclick = () => {
-            const formData = new FormData()
-            formData.append('disableUnlock', true)
-            formData.append('contentId', contentId)
-            postOnConfirm(form, disableUnlockLink, formData)
-          }
-        }
-      }
-    } else {
-      // User doesn't have disableUnlocking permissions, remove message
-      if (statusDiv) {
-        statusDiv.remove()
-      }
-    }
-
-    const evictionDiv = form.querySelector('.ContentLockMessage-eviction')
-    if (evictionDiv) {
-      evictionDiv.remove()
-    }
-  }
-
-  let inactivityDiv = form.querySelector('.ContentLockMessage-inactive')
-  if (data.inactivityMessage) {
-    if (lockedOut && !inactivityDiv) {
-      // Write link to take lock from inactive owner
-      inactivityDiv = create('div', {
-        className: 'ContentLockMessage-inactive message message-info',
-      })
-      mainDiv.insertBefore(inactivityDiv, mainDiv.firstChild)
-
-      inactivityDiv.innerHTML = data.inactivityMessage
-      const inactivityLink = inactivityDiv.querySelector('.ContentLock-link')
-      if (inactivityLink) {
-        inactivityLink.onclick = () => {
-          const formData = new FormData()
-          formData.append('inactiveUnlock', true)
-          formData.append('contentId', contentId)
-          postOnConfirm(form, inactivityLink, formData)
-        }
-      }
-    } else if (!lockedOut && !title) {
-      // Display warning title to inactive lock owner
-      title = document.title
-      document.title = data.inactivityMessage
-    }
-  } else {
-    if (inactivityDiv) {
-      // Remove link to unlock inactive user now that they're active
-      inactivityDiv.remove()
-    }
-
-    if (title) {
-      // Reset to original title, no longer inactive
-      document.title = title
-      title = null
-    }
-  }
-
-  if (lockChange) {
-    updateViewers(form, lockOwnerId)
-  }
-}
-
-function postOnConfirm(form, link, data) {
-  const message = link.getAttribute('data-confirm')
-  if (message && confirm(message)) {
-    post(form, data)
-  }
-}
-
-function updateViewers(container, lockOwnerId) {
-  // Add locked attribute to viewer icons
-  const viewers = container.querySelectorAll('.EditFieldUpdateViewers-viewer')
-  viewers.forEach((viewer) => {
-    viewer.toggleAttribute(
-      'data-locked',
-      viewer.getAttribute('data-user-id') === lockOwnerId,
-    )
-  })
-}
-
-function networkError(form) {
-  if (!isLockOwner(form) || networkTimeout) {
-    return
-  }
-
-  const timeoutInMinutes = form.getAttribute('data-lock-network-timeout')
-  const messageDiv = create('div', {
-    className: 'ContentLockMessage-timeout message message-error',
-  })
-  const message = create('span')
-  message.innerHTML =
-    'Disconnected from network. Trying to reconnect. The lock might be dropped in: '
-
-  const timer = create('span', {
-    class: 'ContentLockTimer',
-  })
-  timer.innerHTML =
-    (timeoutInMinutes < 10 ? '0' + timeoutInMinutes : timeoutInMinutes) + ':00'
-
-  messageDiv.appendChild(message)
-  messageDiv.appendChild(timer)
-
-  const mainDiv = form.querySelector('.ContentEdit-main') || form
-  mainDiv.insertBefore(messageDiv, mainDiv.firstChild)
-
-  networkTimeout = true
-  startTimer(timeoutInMinutes * 60 - 1, timer)
-}
-
-function startTimer(duration, span) {
-  let timer = duration
-  let minutes, seconds
-  const interval = setInterval(function () {
-    minutes = parseInt(timer / 60, 10)
-    seconds = parseInt(timer % 60, 10)
-
-    minutes = minutes < 10 ? '0' + minutes : minutes
-    seconds = seconds < 10 ? '0' + seconds : seconds
-
-    span.textContent = minutes + ':' + seconds
-
-    if (--timer < 0 || !networkTimeout) {
-      clearInterval(interval)
-    }
-  }, 1000)
-}
-
-onFind('.EditFieldUpdateViewers-viewer', (viewer) => {
-  // Ensure viewers have the locked icon
-  const lockOwner = viewer.closest('[data-content-lock-owner]')
-  if (lockOwner) {
-    viewer.toggleAttribute(
-      'data-locked',
-      viewer.getAttribute('data-user-id') ===
-        lockOwner.getAttribute('data-content-lock-owner'),
-    )
-  }
-})

package/src/legacy/tool-ui/src/main/webapp/v4/ContentReporting.js

@@ -1,32 +0,0 @@
-import onFind from './dom/onFind'
-
-// Moves the Run Report link to the top of the widget, next to the cog icon
-onFind('.ContentReportingWidget div.widgetControls', (controls) => {
-  const runLink = document.querySelector('a.ContentReporting-runLink')
-
-  if (runLink) {
-    controls.before(runLink)
-  }
-})
-
-// If the BE marks this widget as view-only, hides the cog icon and the action bar
-onFind('.ContentReportingWidget.is-viewOnly', (widget) => {
-  const controls = widget.querySelector('div.widgetControls')
-  const moreControls = widget.querySelector('div.widget-contentCreate')
-  const actionBar = widget.querySelector('div.ActionBar')
-
-  if (controls) {
-    controls.innerHTML = ''
-    controls.parentNode.removeChild(controls)
-  }
-
-  if (moreControls) {
-    moreControls.innerHTML = ''
-    moreControls.parentNode.removeChild(moreControls)
-  }
-
-  if (actionBar) {
-    actionBar.innerHTML = ''
-    actionBar.parentNode.removeChild(actionBar)
-  }
-})

package/src/legacy/tool-ui/src/main/webapp/v4/DataTable.js

@@ -1,31 +0,0 @@
-import findAll from './dom/findAll'
-import onFind from './dom/onFind'
-import repaint from './util/repaint'
-
-// Compact mode?
-function isCompact(table) {
-  return table.parentNode.getBoundingClientRect().width < 500
-}
-
-window.addEventListener(
-  'resize',
-  repaint(() => {
-    const items = []
-
-    // Separate reads and writes to reduce forced layout.
-    for (const table of findAll(document, '.DT')) {
-      items.push({
-        table,
-        compact: isCompact(table),
-      })
-    }
-
-    for (const { table, compact } of items) {
-      table.classList.toggle('is-compact', compact)
-    }
-  }),
-)
-
-onFind('.DT', (table) => {
-  table.classList.toggle('is-compact', isCompact(table))
-})