Centralised select template.

assets/less/main.less

@@ -40,6 +40,7 @@ body {
     font: 12px/20px @mio-font-regular;
     color: var(--text-colour);
     background-attachment: fixed;
+    background-position: center center;
 
     &__wrapper {
         max-width: var(--site-max-width);

public/profile.php

@@ -190,11 +190,11 @@ switch ($mode) {
                     }
 
                     if (!empty($_FILES['background'])) {
-                        if (!empty($_POST['background']['delete'])) {
+                        if ((int)($_POST['background']['attach'] ?? -1) === 0) {
                             user_background_delete($userId);
                             user_background_set_settings($userId, MSZ_USER_BACKGROUND_ATTACHMENT_NONE);
                         } else {
-                            if (!$perms['edit_avatar']) {
+                            if (!$perms['edit_background']) {
                                 $notices[] = MSZ_TMP_USER_ERROR_STRINGS['background']['not-allowed'];
                             } elseif (!empty($_FILES['background'])
                                 && is_array($_FILES['background'])) {
@@ -228,8 +228,8 @@ switch ($mode) {
                                     }
                                 }
 
-                                $backgroundSettings = in_array($_POST['background']['attach'] ?? '', MSZ_USER_BACKGROUND_ATTACHMENTS_NAMES)
+                                $backgroundSettings = in_array($_POST['background']['attach'] ?? '', MSZ_USER_BACKGROUND_ATTACHMENTS)
-                                    ? array_flip(MSZ_USER_BACKGROUND_ATTACHMENTS_NAMES)[$_POST['background']['attach']]
+                                    ? (int)($_POST['background']['attach'])
                                     : MSZ_USER_BACKGROUND_ATTACHMENTS[0];
 
                                 if (!empty($_POST['background']['attr']['blend'])) {

templates/_layout/input.twig

@@ -80,3 +80,28 @@
     </label>
 {% endspaceless %}
 {% endmacro %}
+
+{% macro input_select_option(value, key, selected) %}
+{% spaceless %}
+    <option{% if key|length > 0 %} value="{{ key }}"{% endif %}{% if selected %} selected{% endif %}>
+        {{ value }}
+    </option>
+{% endspaceless %}
+{% endmacro %}
+
+{% macro input_select(name, options, selected, value_name, key_name, only_values, class, attributes) %}
+{% from _self import input_select_option %}
+{% spaceless %}
+    <select class="input__select{{ class|length > 0 ? ' ' ~ class : '' }}"
+        {% if name|length > 0 %}name="{{ name }}"{% endif %}
+        {% for name, value in attributes|default([]) %}
+            {{ name }}{% if value|length > 0 %}="{{ value }}"{% endif %}
+        {% endfor %}>
+        {% for key, value in options %}
+            {% set option_value = value_name|length > 0 ? value[value_name] : value %}
+            {% set option_key = only_values ? '' : (key_name|length > 0 ? value[key_name] : key) %}
+            {{ input_select_option(option_value, option_key, option_key|default(option_value) == selected) }}
+        {% endfor %}
+    </select>
+{% endspaceless %}
+{% endmacro %}

templates/manage/changelog/change_edit.twig

@@ -1,6 +1,6 @@
 {% extends 'manage/changelog/master.twig' %}
 {% from 'macros.twig' import container_title %}
-{% from '_layout/input.twig' import input_csrf, input_text %}
+{% from '_layout/input.twig' import input_csrf, input_text, input_select %}
 
 {% if edit_change is defined %}
     {% set site_link = '/changelog.php?c=' ~ edit_change.change_id %}
@@ -30,13 +30,7 @@
             <label class="form__label">
                 <div class="form__label__text">Action</div>
                 <div class="form__label__input">
-                    <select name="change[action]" class="input input--select">
+                    {{ input_select('change[action]', changelog_actions, edit_change.action_id|default(0), 'action_name', 'action_id') }}
-                        {% for action in changelog_actions %}
-                            <option value="{{ action.action_id }}"{% if edit_change is defined and action.action_id == edit_change.action_id %} selected{% endif %}>
-                                {{ action.action_name }}
-                            </option>
-                        {% endfor %}
-                    </select>
                 </div>
             </label>
 
@@ -63,23 +57,15 @@
             {{ container_title('Tags') }}
 
             {% if edit_change_assigned_tags|length > 0 %}
-                <form class="container" method="post" action="" style="display:inline-block">
+                <form method="post" action="" style="display:inline-block">
                     <label class="form__label">
                         <div class="form__label__text">Assigned Tags</div>
                         <div class="form__label__input">
-                            <select name="remove_tag" class="input input--select">
+                            {{ input_select('remove_tag', edit_change_assigned_tags, '', 'tag_name', 'tag_id') }}
-                                {% for tag in edit_change_assigned_tags %}
-                                    <option value="{{ tag.tag_id }}">
-                                        {{ tag.tag_name }}
-                                    </option>
-                                {% endfor %}
-                            </select>
                         </div>
                     </label>
 
-                    <div>
                     <button class="input__button" name="csrf" value="{{ csrf_token('changelog_add') }}">Remove</button>
-                    </div>
                 </form>
             {% endif %}
 
@@ -88,19 +74,11 @@
                     <label class="form__label">
                         <div class="form__label__text">Available Tags</div>
                         <div class="form__label__input">
-                            <select name="add_tag" class="input input--select">
+                            {{ input_select('add_tag', edit_change_available_tags, '', 'tag_name', 'tag_id') }}
-                                {% for tag in edit_change_available_tags %}
-                                    <option value="{{ tag.tag_id }}">
-                                        {{ tag.tag_name }}
-                                    </option>
-                                {% endfor %}
-                            </select>
                         </div>
                     </label>
 
-                    <div>
                     <button class="input__button" name="csrf" value="{{ csrf_token('changelog_add') }}">Add</button>
-                    </div>
                 </form>
             {% endif %}
         {% endif %}

templates/manage/forum/forum.twig

@@ -1,7 +1,7 @@
 {% extends 'manage/users/master.twig' %}
 {% from 'macros.twig' import container_title %}
 {% from 'manage/macros.twig' import permissions_table %}
-{% from '_layout/input.twig' import input_hidden, input_csrf %}
+{% from '_layout/input.twig' import input_hidden, input_csrf, input_select %}
 
 {% block manage_content %}
     <div class="container">
@@ -11,11 +11,7 @@
             <form action="" method="get">
                 {{ input_hidden('v', 'forumperms') }}
                 {{ input_hidden('f', forum.forum_id) }}
-                <select name="r" class="input__select">
+                {{ input_select('r', roles, '', 'role_name', 'role_id') }}
-                    {% for role in roles %}
-                        <option value="{{ role.role_id }}">{{ role.role_name }}</option>
-                    {% endfor %}
-                </select>
                 <button class="input__button">Manage permissions</button>
             </form>
         </div>

templates/manage/news/post.twig

@@ -1,6 +1,6 @@
 {% extends 'manage/news/master.twig' %}
 {% from 'macros.twig' import container_title %}
-{% from '_layout/input.twig' import input_hidden, input_csrf, input_text, input_checkbox %}
+{% from '_layout/input.twig' import input_hidden, input_csrf, input_text, input_checkbox, input_select %}
 
 {% set is_new = post|length < 1 %}
 
@@ -19,13 +19,7 @@
 
             <tr>
                 <td>Category</td>
-                <td>
+                <td>{{ input_select('post[category]', categories, post.category_id|default(0), 'category_name', 'category_id') }}</td>
-                    <select name="post[category]" class="input__select">
-                        {% for category in categories %}
-                            <option value="{{ category.category_id }}" {% if category.category_id == post.category_id|default(0) %}selected{% endif %}>{{ category.category_name }}</option>
-                        {% endfor %}
-                    </select>
-                </td>
             </tr>
 
             <tr>

templates/manage/users/view.twig

@@ -1,7 +1,7 @@
 {% extends 'manage/users/master.twig' %}
 {% from 'macros.twig' import container_title %}
 {% from 'manage/macros.twig' import permissions_table %}
-{% from '_layout/input.twig' import input_csrf, input_text, input_checkbox, input_file %}
+{% from '_layout/input.twig' import input_csrf, input_text, input_checkbox, input_file, input_select %}
 
 {% set site_link = '/profile.php?u=' ~ view_user.user_id %}
 
@@ -155,20 +155,13 @@
         {% if has_roles|length > 0 %}
             <form method="post" action="" class="container">
                 {{ container_title('Manage Roles') }}
-
-                <div class="container__content">
                 {{ input_csrf('users_edit') }}
 
+                <div class="container__content">
                     <label class="form__label">
                         <div class="form__label__text">Has Roles</div>
                         <div class="form__label__input">
-                            <select name="manage_roles[role]" class="input__select">
+                            {{ input_select('manage_roles[role]', has_roles, view_user.display_role, 'role_name', 'role_id') }}
-                                {% for role in has_roles %}
-                                    <option value="{{ role.role_id }}"{% if role.role_id == view_user.display_role %} selected{% endif %}>
-                                        {{ role.role_name }}
-                                    </option>
-                                {% endfor %}
-                            </select>
                         </div>
                     </label>
 
@@ -181,22 +174,17 @@
         {% if available_roles|length > 0 %}
             <form method="post" action="" class="container">
                 {{ container_title('Add role') }}
+                {{ input_csrf('users_edit') }}
 
                 <div class="container__content">
                     <label class="form__label">
                         <div class="form__label__text">Available Roles</div>
                         <div class="form__label__input">
-                            <select name="add_role[role]" class="input__select">
+                            {{ input_select('add_role[role]', available_roles, '', 'role_name', 'role_id') }}
-                                {% for role in available_roles %}
-                                    <option value="{{ role.role_id }}">
-                                        {{ role.role_name }}
-                                    </option>
-                                {% endfor %}
-                            </select>
                         </div>
                     </label>
 
-                    <button class="input__button" name="csrf" value="{{ csrf_token('users_edit') }}">Add</button>
+                    <button class="input__button">Add</button>
                 </div>
             </form>
         {% endif %}

templates/user/listing.twig

@@ -1,5 +1,6 @@
 {% extends 'user/master.twig' %}
 {% from 'macros.twig' import pagination, container_title %}
+{% from '_layout/input.twig' import input_select %}
 {% from 'user/macros.twig' import user_card %}
 
 {% set canonical_url = '/members.php'|url_construct({
@@ -22,36 +23,9 @@
         {{ container_title('Member Listing') }}
 
         <div class="userlist__selection">
-            <select class="input__select" name="r"
+            {{ input_select('r', roles, role.role_id, 'role_name', 'role_id') }}
-                style="{{ role.role_colour|html_colour('color') }}">
+            {{ input_select('ss', order_fields, order_field, 'title') }}
-                {% for r in roles %}
+            {{ input_select('sd', order_directions, order_direction) }}
-                    <option
-                        value="{{ r.role_id }}"
-                        style="{{ r.role_colour|html_colour('color') }}"
-                        {% if r.role_id == role.role_id %} selected{% endif %}>
-                        {{ r.role_name }}
-                    </option>
-                {% endfor %}
-            </select>
-
-            <select class="input__select" name="ss">
-                {% for name, info in order_fields %}
-                    <option
-                        value="{{ name }}"
-                        {% if name == order_field %} selected{% endif %}>
-                        {{ info.title }}
-                    </option>
-                {% endfor %}
-            </select>
-
-            <select class="input__select" name="sd">
-                {% for name, title in order_directions %}
-                    <option value="{{ name }}"
-                        {% if name == order_direction %} selected{% endif %}>
-                        {{ title }}
-                    </option>
-                {% endfor %}
-            </select>
 
             <noscript>
                 <button class="input__button">Go</button>

templates/user/profile.twig

@@ -1,6 +1,6 @@
 {% extends 'user/master.twig' %}
 {% from 'macros.twig' import container_title %}
-{% from '_layout/input.twig' import input_hidden, input_csrf, input_text, input_checkbox, input_file, input_file_raw %}
+{% from '_layout/input.twig' import input_hidden, input_csrf, input_text, input_checkbox, input_file, input_file_raw, input_select %}
 
 {% set image = '/profile.php?u=' ~ profile.user_id ~ '&m=avatar' %}
 {% set canonical_url = '/profile.php?u=' ~ profile.user_id %}
@@ -112,15 +112,11 @@
                             <div class="profile__background-settings__content">
                                 {{ input_file('background[file]', '', ['image/png', 'image/jpeg', 'image/gif'], {'id':'background-selection'}) }}
 
-                                <select name="background[attach]" class="input__select" onchange="profileChangeBackgroundAttach(this.value)">
+                                {{ input_checkbox('background[attach]', 'None', true, '', 0, true, {'onchange':'profileChangeBackgroundAttach(this.value)'}) }}
                                 {% for key, value in background_attachments %}
-                                        <option value="{{ value }}"{% if profile.user_background_attachment == key %} selected{% endif %}>
+                                    {{ input_checkbox('background[attach]', value|capitalize, key == profile.user_background_attachment, '', key, true, {'onchange':'profileChangeBackgroundAttach(this.value)'}) }}
-                                            {{ value|capitalize }}
-                                        </option>
                                 {% endfor %}
-                                </select>
 
-                                {{ input_checkbox('background[delete]', 'Delete', false, '', '', false, {'onchange':'profileToggleBackground(this.checked)'}) }}
                                 {{ input_checkbox('background[attr][blend]', 'Blend', profile.user_background_blend, '', '', false, {'onchange':'profileToggleBackgroundAttr(\'blend\', this.checked)'}) }}
                                 {{ input_checkbox('background[attr][slide]', 'Slide', profile.user_background_slide, '', '', false, {'onchange':'profileToggleBackgroundAttr(\'slide\', this.checked)'}) }}
                             </div>
@@ -170,11 +166,7 @@
 
                             <div class="profile__about__content{% if is_editing %} profile__about__content--edit{% endif %}">
                                 {% if is_editing %}
-                                    <select name="about[parser]" class="input__select profile__about__select">
+                                    {{ input_select('about[parser]', constant('MSZ_PARSERS_NAMES'), profile.user_about_parser, '', '', false, 'profile__about__select') }}
-                                        {% for parser, name in constant('MSZ_PARSERS_NAMES') %}
-                                            <option value="{{ parser }}"{% if parser == profile.user_about_parser %} selected{% endif %}>{{ name }}</option>
-                                        {% endfor %}
-                                    </select>
                                     <textarea name="about[text]" class="input__textarea profile__about__editor" id="about-textarea">{{ profile.user_about_content|escape }}</textarea>
                                 {% else %}
                                     {{ profile.user_about_content|escape|parse_text(profile.user_about_parser)|raw }}
@@ -196,7 +188,7 @@
                 if (currentBg != 'initial' && checked) {
                     profilePreviousBackground = currentBg;
                     currentBg = 'initial';
-                } else if (!checked) {
+                } else if (currentBg == 'initial' && !checked) {
                     currentBg = profilePreviousBackground;
                 }
 
@@ -204,20 +196,22 @@
             }
 
             function profileChangeBackgroundAttach(mode) {
-                const modes = [
+                const modes = {
-                    'cover',
+                    1: 'cover',
-                    'stretch',
+                    2: 'stretch',
-                    'tile',
+                    3: 'tile',
-                    'contain',
+                    4: 'contain',
-                ];
+                };
 
-                if (modes.indexOf(mode) < 0)
+                profileToggleBackground(mode == 0);
-                    return;
 
-                for (let i = 0; i < modes.length; i++)
+                for (let i = 1; i <= Object.keys(modes).length; i++)
                     document.body.classList.remove('main--bg-' + modes[i]);
 
-                document.body.classList.add('main--bg-' + mode);
+                if (!modes[mode])
+                    return;
+
+                document.body.classList.add('main--bg-' + modes[mode]);
             }
 
             function profileToggleBackgroundAttr(attr, mode) {