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

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

@@ -0,0 +1,264 @@
+import './Entry.less'
+
+import 'form-request-submit-polyfill'
+import './compat/Fetch'
+import './compat/jquery.js'
+import './compat/requirejs.js'
+
+import '../script/v3'
+import {
+  getFirstAndLastFocusableDescendants,
+  getFocusableDescendants,
+} from '../../../dom/focusable'
+import { trapFocusWithin } from '../../../dom/keyboard'
+import create from './dom/create'
+import onFind from './dom/onFind'
+import onFindOnce from '../../../dom/onFindOnce'
+import onRemove from './dom/onRemove'
+import onVisible from './dom/onVisible'
+import findAll from './dom/findAll'
+import { setupMenuForAria, toggleMenu } from '../../../dom/popupMenu.js'
+
+import './appetizeio/Appetizeio'
+import './Bridge'
+import './Admin'
+import '../../../AnalyticsWidget'
+import './AutoExpand'
+import AutoSubmit from './AutoSubmit'
+import './CheckboxInput'
+import './ColorInput'
+import ComboInput from './ComboInput'
+import './CommunityWidget'
+import './ContentEdit'
+import './ContentLock'
+import './DataTable'
+import './DateStringField'
+import './Form'
+import './ExternalItemAuth'
+import './Hierarchy'
+import './Icon'
+import './ImageEditorBundle'
+import './LinkCarousel'
+import './LinkList'
+import './LinkTable'
+import './Location'
+import './LookingGlass'
+import './Message'
+import './NumberBar'
+import './Page'
+import './PubSub'
+import './QueryField'
+import './RepeatableContentInputGroup'
+import './ContentReporting'
+import './RichTextEditor'
+import './SearchFields'
+import './SearchResult'
+import './SharePreview'
+import { init as InitSortable } from './Sortable'
+import './StyleEmbeddedContent'
+import './StyleguidePresets'
+import TabContainer from './TabContainer'
+import './Taxonomy'
+import './ThemeBundleEditor'
+import './TimedContentBundle'
+import './VideoEditorBundle'
+import './ViewMirror'
+import './ViewPreview'
+import './Widget'
+import './widget/AssignmentContent'
+import './widget/AssignmentDeskDashboard'
+import './widget/AssociatedContentWidget'
+import './widget/BulkUpload'
+import './widget/Calendar'
+import './widget/ClosableWindow'
+import './widget/PitchAssignments'
+import './widget/PitchContent'
+import './widget/Revisions'
+import '../../../Entry'
+
+import Cookies from 'js.cookie'
+
+// So that separate chunks are loaded correctly.
+__webpack_public_path__ = CONTEXT_PATH + 'dist/' // eslint-disable-line camelcase
+
+// Blur when the user uses a mouse to click on something to get rid of the
+// potentially confusing focus styling.
+window.addEventListener('mouseup', (e) => {
+  const target = e.target
+
+  if (target === document.activeElement) {
+    let tag = target.tagName
+
+    if (tag) {
+      tag = tag.toLowerCase()
+
+      if (
+        tag === 'a' ||
+        (tag === 'button' && !target.classList.contains('TabBar-item'))
+      ) {
+        target.blur()
+      }
+    }
+  }
+})
+
+onFind(
+  '.autoSubmit:not(:has(:state(btu-loading))), [data-bsp-autosubmit]:not(:has(:state(btu-loading)))',
+  (element) => {
+    // eslint-disable-next-line no-new
+    new AutoSubmit(element)
+  },
+)
+
+// Convert all plain selects into combo inputs.
+onVisible('select', (select) => {
+  if (!select.isConnected) return
+
+  let modifier = ''
+  /** Blank options in following use cases are used as placeholders
+   * and are not logical options, therefore hidden when list is expanded:
+   * 1. Blank option in content selector dropdowns
+   * 2. Blank option in RCIG-addSelect
+   * 3. Create label in global create shortcut dropdown
+   */
+  if (select.closest('.RCIG-addSelect') || select.closest('.Page-create')) {
+    modifier = 'is-hidePlaceholder'
+  } else if (select.classList.contains('ContentSelector-select')) {
+    const clear = select.parentNode.querySelector('.ContentSelector-clear')
+    if (clear) {
+      modifier = 'is-hidePlaceholder'
+    }
+  }
+  const ci = new ComboInput(select, {
+    getOptionsUrl: (value) => {
+      const optionsUrl = select.getAttribute('data-options-url')
+      if (optionsUrl) {
+        return optionsUrl + encodeURIComponent(value)
+      }
+
+      return null
+    },
+    modifier,
+  })
+
+  onRemove(select, () => {
+    ci.destroy()
+  })
+})
+
+// Add readonly attribute/class to all readonly fields
+onFind('.is-readOnly:not(select)', (readOnly) => {
+  for (const input of findAll(readOnly, 'input, textarea, select')) {
+    if (!input.type.includes('select')) {
+      input.readOnly = true
+    } else {
+      input.classList.add('is-readOnly')
+    }
+  }
+})
+
+// Initialize tabs.
+onVisible('.TC', (container) => {
+  // eslint-disable-next-line no-new
+  new TabContainer(container)
+  container.dispatchEvent(new CustomEvent('tc-loaded', { bubbles: true }))
+})
+
+// Trigger all onFind callbacks immediately on frame load.
+window.addEventListener('brightspot-frame-load', onFind.triggerCallbacks)
+
+// Restore focus to the element which initiated the frame request.
+window.addEventListener('brightspot-frame-load', (frameEvt) => {
+  const ajaxInitiator = window.BRIGHTSPOT.ajaxInitiator
+
+  if (ajaxInitiator) {
+    const { action, id, nodeName, shadowField } = ajaxInitiator
+
+    if (nodeName !== 'select' && !shadowField) return
+
+    const target = shadowField
+      ? `[shadow-field="${shadowField}"]`
+      : `form[action*="${
+          new URL(action).pathname
+        }"] ${nodeName}[name="${id}"] ~ .ComboInput`
+
+    onFindOnce(target, () => {
+      let targetEl = frameEvt.target.querySelector(target)
+
+      if (targetEl == null) targetEl = document.querySelector(target)
+
+      if (targetEl) {
+        targetEl.focus()
+        window.BRIGHTSPOT.ajaxInitiator = null
+      }
+    })
+  }
+})
+
+/* fix for BSP-8428 */
+onFind('input[autocomplete="off"]', (input) => {
+  if (input.closest('btu-search-input')) return
+
+  const $input = input
+  if (!$input.readOnly) {
+    $input.readOnly = true
+    $input.addEventListener('focus', () => {
+      $input.readOnly = false
+    })
+  }
+})
+
+InitSortable()
+
+// Calculate the scrollbar size.
+function measureScrollbarSize() {
+  const div = document.createElement('div')
+
+  Object.assign(div.style, {
+    height: '100px',
+    overflow: 'scroll',
+    visibility: 'hidden',
+    width: '100px',
+  })
+
+  const body = document.body
+
+  body.appendChild(div)
+
+  document.documentElement.style.setProperty(
+    '--scrollbarSize',
+    `${div.offsetWidth - div.clientWidth}px`,
+  )
+
+  body.removeChild(div)
+}
+
+if (document.readyState === 'loading') {
+  window.addEventListener('DOMContentLoaded', () => {
+    measureScrollbarSize()
+
+    // Iframe.
+    if (window.location !== window.parent.location) {
+      if (!document.body.classList.contains('is-inIframe')) {
+        document.body.classList.add('is-inIframe')
+      }
+    }
+  })
+} else {
+  measureScrollbarSize()
+}
+
+if (window.BRIGHTSPOT) {
+  window.BRIGHTSPOT.js = {
+    ...window.BRIGHTSPOT.js,
+    trapFocusWithin,
+    getFocusableDescendants,
+    getFirstAndLastFocusableDescendants,
+    create,
+    onFind,
+    onRemove,
+    Cookies,
+    setupMenuForAria,
+    toggleMenu,
+  }
+}

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

@@ -0,0 +1,157 @@
+@import url('../style/v3/index');
+
+@import url('./Reset.less');
+@import url('./Icon.less');
+@import url('./IconButton.less');
+@import url('./Link.less');
+@import url('./Text.less');
+
+@import url('./Widget.less');
+
+@import url('./ActionBar.less');
+@import url('./Admin.less');
+@import url('./AdobeStock.less');
+@import url('./Apis.less');
+@import url('./AutoExpand.less');
+@import url('./Avatar.less');
+@import url('./BackgroundTasks.less');
+@import url('./Badge.less');
+@import url('./Board.less');
+@import url('./BulletedList.less');
+@import url('./Button.less');
+@import url('./Card.less');
+@import url('./Checkbox.less');
+@import url('./CIGCluster.less');
+@import url('./Collections.less');
+@import url('./CommunityWidget.less');
+@import url('./Compat.less');
+@import url('./ContentEditDrawer.less');
+@import url('./ContentInputGroup.less');
+@import url('./ComboInput.less');
+@import url('./ContentEdit.less');
+@import url('./ContentEditSites.less');
+@import url('./ContentForm.less');
+@import url('./ContentSelector.less');
+@import url('./ContentSummary.less');
+@import url('./ContentTools.less');
+@import url('./ContentType.less');
+@import url('./CopyToClipboard.less');
+@import url('./DashboardRow.less');
+@import url('./DashboardWidget.less');
+@import url('./DataTable.less');
+@import url('./DateTimeInput.less');
+@import url('./DateStringField.less');
+@import url('./Diff.less');
+@import url('./Downloads.css');
+@import url('./Draggable.less');
+@import url('./Dropdown.less');
+@import url('./EmbeddedInputGroup.less');
+@import url('./ExternalItemImport.less');
+@import url('./FileInput.less');
+@import url('./FormFilter.less');
+@import url('./Frame.less');
+@import url('./GraphQLApis.less');
+@import url('./Grid.less');
+@import url('./Guide.less');
+@import url('./GuideField.less');
+@import url('./Hierarchy.less');
+@import url('./Highlight.less');
+@import url('./ImageEditor.less');
+@import url('./Input.less');
+@import url('./InputRow.less');
+@import url('./Label.less');
+@import url('./LabeledCheckbox.less');
+@import url('./LinkCarousel.less');
+@import url('./LinkList.less');
+@import url('./LinkTable.less');
+@import url('./LocationMap.less');
+@import url('./LookingGlass.less');
+@import url('./Message.less');
+@import url('./Month.less');
+@import url('./Notification.less');
+@import url('./NumberBar.less');
+@import url('./NumberedList.less');
+@import url('./Page.less');
+@import url('./PaginatedResult.less');
+@import url('./Pagination.less');
+@import url('./Popup.less');
+@import url('./PrePublish.less');
+@import url('./Preview.less');
+@import url('./ProfileDropdown.less');
+@import url('./QueryField.less');
+@import url('./RadialProgressBar.less');
+@import url('./Repeatable.less');
+@import url('./RepeatableContentInputGroup.less');
+@import url('./RepeatableContentSelector.less');
+@import url('./RepeatableTextInput.less');
+@import url('ContentReporting.less');
+@import url('./Revision.less');
+@import url('./RichText.less');
+@import url('./SearchInput.less');
+@import url('./SearchResult.less');
+@import url('./SearchFields.less');
+@import url('./SearchWidget.less');
+@import url('./SearchWidgetAdvanced.less');
+@import url('./SharePreview.less');
+@import url('./Sortable.less');
+@import url('./StandardForm.less');
+@import url('./StyleEmbeddedContent.less');
+@import url('./Suggestions.less');
+@import url('./TabBar.less');
+@import url('./TabContainer.less');
+@import url('./Taxonomy.less');
+@import url('./TextInput.less');
+@import url('./TreeList.less');
+@import url('./theme/Theme.less');
+@import url('./ThemeBundleEditor.less');
+@import url('./Utils.css');
+@import url('./Viewers.less');
+@import url('./ViewMirror.less');
+@import url('./ViewPreview.less');
+@import url('./Week.less');
+@import url('./Workflow.less');
+
+@import url('./graphql/GraphQL.less');
+
+@import url('./mail-publishing/MailPublishing.less');
+
+@import url('./translation/Translation.less');
+
+@import url('./widget/AnalyticsWidget.less');
+@import url('./widget/AssignmentDeskDashboard.less');
+@import url('./widget/AssignmentDeskRelatedWidget.less');
+@import url('./widget/AssignmentContent.less');
+@import url('./widget/AssignmentFilters.less');
+@import url('./widget/AssociatedContentWidget.less');
+@import url('./widget/BulkUpload.less');
+@import url('./widget/BulkWorkflow.less');
+@import url('./widget/Calendar.less');
+@import url('./widget/CalendarEventSummary.less');
+@import url('./widget/CalendarAccessOverview.less');
+@import url('./widget/ClosableWindow.less');
+@import url('./widget/ContentColors.less');
+@import url('./widget/ContentTemplatesWidget.less');
+@import url('./widget/Conversation.less');
+@import url('./widget/CopySiteWidget.less');
+@import url('./widget/FormSubmission.less');
+@import url('./widget/LiveBlog.less');
+@import url('./widget/PitchContent.less');
+@import url('./widget/PitchAssignments.less');
+@import url('./widget/Revisions.less');
+@import url('./widget/SavedSearch.less');
+@import url('./widget/SemRushDashboardWidget.less');
+@import url('./widget/SlackAuthentication.less');
+@import url('./widget/WorkStreams.less');
+
+@import url('./appetizeio/AppetizeioEmbedded.less');
+
+form[target='admin-content-types-result'] .ComboInput,
+form[target='admin-content-templates-result'] .ComboInput {
+  max-width: 100%;
+  width: 100%;
+}
+
+/* New v5 things which shouldn't appear in v4 proper */
+.v5-only {
+  display: none;
+}

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

@@ -0,0 +1,16 @@
+import onFind from './dom/onFind'
+
+onFind('.ExternalItemAuthLink', (auth) => {
+  auth.addEventListener('click', () => {
+    document.addEventListener('visibilitychange', (event) => {
+      if (
+        document.visibilityState === 'visible' &&
+        document.cookie
+          .split(';')
+          .some((item) => item.includes('bsp.csrf=externalTypeAuthenticated'))
+      ) {
+        window.location.reload()
+      }
+    })
+  })
+})

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

@@ -0,0 +1,3 @@
+.ExternalItemImport {
+  --contentRight-width: 40%;
+}

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

@@ -0,0 +1,194 @@
+@import (reference) url('./ImageEditor.less');
+
+.FileInput {
+  cursor: pointer;
+  display: inline-flex;
+  margin-right: var(--gap-s);
+  max-width: 100%;
+  position: relative;
+  vertical-align: top;
+
+  input[type='file'] {
+    border: 0;
+    bottom: 0;
+    cursor: pointer;
+    left: 0;
+    opacity: 0;
+    padding: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  &::before {
+    .Button;
+
+    content: 'Choose';
+  }
+
+  &:hover,
+  &:focus-within {
+    &::before {
+      .Button.is-focused;
+    }
+  }
+
+  &[data-choose]::before {
+    content: attr(data-choose);
+  }
+
+  &[data-placeholder]::before {
+    content: attr(data-placeholder);
+  }
+
+  &[data-value] {
+    &::before {
+      .Icon;
+
+      background: var(--color-black);
+      border-color: var(--color-black);
+      color: var(--color-white);
+      content: 'swap_horiz';
+    }
+
+    &::after {
+      content: attr(data-value);
+      display: inline-block;
+      overflow: hidden;
+      padding: var(--gap-s);
+      text-overflow: ellipsis;
+      vertical-align: top;
+      white-space: nowrap;
+    }
+  }
+}
+
+// Legacy.
+.fileSelectorItem {
+  display: block;
+  margin-top: var(--gap-s);
+
+  &.is-error {
+    min-height: 0;
+
+    > .Message {
+      width: 100%;
+    }
+
+    > *:not(.Message) {
+      display: none !important;
+    }
+  }
+}
+
+.file-selector-com-psddev-cms-ui-form-field-NewUploadFileFormInputAction {
+  display: inline;
+  margin: 0 0 0 var(--gap-s);
+}
+
+.bulkFileSelector {
+  display: block;
+}
+
+.uploadableFile {
+  align-items: center;
+  background: rgb(var(--rgb-dominant3) / 70%);
+  border: 4px dotted var(--color-dominant5);
+  border-radius: var(--gap-m);
+  display: flex;
+  justify-content: center;
+  padding: var(--gap-m);
+  user-select: none;
+
+  &.is-active {
+    border-style: solid;
+  }
+
+  a {
+    .Link.is-black;
+    .Text.is-xl;
+
+    --Link-hoverDecoration: none;
+
+    display: block;
+
+    &::before {
+      .Icon;
+      .Icon.is-l;
+
+      content: 'arrow_upward';
+      margin-right: var(--gap-xs);
+    }
+  }
+}
+
+.upload-preview {
+  .ImageEditor-preview;
+
+  --RPB-size: 100px;
+
+  display: inline-block;
+  margin-top: var(--gap-s);
+  vertical-align: middle;
+
+  .RPB,
+  .upload-percentage {
+    display: none;
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .RPB {
+    background: var(--color-white);
+    border-radius: 50%;
+  }
+
+  &.loading {
+    min-height: 100px;
+    min-width: 100px;
+
+    img {
+      opacity: 0.2;
+    }
+
+    .RPB,
+    .upload-percentage {
+      display: block;
+    }
+  }
+}
+
+.bulk-upload-files > .inputLarge .upload-preview.error,
+.upload-preview.error {
+  display: none;
+}
+
+.bulk-upload-files {
+  margin-bottom: calc(var(--gap-l) * 2);
+
+  > .inputLabel {
+    display: none;
+  }
+
+  > .inputLarge {
+    margin-top: var(--gap-s);
+    overflow: auto;
+    white-space: nowrap;
+
+    .upload-preview {
+      display: inline-flex;
+      margin-right: var(--gap-s);
+
+      img {
+        flex: auto;
+        object-fit: cover;
+      }
+
+      .upload-preview-label {
+        display: none;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,31 @@
+import findAll from './dom/findAll'
+import ifMatches from './dom/ifMatches'
+
+// Prevent duplicate form submissions.
+const buttonSelectors = [
+  'button:not([type="button"])',
+  'input[type="submit"]',
+].join(',')
+
+window.addEventListener(
+  'click',
+  ifMatches(buttonSelectors, function () {
+    for (const button of findAll(this.closest('form'), buttonSelectors)) {
+      button.classList.remove('is-clicked')
+    }
+
+    this.classList.add('is-clicked')
+  }),
+)
+
+window.addEventListener('submit', (e) => {
+  const form = e.target
+
+  if (form.target && !form.classList.contains('is-loader')) {
+    for (const button of findAll(form, '.is-clicked')) {
+      button.classList.remove('is-clicked')
+    }
+  } else {
+    form.classList.add('is-submitting')
+  }
+})