@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/input/workflow.js

@@ -0,0 +1,718 @@
+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')
+      })
+    })
+  },
+})