{"version":3,"file":"button_controller-CC8TgHCQ.js","sources":["../../../app/javascript/controllers/popup/button_controller.js"],"sourcesContent":["import { Controller } from \"@hotwired/stimulus\"\nimport { useColorPickerVisibilityControls } from \"../mixins/useColorPickerVisibilityControls\"\nimport {\n  useLeftAlignment,\n  useCenterAlignment,\n  useRightAlignment,\n  useFullWidthAlignment,\n} from \"../mixins/tools/useAlignment\"\n\nexport default class extends Controller {\n  static targets = [\n    \"menu\",\n    \"colorPickerControls\",\n    \"backgroundPickerControls\",\n    \"textColorPreview\",\n    \"backgroundColorPreview\",\n    \"container\",\n    \"activeAlignment\",\n    \"alignmentButton\",\n    \"backgroundButton\",\n    \"colorButton\",\n    \"contenteditable\",\n    \"labelInput\",\n  ]\n  static classes = [\"active\", \"inactive\"]\n\n  static values = {\n    textColor: { type: String, default: \"#ffffff\" },\n    backgroundColor: { type: String, default: \"#550AAB\" },\n    alignment: { type: String, default: \"full_width\" },\n  }\n\n  initialize() {\n    this.allowSync = 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: [\"w-fit\", \"self-start\"],\n      removeClasses: [\"self-end\", \"self-center\", \"w-full\"],\n      afterAlignment: () => this.syncAlignmentTo(\"left\"),\n    })\n\n    useRightAlignment(this, {\n      on: this.containerTarget,\n      applyClasses: [\"w-fit\", \"self-end\"],\n      removeClasses: [\"self-start\", \"self-center\", \"w-full\"],\n      afterAlignment: () => this.syncAlignmentTo(\"right\"),\n    })\n\n    useCenterAlignment(this, {\n      on: this.containerTarget,\n      applyClasses: [\"w-fit\", \"self-center\"],\n      removeClasses: [\"self-start\", \"self-end\", \"w-full\"],\n      afterAlignment: () => this.syncAlignmentTo(\"center\"),\n    })\n\n    useFullWidthAlignment(this, {\n      on: this.containerTarget,\n      applyClasses: [\"w-full\"],\n      removeClasses: [\"self-start\", \"self-center\", \"self-end\", \"w-fit\"],\n      afterAlignment: () => this.syncAlignmentTo(\"full_width\"),\n    })\n\n    this.syncAlignment()\n\n    super.connect()\n  }\n\n  syncAlignmentTo(alignment) {\n    this.changeAlignmentActiveClassTo(\n      this.element.querySelector(`[data-align='${alignment}']`)\n    )\n    this.alignmentValue = alignment\n    this.sync()\n\n    this.dispatch(\"changed\", {\n      detail: {\n        attribute: \"alignment\",\n        value: alignment,\n      },\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  toggleToolbar(e) {\n    if (this.menuTarget.contains(e.target)) {\n      return\n    }\n\n    if (this.element.contains(e.target)) {\n      this.menuTarget.classList.toggle(\"hidden\")\n    } else {\n      this.menuTarget.classList.add(\"hidden\")\n    }\n\n    if (this.menuTarget.classList.contains(\"hidden\")) {\n      this.element.classList.add(...this.inactiveClasses)\n      this.element.classList.remove(...this.activeClasses)\n    } else {\n      this.element.classList.remove(...this.inactiveClasses)\n      this.element.classList.add(...this.activeClasses)\n    }\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.dispatch(\"changed\", {\n        detail: {\n          color: \"color\",\n          value: this.textColorValue,\n        },\n      })\n    } else {\n      this.backgroundColorPreviewTarget.style.background = e.detail\n      this.containerTarget.style.background = e.detail\n\n      this.backgroundColorValue = e.detail\n\n      this.dispatch(\"changed\", {\n        detail: {\n          color: \"background_color\",\n          value: this.backgroundColorValue,\n        },\n      })\n    }\n\n    this.sync()\n  }\n\n  syncLabel(e) {\n    this.labelInputTarget.value = e.target.textContent\n\n    this.dispatch(\"label:sync\", {\n      target: Array.from(\n        document.querySelectorAll(\n          `[data-element-id='${this.element.dataset.elementId}']`\n        )\n      ).find((layoutSection) => layoutSection !== this.element),\n      detail: this.labelInputTarget.value,\n    })\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  syncButtonLabel({ detail: label }) {\n    this.contenteditableTarget.textContent = label\n    this.labelInputTarget.value = label\n  }\n\n  syncGlobalButtonState({ detail }) {\n    if (detail.elementToSyncWith === this.element) return\n\n    this.allowSync = false\n\n    Promise.resolve()\n      .then(() => {\n        this.dispatch(\"color:change\", {\n          target: this.colorPickerControlsTarget,\n          detail: detail.state.textColor,\n        })\n\n        this.dispatch(\"color:change\", {\n          target: this.backgroundPickerControlsTarget,\n          detail: detail.state.backgroundColor,\n        })\n\n        this.alignmentValue = detail.state.alignment\n        this.syncAlignment()\n      })\n      .then(() => (this.allowSync = true))\n  }\n\n  sync() {\n    if (!this.allowSync) return\n\n    this.dispatch(\"sync\", {\n      target: document.documentElement,\n      detail: {\n        elementToSyncWith: this.element,\n        stepId: this.element.dataset.stepId,\n        state: this.currentState,\n      },\n    })\n  }\n\n  // private\n\n  syncAlignment() {\n    switch (this.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(\"[data-align='center']\"),\n        })\n        break\n      case \"right\":\n        this.alignToRight({\n          currentTarget: this.element.querySelector(\"[data-align='right']\"),\n        })\n        break\n      case \"full_width\":\n        this.alignToFullWidth({\n          currentTarget: this.element.querySelector(\n            \"[data-align='full_width']\"\n          ),\n        })\n        break\n    }\n  }\n\n  get currentState() {\n    return {\n      textColor: this.textColorValue,\n      backgroundColor: this.backgroundColorValue,\n      alignment: this.alignmentValue,\n      label: this.labelInputTarget.value,\n    }\n  }\n}\n"],"names":["button_controller","Controller","useColorPickerVisibilityControls","useLeftAlignment","useRightAlignment","useCenterAlignment","useFullWidthAlignment","alignment","button","alignmentButton","e","layoutSection","label","detail","__publicField"],"mappings":"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"}