@shzlx/ui-default 4.58.2

package/components/table/StyledTable.js

@@ -0,0 +1,51 @@
+import 'sticky-kit/dist/sticky-kit';
+
+import $ from 'jquery';
+import _ from 'lodash';
+import responsiveCutoff from 'vj/breakpoints.json';
+import DOMAttachedObject from 'vj/components/DOMAttachedObject';
+import { isBelow } from 'vj/utils/mediaQuery';
+
+const navHeight = isBelow(responsiveCutoff.mobile)
+  ? 0
+  : $('.nav').height();
+
+export default class StyledTable extends DOMAttachedObject {
+  static DOMAttachKey = 'vjStyledTableInstance';
+
+  static DOMAttachSelector = '.data-table';
+
+  constructor($dom) {
+    if ($dom.closest('.section__body').length === 0) {
+      super(null);
+      return;
+    }
+
+    super($dom);
+
+    this.$container = $('<div>').addClass('section__table-container');
+    this.$container.insertBefore(this.$dom);
+
+    this.$header = $('<table>');
+    this.$header.attr('class', `${this.$dom.attr('class')} section__table-header`);
+
+    this.$container
+      .append(this.$header)
+      .append(this.$dom);
+
+    this.$header.empty();
+    this.$dom.children('colgroup').clone().appendTo(this.$header);
+    this.$dom.children('thead').appendTo(this.$header);
+
+    const stickyOptions = {
+      parent: this.$container,
+      offset_top: navHeight,
+    };
+    _.defer(() => this.$header.stick_in_parent(stickyOptions));
+  }
+
+  detach() {
+    super.detach();
+    this.$header.trigger('sticky_kit:detach');
+  }
+}

package/components/table/styledTable.page.js

@@ -0,0 +1,8 @@
+import { AutoloadPage } from 'vj/misc/Page';
+import StyledTable from './StyledTable';
+
+const styledTablePage = new AutoloadPage('styledTablePage', () => {
+  StyledTable.registerLifeCycleHooks();
+});
+
+export default styledTablePage;

package/components/table/table.page.styl

@@ -0,0 +1,73 @@
+.data-table
+  width: 100%
+  table-layout: fixed
+  white-space: nowrap
+  font-size: rem($font-size-small)
+  font-weight: normal
+
+  th
+    font-size: rem($font-size-secondary)
+
+  tr
+    border-top: 1px solid $table-border-color
+    border-bottom: 1px solid $table-border-color
+
+    &:nth-child(even)
+      background: $table-alternate-bg-color
+
+    &.highlight
+      background: lighten($highlight-color, 85%)
+
+  &.is--full-row tr
+    cursor: pointer
+
+    &:hover
+      background: lighten($primary-color, 85%)
+
+  thead > tr
+    color: #888
+    border-top: 0
+    border-bottom: 1px solid $table-border-color
+
+  td, th
+    white-space: nowrap
+    overflow: hidden
+    text-overflow: ellipsis
+    line-height: rem($table-lh)
+
+  td
+    padding: rem(5px $table-padding-h)
+
+  th
+    padding: rem(13px $table-padding-h)
+
+  .empty-row
+    color: #AAA
+    font-size: rem($font-size-small)
+
+.section__table-container
+  overflow: hidden
+  overflow-x: auto
+
+.section__table-header
+  background: $table-header-bg-color
+  box-shadow: $table-header-shadow
+  position: relative
+  z-index: 100
+  transition: box-shadow .2s linear
+
+  thead > tr
+    border-bottom: 0
+
+  &.is_stuck
+    box-shadow: $table-header-shadow-floating
+
+.section__table-container,
+.section__body
+  & > .data-table
+    td, th
+      &:first-child
+        padding-left: rem($section-gap-h)
+
+      &:last-child
+        padding-right: rem($section-gap-h)

package/components/time/time.page.js

@@ -0,0 +1,47 @@
+import $ from 'jquery';
+import * as timeago from 'timeago.js';
+import { AutoloadPage } from 'vj/misc/Page';
+import { i18n } from 'vj/utils';
+
+try {
+  const locales = require.context('timeago.js/lib/lang', false, /\.js$/);
+  let locale;
+  try {
+    locale = locales(`./${i18n('timeago_locale')}.js`).default;
+  } catch (e) {
+    locale = locales('./en_US.js').default;
+  }
+  timeago.register(i18n('timeago_locale'), locale);
+} catch (e) {
+  console.error(`Cannot register timeago locale: ${i18n('timeago_locale')}`);
+}
+function runRelativeTime($container) {
+  $container.find('span.time.relative[data-timestamp]').get().forEach((element) => {
+    const $element = $(element);
+    if ($element.attr('data-has-timeago') !== undefined) return;
+    $element.attr('data-tooltip', $element.text());
+    $element.attr('datetime', ($element.attr('data-timestamp') || 0) * 1000);
+    $element.attr('data-has-timeago', '1');
+    timeago.render(element, i18n('timeago_locale'));
+  });
+}
+
+function cancelRelativeTime($container) {
+  $container.find('span.time.relative[data-timestamp]').get().forEach((element) => {
+    const $element = $(element);
+    if ($element.attr('data-has-timeago') === undefined) {
+      return;
+    }
+    $element.removeAttr('data-has-timeago');
+    timeago.cancel(element);
+  });
+}
+
+const relativeTimePage = new AutoloadPage('relativeTimePage', () => {
+  if (!UserContext.showTimeAgo) return;
+  runRelativeTime($('body'));
+  $(document).on('vjContentNew', (e) => runRelativeTime($(e.target)));
+  $(document).on('vjContentRemove', (e) => cancelRelativeTime($(e.target)));
+});
+
+export default relativeTimePage;

package/components/tooltip/Tooltip.js

@@ -0,0 +1,49 @@
+import _ from 'lodash';
+import Drop from 'tether-drop';
+import DOMAttachedObject from 'vj/components/DOMAttachedObject';
+
+export default class Tooltip extends DOMAttachedObject {
+  static DOMAttachKey = 'vjTooltipInstance';
+
+  constructor($dom, options = {}) {
+    super($dom, true);
+    this.dropRemoved = false;
+    this.drop = new Drop({
+      target: $dom[0],
+      classes: 'tooltip',
+      position: options.position || 'top center',
+      openOn: 'hover',
+      constrainToWindow: true,
+      constrainToScrollParent: false,
+      content: $dom.attr('data-tooltip'),
+    });
+    this.isOpen = false;
+    this.drop.on('open', this.onOpen, this);
+    this.drop.on('close', this.onClose, this);
+    this.delayDetach = _.debounce(this.detach.bind(this), 200);
+  }
+
+  onOpen() {
+    this.delayDetach.cancel();
+  }
+
+  onClose() {
+    this.delayDetach();
+  }
+
+  detach() {
+    if (this.detached) {
+      return;
+    }
+    super.detach();
+    this.drop.destroy();
+  }
+
+  close() {
+    this.drop.close();
+  }
+
+  open() {
+    this.drop.open();
+  }
+}

package/components/tooltip/tooltip.page.js

@@ -0,0 +1,29 @@
+import $ from 'jquery';
+import { AutoloadPage } from 'vj/misc/Page';
+import Tooltip from './Tooltip';
+
+function getClosestTooltipElement(element) {
+  const MAX_DEPTH = 3;
+  for (let i = 0, e = element; i < MAX_DEPTH && e !== null && e !== document; e = e.parentNode, i++) {
+    if (e.getAttribute('data-tooltip')) {
+      return e;
+    }
+  }
+  return null;
+}
+
+const tooltipPage = new AutoloadPage('tooltipPage', () => {
+  $(document).on('mouseover', (e) => {
+    const element = getClosestTooltipElement(e.target);
+    if (!element) return;
+    const $element = $(element);
+    const options = {};
+    if ($element.attr('data-tooltip-pos')) {
+      options.position = $element.attr('data-tooltip-pos');
+    }
+    const tooltip = Tooltip.getOrConstruct($element, options);
+    tooltip.open();
+  });
+});
+
+export default tooltipPage;

package/components/tooltip/tooltip.page.styl

@@ -0,0 +1,69 @@
+.tooltip
+
+  &.drop-element
+    pointer-events: none
+
+  .drop-content
+    transition: transform .1s ease-in-out
+    background: #333
+    color: #fff
+    font-size: rem($font-size-small)
+    padding: .7em 0.9em
+    max-width: rem(250px)
+    box-shadow: 1px 1px 4px rgba(#000, 0.3)
+    line-height: 1
+    position: relative
+
+    &:before
+      content: ''
+      display: block
+      position: absolute
+      width: 0
+      height: 0
+      border: rem(6px) solid transparent
+      pointer-events: none
+
+  &.drop-after-open
+    transition-delay: .4s
+
+    .drop-content
+      transition-delay: .4s
+
+  // Transitions
+  &.drop-element-attached-bottom.drop-element-attached-center .drop-content
+    transform: scale(0.9) translate(0, 5px) translateZ(0)
+  &.drop-element-attached-bottom.drop-element-attached-left .drop-content
+    transform: scale(0.9) translate(5px, 5px) translateZ(0)
+  &.drop-element-attached-bottom.drop-element-attached-right .drop-content
+    transform: scale(0.9) translate(-5px, 5px) translateZ(0)
+  &.drop-element-attached-top.drop-element-attached-center .drop-content
+    transform: scale(0.9) translate(0, -5px) translateZ(0)
+  &.drop-element-attached-top.drop-element-attached-left .drop-content
+    transform: scale(0.9) translate(5px, -5px) translateZ(0)
+  &.drop-element-attached-top.drop-element-attached-right .drop-content
+    transform: scale(0.9) translate(-5px, -5px) translateZ(0)
+  &.drop-after-open .drop-content
+    transform: scale(1) translateZ(0) !important
+
+  // Triangle Borders
+  &.drop-element-attached-bottom .drop-content
+    bottom: rem(10px)
+    &:before
+      border-top-color: #333
+  &.drop-element-attached-top .drop-content
+    top: rem(10px)
+    &:before
+      border-bottom-color: #333
+
+  // Triangle Positions
+  &.drop-element-attached-bottom .drop-content:before
+    bottom: rem(-12px)
+  &.drop-element-attached-top .drop-content:before
+    top: rem(-12px)
+  &.drop-element-attached-center .drop-content:before
+    margin-left: rem(-6px)
+    left: 50%
+  &.drop-element-attached-left .drop-content:before
+    left: 0
+  &.drop-element-attached-right .drop-content:before
+    right: 0

package/components/training/training.page.styl

@@ -0,0 +1,25 @@
+.training-status--icon
+  display: inline-block
+  width: 1.15em
+  for key, value in $training-status-icon
+    &.{key}:before
+      content: value
+      color: $training-status-color[key]
+
+.training-status--text
+  for key, value in $training-status-color
+    &.{key}
+      color: value
+
+.training-section-status--icon
+  display: inline-block
+  width: 1.15em
+  for key, value in $training-section-status-icon
+    &.{key}:before
+      content: value
+      color: $training-status-color[key]
+
+.training-section-status--text
+  for key, value in $training-section-status-color
+    &.{key}
+      color: value

package/components/upload.tsx

@@ -0,0 +1,103 @@
+import { MantineProvider, Progress } from '@mantine/core';
+import $ from 'jquery';
+import React from 'react';
+import { Dialog } from 'vj/components/dialog/index';
+import Notification from 'vj/components/notification';
+import {
+  delay, i18n, pjax, request, tpl,
+} from 'vj/utils';
+
+function onBeforeUnload(e) {
+  e.returnValue = '';
+}
+
+interface UploadOptions {
+  type?: string;
+  pjax?: boolean;
+  sidebar?: boolean;
+  singleFileUploadCallback?: (file: File) => any;
+  filenameCallback?: (file: File) => string;
+}
+export default async function uploadFiles(endpoint = '', files: File[] | FileList = [], options: UploadOptions = {}) {
+  let fileLabel = '';
+  let uploadLabel = '';
+  let fileProgress = 0;
+  let uploadProgress = 0;
+  let render = () => { };
+
+  function ProgressDialog() {
+    const [, setRender] = React.useState(0);
+    React.useEffect(() => {
+      render = () => setRender((r) => r + 1);
+    }, []);
+    return <MantineProvider>
+      <div
+        style={{
+          textAlign: 'center', marginBottom: '5px', color: 'gray', fontSize: 'small',
+        }}
+      >{uploadLabel}</div>
+      <Progress value={uploadProgress} />
+      <div
+        style={{
+          textAlign: 'center', margin: '5px 0', color: 'gray', fontSize: 'small',
+        }}
+      >{fileLabel}</div>
+      <Progress value={fileProgress} />
+    </MantineProvider>;
+  }
+
+  const dialog = new Dialog({
+    $body: $(tpl(<ProgressDialog />, true)),
+  });
+  try {
+    Notification.info(i18n('Uploading files...'));
+    window.addEventListener('beforeunload', onBeforeUnload);
+    dialog.open();
+    for (const i in files) {
+      if (Number.isNaN(+i)) continue;
+      const file = files[i];
+      const data = new FormData();
+      data.append('filename', options.filenameCallback?.(file) || file.name);
+      data.append('file', file);
+      if (options.type) data.append('type', options.type);
+      data.append('operation', 'upload_file');
+      await request.postFile(endpoint, data, {
+        xhr() { // eslint-disable-line
+          const xhr = new XMLHttpRequest();
+          xhr.upload.addEventListener('loadstart', () => {
+            uploadLabel = `[${+i + 1}/${files.length}] ${file.name} `;
+            uploadProgress = Math.round((+i + 1) / files.length * 100);
+            fileLabel = i18n('Uploading... ({0}%)', 0);
+            fileProgress = 0;
+            render();
+          });
+          xhr.upload.addEventListener('progress', (e) => {
+            if (e.lengthComputable) {
+              const percentComplete = Math.round((e.loaded / e.total) * 100);
+              if (percentComplete === 100) fileLabel = i18n('Processing...');
+              else fileLabel = i18n('Uploading... ({0}%)', percentComplete);
+              fileProgress = percentComplete;
+              render();
+            }
+          }, false);
+          return xhr;
+        },
+      });
+      await options.singleFileUploadCallback?.(file);
+    }
+    window.removeEventListener('beforeunload', onBeforeUnload);
+    Notification.success(i18n('File uploaded successfully.'));
+    if (options.pjax) {
+      let params = '';
+      if (options.type) params += `?d=${encodeURIComponent(options.type)}`;
+      if (options.sidebar) params += `${params ? '&' : '?'}sidebar=true`;
+      await pjax.request({ push: false, url: `${endpoint}${params || ''}` });
+    }
+  } catch (e) {
+    console.error(e);
+    Notification.error(i18n('File upload failed: {0}', e.toString()));
+  } finally {
+    await delay(500);
+    dialog.close();
+  }
+}

package/components/vote/vote.page.js

@@ -0,0 +1,43 @@
+import $ from 'jquery';
+import Notification from 'vj/components/notification';
+import Rotator from 'vj/components/rotator';
+import { AutoloadPage } from 'vj/misc/Page';
+import { request } from 'vj/utils';
+
+function setVoteState($container, value, status) {
+  const $num = $container.find('.vote-number');
+  Rotator.get($num).setValue(value);
+  $container.find('.vote-button').removeClass('active');
+  if (status === 1) {
+    $container.find('.upvote').addClass('active');
+  } else if (status === -1) {
+    $container.find('.downvote').addClass('active');
+  }
+}
+
+function applyRotator(element) {
+  Rotator.getOrConstruct($(element));
+}
+
+const votePage = new AutoloadPage('votePage', () => {
+  $('.vote-number.rotator--enabled').get().forEach((element) => applyRotator(element));
+  $(document).on('click', '.vote-button', (ev) => {
+    const $button = $(ev.currentTarget);
+    const $container = $button.closest('.vote');
+    const $form = $button.closest('form');
+    request
+      .post($form.attr('action'), {
+        operation: $button.attr('value'),
+        psid: $form.find('input[name="psid"]').val(),
+      })
+      .then((data) => {
+        setVoteState($container, data.vote, data.user_vote);
+      })
+      .catch((e) => {
+        Notification.error(`Failed to vote: ${e.message}`);
+      });
+    return false;
+  });
+});
+
+export default votePage;

package/components/zipDownloader/index.ts

@@ -0,0 +1,157 @@
+import { sleep } from '@hydrooj/utils/lib/common';
+import { dump } from 'js-yaml';
+import PQueue from 'p-queue';
+import streamsaver from 'streamsaver';
+import Notification from 'vj/components/notification';
+import {
+  api, createZipStream, i18n, pipeStream, request,
+} from 'vj/utils';
+import { ctx } from '../../context';
+
+let isBeforeUnloadTriggeredByLibrary = !window.isSecureContext;
+function onBeforeUnload(e) {
+  if (isBeforeUnloadTriggeredByLibrary) {
+    isBeforeUnloadTriggeredByLibrary = false;
+    return;
+  }
+  e.returnValue = '';
+}
+streamsaver.mitm = `${window.isSecureContext ? '' : 'https://hydro.ac'}/streamsaver/mitm.html`;
+
+const waitForWritableStream = window.WritableStream
+  ? Promise.resolve()
+  : import('web-streams-polyfill').then(({ WritableStream }) => {
+    window.WritableStream = WritableStream as any;
+    streamsaver.WritableStream = window.WritableStream;
+  });
+
+export default async function download(filename, targets) {
+  await waitForWritableStream;
+  const fileStream = streamsaver.createWriteStream(filename);
+  const queue = new PQueue({ concurrency: 5 });
+  const abortCallbackReceiver: any = {};
+  function stopDownload() { abortCallbackReceiver.abort?.(); }
+  let i = 0;
+  async function downloadFile(target, retry = 5) {
+    try {
+      let stream;
+      if (target.url) {
+        const response = await fetch(target.url);
+        if (!response.ok) throw response.statusText;
+        stream = response.body;
+      } else {
+        stream = new Blob([target.content]).stream();
+      }
+      return {
+        name: target.filename,
+        stream,
+      };
+    } catch (e) {
+      if (retry) {
+        Notification.warn(i18n('Download Error: {0} {1}, retry in 3 secs...', [target.filename, e.toString()]));
+        await sleep(3000);
+        return await downloadFile(target, retry - 1);
+      }
+      window.captureException?.(e);
+      stopDownload();
+      Notification.error(i18n('Download Error: {0} {1}', [target.filename, e.toString()]));
+    }
+    return {};
+  }
+  const handles = [];
+  for (const target of targets) {
+    handles.push(queue.add(() => downloadFile(target)));
+  }
+  queue.start();
+  const zipStream = createZipStream({
+    // eslint-disable-next-line consistent-return
+    async pull(ctrl) {
+      if (!handles[i]) return ctrl.close();
+      const { name, stream } = await handles[i];
+      i++;
+      ctrl.enqueue({
+        name,
+        stream: () => stream,
+      });
+    },
+  });
+  window.addEventListener('unload', stopDownload);
+  window.addEventListener('beforeunload', onBeforeUnload);
+  await pipeStream(zipStream, fileStream, abortCallbackReceiver);
+  window.removeEventListener('unload', stopDownload);
+  window.removeEventListener('beforeunload', onBeforeUnload);
+}
+
+declare module '../../api' {
+  interface EventMap {
+    'problemset/download': (pids: number[], name: string, targets: { filename: string, url?: string, content?: string }[]) => void;
+  }
+}
+
+export async function downloadProblemSet(pids, name = 'Export') {
+  Notification.info(i18n('Downloading...'));
+  const targets: { filename: string, url?: string, content?: string }[] = [];
+  try {
+    await ctx.serial('problemset/download', pids, name, targets);
+    for (const pid of pids) {
+      const pdoc = await api('problem', { id: +pid }, {
+        pid: 1,
+        owner: 1,
+        title: 1,
+        content: 1,
+        tag: 1,
+        nSubmit: 1,
+        nAccept: 1,
+        data: {
+          name: 1,
+        },
+        additional_file: {
+          name: 1,
+        },
+      });
+      targets.push({
+        filename: `${pid}/problem.yaml`,
+        content: dump({
+          pid: pdoc.pid,
+          owner: pdoc.owner,
+          title: pdoc.title,
+          tag: pdoc.tag,
+          nSubmit: pdoc.nSubmit,
+          nAccept: pdoc.nAccept,
+        }),
+      });
+      try {
+        const c = JSON.parse(pdoc.content);
+        if (c instanceof Array || typeof c === 'string') throw new Error('Invalid content');
+        for (const key of Object.keys(c)) {
+          targets.push({
+            filename: `${pid}/problem_${key}.md`,
+            content: typeof c[key] === 'string' ? c[key] : JSON.stringify(c[key]),
+          });
+        }
+      } catch (e) {
+        targets.push({
+          filename: `${pid}/problem.md`,
+          content: pdoc.content,
+        });
+      }
+      let { links } = await request.post(
+        `/d/${UiContext.domainId}/p/${pid}/files`,
+        { operation: 'get_links', files: (pdoc.data || []).map((i) => i.name), type: 'testdata' },
+      );
+      for (const filename of Object.keys(links)) {
+        targets.push({ filename: `${pid}/testdata/${filename}`, url: links[filename] });
+      }
+      ({ links } = await request.post(`/d/${UiContext.domainId}/p/${pid}/files`, {
+        operation: 'get_links', files: (pdoc.additional_file || []).map((i) => i.name), type: 'additional_file',
+      }));
+      for (const filename of Object.keys(links)) {
+        targets.push({ filename: `${pid}/additional_file/${filename}`, url: links[filename] });
+      }
+    }
+    await download(`${name}.zip`, targets);
+  } catch (e) {
+    window.captureException?.(e);
+    Notification.error(`${e.message} ${e.params?.[0]}`);
+  }
+}

package/constant/domain.js

@@ -0,0 +1,21 @@
+export const JOIN_METHOD_NONE = 0;
+export const JOIN_METHOD_ALL = 1;
+export const JOIN_METHOD_CODE = 2;
+export const JOIN_METHOD_RANGE = {
+  [JOIN_METHOD_NONE]: 'No user is allowed to join this domain',
+  [JOIN_METHOD_ALL]: 'Any user is allowed to join this domain',
+  [JOIN_METHOD_CODE]: 'Any user is allowed to join this domain with an invitation code',
+};
+
+export const JOIN_EXPIRATION_KEEP_CURRENT = 0;
+export const JOIN_EXPIRATION_UNLIMITED = -1;
+
+export const JOIN_EXPIRATION_RANGE = {
+  [JOIN_EXPIRATION_KEEP_CURRENT]: 'Keep current expiration',
+  3: 'In 3 hours',
+  24: 'In 1 day',
+  [24 * 3]: 'In 3 days',
+  [24 * 7]: 'In 1 week',
+  [24 * 30]: 'In 1 month',
+  [JOIN_EXPIRATION_UNLIMITED]: 'Never expire',
+};

package/constant/message.js

@@ -0,0 +1,5 @@
+export const FLAG_UNREAD = 1;
+export const FLAG_ALERT = 2;
+export const FLAG_RICHTEXT = 4;
+export const FLAG_INFO = 8;
+export const FLAG_I18N = 16;