ui: Add problem_detail lang tab (#319)

packages/ui-default/backendlib/template.js

@@ -96,6 +96,18 @@ class Nunjucks extends nunjucks.Environment {
       if (s instanceof Array) s = buildContent(s, html ? 'html' : 'markdown', (str) => str.translate(language));
       return ensureTag(html ? xss.process(s) : markdown.render(s));
     });
+    this.addFilter('contentLang', (content) => {
+      let s = '';
+      try {
+        s = JSON.parse(content);
+      } catch {
+        s = content;
+      }
+      if (typeof s === 'object' && !(s instanceof Array)) {
+        return Object.keys(s);
+      }
+      return [];
+    });
     this.addFilter('log', (self) => {
       console.log(self);
       return self;

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

@@ -0,0 +1,20 @@
+.page--problem_detail
+  .section__tab-header
+    padding-top: 0;
+  
+  .section__tab-container  + .section__body
+    padding-top: 0
+  
+  .section__tab-header-item
+    border-top: 3px solid transparent;
+    transition: border-color 0.2s, background 0.2s, color 0.2s;
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    margin-right: 0;
+    color: #182026 !important;
+
+    &:hover
+      border-color: #5f9fd6;
+      background: #f8f8f8;
+    
+    &.tab--active
+      border-color: #ed5f82;

packages/ui-default/templates/problem_detail.html

@@ -75,6 +75,19 @@
         <div class="section__header non-scratchpad--hide">
           <h1 class="section__title">{{ pdoc.title }}</h1>
         </div>
+        {% if pdoc.content|contentLang %}
+        <div class="section__tab-container">
+          <div class="section__tab-header-wrapper">
+            <ul class="section__tab-header">
+              {% 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] }}
+              </a>
+              {% endfor %}
+            </ul>
+          </div>
+        </div>
+        {% endif %}
         <div class="section__body typo">
         {% if not pdoc.data.length and not pdoc.reference %}
           <blockquote class="warn">
@@ -91,7 +104,7 @@
             <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.user.viewLang or handler.session.viewLang, pdoc.html)|safe }}
+        {{ pdoc.content|content(handler.request.query.lang or handler.user.viewLang or handler.session.viewLang, pdoc.html)|safe }}
         </div>
       </div></div>
     </div>