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

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

@@ -0,0 +1,84 @@
+.Taxonomy {
+  display: flex;
+  margin-top: 25px;
+
+  [name='searchAdvancedFull'] & {
+    margin-top: 4%;
+  }
+
+  .watch-button {
+    display: none;
+  }
+
+  .SearchResult-query {
+    margin-right: 0;
+  }
+}
+
+.Taxonomy-column {
+  flex: none;
+  float: left;
+  height: 100%;
+  max-height: calc(100vh - calc(var(--ContentEdit-barHeight) * 6));
+  overflow-y: auto;
+  width: 320px;
+
+  [name='miscSearch'] & {
+    max-height: calc(100vh - calc(var(--ContentEdit-barHeight) * 4));
+  }
+
+  ul {
+    height: auto;
+    min-height: 100%;
+    padding-bottom: calc(var(--gap-l) * 2);
+    width: 100%;
+  }
+
+  li {
+    border-bottom: 1px solid var(--color-gray3);
+    overflow: hidden;
+    padding: 0 calc(var(--gap-m) + var(--gap-s) * 2 + var(--Icon-size)) 0
+      var(--gap-m);
+    position: relative;
+    text-overflow: ellipsis;
+    white-space: normal;
+
+    a:not(.Taxonomy-expand) {
+      display: block;
+      overflow: hidden;
+      padding: var(--gap-s) 0;
+      text-overflow: ellipsis;
+    }
+
+    &.is-selected {
+      background: var(--color-gray2);
+    }
+  }
+
+  .SearchResult-items .queryRestrictions {
+    margin-right: 0;
+  }
+}
+
+.Taxonomy-children {
+  display: flex;
+
+  > div {
+    display: flex;
+  }
+
+  &.loaded {
+    border-left: 1px solid var(--color-gray3);
+  }
+}
+
+.Taxonomy-expand {
+  .IconButton;
+
+  --IconButton-name: 'chevron_right';
+
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}

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

@@ -0,0 +1,41 @@
+.Text.is-xs {
+  --Text-height: var(--lineHeight-xs);
+
+  font-size: var(--fontSize-xs);
+  line-height: var(--lineHeight-xs);
+}
+
+.Text.is-s {
+  --Text-height: var(--lineHeight-s);
+
+  font-size: var(--fontSize-s);
+  line-height: var(--lineHeight-s);
+}
+
+.Text.is-m {
+  --Text-height: var(--lineHeight-m);
+
+  font-size: var(--fontSize-m);
+  line-height: var(--lineHeight-m);
+}
+
+.Text.is-l {
+  --Text-height: var(--lineHeight-l);
+
+  font-size: var(--fontSize-l);
+  line-height: var(--lineHeight-l);
+}
+
+.Text.is-xl {
+  --Text-height: var(--lineHeight-xl);
+
+  font-size: var(--fontSize-xl);
+  line-height: var(--lineHeight-xl);
+}
+
+.Text.is-xxl {
+  --Text-height: var(--lineHeight-xxl);
+
+  font-size: var(--fontSize-xxl);
+  line-height: var(--lineHeight-xxl);
+}

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

@@ -0,0 +1,32 @@
+.TextInput {
+  background: transparent;
+  border-color: var(--Input-borderColor);
+  border-radius: 0;
+  border-style: solid;
+  border-width: 0 0 1px;
+  padding: var(--gap-s) 0 calc(var(--gap-s) - 1px) 0;
+  resize: none;
+  width: 100%;
+
+  &:hover,
+  &:focus {
+    border-color: var(--Input-focusColor);
+  }
+
+  &:focus {
+    background: var(--Input-focusBackground);
+    border-bottom-width: 2px;
+    padding-bottom: calc(var(--gap-s) - 2px);
+  }
+}
+
+input[type='email'],
+input[type='number'],
+input[type='password'],
+input[type='search'],
+input[type='tel'],
+input[type='text'],
+input[type='url'],
+textarea {
+  &:extend(.TextInput all);
+}

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

@@ -0,0 +1,224 @@
+import create from './dom/create'
+import onFind from './dom/onFind'
+
+const STATE_OPEN = 'is-open'
+
+export class ThemeBundleEditor {
+  constructor() {
+    this._editorStage = null
+    this._editorToggle = null
+    this._themeBundle = null
+    this._presetSelect = null
+    this._selectedPreset = null
+    this._sg = null
+    this._zIndex = 110
+
+    onFind(document, '.ThemeBundle', (theme) => {
+      this._themeBundle = theme
+      this._initLabels()
+      this._createUI(this._themeBundle)
+    })
+
+    onFind(document, '.Tab[data-tab="Styleguide"]', (tab) => {
+      document.body.classList.add('has-theme-styleguide')
+    })
+
+    window.addEventListener('message', async ({ data }) => {
+      if (typeof data !== 'object') return
+      if (data.type === 'BSP.Styleguide.CloseStyleguideReady') {
+        this._editorToggle.setAttribute('aria-expanded', 'false')
+        this._editorStage.classList.remove(STATE_OPEN)
+
+        const presetRow = document.querySelector(
+          '.CIG-row[data-tab="Overrides"][data-field-name$="._preset"]',
+        )
+        const presetFields = presetRow.querySelector('.CIG-large')
+
+        if (
+          this._selectedPreset !== this._presetSelect.value ||
+          presetRow.hasAttribute('data-received-update')
+        ) {
+          const overridesTab = this._presetSelect
+            .closest('.CIG')
+            .querySelector(':scope > .TabBar .ThemeBundle-tabOverrides')
+          overridesTab && overridesTab.click()
+          presetFields.style = this._presetSelect.value ? 'display: none;' : ''
+          presetRow.classList.add('state-changed')
+          presetRow.removeAttribute('data-received-update')
+
+          if (!this._presetSelect.value) {
+            presetFields
+              .querySelectorAll('input.color, input[type="checkbox"], textarea')
+              .forEach((input) => input.removeAttribute('disabled'))
+          }
+        }
+      } else if (data.type === 'BSP.Styleguide.LoadingV2') {
+        this._sg.classList.add('is-v2')
+      }
+    })
+  }
+
+  _initLabels() {
+    this._labels = {
+      tab: window.THEME_BUNDLE_EDITOR_LABELS
+        ? window.THEME_BUNDLE_EDITOR_LABELS.tabName
+        : 'Main',
+      open: window.THEME_BUNDLE_EDITOR_LABELS
+        ? window.THEME_BUNDLE_EDITOR_LABELS.openAction
+        : 'Open Styleguide',
+      openNewTab: window.THEME_BUNDLE_EDITOR_LABELS
+        ? window.THEME_BUNDLE_EDITOR_LABELS.openNewTabAction
+        : 'Open in New Window/Tab',
+      close: window.THEME_BUNDLE_EDITOR_LABELS
+        ? window.THEME_BUNDLE_EDITOR_LABELS.closeAction
+        : 'Back',
+    }
+  }
+
+  _createUI(theme) {
+    this._editorStage = create('DIV', { class: 'ThemeBundleEditor-stage' })
+    this._editorStage.addEventListener('transitionend', (event) => {
+      if (event.target === this._editorStage) {
+        event.stopPropagation()
+        this._editorStage.classList.contains(STATE_OPEN)
+          ? this._showStyleguide()
+          : this._hideStyleguide()
+      }
+    })
+
+    this._editorToggle = create(
+      'BUTTON',
+      {
+        className: 'ThemeBundleEditor-toggle',
+        name: 'action-edit',
+        value: this._labels.open,
+        'aria-expanded': 'false',
+        onclick: (event) => {
+          event.preventDefault()
+          this._openEditor()
+        },
+      },
+      this._labels.open,
+    )
+
+    // Popup UI.
+    const main = create('DIV', {
+      className: 'ThemeBundleEditor-stage-main',
+    })
+
+    const top = create(
+      'DIV',
+      {
+        className: 'ThemeBundleEditor-stage-top',
+      },
+      create(
+        'a',
+        {
+          className: 'Popup-heading ThemeBundleEditor-close',
+          onclick: (event) => {
+            this._closeEditor()
+          },
+        },
+        this._labels.close,
+      ),
+    )
+
+    this._editorStage.appendChild(top)
+    this._editorStage.appendChild(main)
+    theme.appendChild(this._editorStage)
+
+    const presetSelect = theme.querySelector(
+      '.CIG-row[data-field-name$="._preset"]',
+    )
+    if (presetSelect) {
+      const firstInput = theme.querySelector('.CIG-row')
+      if (firstInput) {
+        theme.insertBefore(
+          create(
+            'DIV',
+            {
+              className: 'ThemeBundleEditor-top',
+              'data-tab': this._labels.tab,
+            },
+            this._editorToggle,
+          ),
+          firstInput,
+        )
+      }
+    }
+  }
+
+  _closeEditor() {
+    if (this._sg.matches('.is-v2')) {
+      this._sg?.contentWindow.postMessage(
+        {
+          type: 'BSP.Styleguide.CloseStyleguide',
+        },
+        '*',
+      )
+    } else {
+      this._editorToggle.setAttribute('aria-expanded', 'false')
+      this._editorStage.classList.remove(STATE_OPEN)
+    }
+  }
+
+  _openEditor() {
+    this._editorStage.style.zIndex = this._zIndex
+    this._editorToggle.setAttribute('aria-expanded', 'true')
+    this._editorStage.classList.add(STATE_OPEN)
+  }
+
+  _showStyleguide() {
+    if (!this._sg) {
+      onFind('.ThemeBundle-edit', async (editLink) => {
+        const response = await fetch(editLink.href)
+        const html = await response.text()
+
+        // Stage the returned html in a DOM.
+
+        const template = document.createElement('template')
+        template.innerHTML = html
+        this._sg = template.content.querySelector(
+          '.Tab[data-tab="Styleguide"] iframe',
+        )
+
+        this._editorStage
+          .querySelector('.ThemeBundleEditor-stage-main')
+          .appendChild(this._sg)
+
+        const openNewLink = create(
+          'a',
+          {
+            className: 'Popup-heading ThemeBundleEditor-openNewTab',
+            target: '_blank',
+            href: this._sg.getAttribute('src'),
+          },
+          this._labels.openNewTab,
+        )
+        const editorTop = document.querySelector('.ThemeBundleEditor-stage-top')
+        editorTop.appendChild(openNewLink)
+      })
+
+      this._presetSelect = document.querySelector(
+        '.CIG-row[data-tab="Overrides"][data-field-name$="._preset"] select[name$="._preset"]',
+      )
+      this._selectedPreset = this._presetSelect.value
+    } else {
+      this._sg.style.visibility = 'visible'
+      this._sg?.contentWindow.postMessage(
+        {
+          type: 'BSP.Styleguide.ReopenStyleguide',
+        },
+        '*',
+      )
+    }
+  }
+
+  _hideStyleguide() {
+    if (this._sg) {
+      this._sg.style.visibility = 'hidden'
+    }
+  }
+}
+
+export default new ThemeBundleEditor()

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

@@ -0,0 +1,106 @@
+.ThemeBundleEditor-stage {
+  background: var(--color-white);
+  bottom: 0;
+  display: none;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: var(--Page-headerBottom);
+  transform: translateY(100vh);
+  transition: transform 0.3s ease-in-out;
+  z-index: 100;
+}
+
+.ThemeBundleEditor-top {
+  padding-top: var(--gap-xl);
+}
+
+.ThemeBundleEditor-toggle {
+  display: none;
+}
+
+.ThemeBundleEditor-stage-main {
+  display: flex;
+
+  iframe {
+    height: calc(
+      100vh -
+        calc(
+          var(--Page-headerBottom) + (var(--gap-m) * 2) + var(--lineHeight-l)
+        )
+    );
+    width: 100%;
+  }
+}
+
+.ThemeBundleEditor-stage-top {
+  display: flex;
+
+  .ThemeBundleEditor-close {
+    flex-grow: 1;
+  }
+
+  .ThemeBundleEditor-openNewTab {
+    padding-right: var(--gap-l);
+
+    &::before {
+      content: 'open_in_new';
+    }
+  }
+}
+
+.Popup[data-popup-source-class*='ThemeBundle-edit'] .ContentEdit {
+  display: block;
+
+  .ContentEdit-bottom,
+  .ContentEdit-right {
+    display: none;
+  }
+
+  .ContentEdit-main {
+    height: 100%;
+  }
+
+  .CIG {
+    align-content: flex-start;
+    height: 100%;
+    overflow-y: auto;
+
+    .TabBar-menuItem[data-tab='Styleguide'] {
+      display: none;
+    }
+  }
+
+  [data-tab='Styleguide'] {
+    height: calc(100% - 3 * var(--gap-l));
+
+    & > .StyleguideFrame {
+      height: calc(100% - var(--Text-height) - var(--gap-m) * 2);
+    }
+  }
+}
+
+@media (@mq-m) {
+  .Popup[data-popup-source-class*='ThemeBundle-edit'] .ContentEdit {
+    display: grid;
+    grid-template: 'left toolbar' 1fr ~'/' 1fr var(--ContentEdit-rightWidth) var(--ContentEdit-toolbarWidth);
+  }
+}
+
+@media (@mq-l) {
+  .ThemeBundleEditor-stage {
+    display: block;
+
+    &.is-open {
+      transform: translateY(0);
+    }
+  }
+
+  .ThemeBundleEditor-toggle {
+    display: block;
+  }
+}
+
+.Styleguide .Page.is-inIframe {
+  height: 100%;
+}

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

@@ -0,0 +1,147 @@
+import onFind from './dom/onFind'
+
+const PARENT_INPUT_CONTAINER_SELECTOR =
+  '.inputContainer-TimedContentPlayerNote-player-visible'
+const TIMED_CONTENT_PLAYER_NOTE_SELECTOR = '.TimedContentPlayerNote'
+const TIMED_COMPANION_SELECTOR_SELECTOR = '.TimedCompanionSelector'
+
+const EVENT_SUFFIX = '.timed'
+const PAUSE_EVENT = 'pause' + EVENT_SUFFIX
+const TIME_UPDATE_EVENT = 'timeUpdate' + EVENT_SUFFIX
+const SEEK_EVENT = 'seek' + EVENT_SUFFIX
+const DESTROY_EVENT = 'destroy' + EVENT_SUFFIX
+
+const OFFSET_LABEL_INPUT_SELECTOR = 'textarea[name$="offsetLabel"]'
+
+onFind('.TimedContentPlayerNote', (note) => {
+  let $note = $(note)
+  let $inputContainer = $note.closest('.inputContainer')
+
+  let $thumbnailContainer = $note.find(
+    TIMED_CONTENT_PLAYER_NOTE_SELECTOR + '-thumbnail',
+  )
+  let $thumbnailLink = $note.find(
+    TIMED_CONTENT_PLAYER_NOTE_SELECTOR + '-thumbnail-link',
+  )
+
+  let $playerContainer = $note.find(
+    TIMED_CONTENT_PLAYER_NOTE_SELECTOR + '-player',
+  )
+
+  let $playerFrame = $note.find(
+    TIMED_CONTENT_PLAYER_NOTE_SELECTOR + '-player-frame',
+  )
+  let $closeButton = $note.find(
+    TIMED_CONTENT_PLAYER_NOTE_SELECTOR + '-player-close',
+  )
+
+  let $companionSelector = $note.find(TIMED_COMPANION_SELECTOR_SELECTOR)
+  if ($companionSelector.length > 0) {
+    let $tsLabel = $(note).find(
+      TIMED_COMPANION_SELECTOR_SELECTOR + '-controls-timestamp',
+    )
+    let $addTsButton = $(note).find(
+      TIMED_COMPANION_SELECTOR_SELECTOR + '-controls-button',
+    )
+
+    $inputContainer.on(TIME_UPDATE_EVENT, function (event, ts) {
+      $tsLabel.attr('data-ts', ts)
+      $tsLabel.attr('data-ts-formatted', secondsToLabel(ts))
+      $tsLabel.html('@ ' + secondsToLabel(ts))
+    })
+
+    $addTsButton.on('click', function (event) {
+      event.preventDefault()
+
+      $playerFrame.trigger(PAUSE_EVENT)
+
+      let $repeatableForm = $(this)
+        .closest(PARENT_INPUT_CONTAINER_SELECTOR)
+        .find('> .repeatableForm')
+      let $list = $repeatableForm.find('> ol').first()
+
+      let oldSize = $list.find('li').size()
+      $repeatableForm.find('> .addButtonContainer .addButton').click()
+
+      let checkFormInterval = setInterval(function () {
+        let items = $list.find('li')
+        if (items.size() > oldSize) {
+          clearInterval(checkFormInterval)
+          items
+            .last()
+            .find(OFFSET_LABEL_INPUT_SELECTOR)
+            .val($tsLabel.attr('data-ts-formatted'))
+        }
+      }, 200)
+    })
+
+    $inputContainer.on(
+      'click',
+      '.TimedCompanionJumpToTimeAction',
+      function (event) {
+        event.preventDefault()
+
+        $playerFrame.trigger(SEEK_EVENT, $(this).attr('data-ts'))
+
+        return false
+      },
+    )
+
+    $inputContainer.on('click', '.TimedCompanionSyncAction', function (event) {
+      event.preventDefault()
+
+      $playerFrame.trigger(PAUSE_EVENT)
+
+      // get the formatted timestamp
+      let tsFormatted = $tsLabel.attr('data-ts-formatted')
+
+      // update the the timed companion's input.
+      $(this)
+        .closest('.inputContainer')
+        .find(OFFSET_LABEL_INPUT_SELECTOR)
+        .val(tsFormatted)
+        .trigger('change')
+
+      return false
+    })
+  }
+
+  $closeButton.on('click', function (event) {
+    $playerFrame.trigger(DESTROY_EVENT)
+
+    $playerContainer.hide().find('.frame').empty()
+
+    $thumbnailContainer.show()
+
+    $inputContainer.removeClass(PARENT_INPUT_CONTAINER_SELECTOR.substring(1))
+  })
+
+  $thumbnailLink.on('click', function (event) {
+    event.preventDefault()
+
+    $thumbnailContainer.hide()
+
+    $playerContainer.show()
+
+    $inputContainer.addClass(PARENT_INPUT_CONTAINER_SELECTOR.substring(1))
+
+    return true
+  })
+
+  function secondsToLabel(tsecs) {
+    let secs = tsecs % 60
+    tsecs = Math.floor(tsecs / 60)
+    let mins = tsecs % 60
+    let hrs = Math.floor(tsecs / 60)
+
+    if (secs < 10) {
+      secs = '0' + secs
+    }
+
+    if (hrs > 0) {
+      return hrs + ':' + mins + ':' + secs
+    } else {
+      return mins + ':' + secs
+    }
+  }
+})