Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Replace the label chooser with a new LabelPicker #5684

Draft
wants to merge 18 commits into
base: 6.2
Choose a base branch
from
Draft

Replace the label chooser with a new LabelPicker #5684

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
57c3d59
Include the label id in `Label::render()`
dtdesign Sep 20, 2023
dd1df86
Prototype of a new label picker
dtdesign Sep 21, 2023
7cbeabc
Add support for form elements and disabling the picker
dtdesign Sep 22, 2023
1e6263c
Assign the selected label to the picker
dtdesign Sep 23, 2023
1da30c1
Replace the legacy category binding of label groups
dtdesign Sep 23, 2023
f10cc29
Preserve the label selection on validation errors
dtdesign Sep 28, 2023
b66e4d6
Add the typing for `<woltlab-core-label-picker>`
dtdesign Sep 28, 2023
c36badd
Clean up the label picker
dtdesign Oct 4, 2023
2f837de
Fix the sizing of buttons in menus
dtdesign Oct 5, 2023
fa254c0
Rename `getId()` to `getElementID()`
dtdesign Oct 5, 2023
269452f
Add `LabelPickerGroup` to ease the integration
dtdesign Oct 6, 2023
9b5f921
Add support for custom field names and ids
dtdesign Oct 7, 2023
d650252
Upgrade the `LabelFormField` to use the new picker
dtdesign Oct 7, 2023
bb84eed
Deprecate the legacy label chooser
dtdesign Oct 8, 2023
21514e3
Improve the code logic
dtdesign Oct 9, 2023
ac4f51f
Implement `IteratorAggregate` to delegate iteration of the available …
dtdesign Oct 9, 2023
3689b70
Use `\http_build_query()` and the proper name to build the query string
dtdesign Oct 13, 2023
58d93fe
Use the proper format for the instance number
dtdesign Oct 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 1 addition & 41 deletions com.woltlab.wcf/templates/__labelFormField.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1 @@
<ul class="labelList jsOnly" data-object-id="{@$field->getLabelGroup()->groupID}">
<li class="dropdown labelChooser" data-group-id="{@$field->getLabelGroup()->groupID}">
<div class="dropdownToggle" data-toggle="labelGroup{@$field->getLabelGroup()->groupID}">
<span class="badge label">{lang}wcf.label.none{/lang}</span>
</div>
<div class="dropdownMenu">
<ul class="scrollableDropdownMenu">
{foreach from=$field->getLabelGroup() item=label}
<li data-label-id="{@$label->labelID}">
<span>{@$label->render()}</span>
</li>
{/foreach}
</ul>
</div>
</li>
</ul>

<noscript>
<select name="{$field->getPrefixedId()}[{@$field->getLabelGroup()->groupID}]">
{foreach from=$field->getLabelGroup() item=label}
<option value="{$label->labelID}">{$label->getTitle()}</option>
{/foreach}
</select>
</noscript>

<script data-relocate="true">
require(['Dom/Util', 'Language', 'WoltLabSuite/Core/Form/Builder/Field/Controller/Label'], function(DomUtil, Language, FormBuilderFieldLabel) {
Language.addObject({
'wcf.label.none': '{jslang}wcf.label.none{/jslang}',
'wcf.label.withoutSelection': '{jslang}wcf.label.withoutSelection{/jslang}'
});

new FormBuilderFieldLabel(
'{@$field->getPrefixedId()|encodeJS}',
{if $field->getValue()}'{$field->getValue()|encodeJS}'{else}null{/if},
{
forceSelection: {if $field->getLabelGroup()->forceSelection}true{else}false{/if}
}
);
});
</script>
{@$field->getLabelPicker()->toHtml()}
6 changes: 6 additions & 0 deletions com.woltlab.wcf/templates/__labelPickerGroup.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{foreach from=$labelPickerGroup item=labelPicker}
<dt><label for="{$labelPicker->getElementID()}">{$labelPicker->labelGroup->getTitle()}</label></dt>
<dd>
{@$labelPicker->toHtml()}
</dd>
{/foreach}
1 change: 1 addition & 0 deletions com.woltlab.wcf/templates/__labelSelection.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
{* @deprecated 6.1 Use the new `__labelPickerGroup` template instead. *}
{foreach from=$labelGroups item=labelGroup}
{if $labelGroup|count}
<dt><label>{$labelGroup->getTitle()}</label></dt>
Expand Down
69 changes: 24 additions & 45 deletions com.woltlab.wcf/templates/articleAdd.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@
{/if}

<script data-relocate="true">
require(['Language', 'WoltLabSuite/Core/Ui/User/Search/Input', 'WoltLabSuite/Core/Acp/Ui/Article/InlineEditor'], function(Language, UiUserSearchInput, AcpUiArticleInlineEditor) {
require(['Language', 'WoltLabSuite/Core/Ui/User/Search/Input', 'WoltLabSuite/Core/Acp/Ui/Article/InlineEditor', "WoltLabSuite/Core/Component/Article/LabelPicker"], function(Language, UiUserSearchInput, AcpUiArticleInlineEditor, { setup: setupLabelPicker }) {
Language.addObject({
'wcf.article.convertFromI18n.question': '{jslang}wcf.article.convertFromI18n.question{/jslang}',
'wcf.article.convertFromI18n.description': '{jslang}wcf.article.convertFromI18n.description{/jslang}',
Expand All @@ -108,6 +108,12 @@
redirectUrl: '{link controller='ArticleList'}{/link}'
});
{/if}

setupLabelPicker(new Map([
{implode from=$labelGroupsToCategories key=__labelCategoryID item=labelGroupIDs}
[ {$__labelCategoryID}, [ {implode from=$labelGroupIDs item=labelGroupID}{$labelGroupID}{/implode} ] ],
{/implode}
]));
});
</script>

Expand Down Expand Up @@ -161,46 +167,24 @@
</dl>

{event name='categoryFields'}

{if $labelGroups|count}
{foreach from=$labelGroups item=labelGroup}
{if $labelGroup|count}
<dl{if $errorField == 'label' && $errorType[$labelGroup->groupID]|isset} class="formError"{/if}>
<dt><label>{$labelGroup->getTitle()}</label></dt>
<dd>
<ul class="labelList jsOnly" data-object-id="{@$labelGroup->groupID}">
<li class="dropdown labelChooser" id="labelGroup{@$labelGroup->groupID}" data-group-id="{@$labelGroup->groupID}" data-force-selection="{if $labelGroup->forceSelection}true{else}false{/if}">
<div class="dropdownToggle" data-toggle="labelGroup{@$labelGroup->groupID}"><span class="badge label">{lang}wcf.label.none{/lang}</span></div>
<div class="dropdownMenu">
<ul class="scrollableDropdownMenu">
{foreach from=$labelGroup item=label}
<li data-label-id="{@$label->labelID}"><span>{@$label->render()}</span></li>
{/foreach}
</ul>
</div>
</li>
</ul>
<noscript>
<select name="labelIDs[{@$labelGroup->groupID}]">
{foreach from=$labelGroup item=label}
<option value="{$label->labelID}">{$label->getTitle()}</option>
{/foreach}
</select>
</noscript>
{if $errorField == 'label' && $errorType[$labelGroup->groupID]|isset}
<small class="innerError">
{if $errorType[$labelGroup->groupID] == 'missing'}
{lang}wcf.label.error.missing{/lang}
{else}
{lang}wcf.label.error.invalid{/lang}
{/if}
</small>

{foreach from=$labelPickerGroup item=labelPicker}
<dl>
<dt><label for="{$labelPicker->getElementID()}">{$labelPicker->labelGroup->getTitle()}</label></dt>
<dd>
{@$labelPicker->toHtml()}
{if $errorField == 'label' && $errorType[$labelPicker->labelGroup->groupID]|isset}
<small class="innerError">
{if $errorType[$labelPicker->labelGroup->groupID] == 'missing'}
{lang}wcf.label.error.missing{/lang}
{else}
{lang}wcf.label.error.invalid{/lang}
{/if}
</dd>
</dl>
{/if}
{/foreach}
{/if}
</small>
{/if}
</dd>
</dl>
{/foreach}

<dl{if $errorField == 'username'} class="formError"{/if}>
<dt><label for="username">{lang}wcf.acp.article.author{/lang}</label></dt>
Expand Down Expand Up @@ -613,14 +597,9 @@
<script data-relocate="true">
$(function() {
WCF.Language.addObject({
'wcf.label.none': '{jslang}wcf.label.none{/jslang}',
'wcf.global.preview': '{jslang}wcf.global.preview{/jslang}',
});

{if !$labelGroups|empty}
new WCF.Label.ArticleLabelChooser({ {implode from=$labelGroupsToCategories key=__labelCategoryID item=labelGroupIDs}{@$__labelCategoryID}: [ {implode from=$labelGroupIDs item=labelGroupID}{@$labelGroupID}{/implode} ] {/implode} }, { {implode from=$labelIDs key=groupID item=labelID}{@$groupID}: {@$labelID}{/implode} }, '.articleAddForm');
{/if}

new WCF.Message.I18nPreview({
messageFields: [
{if !$isMultilingual}
Expand Down
15 changes: 2 additions & 13 deletions com.woltlab.wcf/templates/articleList.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,32 +24,21 @@
{/capture}

{capture assign='sidebarRight'}
{if !$labelGroups|empty}
{if $labelPickerGroup|count}
<form id="sidebarForm" method="post" action="{link application='wcf' controller=$controllerName object=$controllerObject}{/link}">
<section class="box">
<h2 class="boxTitle">{lang}wcf.label.label{/lang}</h2>

<div class="boxContent">
<dl>
{include file='__labelSelection'}
{include file='__labelPickerGroup'}
</dl>
<div class="formSubmit">
<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s">
</div>
</div>
</section>
</form>

<script data-relocate="true">
$(function() {
WCF.Language.addObject({
'wcf.label.none': '{jslang}wcf.label.none{/jslang}',
'wcf.label.withoutSelection': '{jslang}wcf.label.withoutSelection{/jslang}'
});

new WCF.Label.Chooser({ {implode from=$labelIDs key=groupID item=labelID}{@$groupID}: {@$labelID}{/implode} }, '#sidebarForm', undefined, true);
});
</script>
{/if}
{/capture}

Expand Down
13 changes: 1 addition & 12 deletions com.woltlab.wcf/templates/categoryArticleList.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,25 +36,14 @@

<div class="boxContent">
<dl>
{include file='__labelSelection'}
{include file='__labelPickerGroup'}
</dl>
<div class="formSubmit">
<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s">
</div>
</div>
</section>
</form>

<script data-relocate="true">
$(function() {
WCF.Language.addObject({
'wcf.label.none': '{jslang}wcf.label.none{/jslang}',
'wcf.label.withoutSelection': '{jslang}wcf.label.withoutSelection{/jslang}'
});

new WCF.Label.Chooser({ {implode from=$labelIDs key=groupID item=labelID}{@$groupID}: {@$labelID}{/implode} }, '#sidebarForm', undefined, true);
});
</script>
{/if}
{/capture}

Expand Down
13 changes: 1 addition & 12 deletions com.woltlab.wcf/templates/unreadArticleList.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,25 +17,14 @@

<div class="boxContent">
<dl>
{include file='__labelSelection'}
{include file='__labelPickerGroup'}
</dl>
<div class="formSubmit">
<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s">
</div>
</div>
</section>
</form>

<script data-relocate="true">
$(function() {
WCF.Language.addObject({
'wcf.label.none': '{jslang}wcf.label.none{/jslang}',
'wcf.label.withoutSelection': '{jslang}wcf.label.withoutSelection{/jslang}'
});

new WCF.Label.Chooser({ {implode from=$labelIDs key=groupID item=labelID}{@$groupID}: {@$labelID}{/implode} }, '#sidebarForm', undefined, true);
});
</script>
{/if}
{/capture}

Expand Down
13 changes: 1 addition & 12 deletions com.woltlab.wcf/templates/watchedArticleList.tpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,25 +15,14 @@

<div class="boxContent">
<dl>
{include file='__labelSelection'}
{include file='__labelPickerGroup'}
</dl>
<div class="formSubmit">
<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s">
</div>
</div>
</section>
</form>

<script data-relocate="true">
$(function() {
WCF.Language.addObject({
'wcf.label.none': '{jslang}wcf.label.none{/jslang}',
'wcf.label.withoutSelection': '{jslang}wcf.label.withoutSelection{/jslang}'
});

new WCF.Label.Chooser({ {implode from=$labelIDs key=groupID item=labelID}{@$groupID}: {@$labelID}{/implode} }, '#sidebarForm', undefined, true);
});
</script>
{/if}
{/capture}

Expand Down
46 changes: 46 additions & 0 deletions ts/WoltLabSuite/Core/Component/Article/LabelPicker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
/**
* Toggles the visibility of label groups based on the selected category.
*
* @author Alexander Ebert
* @copyright 2001-2023 WoltLab GmbH
* @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
* @woltlabExcludeBundle all
*/

type CategoryId = number;
type LabelGroupId = number;

function toggleVisibility(showLabelGroupIds: LabelGroupId[] | undefined): void {
if (showLabelGroupIds === undefined) {
showLabelGroupIds = [];
}

document.querySelectorAll("woltlab-core-label-picker").forEach((labelPicker) => {
const groupId = parseInt(labelPicker.dataset.groupId!);
if (showLabelGroupIds!.includes(groupId)) {
labelPicker.disabled = false;
labelPicker.closest("dl")!.hidden = false;
} else {
labelPicker.disabled = true;
labelPicker.closest("dl")!.hidden = true;
}
});
}

export function setup(categoryMapping: Map<CategoryId, LabelGroupId[]>): void {
if (categoryMapping.size === 0) {
return;
}

const categoryId = document.getElementById("categoryID") as HTMLSelectElement;
function updateVisibility() {
const value = parseInt(categoryId.value);
toggleVisibility(categoryMapping.get(value));
}

categoryId.addEventListener("change", () => {
updateVisibility();
});

updateVisibility();
}
Loading
Loading