@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/v3/csrf.js

@@ -0,0 +1,35 @@
+define(['../bsp-utils', 'js.cookie', 'jquery'], function (
+  bspUtils,
+  Cookies,
+  $,
+) {
+  var csrf = Cookies.get('bsp.csrf')
+
+  if (!csrf) {
+    return
+  }
+
+  bspUtils.onDomInsert(document, 'form', {
+    insert: function (form) {
+      const $form = $(form)
+      let $input = $form.find('input[name="_csrf"]')
+
+      if ($input.length === 0) {
+        $input = $('<input/>', {
+          type: 'hidden',
+          name: '_csrf',
+        })
+
+        $form.append($input)
+      }
+
+      $input.val(csrf)
+    },
+  })
+
+  $(document).ajaxSend(function (event, jqxhr, options) {
+    if (options.type === 'POST') {
+      jqxhr.setRequestHeader('Brightspot-CSRF', csrf)
+    }
+  })
+})

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

@@ -0,0 +1,65 @@
+define(['jquery', '../bsp-utils', '../../v4/rtc'], function (
+  $,
+  bspUtils,
+  { default: rtc },
+) {
+  rtc.receive(
+    'com.psddev.cms.tool.page.content.PublishBroadcast',
+    bspUtils.throttle(30000, function () {
+      setTimeout(function () {
+        if (document.visibilityState === 'hidden') {
+          // short circuit; window is not visible to viewer
+          return
+        }
+        $('.dashboard-widget').each(function () {
+          var $widget = $(this)
+          var widgetUrl = $widget.attr('data-dashboard-widget-url')
+
+          // Prevent widget refresh under the following scenarios:
+          // 1. User is hovering over the widget
+          // 2. User has a dropdown open for the current widget
+          // 3. User has activated the page thumbnail preview icon (only relevant for search result widgets)
+          // 4. User has triggered a click or a change event on the widget form
+          if (
+            widgetUrl &&
+            !$widget.is(':hover') &&
+            $widget.data('refresh-disabled') !== true &&
+            $widget.find('.dropDown-list-open').size() === 0 &&
+            $('body').children('.pageThumbnails_toggle').size() === 0
+          ) {
+            $.ajax({
+              cache: false,
+              type: 'get',
+              url: widgetUrl,
+              complete: function (response) {
+                $widget.html(response.responseText)
+                $widget.trigger('create')
+                $widget.trigger('load')
+                $widget.trigger('frame-load')
+                $widget.resize()
+              },
+            })
+          }
+        })
+      }, 2000)
+    }),
+  )
+
+  // Disables automatic refresh on click or change event
+  $(document).on(
+    'change click',
+    '[data-dashboard-widget-url] form, [data-dashboard-widget-url] a',
+    function () {
+      var $widget = $(this).closest('[data-dashboard-widget-url]')
+
+      // prevent disabling refresh on first form load
+      if (!$widget.hasClass('loading') && !$widget.hasClass('loaded')) {
+        return false
+      }
+
+      $(this)
+        .closest('[data-dashboard-widget-url]')
+        .data('refresh-disabled', true)
+    },
+  )
+})

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

@@ -0,0 +1,129 @@
+/*
+ uppie v1.0.10 https://github.com/silverwind/uppie
+ Copyright (c) silverwind
+ All rights reserved.
+
+ This has been modified to extract array of {File}s objects from {DataTransfer}
+ and pass it to `filesHandler` callback function.
+ As of Oct. 12, 2018, `webkitGetAsEntry` API works on Chrome, Firefox, and Safari.
+ */
+export function processFiles(dataTransfer, filesHandler) {
+  if (
+    dataTransfer.items &&
+    dataTransfer.items.length &&
+    'webkitGetAsEntry' in dataTransfer.items[0]
+  ) {
+    entriesApi(dataTransfer.items, filesHandler)
+  } else if ('getFilesAndDirectories' in dataTransfer) {
+    newDirectoryApi(dataTransfer, filesHandler)
+  } else if (dataTransfer.files) {
+    // old prefixed API implemented in Chrome 11+ as well as array fallback
+    filesHandler(dataTransfer.files)
+  }
+
+  // API implemented in Firefox 42+ and Edge
+  function newDirectoryApi(input, cb) {
+    var fileList = []
+    var iterate = function (entries, path, resolve) {
+      var promises = []
+      entries.forEach(function (entry) {
+        promises.push(
+          new Promise(function (resolve) {
+            if ('getFilesAndDirectories' in entry) {
+              entry.getFilesAndDirectories().then(function (entries) {
+                iterate(entries, entry.path + '/', resolve)
+              })
+            } else {
+              if (entry.name) {
+                var p = (path + entry.name).replace(/^[/\\]/, '')
+                Object.defineProperty(entry, 'webkitRelativePath', {
+                  value: p,
+                })
+                fileList.push(entry)
+              }
+              resolve()
+            }
+          }),
+        )
+      })
+      Promise.all(promises).then(resolve)
+    }
+    input.getFilesAndDirectories().then(function (entries) {
+      new Promise(function (resolve) {
+        iterate(entries, '/', resolve)
+      }).then(cb.bind(null, fileList))
+    })
+  }
+
+  // old drag and drop API implemented in Chrome 11+
+  function entriesApi(items, cb) {
+    var rootPromises = []
+    var fileList = []
+
+    function readEntries(entry, reader, oldEntries, cb) {
+      var dirReader = reader || entry.createReader()
+      dirReader.readEntries(function (entries) {
+        var newEntries = oldEntries ? oldEntries.concat(entries) : entries
+        if (entries.length) {
+          setTimeout(
+            readEntries.bind(null, entry, dirReader, newEntries, cb),
+            0,
+          )
+        } else {
+          cb(newEntries)
+        }
+      })
+    }
+
+    function readDirectory(entry, path, resolve) {
+      if (!path) path = entry.name
+      readEntries(entry, 0, 0, function (entries) {
+        var promises = []
+        entries.forEach(function (entry) {
+          if (!entry.name.startsWith('.')) {
+            promises.push(
+              new Promise(function (resolve) {
+                if (entry.isFile) {
+                  entry.file(function (file) {
+                    var p = path + '/' + file.name
+                    console.log(
+                      'file name: ' +
+                        file.name +
+                        ' startswith.:' +
+                        file.name.startsWith('.'),
+                    )
+                    Object.defineProperty(file, 'webkitRelativePath', {
+                      value: p,
+                    })
+                    fileList.push(file)
+                    resolve()
+                  }, resolve.bind())
+                } else readDirectory(entry, path + '/' + entry.name, resolve)
+              }),
+            )
+          }
+        })
+        Promise.all(promises).then(resolve.bind())
+      })
+    }
+
+    ;[].slice.call(items).forEach(function (entry) {
+      entry = entry.webkitGetAsEntry()
+      if (entry && !entry.name.startsWith('.')) {
+        rootPromises.push(
+          new Promise(function (resolve) {
+            if (entry.isFile) {
+              entry.file(function (file) {
+                fileList.push(file)
+                resolve()
+              }, resolve.bind())
+            } else if (entry.isDirectory) {
+              readDirectory(entry, null, resolve)
+            }
+          }),
+        )
+      }
+    })
+    Promise.all(rootPromises).then(cb.bind(null, fileList))
+  }
+}

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

@@ -0,0 +1,433 @@
+import $ from 'jquery'
+import bspUtils from '../../bsp-utils'
+import uploader from '../../bsp-uploader'
+import RadialProgressBar from '../../../../../RadialProgressBar'
+
+var mimeTypes = {}
+var miscMimeTypeFiles = []
+
+bspUtils.onDomInsert(document, 'input[type="file"]', {
+  insert: function (input) {
+    var $input = $(input)
+
+    $input.on('cancel', function (e) {
+      e.preventDefault()
+      e.stopPropagation()
+    })
+
+    $input.wrap(function () {
+      return $('<label/>', {
+        class: 'UploadChooser',
+        'data-placeholder': $(this).attr('placeholder'),
+        'data-choose': $(this).attr('data-choose'),
+      })
+    })
+
+    if (
+      !$input
+        .closest('form')
+        .find('button[name=action-upload]')
+        .hasClass('ready')
+    ) {
+      $input
+        .closest('form')
+        .find('button[name=action-upload]')
+        .attr('disabled', true)
+    }
+
+    $input.on('change', function (event) {
+      var $label = $(event.target).closest('label')
+      var files = event.target.files
+
+      if (files) {
+        var length = files.length
+
+        if (length === 1) {
+          $label.attr('data-value', files[0].name)
+        } else if (length > 1) {
+          $label.attr('data-value', length + ' files')
+        } else {
+          $label.removeAttr('data-value')
+        }
+      }
+    })
+  },
+})
+
+function before() {
+  var plugin = this
+  var $input = plugin.el
+
+  if (!plugin.isMultiple) {
+    var $fileSelector = $input.closest('.fileSelector')
+
+    var $select = $fileSelector.find('select').first()
+
+    if ($select.find('option[value="keep"]').size() < 1) {
+      $select.prepend(
+        $('<option/>', {
+          'data-hide': '.fileSelectorItem',
+          'data-show':
+            '.file-selector-com-psddev-cms-ui-form-field-KeepFileFormInputAction',
+          value: 'keep',
+          text: 'Keep Existing',
+        }),
+      )
+    }
+  } else {
+    beforeBulkFileUpload($input)
+  }
+}
+
+function beforeBulkFileUpload($input) {
+  var $form = $input.closest('form')
+  $form.find('.UploadChooser').hide()
+
+  if ('FIELD'.localeCompare($form.find('input[name="context"]').value)) {
+    $form.prepend(
+      $('<input/>', {
+        type: 'hidden',
+        name: 'containerId',
+        value: $(window.document.body)
+          .find('form[data-object-id]')
+          .last()
+          .attr('data-object-id'),
+      }),
+    )
+  }
+
+  $form.prepend(
+    $('<div />', {
+      class: 'Message is-warning upload-message',
+      text: $form.attr('data-message-uploadsInProgress'),
+    }),
+  )
+  $form.addClass('is-processingFiles')
+}
+
+function findInputWrapper($input) {
+  var $small = $input.closest('.inputSmall')
+  var $wrapper = $small.next('.inputLarge')
+
+  if ($wrapper.length === 0) {
+    $wrapper = $('<div/>', {
+      class: 'inputLarge File-upload',
+    })
+
+    $small.after($wrapper)
+  }
+
+  return $wrapper
+}
+
+function beforeEach(request, file, i) {
+  var plugin = this
+  var $input = plugin.el
+  var $inputWrapper = findInputWrapper($input)
+  $inputWrapper.prepend(
+    $('<input/>', {
+      type: 'hidden',
+      class: 'file-input',
+    }),
+  )
+
+  const rpb = new RadialProgressBar(100, 10)
+
+  $inputWrapper.data(`rpb${i}`, rpb)
+  $inputWrapper.append(
+    $('<div/>', { class: 'upload-preview' }).append(
+      $('<div/>', { class: 'upload-progress' })
+        .append($('<img/>'))
+        .append(rpb.getElement())
+        .append($('<div/>', { class: 'upload-percentage' })),
+    ),
+  )
+
+  var $uploadPreview = $inputWrapper.find('.upload-preview').eq(i)
+
+  if (file.type.match('image.*') && !plugin.isMultiple) {
+    _displayImgPreview($uploadPreview.find('img').first(), file)
+  } else {
+    $uploadPreview.addClass('loading')
+  }
+
+  $('.ContentEdit-publishButton, .ActionBar .action-save').attr(
+    'disabled',
+    true,
+  )
+}
+
+function progress(event, i) {
+  const $iw = findInputWrapper(this.el)
+  const rpb = $iw.data(`rpb${i}`)
+  const $p = $iw.find('.upload-percentage').eq(i)
+
+  // Updates progress bar to a randomized maximum between 80 and 94.
+  const value = Math.min(
+    Math.round((event.loaded * 100) / event.total),
+    Math.max(rpb.getValue(), Math.round(Math.random() * (94 - 80) + 80)),
+  )
+
+  rpb.setValue(value)
+  $p.text(`${value}%`)
+}
+
+function afterEach(request, file, i) {
+  var plugin = this
+  var $input = plugin.el
+  var $inputWrapper = findInputWrapper($input)
+
+  if (request.status === 200) {
+    $inputWrapper.data(`rpb${i}`).setValue(100)
+    $inputWrapper.find('.upload-percentage').eq(i).text('100%')
+
+    handleSuccess(plugin, request, file, i)
+
+    if ($input.closest('form').find('input[name="hasProcessors"]').length) {
+      if (file.type) {
+        var val = mimeTypes[file.type]
+
+        if (!val) {
+          val = 0
+        }
+
+        mimeTypes[file.type] = val + 1
+      } else {
+        miscMimeTypeFiles.push(file.name)
+      }
+    }
+  } else {
+    handleError(plugin, request, file, i)
+  }
+}
+
+function after() {
+  var plugin = this
+  var $input = plugin.el
+  var $form = $input.closest('form')
+
+  // original file input has been replaced
+  // with hidden inputs with json values
+  if (plugin.isMultiple) {
+    plugin.el.attr('name', '')
+
+    if ($form.find('input[name="hasProcessors"]').length) {
+      $.ajax({
+        url: window.CONTEXT_PATH + 'content/upload',
+        type: 'GET',
+        dataType: 'html',
+        traditional: true,
+        data: {
+          context: $form.find('input[name="context"]').val(),
+          change: true,
+          typeId: $input.data('type-ids'),
+          mimeTypes: JSON.stringify(mimeTypes),
+          miscMimeTypeFiles: miscMimeTypeFiles,
+        },
+      }).done(function (data) {
+        if (data.includes('is-error')) {
+          $form.find('.Message').replaceWith(data)
+        } else {
+          $form.find('.bulk-upload-files').after(data)
+          $form.trigger('create')
+          afterBulkFileUpload($form)
+        }
+      })
+
+      mimeTypes = {}
+      miscMimeTypeFiles = []
+    } else {
+      afterBulkFileUpload($form)
+    }
+  }
+}
+
+function afterBulkFileUpload($form) {
+  if (
+    $form.find('.Message.is-error').length === 0 &&
+    $form.find('.upload-message.Message.is-success').length === 0
+  ) {
+    $form
+      .find('.upload-message')
+      .removeClass()
+      .addClass('Message upload-message is-success')
+      .text('')
+      .append(
+        $('<p/>', { class: 'v4-contents-only' }).text(
+          $form.attr('data-message-uploadsComplete'),
+        ),
+      )
+  }
+
+  $form
+    .find('button[name=action-upload]')
+    .addClass('ready')
+    .attr('disabled', false)
+}
+
+function handleSuccess(plugin, request, file, i) {
+  var $input, $inputWrapper, inputName, params, $uploadPreview, response // eslint-disable-line no-unused-vars
+
+  $input = plugin.el
+  $inputWrapper = findInputWrapper($input)
+  $uploadPreview = $inputWrapper.find('.upload-preview').eq(i)
+  response = request.responseText
+
+  if (!plugin.isMultiple) {
+    // Handle field upload UI
+
+    inputName = $input.attr('data-input-name')
+    var jsonParamName = inputName + '.file.json'
+    // var localImg = $uploadPreview.find('img');
+    // var localSrc = localImg.first().attr('src');
+
+    params = {}
+    params['inputName'] = inputName
+    params['fieldName'] = $inputWrapper.parent().attr('data-field-name')
+    params['typeId'] = $input.data('type-id')
+    params[jsonParamName] = response
+    params[inputName + '.action'] = 'keep'
+
+    $uploadPreview.removeClass('loading')
+
+    $.ajax({
+      url: window.CONTEXT_PATH + 'content/field/file-update',
+      type: 'POST',
+      dataType: 'html',
+      data: params,
+    }).done(function (htmlResponse) {
+      $uploadPreview.detach()
+      var $response = $(htmlResponse)
+
+      // TODO: prevent FOUC
+      /* const imgEditor = $response.find('.imageEditor')
+      if (imgEditor.length) {
+        imgEditor.hide()
+      } */
+
+      $inputWrapper.after($response)
+      $inputWrapper.prev('.inputSmall').remove()
+      $inputWrapper.remove()
+      $response
+        .find(
+          '.fileSelectorItem:not(.file-selector-com-psddev-cms-ui-form-field-KeepFileFormInputAction)',
+        )
+        .hide()
+      $response.trigger('create')
+      $('.ContentEdit-publishButton, .ActionBar .action-save').removeAttr(
+        'disabled',
+      )
+
+      /// / prevents image pop-in
+      // var img = $inputWrapper.find('.imageEditor-image').find('img').first();
+      // img.attr('style', 'max-width: ' + width + 'px;');
+      // var remoteSrc = img.attr('src');
+      // img.attr('src', localSrc);
+      // $.ajax({
+      //  url: remoteSrc
+      // }).done(function (html) {
+      //  $inputWrapper.find('img').attr('src', remoteSrc);
+      // });
+    })
+  } else {
+    // Handle Bulk Upload UI
+
+    params = {}
+    inputName = $input.attr('name')
+    params['preview'] = true
+    params['inputName'] = inputName
+    params[inputName] = response
+
+    // gets dims image preview
+    $.ajax({
+      url: window.CONTEXT_PATH + 'content/upload',
+      type: 'POST',
+      dataType: 'html',
+      data: params,
+    }).done(function (html) {
+      var $html = $(html)
+
+      var $img = $($html.find('img'))
+
+      if ($img.size() > 0) {
+        var src = $img.attr('src')
+        $img.attr('src', '')
+
+        $img.load(function () {
+          $uploadPreview.find('.upload-progress').detach()
+          $img.show()
+          $uploadPreview.removeClass('loading')
+        })
+
+        $img.hide()
+        $uploadPreview.prepend($html)
+        $img.attr('src', src)
+      } else if ($html.size() > 0) {
+        $uploadPreview.find('.upload-progress').detach()
+        $uploadPreview.removeClass('loading')
+        $uploadPreview.prepend($html)
+      }
+
+      $('.ContentEdit-publishButton, .ActionBar .action-save').removeAttr(
+        'disabled',
+      )
+      var $fileInput = $inputWrapper.find('.file-input').eq(i)
+      $fileInput.attr('name', inputName).attr('value', response)
+    })
+  }
+}
+
+function handleError(plugin, request, file, i) {
+  var $input = plugin.el
+  var $inputWrapper = findInputWrapper($input)
+  var $uploadPreview = $inputWrapper.find('.upload-preview').eq(i)
+  var data = JSON.parse(request.response)
+  var $uploadForm = $input.closest('form[action="/cms/content/upload"]')
+
+  $uploadPreview.addClass('error')
+  $inputWrapper.addClass('is-error')
+
+  if ($uploadForm.length) {
+    $uploadForm.replaceWith(`<div class="Message is-error">${data.error}</div>`)
+  } else {
+    $input.val('')
+    if ($input[0]?.files) {
+      delete $input[0].files
+    }
+    $inputWrapper.empty()
+    $inputWrapper.append(`<div class="Message is-error">${data.error}</div>`)
+    $inputWrapper.show()
+  }
+}
+
+// TODO: move this to bsp-uploader
+function _displayImgPreview(el, file) {
+  if (!(window.File && window.FileReader && window.FileList)) {
+    return
+  }
+
+  var reader = new FileReader()
+  reader.onload = (function (readFile) {
+    return function (event) {
+      el.attr('src', event.target.result)
+      el.closest('.upload-preview').addClass('loading')
+    }
+  })(file)
+
+  reader.readAsDataURL(file)
+}
+
+bspUtils.plugin(false, 'bsp', 'uploader', {
+  _each: function (input) {
+    var plugin = Object.create(uploader)
+    plugin.init($(input), {
+      path: window.UPLOAD_PATH,
+    })
+
+    plugin.before = before
+    plugin.beforeEach = beforeEach
+    plugin.progress = progress
+    plugin.afterEach = afterEach
+    plugin.after = after
+  },
+})