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

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

@@ -1,536 +0,0 @@
-import log from 'loglevel'
-import onFind from './dom/onFind'
-
-const styleElement = document.createElement('style')
-styleElement.className = 'Bridge'
-document.head.appendChild(styleElement)
-const styleSheet = styleElement.sheet
-const logged = {}
-
-function bridge(selectors, className) {
-  if (
-    typeof className !== 'function' &&
-    !className.startsWith('RichTextEditor-')
-  ) {
-    ;(Array.isArray(selectors) ? selectors : [selectors]).forEach(
-      (selector) => {
-        if (selector.indexOf(',') < 0) {
-          styleSheet.insertRule(
-            `${selector}:not(.${className}) { display: none; }`,
-          )
-        }
-      },
-    )
-  }
-
-  onFind(selectors, (element) => {
-    if (typeof className === 'function') {
-      className(element)
-    } else if (!element.classList.contains(className)) {
-      if (!logged[className]) {
-        logged[className] = true
-        log.debug(`Bridged to ${className}`, element)
-      }
-      element.classList.add(className)
-    }
-  })
-}
-
-// ActionBar
-bridge(['.actions', '.buttons'], 'ActionBar')
-
-// Admin
-bridge('.withLeftNav', 'Admin')
-bridge('.withLeftNav > .leftNav', 'Admin-nav')
-bridge('.withLeftNav > .main', 'Admin-main')
-
-// Avatar.
-bridge('.ToolUserAvatar', 'Avatar')
-
-// Badge.
-bridge('.MimeTypeCount', 'Badge')
-
-// Button.
-bridge('.button', 'Button')
-
-// ContentEdit.
-bridge('.contentForm', 'ContentEdit')
-bridge('.ContentFormCreate', 'ContentForm-create')
-bridge('.ContentEdit[data-content-locked-out="true"]', 'is-locked')
-bridge('.contentForm-aside > .widget-publishing', 'ContentEdit-bar')
-bridge('.OverlayProviderSelect', 'ContentEdit-overlayList')
-bridge('.widget-publishingWorkflow', 'ContentEdit-workflow')
-bridge('.widget-publishingPublish', 'ContentEdit-publish')
-bridge('.widget-publishingWorkflowLog', 'ContentEdit-workflowLog')
-bridge(
-  '.widget-publishing > .widget-publishingPublish > button[name="action-publish"]',
-  'ContentEdit-publishButton',
-)
-bridge('.contentForm-main', 'ContentEdit-left')
-bridge('.contentForm-main > .widget-content', 'ContentEdit-main')
-bridge('.contentForm-main > .widget-content > h1', 'ContentEdit-title')
-bridge('.contentForm-aside > .contentWidgets', 'ContentEdit-right')
-bridge('.contentForm-main > .contentWidgets', 'ContentEdit-bottom')
-bridge(
-  [
-    '.ContentEdit-bar > button[name="action-draft"]',
-    '.ContentEdit-bar > button[name="action-newDraft"]',
-  ],
-  'ContentEdit-saveButton',
-)
-bridge(
-  [
-    '.ContentEdit-controls button[name="action-restore"]',
-    '.ContentEdit-controls button[name="action-restore-draft"]',
-  ],
-  'ContentEdit-restoreButton',
-)
-
-// ContentInputGroup.
-bridge(
-  [
-    '.objectInputs:not(.BulkUploadProcessor)',
-    '.SocialPublishContentEditWidget-inputs',
-  ],
-  'CIG',
-)
-
-bridge('form > .inputContainer', 'CIG-row')
-bridge('form > .inputContainer > .inputSmall', 'CIG-small')
-bridge('form > .inputContainer > .inputLabel', 'CIG-label')
-bridge('.cms-contentTools', 'ContentTools')
-
-bridge('.CIG .inputContainer', 'CIG-row')
-bridge(
-  ['.objectInputs-readOnly', '.CIG .inputContainer-readOnly'],
-  'is-readOnly',
-)
-bridge('.CIG .inputContainer-unlabeled', 'is-unlabeled')
-bridge('.CIG .inputLabel', 'CIG-label')
-bridge('.CIG .inputLabel > .icon-object-guide', 'CIG-help')
-bridge('.CIG .inputPending', 'CIG-pending')
-bridge('.CIG .inputUpdated', 'CIG-updated')
-bridge('.CIG .inputNote', 'CIG-note')
-bridge('.CIG .inputSmall', 'CIG-small')
-bridge('.CIG .inputLarge', 'CIG-large')
-
-// ContentSelector.
-bridge('.objectId-select', 'ContentSelector-search')
-bridge('.objectId-edit', 'ContentSelector-edit')
-bridge('.objectId-clear', 'ContentSelector-clear')
-bridge('.objectId-placeholder', 'ContentSelector-placeholder')
-
-// DashboardRow.
-bridge('.dashboard-columns', 'DashboardRow')
-bridge('.dashboard-column', 'DashboardRow-column')
-bridge('.dashboard-widget', 'DashboardRow-cell')
-
-// DashboardWidget.
-bridge('.dashboard-widget > .widget', 'DashboardWidget')
-bridge('.DashboardWidget > h1', 'DashboardWidget-title')
-bridge(
-  [
-    '.DashboardWidget > .scheduledEvents-controls',
-    '.DashboardWidget > .widget-controls',
-    '.DashboardWidget > .widgetControls',
-  ],
-  'DashboardWidget-controls',
-)
-bridge(
-  [
-    '.DashboardWidget > .pagination',
-    '.DashboardWidget .scheduledEvents-datePagination',
-    '.PR > .pagination',
-  ],
-  'DashboardWidget-pagination',
-)
-bridge(
-  [
-    '.DashboardWidget > .widget-filters',
-    '.DashboardWidget > div > .widget-filters',
-    '.DashboardWidget .scheduledEvents-dateDisplay',
-  ],
-  'DashboardWidget-filters',
-)
-
-// DataTable.
-bridge('.table-striped:not(.links)', 'DT')
-
-// DateTimeInput.
-bridge('.calendarButton', 'DateTimeInput')
-
-// FileInput.
-bridge('.UploadChooser', 'FileInput')
-
-// ImageEditor.
-bridge('.imageEditor', 'ImageEditor')
-bridge('.imageEditor-image', 'ImageEditor-main')
-bridge('.imageEditor-aside', 'ImageEditor-aside')
-bridge('.imageEditor-focus', 'ImageEditor-focus')
-bridge('.imageEditor-edit', 'ImageEditor-edit')
-bridge('.imageEditor-adjustment', 'ImageEditor-adjustment')
-bridge('.imageEditor-sizes', 'ImageEditor-sizes')
-bridge('.imageEditor-sizeButton', 'ImageEditor-size')
-bridge('.imageEditor-sizePreview', 'ImageEditor-sizePreview')
-bridge('.imageEditor-sizeLabel', 'ImageEditor-sizeLabel')
-bridge('.imageEditor-resetCrop', 'ImageEditor-sizeReset')
-
-// ThemeBundleEditor.
-bridge('.objectInputs[data-type="com.psddev.theme.Theme"]', 'ThemeBundle')
-bridge(
-  '.objectInputs[data-type="com.psddev.theme.Theme"] .TabBar-item[data-tab="Overrides"]',
-  'ThemeBundle-tabOverrides',
-)
-bridge('[data-field="bundle"] .objectId-edit', 'ThemeBundle-edit')
-bridge(
-  '.Tab[data-tab-class="com.psddev.theme.ThemeFieldsTab"]',
-  'ThemeBundle-inputs',
-)
-
-// InputRow.
-bridge(
-  ['.ContentEditSites-owner', '.ContentEditSites-access', '.widget-urlsItem'],
-  'InputRow',
-)
-
-// Label.
-bridge('.visibilityLabel', 'Label')
-
-// Link.
-bridge('.link', 'Link')
-bridge(
-  [
-    '.link.icon-action-delete',
-    '.link.icon-action-trash',
-    '.link.icon-action-cancel',
-  ],
-  'is-red',
-)
-
-// LinkTable.
-bridge('.links:not(.LinkList)', 'LinkTable')
-
-// Message.
-bridge(['.message', '.message-info', '.embargo-warning'], 'Message')
-bridge(['.message.error', '.message-error', '.embargo-warning'], 'is-error')
-bridge(['.message.warning', '.message-warning'], 'is-warning')
-bridge(['.message.success', '.message-success'], 'is-success')
-bridge('.uploadable .message', 'is-upload')
-bridge('.embargo-emphasis', 'is-emphasis')
-
-// Page.
-bridge('body', 'Page')
-bridge('.hasToolBroadcast', 'is-broadcasting')
-bridge('.noToolUser', 'is-unauthenticated')
-bridge('.toolBroadcast', 'Page-broadcast')
-bridge('.toolHeader', 'Page-header')
-bridge('.toolHeader-hasEnvironment', 'is-env')
-bridge('.toolNav', 'Page-nav')
-bridge('.toolTitle', 'Page-title')
-bridge('.toolSearch', 'Page-search')
-bridge('.toolUserSiteDisplay', 'Page-site')
-bridge('.toolUserAvatarProfile', 'Page-avatar')
-bridge('.toolUserWelcome', 'Page-user')
-bridge('.toolEnv', 'Page-env')
-bridge('.toolContent', 'Page-content')
-bridge('.toolBackground', 'Page-background')
-bridge('.widget-logIn', 'Page-login')
-
-// Popup.
-bridge(['[target="miscSearch"]', '[target="profilePanel"]'], (e) =>
-  e.setAttribute('data-popup-mode', 'noGap fromTop'),
-)
-bridge(['.objectId-select', 'rte2-enhancement-toolbar-change'], (e) =>
-  e.setAttribute('data-popup-mode', 'fromRight'),
-)
-bridge(
-  [
-    '.ContentSelector-create',
-    '.ContentSelector-edit',
-    '.rte2-enhancement-toolbar-edit',
-    'form[target^="objectId-create-"]',
-  ],
-  (e) => e.setAttribute('data-popup-mode', 'noGap fromBottom'),
-)
-bridge('.popup-objectId-edit-heading', 'Popup-heading')
-
-// Repeatable.
-bridge('.repeatableInputs', 'Repeatable')
-bridge('.Repeatable > ul > li', 'Repeatable-item')
-bridge('.Repeatable-item > .repeatableLabel', 'Repeatable-title')
-bridge('.Repeatable > .addButtonContainer', 'Repeatable-controls')
-bridge('.Repeatable-controls > .addButton', 'Repeatable-add')
-
-// RepeatableContentInputGroup.
-bridge('.repeatableForm', 'RCIG')
-bridge('.repeatableForm.addToTop', 'is-addToTop')
-bridge('.repeatableForm-previewable', 'is-previewable')
-bridge(['.repeatableForm > ol', '.repeatableForm > ul'], 'RCIG-list')
-bridge('.RCIG-list > li', 'RCIG-item')
-bridge('.RCIG-item > .repeatableLabel', 'RCIG-title')
-bridge('.RCIG-item > .removeButton', 'RCIG-remove')
-bridge('.RCIG > .addButtonContainer', 'RCIG-controls')
-bridge('.RCIG-controls > .addButton', 'RCIG-add')
-bridge('.RCIG-controls > .addButtonSelectContainer', 'RCIG-addSelect')
-
-// RepeatableContentInputGroup.is-weighted.
-bridge('.repeatableForm-weighted', 'is-weighted')
-bridge('.repeatableForm-weightResetButton', 'RCIG-resetWeights')
-bridge('.repeatableForm-itemWeights', 'RCIG-weightBar')
-bridge('.repeatableForm-itemWeight', 'RCIG-weightBarItem')
-bridge('.repeatableForm-itemWeight-marker', 'RCIG-weightBarMarker')
-bridge('.repeatableForm-itemWeightHandle', 'RCIG-weightBarHandle')
-bridge('.repeatableLabel-weightLabel', 'RCIG-weightLabel')
-bridge('.repeatableLabel-color', 'RCIG-weightColor')
-
-// RepeatableContentSelector.
-bridge(['.repeatableObjectId', '.repeatableDropdown'], 'RCS')
-bridge('.repeatableObjectId.addToTop', 'is-addToTop')
-bridge(
-  [
-    '.repeatableObjectId > ol',
-    '.repeatableObjectId > ul',
-    '.repeatableDropdown > ol',
-    '.repeatableDropdown > ul',
-  ],
-  'RCS-list',
-)
-bridge('.RCS-list > li', 'RCS-item')
-bridge('.RCS-item > .removeButton', 'RCS-remove')
-bridge(
-  [
-    '.repeatableObjectId > .addButtonContainer',
-    '.repeatableDropdown > .addButtonContainer',
-  ],
-  'RCS-controls',
-)
-bridge('.RCS-controls > .addButton', 'RCS-add')
-
-// RepeatableTextInput.
-bridge('.repeatableText', 'RTI')
-bridge(['.repeatableText > ol', '.repeatableText > ul'], 'RTI-list')
-bridge('.RTI-list > li > .removeButton', 'RTI-remove')
-bridge('.repeatableText > .addButtonContainer', 'RTI-add')
-
-// SearchInput.
-bridge('.searchInput', 'SearchInput')
-bridge(
-  ['.Admin-nav .SearchInput', '.Popup[name="siteSwitch"] .SearchInput'],
-  'is-filter',
-)
-
-// SearchResult.
-bridge('.searchResult-container', 'SearchResult')
-bridge('.searchResult-view', 'SearchResult-view')
-bridge('.searchResult-views', 'SearchResult-views')
-bridge('.searchResult-items', 'SearchResult-items')
-bridge('.searchResult-pagination', 'SearchResult-pagination')
-bridge('.searchResult-fields', 'SearchResult-fields')
-bridge('.searchResult-sorts', 'SearchResult-sorts')
-bridge('.searchResult-list', 'SearchResult-list')
-bridge('.searchResult-mixed', 'SearchResult-mixed')
-bridge('.searchResult-images', 'SearchResult-images')
-bridge('.searchResult-selectionReset', 'SearchResult-selectionReset')
-bridge('.searchResult-actions', 'SearchResult-actions')
-bridge('.searchResult-actions-body', 'SearchResult-actions-body')
-bridge('.searchResult-action-simple', 'SearchResult-action')
-
-// SearchResult: classes also applied to Query field
-bridge('.searchPagination', 'SearchResult-pagination')
-bridge('.searchSorter', 'SearchResult-sorts')
-bridge('.searchResultImages', 'SearchResult-images')
-bridge('.searchResultList', 'SearchResult-items')
-bridge('.queryRestrictions', 'SearchResult-query')
-
-// Site Search Term Analytics
-bridge('.Popup[name="siteSearchTermAnalyticsPage"]', 'SiteSearchTermAnalytics')
-bridge(
-  '.Popup[name="siteSearchTermAnalyticsPage"] .Widget-controls',
-  'SiteSearchTermAnalytics-controls',
-)
-bridge(
-  '.Popup[name="siteSearchTermAnalyticsPage"] .pagination',
-  'SiteSearchTermAnalytics-results',
-)
-
-// QueryField.
-bridge('.queryField', 'QueryField')
-bridge('.queryField_frame', 'QueryField-frame')
-bridge('.queryField_frame .searchControls', 'QueryField-searchControls')
-bridge('.queryField_frame .searchForm', 'QueryField-searchForm')
-
-// SearchWidget.
-bridge(
-  ['.widget[name="searchAdvancedFull"]', '.Widget[name="searchAdvancedFull"]'],
-  'SearchWidget',
-)
-bridge('.SearchWidget[name="miscSearch"]', 'is-global')
-bridge('.SearchWidget > h1', 'SearchWidget-title')
-bridge('.widget-queryField > h1', 'SearchWidget-title')
-bridge('.searchForm', 'SearchWidget-form')
-bridge('.searchHistory', 'SearchWidget-history')
-bridge('.searchRecent', 'SearchWidget-recent')
-bridge('.searchSaved', 'SearchWidget-saved')
-bridge('.searchFilters', 'SearchWidget-controls')
-bridge('.searchFilters .searchInput', 'SearchWidget-query')
-bridge('.searchFiltersType', 'SearchWidget-type')
-bridge(
-  ['.searchFilters > .search-reset', '.searchFilters > .action-cancel'],
-  'SearchWidget-reset',
-)
-bridge('.searchFilter', 'SearchWidget-filter')
-bridge('.searchFilterItem', 'SearchWidget-filterItem')
-bridge('.searchFilter-advancedQuery', 'is-advanced')
-bridge('.searchFilter-date', 'is-date')
-bridge('.searchFilter-record', 'is-record')
-bridge('.searchCreate', 'SearchWidget-create')
-bridge('.searchResult', 'SearchWidget-result')
-bridge('.searchResultTable', 'SearchResult-table')
-
-// SearchWidgetAdvanced.
-bridge('.WidgetSearchAdvancedQuery', 'SearchWidgetAdvanced')
-bridge(
-  '.WidgetSearchAdvancedQuery .fixedScrollable',
-  'SearchWidgetAdvanced-scrollpane',
-)
-
-// StandardForm.
-bridge('.standardForm', 'StandardForm')
-
-// TabBar.
-bridge(['.DashboardTabSelect > ul', '.tabs'], 'TabBar')
-bridge('.TabBar > li:not(.TabBar-menu)', 'TabBar-item')
-
-// TabContainer.
-bridge(['.objectInputs', '.tabbed'], 'TC')
-bridge('.tabbed > [data-tab]', 'TC-panel')
-
-// Taxonomy.
-bridge('.searchResultTaxonomy', 'Taxonomy')
-bridge('.searchResultTaxonomyColumn', 'Taxonomy-column')
-bridge('.searchResultTaxonomyChildren', 'Taxonomy-children')
-bridge('.searchResultTaxonomyExpand', 'Taxonomy-expand')
-
-// TextInput.
-bridge('input.secret', 'is-secret')
-
-// UrlsWidget.
-bridge('.widget-urlsRepeatable', 'UrlsWidget')
-bridge('.widget-urlsItemLabel', 'UrlsWidget-itemLabel')
-
-// Viewers.
-bridge('.EditFieldUpdateViewers', 'Viewers')
-bridge('.EditFieldUpdateViewers-some', 'Viewers-some')
-bridge('.EditFieldUpdateViewers-none', 'Viewers-none')
-bridge('.EditFieldUpdateViewers-viewer', 'Viewers-viewer')
-
-// Week.
-bridge('.calendar-week', 'Week')
-bridge('.Week > .calendarRow', 'Week-row')
-bridge('.Week-row > .calendarDay', 'Week-day')
-bridge('.Week-day > .calendarDayOfWeek', 'Week-dow')
-bridge('.Week-day > .calendarDayOfMonth', 'Week-dom')
-bridge('.Week-row > .calendarCell', 'Week-content')
-
-// Month.
-bridge('.calendar-month', 'Month')
-bridge('.Month > .calendarRow', 'Month-row')
-bridge('.Month-row > .calendarDay', 'Month-day')
-bridge('.Month-day > .calendarDayOfWeek', 'Month-dow')
-bridge('.Month-day > .calendarDayOfMonth', 'Month-dom')
-
-// Widget or SearchWidget.
-bridge('.Popup-content > .frame.loaded', (element) => {
-  for (const c of element.children) {
-    if (c.classList.contains('Widget')) {
-      return
-    } else if (c.classList.contains('widget')) {
-      c.classList.add('Widget')
-      return
-    }
-  }
-
-  const name = element.getAttribute('name')
-  element.classList.add(
-    name === 'miscSearch' ||
-      (name.startsWith('objectId-') && name.endsWith('-select'))
-      ? 'SearchWidget'
-      : 'Widget',
-  )
-})
-
-// Video Editor.
-if (!window.DISABLE_VIDEO_EDITOR_UI) {
-  bridge(
-    '[data-type="brightspot.elemental.AwsElementalVideoProvider"]',
-    'VideoEditor',
-  )
-  bridge(
-    '[data-type="brightspot.elemental.AwsElementalVideoInputWrapper"]',
-    'VideoEditor-fileContainer',
-  )
-  bridge(
-    '[data-type="brightspot.elemental.AwsElementalImageOverlayWrapper"]',
-    'VideoEditor-InputOverlay',
-  )
-  bridge(
-    '.VideoEditor-fileContainer .filePreview > div:first-child',
-    'FilePreview-actions',
-  )
-  bridge(
-    '.CIG-row[data-field-name="colorCorrector"]',
-    'VideoEditor-InputColors',
-  )
-  bridge(
-    '[data-type="brightspot.elemental.AwsElementalColorCorrector"]',
-    'VideoEditor-InputColors-group',
-  )
-}
-
-// Widget.
-bridge(
-  [
-    '.Admin .widget',
-    '.ContentEdit-bottom .widget',
-    '.ContentEdit-left .widget',
-    '.ContentEdit-right .widget:not(.widget-publishing)',
-    '.Page-content > .widget:not([name="searchAdvancedFull"])',
-    '.Popup-content > .frame.loaded:not(.Widget):not(.SearchWidget) > .widget',
-  ],
-  'Widget',
-)
-bridge(
-  [
-    '.Widget > h1:not(.ContentEdit-title)',
-    '.Admin-main > .Widget > h2',
-    '.Admin-nav > .Widget > h2',
-    '.Page-content > .Widget > h2:not(.BuildInformation-resources)',
-    '.Popup-content .Widget > h2',
-  ],
-  'Widget-title',
-)
-bridge(
-  ['.Widget > .widget-controls', '.Widget > .widgetControls'],
-  'Widget-controls',
-)
-
-bridge('.CommunityWidget .widget-filters', 'CommunityWidget-filters')
-
-// PaginatedResult
-bridge('.PR > .widget-filters', 'PR-filters')
-bridge('.PR > .pagination', 'PR-pagination')
-
-// Wordcount
-bridge('.inputWordCount', 'CIG-wordCount')
-
-// Mapping legacy jquery toggleable APIs to the web component APIs.
-$.plugin2('toggleable', {
-  change: function () {
-    this.$caller[0].dispatchEvent(new Event('change'))
-    return this.$caller
-  },
-  toggle: function () {
-    this.$caller[0].dispatchEvent(new Event('change'))
-    return this.$caller
-  },
-})

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

@@ -1,22 +0,0 @@
-import onFind from './dom/onFind'
-
-// Manages "toggle on"/"toggle off" tooltips
-onFind(
-  [
-    '.ContentEdit-left input[type="checkbox"]',
-    '.SearchWidget-filter input[type="checkbox"]',
-  ],
-  (checkbox) => {
-    const updateTooltip = () => {
-      checkbox.setAttribute(
-        'title',
-        checkbox.checked
-          ? window.BRIGHTSPOT?.ui.tooltips.toggleOff
-          : window.BRIGHTSPOT?.ui.tooltips.toggleOn,
-      )
-    }
-
-    updateTooltip()
-    checkbox.addEventListener('change', updateTooltip)
-  },
-)

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

@@ -1,5 +0,0 @@
-import onFindOnce from './dom/onFindOnce'
-
-onFindOnce('input.color', async () => {
-  await import(/* webpackChunkName: 'CISpectrum', */ './ColorInputSpectrum')
-})

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

@@ -1,107 +0,0 @@
-import onVisible from './dom/onVisible'
-import 'spectrum-colorpicker'
-
-if (!window.BRIGHTSPOT?.ui.cms.enableV5UI) {
-  await import('./ColorInputSpectrum.less')
-}
-
-const setColorAttributes = ($input, color) => {
-  const $preview = $input.next('.sp-replacer').find('.sp-preview')
-
-  if (color) {
-    $preview.attr('data-color', color)
-  } else {
-    $preview.removeAttr('data-color')
-    const placeholder = $input.prop('placeholder')
-    color = (placeholder?.startsWith('#') && placeholder) || 'transparent'
-  }
-
-  $preview.find('.sp-preview-inner').css('background-color', color)
-}
-
-let idIndex = 0
-onVisible('btu-input > input[type="text"].color', (input) => {
-  const $input = $(input)
-  const update = () => $input.spectrum('reflow')
-
-  $input.spectrum({
-    allowEmpty: true,
-    cancelText: 'Cancel',
-    chooseText: 'OK',
-    clickoutFiresChange: false,
-    palette: (window.THEME_BUNDLE_COLOR_SWATCHES || []).map((s) => s.color),
-    preferredFormat: 'hex6',
-    showInitial: false,
-    showInput: true,
-    showPalette: true,
-
-    show: function () {
-      const zIndex =
-        Number.parseInt(
-          this.closest('.Popup')
-            ? this.closest('.Popup').style.zIndex
-            : '100007',
-        ) + 1
-      $input.spectrum('container').css('z-index', zIndex)
-      window.addEventListener('resize', update, true)
-      window.addEventListener('scroll', update, true)
-      setColorAttributes($input, $input.val())
-    },
-
-    hide: function () {
-      window.removeEventListener('resize', update)
-      window.removeEventListener('scroll', update)
-      setColorAttributes($input, $input.val())
-    },
-
-    change: function (color) {
-      setColorAttributes($input, color)
-      $input[0].dispatchEvent(new Event('change', { bubbles: true }))
-    },
-
-    move: function (color) {
-      setColorAttributes($input, color)
-    },
-  })
-
-  $input
-    .next('.sp-replacer')
-    .find('.sp-preview')
-    .attr('data-placeholder', $input.prop('placeholder'))
-
-  setColorAttributes($input, $input.val())
-
-  $input.on('placeholderUpdate', () => {
-    const $preview = $input.next('.sp-replacer').find('.sp-preview')
-    $preview.attr('data-placeholder', $input.attr('placeholder'))
-    setColorAttributes($input, $preview.attr('data-color'))
-  })
-
-  const control = input.parentNode?.querySelector(':scope > .sp-replacer')
-  if (!control) return
-  const popoverId = `sp-container-${idIndex++}`
-  const container = $input.spectrum('container')[0]
-  if (!container) return
-  container.id = popoverId
-  control.setAttribute('aria-controls', popoverId)
-  const parentDialog = input.closest('dialog')
-  if (parentDialog) {
-    parentDialog.appendChild(container)
-  }
-})
-
-$(window).on('resize', () => {
-  $(document)
-    .find('input[type="text"].color')
-    .each(function () {
-      var $input = $(this)
-
-      if ($input.spectrum) {
-        if ($input.prop('disabled')) {
-          $input.spectrum('disable')
-        } else {
-          $input.spectrum('enable')
-        }
-      }
-    })
-})