NDOJ/templates/problem/submit.html

{% extends "base.html" %}

{% block js_media %}
    <script type="text/javascript" src="{{ ACE_URL }}/ace.js"></script>
    {{ form.media.js }}
    {% compress js %}
        <script type="text/javascript">
            $(function () {
                function format(state) {
                    if (!state.id) return state.text; // optgroup
                    return state.text;
                }

                window.previous_template = '';

                function update_language_template() {
                    var source = $('textarea#id_source');
                    if (source.val() == window.previous_template.replace(/\r/g, '') || source.val() == '') {
                        var lang_id = $('#id_language').val();
                        var code = localStorage.getItem('submit:' + $('#id_language').val());

                        function update_submit_area(code) {
                            window.previous_template = code;
                            source.val(code);
                            window.ace_source.getSession().setValue(code);
                        }

                        if (code != null) {
                            update_submit_area(code);
                        } else {
                            $.get('{{ url('language_template_ajax') }}', {
                                id: lang_id
                            }).done(function (template) {
                                update_submit_area(template);
                            });
                        }
                    }
                }

                function makeDisplayData(data) {
                    var site_data = data.attr('data-info');
                    var judge_data = data.attr('data-judge-info');
                    var display_data = site_data || judge_data;
                    return display_data;
                }

                function formatSelection(state) {
                    if (!state.id) return state.text; // optgroup
                    var data = makeDisplayData($("option[data-id=" + state.id + "]"));
                    return "<b>" + state.text + "</b> (" + data + ")";
                }

                // Terrible hack, adapted from https://github.com/select2/select2/issues/4436
                $.fn.select2.amd.define('select2/data/customAdapter', ['select2/results', 'select2/utils'], function (Result, Utils) {
                    RefPresenter = function ($element, options, dataAdapter) {
                        RefPresenter.__super__.constructor.call(this, $element, options, dataAdapter);
                    };
                    Utils.Extend(RefPresenter, Result);
                    RefPresenter.prototype.bind = function (container, $container) {
                        container.on('results:focus', function (params) {
                            var data = makeDisplayData($("option[data-id=" + params.data.id + "]"));
                            $("#result-version-info").text(data);
                        });
                        RefPresenter.__super__.bind.call(this, container, $container);
                    };
                    return RefPresenter;
                });

                var customAdapter = $.fn.select2.amd.require('select2/data/customAdapter');

                $("#id_language").select2({
                    templateResult: format,
                    templateSelection: formatSelection,
                    escapeMarkup: function (m) {
                        return m;
                    },
                    resultsAdapter: customAdapter
                });

                $('#id_language').on('select2:open', function (evt) {
                    var dropdown = $('.select2-dropdown');
                    if (!$('#result-version-info').length)
                        dropdown.append($("<span id=\"result-version-info\">"));
                    dropdown.attr('id', 'language-select2');
                });

                $('#id_judge').on('select2:open', function (evt) {
                    var dropdown = $('.select2-dropdown');
                    $('#result-version-info').remove();
                    dropdown.attr('id', 'judge-select2');
                });

                $('#id_language').change(function () {
                    var lang = $("#id_language").find("option:selected").attr('data-ace');
                    window.ace_source.getSession().setMode("ace/mode/" + lang);
                    update_language_template();
                });

                $('#ace_source').on('ace_load', function (e, editor) {
                    update_language_template();
                    editor.commands.addCommand({
                        name: 'save',
                        bindKey: {win: 'Ctrl-S', mac: 'Command-S'},
                        exec: function () {
                            localStorage.setItem('submit:' + $('#id_language').val(), editor.getSession().getValue());
                        }
                    });
                    editor.getSession().setUseWrapMode(true);
                    editor.setFontSize(14);
                    editor.setPrintMarginColumn(100);
                    editor.focus();
                });

                $(window).resize(function () {
                    $('#ace_source').height(Math.max($(window).height() - 353, 100));
                }).resize();

                $('#problem_submit').submit(function (event) {
                    if ($('#id_source').val().length > 65536) {
                        alert("{{ _('Your source code must contain at most 65536 characters.') }}");
                        event.preventDefault();
                        $('#problem_submit').find(':submit').attr('disabled', false);
                    }
                });
            });
        </script>
    {% endcompress %}
{% endblock %}

{% block media %}
    {{ form.media.css }}
    {% compress css %}
        <style media="screen">
            #submit-wrapper {
                margin-top: 0.7em;
            }

            #submit-wrapper #editor, #submit-wrapper #language {
                margin-top: 4px;
            }

            #id_language {
                width: 100%;
            }

            #result-version-info {
                border-bottom: 1px solid rgb(148, 148, 148);
                margin: 0px 1em;
                color: #757575;
                font-weight: 600;
                padding: 0.2em 0;
                text-align: right;
            }

            #language-select2 .select2-results__message {
                white-space: nowrap
            }

            #language-select2 .select2-dropdown--above {
                display: flex;
                flex-direction: column-reverse;
            }

            #language-select2 .select2-results__option {
                color: #757575 !important;
                background: white !important;
            }

            #language-select2 .select2-results__option--highlighted {
                text-decoration: underline;
            }

            #language-select2 .select2-results__option[aria-selected=true] {
                font-weight: bold;
                color: black !important;
            }

            #language-select2 .select2-results__option {
                padding: 4px 0px;
            }

            #language-select2 .select2-results__options {
                overflow-y: visible !important;
            }

            #language-select2 .select2-results__option {
                break-inside: avoid-column;
            }

            #language-select2 .select2-results {
                -webkit-columns: 10 7em;
                -moz-columns: 10 7em;
                columns: 10 7em;
                padding-left: 1.5em;
                padding-top: 0.5em;
            }
        </style>
    {% endcompress %}
{% endblock %}

{% block body %}
    <br>
    {% if not no_judges %}
        {% if default_lang not in form.fields.language.queryset %}
            <div class="alert alert-warning alert-dismissable">
                <a class="close">x</a>
                {% trans trimmed default_language=default_lang.name %}
                    <b>Warning!</b> Your default language, <b>{{ default_language }}</b>,
                    is unavailable for this problem and has been deselected.
                {% endtrans %}
            </div>
        {% endif %}

        {% if request.in_contest and submission_limit %}
            {% if submissions_left > 0 %}
                <div class="alert alert-warning alert-dismissable">
                    <a class="close">x</a>
                    {% trans left=submissions_left %}
                        You have {{ left }} submission left
                        {% pluralize %}
                        You have {{ left }} submissions left
                    {% endtrans %}
                </div>
            {% else %}
                <div class="alert alert-warning alert-dismissable">
                    <a class="close">x</a>
                    {{ _('You have 0 submissions left') }}
                </div>
            {% endif %}
        {% endif %}
    {% endif %}

    <form id="problem_submit" action="" method="post" class="form-area">
        {% csrf_token %}
        {{ form.non_field_errors() }}
        <div id="submit-wrapper">
            <div id="editor">
                {{ form.source.errors }}
                {{ form.source }}
            </div>
            {% if not no_judges %}
                <div id="language">
                    {{ form.language.errors }}
                    <div id="language-select">
                        <select id="id_language" name="language">
                            {% for lang in form.fields.language.queryset %}
                                <option value="{{ lang.id }}" data-id="{{ lang.id }}" data-name="{{ lang.name }}"
                                        data-info="{{ lang.info }}" data-ace="{{ lang.ace }}"
                                        data-judge-info="{{ runtime_versions(lang.runtime_versions()) }}"
                                        {% if lang.id == default_lang.id %}selected{% endif %}>{{ lang.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
            {% endif %}
        </div>

        <hr>

        {% if no_judges %}
            <span style="color: red">{{ _('No judge is available for this problem.') }}</span>
        {% else %}
            <div class="submit-bar">
                {{ form.judge }}
                <input type="submit" value="{{ _('Submit!') }}" class="button"
                       {% if request.in_contest and submission_limit and not submissions_left %}disabled{% endif %}>
            </div>
        {% endif %}
    </form>
{% endblock %}