{"version":3,"file":"bubble_controller-6VCrVW2_.js","sources":["../../../app/javascript/controllers/popup/bubble_controller.js"],"sourcesContent":["import { Controller } from \"@hotwired/stimulus\"\n\nimport { useColorPickerVisibilityControls } from \"../mixins/useColorPickerVisibilityControls\"\nimport {\n  useCenterAlignment,\n  useLeftAlignment,\n  useRightAlignment,\n} from \"../mixins/tools/useAlignment\"\n\nexport default class extends Controller {\n  static values = {\n    textColor: { type: String, default: \"#ffffff\" },\n    backgroundColor: { type: String, default: \"#ffffff\" },\n  }\n\n  static classes = [\"active\", \"inactive\"]\n  static targets = [\n    \"container\",\n    \"activeAlignment\",\n    \"menu\",\n    \"alignmentButton\",\n    \"alignmentInput\",\n    \"textColorPreview\",\n    \"colorPickerControls\",\n    \"colorInput\",\n    \"input\",\n    \"label\",\n    \"colorButton\",\n    \"backgroundButton\",\n    \"backgroundInput\",\n    \"backgroundColorPreview\",\n    \"backgroundPickerControls\",\n    \"backgroundContainer\",\n  ]\n\n  initialize() {\n    this.enableSync = true\n  }\n\n  connect() {\n    useColorPickerVisibilityControls(this, {\n      pickerTarget: this.colorPickerControlsTarget,\n      onColorPickerHide: () => {\n        this.backgroundPickerControlsTarget.classList.add(\"hidden\")\n      },\n    })\n\n    useLeftAlignment(this, {\n      on: this.containerTarget,\n      applyClasses: [\"justify-start\"],\n      removeClasses: [\"justify-end\", \"justify-center\"],\n      afterAlignment: () => this.syncAlignmentTo(\"left\"),\n    })\n\n    useCenterAlignment(this, {\n      on: this.containerTarget,\n      applyClasses: [\"justify-center\"],\n      removeClasses: [\"justify-start\", \"justify-end\"],\n      afterAlignment: () => this.syncAlignmentTo(\"center\"),\n    })\n\n    useRightAlignment(this, {\n      on: this.containerTarget,\n      applyClasses: [\"justify-end\"],\n      removeClasses: [\"justify-start\", \"justify-center\"],\n      afterAlignment: () => this.syncAlignmentTo(\"right\"),\n    })\n  }\n\n  changeAlignmentActiveClassTo(button) {\n    this.alignmentButtonTargets.forEach((alignmentButton) => {\n      if (alignmentButton === button) {\n        alignmentButton.classList.add(\"text-tiger\")\n      } else {\n        alignmentButton.classList.remove(\"text-tiger\")\n      }\n    })\n  }\n\n  sync() {\n    if (!this.enableSync) return\n\n    this.dispatch(\"sync\", {\n      target: this.otherIdenticalElement,\n      detail: this.currentState,\n    })\n  }\n\n  updateInput(e) {\n    this.inputTarget.value = e.currentTarget.innerText.trim()\n    this.dispatch(\"changed\", {\n      detail: {\n        attribute: \"text\",\n        value: this.inputTarget.value,\n      },\n    })\n\n    this.sync()\n  }\n\n  replaceWithSynced({ detail }) {\n    this.enableSync = false\n\n    Promise.resolve()\n      .then(() => {\n        switch (detail.alignmentValue) {\n          case \"left\":\n            this.alignToLeft({\n              currentTarget: this.element.querySelector(\"[data-align='left']\"),\n            })\n            break\n          case \"center\":\n            this.alignToCenter({\n              currentTarget: this.element.querySelector(\n                \"[data-align='center']\"\n              ),\n            })\n            break\n          case \"right\":\n            this.alignToRight({\n              currentTarget: this.element.querySelector(\"[data-align='right']\"),\n            })\n            break\n        }\n\n        this.dispatch(\"color:change\", {\n          target: this.colorPickerControlsTarget,\n          detail: detail.textColor,\n        })\n\n        this.dispatch(\"color:change\", {\n          target: this.backgroundPickerControlsTarget,\n          detail: detail.backgroundColor,\n        })\n\n        this.labelTarget.innerText = this.inputTarget.value = detail.labelValue\n      })\n      .then(() => (this.enableSync = true))\n  }\n\n  toggleBackgroundPickerControls(e) {\n    if (\n      this.backgroundButtonTarget.contains(e.target) === false &&\n      this.backgroundPickerControlsTarget.classList.contains(\"hidden\") === false\n    ) {\n      this.backgroundPickerControlsTarget.classList.add(\"hidden\")\n      return\n    }\n\n    if (\n      this.backgroundPickerControlsTarget.classList.contains(\"hidden\") &&\n      this.backgroundButtonTarget.contains(e.target)\n    ) {\n      this.colorPickerControlsTarget.classList.add(\"hidden\")\n      this.backgroundPickerControlsTarget.classList.remove(\"hidden\")\n    }\n  }\n\n  hidePicker() {\n    this.colorPickerControlsTarget.classList.add(\"hidden\")\n  }\n\n  changeColor(e) {\n    if (this.colorButtonTarget.contains(e.target)) {\n      this.textColorPreviewTarget.style.background = e.detail\n      this.containerTarget.style.color = e.detail\n\n      this.textColorValue = e.detail\n\n      this.colorInputTarget.value = e.detail\n\n      this.dispatch(\"changed\", {\n        detail: {\n          attribute: \"color\",\n          value: this.textColorValue,\n        },\n      })\n    } else {\n      this.backgroundColorPreviewTarget.style.background = e.detail\n      this.backgroundContainerTarget.style.background = e.detail\n\n      this.backgroundColorValue = e.detail\n      this.backgroundInputTarget.value = e.detail\n\n      this.dispatch(\"changed\", {\n        detail: {\n          attribute: \"background_color\",\n          value: this.backgroundColorValue,\n        },\n      })\n    }\n\n    this.sync()\n  }\n\n  // private\n\n  syncAlignmentTo(alignment) {\n    this.changeAlignmentActiveClassTo(\n      this.element.querySelector(`[data-align='${alignment}']`)\n    )\n    this.alignmentInputTarget.value = alignment\n    this.sync()\n\n    this.dispatch(\"changed\", {\n      detail: {\n        attribute: \"alignment\",\n        value: alignment,\n      },\n    })\n  }\n\n  get otherIdenticalElement() {\n    return Array.from(\n      document.querySelectorAll(`[data-controller='popup--bubble dropdown']`)\n    ).find((layoutSection) => layoutSection !== this.element)\n  }\n\n  get currentState() {\n    return {\n      alignmentValue: this.alignmentInputTarget.value,\n      textColor: this.textColorValue,\n      backgroundColor: this.backgroundColorValue,\n      labelValue: this.inputTarget.value,\n    }\n  }\n}\n"],"names":["bubble_controller","Controller","useColorPickerVisibilityControls","useLeftAlignment","useCenterAlignment","useRightAlignment","button","alignmentButton","e","detail","alignment","layoutSection","__publicField"],"mappings":"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"}