ui&core: pjax load problem content

packages/hydrooj/package.json

@@ -1,6 +1,6 @@
 {
     "name": "hydrooj",
-    "version": "3.10.1",
+    "version": "3.10.2",
     "bin": "bin/hydrooj.js",
     "main": "src/loader",
     "module": "src/loader",

packages/hydrooj/src/handler/problem.ts

@@ -362,10 +362,11 @@ export class ProblemDetailHandler extends ProblemHandler {
     }
 
     @query('tid', Types.ObjectID, true)
+    @query('pjax', Types.Boolean, true)
     async get(...args: any[]) {
         // Navigate to current additional file download
         // e.g. ![img](a.jpg) will navigate to ![img](./pid/file/a.jpg)
-        if (!this.request.json) {
+        if (!this.request.json || args[2]) {
             if (args[1]) {
                 this.response.body.pdoc.content = this.response.body.pdoc.content
                     .replace(/\(file:\/\/(.+?)\)/g, (str) => {
@@ -387,6 +388,16 @@ export class ProblemDetailHandler extends ProblemHandler {
                 ? 'homework_detail_problem'
                 : 'contest_detail_problem'
             : 'problem_detail';
+        if (args[2]) {
+            const data = { pdoc: this.pdoc, tdoc: this.tdoc };
+            this.response.body = {
+                title: this.renderTitle(this.response.body.page_name),
+                fragments: [
+                    { html: await this.renderHTML('partials/problem_description.html', data) },
+                ],
+                raw: data,
+            };
+        }
         if (!this.response.body.tdoc) {
             if (this.psdoc?.rid) {
                 this.response.body.rdoc = await record.get(this.domainId, this.psdoc.rid);

packages/ui-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.34.15",
+  "version": "4.34.16",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",

packages/ui-default/pages/problem_detail.page.jsx

@@ -4,6 +4,7 @@ import { NamedPage } from 'vj/misc/Page';
 import { downloadProblemSet } from 'vj/components/zipDownloader';
 import loadReactRedux from 'vj/utils/loadReactRedux';
 import delay from 'vj/utils/delay';
+import pjax from 'vj/utils/pjax';
 
 class ProblemPageExtender {
   constructor() {
@@ -266,6 +267,14 @@ const page = new NamedPage(['problem_detail', 'contest_detail_problem', 'homewor
     ev.preventDefault();
   });
 
+  $(document).on('click', '[data-lang]', (ev) => {
+    ev.preventDefault();
+    const url = new URL(window.location.href);
+    url.searchParams.set('lang', ev.currentTarget.dataset.lang);
+    $('[data-lang]').removeClass('tab--active');
+    pjax.request({ url: url.toString() });
+    $(ev.currentTarget).addClass('tab--active');
+  });
   $(document).on('click', '[name="show_tags"]', (ev) => {
     $(ev.currentTarget).hide();
     $('span.tags').css('display', 'inline-block');

packages/ui-default/pages/problem_detail.page.styl

@@ -11,6 +11,7 @@
     transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
     margin-right: 0;
     color: #182026 !important;
+    text-decoration: none;
 
     &:hover
       border-color: #5f9fd6;

packages/ui-default/templates/partials/problem_description.html

@@ -0,0 +1,18 @@
+<div class="section__body typo" data-fragment-id="problem-description">
+  {% if not pdoc.data.length and not pdoc.reference %}
+    <blockquote class="warn">
+      <p>{{ _('No testdata at current.') }}</p>
+    </blockquote>
+  {% endif %}
+  {% if typeof(pdoc.config) == 'string' %}
+    <blockquote class="warn">
+      <p>{{ pdoc.config }}</p>
+    </blockquote>
+  {% endif %}
+  {% if tdoc and tdoc.docType == model.document.TYPE_CONTEST and model.contest.isDone(tdoc) %}
+    <blockquote class="note">
+      <p>{{ _('You cannot submit for this problem because the contest is ended. You can click "Open in Problem Set" to view this problem in normal mode.') }}</p>
+    </blockquote>
+  {% endif %}
+  {{ pdoc.content|content(handler.request.query.lang or handler.user.viewLang or handler.session.viewLang, pdoc.html)|safe }}
+</div>

packages/ui-default/templates/problem_detail.html

@@ -75,10 +75,10 @@
         <div class="section__header non-scratchpad--hide">
           <h1 class="section__title">{{ pdoc.title }}</h1>
         </div>
-        {% if pdoc.content|contentLang %}
+        {% if pdoc.content|contentLang|length %}
         <div class="section__tab-container">
           <div class="section__tab-header-wrapper">
-            <ul class="section__tab-header">
+            <ul class="section__tab-header flex-row">
               {% for k in pdoc.content|contentLang %}
               <a class="section__tab-header-item {{'tab--active' if (handler.request.query.lang or handler.user.viewLang or handler.session.viewLang) == k }}" data-lang="{{ k }}" href="./{{pdoc.pid|default(pdoc.docId)}}?lang={{k}}">
                 {{ model.setting.SETTINGS_BY_KEY['viewLang'].range[k] }}
@@ -88,24 +88,7 @@
           </div>
         </div>
         {% endif %}
-        <div class="section__body typo">
-        {% if not pdoc.data.length and not pdoc.reference %}
-          <blockquote class="warn">
-            <p>{{ _('No testdata at current.') }}</p>
-          </blockquote>
-        {% endif %}
-        {% if typeof(pdoc.config) == 'string' %}
-          <blockquote class="warn">
-            <p>{{ pdoc.config }}</p>
-          </blockquote>
-        {% endif %}
-        {% if tdoc and tdoc.docType == model.document.TYPE_CONTEST and model.contest.isDone(tdoc) %}
-          <blockquote class="note">
-            <p>{{ _('You cannot submit for this problem because the contest is ended. You can click "Open in Problem Set" to view this problem in normal mode.') }}</p>
-          </blockquote>
-        {% endif %}
-        {{ pdoc.content|content(handler.request.query.lang or handler.user.viewLang or handler.session.viewLang, pdoc.html)|safe }}
-        </div>
+        {% include "partials/problem_description.html" %}
       </div></div>
     </div>
   </div>