iMattPro/abbc3

{% include 'overall_header.html' %}
{% INCLUDECSS '@vse_abbc3/acp_abbc3.css' %}

<img src="{{ ROOT_PATH }}ext/vse/abbc3/adm/images/abbc3logo.png" alt="{{ lang('ACP_ABBC3_MODULE') }}">
{% set LINK_FAQ = '<a href="https://www.phpbb.com/customise/db/extension/advanced_bbcode_box/faq/1551" target="_blank">' %}
{% set LINK_ME_EXT = '<a href="https://www.phpbb.com/customise/db/extension/mediaembed/" target="_blank">' %}
{% set LINK_ICON = '<i class="icon fa-external-link fa-fw" aria-hidden="true"></i></a>' %}
<p>{{ lang('ABBC3_SETTINGS_EXPLAIN', LINK_FAQ, LINK_ICON) }}</p>

<form id="abbc3_settings" method="post" action="{{ U_ACTION }}" data-ajax="true">
    <fieldset>
        <legend>{{ lang('ABBC3_LEGEND_ICON_BAR') }}</legend>
        <dl>
            <dt><label for="abbc3_bbcode_bar">{{ lang('ABBC3_BBCODE_BAR') ~ lang('COLON') }}</label><br><span>{{ lang('ABBC3_BBCODE_BAR_EXPLAIN') }}</span></dt>
            <dd><label><input type="radio" class="radio" name="abbc3_bbcode_bar" id="abbc3_bbcode_bar" value="1"{% if S_ABBC3_BBCODE_BAR %} checked="checked"{% endif %}> {{ lang('YES') }}</label>
                <label><input type="radio" class="radio" name="abbc3_bbcode_bar" value="0"{% if not S_ABBC3_BBCODE_BAR %} checked="checked"{% endif %}> {{ lang('NO') }}</label></dd>
        </dl>
        <dl>
            <dt><label for="abbc3_icons_type">{{ lang('ABBC3_ICONS_TYPE') ~ lang('COLON') }}</label><br><span>{{ lang('ABBC3_ICONS_TYPE_EXPLAIN') }}</span></dt>
            <dd>
                <select name="abbc3_icons_type" id="abbc3_icons_type">{{ S_ABBC3_ICONS_TYPE }}</select>
                {% for ext in ['png', 'svg'] %}
                    <div class="abbc3-bar abbc3-icons-{{ ext }} hidden">
                        {% for button in ['bold', 'italic', 'underline', 'quote', 'code', 'listb', 'listo', 'listitem', 'img', 'url', 'fontcolor'] %}
                            <span style="background-image:url('{{ ROOT_PATH }}ext/vse/abbc3/images/icons/{{ button }}.{{ ext }}')"></span>
                        {% endfor %}
                    </div>
                {% endfor %}
            </dd>
        </dl>
    </fieldset>
    <fieldset>
        <legend>{{ lang('ABBC3_LEGEND_ADD_ONS') }}</legend>
        <dl>
            <dt><label for="abbc3_qr_bbcodes">{{ lang('ABBC3_QR_BBCODES') ~ lang('COLON') }}</label><br><span>{{ lang('ABBC3_QR_BBCODES_EXPLAIN') }}</span></dt>
            <dd><label><input type="radio" class="radio" name="abbc3_qr_bbcodes" id="abbc3_qr_bbcodes" value="1"{% if S_ABBC3_QR_BBCODES %} checked="checked"{% endif %}> {{ lang('YES') }}</label>
                <label><input type="radio" class="radio" name="abbc3_qr_bbcodes" value="0"{% if not S_ABBC3_QR_BBCODES %} checked="checked"{% endif %}> {{ lang('NO') }}</label></dd>
        </dl>
        <dl>
            <dt><label for="abbc3_pipes">{{ lang('ABBC3_PIPES') ~ lang('COLON') }}</label><br><span>{{ lang('ABBC3_PIPES_EXPLAIN') }}</span></dt>
            <dd><label><input type="radio" class="radio" name="abbc3_pipes" id="abbc3_pipes" value="1"{% if S_ABBC3_PIPES %} checked="checked"{% endif %}> {{ lang('YES') }}</label>
                <label><input type="radio" class="radio" name="abbc3_pipes" value="0"{% if not S_ABBC3_PIPES %} checked="checked"{% endif %}> {{ lang('NO') }}</label></dd>
        </dl>
        <dl>
            <dt><label for="abbc3_auto_video">{{ lang('ABBC3_AUTO_VIDEO') ~ lang('COLON') }}</label><br><span>{{ lang('ABBC3_AUTO_VIDEO_EXPLAIN') }}</span></dt>
            <dd><label><input type="radio" class="radio" name="abbc3_auto_video" id="abbc3_auto_video" value="1"{% if S_ABBC3_AUTO_VIDEO %} checked="checked"{% endif %}> {{ lang('YES') }}</label>
                <label><input type="radio" class="radio" name="abbc3_auto_video" value="0"{% if not S_ABBC3_AUTO_VIDEO %} checked="checked"{% endif %}> {{ lang('NO') }}</label></dd>
        </dl>
        <dl>
            <dt><label>{{ lang('ABBC3_BBVIDEO') ~ lang('COLON') }}</label><br><span>{{ lang('ABBC3_BBVIDEO_EXPLAIN') }}</span></dt>
            <dd><span class="{{ S_ABBC3_MEDIA_EMBED ? 'success' : 'error' }}">{{ lang('ABBC3_MEDIA_EMBED_INSTALL', S_ABBC3_MEDIA_EMBED, LINK_ME_EXT, LINK_ICON) }}</span></dd>
        </dl>
        <dl>
            <dt><label for="abbc3_google_fonts">{{ lang('ABBC3_GOOGLE_FONTS') ~ lang('COLON') }}</label><br><span>{{ lang('ABBC3_GOOGLE_FONTS_INFO') }}{% if not S_ALLOW_CDN %}<br><br>{{ lang('ABBC3_GOOGLE_FONTS_NOTE') }}{% endif %}</span></dt>
            <dd><textarea id="abbc3_google_fonts" cols="40" rows="8" name="abbc3_google_fonts" placeholder="Roboto&#10;Droid Sans&#10;Noto Sans JP">{{ S_ABBC3_GOOGLE_FONTS }}</textarea></dd>
        </dl>
    </fieldset>
    <fieldset class="submit-buttons">
        <input class="button1" type="submit" id="submit" name="submit" value="{{ lang('SUBMIT') }}">&nbsp;
        <input class="button2" type="reset" id="reset" name="reset" value="{{ lang('RESET') }}">
        {{ S_FORM_TOKEN }}
    </fieldset>
</form>

<script>
    const select = document.querySelector("select[name='abbc3_icons_type']");
    document.querySelector(".abbc3-icons-" + select.value).classList.toggle("hidden");
    select.addEventListener("change", () => {
        for (const bar of document.querySelectorAll(".abbc3-bar")) {
            bar.classList.toggle("hidden");
        }
    });
</script>

{% include 'overall_footer.html' %}