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

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

@@ -1,718 +0,0 @@
-import bspUtils from '../bsp-utils'
-import ColorRotator from '../../v4/theme/ColorRotator'
-import { v1 as uuidv1 } from 'uuid'
-import throttle from '../../v4/util/throttle'
-import cc from 'color-convert'
-
-const dpr = window.devicePixelRatio || 1
-const cr = new ColorRotator()
-
-var $win = $(window)
-
-function getTransitionColor($transition) {
-  var transitionColor = $.data($transition[0], 'workflow-transitionColor')
-
-  if (!transitionColor) {
-    transitionColor = cr.getNext()
-    $.data($transition[0], 'workflow-transitionColor', transitionColor)
-  }
-
-  return transitionColor
-}
-
-function relativeLuminance(rgb) {
-  if (!rgb) {
-    return 'black'
-  }
-  const [r, g, b] = rgb
-    .map((c) => c / 255)
-    .map((c) => (c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)))
-  return (0.2126 * r + 0.7152 * g + 0.0722 * b) * 100 < 10 ? 'white' : 'black'
-}
-
-bspUtils.onDomInsert(document, '.workflow', {
-  insert: function (textarea) {
-    var $textarea = $(textarea)
-    var definition = $.parseJSON($textarea.val()) || {}
-    var $visual
-    var drawArrow
-    var $arrows
-    var $transitions = {}
-    var addTransitionTarget
-    var appendTransitionAdd
-    var addState
-    var nextStateId = 0
-    var $stateAdd // eslint-disable-line no-unused-vars
-    var $stateInitial
-    var $stateFinal // eslint-disable-line no-unused-vars
-    var updateTransitionSelects
-
-    $visual = $('<div/>', {
-      class: 'Workflow-ui',
-    })
-
-    drawArrow = function (context, color, $source, targetX, targetY) {
-      var sourcePosition = $source.position()
-      var sourceX = sourcePosition.left
-      var sourceY
-      var sourceControlY
-      var sourceControlX
-      var targetControlY
-      var targetControlX
-      var $target
-      var targetPosition
-      var sourceDirection
-      var targetDirection
-      var arrowSize
-
-      if (typeof targetY === 'undefined') {
-        $target = targetX
-        targetPosition = $target.position()
-        targetX = targetPosition.left
-        targetY = targetPosition.top
-      }
-
-      if (sourceX > targetX) {
-        sourceY = sourcePosition.top + $source[0].clientHeight * 0.9
-        sourceDirection = -1
-        targetDirection = 1
-
-        if ($target) {
-          targetX += $target[0].clientWidth
-          targetY += $target[0].clientHeight * 0.9
-        }
-      } else {
-        sourceX += $source[0].clientWidth
-        sourceY = sourcePosition.top + $source[0].clientHeight * 0.1
-        sourceDirection = 1
-        targetDirection = -1
-
-        if ($target) {
-          targetY += $target[0].clientHeight * 0.1
-        }
-      }
-
-      sourceControlX = sourceX + sourceDirection * 100
-      sourceControlY = sourceY
-      targetControlX = targetX + targetDirection * 100
-      targetControlY = targetY
-
-      context.strokeStyle = color
-      context.fillStyle = color
-
-      context.lineWidth = 1.0
-      context.beginPath()
-      context.moveTo(sourceX, sourceY)
-      context.bezierCurveTo(
-        sourceControlX,
-        sourceControlY,
-        targetControlX,
-        targetControlY,
-        targetX,
-        targetY,
-      )
-      context.stroke()
-
-      arrowSize = targetX > targetControlX ? 5 : -5
-      context.beginPath()
-      context.moveTo(targetX, targetY)
-      context.lineTo(targetX - 2 * arrowSize, targetY - arrowSize)
-      context.lineTo(targetX - 2 * arrowSize, targetY + arrowSize)
-      context.closePath()
-      context.fill()
-
-      return {
-        sourceX: sourceX,
-        sourceY: sourceY,
-        targetX: targetX,
-        targetY: targetY,
-      }
-    }
-
-    $visual.append(
-      ($arrows = $('<canvas/>', {
-        css: {
-          left: 0,
-          'pointer-events': 'none',
-          position: 'absolute',
-          top: 0,
-        },
-      })),
-    )
-
-    $arrows.bind('redraw', function (event, $source, targetX, targetY) {
-      var context = this.getContext('2d')
-      var width = $arrows.outerWidth()
-      var height = $arrows.outerHeight()
-      var rightBoundary
-      var bottomBoundary
-      var sourceLeftOffset
-      var sourceTopOffset
-
-      definition = { states: [], transitions: [] }
-      context.resetTransform()
-      context.scale(dpr, dpr)
-      context.clearRect(0, 0, $visual.width(), $visual.height())
-
-      $visual.find('.Workflow-state').each(function () {
-        var $source = $(this)
-        var sourceId = $source.attr('data-id')
-        var sourcePosition = $source.position()
-        var targets = $.data(this, 'workflow-targets')
-
-        if (!(sourceId === 'initial' || sourceId === 'final')) {
-          sourceLeftOffset = parseFloat(sourcePosition.left / width)
-          rightBoundary = parseFloat((width - $source[0].clientWidth) / width)
-          sourceTopOffset = parseFloat(sourcePosition.top / height)
-          bottomBoundary = parseFloat(
-            (height - $source[0].clientHeight) / height,
-          )
-
-          const stateColor =
-            $source.find('.sp-preview').attr('data-color') ||
-            $source.find('input.color').val()
-
-          definition.states.push({
-            id: sourceId,
-            displayName: $source.find('input.Workflow-stateName').val(),
-            name:
-              $source.find(':input[type="hidden"]').val() ||
-              $source.find('input.Workflow-stateName').val(),
-            color: stateColor,
-            textColor: relativeLuminance(cc.hex.rgb(stateColor)),
-            left: sourceLeftOffset,
-            top: sourceTopOffset,
-          })
-
-          if (sourceLeftOffset > rightBoundary) {
-            $source.css('left', rightBoundary * 100 + '%')
-          }
-
-          if (sourceTopOffset > bottomBoundary) {
-            $source.css('top', bottomBoundary * 100 + '%')
-          }
-        }
-
-        if (targets) {
-          $.each(targets, function (index, targetData) {
-            var targetId = targetData.target
-            var $target = $visual.find('[data-id="' + targetId + '"]')
-            var transition
-            var $transition
-            var $transitionInput
-            var transitionColor
-            var bound
-
-            if ($target.length === 0) {
-              return
-            }
-
-            transition = sourceId + '/' + targetId
-            $transition = $transitions[transition]
-
-            if (!$transition) {
-              $transition = $('<fieldset/>', {
-                class: 'Workflow-transition',
-              }).append(
-                $('<legend/>', {
-                  class: 'screen-reader-only',
-                  text: window.BRIGHTSPOT.ui.workflow.transitionLegend,
-                }),
-              )
-
-              const $transitionInput = $('<input/>', {
-                type: 'text',
-                class: 'expandable Workflow-transitionName',
-                placeholder: window.BRIGHTSPOT.ui.workflow.placeholder,
-                value: targetData.displayName || '',
-                keydown: function (evt) {
-                  if (evt.originalEvent.key === 'Enter') {
-                    evt.originalEvent.preventDefault()
-                    return
-                  }
-                },
-              })
-              $transition.append($transitionInput)
-
-              $transition.append(
-                $('<input/>', {
-                  type: 'hidden',
-                  value:
-                    targetData.name ||
-                    sourceId + '-' + targetId + '-' + uuidv1(),
-                }),
-              )
-
-              $transition.append(
-                $('<button/>', {
-                  class: 'Workflow-removeTransition Link',
-                  'aria-label': window.BRIGHTSPOT.ui.workflow.remove,
-                  text: window.BRIGHTSPOT.ui.workflow.remove,
-                  click: function () {
-                    var targets = $.data($source[0], 'workflow-targets')
-
-                    if (targets) {
-                      $.data(
-                        $source[0],
-                        'workflow-targets',
-                        $.map(targets, function (target) {
-                          return target.source === sourceId &&
-                            target.target === targetId
-                            ? null
-                            : target
-                        }),
-                      )
-                    }
-
-                    $transitions[transition] = undefined
-                    $transition.remove()
-                    $arrows.trigger('redraw')
-
-                    return false
-                  },
-                }),
-              )
-
-              $visual.append($transition)
-              $transitions[transition] = $transition
-              $visual.trigger('create')
-
-              if (targetData.focus) {
-                $transitionInput[0].focus()
-              }
-            }
-
-            $transitionInput = $transition.find(':input[type="text"]')
-            transitionColor = getTransitionColor($transition)
-            bound = drawArrow(context, transitionColor, $source, $target)
-            // var boundOffset = bound.sourceX < bound.targetX ? 0.3 : 0.7
-
-            $transition.css({
-              left:
-                (bound.sourceX +
-                  bound.targetX -
-                  $transitionInput[0].clientWidth) /
-                2,
-              top:
-                (bound.sourceY +
-                  bound.targetY -
-                  $transitionInput[0].offsetHeight) /
-                2,
-            })
-
-            $transitionInput.css({
-              'border-color': transitionColor,
-            })
-
-            definition.transitions.push({
-              displayName: $transitionInput.val(),
-              name:
-                $transition.find(':input[type="hidden"]').val() ||
-                $transitionInput.val(),
-              source: sourceId,
-              target: targetId,
-            })
-          })
-        }
-      })
-
-      $textarea.val(JSON.stringify(definition))
-
-      if ($source) {
-        drawArrow(context, 'black', $source, targetX, targetY)
-      }
-    })
-
-    $visual.delegate(':input', 'input', function () {
-      $arrows.trigger('redraw')
-    })
-
-    addTransitionTarget = function (targetData) {
-      var $source = $visual.find('[data-id="' + targetData.source + '"]')
-      var targets
-
-      if ($source.length > 0) {
-        targets = $.data($source[0], 'workflow-targets') || []
-        targets.push(targetData)
-        $.data($source[0], 'workflow-targets', targets)
-      }
-    }
-
-    appendTransitionAdd = function ($state) {
-      const text =
-        ($textarea.attr('data-add') || window.BRIGHTSPOT.ui.workflow.add) +
-        '  ' +
-        ($textarea.attr('data-transition-label') ||
-          $textarea.attr('data-transition-fallback') ||
-          'Transition')
-
-      $state.append(
-        $('<button/>', {
-          class: 'Workflow-addTransition Link',
-          type: 'button',
-          'aria-haspopup': true,
-          'aria-expanded': false,
-          'aria-label': text,
-          text: text,
-          click: function () {
-            if ($visual.is('.is-transitioning')) {
-              return true
-            }
-
-            $visual.addClass('is-transitioning')
-
-            // Calculate visualOffset once to avoid repeated .offset() calls
-            var visualOffset = $visual.offset()
-
-            $win.bind(
-              'mousemove.workflows',
-              $.throttle(50, function (event) {
-                $arrows.trigger('redraw', [
-                  $state,
-                  event.pageX - visualOffset.left,
-                  event.pageY - visualOffset.top,
-                ])
-              }),
-            )
-
-            $win.bind('click.workflows', function (event) {
-              var $target = $(event.target).closest('.Workflow-state')
-
-              // Prevent adding transition to self
-              if (
-                $target.length > 0 &&
-                $target.attr('data-id') !== $state.attr('data-id')
-              ) {
-                addTransitionTarget({
-                  source: $state.attr('data-id'),
-                  target: $target.attr('data-id'),
-                })
-              }
-
-              $visual.removeClass('is-transitioning')
-              $win.unbind('.workflows')
-              $arrows.trigger('redraw')
-
-              return false
-            })
-
-            return false
-          },
-          keydown: function (evt) {
-            if (evt.originalEvent.key === 'Enter') {
-              evt.originalEvent.preventDefault()
-              evt.target.setAttribute('aria-expanded', 'true')
-              $state.find('.ComboInput').click()
-            }
-          },
-        }),
-      )
-    }
-
-    addState = function (stateData) {
-      var $state
-
-      $visual.append(
-        ($state = $('<fieldset/>', {
-          class: 'Workflow-state is-intermediate',
-          'data-id': stateData.id,
-          css: {
-            left: Math.min(stateData.left * 100, 99.9) + '%',
-            top: Math.min(stateData.top * 100, 99.9) + '%',
-          },
-          mousedown: function (event) {
-            event.dragConstrainToContainer = true
-            event.dragContainer = $visual[0]
-            event.onDragConstrainCallback = function () {
-              $arrows.trigger('redraw')
-            }
-
-            $.drag(
-              this,
-              event,
-              function (event, data) {
-                data.delta = $state.position()
-                data.delta.left -= event.pageX
-                data.delta.top -= event.pageY
-              },
-              function (event, data) {
-                $state.css({
-                  left: event.pageX + data.delta.left,
-                  top: event.pageY + data.delta.top,
-                })
-
-                // "is-dragging" class used in v5
-                this.classList.add('is-dragging')
-                $arrows.trigger('redraw')
-              },
-              function (event) {},
-            )
-          },
-          mouseup: function (event) {
-            // "is-dragging" class used in v5
-            requestAnimationFrame(() => {
-              this.classList.remove('is-dragging')
-            })
-          },
-        }).append(
-          $('<legend/>', {
-            class: 'screen-reader-only',
-            text: window.BRIGHTSPOT.ui.workflow.stateLegend,
-          }),
-        )),
-      )
-
-      $state.append(
-        $('<input/>', {
-          type: 'text',
-          class: 'CIG-placeholder color',
-          // if a color is not chosen set the value to the default color
-          value: stateData.color || 'var(--color-gray6)',
-        }),
-      )
-
-      $state.append(
-        $('<input/>', {
-          type: 'text',
-          class: 'expandable Workflow-stateName',
-          value: stateData.displayName || '',
-          placeholder: window.BRIGHTSPOT.ui.workflow.placeholder,
-          keydown: function (evt) {
-            if (evt.originalEvent.key === 'Enter') {
-              evt.originalEvent.preventDefault()
-              return
-            }
-          },
-          keyup: throttle(500, updateTransitionSelects),
-        }),
-      )
-
-      $state.append(
-        $('<input/>', {
-          class: 'Workflow-stateDataName',
-          type: 'hidden',
-          value: stateData.name || stateData.id + '-' + uuidv1(),
-        }),
-      )
-
-      $state.append(
-        $('<button/>', {
-          class: 'Workflow-removeState Link',
-          type: 'button',
-          'aria-label': window.BRIGHTSPOT.ui.workflow.remove,
-          text: window.BRIGHTSPOT.ui.workflow.remove,
-          click: async function (event) {
-            const workflowStateName = this.parentNode.querySelector(
-              'input.Workflow-stateDataName',
-            ).value
-            if (workflowStateName) {
-              const url =
-                window.BRIGHTSPOT.web.pagePaths[
-                  'com.psddev.cms.db.ConfirmDeleteWorkflowStatePage'
-                ] +
-                '?' +
-                new URLSearchParams({ workflowStateName: workflowStateName })
-              try {
-                const response = await fetch(url, {
-                  method: 'GET',
-                  credentials: 'include',
-                })
-
-                const responseJson = await response.json()
-                let canRemove = false
-                if (responseJson.confirmationRequired) {
-                  if (window.confirm(responseJson.message)) {
-                    canRemove = true
-                  }
-                } else {
-                  canRemove = true
-                }
-
-                if (canRemove) {
-                  $state.remove()
-                  $arrows.trigger('redraw')
-                  updateTransitionSelects()
-                }
-              } catch (error) {
-                console.error(error)
-              }
-              return false
-            }
-          },
-        }),
-      )
-
-      appendTransitionAdd($state)
-      $visual.css('height', 120 * $visual.find('.Workflow-state').length)
-      $arrows.attr({
-        width: $visual.width(),
-        height: $visual.height(),
-      })
-
-      updateTransitionSelects()
-      return $state
-    }
-
-    updateTransitionSelects = function () {
-      const $states = $visual.find('.Workflow-state')
-      $states.each((i, state) => {
-        if (state.dataset.id === 'final') {
-          return
-        }
-        const $state = $(state)
-        $state.find('.Workflow-transitions').remove()
-
-        const $transitionSelect = $('<select/>', {
-          class: 'Workflow-transitions screen-reader-only',
-          name: 'transitionSelect',
-          tabindex: -1,
-          'aria-label': window.BRIGHTSPOT.ui.workflow.transitions,
-          change: function () {
-            addTransitionTarget({
-              source: state.dataset.id,
-              target: this.options[this.selectedIndex].value,
-              focus: true,
-            })
-          },
-        }).append($('<option/>'))
-
-        $transitionSelect[0].addEventListener('combo-input:hide', (evt) => {
-          const prev = evt.target.previousElementSibling
-          if (!prev) return
-          prev.setAttribute('aria-expanded', 'false')
-        })
-
-        $states.each((i, other) => {
-          if (
-            $state[0] !== other &&
-            other.dataset.id !== 'initial' &&
-            other.dataset.id !== 'final'
-          ) {
-            $transitionSelect.append(
-              $('<option/>', {
-                value: other.dataset.id,
-                text: other.querySelector('.Workflow-stateName').value,
-              }),
-            )
-          }
-        })
-
-        $transitionSelect.append(
-          $('<option/>', {
-            value: 'final',
-            text: window.BRIGHTSPOT.ui.workflow.published,
-          }),
-        )
-
-        $state.append($transitionSelect)
-      })
-    }
-
-    $visual.append(
-      ($stateAdd = $('<button/>', {
-        class: 'Workflow-addState Link',
-        'aria-label':
-          ($textarea.attr('data-add') || window.BRIGHTSPOT.ui.workflow.add) +
-          ' ' +
-          ($textarea.attr('data-state-label') || 'State'),
-        text:
-          ($textarea.attr('data-add') || window.BRIGHTSPOT.ui.workflow.add) +
-          ' ' +
-          ($textarea.attr('data-state-label') || 'State'),
-        click: function () {
-          const $state = addState({
-            id: nextStateId,
-            left: 0.3,
-            top: 0.01,
-          })
-
-          $state.find('.Workflow-stateName').focus()
-          ++nextStateId
-          $(window).trigger('resize')
-
-          return false
-        },
-      })),
-    )
-
-    $visual.append(
-      ($stateInitial = $('<fieldset/>', {
-        class: 'Workflow-state',
-        'data-id': 'initial',
-        text:
-          $textarea.attr('data-state-initial') ||
-          window.BRIGHTSPOT.ui.workflow.state,
-      }).append(
-        $('<legend/>', {
-          class: 'screen-reader-only',
-          text: window.BRIGHTSPOT.ui.workflow.stateLegend,
-        }),
-      )),
-    )
-
-    appendTransitionAdd($stateInitial)
-
-    $visual.append(
-      ($stateFinal = $('<fieldset/>', {
-        class: 'Workflow-state',
-        'data-id': 'final',
-        text: $textarea.attr('data-state-final') || 'Final State',
-      }).append(
-        $('<legend/>', {
-          class: 'screen-reader-only',
-          text: window.BRIGHTSPOT.ui.workflow.stateLegend,
-        }),
-      )),
-    )
-
-    if (definition.states) {
-      $.each(definition.states, function () {
-        var id = parseInt(this.id, 10)
-
-        addState(this)
-
-        if (id >= nextStateId) {
-          nextStateId = id + 1
-        }
-      })
-    }
-
-    $textarea.after($visual)
-    $visual.trigger('create')
-    $textarea.hide()
-
-    $arrows.attr({
-      width: $visual.width(),
-      height: $visual.height(),
-    })
-
-    if (definition.transitions) {
-      $.each(definition.transitions, function () {
-        addTransitionTarget(this)
-      })
-
-      $arrows.trigger('redraw')
-    }
-
-    updateTransitionSelects()
-
-    $(window).resize(function () {
-      window.requestAnimationFrame(function () {
-        const h = $visual.height()
-        const w = $visual.width()
-
-        $arrows.attr({
-          height: h * dpr,
-          width: w * dpr,
-        })
-
-        $arrows.css({
-          height: h,
-          width: w,
-        })
-
-        $arrows.trigger('redraw')
-      })
-    })
-  },
-})