Add frontend templates
authorMatthias Schmidt <gravatronics@live.com>
Thu, 2 Aug 2018 16:07:06 +0000 (18:07 +0200)
committerMatthias Schmidt <gravatronics@live.com>
Thu, 2 Aug 2018 16:07:06 +0000 (18:07 +0200)
See #2509

31 files changed:
com.woltlab.wcf/templates/__aclFormField.tpl [new file with mode: 0644]
com.woltlab.wcf/templates/__booleanFormField.tpl [new file with mode: 0644]
com.woltlab.wcf/templates/__dateFormField.tpl [new file with mode: 0644]
com.woltlab.wcf/templates/__dialogForm.tpl [new file with mode: 0644]
com.woltlab.wcf/templates/__form.tpl [new file with mode: 0644]
com.woltlab.wcf/templates/__formContainer.tpl [new file with mode: 0644]
com.woltlab.wcf/templates/__formContainerChildren.tpl [new file with mode: 0644]
com.woltlab.wcf/templates/__formContainerDependencies.tpl [new file with mode: 0644]
com.woltlab.wcf/templates/__formFieldDependencies.tpl [new file with mode: 0644]
com.woltlab.wcf/templates/__formFieldDescription.tpl [new file with mode: 0644]
com.woltlab.wcf/templates/__formFieldError.tpl [new file with mode: 0644]
com.woltlab.wcf/templates/__formFieldErrors.tpl [new file with mode: 0644]
com.woltlab.wcf/templates/__formFieldFooter.tpl [new file with mode: 0644]
com.woltlab.wcf/templates/__formFieldHeader.tpl [new file with mode: 0644]
com.woltlab.wcf/templates/__iconFormField.tpl [new file with mode: 0644]
com.woltlab.wcf/templates/__itemListFormField.tpl [new file with mode: 0644]
com.woltlab.wcf/templates/__multilineTextFormField.tpl [new file with mode: 0644]
com.woltlab.wcf/templates/__multipleSelectionFormField.tpl [new file with mode: 0644]
com.woltlab.wcf/templates/__nonEmptyFormFieldDependency.tpl [new file with mode: 0644]
com.woltlab.wcf/templates/__numericFormField.tpl [new file with mode: 0644]
com.woltlab.wcf/templates/__radioButtonFormField.tpl [new file with mode: 0644]
com.woltlab.wcf/templates/__singleSelectionFormField.tpl [new file with mode: 0644]
com.woltlab.wcf/templates/__tabFormContainer.tpl [new file with mode: 0644]
com.woltlab.wcf/templates/__tabMenuFormContainer.tpl [new file with mode: 0644]
com.woltlab.wcf/templates/__tabTabMenuFormContainer.tpl [new file with mode: 0644]
com.woltlab.wcf/templates/__tagFormField.tpl [new file with mode: 0644]
com.woltlab.wcf/templates/__textFormField.tpl [new file with mode: 0644]
com.woltlab.wcf/templates/__userFormField.tpl [new file with mode: 0644]
com.woltlab.wcf/templates/__usernameFormField.tpl [new file with mode: 0644]
com.woltlab.wcf/templates/__valueFormFieldDependency.tpl [new file with mode: 0644]
com.woltlab.wcf/templates/__wysiwygFormField.tpl [new file with mode: 0644]

diff --git a/com.woltlab.wcf/templates/__aclFormField.tpl b/com.woltlab.wcf/templates/__aclFormField.tpl
new file mode 100644 (file)
index 0000000..16b053d
--- /dev/null
@@ -0,0 +1,9 @@
+{include file='__formFieldHeader'}
+
+{if $includeAclJavaScript}
+       {include file='aclPermissions'}
+{/if}
+
+{include file='aclPermissionJavaScript' containerID=$field->getPrefixedId()|concat:'Container' categoryName=$field->getCategoryName() objectID=$field->getObjectID() objectTypeID=$field->getObjectType()->objectTypeID}
+
+{include file='__formFieldFooter'}
diff --git a/com.woltlab.wcf/templates/__booleanFormField.tpl b/com.woltlab.wcf/templates/__booleanFormField.tpl
new file mode 100644 (file)
index 0000000..da10fb6
--- /dev/null
@@ -0,0 +1,14 @@
+{include file='__formFieldHeader'}
+
+<ol class="flexibleButtonGroup">
+       <li>
+               <input type="radio" id="{@$field->getPrefixedId()}" name="{@$field->getPrefixedId()}" value="1" data-no-input-id="{@$field->getPrefixedId()}_no"{if $field->isAutofocused()} autofocus{/if}{if $field->isRequired()} required{/if}{if $field->isImmutable()} disabled{/if}{if $field->getValue()} checked{/if}>
+               <label for="{@$field->getPrefixedId()}" class="green"><span class="icon icon16 fa-check"></span> {lang}wcf.global.form.boolean.yes{/lang}</label>
+       </li>
+       <li>
+               <input type="radio" id="{@$field->getPrefixedId()}_no" name="{@$field->getPrefixedId()}" value="0" name="{@$field->getPrefixedId()}"{if $field->isImmutable()} disabled{/if}{if !$field->getValue()} checked{/if}>
+               <label for="{@$field->getPrefixedId()}_no" class="red"><span class="icon icon16 fa-times"></span> {lang}wcf.global.form.boolean.no{/lang}</label>
+       </li>
+</ol>
+
+{include file='__formFieldFooter'}
diff --git a/com.woltlab.wcf/templates/__dateFormField.tpl b/com.woltlab.wcf/templates/__dateFormField.tpl
new file mode 100644 (file)
index 0000000..5d19a58
--- /dev/null
@@ -0,0 +1,14 @@
+{include file='__formFieldHeader'}
+
+<input {*
+       *}type="{if $field->supportsTime()}datetime{else}date{/if}"{*
+       *}id="{@$field->getPrefixedId()}" {*
+       *}name="{@$field->getPrefixedId()}" {*
+       *}value="{$field->getValue()}" {*
+       *}class="medium"{*
+       *}{if $field->isAutofocused()} autofocus{/if}{*
+       *}{if $field->isRequired()} required{/if}{*
+       *}{if $field->isImmutable()} disabled{/if}{*
+*}>
+
+{include file='__formFieldFooter'}
diff --git a/com.woltlab.wcf/templates/__dialogForm.tpl b/com.woltlab.wcf/templates/__dialogForm.tpl
new file mode 100644 (file)
index 0000000..a9e70ba
--- /dev/null
@@ -0,0 +1,36 @@
+<script data-relocate="true">
+       {* register form with dependency manager before any form field-related JavaScript code is executed below *}
+       require(['WoltLabSuite/Core/Form/Builder/Field/Dependency/Manager'], function(FormBuilderFieldDependencyManager) {
+               FormBuilderFieldDependencyManager.register('{@$form->getId()}');
+       });
+</script>
+
+{if $form->getAction()}
+       {capture assign='__formStart'}<form method="{@$form->getMethod()}" action="{@$form->getAction()}"{/capture}
+       {assign var='__formEnd' value='</form>'}
+{else}
+       {assign var='__formStart' value='<section'}
+       {assign var='__formEnd' value='</section>'}
+{/if}
+
+{@$__formStart} id="{@$form->getId()}"{if !$form->getClasses()|empty} class="{implode from=$form->getClasses() item='class'}{$class}{/implode}"{/if}{foreach from=$form->getAttributes() key='attributeName' item='attributeValue'} {$attributeName}="{$attributeValue}"{/foreach}>
+       {foreach from=$form item='child'}
+               {if $child->isAvailable()}
+                       {@$child->getHtml()}
+               {/if}
+       {/foreach}
+       
+       <div class="formSubmit">
+               <button class="buttonPrimary">{lang}wcf.global.button.submit{/lang}</button>
+               {if $form->isCancelable()}
+                       <button data-type="cancel">{lang}wcf.global.button.cancel{/lang}</button>
+               {/if}
+       </div>
+{@$__formEnd}
+
+<script data-relocate="true">
+       {* after all dependencies have been added, check them *}
+       require(['WoltLabSuite/Core/Form/Builder/Field/Dependency/Manager'], function(FormBuilderFieldDependencyManager) {
+               FormBuilderFieldDependencyManager.checkDependencies();
+       });
+</script>
diff --git a/com.woltlab.wcf/templates/__form.tpl b/com.woltlab.wcf/templates/__form.tpl
new file mode 100644 (file)
index 0000000..5f50ac2
--- /dev/null
@@ -0,0 +1,26 @@
+<script data-relocate="true">
+       {* register form with dependency manager before any form field-related JavaScript code is executed below *}
+       require(['WoltLabSuite/Core/Form/Builder/Field/Dependency/Manager'], function(FormBuilderFieldDependencyManager) {
+               FormBuilderFieldDependencyManager.register('{@$form->getId()}');
+       });
+</script>
+
+<form method="{@$form->getMethod()}" action="{@$form->getAction()}" id="{@$form->getId()}"{if !$form->getClasses()|empty} class="{implode from=$form->getClasses() item='class'}{$class}{/implode}"{/if}{foreach from=$form->getAttributes() key='attributeName' item='attributeValue'} {$attributeName}="{$attributeValue}"{/foreach}>
+       {foreach from=$form item='child'}
+               {if $child->isAvailable()}
+                       {@$child->getHtml()}
+               {/if}
+       {/foreach}
+       
+       <div class="formSubmit">
+               <input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s">
+               {@SECURITY_TOKEN_INPUT_TAG}
+       </div>
+</form>
+
+<script data-relocate="true">
+       {* after all dependencies have been added, check them *}
+       require(['WoltLabSuite/Core/Form/Builder/Field/Dependency/Manager'], function(FormBuilderFieldDependencyManager) {
+               FormBuilderFieldDependencyManager.checkDependencies();
+       });
+</script>
diff --git a/com.woltlab.wcf/templates/__formContainer.tpl b/com.woltlab.wcf/templates/__formContainer.tpl
new file mode 100644 (file)
index 0000000..9a1a0be
--- /dev/null
@@ -0,0 +1,22 @@
+<section id="{@$container->getPrefixedId()}Container" class="section{foreach from=$container->getClasses() item='class'} {$class}{/foreach}"{foreach from=$container->getAttributes() key='attributeName' item='attributeValue'} {$attributeName}="{$attributeValue}"{/foreach}{if !$container->checkDependencies()} style="display: none;"{/if}>
+       {if $container->getLabel() !== null}
+               {if $container->getDescription() !== null}
+                       <header class="sectionHeader">
+                               <h2 class="sectionTitle">{@$container->getLabel()}</h2>
+                               <p class="sectionDescription">{@$container->getDescription()}</p>
+                       </header>
+               {else}
+                       <h2 class="sectionTitle">{@$container->getLabel()}</h2>
+               {/if}
+       {/if}
+       
+       {include file='__formContainerChildren'}
+</section>
+
+{include file='__formContainerDependencies'}
+
+<script data-relocate="true">
+       require(['WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/Default'], function(DefaultContainerDependency) {
+               new DefaultContainerDependency('{@$container->getPrefixedId()}Container');
+       });
+</script>
diff --git a/com.woltlab.wcf/templates/__formContainerChildren.tpl b/com.woltlab.wcf/templates/__formContainerChildren.tpl
new file mode 100644 (file)
index 0000000..67486e3
--- /dev/null
@@ -0,0 +1,5 @@
+{foreach from=$container item='child'}
+       {if $child->isAvailable()}
+               {@$child->getHtml()}
+       {/if}
+{/foreach}
\ No newline at end of file
diff --git a/com.woltlab.wcf/templates/__formContainerDependencies.tpl b/com.woltlab.wcf/templates/__formContainerDependencies.tpl
new file mode 100644 (file)
index 0000000..20b7a74
--- /dev/null
@@ -0,0 +1,7 @@
+{if !$container->getDependencies()|empty}
+       <script data-relocate="true">
+               {foreach from=$container->getDependencies() item=dependency}
+                       {@$dependency->getHtml()}
+               {/foreach}
+       </script>
+{/if}
diff --git a/com.woltlab.wcf/templates/__formFieldDependencies.tpl b/com.woltlab.wcf/templates/__formFieldDependencies.tpl
new file mode 100644 (file)
index 0000000..c3525c3
--- /dev/null
@@ -0,0 +1,7 @@
+{if !$field->getDependencies()|empty}
+       <script data-relocate="true">
+               {foreach from=$field->getDependencies() item=dependency}
+                       {@$dependency->getHtml()}
+               {/foreach}
+       </script>
+{/if}
diff --git a/com.woltlab.wcf/templates/__formFieldDescription.tpl b/com.woltlab.wcf/templates/__formFieldDescription.tpl
new file mode 100644 (file)
index 0000000..b21aac7
--- /dev/null
@@ -0,0 +1,3 @@
+{if $field->getDescription() !== null}
+       <small>{@$field->getDescription()}</small>
+{/if}
diff --git a/com.woltlab.wcf/templates/__formFieldError.tpl b/com.woltlab.wcf/templates/__formFieldError.tpl
new file mode 100644 (file)
index 0000000..fa9cafc
--- /dev/null
@@ -0,0 +1 @@
+<small class="innerError">{@$error->getMessage()}</small>
diff --git a/com.woltlab.wcf/templates/__formFieldErrors.tpl b/com.woltlab.wcf/templates/__formFieldErrors.tpl
new file mode 100644 (file)
index 0000000..e907273
--- /dev/null
@@ -0,0 +1,3 @@
+{foreach from=$field->getValidationErrors() item='validationError'}
+       {@$validationError->getHtml()}
+{/foreach}
diff --git a/com.woltlab.wcf/templates/__formFieldFooter.tpl b/com.woltlab.wcf/templates/__formFieldFooter.tpl
new file mode 100644 (file)
index 0000000..bb5c687
--- /dev/null
@@ -0,0 +1,5 @@
+               {include file='__formFieldDescription'}
+               {include file='__formFieldErrors'}
+               {include file='__formFieldDependencies'}
+       </dd>
+</dl>
diff --git a/com.woltlab.wcf/templates/__formFieldHeader.tpl b/com.woltlab.wcf/templates/__formFieldHeader.tpl
new file mode 100644 (file)
index 0000000..cc3438f
--- /dev/null
@@ -0,0 +1,3 @@
+<dl id="{@$field->getPrefixedId()}Container" {if !$field->getClasses()|empty} class="{implode from=$field->getClasses() item='class'}{$class}{/implode}"{/if}{foreach from=$field->getAttributes() key='attributeName' item='attributeValue'} {$attributeName}="{$attributeValue}"{/foreach}{if !$field->checkDependencies()} style="display: none;"{/if}>
+       <dt><label for="{@$field->getPrefixedId()}">{@$field->getLabel()}</label></dt>
+       <dd>
diff --git a/com.woltlab.wcf/templates/__iconFormField.tpl b/com.woltlab.wcf/templates/__iconFormField.tpl
new file mode 100644 (file)
index 0000000..033ea6b
--- /dev/null
@@ -0,0 +1,28 @@
+{include file='__formFieldHeader'}
+
+<span{if $field->getValue()} class="icon icon64 fa-{$field->getValue()}"{/if} id="{@$field->getPrefixedId()}_icon"></span>
+<a href="#" class="button small" id="{@$field->getPrefixedId()}_openIconDialog">{lang}wcf.global.button.edit{/lang}</a>
+<input type="hidden" id="{@$field->getPrefixedId()}" name="{@$field->getPrefixedId()}" value="{$field->getValue()}">
+
+{if $__iconFormFieldIncludeJavaScript}
+       {include file='fontAwesomeJavaScript'}
+{/if}
+
+<script data-relocate="true">
+       require(['WoltLabSuite/Core/Ui/Style/FontAwesome'], function(UiStyleFontAwesome) {
+               var button = elById('{@$field->getPrefixedId()}_openIconDialog');
+               var icon = elById('{@$field->getPrefixedId()}_icon');
+               var input = elById('{@$field->getPrefixedId()}');
+               
+               var callback = function(iconName) {
+                       icon.className = 'icon icon64 fa-' + iconName;
+                       input.value = iconName;
+               };
+               
+               button.addEventListener('click', function() {
+                       UiStyleFontAwesome.open(callback);
+               });
+       });
+</script>
+
+{include file='__formFieldFooter'}
diff --git a/com.woltlab.wcf/templates/__itemListFormField.tpl b/com.woltlab.wcf/templates/__itemListFormField.tpl
new file mode 100644 (file)
index 0000000..531e754
--- /dev/null
@@ -0,0 +1,17 @@
+{include file='__formFieldHeader'}
+
+<input type="text" id="{@$field->getPrefixedId()}" name="{@$field->getPrefixedId()}" value="{$field->getValue()}" class="long"{if $field->isAutofocused()} autofocus{/if}{if $field->isImmutable()} disabled{/if}>
+
+<script data-relocate="true">
+       require(['WoltLabSuite/Core/Ui/ItemList/Static'], function(UiItemListStatic) {
+               UiItemListStatic.init(
+                       '{@$field->getPrefixedId()}',
+                       [{if $field->getValue() !== null && !$field->getValue()|empty}{implode from=$field->getValue() item=item}'{@$item|encodeJS}'{/implode}{/if}],
+                       {
+                               submitFieldName: '{@$field->getPrefixedId()}[]'
+                       }
+               );
+       });
+</script>
+
+{include file='__formFieldFooter'}
diff --git a/com.woltlab.wcf/templates/__multilineTextFormField.tpl b/com.woltlab.wcf/templates/__multilineTextFormField.tpl
new file mode 100644 (file)
index 0000000..06f07ae
--- /dev/null
@@ -0,0 +1,9 @@
+{include file='__formFieldHeader'}
+
+<textarea id="{@$field->getPrefixedId()}" name="{@$field->getPrefixedId()}" rows="{@$field->getRows()}"{if $field->isAutofocused()} autofocus{/if}{if $field->isRequired()} required{/if}{if $field->isImmutable()} disabled{/if}{if $field->getMinimumLength() !== null} minlength="{$field->getMinimumLength()}"{/if}{if $field->getMaximumLength() !== null} maxlength="{$field->getMaximumLength()}"{/if}{if $field->getPlaceholder() !== null} placeholder="{$field->getPlaceholder()}"{/if}">{$field->getValue()}</textarea>
+
+{if $field->isI18n()}
+       {include file='multipleLanguageInputJavascript'}
+{/if}
+
+{include file='__formFieldFooter'}
diff --git a/com.woltlab.wcf/templates/__multipleSelectionFormField.tpl b/com.woltlab.wcf/templates/__multipleSelectionFormField.tpl
new file mode 100644 (file)
index 0000000..ef57341
--- /dev/null
@@ -0,0 +1,33 @@
+{include file='__formFieldHeader'}
+
+{if $field->isFilterable()}
+       <script data-relocate="true">
+               require(['Language', 'WoltLabSuite/Core/Ui/ItemList/Filter'], function(Language, UiItemListFilter) {
+                       Language.addObject({
+                               'wcf.global.filter.button.visibility': '{lang}wcf.global.filter.button.visibility{/lang}',
+                               'wcf.global.filter.button.clear': '{lang}wcf.global.filter.button.clear{/lang}',
+                               'wcf.global.filter.error.noMatches': '{lang}wcf.global.filter.error.noMatches{/lang}',
+                               'wcf.global.filter.placeholder': '{lang}wcf.global.filter.placeholder{/lang}',
+                               'wcf.global.filter.visibility.activeOnly': '{lang}wcf.global.filter.visibility.activeOnly{/lang}',
+                               'wcf.global.filter.visibility.highlightActive': '{lang}wcf.global.filter.visibility.highlightActive{/lang}',
+                               'wcf.global.filter.visibility.showAll': '{lang}wcf.global.filter.visibility.showAll{/lang}'
+                       });
+                       
+                       new UiItemListFilter('{@$field->getPrefixedId()}_list');
+               });
+       </script>
+       
+       <ul class="scrollableCheckboxList" id="{@$field->getPrefixedId()}_list">
+               {foreach from=$field->getNestedOptions() item=__fieldNestedOption}
+                       <li{if $__fieldNestedOption[depth] > 0} style="padding-left: {$__fieldNestedOption[depth]*20}px"{/if}>
+                               <label><input type="checkbox" name="{@$field->getPrefixedId()}[]" value="{$__fieldNestedOption[value]}"{if $field->getValue() !== null && $__fieldNestedOption[value]|in_array:$field->getValue()} checked{/if}> {@$__fieldNestedOption[label]}</label>
+                       </li>
+               {/foreach}
+       </ul>
+{else}
+       <select id="{@$field->getPrefixedId()}" name="{@$field->getPrefixedId()}">
+               {htmlOptions options=$field->getOptions() selected=$field->getValue() disableEncoding=true}
+       </select>
+{/if}
+
+{include file='__formFieldFooter'}
diff --git a/com.woltlab.wcf/templates/__nonEmptyFormFieldDependency.tpl b/com.woltlab.wcf/templates/__nonEmptyFormFieldDependency.tpl
new file mode 100644 (file)
index 0000000..1d119dd
--- /dev/null
@@ -0,0 +1,7 @@
+require(['WoltLabSuite/Core/Form/Builder/Field/Dependency/NonEmpty'], function(NonEmptyFieldDependency) {
+       // dependency '{@$dependency->getId()}'
+       new NonEmptyFieldDependency(
+               '{@$dependency->getDependentNode()->getPrefixedId()}Container',
+               '{@$dependency->getField()->getPrefixedId()}'
+       );
+});
diff --git a/com.woltlab.wcf/templates/__numericFormField.tpl b/com.woltlab.wcf/templates/__numericFormField.tpl
new file mode 100644 (file)
index 0000000..685f7fd
--- /dev/null
@@ -0,0 +1,26 @@
+{include file='__formFieldHeader'}
+
+{if $field->getSuffix() !== null}
+       <div class="inputAddon">
+{/if}
+
+<input type="number" {*
+       *}step="{@$field->getStep()}" {*
+       *}id="{@$field->getPrefixedId()}" {*
+       *}name="{@$field->getPrefixedId()}" {*
+       *}value="{$field->getValue()}" {*
+       *}class="short"{*
+       *}{if $field->isAutofocused()} autofocus{/if}{*
+       *}{if $field->isRequired()} required{/if}{*
+       *}{if $field->isImmutable()} disabled{/if}{*
+       *}{if $field->getMinimum() !== null} min="{$field->getMinimum()}"{/if}{*
+       *}{if $field->getMaximum() !== null} max="{$field->getMaximum()}"{/if}{*
+       *}{if $field->getPlaceholder() !== null} placeholder="{$field->getPlaceholder()}"{/if}{*
+*}>
+
+{if $field->getSuffix() !== null}
+               <span class="inputSuffix">{@$field->getSuffix()}</span>
+       </div>
+{/if}
+
+{include file='__formFieldFooter'}
diff --git a/com.woltlab.wcf/templates/__radioButtonFormField.tpl b/com.woltlab.wcf/templates/__radioButtonFormField.tpl
new file mode 100644 (file)
index 0000000..0a8b701
--- /dev/null
@@ -0,0 +1,7 @@
+{include file='__formFieldHeader'}
+
+{foreach from=$field->getOptions() key=$__fieldValue item=__fieldLabel}
+       <label><input type="radio" name="{@$field->getPrefixedId()}" value="{$__fieldValue}"{if $field->getValue() === $__fieldValue} checked{/if}> {@$__fieldLabel}</label>
+{/foreach}
+
+{include file='__formFieldFooter'}
diff --git a/com.woltlab.wcf/templates/__singleSelectionFormField.tpl b/com.woltlab.wcf/templates/__singleSelectionFormField.tpl
new file mode 100644 (file)
index 0000000..adcd054
--- /dev/null
@@ -0,0 +1,35 @@
+{include file='__formFieldHeader'}
+
+{if $field->isFilterable()}
+       <script data-relocate="true">
+               require(['Language', 'WoltLabSuite/Core/Ui/ItemList/Filter'], function(Language, UiItemListFilter) {
+                       Language.addObject({
+                               'wcf.global.filter.button.visibility': '{lang}wcf.global.filter.button.visibility{/lang}',
+                               'wcf.global.filter.button.clear': '{lang}wcf.global.filter.button.clear{/lang}',
+                               'wcf.global.filter.error.noMatches': '{lang}wcf.global.filter.error.noMatches{/lang}',
+                               'wcf.global.filter.placeholder': '{lang}wcf.global.filter.placeholder{/lang}',
+                               'wcf.global.filter.visibility.activeOnly': '{lang}wcf.global.filter.visibility.activeOnly{/lang}',
+                               'wcf.global.filter.visibility.highlightActive': '{lang}wcf.global.filter.visibility.highlightActive{/lang}',
+                               'wcf.global.filter.visibility.showAll': '{lang}wcf.global.filter.visibility.showAll{/lang}'
+                       });
+                       
+                       new UiItemListFilter('{@$field->getPrefixedId()}_list');
+               });
+       </script>
+       
+       <ul class="scrollableCheckboxList" id="{@$field->getPrefixedId()}_list">
+               {foreach from=$field->getNestedOptions() item=__fieldNestedOption}
+                       <li{if $__fieldNestedOption[depth] > 0} style="padding-left: {$__fieldNestedOption[depth]*20}px"{/if}>
+                               <label><input type="radio" name="{@$field->getPrefixedId()}" value="{$__fieldNestedOption[value]}"{if $field->getValue() === $__fieldNestedOption[value]} checked{/if}> {@$__fieldNestedOption[label]}</label>
+                       </li>
+               {/foreach}
+       </ul>
+{else}
+       <select id="{@$field->getPrefixedId()}" name="{@$field->getPrefixedId()}">
+               {foreach from=$field->getNestedOptions() item=__fieldNestedOption}
+                       <option name="{@$field->getPrefixedId()}" value="{$__fieldNestedOption[value]}"{if $field->getValue() === $__fieldNestedOption[value]} selected{/if}>{@'&nbsp;'|str_repeat:$__fieldNestedOption[depth] * 4}{@$__fieldNestedOption[label]}</option>
+               {/foreach}
+       </select>
+{/if}
+
+{include file='__formFieldFooter'}
diff --git a/com.woltlab.wcf/templates/__tabFormContainer.tpl b/com.woltlab.wcf/templates/__tabFormContainer.tpl
new file mode 100644 (file)
index 0000000..179eadf
--- /dev/null
@@ -0,0 +1,11 @@
+<div id="{@$container->getPrefixedId()}Container" class="tabMenuContent{foreach from=$container->getClasses() item='class'} {$class}{/foreach}"{foreach from=$container->getAttributes() key='attributeName' item='attributeValue'} {$attributeName}="{$attributeValue}"{/foreach}{if !$container->checkDependencies()} style="display: none;"{/if}>
+       {include file='__formContainerChildren'}
+</div>
+
+{include file='__formContainerDependencies'}
+
+<script data-relocate="true">
+       require(['WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/Tab'], function(TabContainerDependency) {
+               new TabContainerDependency('{@$container->getPrefixedId()}Container');
+       });
+</script>
diff --git a/com.woltlab.wcf/templates/__tabMenuFormContainer.tpl b/com.woltlab.wcf/templates/__tabMenuFormContainer.tpl
new file mode 100644 (file)
index 0000000..f8f3e15
--- /dev/null
@@ -0,0 +1,22 @@
+<div id="{@$container->getPrefixedId()}Container" class="section tabMenuContainer{foreach from=$container->getClasses() item='class'} {$class}{/foreach}"{foreach from=$container->getAttributes() key='attributeName' item='attributeValue'} {$attributeName}="{$attributeValue}"{/foreach}{if !$container->checkDependencies()} style="display: none;"{/if}{if !$container->checkDependencies()} style="display: none;"{/if}>
+       <nav class="tabMenu">
+               <ul>
+                       {foreach from=$container item='child'}
+                               {if $child->isAvailable()}
+                                       {assign var='__tabMenuFormContainerChildId' value=$child->getPrefixedId()|concat:'Container'}
+                                       <li{if !$child->checkDependencies()} style="display: none;"{/if}><a href="{@$__wcf->getAnchor($__tabMenuFormContainerChildId)}">{@$child->getLabel()}</a></li>
+                               {/if}
+                       {/foreach}
+               </ul>
+       </nav>
+       
+       {include file='__formContainerChildren'}
+</div>
+
+{include file='__formContainerDependencies'}
+
+<script data-relocate="true">
+       require(['WoltLabSuite/Core/Form/Builder/Field/Dependency/Container/TabMenu'], function(TabMenuContainerDependency) {
+               new TabMenuContainerDependency('{@$container->getPrefixedId()}Container');
+       });
+</script>
diff --git a/com.woltlab.wcf/templates/__tabTabMenuFormContainer.tpl b/com.woltlab.wcf/templates/__tabTabMenuFormContainer.tpl
new file mode 100644 (file)
index 0000000..a181463
--- /dev/null
@@ -0,0 +1,16 @@
+<div id="{@$container->getPrefixedId()}Container" class="tabMenuContainer tabMenuContent{foreach from=$container->getClasses() item='class'} {$class}{/foreach}"{foreach from=$container->getAttributes() key='attributeName' item='attributeValue'} {$attributeName}="{$attributeValue}"{/foreach}>
+       <nav class="menu">
+               <ul>
+                       {foreach from=$container item='child'}
+                               {if $child->isAvailable()}
+                                       {assign var='__tabMenuFormContainerChildId' value=$child->getPrefixedId()|concat:'Container'}
+                                       <li{if !$child->checkDependencies()} style="display: none;"{/if}><a href="{@$__wcf->getAnchor($__tabMenuFormContainerChildId)}">{@$child->getLabel()}</a></li>
+                               {/if}
+                       {/foreach}
+               </ul>
+       </nav>
+       
+       {include file='__formContainerChildren'}
+</div>
+
+{include file='__formContainerDependencies'}
diff --git a/com.woltlab.wcf/templates/__tagFormField.tpl b/com.woltlab.wcf/templates/__tagFormField.tpl
new file mode 100644 (file)
index 0000000..1b0f6c7
--- /dev/null
@@ -0,0 +1,21 @@
+{include file='__formFieldHeader'}
+
+<input id="{@$field->getPrefixedId()}" type="text" value="" class="long">
+
+<script data-relocate="true">
+       require(['WoltLabSuite/Core/Ui/ItemList'], function(UiItemList) {
+               UiItemList.init(
+                       '{@$field->getPrefixedId()}',
+                       [{if $field->getValue() !== null && !$field->getValue()|empty}{implode from=$field->getValue() item=tag}'{@$tag|encodeJS}'{/implode}{/if}],
+                       {
+                               ajax: {
+                                       className: 'wcf\\data\\tag\\TagAction'
+                               },
+                               maxLength: {@TAGGING_MAX_TAG_LENGTH},
+                               submitFieldName: '{@$field->getPrefixedId()}[]'
+                       }
+               );
+       });
+</script>
+
+{include file='__formFieldFooter'}
diff --git a/com.woltlab.wcf/templates/__textFormField.tpl b/com.woltlab.wcf/templates/__textFormField.tpl
new file mode 100644 (file)
index 0000000..0669131
--- /dev/null
@@ -0,0 +1,20 @@
+{include file='__formFieldHeader'}
+
+<input type="text" {*
+       *}id="{@$field->getPrefixedId()}" {*
+       *}name="{@$field->getPrefixedId()}" {*
+       *}value="{if !$field->isI18n() || !$field->hasI18nValues()}{$field->getValue()}{/if}" {*
+       *}class="long"{*
+       *}{if $field->isAutofocused()} autofocus{/if}{*
+       *}{if $field->isRequired()} required{/if}{*
+       *}{if $field->isImmutable()} disabled{/if}{*
+       *}{if $field->getMinimumLength() !== null} minlength="{$field->getMinimumLength()}"{/if}{*
+       *}{if $field->getMaximumLength() !== null} maxlength="{$field->getMaximumLength()}"{/if}{*
+       *}{if $field->getPlaceholder() !== null} placeholder="{$field->getPlaceholder()}"{/if}{*
+*}>
+
+{if $field->isI18n()}
+       {include file='multipleLanguageInputJavascript'}
+{/if}
+
+{include file='__formFieldFooter'}
diff --git a/com.woltlab.wcf/templates/__userFormField.tpl b/com.woltlab.wcf/templates/__userFormField.tpl
new file mode 100644 (file)
index 0000000..8247c94
--- /dev/null
@@ -0,0 +1,22 @@
+{include file='__formFieldHeader'}
+
+<input type="text" {*
+       *}id="{@$field->getPrefixedId()}" {*
+       *}name="{@$field->getPrefixedId()}" {*
+       *}value="{if $field->allowsMultiple()}{if $field->getValue()|is_array}{implode from=$field->getValue() item=username}{$username}{/implode}{/if}{else}{$field->getValue()}{/if}" {*
+       *}class="long"{*
+       *}{if $field->isAutofocused()} autofocus{/if}{*
+       *}{if $field->isImmutable()} disabled{/if}{*
+*}>
+
+<script data-relocate="true">
+       require(['WoltLabSuite/Core/Ui/ItemList/User'], function(UiItemListUser) {
+               UiItemListUser.init('{@$field->getPrefixedId()}', {
+                       {if $field->getMaximumMultiples() !== -1}
+                               maxItems: {@$field->getMaximumMultiples()}
+                       {/if}
+               });
+       });
+</script>
+
+{include file='__formFieldFooter'}
diff --git a/com.woltlab.wcf/templates/__usernameFormField.tpl b/com.woltlab.wcf/templates/__usernameFormField.tpl
new file mode 100644 (file)
index 0000000..4e502ab
--- /dev/null
@@ -0,0 +1,16 @@
+{include file='__formFieldHeader'}
+
+<input type="text" {*
+       *}id="{@$field->getPrefixedId()}" {*
+       *}name="{@$field->getPrefixedId()}" {*
+       *}value="{$field->getValue()}" {*
+       *}class="long"{*
+       *}{if $field->isAutofocused()} autofocus{/if}{*
+       *}{if $field->isRequired()} required{/if}{*
+       *}{if $field->isImmutable()} disabled{/if}{*
+       *}{if $field->getMinimumLength() !== null} minlength="{$field->getMinimumLength()}"{/if}{*
+       *}{if $field->getMaximumLength() !== null} maxlength="{$field->getMaximumLength()}"{/if}{*
+       *}{if $field->getPlaceholder() !== null} placeholder="{$field->getPlaceholder()}"{/if}{*
+*}>
+
+{include file='__formFieldFooter'}
diff --git a/com.woltlab.wcf/templates/__valueFormFieldDependency.tpl b/com.woltlab.wcf/templates/__valueFormFieldDependency.tpl
new file mode 100644 (file)
index 0000000..71a63f7
--- /dev/null
@@ -0,0 +1,8 @@
+require(['WoltLabSuite/Core/Form/Builder/Field/Dependency/Value'], function(ValueFieldDependency) {
+       // dependency '{@$dependency->getId()}'
+       new ValueFieldDependency(
+               '{@$dependency->getDependentNode()->getPrefixedId()}Container',
+               '{@$dependency->getField()->getPrefixedId()}'
+       ).values([ {implode from=$dependency->getValues() item=dependencyValue}'{$dependencyValue|encodeJS}'{/implode} ])
+       .negate({if $dependency->isNegated()}true{else}false{/if});
+});
diff --git a/com.woltlab.wcf/templates/__wysiwygFormField.tpl b/com.woltlab.wcf/templates/__wysiwygFormField.tpl
new file mode 100644 (file)
index 0000000..1716bac
--- /dev/null
@@ -0,0 +1,18 @@
+{include file='__formFieldHeader'}
+
+<textarea
+       id="{@$field->getPrefixedId()}"
+       name="{@$field->getPrefixedId()}"
+       class="wysiwygTextarea"
+       data-disable-attachments="true"
+       {if $field->getAutosaveId() !== null}
+               data-autosave="{@$field->getAutosaveId()}"
+               {if $field->getLastEditTime() !== 0}
+                       data-autosave-last-edit-time="{@$field->getLastEditTime()}"
+               {/if}
+       {/if}
+>{$field->getValue()}</textarea>
+
+{include file='wysiwyg' wysiwygSelector=$field->getPrefixedId()}
+
+{include file='__formFieldFooter'}