@shzlx/ui-default 4.58.2

package/components/calendar/index.js

@@ -0,0 +1,367 @@
+/* eslint-disable no-lone-blocks */
+import $ from 'jquery';
+import _ from 'lodash';
+import moment from 'moment';
+import { tpl } from 'vj/utils';
+
+export default class Calendar {
+  constructor(events) {
+    this.$dom = $(tpl`
+      <div class="calendar">
+        <div class="calendar__header">
+          <button name="prev"><span class="icon icon-chevron_left"></span></button>
+          <h1 class="calendar__header__title"></h1>
+          <button name="next"><span class="icon icon-chevron_right"></span></button>
+        </div>
+        <div class="calendar__week-title">
+          <table>
+            <thead><tr>
+              <th>SUN</th>
+              <th>MON</th>
+              <th>TUE</th>
+              <th>WED</th>
+              <th>THU</th>
+              <th>FRI</th>
+              <th>SAT</th>
+            </tr></thead>
+          </table>
+        </div>
+        <div class="calendar__body-container"></div>
+      </div>
+    `);
+    this.events = events.map((ev) => ({
+      ...ev,
+      beginAt: moment(ev.beginAt),
+      endAt: moment(ev.endAt),
+      maskFrom: ev.maskFrom ? moment(ev.maskFrom) : null,
+    }));
+    this.$dom.find('[name="prev"]').click(() => this.navToPrev());
+    this.$dom.find('[name="next"]').click(() => this.navToNext());
+    this.$lastBody = null;
+    this.navToToday();
+  }
+
+  getDom() {
+    return this.$dom;
+  }
+
+  navToToday() {
+    if (this.animating) {
+      return;
+    }
+    this.current = moment().date(1);
+    this.update();
+  }
+
+  navToNext() {
+    if (this.animating) {
+      return;
+    }
+    this.current.add('months', 1);
+    this.update(1);
+  }
+
+  navToPrev() {
+    if (this.animating) {
+      return;
+    }
+    this.current.subtract('months', 1);
+    this.update(-1);
+  }
+
+  update(direction = 0) {
+    this.updateHeader();
+    this.updateBody(direction);
+  }
+
+  updateHeader() {
+    this.$dom.find('.calendar__header__title').text(this.current.format('MMMM YYYY'));
+  }
+
+  async updateBody(direction) {
+    this.animating = true;
+    const $newBody = this.buildBody();
+    $newBody.appendTo(this.$dom.find('.calendar__body-container'));
+    if (this.$lastBody !== null) {
+      this.$lastBody
+        .addClass('exit')
+        .transition({
+          y: direction * 100,
+          opacity: 0,
+        }, {
+          duration: 500,
+          easing: 'easeOutCubic',
+        });
+      await $newBody
+        .css({
+          y: -direction * 100,
+          opacity: 0,
+        })
+        .transition({
+          y: 0,
+          opacity: 1,
+        }, {
+          duration: 500,
+          easing: 'easeOutCubic',
+        })
+        .promise();
+      this.$lastBody.remove();
+    }
+    this.$lastBody = $newBody;
+    this.animating = false;
+  }
+
+  buildBody() {
+    const data = this.buildBodyData();
+    const $body = $('<div class="calendar__body"></div>');
+    data.forEach((week) => {
+      const $row = $(tpl`<div class="calendar__row">
+        <div class="calendar__row__bg"><table><tbody><tr></tr></tbody></table></div>
+        <div class="calendar__row__content"><table><thead><tr></tr></thead><tbody></tbody></table></div>
+      </div>`);
+      const $bgContainer = $row.find('.calendar__row__bg tr');
+      const $numContainer = $row.find('.calendar__row__content thead tr');
+      const $bannerContainer = $row.find('.calendar__row__content tbody');
+      week.days.forEach((day) => {
+        const isInactive = day.active ? '' : 'is-inactive';
+        const isCurrentDay = day.current ? 'is-current-day' : '';
+        const today = day.current ? ' (TODAY)' : '';
+        $bgContainer.append($('<td></td>').addClass(isInactive).addClass(isCurrentDay));
+        $numContainer.append($(tpl`<th>${day.date.format('D')}${today}</th>`).addClass(isInactive).addClass(isCurrentDay));
+      });
+      week.banners.forEach((banners) => {
+        const $tr = $('<tr/>');
+        banners.forEach((bannerSpan) => {
+          if (!bannerSpan.banner) {
+            $tr.append(tpl`<td colspan="${bannerSpan.span}"></td>`);
+            return;
+          }
+          const $cell = $(tpl`<td colspan="${bannerSpan.span}"></td>`);
+          const $banner = $(tpl`
+            <a
+              href="${bannerSpan.banner.event.link}"
+              class="calendar__banner color-${bannerSpan.banner.event.colorIndex}"
+            >${bannerSpan.banner.mask ? bannerSpan.banner.event.maskTitle : bannerSpan.banner.event.title}</a>
+          `);
+          if (bannerSpan.banner.mask) {
+            $banner.addClass('is-masked');
+          }
+          if (bannerSpan.banner.beginTrunc) {
+            $banner.addClass('is-trunc-begin');
+          } else if (bannerSpan.banner.beginSnap) {
+            $banner.addClass('is-snap-begin');
+          }
+          if (bannerSpan.banner.endTrunc) {
+            $banner.addClass('is-trunc-end');
+          } else if (bannerSpan.banner.endSnap) {
+            $banner.addClass('is-snap-end');
+          }
+          $cell.append($banner);
+          $tr.append($cell);
+        });
+        $bannerContainer.append($tr);
+      });
+      $body.append($row);
+    });
+    return $body;
+  }
+
+  buildBodyData() {
+    const days = [];
+    {
+      // back fill
+      const base = this.current.clone();
+      const dayOfWeek = base.day();
+      if (dayOfWeek > 0) {
+        base.subtract(dayOfWeek + 1, 'days');
+        for (let i = dayOfWeek; i > 0; --i) {
+          days.push({
+            active: false,
+            date: base.add(1, 'days').clone(),
+          });
+        }
+      }
+    }
+    {
+      // current month
+      const base = this.current.clone();
+      while (base.month() === this.current.month()) {
+        days.push({
+          active: true,
+          date: base.clone(),
+        });
+        base.add(1, 'days');
+      }
+    }
+    {
+      // forward fill
+      const base = this.current.clone().add(1, 'months').subtract(1, 'days');
+      const dayOfWeek = base.day();
+      if (dayOfWeek < 6) {
+        for (let i = dayOfWeek; i < 6; ++i) {
+          days.push({
+            active: false,
+            date: base.add(1, 'days').clone(),
+          });
+        }
+      }
+    }
+
+    const now = moment();
+    days.forEach((day) => {
+      day.current = day.date.isSame(now, 'day');
+    });
+
+    const daysByWeek = _.chunk(days, 7);
+
+    const numberOfWeeks = days.length / 7;
+    const bannersByWeek = _.fill(Array.from({ length: numberOfWeeks }), 1).map(() => []);
+    const beginDate = days[0].date.clone();
+    const endDate = _.last(days).date.clone();
+
+    // cut events by week to banners
+    this.events.forEach((ev) => {
+      if (ev.endAt.isBefore(ev.beginAt, 'day')) {
+        return;
+      }
+      if (ev.endAt.isBefore(beginDate, 'day') || ev.beginAt.isAfter(endDate, 'day')) {
+        return;
+      }
+      if (ev.beginAt.hour() >= 22) {
+        ev.beginAt.add(1, 'day').startOf('day');
+      }
+      if (ev.endAt.hour() <= 2) {
+        ev.endAt.subtract(1, 'day').endOf('day');
+      }
+      let [bannerBegin, bannerBeginTruncated] = [ev.beginAt.clone(), false];
+      if (bannerBegin.isBefore(beginDate, 'day')) {
+        [bannerBegin, bannerBeginTruncated] = [beginDate.clone(), true];
+      }
+      do {
+        const bannerEndMax = bannerBegin.clone().endOf('week');
+        let [bannerEnd, bannerEndTruncated] = [ev.endAt.clone(), false];
+        if (bannerEnd.isAfter(bannerEndMax, 'day')) {
+          [bannerEnd, bannerEndTruncated] = [bannerEndMax, true];
+        }
+        const weekIndex = bannerBegin.clone().startOf('day').diff(beginDate.clone().startOf('day'), 'week');
+        bannersByWeek[weekIndex].push({
+          beginAt: bannerBegin.startOf('day'),
+          beginTrunc: bannerBeginTruncated,
+          endAt: bannerEnd.endOf('day'),
+          endTrunc: bannerEndTruncated,
+          event: ev,
+        });
+        if (!bannerEndTruncated) {
+          break;
+        }
+        [bannerBegin, bannerBeginTruncated] = [bannerEnd.clone().add(1, 'day'), true];
+      } while (!bannerBegin.isAfter(endDate, 'day'));
+    });
+
+    // layout banners
+    const layout = bannersByWeek
+      .map((banners) => _
+        .sortBy(banners, [
+          (banner) => banner.beginAt.valueOf(),
+          (banner) => (banner.beginTrunc ? 0 : 1), // truncated events first
+          (banner) => -banner.endAt.valueOf(), // long events first
+        ]))
+      .map((banners) => {
+        const dayBitmap = _
+          .fill(Array.from({ length: 7 }), 1)
+          .map(() => []);
+        banners.forEach((banner) => {
+          const beginDay = banner.beginAt.day();
+          const endDay = banner.endAt.day();
+          // find available space
+          const vIndexMax = _.max(_
+            .range(beginDay, endDay + 1)
+            .map((day) => dayBitmap[day].length));
+          let vIndex = 0;
+          for (; vIndex < vIndexMax; ++vIndex) {
+            if (_.every(_
+              .range(beginDay, endDay + 1)
+              .map((day) => !dayBitmap[day][vIndex]), // eslint-disable-line
+            )) break;
+          }
+          // fill space
+          for (let i = beginDay; i <= endDay; ++i) {
+            dayBitmap[i][vIndex] = banner;
+          }
+        });
+        // merge adjacent cells and arrange banners by vertical index
+        const vMaxLength = _.max(_.range(0, 7).map((day) => dayBitmap[day].length));
+        const weekBanners = _
+          .fill(Array.from({ length: vMaxLength }), 1)
+          .map(() => []);
+        for (let vIndex = 0; vIndex < vMaxLength; ++vIndex) {
+          let last = { span: 1, banner: dayBitmap[0][vIndex] };
+          weekBanners[vIndex].push(last);
+          for (let day = 1; day < 7; ++day) {
+            const banner = dayBitmap[day][vIndex];
+            if (banner !== last.banner) {
+              last = { span: 1, banner };
+              weekBanners[vIndex].push(last);
+            } else {
+              last.span++;
+            }
+          }
+        }
+        // cut banners by masked areas, scanning from left to right
+        weekBanners.forEach((bannerSpans) => {
+          for (let i = 0; i < bannerSpans.length; ++i) {
+            const { banner } = bannerSpans[i];
+            if (!banner) {
+              continue;
+            }
+            if (banner.mask) {
+              continue;
+            }
+            if (!banner.event.maskFrom) {
+              continue;
+            }
+            if (banner.event.maskFrom.isSame(banner.event.endAt)) {
+              // do not show masks if maskFrom === endAt
+              continue;
+            }
+            if (banner.event.endAt.isSame(banner.event.beginAt, 'day')) {
+              // do not show masks if endAt - beginAt <= 1 day
+              continue;
+            }
+            if (banner.event.maskFrom.isAfter(banner.endAt, 'day')) {
+              // we are not in the time region for masking
+              continue;
+            }
+            if (banner.event.maskFrom.isSameOrBefore(banner.beginAt, 'day')) {
+              // mask begins before this banner: replace current banner with masked banner
+              banner.mask = true;
+            } else {
+              // mask begins during this banner: cut current banner into two pieces
+              const newBanner = {
+                ...banner,
+                beginAt: banner.event.maskFrom.clone(),
+                beginSnap: true,
+                beginTrunc: false,
+                mask: true,
+              };
+              const newBannerSpan = {
+                span: newBanner.endAt.day() - newBanner.beginAt.day() + 1,
+                banner: newBanner,
+              };
+              banner.endAt = banner.event.maskFrom.clone().subtract(1, 'day');
+              banner.endSnap = true;
+              bannerSpans[i].span -= newBannerSpan.span;
+              bannerSpans.splice(i + 1, 0, newBannerSpan);
+              i++;
+            }
+          }
+        });
+        return weekBanners;
+      });
+    return daysByWeek
+      .map((daysInWeek, weekIndex) => ({
+        days: daysInWeek,
+        banners: layout[weekIndex],
+      }));
+  }
+}

package/components/clipboard.page.ts

@@ -0,0 +1,23 @@
+import Clipboard from 'clipboard';
+import Notification from 'vj/components/notification';
+import { AutoloadPage } from 'vj/misc/Page';
+import { base64, i18n, substitute } from 'vj/utils';
+
+export default new AutoloadPage('clipboard', () => {
+  $('[data-copy]').get().forEach((el) => {
+    const data = $(el).attr('data-copy');
+    const decoded = base64.decode(data);
+    const clip = new Clipboard(el, { text: () => decoded });
+    clip.on('success', () => {
+      Notification.success(substitute(i18n('"{data}" copied to clipboard!'), { data: decoded }), 2000);
+    });
+    clip.on('error', () => {
+      Notification.error(substitute(i18n('Copy "{data}" failed :('), { data: decoded }));
+    });
+  });
+  $('[data-copylink]').each(function () {
+    const clip = new Clipboard(this, { text: () => new URL(this.dataset.copylink, document.location.href).toString() });
+    clip.on('success', () => Notification.success(i18n('Link copied to clipboard!')));
+    clip.on('error', () => Notification.error(i18n('Copy failed :(')));
+  });
+});

package/components/contest/contest.page.styl

@@ -0,0 +1,119 @@
+.contest-type-tag
+.contest-tag
+.contest-tag-rated
+  font-size: rem($font-size-small)
+  display: inline-block
+  line-height: rem(22px)
+  padding: rem(0 10px)
+  vertical-align: middle
+  border-radius: rem(12px)
+
+  &:hover
+    text-decoration: none
+    color: #FFF !important
+
+.contest-tag-rated
+  background: orange
+  color: #FFF
+
+  .icon
+    margin-right: rem(5px)
+
+.contest-type-tag
+  &, &:visited
+    &, .supplementary &
+      color: #FFF
+
+  .icon
+    margin-right: rem(5px)
+
+for key, value in $contest-color
+  .contest-type--{key} .contest-type-tag
+    background: value
+
+    &:hover
+      background: lighten(value, 20%)
+
+.contest-tag
+  border: 1px solid $supplementary-border-color
+
+  &:hover
+    background: $primary-color
+    border-color: $primary-color
+
+.contest-timer
+  position: fixed;
+  left: 0;
+  top: 48px;
+  z-index: 10000;
+  +mobile()
+    visibility: hidden !important;
+
+.contest-problems
+  font-size: 0.9375rem;
+  font-weight: 400;
+  line-height: 1.375rem;
+  text-align: left;
+  box-sizing: border-box;
+  font-variant-ligatures: none!important;
+  display: grid;
+  grid-template-columns: repeat(auto-fit,minmax(1.5rem,1fr));
+  justify-content: center;
+  row-gap: 0.75rem;
+  column-gap: 0.5rem;
+  padding-bottom: 0.5rem;
+  width: rem(180px);
+
+  +mobile()
+    display: none;
+
+  > a
+    text-decoration: none;
+    background-color: transparent;
+    cursor: pointer;
+    display: flex;
+    height: 1.5rem;
+    width: 1.5rem;
+    align-items: center;
+    justify-content: space-around;
+    border-radius: 0.375rem;
+    position: relative;
+    transition: opacity 0.2s;
+    color: grey;
+    &.pass
+      color: green;
+      &:before
+        background: green;
+    &.fail
+      color: red;
+      &:before
+        background: red;
+    &.pending
+      color: cyan;
+      &:before
+        background: cyan;
+
+    &:after
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      box-sizing: border-box;
+      border: 2px solid currentColor;
+      border-radius: 6px;
+      opacity: 0.3;
+    
+    &.active:after
+      border: 3px solid cyan;
+
+    &:before
+      opacity: 0.5;
+    
+    &.pass, &.fail
+      &:not(:hover) .id
+        display: none;
+      
+      &:hover .icon
+        display: none;

package/components/contest/contest.page.ts

@@ -0,0 +1,23 @@
+import $ from 'jquery';
+import Notification from 'vj/components/notification';
+import { AutoloadPage } from 'vj/misc/Page';
+import { delay, i18n, request } from 'vj/utils';
+
+const contestPage = new AutoloadPage('contestPage', () => {
+  $('[data-contest-code]').on('click', (ev) => {
+    ev.preventDefault();
+    // eslint-disable-next-line no-alert
+    const code = prompt(i18n('Invitation code:'));
+    request.post('', {
+      operation: 'attend',
+      code,
+    }).then(() => {
+      Notification.success(i18n('Successfully attended'));
+      delay(1000).then(() => window.location.reload());
+    }).catch((e) => {
+      Notification.error(e.message || e);
+    });
+  });
+});
+
+export default contestPage;

package/components/contest/contest_sidebar.page.styl

@@ -0,0 +1,21 @@
+.contest-sidebar__bg
+  display: block
+  background: #67AABB url(problem-contest-bg.png) right top no-repeat
+  color: #FFF !important
+  font-size: rem($font-size)
+  padding: rem(20px 0)
+
+  +retina()
+    background-image: url(problem-contest-bg@2x.png)
+    background-size: 131px 150px
+
+  h1
+    font-size: rem($font-size-title)
+    color: #FFF
+    text-shadow: 0 1px 3px rgba(#000, 0.5)
+
+  &:hover
+    text-decoration: none
+
+  .contest-sidebar__status
+    margin-top: rem(20px)

package/components/customFont.page.tsx

@@ -0,0 +1,90 @@
+import { CustomSelectAutoComplete } from '@hydrooj/components';
+import $ from 'jquery';
+import { AutoloadPage } from 'vj/misc/Page';
+import { i18n, tpl } from 'vj/utils';
+import { ActionDialog } from './dialog';
+
+async function getAvailableFonts() {
+  const fonts = await (window as any).queryLocalFonts();
+  const result = {};
+  for (const font of fonts) result[font.family] ||= font.fullName;
+  return Object.entries(result).map(([family, fullName]) => ({
+    id: family,
+    name: family === fullName ? family : `${fullName} (${family})`,
+    fullName,
+  }));
+}
+
+const customFont = localStorage.getItem('customFont');
+const customCodeFont = localStorage.getItem('customCodeFont');
+
+export default new AutoloadPage('customFont', (pageName) => {
+  let dialog;
+  let selection = '';
+  let handle = null;
+
+  async function showDialog(saveKey: string) {
+    if (!dialog) {
+      const fonts = await getAvailableFonts();
+      dialog = new ActionDialog({
+        $body: $(tpl(
+          <CustomSelectAutoComplete
+            ref={(el) => { handle = el; }}
+            allowEmptyQuery={false}
+            data={fonts}
+            renderItem={(item) => <div style={{ fontFamily: item.id }}>{item.name}</div>}
+          />, true,
+        )),
+        onDispatch: (action) => {
+          selection = handle.getSelectedItems()?.[0]?.id;
+          return action !== 'ok' || selection;
+        },
+        cancelByEsc: false,
+        cancelByClickingBack: false,
+      });
+    }
+    dialog.open().then((action) => {
+      console.log(action, saveKey, selection);
+      if (action === 'ok' && selection) {
+        localStorage.setItem(saveKey, selection);
+        window.location.reload();
+      } else {
+        localStorage.removeItem(saveKey);
+      }
+    });
+  }
+
+  function FontSelectButton(props: { saveKey: string, label: string, value: string }) {
+    return <div className="medium-6 columns"><label>
+      {i18n(props.label)}
+      <div><button className="button inline" data-show-font-dialog={props.saveKey}>
+        {props.value ? i18n('Using custom font: {0}', props.value) : i18n('Find custom font')}
+      </button></div>
+    </label></div>;
+  }
+
+  if (pageName === 'home_preference' && 'queryLocalFonts' in window) {
+    $('[name="form_item_fontFamily"]').parent().parent().parent().append($(tpl(
+      <FontSelectButton saveKey="customFont" label="Select Custom Font" value={customFont} />,
+    )));
+    $('[name="form_item_codeFontFamily"]').parent().parent().parent().append($(tpl(
+      <FontSelectButton saveKey="customCodeFont" label="Select Custom Code Font" value={customCodeFont} />,
+    )));
+    $(document).on('click', '[data-show-font-dialog]', (ev) => {
+      ev.preventDefault();
+      showDialog(ev.target.dataset.showFontDialog);
+    });
+  }
+}, () => {
+  const fontBlock = Array.from(document.head.children).find((el) => el.tagName === 'STYLE' && el.textContent?.includes('--code-font-family'));
+  if (fontBlock) {
+    if (customFont) {
+      fontBlock.textContent = fontBlock.textContent?.replace(/--font-family:/, `--font-family: "${customFont}", `);
+    }
+    if (customCodeFont) {
+      fontBlock.textContent = fontBlock.textContent?.replace(/--code-font-family:/, `--code-font-family: "${customCodeFont}", `);
+    }
+  } else {
+    console.warn('No font style block found');
+  }
+});