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

package/src/legacy/tool-ui/src/main/webapp/script/bsp-utils.js

@@ -0,0 +1,393 @@
+;(function (globals, factory) {
+  if (typeof define === 'function' && define.amd) {
+    define(['jquery'], factory)
+  } else {
+    globals.bspUtils = factory(globals.jQuery)
+  }
+})(this, function ($) {
+  var bspUtils = {}
+
+  // Throttles execution of a function.
+  ;(function () {
+    bspUtils.throttle = function (interval, throttledFunction) {
+      if (interval <= 0) {
+        return throttledFunction
+      }
+
+      var lastTrigger = 0
+      var timeout
+      var lastArguments
+
+      return function () {
+        lastArguments = arguments
+
+        // Already scheduled to run.
+        if (timeout) {
+          return
+        }
+
+        var context = this
+        var now = +$.now()
+        var delay = interval - now + lastTrigger
+
+        // Waited long enough so execute.
+        if (delay <= 0) {
+          lastTrigger = now
+          throttledFunction.apply(context, lastArguments)
+
+          // Schedule for later.
+        } else {
+          timeout = setTimeout(function () {
+            lastTrigger = now
+            timeout = null
+            throttledFunction.apply(context, lastArguments)
+          }, delay)
+        }
+      }
+    }
+  })()
+
+  // Detects inserts into the DOM.
+  ;(function () {
+    var domInserts = []
+    var insertedClassNamePrefix = 'bsp-onDomInsert-inserted-'
+    var insertedClassNameIndex = 0
+    var blacklistedElements = []
+
+    // Execute all callbacks on any new elements.
+    function doDomInsert(domInsert) {
+      var insertedClassName = domInsert.insertedClassName
+      var $items = domInsert.$roots
+        .find(domInsert.selector)
+        .filter(':not(.' + insertedClassName + ')')
+
+      if ($items.length > 0) {
+        $items.addClass(insertedClassName)
+
+        var callbacks = domInsert.callbacks
+        var beforeInsert = callbacks.beforeInsert
+        var insert = callbacks.insert
+        var afterInsert = callbacks.afterInsert
+
+        if (beforeInsert) {
+          beforeInsert($.makeArray($items))
+        }
+
+        if (insert) {
+          $items.each(function () {
+            insert(this)
+          })
+        }
+
+        if (afterInsert) {
+          afterInsert($.makeArray($items))
+        }
+      }
+    }
+
+    bspUtils.onDomInsert = function (roots, selector, callbacks) {
+      var insertedClassName = insertedClassNamePrefix + insertedClassNameIndex
+
+      ++insertedClassNameIndex
+
+      var domInsert = {
+        $roots: $(roots),
+        insertedClassName: insertedClassName,
+        selector: selector,
+        callbacks: callbacks,
+      }
+
+      // Execute callbacks on already existing elements first.
+      $(document).ready(function () {
+        doDomInsert(domInsert)
+      })
+
+      domInserts.push(domInsert)
+    }
+
+    bspUtils.addDomInsertBlacklist = function (element) {
+      if (!element) {
+        return
+      }
+
+      if (
+        !(
+          element instanceof HTMLElement ||
+          element instanceof HTMLUnknownElement
+        )
+      ) {
+        return
+      }
+
+      if (blacklistedElements.indexOf(element) === -1) {
+        blacklistedElements.push(element)
+      }
+    }
+
+    // Try to detect DOM mutations efficiently.
+
+    function redoAllDomInserts() {
+      $.each(domInserts, function (i, domInsert) {
+        doDomInsert(domInsert)
+      })
+    }
+
+    var mutationCallback = bspUtils.throttle(15, redoAllDomInserts)
+
+    $(document).ready(function () {
+      new MutationObserver(function (mutations, instance) {
+        if (!mutations) {
+          return
+        }
+
+        var avoid = true
+        var i
+        var il
+        var j
+        var jl
+
+        /* eslint-disable */
+
+        // Try to avoid calling redoAllDomInserts.
+        OPTIMIZE: for (i = 0, il = mutations.length; i < il; i += 1) {
+          var mutation = mutations[i]
+          var addedNodes = mutation.addedNodes
+
+          // If no nodes were added, check next.
+          if (addedNodes.length === 0) {
+            continue
+          }
+
+          var target = mutation.target
+
+          // If the target of the mutation event is on the
+          // blacklist, check next.
+          if (blacklistedElements.indexOf(target) !== -1) {
+            continue
+          }
+
+          // If the target of the mutation event is contained
+          // within any element on the blacklist, check next.
+          for (j = 0, jl = blacklistedElements.length; j < jl; j += 1) {
+            if (blacklistedElements[j].contains(target)) {
+              continue OPTIMIZE
+            }
+          }
+
+          // Finally, if there are added nodes and the target
+          // isn't on the blacklist, redoAllDomInserts can
+          // still be avoided if all of the addedNodes are Text.
+          for (j = 0, jl = addedNodes.length; j < jl; j += 1) {
+            if (!(addedNodes[j] instanceof Text)) {
+              avoid = false
+              break OPTIMIZE
+            }
+          }
+        }
+
+        /* eslint-enable */
+
+        if (!avoid) {
+          mutationCallback.call()
+        }
+      }).observe(document, {
+        childList: true,
+        subtree: true,
+      })
+    })
+  })()
+
+  // Defines a plugin.
+  ;(function () {
+    var NOT_WHITE_RE = /\S+/g
+    var OPTIONS_DATA_KEY = '_options'
+
+    var $d = $(document)
+
+    bspUtils.plugin = function (globals, namespace, name, actions) {
+      var plugin = actions || {}
+
+      plugin._name = namespace + '_' + name
+
+      plugin._classNamePrefix = namespace + '-' + name + '-'
+      plugin._rootClassName = plugin._classNamePrefix + 'root'
+      plugin._itemClassName = plugin._classNamePrefix + 'item'
+
+      // Event handling.
+      function renameEvents(events) {
+        return $.map(events.match(NOT_WHITE_RE), function (s) {
+          return s + '.' + plugin._name
+        }).join(' ')
+      }
+
+      plugin._on = function (
+        elements,
+        events,
+        selectorOrHandler,
+        dataOrHandler,
+        handler,
+      ) {
+        var $elements = $(elements)
+        events = renameEvents(events)
+
+        if (handler) {
+          $elements.on(events, selectorOrHandler, dataOrHandler, handler)
+        } else if (dataOrHandler) {
+          $elements.on(events, selectorOrHandler, dataOrHandler)
+        } else {
+          $elements.on(events, selectorOrHandler)
+        }
+      }
+
+      plugin._off = function (elements, events, selector) {
+        var $elements = $(elements)
+
+        if (selector) {
+          $elements.off(renameEvents(events), selector)
+        } else if (events) {
+          $elements.off(renameEvents(events))
+        } else {
+          $elements.off('.' + plugin._name)
+        }
+      }
+
+      // Private data.
+      plugin._dataKeyPrefix = namespace + '-' + name + '-'
+
+      plugin._data = function (elements, key, value) {
+        var $elements = $(elements)
+
+        if ($elements.length === 0) {
+          return null
+        } else {
+          key = plugin._dataKeyPrefix + key
+
+          if (value === undefined) {
+            return $.data($elements[0], key)
+          } else {
+            return $elements.each(function () {
+              $.data(this, key, value)
+            })
+          }
+        }
+      }
+
+      // Options.
+      plugin.option = function (elements, key, value) {
+        var plugin = this
+
+        if (typeof key === 'undefined') {
+          return plugin._data(elements, OPTIONS_DATA_KEY) || {}
+        } else if (typeof value === 'undefined') {
+          return (plugin._data(elements, OPTIONS_DATA_KEY) || {})[key]
+        } else {
+          $(elements).each(function () {
+            var options = plugin._data(this, OPTIONS_DATA_KEY)
+
+            if (!options) {
+              options = {}
+              plugin._data(this, OPTIONS_DATA_KEY, options)
+            }
+
+            options[key] = value
+          })
+
+          return null
+        }
+      }
+
+      plugin._attrName = 'data-' + namespace + '-' + name
+      plugin._attrNamePrefix = plugin._attrName + '-'
+      plugin._optionsAttrName = plugin._attrNamePrefix + 'options'
+
+      function updateOptions($element, parentOptions) {
+        var elementOptions = $element.attr(plugin._optionsAttrName)
+
+        plugin._data(
+          $element[0],
+          OPTIONS_DATA_KEY,
+          elementOptions
+            ? $.extend(true, {}, parentOptions, $.parseJSON(elementOptions))
+            : parentOptions,
+        )
+      }
+
+      // Initialization.
+      plugin.live = function (roots, selector, options) {
+        var $roots = $(roots)
+
+        if ($roots.length === 0) {
+          return
+        }
+
+        // Update root options.
+        $roots.each(function () {
+          var $rootElement =
+            this.nodeType === 9 ? $(this.documentElement) : $(this)
+
+          $rootElement.addClass(plugin._rootClassName)
+          updateOptions(
+            $rootElement,
+            $.extend(true, {}, plugin._defaultOptions, options),
+          )
+        })
+
+        var init = plugin._init
+        var each = plugin._each
+        var all = plugin._all
+
+        if (init) {
+          init.call(plugin, $.makeArray($roots), selector)
+        }
+
+        if (each || all) {
+          if (selector) {
+            bspUtils.onDomInsert($.makeArray($roots), selector, {
+              insert: function (item) {
+                var $item = $(item)
+                var rootOptions = plugin.option(
+                  $item.closest('.' + plugin._rootClassName),
+                )
+
+                $item.addClass(plugin._itemClassName)
+                updateOptions($item, rootOptions)
+
+                if (each) {
+                  each.call(plugin, item)
+                }
+              },
+
+              afterInsert: !all
+                ? $.noop
+                : function (items) {
+                    all.call(plugin, items)
+                  },
+            })
+          }
+        }
+      }
+
+      plugin.init = function (elements, options) {
+        plugin.live(elements, null, options)
+      }
+
+      // One-time installation callback.
+      if (plugin._install) {
+        plugin._install()
+      }
+
+      // Automatically initialize.
+      $d.ready(function () {
+        plugin.live(document, '[' + plugin._attrName + ']')
+      })
+
+      if (globals) {
+        globals[plugin._name] = plugin
+      }
+
+      return plugin
+    }
+  })()
+
+  return bspUtils
+})

package/src/legacy/tool-ui/src/main/webapp/script/content/layout-element.js

@@ -0,0 +1,141 @@
+define(['jquery', '../bsp-utils'], function ($, bspUtils) {
+  bspUtils.onDomInsert(document, '.objectInputs', {
+    insert: function (inputs) {
+      var $inputs = $(inputs)
+      var placeholders =
+        $.parseJSON($inputs.attr('data-layout-placeholders')) || []
+      var $fields = $inputs.find('> .inputContainer[data-layout-field]')
+
+      if (placeholders.length === 0 && $fields.length === 0) {
+        return
+      }
+
+      var maxRight = 0
+      var maxBottom = 0
+      var tabName = null
+
+      function setMaxes(element) {
+        var right = element.left + element.width
+        var bottom = element.top + element.height
+
+        if (maxRight < right) {
+          maxRight = right
+        }
+
+        if (maxBottom < bottom) {
+          maxBottom = bottom
+        }
+      }
+
+      $.each(placeholders, function (i, placeholder) {
+        setMaxes(placeholder)
+      })
+
+      $fields.each(function () {
+        if (tabName === null && $(this).attr('data-tab')) {
+          tabName = $(this).attr('data-tab')
+        }
+        setMaxes($.parseJSON($(this).attr('data-layout-field')))
+      })
+
+      var $firstField = $fields.eq(0)
+
+      var $wrapper = $('<div/>', {
+        class: 'inputLayout-wrapper',
+        'data-tab': tabName,
+      })
+
+      var $constrain = $('<div/>', {
+        class: 'inputLayout-constrain',
+        css: {
+          'padding-bottom': (maxBottom / maxRight) * 100 + '%',
+        },
+      })
+
+      var $container = $('<div/>', {
+        class: 'inputLayout-container',
+      })
+
+      function addElement(element, $field) {
+        var hasErrors = $field && $field.data('layout-errors')
+
+        var $label = $('<div/>', {
+          class:
+            'inputLayout-label' +
+            ($field ? '' : ' inputLayout-label-placeholder') +
+            (hasErrors ? ' inputLayout-error' : ''),
+          click: function () {
+            if (!$field) {
+              return
+            }
+
+            var $label = $(this)
+
+            $label
+              .closest('.inputLayout-container')
+              .find('.inputLayout-label')
+              .removeClass('inputLayout-label-selected')
+            $fields.toggleClass('inputLayout-hidden', true)
+            $label.addClass('inputLayout-label-selected')
+            $field.toggleClass('inputLayout-hidden', false)
+            $field.trigger('resize')
+          },
+        })
+
+        if ($field) {
+          $label.text($field.find('> .inputLabel > label').text())
+        } else {
+          $label.text(element.name)
+        }
+
+        var dynamicText = element.dynamicText
+
+        if (dynamicText) {
+          $label.attr('data-dynamic-text', dynamicText)
+        }
+
+        $container.append(
+          $('<div/>', {
+            class:
+              'inputLayout-element ' +
+              ($field
+                ? 'inputLayout-element-field'
+                : 'inputLayout-element-placeholder'),
+            html: $label,
+            css: {
+              height: (element.height / maxBottom) * 100 + '%',
+              left: (element.left / maxRight) * 100 + '%',
+              top: (element.top / maxBottom) * 100 + '%',
+              width: (element.width / maxRight) * 100 + '%',
+            },
+          }),
+        )
+      }
+
+      $.each(placeholders, function (i, placeholder) {
+        addElement(placeholder)
+      })
+
+      $fields.each(function () {
+        var $field = $(this)
+
+        addElement($.parseJSON($field.attr('data-layout-field')), $field)
+      })
+
+      $wrapper.append($constrain)
+      $constrain.append($container)
+      $firstField.before($wrapper)
+      $fields.toggleClass('inputLayout-hidden', true)
+      $container
+        .find('.inputLayout-element-field')
+        .eq(0)
+        .find('.inputLayout-label')
+        .addClass('inputLayout-label-selected')
+      $firstField.toggleClass('inputLayout-hidden', false)
+      $firstField.trigger('input')
+    },
+  })
+})
+
+// Set filename for debugging tools to allow breakpoints even when using a cache-buster
+// # sourceURL=layout-element.js

package/src/legacy/tool-ui/src/main/webapp/script/input/query.js

@@ -0,0 +1,78 @@
+define(['jquery', '../bsp-utils'], function ($, bspUtils) {
+  bspUtils.onDomInsert(document, '.queryField', {
+    insert: function (field) {
+      var $field = $(field)
+      var $inputField = $field.find('input')
+      var inputValue = $inputField.val()
+      var search
+      var $frame
+
+      search = inputValue ? JSON.parse(inputValue)['cms.ui.search'] : null
+      search = search || { limit: 10 }
+      var types = $field.closest('.inputLarge').attr('data-generic-arguments')
+      search.types = types ? types.split('\\s*,\\s*') : null
+
+      $frame = $('<div/>', {
+        class: 'frame queryField_frame',
+        html: $('<form/>', {
+          method: 'post',
+          action: CONTEXT_PATH + 'queryField',
+          html: [
+            $('<input/>', {
+              type: 'hidden',
+              name: 'containerObjectId',
+              value: $field.closest('form').attr('data-content-id'),
+            }),
+
+            $('<input/>', {
+              type: 'hidden',
+              name: 'search',
+              value: search ? JSON.stringify(search) : '',
+            }),
+          ],
+        }),
+      })
+
+      $.data($field[0], 'query-$frame', $frame)
+      $.data($frame[0], 'query-$field', $field)
+      $(window.document.body).append($frame)
+
+      // Attach as 'frame' property on input element for QueryField.js or others to use.
+      field.frame = $frame[0]
+
+      const row = field.closest('.CIG-row')
+      let select
+      let parent = row
+
+      row.classList.add('is-query')
+
+      // Find the related select.
+      do {
+        select = parent.querySelector('select.toggleable')
+        if (select) {
+          break
+        }
+        parent = parent.parentElement
+      } while (parent)
+
+      // Submit if visible on load.
+      if (select && !$inputField.attr('disabled')) {
+        $frame.find('form').submit()
+      }
+
+      // Watch for input element 'disabled' attribute to show|hide label.
+      const observer = new MutationObserver((mutationList) => {
+        if ($inputField.attr('disabled')) {
+          row.classList.add('is-disabled')
+        } else {
+          row.classList.remove('is-disabled')
+          $frame.find('form').submit()
+        }
+      })
+      observer.observe($inputField[0], {
+        attributes: true,
+        attributeFilter: ['disabled'],
+      })
+    },
+  })
+})