From: Alexander Ebert Date: Sat, 7 Oct 2023 16:17:09 +0000 (+0200) Subject: Upgrade the `LabelFormField` to use the new picker X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=d650252913db675975f719b9bf719cf29d289b04;p=GitHub%2FWoltLab%2FWCF.git Upgrade the `LabelFormField` to use the new picker --- diff --git a/com.woltlab.wcf/templates/__labelFormField.tpl b/com.woltlab.wcf/templates/__labelFormField.tpl index fe67833766..3f1037818b 100644 --- a/com.woltlab.wcf/templates/__labelFormField.tpl +++ b/com.woltlab.wcf/templates/__labelFormField.tpl @@ -1,41 +1 @@ - - - - - +{@$field->getLabelPicker()->toHtml()} diff --git a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/Label.ts b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/Label.ts deleted file mode 100644 index 17ae26ab31..0000000000 --- a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/Label.ts +++ /dev/null @@ -1,129 +0,0 @@ -/** - * Handles the JavaScript part of the label form field. - * - * @author Alexander Ebert, Matthias Schmidt - * @copyright 2001-2020 WoltLab GmbH - * @license GNU Lesser General Public License - * @since 5.2 - */ - -import * as Core from "../../../../Core"; -import * as DomUtil from "../../../../Dom/Util"; -import * as Language from "../../../../Language"; -import UiDropdownSimple from "../../../../Ui/Dropdown/Simple"; -import { LabelFormFieldOptions } from "../../Data"; - -class Label { - protected readonly _formFieldContainer: HTMLElement; - protected readonly _input: HTMLInputElement; - protected readonly _labelChooser: HTMLElement; - protected readonly _options: LabelFormFieldOptions; - - constructor(fieldId: string, labelId: string, options: Partial) { - this._formFieldContainer = document.getElementById(fieldId + "Container")!; - this._labelChooser = this._formFieldContainer.getElementsByClassName("labelChooser")[0] as HTMLElement; - this._options = Core.extend( - { - forceSelection: false, - showWithoutSelection: false, - }, - options, - ) as LabelFormFieldOptions; - - this._input = document.createElement("input"); - this._input.type = "hidden"; - this._input.id = fieldId; - this._input.name = fieldId; - this._input.value = labelId; - this._formFieldContainer.appendChild(this._input); - - const labelChooserId = DomUtil.identify(this._labelChooser); - - // init dropdown - let dropdownMenu = UiDropdownSimple.getDropdownMenu(labelChooserId)!; - if (dropdownMenu === null) { - UiDropdownSimple.init(this._labelChooser.getElementsByClassName("dropdownToggle")[0] as HTMLElement); - dropdownMenu = UiDropdownSimple.getDropdownMenu(labelChooserId)!; - } - - let additionalOptionList: HTMLUListElement | null = null; - if (this._options.showWithoutSelection || !this._options.forceSelection) { - additionalOptionList = document.createElement("ul"); - dropdownMenu.appendChild(additionalOptionList); - - const dropdownDivider = document.createElement("li"); - dropdownDivider.classList.add("dropdownDivider"); - additionalOptionList.appendChild(dropdownDivider); - } - - if (this._options.showWithoutSelection) { - const listItem = document.createElement("li"); - listItem.dataset.labelId = "-1"; - this._blockScroll(listItem); - additionalOptionList!.appendChild(listItem); - - const span = document.createElement("span"); - listItem.appendChild(span); - - const label = document.createElement("span"); - label.classList.add("badge", "label"); - label.innerHTML = Language.get("wcf.label.withoutSelection"); - span.appendChild(label); - } - - if (!this._options.forceSelection) { - const listItem = document.createElement("li"); - listItem.dataset.labelId = "0"; - this._blockScroll(listItem); - additionalOptionList!.appendChild(listItem); - - const span = document.createElement("span"); - listItem.appendChild(span); - - const label = document.createElement("span"); - label.classList.add("badge", "label"); - label.innerHTML = Language.get("wcf.label.none"); - span.appendChild(label); - } - - dropdownMenu.querySelectorAll("li:not(.dropdownDivider)").forEach((listItem: HTMLElement) => { - listItem.addEventListener("click", (ev) => this._click(ev)); - - if (labelId) { - if (listItem.dataset.labelId === labelId) { - this._selectLabel(listItem); - } - } - }); - } - - _blockScroll(element: HTMLElement): void { - element.addEventListener("wheel", (ev) => ev.preventDefault(), { - passive: false, - }); - } - - _click(event: Event): void { - event.preventDefault(); - - this._selectLabel(event.currentTarget as HTMLElement); - } - - _selectLabel(label: HTMLElement): void { - // save label - let labelId = label.dataset.labelId; - if (!labelId) { - labelId = "0"; - } - - // replace button with currently selected label - const displayLabel = label.querySelector("span > span")!; - const button = this._labelChooser.querySelector(".dropdownToggle > span")!; - button.className = displayLabel.className; - button.textContent = displayLabel.textContent; - - this._input.value = labelId; - } -} - -export = Label; diff --git a/wcfsetup/install/files/acp/templates/__labelFormField.tpl b/wcfsetup/install/files/acp/templates/__labelFormField.tpl index fe67833766..3f1037818b 100644 --- a/wcfsetup/install/files/acp/templates/__labelFormField.tpl +++ b/wcfsetup/install/files/acp/templates/__labelFormField.tpl @@ -1,41 +1 @@ -
    -
  • -
    - {lang}wcf.label.none{/lang} -
    -
    -
      - {foreach from=$field->getLabelGroup() item=label} -
    • - {@$label->render()} -
      • - {/foreach} -
    -
    -
    • -
- - - - +{@$field->getLabelPicker()->toHtml()} diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/Label.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/Label.js deleted file mode 100644 index 747cb98412..0000000000 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/Label.js +++ /dev/null @@ -1,105 +0,0 @@ -/** - * Handles the JavaScript part of the label form field. - * - * @author Alexander Ebert, Matthias Schmidt - * @copyright 2001-2020 WoltLab GmbH - * @license GNU Lesser General Public License - * @since 5.2 - */ -define(["require", "exports", "tslib", "../../../../Core", "../../../../Dom/Util", "../../../../Language", "../../../../Ui/Dropdown/Simple"], function (require, exports, tslib_1, Core, DomUtil, Language, Simple_1) { - "use strict"; - Core = tslib_1.__importStar(Core); - DomUtil = tslib_1.__importStar(DomUtil); - Language = tslib_1.__importStar(Language); - Simple_1 = tslib_1.__importDefault(Simple_1); - class Label { - _formFieldContainer; - _input; - _labelChooser; - _options; - constructor(fieldId, labelId, options) { - this._formFieldContainer = document.getElementById(fieldId + "Container"); - this._labelChooser = this._formFieldContainer.getElementsByClassName("labelChooser")[0]; - this._options = Core.extend({ - forceSelection: false, - showWithoutSelection: false, - }, options); - this._input = document.createElement("input"); - this._input.type = "hidden"; - this._input.id = fieldId; - this._input.name = fieldId; - this._input.value = labelId; - this._formFieldContainer.appendChild(this._input); - const labelChooserId = DomUtil.identify(this._labelChooser); - // init dropdown - let dropdownMenu = Simple_1.default.getDropdownMenu(labelChooserId); - if (dropdownMenu === null) { - Simple_1.default.init(this._labelChooser.getElementsByClassName("dropdownToggle")[0]); - dropdownMenu = Simple_1.default.getDropdownMenu(labelChooserId); - } - let additionalOptionList = null; - if (this._options.showWithoutSelection || !this._options.forceSelection) { - additionalOptionList = document.createElement("ul"); - dropdownMenu.appendChild(additionalOptionList); - const dropdownDivider = document.createElement("li"); - dropdownDivider.classList.add("dropdownDivider"); - additionalOptionList.appendChild(dropdownDivider); - } - if (this._options.showWithoutSelection) { - const listItem = document.createElement("li"); - listItem.dataset.labelId = "-1"; - this._blockScroll(listItem); - additionalOptionList.appendChild(listItem); - const span = document.createElement("span"); - listItem.appendChild(span); - const label = document.createElement("span"); - label.classList.add("badge", "label"); - label.innerHTML = Language.get("wcf.label.withoutSelection"); - span.appendChild(label); - } - if (!this._options.forceSelection) { - const listItem = document.createElement("li"); - listItem.dataset.labelId = "0"; - this._blockScroll(listItem); - additionalOptionList.appendChild(listItem); - const span = document.createElement("span"); - listItem.appendChild(span); - const label = document.createElement("span"); - label.classList.add("badge", "label"); - label.innerHTML = Language.get("wcf.label.none"); - span.appendChild(label); - } - dropdownMenu.querySelectorAll("li:not(.dropdownDivider)").forEach((listItem) => { - listItem.addEventListener("click", (ev) => this._click(ev)); - if (labelId) { - if (listItem.dataset.labelId === labelId) { - this._selectLabel(listItem); - } - } - }); - } - _blockScroll(element) { - element.addEventListener("wheel", (ev) => ev.preventDefault(), { - passive: false, - }); - } - _click(event) { - event.preventDefault(); - this._selectLabel(event.currentTarget); - } - _selectLabel(label) { - // save label - let labelId = label.dataset.labelId; - if (!labelId) { - labelId = "0"; - } - // replace button with currently selected label - const displayLabel = label.querySelector("span > span"); - const button = this._labelChooser.querySelector(".dropdownToggle > span"); - button.className = displayLabel.className; - button.textContent = displayLabel.textContent; - this._input.value = labelId; - } - } - return Label; -}); diff --git a/wcfsetup/install/files/lib/system/form/builder/field/label/LabelFormField.class.php b/wcfsetup/install/files/lib/system/form/builder/field/label/LabelFormField.class.php index 3f4ff07017..b5502a463b 100644 --- a/wcfsetup/install/files/lib/system/form/builder/field/label/LabelFormField.class.php +++ b/wcfsetup/install/files/lib/system/form/builder/field/label/LabelFormField.class.php @@ -12,6 +12,8 @@ use wcf\system\form\builder\IFormDocument; use wcf\system\form\builder\IObjectTypeFormNode; use wcf\system\form\builder\TObjectTypeFormNode; use wcf\system\label\LabelHandler; +use wcf\system\label\LabelPicker; +use wcf\system\label\LabelPickerGroup; /** * Implementation of a form field to select labels. @@ -36,6 +38,8 @@ final class LabelFormField extends AbstractFormField implements IObjectTypeFormN */ protected $labelGroup; + protected LabelPickerGroup $labelPickerGroup; + /** * @inheritDoc */ @@ -44,23 +48,43 @@ final class LabelFormField extends AbstractFormField implements IObjectTypeFormN /** * loaded labels grouped by label object type and object id to avoid loading the same labels * over and over again for the same object and different label groups - * @var Label[][] + * @var Label[][][] */ protected static $loadedLabels = []; /** * Returns the label group whose labels can be selected via this form field. + */ + public function getLabelGroup(): ViewableLabelGroup + { + return $this->getLabelPicker()->labelGroup; + } + + /** + * Returns the label picker for this field. * - * @return ViewableLabelGroup label group whose labels can be selected - * @throws \BadMethodCallException if no label has been set + * @since 6.1 */ - public function getLabelGroup() + public function getLabelPicker(): LabelPicker { - if ($this->labelGroup === null) { + if (!isset($this->labelPickerGroup)) { throw new \BadMethodCallException("No label group has been set for field '{$this->getId()}'."); } - return $this->labelGroup; + foreach ($this->labelPickerGroup as $labelPicker) { + return $labelPicker; + } + + throw new \RuntimeException("Unreachable"); + } + + #[\Override] + public function getFieldHtml() + { + $this->labelPickerGroup->setName($this->getPrefixedId()); + $this->getLabelPicker()->setElementID($this->getPrefixedId()); + + return parent::getFieldHtml(); } /** @@ -91,6 +115,10 @@ final class LabelFormField extends AbstractFormField implements IObjectTypeFormN public function labelGroup(ViewableLabelGroup $labelGroup) { $this->labelGroup = $labelGroup; + $this->labelPickerGroup = LabelPickerGroup::fromViewableLabelGroups( + [$this->labelGroup], + false, + ); if ($this->label === null) { $this->label($this->getLabelGroup()->getTitle()); @@ -119,12 +147,10 @@ final class LabelFormField extends AbstractFormField implements IObjectTypeFormN static::$loadedLabels[$objectTypeID][$objectID] = $assignedLabels[$objectID] ?? []; } - $labelIDs = $this->getLabelGroup()->getLabelIDs(); - /** @var Label $label */ - foreach (static::$loadedLabels[$objectTypeID][$objectID] as $label) { - if (\in_array($label->labelID, $labelIDs)) { - $this->value($label->labelID); - } + $this->labelPickerGroup->setSelectedLabelsFromAssignedLabels(self::$loadedLabels[$objectTypeID][$objectID]); + foreach ($this->labelPickerGroup as $labelPicker) { + $this->value($labelPicker->getSelectedValue()); + break; } } @@ -163,7 +189,8 @@ final class LabelFormField extends AbstractFormField implements IObjectTypeFormN public function readValue() { if ($this->getDocument()->hasRequestData($this->getPrefixedId())) { - $this->value = \intval($this->getDocument()->getRequestData($this->getPrefixedId())); + $this->labelPickerGroup->setSelectedLabels($this->getDocument()->getRequestData($this->getPrefixedId())); + $this->value = $this->getLabelPicker()->getSelectedValue(); } return $this;