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

package/src/legacy/tool-ui/src/main/webapp/v4/Preview.less

@@ -0,0 +1,495 @@
+@import (reference) url('./Dropdown.less');
+
+@dashedBoxDefault: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='#CCC' stroke-width='3' stroke-dasharray='5 10' stroke-linecap='square'/%3e%3c/svg%3e");
+@dashedBoxHover: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='#53719e' stroke-width='3' stroke-dasharray='5 10' stroke-linecap='square'/%3e%3c/svg%3e");
+@dashedBoxSelected: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='#53719e' stroke-width='4' stroke-linecap='square'/%3e%3c/svg%3e");
+@dashedLineDefault: url("data:image/svg+xml,%3csvg width='100%25' height='3' viewbox='0 0 100 3' xmlns='http://www.w3.org/2000/svg'%3e%3cline stroke='#6e6f76' x1='0' y1='0' x2='100%25' y2='0' stroke-dasharray='7' stroke-width='3'/%3e%3c/svg%3e");
+@dashedLineHover: url("data:image/svg+xml,%3csvg width='100%25' height='3' viewbox='0 0 100 3' xmlns='http://www.w3.org/2000/svg'%3e%3cline stroke='black' x1='0' y1='0' x2='100%25' y2='0' stroke-dasharray='7' stroke-width='3'/%3e%3c/svg%3e");
+
+.Upscale() {
+  --scaleFactor: ~'calc(1 + (1 - var(--PreviewScale, 1)))';
+
+  transform: ~'translate(0px, 0px) scale(var(--scaleFactor)) !important';
+}
+
+body.overlay-hidden .Preview-overlay {
+  visibility: hidden;
+}
+
+.is-previewToEditDisabled .Preview-overlayFrame {
+  display: none;
+}
+
+.Preview-overlay {
+  background-image: @dashedBoxDefault;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  opacity: 0;
+  position: absolute;
+
+  &.is-visible,
+  &.is-selected,
+  &.is-hover {
+    opacity: 1;
+  }
+
+  &.is-removed {
+    pointer-events: none;
+    visibility: hidden;
+  }
+
+  &.is-loading {
+    background: rgb(0 0 0 / 25%);
+    pointer-events: none;
+
+    &::after {
+      &:extend(.Icon);
+
+      animation: spin var(--time-xl) infinite ease-in-out;
+      color: var(--color-white);
+      content: 'autorenew';
+      font-size: var(--iconSize-xl);
+      left: calc(50% - var(--Icon-size) / 2);
+      position: absolute;
+      top: calc(50% - var(--Icon-size) / 2);
+    }
+  }
+}
+
+.Preview-moveUp,
+.Preview-moveDown {
+  &:extend(.Icon);
+
+  font-size: var(--iconSize-xs);
+}
+
+.Preview-overlay.is-shared {
+  background: transparent;
+  outline: 4px dashed var(--color-blue4);
+}
+
+.Preview-overlay.is-locked {
+  background: var(--color-gray2);
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+div.Preview-overlayLabel {
+  .Text.is-m;
+
+  align-items: center;
+  background: white;
+  color: var(--color-gray4);
+  display: inline-flex;
+  flex-direction: row;
+  font-family: var(--fontFamily-sansSerif);
+  opacity: 0;
+  padding: 0.25em 0.5em;
+  position: absolute;
+  text-transform: capitalize;
+  transform: ~'translate(0px, 0px) scale(var(--PreviewScale))';
+  transform-origin: top left;
+  width: max-content;
+  z-index: 1;
+}
+
+html.should-upscale div.Preview-overlayLabel {
+  .Upscale();
+}
+
+.Preview-imageOverlay {
+  &:is(.is-visible, :hover, :focus-visible, :active) > .Preview-overlayTooltip {
+    opacity: 1;
+    transition-delay: 150ms;
+
+    --tooltip-y: -1px;
+  }
+}
+
+.Preview-overlayTooltip {
+  --tooltip-scale: ~'calc(1 + (1 - var(--PreviewScale, 1)))';
+  --tooltip-tail-size: calc(7px * var(--tooltip-scale));
+  --tooltip-tail-bottom: conic-gradient(
+      from -30deg at bottom,
+      #0000,
+      #000 1deg 60deg,
+      #0000 61deg
+    )
+    bottom / 100% calc(var(--tooltip-tail-size) + 1px) no-repeat;
+  --tooltip-tail-top: conic-gradient(
+      from 150deg at top,
+      #0000,
+      #000 1deg 60deg,
+      #0000 61deg
+    )
+    top / 100% calc(var(--tooltip-tail-size) + 1px) no-repeat;
+  --tooltip-bg: var(--color-white);
+  --tooltip-shape: var(--tooltip-tail-top);
+  --tooltip-y: calc(3px * var(--tooltip-scale));
+
+  background: var(--tooltip-bg);
+  display: grid;
+  filter: drop-shadow(0 3px 3px hsl(0deg 0% 0% / 23%))
+    drop-shadow(0 5px 5px hsl(0deg 0% 0% / 23%));
+  font-size: 1rem;
+  font-weight: normal;
+  gap: var(--gap-s);
+  inline-size: max-content;
+  inset-block-end: calc(100% + calc(0.75ch * var(--tooltip-scale)));
+  inset-inline-start: 0%;
+  line-height: initial;
+  margin: 0;
+  max-inline-size: 25ch;
+  min-width: fit-content;
+  opacity: 0;
+  padding: 0.75ch 1.5ch;
+  pointer-events: none;
+  position: absolute;
+  scale: var(--tooltip-scale);
+  text-align: start;
+  transform: translateX(calc(-1px * var(--tooltip-scale)))
+    translateY(var(--tooltip-y, 0));
+  transform-origin: left;
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease;
+  user-select: none;
+  will-change: filter;
+  z-index: 1;
+
+  &::after {
+    background: var(--tooltip-bg);
+    border-block-end: var(--tooltip-tail-size) solid transparent;
+    content: '';
+    inset: 0 0 0 calc(-100% + calc(var(--tooltip-tail-size) * 4)); /* move the tail to the right */
+    -webkit-mask: var(--tooltip-shape);
+    mask: var(--tooltip-shape);
+    position: absolute;
+    z-index: -1;
+  }
+
+  &:is([position='top']) {
+    --tooltip-shape: var(--tooltip-tail-bottom);
+
+    &::after {
+      border-block-end: var(--tooltip-tail-size) solid transparent;
+      inset-block-end: calc(var(--tooltip-tail-size) * -1);
+    }
+  }
+
+  &:is([position='bottom']) {
+    --tooltip-shape: var(--tooltip-tail-top);
+
+    inset-block-end: auto;
+    inset-block-start: calc(100% + var(--tooltip-tail-size));
+
+    &::after {
+      border-block-start: var(--tooltip-tail-size) solid transparent;
+      inset-block-start: calc(var(--tooltip-tail-size) * -1);
+    }
+  }
+
+  &.is-grid {
+    display: grid;
+    gap: 3px;
+    grid-template-columns: 1fr 1fr;
+    justify-items: end;
+    text-wrap: nowrap;
+
+    :nth-child(odd) {
+      justify-self: start;
+      text-transform: capitalize;
+    }
+
+    :nth-child(even) {
+      justify-self: end;
+    }
+
+    :nth-child(even):first-of-type {
+      color: var(--color-gray5);
+    }
+
+    :nth-child(odd):not(:first-child) {
+      color: var(--color-gray5);
+    }
+  }
+}
+
+.Preview-overlayTooltip b {
+  color: var(--color-dominant5);
+  font-weight: bold;
+}
+
+.Preview-overlay.is-hover:not(.is-locked),
+.Preview-overlay.is-selected:not(.is-locked),
+.Preview-overlay.is-menuOpen {
+  pointer-events: auto;
+
+  > .Preview-overlayLabel {
+    opacity: 1;
+    z-index: 2;
+  }
+}
+
+.Preview-overlay.is-hover:not(.is-locked) {
+  background-image: @dashedBoxHover;
+
+  > .Preview-overlayLabel {
+    color: var(--color-dominant5);
+  }
+}
+
+.Preview-overlay.is-selected:not(.is-locked) {
+  background-image: @dashedBoxSelected;
+}
+
+.Preview-overlay.is-selected:not(.is-locked) {
+  > .Preview-overlay-addButton {
+    opacity: 1;
+  }
+
+  > .Preview-overlayLabel {
+    background: var(--color-gray2);
+    color: var(--color-black);
+  }
+}
+
+.Preview-overlay-editButton {
+  .IconButton;
+
+  --IconButton-name: 'edit';
+
+  align-self: flex-end;
+  position: absolute;
+  right: calc(0px - var(--Icon-size) - var(--gap-l));
+  top: 0;
+  z-index: 2;
+}
+
+.Preview-overlay.is-hover.is-shared:not(.is-locked),
+.Preview-overlay.is-selected.is-shared:not(.is-locked) {
+  background: rgb(76 104 145 / 12%);
+  outline: 2px solid var(--color-blue6);
+}
+
+.Preview-overlay.is-empty {
+  align-items: center;
+  background-image: @dashedLineDefault;
+  background-position: center center;
+  background-repeat: no-repeat;
+  cursor: pointer;
+  display: none;
+  flex-direction: row;
+  justify-content: center;
+  left: var(--offsetH);
+  padding: calc(var(--gap-m) / 2) 100px;
+  width: calc(100% - calc(2 * var(--offsetH)));
+  z-index: 1;
+
+  --offsetH: 6px;
+
+  &.is-hover,
+  &.is-selected {
+    background-image: @dashedLineHover;
+  }
+
+  span.Preview-overlayLabel {
+    .Text.is-xl;
+
+    background: var(--color-white);
+    padding: 0 var(--gap-l);
+  }
+}
+
+.Preview-overlay.is-empty:hover {
+  color: var(--color-blue6);
+}
+
+.is-previewEditorEnabled .Preview-overlay.is-empty {
+  display: flex;
+}
+
+.Preview-overlay-addButton {
+  .IconButton.no-Fill;
+  .Link;
+
+  --Button-size: calc(var(--gap-l) * 2 + var(--Text-height));
+  --IconButton-name: 'add';
+  --Icon-size: var(--iconSize-l);
+
+  bottom: calc(0px - var(--Button-size) / 2);
+  font-size: var(--Icon-size);
+  left: calc(50% - var(--Button-size) / 2);
+  opacity: 0;
+  position: absolute;
+  z-index: 2;
+
+  &::before {
+    background: var(--color-dominant5);
+    color: white;
+  }
+}
+
+.ContentEdit-previewModal {
+  background: var(--color-black);
+  display: none;
+  height: 100%;
+  left: 0;
+  opacity: 0.5;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 2001;
+
+  &.is-visible {
+    display: block;
+  }
+}
+
+.Preview-fieldActions {
+  align-items: center;
+  display: flex;
+  margin-top: var(--gap-s);
+
+  > * {
+    margin-right: var(--gap-m);
+  }
+
+  > .is-cancel {
+    color: var(--color-red6);
+    cursor: pointer;
+  }
+}
+
+// Content form fields styling
+.is-previewEditing {
+  background: white;
+  box-shadow: var(--shadow-4);
+  max-height: calc(85% - var(--gap-xl));
+  padding: 0 var(--gap-xl);
+  position: fixed;
+  top: 15%;
+  z-index: 2002 !important;
+
+  &::after {
+    display: none;
+  }
+
+  > button.is-save {
+    margin-left: auto;
+    position: relative;
+    width: fit-content;
+  }
+
+  > .CIG-row {
+    padding-top: 0;
+
+    &::after {
+      top: calc(var(--gap-l) + var(--gap-xl));
+    }
+  }
+
+  > .RCIG-item,
+  > .EIG-item,
+  > .RCS-item {
+    border: none;
+    list-style: none;
+
+    &::before {
+      display: none;
+    }
+
+    > .CIG {
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    > .removeButton,
+    > .RCIG-swap,
+    > .EIG-swap,
+    > .MultiSortable-buttonToggle,
+    > .ContentSelector-clear {
+      display: none;
+    }
+  }
+
+  > .RCS-item {
+    margin-top: var(--gap-xl);
+  }
+
+  .Preview-popupCancel {
+    .IconButton;
+
+    --IconButton-name: 'close';
+
+    position: fixed;
+    right: calc(30vw + var(--gap-l) - var(--gap-s));
+    top: calc(
+      15% + var(--gap-m) + var(--lineHeight-m) / 2 - var(--Icon-size) / 2 -
+        var(--gap-s)
+    );
+    z-index: 10;
+  }
+}
+
+.is-previewEditing {
+  > .CIG-row > .CIG-label,
+  > .RCIG-item > .repeatableLabel,
+  > .EIG-item > .repeatableLabel,
+  > .Preview-popupHeading {
+    .Text.is-m;
+
+    background: var(--color-gray2);
+    color: black !important;
+    height: auto;
+    margin: 0 calc(0px - var(--gap-xl));
+    padding: var(--gap-m) var(--gap-l);
+    position: sticky;
+    top: 0;
+    z-index: 10;
+
+    > .CIG-help,
+    .CIG-guide,
+    .CIG-comments {
+      display: none;
+    }
+  }
+
+  > .CIG-row > .CIG-label {
+    margin-bottom: var(--gap-l);
+  }
+
+  > .RCIG-item:not(.is-gridItem) > .RCIG-title,
+  > .EIG-item > .EIG-title {
+    &::before,
+    &:hover::before {
+      display: none;
+    }
+  }
+}
+
+.is-previewEditing > .ActionBar {
+  margin: 0 calc(0px - var(--gap-xl));
+  margin-top: var(--gap-l);
+}
+
+.EIG-item.is-previewEditing > .removeButton {
+  right: 0;
+}
+
+.EIG-item.is-previewEditing > .EIG-swap {
+  right: calc(var(--gap-s) * 3 + var(--Icon-size));
+}
+
+.is-preview-menu {
+  .is-previewEditing {
+    left: 25vw;
+    overflow: auto;
+    right: 30vw;
+  }
+}
+
+.Preview-overlayFrame {
+  color-scheme: light;
+}

package/src/legacy/tool-ui/src/main/webapp/v4/PreviewEditor.js

@@ -0,0 +1,86 @@
+import create from './dom/create'
+import { renderOverlayMenu } from './PreviewOverlay'
+
+let overlayWindow, overlayFrame, previewContainerId
+
+export const renderOverlays = (overlays) => {
+  overlays.forEach((overlay, key) => {
+    renderOverlay(overlay, key)
+  })
+}
+
+export const renderOverlay = (overlayObj, key) => {
+  const top = window.parent ? window.parent.parent : null
+  const overlayWindow = overlayFrame.contentWindow
+  const overlayDocument = overlayWindow.document
+  const overlay = overlayObj.element
+  const isEmpty = overlayObj.isEmpty === 'true'
+  const { id, name, type } = overlayObj
+
+  if (type === 'bspField' && !overlayObj.dimensions && !isEmpty) {
+    return
+  }
+
+  const overlayKey = id + '/' + name
+  if (overlayObj.internalType === 'text' && !isEmpty) {
+    const editButton = create('div', {
+      className: 'Preview-overlay-editButton',
+      onclick: (event) => {
+        top.postMessage(
+          {
+            type: 'BSP.Preview.OverlayActionClick',
+            key: key ? key : overlayKey,
+            internalType: overlayObj.internalType,
+            previewContainerId,
+          },
+          '*',
+        )
+      },
+    })
+    overlay.appendChild(editButton)
+  }
+
+  if (overlayObj.behaviors) {
+    const menu = renderOverlayMenu(
+      overlayDocument,
+      previewContainerId,
+      overlayObj.id + '/' + overlayObj.name,
+      overlay,
+      overlayObj.behaviors,
+    )
+    if (menu) {
+      overlay.appendChild(menu)
+    }
+  }
+
+  if (overlayObj.isRepeatable && !isEmpty) {
+    const addButton = overlayDocument.createElement('div')
+    addButton.classList.add('Preview-overlay-addButton')
+    addButton.setAttribute('title', 'Add ' + name)
+    overlay.appendChild(addButton)
+    addButton.addEventListener('click', (event) => {
+      top.postMessage(
+        {
+          type: 'BSP.Preview.OverlayActionClick',
+          key: overlayObj.id + '/' + overlayObj.name,
+          actionId: overlayObj.isRepeatable,
+          previewContainerId,
+        },
+        '*',
+      )
+    })
+  }
+}
+
+export const init = (win, frame, containerId) => {
+  overlayWindow = win
+  overlayFrame = frame
+  previewContainerId = containerId
+
+  overlayWindow.addEventListener('dblclick', (event) => {
+    const element = event.target.closest('.Preview-overlay')
+    if (element) {
+      element.querySelector('.Preview-overlay-editButton')?.click()
+    }
+  })
+}