Refactor 3-col-content

django_ace/widgets.py

@@ -66,7 +66,7 @@ class AceWidget(forms.Textarea):
         if self.toolbar:
             toolbar = (
                 '<div style="width: {}" class="django-ace-toolbar">'
-                '<a href="./" class="django-ace-max_min"></a>'
+                '<a href="#" class="django-ace-max_min"></a>'
                 "</div>"
             ).format(self.width)
             html = toolbar + html

judge/views/organization.py

@@ -671,21 +671,13 @@ class OrganizationRequestBaseView(
     LoginRequiredMixin,
     SingleObjectTemplateResponseMixin,
     SingleObjectMixin,
+    AdminOrganizationMixin,
 ):
     model = Organization
     slug_field = "key"
     slug_url_kwarg = "key"
     tab = None
 
-    def get_object(self, queryset=None):
-        organization = super(OrganizationRequestBaseView, self).get_object(queryset)
-        if not (
-            organization.admins.filter(id=self.request.profile.id).exists()
-            or organization.registrant_id == self.request.profile.id
-        ):
-            raise PermissionDenied()
-        return organization
-
     def get_content_title(self):
         return _("Manage join requests")
 

resources/common.js

@@ -386,44 +386,230 @@ function activateBlogBoxOnClick() {
 }
 
 function changeTabParameter(newTab) {
-  const url = new URL(window.location);
+    const url = new URL(window.location);
-  const searchParams = new URLSearchParams(url.search);
+    const searchParams = new URLSearchParams(url.search);
-  searchParams.set('tab', newTab);
+    searchParams.set('tab', newTab);
-  searchParams.delete('page');
+    searchParams.delete('page');
-  url.search = searchParams.toString();
+    url.search = searchParams.toString();
-  return url.href;
+    return url.href;
 }
 
 function submitFormWithParams($form, method) {
-  const currentUrl = new URL(window.location.href);
+    const currentUrl = new URL(window.location.href);
-  const searchParams = new URLSearchParams(currentUrl.search);
+    const searchParams = new URLSearchParams(currentUrl.search);
-  const formData = $form.serialize();
+    const formData = $form.serialize();
 
-  const params = new URLSearchParams(formData);
+    const params = new URLSearchParams(formData);
 
-  if (searchParams.has('tab')) {
+    if (searchParams.has('tab')) {
-    params.set('tab', searchParams.get('tab'));
+        params.set('tab', searchParams.get('tab'));
-  }
+    }
 
-  const fullUrl = currentUrl.pathname + '?' + params.toString();
+    const fullUrl = currentUrl.pathname + '?' + params.toString();
 
-  if (method === "GET") {
+    if (method === "GET") {
-    window.location.href = fullUrl;
+        window.location.href = fullUrl;
-  }
+    }
-  else {
+    else {
-    var $formToSubmit = $('<form>')
+        var $formToSubmit = $('<form>')
-      .attr('action', fullUrl)
+            .attr('action', fullUrl)
-      .attr('method', 'POST')
+            .attr('method', 'POST')
-      .appendTo('body');
+            .appendTo('body');
 
-    $formToSubmit.append($('<input>').attr({
+        $formToSubmit.append($('<input>').attr({
-      type: 'hidden',
+            type: 'hidden',
-      name: 'csrfmiddlewaretoken',
+            name: 'csrfmiddlewaretoken',
-      value: $.cookie('csrftoken')
+            value: $.cookie('csrftoken')
-    }));
+        }));
 
-    $formToSubmit.submit();
+        $formToSubmit.submit();
-  }
+    }
+}
+
+function saveCurrentPageToSessionStorage() {
+    const storageLimit = 5;
+    const sessionStorageKey = 'oj-content-keys';
+
+    let key = `oj-content-${window.location.href}`;
+    let $contentClone = $('body').clone();
+    $contentClone.find('.select2').remove();
+    $contentClone.find('.select2-hidden-accessible').removeClass('select2-hidden-accessible');
+    $contentClone.find('.noUi-base').remove();
+    $contentClone.find('.wmd-button-row').remove();
+
+    let contentData = JSON.stringify({
+        "html": $contentClone.html(),
+        "page": window.page,
+        "has_next_page": window.has_next_page,
+        "scrollOffset": $(window).scrollTop(),
+    });
+
+    let keys = JSON.parse(sessionStorage.getItem(sessionStorageKey)) || [];
+
+    // Remove the existing key if it exists
+    if (keys.includes(key)) {
+        keys = keys.filter(k => k !== key);
+    }
+
+    keys.push(key);
+
+    if (keys.length > storageLimit) {
+        let oldestKey = keys.shift();
+        sessionStorage.removeItem(oldestKey);
+    }
+
+    sessionStorage.setItem(sessionStorageKey, JSON.stringify(keys));
+    sessionStorage.setItem(key, contentData);
+}
+
+function loadPageFromSessionStorage() {
+    let key = `oj-content-${window.location.href}`;
+    let content = sessionStorage.getItem(key);
+    if (content) {    
+        content = JSON.parse(content);
+        $('body').html(content.html);
+        onWindowReady();
+        window.PAGE_FROM_BACK_BUTTON_CACHE = true;
+        setTimeout(() => {
+            $(window).scrollTop(content.scrollOffset - 50);
+        }, 1);
+        window.page = content.page;
+        window.has_next_page = content.has_next_page;
+    }
+}
+
+let currentRequest = null; // Variable to keep track of the current request
+
+function navigateTo(url, reload_container, force_new_page=false) {
+    if (url === '#') return;
+    if (force_new_page) {
+        window.location.href = url;
+        return;
+    }
+
+    if (!reload_container || !$(reload_container).length) {
+       reload_container = "#content";
+    }
+
+    if (currentRequest) {
+        currentRequest.abort();
+    }
+
+    const controller = new AbortController();
+    const signal = controller.signal;
+    currentRequest = controller;
+
+    $(window).off("scroll");
+
+    saveCurrentPageToSessionStorage();
+    replaceLoadingPage(reload_container);
+
+    const toUpdateElements = [
+        "#nav-container",
+        "#js_media",
+        "#media",
+        ".left-sidebar",
+        "#bodyend",
+    ];
+
+    $.ajax({
+        url: url,
+        method: 'GET',
+        dataType: 'html',
+        signal: signal,
+        success: function (data) {
+            let reload_content = $(data).find(reload_container).first();
+            if (!reload_content.length) {
+                reload_container = "#content";
+                reload_content = $(data).find(reload_container).first();
+            }
+
+            if (reload_content.length) {
+                window.history.pushState("", "", url);
+                $(window).scrollTop(0);
+                $("#loading-bar").stop(true, true);
+                $("#loading-bar").hide().css({ width: 0});
+                
+                for (let elem of toUpdateElements) {
+                    $(elem).replaceWith($(data).find(elem).first());
+                }
+
+                $(reload_container).replaceWith(reload_content);
+                
+                $(document).prop('title', $(data).filter('title').text());
+                renderKatex($(reload_container)[0]);
+                onWindowReady();
+                $('.xdsoft_datetimepicker').hide();
+            } else {
+                window.location.href = url;
+            }
+        },
+        error: function (xhr, status, error) {
+            if (status !== 'abort') { // Ignore aborted requests
+                window.location.href = url;
+            }
+        }
+    });
+}
+
+function isEligibleLinkToRegister($e) {
+    if ($e.attr('target') === '_blank') {
+        return false;
+    }
+    if ($e.data('initialized_navigation')) {
+        return false;
+    }
+    const href = $e.attr('href');
+    if (!href) return false;
+    return (
+        href.startsWith('http')
+        || href.startsWith('/')
+        || href.startsWith('#')
+        || href.startsWith('?')
+    );
+};
+
+function replaceLoadingPage(reload_container) {
+    const loadingPage = `
+<div style="height: 80vh; margin: 0; display: flex; align-items: center; justify-content: center; width: 100%; font-size: xx-large;">
+    <i class="fa fa-spinner fa-pulse"></i>
+</div>
+    `;
+    $(reload_container).fadeOut(100, function() {
+        $(this).html(loadingPage).fadeIn(100);
+    });
+}
+
+function registerNavigation() {
+    const containerMap = {
+        '.left-sidebar-item': '.middle-right-content',
+        '.pagination li a': '.middle-content',
+        '.tabs li a': '.middle-content',
+        '#control-panel a': '.middle-content',
+    };
+
+    $.each(containerMap, function(selector, target) {
+        $(selector).each(function() {
+            const href = $(this).attr('href');
+            const force_new_page = $(this).data('force_new_page');
+
+            if (isEligibleLinkToRegister($(this))) {
+                $(this).data('initialized_navigation', true);
+
+                $(this).on('click', function(e) {
+                    e.preventDefault();
+                    let containerSelector = null;
+                    for (let key in containerMap) {
+                        if ($(this).is(key)) {
+                            containerSelector = containerMap[key];
+                            break;
+                        }
+                    }
+                    navigateTo(href, containerSelector, force_new_page);
+                });
+            }
+        });
+    });
 }
 
 function onWindowReady() {
@@ -528,7 +714,7 @@ function onWindowReady() {
         $("#loading-bar").animate({ width: "100%" }, 2000, function() {
             $(this).stop(true, true);
             $(this).hide().css({ width: 0});
-        });    
+        }); 
     });
 
     $('.errorlist').each(function() {
@@ -537,12 +723,13 @@ function onWindowReady() {
     });
     register_all_toggles();
     activateBlogBoxOnClick();
+    registerNavigation();
+    registerPopper($('#nav-lang-icon'), $('#lang-dropdown'));
+    registerPopper($('#user-links'), $('#userlink_dropdown'));
 }
 
 $(function() {
     onWindowReady();
-    registerPopper($('#nav-lang-icon'), $('#lang-dropdown'));
-    registerPopper($('#user-links'), $('#userlink_dropdown'));
     var $nav_list = $('#nav-list');
     $('#navicon').click(function (event) {
         event.stopPropagation();
@@ -582,33 +769,15 @@ $(function() {
         $nav_list.hide();
     });
 
-    $(window).on('beforeunload', function() {
+    $(window).on('beforeunload', saveCurrentPageToSessionStorage);
-        let key = `oj-content-${window.location.href}`;
+    
-        let $contentClone = $('#content').clone();
-        $contentClone.find('.select2').remove();
-        $contentClone.find('.select2-hidden-accessible').removeClass('select2-hidden-accessible');
-        $contentClone.find('.noUi-base').remove();
-        $contentClone.find('.wmd-button-row').remove();
-        sessionStorage.setItem(key, JSON.stringify({
-          "html": $contentClone.html(),
-          "page": window.page,
-          "has_next_page": window.has_next_page,
-          "scrollOffset": $(window).scrollTop(),
-        }));
-    });
     if (window.performance && 
       window.performance.navigation.type 
       === window.performance.navigation.TYPE_BACK_FORWARD) {
-        let key = `oj-content-${window.location.href}`;
+        loadPageFromSessionStorage();
-        let content = sessionStorage.getItem(key);
-        if (content) {    
-            content = JSON.parse(content);
-            $('#content').html(content.html);
-            onWindowReady();
-            window.PAGE_FROM_BACK_BUTTON_CACHE = true;
-            $(window).scrollTop(content.scrollOffset - 100);
-            window.page = content.page;
-            window.has_next_page = content.has_next_page;
-        }
     }
+
+    window.addEventListener('popstate', (e) => {
+        window.location.href = e.currentTarget.location.href;
+    });
 });

templates/base.html

@@ -67,7 +67,7 @@
         }
       </style>
     {% endif %}
-    {% block media %}{% endblock %}
+
     {% if use_darkmode %}
       <link rel="stylesheet" href="{{ static('darkmode.css') }}">
       <link rel="stylesheet" href="{{ static('darkmode-svg.css') }}">
@@ -210,7 +210,7 @@
                 <div class="dropdown-item"><i class="fa fa-gear"></i> {{ _('Settings') }}</div>
               </a>
               {% if request.user.is_impersonate %}
-                <a href="{{ url('impersonate-stop') }}">
+                <a href="{{ url('impersonate-stop') }}" data-force_new_page="1">
                   <div class="dropdown-item"><i class="fa fa-eye"></i> {{_('Stop impersonating')}}</div>
                 </a>
               {% else %}
@@ -261,6 +261,9 @@
       </div>
     {% endif %}
     <div id="page-container">
+      <div id="media">
+        {% block media %}{% endblock %}
+      </div>
       <noscript>
         <div id="noscript">{{ _('This site works best with JavaScript enabled.') }}</div>
       </noscript>
@@ -303,8 +306,9 @@
           });
         </script>
       {% endcompress %}
-
+      <div id="js_media">
-      {% block js_media %}{% endblock %}
+        {% block js_media %}{% endblock %}
+      </div>
       {% if request.in_contest %}
         <script>$(function () {
           if ($("#contest-time-remaining").length) {
@@ -379,10 +383,9 @@
         {{ misc_config.analytics|safe }}
       {% endif %}
 
-      <div id="extra_js">
+      <div id="bodyend">
-        {% block extra_js %}{% endblock %}
+        {% block bodyend %}{% endblock %}
       </div>
-      {% block bodyend %}{% endblock %}
       <script src="{{ static('katex_config.js') }}"></script>
       {% include "katex-load.html" %}
       {% block footer %}

templates/blog/blog.html

@@ -46,8 +46,3 @@
   <hr style="width: 60%; margin:4em auto;">
   {% include "comments/list.html" %}
 {% endblock %}
-
-{% block bodyend %}
-  {{ super() }}
-  {% include "comments/math.html" %}
-{% endblock %}

templates/blog/list.html

@@ -19,7 +19,7 @@
   </style>
 {% endblock %}
 
-{% block three_col_js %}
+{% block js_media %}
   {% include "actionbar/media-js.html" %}
   {% include "feed/feed_js.html" %}
   <script type="text/javascript">

templates/chat/chat.html

@@ -4,8 +4,6 @@
 {% block title_ruler %}{% endblock %}
 {% block title %} {{_('Chat Box')}} {% endblock %}
 {% block js_media %}
-
-  {% include "comments/math.html" %}
   <script type="text/javascript" src="{{ static('event.js') }}"></script>
   <script type="module" src="https://unpkg.com/emoji-picker-element@1"></script>
   {% compress js %}
@@ -41,11 +39,12 @@
 
       return receiver;
     }
-    let message_template = `
+    function message_template() {
+      return`
 {% with message=message_template %}
   {% include "chat/message.html" %}
 {% endwith %}  
-    `;
+    `};
     $(function() {
       load_dynamic_update({{last_msg}});
     });

templates/chat/chat_js.html

@@ -1,5 +1,7 @@
 <script type="text/javascript">
-  let isMobile = window.matchMedia("only screen and (max-width: 799px)").matches;
+  function isMobile() {
+    return window.matchMedia("only screen and (max-width: 799px)").matches;
+  }
 
   function load_next_page(last_id, refresh_html=false) {
     if (refresh_html) {
@@ -218,7 +220,7 @@
     if (window.room_id) {
       $("#last_msg-" + window.room_id).html(body);
     }
-    var html = message_template;
+    var html = message_template();
     html = html.replaceAll('$body', body).replaceAll('$id', tmp_id);
     var $html = $(html);
     $html.find('.time-with-rel').attr('data-iso', (new Date()).toISOString());
@@ -288,7 +290,7 @@
   }
 
   function show_right_panel() {
-    if (isMobile) {
+    if (isMobile()) {
       $('.chat-left-panel').hide();
       $('#chat-area').css('display', 'flex');
       $('#chat-box').scrollTop($('#chat-box')[0].scrollHeight);
@@ -296,7 +298,7 @@
   }
 
   function hide_right_panel() {
-    if (isMobile) {
+    if (isMobile()) {
       $('.chat-left-panel').show();
       $('#chat-area').hide();
     }
@@ -479,7 +481,7 @@
     const button = document.querySelector('#emoji-button');
     const tooltip = document.querySelector('.tooltip');
     const popper = Popper.createPopper(button, tooltip, {
-      placement: isMobile ? 'auto-end' : 'left',
+      placement: isMobile() ? 'auto-end' : 'left',
     });
 
     function toggleEmoji() {

templates/comments/math.html

@@ -1,3 +0,0 @@
-{% compress js, inline %}
-  <script src="{{ static('pagedown_math.js') }}"></script>
-{% endcompress %}

templates/contest/contest.html

@@ -10,7 +10,7 @@
   {% include "contest/contest-tabs.html" %}
 {% endblock %}
 
-{% block two_col_js %}
+{% block js_media %}
   {% include "contest/media-js.html" %}
   {% include "comments/media-js.html" %}
   {% include "actionbar/media-js.html" %}

templates/contest/list.html

@@ -31,13 +31,14 @@
   {% block contest_list_media %}{% endblock %}
 {% endblock %}
 
-{% block three_col_js %}
+{% block js_media %}
   <script type="text/javascript">
     $(document).ready(function () {
       $('#active-url').attr('href', changeTabParameter('active'));
       $('#current-url').attr('href', changeTabParameter('current'));
       $('#future-url').attr('href', changeTabParameter('future'));
       $('#past-url').attr('href', changeTabParameter('past'));
+      registerNavigation();
 
       var $form = $('form#filter-form');
 

templates/contest/moss.html

@@ -18,7 +18,7 @@
   </style>
 {% endblock %}
 
-{% block two_col_js %}
+{% block js_media %}
   <script type="text/javascript">
     $(function () {
       $('.contest-moss').click(function () {

templates/contest/stats.html

@@ -5,7 +5,7 @@
   {% include "contest/contest-tabs.html" %}
 {% endblock %}
 
-{% block two_col_js %}
+{% block js_media %}
   <script type="text/javascript">
     window.stats = {{ stats }};
   </script>

templates/course/edit_lesson.html

@@ -12,7 +12,7 @@
   </style>
 {% endblock %}
 
-{% block two_col_js %}
+{% block js_media %}
   {{ form.media.js }}
 {% endblock %}
 

templates/course/grades.html

@@ -18,7 +18,7 @@
   </style>
 {% endblock %}
 
-{% block two_col_js %}
+{% block js_media %}
   <script>
     $(document).ready(function(){
       var $searchInput = $("#search-input");

templates/internal/problem/problem.html

@@ -10,7 +10,7 @@
   </style>
 {% endblock %}
 
-{% block three_col_js %}
+{% block js_media %}
   <script type="text/javascript">
     $(function () {
       $('.vote-detail').each(function() {

templates/organization/add.html

@@ -1,6 +1,6 @@
 {% extends "two-column-content.html" %}
 
-{% block two_col_js %}
+{% block js_media %}
   {{ form.media.js }}
 {% endblock %}
 

templates/organization/blog/add.html

@@ -1,6 +1,6 @@
 {% extends "organization/home-base.html" %}
 
-{% block three_col_js %}
+{% block js_media %}
   {{ form.media.js }}
   {% include "organization/home-js.html" %}
 {% endblock %}

templates/organization/blog/edit.html

@@ -1,6 +1,6 @@
 {% extends "organization/home-base.html" %}
 
-{% block three_col_js %}
+{% block js_media %}
   {{ form.media.js }}
   {% include "organization/home-js.html" %}
 {% endblock %}

templates/organization/contest/add.html

@@ -1,6 +1,6 @@
 {% extends "organization/home-base.html" %}
 
-{% block three_col_js %}
+{% block js_media %}
   {{ form.media.js }}
 {% endblock %}
 

templates/organization/contest/edit.html

@@ -1,6 +1,6 @@
 {% extends "organization/home-base.html" %}
 
-{% block three_col_js %}
+{% block js_media %}
   {{ form.media.js }}
 {% endblock %}
 

templates/organization/home-base.html

@@ -1,6 +1,6 @@
 {% extends "three-column-content.html" %}
 
-{% block three_col_js %}
+{% block js_media %}
   {% include "organization/home-js.html" %}
   {% block org_js %}{% endblock %}
 {% endblock %}

templates/organization/home-js.html

@@ -1,8 +1,5 @@
 <script type="text/javascript">
-  $(function () {
+  function confirmLeaveOrganization() {
-    $('.time-remaining').each(function () {
-      count_down($(this));
-    });
     $('.leave-organization').click(function () {
       if (confirm('{{ _('Are you sure you want to leave this organization?') }}\n' +
         {% if organization.is_open %}
@@ -14,5 +11,10 @@
         $(this).parent().submit();
       }
     });
+  }
+  $(function () {
+    $('.time-remaining').each(function () {
+      count_down($(this));
+    });
   });
 </script>

templates/organization/list.html

@@ -1,11 +1,12 @@
 {% extends "three-column-content.html" %}
 
-{% block three_col_js %}
+{% block js_media %}
   <script type="text/javascript">
     $(document).ready(function () {
       $('#mine-tab').attr('href', changeTabParameter('mine'));
       $('#public-tab').attr('href', changeTabParameter('public'));
       $('#private-tab').attr('href', changeTabParameter('private'));
+      registerNavigation();
 
       var $form = $('form#filter-form');
 

templates/organization/org-right-sidebar.html

@@ -58,7 +58,7 @@
           <div class="link-row" style="color: red;">
             <form method="post" action="{{ url('leave_organization', organization.id, organization.slug) }}">
               {% csrf_token %}
-              <a href="#" class="leave-organization">
+              <a href="#" class="leave-organization" onclick="confirmLeaveOrganization()">
                 <i class="fa fa-sign-out-alt"></i>{{ _('Leave group') }}</a>
             </form>
           </div>

templates/problem/editorial.html

@@ -35,8 +35,4 @@
   {% include "actionbar/list.html" %}
   <br>
   {% include "comments/list.html" %}
-{% endblock %}
+{% endblock %}
-
-{% block bodyend %}
-  {% include "comments/math.html" %}
-{% endblock %}

templates/problem/feed.html

@@ -24,7 +24,7 @@
   </div>
   {% if request.user.has_perm('judge.suggest_problem_changes') and feed_type == 'volunteer' %}
     <ul style="margin-bottom: 1em; margin-left: auto">
-      <li><a href="{{url('admin:judge_volunteerproblemvote_changelist')}}">{{_('View your votes')}}</a></li>
+      <li><a href="{{url('admin:judge_volunteerproblemvote_changelist')}}" target="_blank">{{_('View your votes')}}</a></li>
     </ul>
   {% endif %}
   {% include "problem/feed/items.html" %}

templates/problem/list-base.html

@@ -47,7 +47,7 @@
   {% endif %}
 {% endblock %}
 
-{% block three_col_js %}
+{% block js_media %}
   {% include "actionbar/media-js.html" %}
   {% block problem_list_js %}{% endblock %}
   <script>

templates/problem/problem.html

@@ -467,8 +467,3 @@
   {% include "problem/related_problems.html" %}
   <iframe name="raw_problem" id="raw_problem"></iframe>
 {% endblock %}
-
-{% block bodyend %}
-  {{ super() }}
-  {% include "comments/math.html" %}
-{% endblock %}

templates/submission/list.html

@@ -2,7 +2,7 @@
 
 {% set has_hidden_subtasks = request.in_contest_mode and request.participation.contest.format.has_hidden_subtasks %}
 
-{% block three_col_js %}
+{% block js_media %}
   <script type="text/javascript">
     {% if dynamic_update and last_msg %}
       {% if request.in_contest_mode %}
@@ -91,170 +91,164 @@
 
       // Draw the statistics graph.
       {% if results_json %}
-        var chart = null;
-        function stats_graph(raw_data) {
-          var colors = {{ results_colors_json }};
-
-          var ctx = $('#status-graph').find('canvas')[0].getContext('2d');
-          var font = $('body').css('font-family');
-          if (chart !== null) {
-            chart.destroy();
-          }
-          chart = new Chart(ctx, {
-            type: 'pie',
-            data: {
-              datasets: [{
-                data: raw_data.categories.map(function(entry) {
-                  return entry.count;
-                }),
-                backgroundColor: raw_data.categories.map(function(entry) {
-                  return colors[entry.code];
-                }),
-              }],
-              labels: raw_data.categories.map(function(entry) {
-                return entry.name;
-              }),
-            },
-            options: {
-              animation: false,
-              scaleFontFamily: font,
-              tooltips: {
-                titleFontFamily: font,
-                bodyFontFamily: font,
-              },
-              legend: {
-                display: false,
-              },
-            },
-          });
-
-          $('#total-submission-count').text(raw_data.total);
-        }
-
         $(function () {
+          var chart = null;
+          function stats_graph(raw_data) {
+            var colors = {{ results_colors_json }};
+
+            var ctx = $('#status-graph').find('canvas')[0].getContext('2d');
+            var font = $('body').css('font-family');
+            if (chart !== null) {
+              chart.destroy();
+            }
+            chart = new Chart(ctx, {
+              type: 'pie',
+              data: {
+                datasets: [{
+                  data: raw_data.categories.map(function(entry) {
+                    return entry.count;
+                  }),
+                  backgroundColor: raw_data.categories.map(function(entry) {
+                    return colors[entry.code];
+                  }),
+                }],
+                labels: raw_data.categories.map(function(entry) {
+                  return entry.name;
+                }),
+              },
+              options: {
+                animation: false,
+                scaleFontFamily: font,
+                tooltips: {
+                  titleFontFamily: font,
+                  bodyFontFamily: font,
+                },
+                legend: {
+                  display: false,
+                },
+              },
+            });
+
+            $('#total-submission-count').text(raw_data.total);
+          }
           stats_graph(window.results_json);
         });
       {% endif %}
-
-      function load_dynamic_update(last_msg) {
-        var _collect = function (e) {
-          return e.value;
-        };
-        var language_filter = $.map($('select#language option[selected]'), _collect);
-        var status_filter = $.map($('select#status option[selected]'), _collect);
-
-        var table = $('#submissions-table');
-        var statistics = $("#statistics-table");
-        var doing_ajax = false;
-        var first = parseInt(table.find('>div:first-child').attr('id'));
-
-        var update_submission = function (message, force) {
-          if (language_filter.length && 'language' in message &&
-            language_filter.indexOf(message.language) == -1)
-          return;
-          if (status_filter.length && 'status' in message &&
-            status_filter.indexOf(message.status) == -1)
-          return;
-          var id = message.id;
-          var row = table.find('div#' + id);
-          if (row.length < 1) {
-            if (id < first)
-            return;
-            first = id;
-            row = $('<div>', {id: id, 'class': 'submission-row'}).hide().prependTo(table);
-            if (table.find('>div').length >= {{ paginator.per_page }})
-            table.find('>div:last-child').hide('slow', function () {
-              $(this).remove();
-            });
-          }
-          if (force || !doing_ajax) {
-            if (!force) doing_ajax = true;
-            $.ajax({
-              url: '{{ url('submission_single_query') }}',
-              data: {id: id, show_problem: show_problem}
-            }).done(function (data) {
-              var was_shown = row.is(':visible');
-              row.html(data);
-              register_time(row.find('.time-with-rel'));
-              if (!was_shown) {
-                row.slideDown('slow');
-              }
-              if (!force)
-              setTimeout(function () {
-                doing_ajax = false;
-              }, 1000);
-            }).fail(function () {
-              console.log('Failed to update submission: ' + id);
-              if (!force) doing_ajax = false;
-            });
-          }
-        };
-
-        var stats_outdated = false;
-        var last_stat_update = Date.now();
-        var stats_update_interval = {{ stats_update_interval|default(0) * 1000 }};
-
-        function update_stats() {
-          if (Date.now() - last_stat_update < stats_update_interval)
-          return;
-          $.ajax({
-            url: '?results'
-          }).done(function (data) {
-            last_stat_update = Date.now();
-            stats_graph(data);
-          }).fail(function () {
-            console.log('Failed to update statistics table!' + id);
-          }).always(function () {
-            stats_outdated = false;
-          });
-        }
-
-        $(window).on('dmoj:window-visible', function () {
-          if (stats_outdated)
-          update_stats();
-        });
-
-        var $body = $(document.body);
-        var receiver = new EventReceiver(
-          "{{ EVENT_DAEMON_LOCATION }}", "{{ EVENT_DAEMON_POLL_LOCATION }}",
-          ['submissions'], last_msg, function (message) {
-            if (current_contest && message.contest != current_contest)
-            return;
-            if (dynamic_user_id && message.user != dynamic_user_id ||
-              dynamic_problem_id && message.problem != dynamic_problem_id)
-            return;
-            if (message.type == 'update-submission') {
-              if (message.state == 'test-case' && $body.hasClass('window-hidden'))
-              return;
-              update_submission(message);
-            } else if (message.type == 'done-submission') {
-              update_submission(message, true);
-
-              if (!statistics.length) return;
-              if ($('body').hasClass('window-hidden'))
-              return stats_outdated = true;
-              update_stats();
-            }
-          }
-        );
-        receiver.onwsclose = function (event) {
-          if (event.code == 1001) {
-            console.log('Navigated away');
-            return;
-          }
-          console.log('You probably should refresh?');
-          // $('.ws-closed').show().find('a').click(function () {
-          //     window.location.reload();
-          // });
-        };
-        return receiver;
-      }
     </script>
   {% endcompress %}
 
   {% if dynamic_update and last_msg and not has_hidden_subtasks %}
     <script type="text/javascript">
       $(function () {
+        function load_dynamic_update(last_msg) {
+          var _collect = function (e) {
+            return e.value;
+          };
+          var language_filter = $.map($('select#language option[selected]'), _collect);
+          var status_filter = $.map($('select#status option[selected]'), _collect);
+
+          var table = $('#submissions-table');
+          var statistics = $("#statistics-table");
+          var doing_ajax = false;
+          var first = parseInt(table.find('>div:first-child').attr('id'));
+
+          var update_submission = function (message, force) {
+            if (language_filter.length && 'language' in message &&
+              language_filter.indexOf(message.language) == -1)
+            return;
+            if (status_filter.length && 'status' in message &&
+              status_filter.indexOf(message.status) == -1)
+            return;
+            var id = message.id;
+            var row = table.find('div#' + id);
+            if (row.length < 1) {
+              if (id < first)
+              return;
+              first = id;
+              row = $('<div>', {id: id, 'class': 'submission-row'}).hide().prependTo(table);
+              if (table.find('>div').length >= {{ paginator.per_page }})
+              table.find('>div:last-child').hide('slow', function () {
+                $(this).remove();
+              });
+            }
+            if (force || !doing_ajax) {
+              if (!force) doing_ajax = true;
+              $.ajax({
+                url: '{{ url('submission_single_query') }}',
+                data: {id: id, show_problem: show_problem}
+              }).done(function (data) {
+                var was_shown = row.is(':visible');
+                row.html(data);
+                register_time(row.find('.time-with-rel'));
+                if (!was_shown) {
+                  row.slideDown('slow');
+                }
+                if (!force)
+                setTimeout(function () {
+                  doing_ajax = false;
+                }, 1000);
+              }).fail(function () {
+                console.log('Failed to update submission: ' + id);
+                if (!force) doing_ajax = false;
+              });
+            }
+          };
+
+          var stats_outdated = false;
+          var last_stat_update = Date.now();
+          var stats_update_interval = {{ stats_update_interval|default(0) * 1000 }};
+
+          function update_stats() {
+            if (Date.now() - last_stat_update < stats_update_interval)
+            return;
+            $.ajax({
+              url: '?results'
+            }).done(function (data) {
+              last_stat_update = Date.now();
+              stats_graph(data);
+            }).fail(function () {
+              console.log('Failed to update statistics table!' + id);
+            }).always(function () {
+              stats_outdated = false;
+            });
+          }
+
+          $(window).on('dmoj:window-visible', function () {
+            if (stats_outdated)
+            update_stats();
+          });
+
+          var $body = $(document.body);
+          var receiver = new EventReceiver(
+            "{{ EVENT_DAEMON_LOCATION }}", "{{ EVENT_DAEMON_POLL_LOCATION }}",
+            ['submissions'], last_msg, function (message) {
+              if (current_contest && message.contest != current_contest)
+              return;
+              if (dynamic_user_id && message.user != dynamic_user_id ||
+                dynamic_problem_id && message.problem != dynamic_problem_id)
+              return;
+              if (message.type == 'update-submission') {
+                if (message.state == 'test-case' && $body.hasClass('window-hidden'))
+                return;
+                update_submission(message);
+              } else if (message.type == 'done-submission') {
+                update_submission(message, true);
+
+                if (!statistics.length) return;
+                if ($('body').hasClass('window-hidden'))
+                return stats_outdated = true;
+                update_stats();
+              }
+            }
+          );
+          receiver.onwsclose = function (event) {
+            if (event.code == 1001) {
+              console.log('Navigated away');
+              return;
+            }
+          };
+          return receiver;
+        }
         load_dynamic_update({{last_msg}});
       });
     </script>

templates/tabs-base.html

@@ -1,6 +1,6 @@
-{% macro make_tab(name, fa, url, text) %}
+{% macro make_tab(name, fa, url, text, force_new_page=False) %}
   <li class="tab{% if tab == name %} active{% endif %}">
-    {%- if url %}<a href="{{ url }}">{% else %}<span>{% endif -%}
+    {%- if url %}<a href="{{ url }}" {% if force_new_page%}data-force_new_page="1"{% endif %}>{% else %}<span>{% endif -%}
     <i class="tab-icon fa {{ fa }}"></i> {{ text }}
     {%- if url %}</a>{% else %}</span>{% endif -%}
   </li>

templates/three-column-content.html

@@ -26,86 +26,6 @@
   </style>
 {% endblock %}
 
-{% block js_media %}
-  <script type="text/javascript">
-    let loadingPage;
-
-    function navigateTo($elem, update_sidebar = false) {
-      var url = $elem.attr('href');
-      var force_new_page = $elem.data('force_new_page');
-
-      if (url === '#') return;
-
-      if (force_new_page) {
-        window.location.href = url;
-        return;
-      }
-
-      if (update_sidebar) {
-        $('.left-sidebar-item').removeClass('active');
-        $elem.addClass('active');
-      }
-      $(window).off("scroll");
-      $('.middle-right-content').html(loadingPage);
-      $.get(url, function (data) {
-        var reload_content = $(data).find('.middle-right-content');
-        var bodyend_script = $(data).find('#extra_js');
-        if (reload_content.length) {
-          window.history.pushState("", "", url);
-          $('html, body').animate({scrollTop: 0}, 'fast');
-          $('.middle-right-content').html(reload_content.first().html());
-          $('#extra_js').html(bodyend_script.first().html());
-          $("#loading-bar").stop(true, true);
-          $("#loading-bar").hide().css({ width: 0});
-          if (reload_content.hasClass("wrapper")) {
-            $('.middle-right-content').addClass("wrapper");
-          }
-          else {
-            $('.middle-right-content').removeClass("wrapper");
-          }
-          $(document).prop('title', $(data).filter('title').text());
-          renderKatex($('.middle-right-content')[0]);
-          onWindowReady();
-          $('.xdsoft_datetimepicker').hide();
-          registerNavigation();
-        }
-        else {
-          window.location.href = url;
-        }
-      });
-    }
-
-    function registerNavigation() {
-      const links = ['.pagination a', '.tabs li a', '#control-panel a'];
-      for (let linkSelector of links) {
-        $(linkSelector).each(function() {
-          if ($(this).attr('target') !== '_blank') {
-            $(this).on('click', function(e) {
-              e.preventDefault();
-              navigateTo($(this));
-            });
-          }
-        });
-      }
-    }
-
-    $(function () {
-      window.addEventListener('popstate', (e) => {
-        window.location.href = e.currentTarget.location.href;
-      });
-
-      $('.left-sidebar-item').on('click', function (e) {
-        e.preventDefault();
-        navigateTo($(this), true);
-      });
-      registerNavigation();
-      $.get("{{static('html/loading-page.html')}}", function(data) {
-        loadingPage = data;
-      });
-    });
-  </script>
-{% endblock %}
-
 {% macro make_tab_item(name, fa, url, text, force_new_page=False) %}
   <a class="left-sidebar-item {% if page_type == name %}active{% endif %}" href="{{ url }}" id="{{ name }}-tab" {% if force_new_page%}data-force_new_page="1"{% endif %}>
     <span class="sidebar-icon"><i class="{{ fa }}"></i></span>
@@ -128,12 +48,3 @@
   </div>
   {% block after_posts %}{% endblock %}
 {% endblock %}
-
-{% block extra_js %}
-  {% block three_col_js %}{% endblock %}
-{% endblock %}
-
-{% block bodyend %}
-  {{ super() }}
-  {% include "comments/math.html" %}
-{% endblock %}

templates/ticket/ticket.html

@@ -223,8 +223,3 @@
     </aside>
   </div>
 {% endblock %}
-
-{% block bodyend %}
-  {{ super() }}
-  {% include "comments/math.html" %}
-{% endblock %}

templates/two-column-content.html

@@ -1,10 +1,6 @@
 {% set is_two_column = true %}
 {% extends "three-column-content.html" %}
 
-{% block three_col_js %}
-  {% block two_col_js %}{% endblock %}
-{% endblock %}
-
 {% block three_col_media %}
   <style>
     @media (min-width: 800px) {

templates/user/base-users-two-col.html

@@ -1,6 +1,6 @@
 {% extends "two-column-content.html" %}
 
-{% block two_col_js %}
+{% block js_media %}
   {% block users_js_media %}{% endblock %}
   {% include "user/base-users-js.html" %}
 {% endblock %}

templates/user/user-tabs.html

@@ -5,17 +5,17 @@
   {{ make_tab('problems', 'fa-puzzle-piece', url('user_problems', user.user.username), _('Problems')) }}
   {{ make_tab('submissions', 'fa-code', url('all_user_submissions', user.username), _('Submissions')) }}
   {% if request.user.is_superuser and user != request.profile and not user.user.is_superuser %}
-    {{ make_tab('impersonate', 'fa-eye', url('impersonate-start', user.user.id), _('Impersonate')) }}
+    {{ make_tab('impersonate', 'fa-eye', url('impersonate-start', user.user.id), _('Impersonate'), force_new_page=True) }}
   {% endif %}
   {% if user == request.profile %}
     {{ make_tab('bookmark', 'fa-bookmark', url('user_bookmark'), _('Bookmarks')) }}
-    {{ make_tab('edit', 'fa-edit', url('user_edit_profile'), _('Edit profile')) }}
+    {{ make_tab('edit', 'fa-gear', url('user_edit_profile'), _('Settings')) }}
   {% else %}
     {% if perms.auth.change_user %}
-      {{ make_tab('edit', 'fa-edit', url('admin:auth_user_change', user.user.id), _('Admin User')) }}
+      {{ make_tab('edit', 'fa-edit', url('admin:auth_user_change', user.user.id), _('Admin User'), force_new_page=True) }}
     {% endif %}
     {% if perms.judge.change_profile %}
-      {{ make_tab('edit', 'fa-edit', url('admin:judge_profile_change', user.id), _('Admin Profile')) }}
+      {{ make_tab('edit', 'fa-edit', url('admin:judge_profile_change', user.id), _('Admin Profile'), force_new_page=True) }}
     {% endif %}
   {% endif %}
 {% endblock %}