@brightspot/ui 3.0.1-cms-ui-migration.0 → 3.0.1-cms-ui-migration.2

package/src/legacy/tool-ui/src/main/webapp/script/v3/EditFieldUpdate.js

@@ -0,0 +1,406 @@
+import $ from 'jquery'
+import bspUtils from '../bsp-utils'
+import rtc from '../../v4/rtc'
+import ColorRotator from '../../v4/theme/ColorRotator'
+import efuCache from './EditFieldUpdateCache'
+
+const colorsByUuid = {}
+const cr = new ColorRotator()
+let restoreUpdateFields = null
+
+function backgroundColor(uuid) {
+  if (!colorsByUuid[uuid]) {
+    colorsByUuid[uuid] = cr.getNext()
+  }
+
+  return colorsByUuid[uuid]
+}
+
+// shared-use function for updating a container element either from cached data
+// stored in dataByContentId or from an EditFieldUpdateBroadcast RTC event
+function updateContainer($container, data) {
+  var userId = data.userId
+  var fieldNamesByObjectId = data.fieldNamesByObjectId
+  var $viewersContainer = $container.find(
+    '[data-rtc-edit-field-update-viewers]',
+  )
+
+  if ($viewersContainer.length === 0) {
+    $viewersContainer = $container.find(
+      '[data-rtc-edit-field-update-other-viewers]',
+    )
+
+    if (
+      $viewersContainer.length > 0 &&
+      $('html').attr('data-user-id') === userId
+    ) {
+      return
+    }
+  }
+
+  if ($viewersContainer.length > 0) {
+    var userAvatarHtml = data.userAvatarHtml
+    var closed = data.closed
+    var $viewers = $viewersContainer.find('> .EditFieldUpdateViewers')
+    var $some
+
+    if ($viewers.length === 0) {
+      var $none = $('<div/>', {
+        class: 'EditFieldUpdateViewers-none',
+        html: $viewersContainer.html(),
+      })
+
+      $some = $('<div/>', {
+        class: 'EditFieldUpdateViewers-some',
+      })
+
+      $viewers = $('<div/>', {
+        class: 'EditFieldUpdateViewers',
+        html: [$none, $some],
+      })
+
+      $viewers.append($none)
+      $viewers.append($some)
+      $viewersContainer.html($viewers)
+    } else {
+      $some = $viewers.find('> .EditFieldUpdateViewers-some')
+    }
+
+    var $viewer = $some.find(
+      '> .EditFieldUpdateViewers-viewer[data-user-id="' + userId + '"]',
+    )
+
+    if ($viewer.length > 0) {
+      if (closed) {
+        $viewer.remove()
+      }
+    } else if (!closed) {
+      $viewer = $('<div/>', {
+        class: 'EditFieldUpdateViewers-viewer',
+        'data-user-id': userId,
+        html: userAvatarHtml,
+      })
+
+      $viewer.find('.ToolUserAvatar').css({
+        '--avatar-bg-color': backgroundColor(userId),
+      })
+
+      $some.append($viewer)
+    }
+
+    // prettier-ignore
+    function checkFieldNames (id) { // eslint-disable-line no-inner-declarations
+      var fieldNames = fieldNamesByObjectId[id]
+      return fieldNames && fieldNames.length > 0
+    }
+
+    if (
+      fieldNamesByObjectId &&
+      Object.keys(fieldNamesByObjectId).filter(checkFieldNames).length > 0
+    ) {
+      $viewer.attr('data-editing', true)
+    } else {
+      $viewer.removeAttr('data-editing')
+    }
+
+    if ($some.find('> .EditFieldUpdateViewers-viewer').length > 0) {
+      $viewers.attr('data-some', true)
+    } else {
+      $viewers.removeAttr('data-some')
+    }
+  }
+}
+
+rtc.receive(
+  'com.psddev.cms.tool.page.content.EditFieldUpdateBroadcast',
+  function (data) {
+    var contentId = data.contentId
+    var $containers = $('[data-rtc-content-id="' + contentId + '"]')
+
+    if ($containers.length === 0) {
+      return
+    }
+
+    if (!window.DISABLE_EDIT_FIELD_UPDATE_CACHE) {
+      efuCache.put(data)
+    }
+
+    var currentUser = $('html').attr('data-user-id')
+    var userId = data.userId
+    var fieldNamesByObjectId = data.fieldNamesByObjectId
+
+    $containers.each(function () {
+      var $container = $(this)
+
+      updateContainer($container, data)
+
+      if (!$container.is('form')) {
+        return
+      }
+
+      if (currentUser === userId) {
+        return
+      }
+
+      $container
+        .find('.CIG-pending[data-user-id="' + userId + '"]')
+        .each(function () {
+          var $pending = $(this)
+
+          $pending.closest('.inputContainer').removeClass('is-pending')
+          $pending.remove()
+        })
+
+      if (!fieldNamesByObjectId) {
+        return
+      }
+
+      var userName = data.userName
+
+      $.each(fieldNamesByObjectId, function (objectId, fieldNames) {
+        var $inputs = $container.find(
+          '.objectInputs[data-id="' + objectId + '"]',
+        )
+
+        if ($inputs.length === 0) {
+          return
+        }
+
+        $.each(fieldNames, function (i, fieldName) {
+          var $container = $inputs.find(
+            '> .inputContainer[data-field-name="' + fieldName + '"]',
+          )
+          var nested = false
+
+          $container.find('.objectInputs').each(function () {
+            if (fieldNamesByObjectId[$(this).attr('data-id')]) {
+              nested = true
+              return false
+            }
+          })
+
+          if (!nested) {
+            $container.addClass('is-pending')
+            var html = ['Pending edit from ' + userName]
+
+            if ($('[data-rtc-field-lock]').length) {
+              html[0] += ' - '
+              html.push(
+                $('<a/>', {
+                  text: 'Unlock',
+                  click: function () {
+                    if (
+                      confirm(
+                        'Are you sure you want to forcefully unlock this field?',
+                      )
+                    ) {
+                      rtc.execute(
+                        'com.psddev.cms.tool.page.content.EditFieldUpdateAction',
+                        {
+                          contentId: $container
+                            .closest('form')
+                            .attr('data-rtc-content-id'),
+                          unlockObjectId: $container
+                            .closest('.objectInputs')
+                            .attr('data-id'),
+                          unlockFieldName: $container.attr('data-field-name'),
+                        },
+                      )
+                    }
+
+                    return false
+                  },
+                }),
+              )
+            }
+
+            $container.find('> .inputLabel').after(
+              $('<div/>', {
+                class: 'CIG-pending',
+                'data-user-id': userId,
+                html: html,
+              }),
+            )
+          }
+        })
+      })
+    })
+  },
+)
+
+var invalidateTimeout
+
+bspUtils.onDomInsert(document, '[data-rtc-content-id]', {
+  insert: function (container) {
+    var $container = $(container)
+
+    if (!$container.is('form')) {
+      return
+    }
+
+    var contentId = $container.attr('data-rtc-content-id')
+
+    if (!contentId) {
+      return
+    }
+
+    var oldFieldNamesByObjectId = null
+
+    function update() {
+      var fieldNamesByObjectId = {}
+
+      $container
+        .find('.inputContainer.state-changed, .inputContainer:focus-within')
+        .filter(function () {
+          return $(this).has('[data-collab="true"]').length === 0
+        })
+        .each(function () {
+          var $container = $(this)
+          var objectId = $container.closest('.objectInputs').attr('data-id')
+          ;(fieldNamesByObjectId[objectId] =
+            fieldNamesByObjectId[objectId] || []).push(
+            $container.attr('data-field-name'),
+          )
+        })
+
+      // if restore happens remove any fields updated by another user while offline
+      if (restoreUpdateFields) {
+        for (const id in fieldNamesByObjectId) {
+          if (restoreUpdateFields[id]) {
+            let fields = fieldNamesByObjectId[id].filter(
+              (field) => restoreUpdateFields[id].indexOf(field) === -1,
+            )
+
+            if (fields && fields.length > 0) {
+              fieldNamesByObjectId[id] = fields
+            } else {
+              delete fieldNamesByObjectId[id]
+            }
+          }
+        }
+      }
+
+      if (
+        fieldNamesByObjectId &&
+        JSON.stringify(fieldNamesByObjectId) !==
+          JSON.stringify(oldFieldNamesByObjectId)
+      ) {
+        oldFieldNamesByObjectId = fieldNamesByObjectId
+
+        rtc.execute('com.psddev.cms.tool.page.content.EditFieldUpdateAction', {
+          contentId: contentId,
+          fieldNamesByObjectId: fieldNamesByObjectId,
+        })
+      }
+    }
+
+    rtc.initialize(
+      'com.psddev.cms.tool.page.content.EditFieldUpdateState',
+      {
+        contentId: contentId,
+      },
+      function (broadcasts) {
+        if (broadcasts) {
+          try {
+            restoreUpdateFields = {}
+
+            for (const broadcast of broadcasts) {
+              if ($('html').attr('data-user-id') !== broadcast.data.userId) {
+                Object.assign(
+                  restoreUpdateFields,
+                  broadcast.data.fieldNamesByObjectId,
+                )
+              }
+            }
+
+            // trigger event for any changes made while offline (handled by state.js#update)
+            $(document)
+              .find('.contentForm, .enhancementForm, .standardForm')
+              .trigger('change')
+          } catch (error) {
+            restoreUpdateFields = null
+          }
+        }
+
+        oldFieldNamesByObjectId = null
+        update()
+
+        var updateTimeout
+
+        function throttledUpdate() {
+          if (updateTimeout) {
+            clearTimeout(updateTimeout)
+          }
+
+          updateTimeout = setTimeout(function () {
+            updateTimeout = null
+            update()
+          }, 1000)
+        }
+
+        $container.on('blur focus change', ':input', throttledUpdate)
+        $container.on('content-state-differences', throttledUpdate)
+      },
+    )
+  },
+
+  afterInsert: function (containers) {
+    // restores viewer data on the specified containers,
+    // fetching from cache if available, otherwise making
+    // an rtc.restore call for the data
+    var contentIds = []
+
+    $(containers).each(function () {
+      var $container = $(this)
+
+      if (!$container.is('form')) {
+        var contentId = $container.attr('data-rtc-content-id')
+
+        if (contentId) {
+          if (!window.DISABLE_EDIT_FIELD_UPDATE_CACHE) {
+            var contentData = efuCache.get(contentId)
+            var i
+
+            if (
+              typeof contentData === 'object' &&
+              contentData instanceof Array
+            ) {
+              for (i = 0; i < contentData.length; i += 1) {
+                updateContainer($container, contentData[i])
+              }
+            } else {
+              efuCache.init(contentId)
+              contentIds.push(contentId)
+            }
+          } else {
+            contentIds.push(contentId)
+          }
+        }
+      }
+    })
+
+    if (contentIds.length > 0) {
+      if (!window.DISABLE_EDIT_FIELD_UPDATE_CACHE) {
+        if (invalidateTimeout) {
+          clearTimeout(invalidateTimeout)
+        }
+
+        invalidateTimeout = setTimeout(function () {
+          invalidateTimeout = null
+
+          efuCache.invalidate(
+            $('[data-rtc-content-id]')
+              .map(function () {
+                return $(this).attr('data-rtc-content-id')
+              })
+              .get(),
+          )
+        }, 5000)
+      }
+
+      rtc.restore('com.psddev.cms.tool.page.content.EditFieldUpdateState', {
+        contentId: contentIds,
+      })
+    }
+  },
+})

package/src/legacy/tool-ui/src/main/webapp/script/v3/EditFieldUpdateCache.js

@@ -0,0 +1 @@
+export { default } from '../../../../EditFieldUpdateCache'

package/src/legacy/tool-ui/src/main/webapp/script/v3/Notification.js

@@ -0,0 +1,151 @@
+define(['jquery', '../bsp-utils', '../../v4/rtc'], function (
+  $,
+  bspUtils,
+  { default: rtc },
+) {
+  const tooltips = window.BRIGHTSPOT?.ui.tooltips
+  rtc.receive(
+    'com.psddev.cms.notification.CmsDeliveryBroadcast',
+    function (data) {
+      var userData = data[$('html').attr('data-user-id')] || {}
+
+      var newCount = parseInt(userData['count']) || 0
+
+      var $tun = $('.Page-notifications')
+
+      $tun.attr('data-new', 'true')
+
+      var currentCount = parseInt($tun.attr('data-count')) || 0
+
+      var totalCount = currentCount + newCount
+
+      $tun.attr('data-count', totalCount.toString())
+      $tun.attr(
+        'data-count-label',
+        totalCount < 1000 ? totalCount.toString() : '+',
+      )
+
+      // V3 support
+      var $tun1 = $('.Page-notifications > a')
+      $tun1.attr('data-new', 'true')
+      $tun1.attr('data-count', totalCount.toString())
+      $tun1.attr(
+        'data-count-label',
+        totalCount < 1000 ? totalCount.toString() : '+',
+      )
+      if (totalCount) $tun1.attr('title', tooltips.newNotifications)
+    },
+  )
+
+  rtc.receive(
+    'com.psddev.cms.notification.ToolUserNotificationsViewedBroadcast',
+    function (data) {
+      var $tun = $('.Page-notifications')
+
+      $tun.attr('data-new', 'false')
+      $tun.attr('data-count', '0')
+      $tun.attr('data-count-label', '')
+
+      // V3 support
+      var $tun1 = $('.Page-notifications > a')
+      $tun1.attr('data-new', 'false')
+      $tun1.attr('data-count', '0')
+      $tun1.attr('data-count-label', '')
+      $tun1.attr('title', tooltips.notifications)
+    },
+  )
+
+  rtc.receive(
+    'com.psddev.cms.notification.ToolUserNotificationsPauseToggleBroadcast',
+    function (data) {
+      var $tun = $('.Page-notifications > a')
+
+      var userData = data[$('html').attr('data-user-id')] || {}
+      var addClasses = userData['addClasses']
+      var removeClasses = userData['removeClasses']
+
+      if (Array.isArray(removeClasses)) {
+        removeClasses.forEach((c) => {
+          $tun.removeClass(c)
+        })
+      }
+
+      if (Array.isArray(addClasses)) {
+        addClasses.forEach((c) => {
+          $tun.addClass(c)
+        })
+      }
+    },
+  )
+
+  // Rest of the file relies on native browser notification functionality.
+
+  if (!('Notification' in window)) {
+    return
+  }
+
+  bspUtils.onDomInsert(document, '.BrowserNotificationCheck', {
+    insert: function (message) {
+      var $message = $(message)
+
+      function enabled() {
+        $message.text($message.attr('data-message-granted'))
+      }
+
+      function request() {
+        $message.text($message.attr('data-message-requested'))
+
+        Notification.requestPermission(function (permission) {
+          if (permission === 'granted') {
+            enabled()
+          } else if (permission === 'denied') {
+            $message.text($message.attr('data-message-denied'))
+          } else {
+            $message.text($message.attr('data-message-retry') + ' ')
+            $message.append(
+              $('<a/>', {
+                href: '#',
+                text: 'Retry',
+                click: function () {
+                  request()
+                  return false
+                },
+              }),
+            )
+          }
+        })
+      }
+
+      if (Notification.permission === 'granted') {
+        enabled()
+      } else {
+        request()
+      }
+    },
+  })
+
+  rtc.receiveOnce(
+    'com.psddev.cms.notification.BrowserMessageBroadcast',
+    function (data) {
+      function notify() {
+        new Notification('Brightspot', data).onclick = function (event) {
+          event.preventDefault()
+
+          if (data.url) {
+            window.open(data.url, '_blank')
+          }
+        }
+      }
+
+      if (Notification.permission === 'granted') {
+        notify()
+      } else {
+        Notification.requestPermission(function (permission) {
+          if (permission === 'granted') {
+            notify()
+          }
+        })
+      }
+    },
+  )
+})