@shzlx/ui-default 4.58.2

package/components/loader/loader.page.styl

@@ -0,0 +1,40 @@
+.page-loader
+  position: absolute
+  top: 0
+  left: 0
+  right: 0
+  bottom: 0
+  display: flex
+  align-items: center
+  justify-content: center
+  z-index: 9999
+
+.loader-container
+  position: absolute
+  left: 0
+  width: 100%
+  top: 0
+  height: 100%
+
+.loader
+  text-indent: -9999em
+  border: rem(5px) solid rgba($primary-color, .2)
+  border-left: rem(5px) solid $primary-color
+  animation: load8 1.1s infinite linear
+  border-radius: 50%
+  width: rem(50px)
+  height: rem(50px)
+  margin-left: rem(-25px)
+  margin-top: rem(-25px)
+  left: 50%
+  top: 50%
+  position: absolute
+
+@keyframes load8
+  0%
+    transform: rotate(0deg)
+
+  100%
+    transform: rotate(360deg)
+
+

package/components/mantine.page.tsx

@@ -0,0 +1,39 @@
+import { createTheme, Notification as MantineNotification } from '@mantine/core';
+import { AutoloadPage } from 'vj/misc/Page';
+
+const colorWhite = {
+  color: 'var(--mantine-color-white)',
+} as const;
+
+export const theme = createTheme({
+  components: {
+    Notification: MantineNotification.extend({
+      classNames: {
+        closeButton: 'mantine-notifications-close-button',
+      },
+      styles: {
+        root: {
+          backgroundColor: 'var(--notification-color, var(--mantine-primary-color-filled))',
+          paddingInlineStart: 'var(--mantine-spacing-xs)',
+        },
+        title: {
+          ...colorWhite,
+          fontSize: 'var(--mantine-font-size-md)',
+        },
+        icon: {
+          fontSize: '24px',
+          marginInlineEnd: 'var(--mantine-spacing-xs)',
+        },
+        description: colorWhite,
+        closeButton: colorWhite,
+      },
+    }),
+  },
+});
+
+export default new AutoloadPage('mantine', null, () => {
+  localStorage.setItem(
+    'mantine-color-scheme-value',
+    document.documentElement.className.includes('theme--dark') ? 'dark' : 'light',
+  );
+});

package/components/marker/Marker.js

@@ -0,0 +1,192 @@
+import $ from 'jquery';
+import _ from 'lodash';
+import Tooltip from 'vj/components/tooltip/Tooltip';
+import { delay, i18n } from 'vj/utils';
+
+const MARKER_ID = `marker_${Math.floor(Math.random() * 0xFFFFFF).toString(16)}`;
+const MARKER_OFFSET = 20;
+const MARKER_MAX_DISTANCE = 60;
+
+let markerInstance = null;
+
+function distanceToRect(px, py, rect) {
+  const cx = (rect.left + rect.right) / 2;
+  const cy = (rect.top + rect.bottom) / 2;
+  const dx = Math.max(Math.abs(px - cx) - (rect.right - rect.left) / 2, 0);
+  const dy = Math.max(Math.abs(py - cy) - (rect.bottom - rect.top) / 2, 0);
+  return Math.sqrt(dx * dx + dy * dy);
+}
+
+class Marker {
+  static exists() {
+    return markerInstance && document.getElementById(MARKER_ID);
+  }
+
+  constructor() {
+    if (Marker.exists()) return markerInstance;
+    if (markerInstance) {
+      markerInstance.destroy();
+    }
+    this.$dom = $(`
+      <div class="marker" id="${MARKER_ID}"><div class="marker__toolbar">
+        <div class="marker__action" data-color="#ffff00" data-tooltip="${i18n('Mark Yellow')}"><span class="marker__icon icon-yellow"></span></div>
+        <div class="marker__action" data-color="#47ff6f" data-tooltip="${i18n('Mark Green')}"><span class="marker__icon icon-green"></span></div>
+        <div class="marker__action" data-color="#ff3b30" data-tooltip="${i18n('Mark Red')}"><span class="marker__icon icon-red"></span></div>
+        <div class="marker__action" data-color="transparent" data-tooltip="${i18n('Clear Marks')}"><span class="icon icon-erase"></span></div>
+      </div></div>
+    `)
+      .appendTo('body');
+    this.$dom.find('.marker__toolbar').on('click', '.marker__action', this.onMarkerActionClick.bind(this));
+    this.$dom.on('mousedown', this.onMarkerMouseDown.bind(this));
+    this.isOpen = false;
+    this.bindedHandlers = false;
+    this._onKeyDown = this.onKeyDown.bind(this);
+    this._onScroll = _.throttle(this.onScroll.bind(this), 50);
+    this._onMouseDown = this.onMouseDown.bind(this);
+    this._onMouseMove = _.throttle(this.onMouseMove.bind(this), 50);
+    markerInstance = this;
+  }
+
+  markSelection(color) {
+    const selection = window.getSelection();
+    const range = selection.getRangeAt(0);
+    this.$container.attr('contentEditable', true);
+    if (range) {
+      // recover ranges
+      selection.removeAllRanges();
+      selection.addRange(range);
+    }
+    if (!document.execCommand('HiliteColor', false, color)) {
+      document.execCommand('BackColor', false, color);
+    }
+    this.$container.removeAttr('contentEditable');
+    if (range) {
+      // remove ranges after marking
+      selection.removeAllRanges();
+    }
+  }
+
+  showAtPosition($container, x, y) {
+    this.$container = $container;
+    this.$dom.css({
+      display: 'block',
+      opacity: 0,
+    });
+    const rect = this.$dom[0].getBoundingClientRect();
+    this.$dom.css({
+      left: x + MARKER_OFFSET,
+      top: y - (rect.bottom - rect.top) - MARKER_OFFSET,
+    });
+    this.isOpen = true;
+    this.$dom.addClass('open');
+    this.updateMarkerOpacity(x, y);
+    this.bindEventHandlersForClosing();
+  }
+
+  async close() {
+    if (!this.isOpen) {
+      return;
+    }
+    this.isOpen = false;
+    this.closeTooltipsImmediately();
+    this.unbindEventHandlers();
+    this.$dom
+      .css({ opacity: 0 })
+      .removeClass('open');
+    await delay(200);
+    if (!this.isOpen) {
+      this.$dom.hide();
+    }
+  }
+
+  closeTooltipsImmediately() {
+    const $elements = this.$dom.find('[data-tooltip]');
+    $elements.get().forEach((element) => {
+      const $el = $(element);
+      const tooltipInstance = Tooltip.get($el);
+      if (tooltipInstance) {
+        tooltipInstance.detach();
+      }
+    });
+  }
+
+  bindEventHandlersForClosing() {
+    if (this.bindedHandlers) {
+      return;
+    }
+    $(document).on('keydown', this._onKeyDown);
+    $(window).on('scroll', this._onScroll);
+    $(document).on('mousedown', this._onMouseDown);
+    $(document).on('mousemove', this._onMouseMove);
+    this.bindedHandlers = true;
+  }
+
+  unbindEventHandlers() {
+    if (!this.bindedHandlers) {
+      return;
+    }
+    $(document).off('keydown', this._onKeyDown);
+    $(window).off('scroll', this._onScroll);
+    $(document).off('mousedown', this._onMouseDown);
+    $(document).off('mousemove', this._onMouseMove);
+    this.bindedHandlers = false;
+  }
+
+  onMarkerActionClick(ev) {
+    const color = $(ev.currentTarget).attr('data-color');
+    this.markSelection(color);
+    this.close();
+  }
+
+  onMarkerMouseDown(ev) {
+    ev.stopPropagation();
+    ev.preventDefault();
+  }
+
+  onKeyDown() {
+    this.close();
+  }
+
+  onScroll() {
+    this.close();
+  }
+
+  onMouseMove(ev) {
+    this.updateMarkerOpacity(ev.clientX, ev.clientY);
+  }
+
+  onMouseDown() {
+    this.close();
+  }
+
+  updateMarkerOpacity(x, y) {
+    const markerRect = this.$dom[0].getBoundingClientRect();
+    const distance = distanceToRect(x, y, markerRect);
+    if (distance > MARKER_MAX_DISTANCE) {
+      this.close();
+      return;
+    }
+    this.$dom.css('opacity', 1 - (distance / MARKER_MAX_DISTANCE));
+  }
+
+  destroy() {
+    this.close();
+    this.$dom.remove();
+    markerInstance = null;
+  }
+}
+
+const MarkerInterface = {
+  close() {
+    if (!markerInstance) {
+      return;
+    }
+    markerInstance.close();
+  },
+  showAtPosition($container, x, y) {
+    const marker = new Marker();
+    marker.showAtPosition($container, x, y);
+  },
+};
+
+export default MarkerInterface;

package/components/marker/MarkerReactive.js

@@ -0,0 +1,55 @@
+import $ from 'jquery';
+import DOMAttachedObject from 'vj/components/DOMAttachedObject';
+import { delay } from 'vj/utils';
+import Marker from './Marker';
+
+export default class MarkerReactive extends DOMAttachedObject {
+  static DOMAttachKey = 'vjMarkerReactiveInstance';
+
+  static initFromDOM($dom) {
+    return MarkerReactive.getOrConstruct($dom);
+  }
+
+  static initAll() {
+    $('[data-marker-enabled]').get().forEach((dom) => MarkerReactive.initFromDOM($(dom)));
+  }
+
+  constructor($target) {
+    super($target);
+    this._onMouseUp = this.onMouseUp.bind(this);
+    this.bindEventHandlers();
+  }
+
+  bindEventHandlers() {
+    this.$dom.on('mouseup', this._onMouseUp);
+  }
+
+  unbindEventHandlers() {
+    this.$dom.off('mouseup', this._onMouseUp);
+  }
+
+  async onMouseUp(ev) {
+    await delay(1);
+    if (!window.getSelection) {
+      return;
+    }
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) {
+      return;
+    }
+    const range = selection.getRangeAt(0);
+    if (range.collapsed) {
+      return;
+    }
+    Marker.showAtPosition(this.$dom, ev.clientX, ev.clientY);
+  }
+
+  detach() {
+    if (this.detached) {
+      return;
+    }
+    this.unbindEventHandlers();
+    Marker.close();
+    super.detach();
+  }
+}

package/components/marker/marker.page.js

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

package/components/marker/marker.page.styl

@@ -0,0 +1,57 @@
+[data-marker-enabled]
+  outline: 0
+
+body > .marker
+  position: fixed
+  z-index: 100
+  display: none
+  box-shadow: 0 2px 7px rgba(#000, 0.3)
+  background: #FFF
+  font-size: rem($font-size-small)
+  transition: transform .1s ease-out, opacity .1s ease-out
+  transform: scale(0.8)
+  transform-origin: 0 100%
+  pointer-events: none
+  background: #FFF
+  padding: 1px
+  border: 1px solid #AAA
+
+  &.open
+    transform: none
+    pointer-events: auto
+
+  .marker__toolbar
+    padding: 1px
+    background: $toolbar-bg
+    white-space: nowrap
+    font-size: 0
+
+  .marker__action
+    display: inline-block
+    text-align: center
+    font-size: rem($font-size-icon)
+    vertical-align: top
+    cursor: pointer
+    padding: rem(8px)
+    color: $toolbar-fore
+    position: relative
+
+    &:hover
+      background: $toolbar-bg-hover
+      color: $toolbar-fore-hover
+
+  .marker__icon
+    display: block
+    margin: rem(2px)
+    width: rem(12px)
+    height: rem(12px)
+    border-radius: 50%
+
+    &.icon-yellow
+      background: #ffc100
+
+    &.icon-green
+      background: #54d651
+
+    &.icon-red
+      background: #ff3b30

package/components/media/media.page.js

@@ -0,0 +1,46 @@
+import $ from 'jquery';
+import { AutoloadPage } from 'vj/misc/Page';
+import { request } from 'vj/utils';
+
+export default new AutoloadPage('media', async () => {
+  async function parseMedia($dom = $(document.body)) {
+    const items = [];
+    const resolvers = [];
+    const users = $dom.find('div[data-user]');
+    const resolve = (ele, item) => {
+      items.push(item);
+      resolvers.push((html) => html && $(ele).replaceWith($(html)));
+    };
+    users.get().forEach((ele) => resolve(ele, { type: 'user', id: +$(ele).text() }));
+    $dom.find('.typo').addBack('.typo').get().forEach((el) => {
+      if (el.className.includes('no-media')) return;
+      $(el).find('a[href]').get().forEach((ele) => {
+        if ($(ele).parent().hasClass('user-profile-link')) return;
+        let target = $(ele).attr('href');
+        let { domainId } = UiContext;
+        if (target.startsWith(UiContext.url_prefix)) {
+          target.replace(UiContext.url_prefix, '');
+          if (!target.startsWith('/')) target = `/${target}`;
+        }
+        if (!target.startsWith('/') || target.startsWith('//')) return;
+        if (target.startsWith('/d/')) {
+          const [, , domain, ...extra] = target.split('/');
+          domainId = domain;
+          target = `/${extra.join('/')}`;
+        }
+        const [, category, data, extra] = target.split('/');
+        if (!data) return;
+        if (category === 'user' && Number.isInteger(+data) && !extra) resolve(ele, { type: 'user', id: +data });
+        if (category === 'p' && !extra) resolve(ele, { type: 'problem', id: data, domainId });
+        if (category === 'contest' && !extra) resolve(ele, { type: 'contest', id: data, domainId });
+        if (category === 'homework' && !extra) resolve(ele, { type: 'homework', id: data, domainId });
+      });
+    });
+    if (!items.length) return;
+    const res = await request.post(`/d/${UiContext.domainId}/media`, { items });
+    for (let i = 0; i < res.length; i++) resolvers[i](res[i]);
+  }
+
+  await parseMedia();
+  $(document).on('vjContentNew', (e) => parseMedia($(e.target)));
+});

package/components/menu/menu-heading.page.js

@@ -0,0 +1,28 @@
+import $ from 'jquery';
+import { AutoloadPage } from 'vj/misc/Page';
+import { tpl } from 'vj/utils';
+
+const menuHeadingPage = new AutoloadPage('menuHeadingPage', null, () => {
+  $('[data-heading-extract-to]').get().forEach((container) => {
+    const $container = $(container);
+    const $target = $('body').find($container.attr('data-heading-extract-to'));
+    if ($target.length === 0) return;
+    let $menu = $target.children('.menu');
+    if ($menu.length === 0) {
+      $menu = $(tpl`<ul class="menu collapsed"></ul>`).appendTo($target);
+      $target.children('.menu__link').addClass('expandable');
+    }
+    $container.find('[data-heading]').get().forEach((heading) => {
+      const $heading = $(heading);
+      $(tpl`
+        <li class="menu__item">
+          <a class="menu__link" href="#${$heading.attr('id') || ''}">
+            ${$heading.text()}
+          </a>
+        </li>
+      `).appendTo($menu);
+    });
+  });
+});
+
+export default menuHeadingPage;

package/components/menu/menu.page.js

@@ -0,0 +1,18 @@
+import $ from 'jquery';
+import { AutoloadPage } from 'vj/misc/Page';
+import { delay, slideDown } from 'vj/utils';
+
+function expandMenu($menu) {
+  slideDown($menu, 500, { opacity: 0 }, { opacity: 1 });
+}
+
+async function expandAllMenus() {
+  await delay(200);
+  $('.menu.collapsed').get().forEach((menu) => expandMenu($(menu)));
+}
+
+const menuPage = new AutoloadPage('menuPage', () => {
+  expandAllMenus();
+});
+
+export default menuPage;

package/components/menu/menu.page.styl

@@ -0,0 +1,68 @@
+.menu
+  padding: rem(5px 0)
+  font-size: rem($font-size-secondary)
+
+  .icon
+    font-size: rem($font-size-icon)
+    display: inline-block
+    margin-right: rem(5px)
+    line-height: rem(18px)
+    vertical-align: top
+
+  .hasjs &.collapsed
+    display: none
+
+.menu__item .menu
+  padding: 0
+
+.menu__link
+  outline: 0
+  text-align: left
+  display: block
+  width: 100%
+  padding: rem(12px $section-gap-h)
+  line-height: rem(18px)
+  color: $text-1-color
+  border-left: 3px solid transparent
+  position: relative
+
+  &.highlight
+    background: mix($highlight-color, #FFF, 10%)
+
+  &.expandable:after
+    font-family: $icon-font-name
+    font-size: rem($font-size-icon)
+    content: $icon-expand_more
+    position: absolute
+    right: $section-gap-h
+    top: 50%
+    line-height: 1
+    margin-top: rem($font-size-icon / -2)
+    transition: transform .2s ease-out-cubic
+    opacity: 0.85
+
+a.menu__link, button.menu__link
+  &.half
+    padding-right: 0
+    width: 50%
+  &.disabled
+    cursor: default
+    opacity: 0.5
+  &:hover
+    text-decoration: none
+  &:not(.disabled):hover
+    color: $text-1-color
+    background: $menu-item-bg-color-hover
+    border-color: darken($primary-color, 10%)
+  &.active, &.active:hover
+    border-color: darken($secondary-color, 30%)
+    background: $secondary-color
+    color: #FFF
+
+.menu__item .menu .menu__link
+  padding-left: rem($section-gap-h + 10px)
+
+.menu__seperator
+  height: 1px
+  border-top: 1px solid #EEE
+  margin: rem(5px 0)