ui: support sep view for samples

packages/ui-default/backendlib/markdown.js

@@ -1,5 +1,4 @@
 const MarkdownIt = require('markdown-it');
-const Prism = require('prismjs');
 
 // For math: $a\times b\eq 10$
 // Specific image size: ![image](image.png =100x100)
@@ -31,14 +30,6 @@ class Markdown extends MarkdownIt {
   constructor() {
     super({
       linkify: true,
-      highlight(str, lang) {
-        if (lang && Prism.languages[lang]) {
-          try {
-            return Prism.highlight(str, Prism.languages[lang], lang);
-          } catch (__) { }
-        }
-        return '';
-      },
     });
     this.linkify.tlds('.py', false);
     this.use(Media);

packages/ui-default/components/highlighter/highlighter.page.js

@@ -1,6 +1,8 @@
 import { AutoloadPage } from 'vj/misc/Page';
 import load from 'vj/components/wastyle/index';
 import Notification from 'vj/components/notification/index';
+import tpl from 'vj/utils/tpl';
+import i18n from 'vj/utils/i18n';
 
 const highlighterPage = new AutoloadPage('highlighterPage', async () => {
   const [{ default: prismjs }, [success, format]] = await Promise.all([
@@ -10,7 +12,28 @@ const highlighterPage = new AutoloadPage('highlighterPage', async () => {
   if (!success) Notification.error(`Astyle load fail: ${format}`);
   function runHighlight($container) {
     prismjs.highlightBlocks($container, success ? format : null);
+    $container.find('pre code').get().forEach((code) => {
+      const $code = $(code);
+      const $root = $code.parent().parent();
+      const language = ($(code).attr('class') || '').trim();
+      const m = language.match(/language-([a-z0-9]+)/);
+      if (m && m[1] && m[1].toLowerCase().startsWith('input')) {
+        const id = +m[1].substr(5, m[1].length - 5);
+        if (Number.isSafeInteger(id)) {
+          const $output = $container.find(`pre.language-output${id}`);
+          if ($output.length) {
+            const $c = $(document.createElement('div')).addClass('row');
+            $root.clone(true).prepend($(tpl`<h2>${i18n('Sample Input')} ${id}</h2>`))
+              .addClass('medium-6 columns sample').appendTo($c);
+            $output.parent().prepend($(tpl`<h2>${i18n('Sample Output')} ${id}</h2>`))
+              .addClass('medium-6 columns sample').appendTo($c);
+            $root.replaceWith($c);
+          }
+        }
+      }
+    });
   }
+
   runHighlight($('body'));
   $(document).on('vjContentNew', (e) => runHighlight($(e.target)));
 });

packages/ui-default/components/highlighter/highlighter.page.styl

@@ -25,6 +25,10 @@ code
 [data-syntax-hl-show-line-number] pre.line-numbers > code
   white-space: pre
 
+.sample > .toolbar
+  right: 12px !important
+  top: 59px !important
+
 .toolbar
   position: absolute
   white-space: no-wrap

packages/ui-default/handler.js

@@ -11,6 +11,11 @@ const { system, domain, user } = global.Hydro.model;
 const { Route, Handler, UiContextBase } = global.Hydro.service.server;
 
 class WikiHelpHandler extends Handler {
+  constructor(args) {
+    super(args);
+    this.noCheckPermView = true;
+  }
+
   async get() {
     const [langstr, langtexts] = system.getMany(['hydrojudge.langs', 'lang.texts']);
     if (langstr) {
@@ -31,12 +36,22 @@ class WikiHelpHandler extends Handler {
 }
 
 class WikiAboutHandler extends Handler {
+  constructor(args) {
+    super(args);
+    this.noCheckPermView = true;
+  }
+
   async get() {
     this.response.template = 'about.html';
   }
 }
 
 class UiConstantsHandler extends Handler {
+  constructor(args) {
+    super(args);
+    this.noCheckPermView = true;
+  }
+
   async get() {
     const [LANG_TEXTS, LANG_HIGHLIGHT_ID, MONACO_MODES] = system.getMany([
       'lang.texts',
@@ -53,6 +68,11 @@ window.MONACO_MODES=${JSON.stringify(yaml.load(MONACO_MODES))}`;
 }
 
 class UiSettingsHandler extends Handler {
+  constructor(args) {
+    super(args);
+    this.noCheckPermView = true;
+  }
+
   async get({ domainId }) {
     const [
       header_logo, header_logo_2x,
@@ -83,6 +103,11 @@ class UiSettingsHandler extends Handler {
 }
 
 class LocaleHandler extends Handler {
+  constructor(args) {
+    super(args);
+    this.noCheckPermView = true;
+  }
+
   async get({ id }) {
     // eslint-disable-next-line prefer-destructuring
     id = id.split('.')[0];
@@ -95,6 +120,11 @@ class LocaleHandler extends Handler {
 }
 
 class SetThemeHandler extends Handler {
+  constructor(args) {
+    super(args);
+    this.noCheckPermView = true;
+  }
+
   async get({ theme }) {
     await user.setById(this.user._id, { theme });
     this.back();
@@ -102,6 +132,11 @@ class SetThemeHandler extends Handler {
 }
 
 class MarkdownHandler extends Handler {
+  constructor(args) {
+    super(args);
+    this.noCheckPermView = true;
+  }
+
   async post({ text, html = false, inline = false }) {
     this.response.body = inline
       ? markdown.renderInline(text, html)

packages/ui-default/package.json

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

packages/ui-default/templates/problem_detail.html

@@ -24,34 +24,31 @@
   <div class="medium-9 columns">
     <div class="section">
       <div class="problem-content-container"><div class="problem-content" data-marker-enabled>
-        <div class="section__header">
+        {% if rdoc %}
-          {% if rdoc %}
+          <div class="section__header scratchpad--hide">
-            <h1 class="section__title scratchpad--hide">
+            <h1 class="section__title">
-                <span class="icon record-status--icon {{ model.builtin.STATUS_CODES[rdoc['status']] }}"></span>
+              <span class="icon record-status--icon {{ model.builtin.STATUS_CODES[rdoc['status']] }}"></span>
-                <span class="record-status--text {{ model.builtin.STATUS_CODES[rdoc['status']] }}">
+              <span class="record-status--text {{ model.builtin.STATUS_CODES[rdoc['status']] }}">
-                  {{ model.builtin.STATUS_TEXTS[rdoc.status] }}{% if rdoc.status != model.builtin.STATUS.STATUS_ACCEPTED %} {{ rdoc.score }}{% endif %}
+                {{ model.builtin.STATUS_TEXTS[rdoc.status] }}{% if rdoc.status != model.builtin.STATUS.STATUS_ACCEPTED %} {{ rdoc.score }}{% endif %}
-                </span>
+              </span>
             </h1>
-          {% endif %}
+          </div>
-          <h1 class="section__title non-scratchpad--hide">
+        {% else %}
-            {{ pdoc.title }}
+        <div class="section__header non-scratchpad--hide">
-          </h1>
+          <h1 class="section__title">{{ pdoc.title }}</h1>
         </div>
+        {% endif %}
         <div class="section__body typo">
         {% if not pdoc.data.length %}
           <blockquote class="warn">
             <p>{{ _('No testdata at current.') }}</p>
           </blockquote>
         {% endif %}
-        {% if tdoc %}
+        {% if tdoc and tdoc.docType == model.document.TYPE_CONTEST and model.contest.isDone(tdoc) %}
-        {% if tdoc.docType == model.document.TYPE_CONTEST %}
-        {% if 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 %}{# handler.isDone(tdoc) #}
+        {% endif %}
-        {% endif %}{# tdoc['docType'] == model.document.TYPE_CONTEST #}
-        {% endif %}{# tdoc #}
         {{ pdoc.content|content(handler.user.viewLang, pdoc.html)|safe }}
         </div>
       </div></div>