@shzlx/ui-default 4.58.2

package/components/signin/signInDialog.page.js

@@ -0,0 +1,84 @@
+import { browserSupportsWebAuthnAutofill, startAuthentication } from '@simplewebauthn/browser';
+import $ from 'jquery';
+import responsiveCutoff from 'vj/breakpoints.json';
+import DomDialog from 'vj/components/dialog/DomDialog';
+import { alert } from 'vj/components/dialog/index';
+import Notification from 'vj/components/notification';
+import { AutoloadPage } from 'vj/misc/Page';
+import { i18n, mediaQuery, request } from 'vj/utils';
+
+const signinDialogPage = new AutoloadPage('signinDialogPage', null, () => {
+  const signInDialog = DomDialog.getOrConstruct($('.dialog--signin'), {
+    cancelByClickingBack: true,
+    cancelByEsc: true,
+  });
+
+  let authnInitialized = false;
+
+  async function initPasskey() {
+    if (authnInitialized || !window.isSecureContext) return;
+    authnInitialized = true;
+    const support = await browserSupportsWebAuthnAutofill();
+    if (!support) return;
+    const authnInfo = await request.get('/user/webauthn', { login: true });
+    if (!authnInfo.authOptions) return;
+    const result = await startAuthentication({ optionsJSON: authnInfo.authOptions, useBrowserAutofill: true })
+      .catch((e) => {
+        Notification.error(i18n('Failed to get credential: {0}', e));
+        return null;
+      });
+    if (!result) return;
+    try {
+      const authn = await request.post('/user/webauthn', {
+        result,
+      });
+      if (authn.url) window.location.href = authn.url;
+      else if (authn.error) throw new Error(authn.error);
+    } catch (err) {
+      Notification.error(err.message);
+      console.error(err);
+    }
+  }
+
+  if (window.location.href.endsWith('/login')) initPasskey();
+
+  function show() {
+    signInDialog.show();
+    initPasskey();
+  }
+
+  // don't show quick login dialog if in mobile
+  if ($('[name="nav_login"]').length > 0) {
+    // nav
+    $('[name="nav_login"]').on('click', (ev) => {
+      if (mediaQuery.isBelow(responsiveCutoff.mobile)) return;
+      if (ev.shiftKey || ev.metaKey || ev.ctrlKey) return;
+      show();
+      ev.preventDefault();
+    });
+  }
+
+  if ($('.dialog--signin').length > 0) {
+    // dialog
+    $('[name="dialog--signin__close"]').on('click', () => {
+      signInDialog.hide();
+    });
+  }
+
+  window.showSignInDialog = () => {
+    if (mediaQuery.isBelow(responsiveCutoff.mobile)) {
+      if ($('[name="nav_login"]').length > 0) {
+        window.location.href = $('[name="nav_login"]').attr('href');
+        return;
+      }
+    }
+    show();
+  };
+
+  $('[data-lostpass]').on('click', (e) => {
+    e.preventDefault();
+    alert(i18n('Relax and try to remember your password.'));
+  });
+});
+
+export default signinDialogPage;

package/components/signin/signin_dialog.page.styl

@@ -0,0 +1,57 @@
+$signin_form_width = 320px
+$signin_form_gap_v = 50px
+$signin_form_gap_h = 50px
+$signin_dialog_expand_v = 50px
+$signin_dialog_expand_h = 30px
+
+.dialog--signin__bg
+  background: rgba(#000, 0.8)
+  position: absolute
+  left: rem(-($signin_dialog_expand_h))
+  top: rem($signin_dialog_expand_v)
+  bottom: rem($signin_dialog_expand_v)
+  right: rem(-($signin_dialog_expand_h))
+  z-index: 1
+  box-shadow: 0 3px 10px rgba(#000, 0.3)
+
+.dialog--signin__main
+  background: #FFF
+  width: rem($signin_form_width)
+  padding: rem($signin_form_gap_v $signin_form_gap_h)
+  margin-right: rem($signin_form_width - $signin_dialog_expand_h)
+  position: relative
+  z-index: 2
+  box-shadow: 0 0 30px rgba(#000, 0.6)
+  
+.dialog--signin .dialog--signin__main:first-child
+  margin-right: 0
+
+.dialog--signin__side
+  position: absolute
+  right: 0
+  width: rem($signin_form_width)
+  padding: rem(0 $signin_form_gap_h)
+  transform: translateY(-50%)
+  top: 50%
+  color: #DDD
+
+.dialog--signin__side h1
+  color: #FFF
+
+.dialog--signin__side p
+  margin: 1em 0
+  line-height: 1.2em
+
+.dialog--signin__title
+  text-align: center
+  color: lighten($primary-color, 20%)
+
+.dialog--signin__note
+  margin: 0.3em 0 2em 0
+  text-align: center
+  font-size: rem($font-size-secondary)
+
+.dialog--signin__close-container
+  position: absolute
+  right: rem(15px)
+  top: rem(15px)

package/components/smoothscroll/smoothscroll.page.js

@@ -0,0 +1,44 @@
+import 'jquery.easing';
+
+import $ from 'jquery';
+import { AutoloadPage } from 'vj/misc/Page';
+
+const smoothScrollPage = new AutoloadPage('smoothScrollPage', null, () => {
+  const HISTORY_SUPPORT = !!(typeof window.history === 'object' && window.history.pushState);
+  const ANCHOR_REGEX = /^#[^ ]+$/;
+  const OFFSET_HEIGHT = 10 + ($('.nav').height() || 0);
+
+  function scrollIfAnchor(href, pushToHistory) {
+    if (!ANCHOR_REGEX.test(href)) return false;
+    const match = document.getElementById(href.slice(1));
+    if (!match) return false;
+    const rect = match.getBoundingClientRect();
+    const anchorOffset = window.pageYOffset + rect.top - OFFSET_HEIGHT;
+    $('html,body').animate({ scrollTop: anchorOffset }, 200, 'easeOutCubic');
+    if (HISTORY_SUPPORT && pushToHistory) {
+      window.history.pushState({}, document.title, window.location.pathname + href);
+    }
+    return true;
+  }
+
+  function scrollToCurrent() {
+    scrollIfAnchor(window.location.hash);
+  }
+
+  function delegateAnchors(e) {
+    if (e.metaKey || e.ctrlKey || e.shiftKey) return;
+    const elem = e.target;
+    if (
+      elem.nodeName === 'A'
+      && scrollIfAnchor(elem.getAttribute('href'), true)
+    ) e.preventDefault();
+  }
+
+  $(document).on('vjPageFullyInitialized', () => {
+    scrollToCurrent();
+    window.addEventListener('hashchange', scrollToCurrent);
+    document.body.addEventListener('click', delegateAnchors);
+  });
+});
+
+export default smoothScrollPage;

package/components/socket/index.ts

@@ -0,0 +1,68 @@
+import ReconnectingWebSocket from 'reconnecting-websocket';
+import { Shorty } from 'shorty.js';
+
+export default class Sock {
+  sock: ReconnectingWebSocket;
+  interval: NodeJS.Timeout;
+
+  constructor(public url: string, nocookie = false, shorty = false) {
+    const i = new URL(url, window.location.href);
+    if (shorty) {
+      i.searchParams.append('shorty', 'on');
+    }
+    if (i.host !== window.location.host && !nocookie && document.cookie.includes('sid=')) {
+      i.searchParams.append('sid', document.cookie.split('sid=')[1].split(';')[0]);
+    }
+    i.protocol = i.protocol.replace('http', 'ws');
+    this.url = i.toString();
+    this.sock = new ReconnectingWebSocket(this.url, [], {
+      maxReconnectionDelay: 10000,
+      maxRetries: 100,
+    });
+    this.sock.onopen = () => {
+      console.log('Connected');
+      this.onopen?.(this.sock);
+      this.interval = setInterval(() => this.sock.send('ping'), 30000);
+    };
+    this.sock.onclose = ({ code, reason }) => {
+      console.warn('Connection closed, ', code, reason);
+      if (code >= 4000) this.close();
+      if (this.interval) clearInterval(this.interval);
+      this.onclose?.(code, reason);
+    };
+    let decompress: Shorty = null;
+    this.sock.onmessage = (message) => {
+      if (message.data === 'pong') return;
+      if (message.data === 'ping') {
+        this.sock.send('pong');
+        return;
+      }
+      if (message.data === 'shorty') {
+        decompress = new Shorty();
+        return;
+      }
+      if (process.env.NODE_ENV !== 'production') console.log('Sock.onmessage: ', message);
+      let data = message.data;
+      if (decompress) data = decompress.inflate(data);
+      const msg = JSON.parse(data);
+      if (msg.error === 'PermissionError' || msg.error === 'PrivilegeError') this.close();
+      else this.onmessage?.(message, data);
+    };
+  }
+
+  onmessage: (message: MessageEvent<any>, data: string) => void;
+  onclose: (code: number, reason: string) => void;
+  onopen: (sock: ReconnectingWebSocket) => void;
+
+  on(event: 'message' | 'close' | 'open', callback: (...args: any[]) => void) {
+    this[`on${event}`] = callback;
+  }
+
+  send(data) {
+    this.sock.send(data);
+  }
+
+  close() {
+    this.sock?.close?.();
+  }
+}

package/components/star/star.page.styl

@@ -0,0 +1,20 @@
+.star
+  border: 0
+  background: none
+  outline: 0
+  padding: 0
+  margin: 0
+  color: gray
+
+  .starred--show
+    display: none
+  .starred--hide
+    display: block
+
+  &.activated
+    color: orange
+    .starred--show
+      display: block
+    .starred--hide
+      display: none
+

package/components/star/star.page.ts

@@ -0,0 +1,58 @@
+import $ from 'jquery';
+import { AutoloadPage } from 'vj/misc/Page';
+import { i18n, request, tpl } from 'vj/utils';
+
+function setStarButtonState($starButton: JQuery<any>, star: boolean) {
+  if (star) {
+    $starButton.addClass('activated');
+  } else {
+    $starButton.removeClass('activated');
+  }
+}
+
+const starPage = new AutoloadPage('starPage', () => {
+  function render(container) {
+    const eles = $(container).find('[data-star]');
+    for (const el of eles) {
+      if ($(el).find('.star-form').length) continue;
+      const action = $(el).closest('[data-star-action]').data('star-action');
+      const star = ['true', true].includes($(el).data('star')) ? 1 : 0;
+      $(tpl`<form class="star-form form--inline" action="${action}" method="post">
+        <input type="hidden" name="operation" value="star">
+        <input type="hidden" name="star" value="${star ? 'false' : 'true'}">
+        <button class="star${star ? ' activated' : ''}" type="submit">
+          <span class="starred--hide"><span class="icon icon-star--outline" data-tooltip="${i18n('Star')}"></span></span>
+          <span class="starred--show"><span class="icon icon-star" data-tooltip="${i18n('Unstar')}"></span></span>
+        </button>
+      </form>`).prependTo($(el));
+    }
+  }
+
+  render(document);
+  $(document).on('vjContentNew', (ev) => {
+    render(ev.target);
+  });
+
+  $(document).on('click', '.star', (ev) => {
+    const $button = $(ev.currentTarget);
+    const currentState = $button.hasClass('activated');
+    const $form = $button.closest('form');
+    const $op = $form.find('[name="operation"]');
+    const $star = $form.find('[name="star"]');
+    if ($op.val() !== 'star') return;
+    ev.preventDefault();
+    $star.val(currentState ? 'false' : 'true');
+    setStarButtonState($button, !currentState);
+    request
+      .post($form.attr('action'), $form)
+      .then((data) => {
+        setStarButtonState($button, data.star);
+      })
+      .catch(() => {
+        // TODO: notify failure
+        setStarButtonState($button, currentState);
+      });
+  });
+});
+
+export default starPage;

package/components/sticky/sticky.page.js

@@ -0,0 +1,66 @@
+import 'sticky-kit/dist/sticky-kit';
+
+import $ from 'jquery';
+import _ from 'lodash';
+import responsiveCutoff from 'vj/breakpoints.json';
+import { AutoloadPage } from 'vj/misc/Page';
+import { isAbove, isBelow } from 'vj/utils/mediaQuery';
+
+const navHeight = isBelow(responsiveCutoff.mobile)
+  ? 0
+  : $('.nav').height();
+
+function updateStickies($stickies) {
+  $stickies.get().forEach((element) => {
+    const $sticky = $(element);
+    const shouldEnableSticky = (isAbove($sticky.data('sticky-cutoff-min')));
+    const stickyEnabled = $sticky.data('sticky-enabled');
+    if (shouldEnableSticky && !stickyEnabled) {
+      const stickyOptions = {};
+      const $stickyParent = $sticky.closest('[data-sticky-parent]');
+      if ($stickyParent.length > 0) {
+        stickyOptions.parent = $stickyParent;
+      }
+      stickyOptions.offset_top = 10 + navHeight;
+      $sticky.stick_in_parent(stickyOptions);
+      $sticky.data('sticky-enabled', true);
+    } else if (!shouldEnableSticky && stickyEnabled) {
+      $sticky.trigger('sticky_kit:detach');
+      $sticky.data('sticky-enabled', false);
+    }
+  });
+}
+
+function getCutoff(str) {
+  if (str === 'medium') {
+    return responsiveCutoff.mobile;
+  } if (str === 'large') {
+    return responsiveCutoff.desktop;
+  }
+  return 0;
+}
+
+function stickyRelayout() {
+  $('body').trigger('sticky_kit:recalc');
+}
+
+const stickyPage = new AutoloadPage('stickyPage', () => {
+  let shouldListenResize = false;
+  const $stickies = $('[data-sticky]');
+  $stickies.get().forEach((element) => {
+    const $sticky = $(element);
+    const minEnabledSize = $sticky.attr('data-sticky');
+    if (minEnabledSize === 'medium' || minEnabledSize === 'large') {
+      shouldListenResize = true;
+    }
+    $sticky.data('sticky-cutoff-min', getCutoff(minEnabledSize));
+    $sticky.data('sticky-enabled', false);
+  });
+  updateStickies($stickies);
+  if (shouldListenResize) {
+    $(window).on('resize', _.throttle(() => updateStickies($stickies), 300));
+  }
+  $(document).on('vjLayout', _.throttle(stickyRelayout, 100));
+});
+
+export default stickyPage;

package/components/tab/Tab.js

@@ -0,0 +1,168 @@
+import $ from 'jquery';
+import DOMAttachedObject from 'vj/components/DOMAttachedObject';
+
+const TAB_TRANSITION_DURATION = 300;
+
+export default class Tab extends DOMAttachedObject {
+  static DOMAttachKey = 'vjTabInstance';
+
+  static initAll() {
+    $('.section__tabs').get().forEach((tab) => {
+      Tab.getOrConstruct($(tab));
+    });
+  }
+
+  static initEventListeners() {
+    $(document).on('click', '[data-tab-index]', (ev) => {
+      const targetIndex = $(ev.currentTarget).attr('data-tab-index');
+      const $container = $(ev.currentTarget).closest('.section__tab-container');
+      const tabInstance = Tab.get($container);
+      tabInstance.switchToTab(+targetIndex);
+    });
+  }
+
+  constructor($dom) {
+    super($dom);
+    this.attached = false;
+    this.hasMemo = false;
+    this.attach();
+  }
+
+  async switchToTab(idx) {
+    if (idx === this.currentIndex) return;
+    if (this.isAnimating) return;
+
+    const $tabs = this.$content.children();
+    const $currentTab = $tabs.eq(this.currentIndex);
+    const $newTab = $tabs.eq(idx);
+
+    // 0. Change header
+    this.$header
+      .children()
+      .removeClass('selected')
+      .eq(idx)
+      .addClass('selected');
+
+    // 1. Prepare for animating
+    this.isAnimating = true;
+    $newTab.addClass('active');
+    const animateParameter = {};
+    if (idx < this.currentIndex) {
+      animateParameter.from = '-100%';
+      animateParameter.to = '0%';
+    } else {
+      animateParameter.from = '0%';
+      animateParameter.to = '-100%';
+    }
+    $newTab
+      .css('opacity', 0);
+    this.$content
+      .css('x', animateParameter.from)
+      .width();
+
+    // 2. Animate transition
+    $currentTab
+      .transition(
+        { opacity: 0 },
+        {
+          duration: TAB_TRANSITION_DURATION,
+          easing: 'linear',
+        },
+      );
+    $newTab
+      .transition(
+        { opacity: 1 },
+        {
+          duration: TAB_TRANSITION_DURATION,
+          easing: 'linear',
+        },
+      );
+    await this.$content
+      .transition({
+        x: animateParameter.to,
+      }, {
+        duration: TAB_TRANSITION_DURATION,
+        easing: 'easeOutCubic',
+      })
+      .promise();
+
+    // 3. Hide previous content
+    this.$content
+      .children()
+      .eq(this.currentIndex)
+      .removeClass('active');
+    this.$content
+      .css('x', '0');
+    $newTab.trigger('vjContentShow');
+
+    // 4. Finalize
+    this.currentIndex = idx;
+    if (this.hasMemo) location.hash = `#tab-${idx}`;
+    this.isAnimating = false;
+  }
+
+  attach() {
+    if (this.attached) return false;
+
+    const $container = this.$dom
+      .closest('.section__tab-container');
+    const $headerWrapper = $(document.createElement('div'))
+      .addClass('section__tab-header-wrapper')
+      .appendTo($container);
+    const $contentWrapper = $(document.createElement('div'))
+      .appendTo($container);
+    this.$header = $(document.createElement('ul'))
+      .addClass('section__tab-header')
+      .attr('data-slideout-ignore', 'on')
+      .appendTo($headerWrapper);
+    this.$content = $(document.createElement('div'))
+      .addClass('section__tab-content')
+      .appendTo($contentWrapper);
+
+    this.$dom.find('.section__tab-title').get().forEach((element, idx) => {
+      $(document.createElement('li')).text($(element).text())
+        .addClass('section__tab-header-item')
+        .attr('data-tab-index', idx)
+        .appendTo(this.$header);
+    });
+
+    this.$dom.find('.section__tab-main')
+      .appendTo(this.$content);
+
+    this.$dom.remove();
+    this.$dom = $container;
+
+    this.currentIndex = 0;
+    this.hasMemo = this.$dom.hasClass('memo');
+    if (this.hasMemo) {
+      const getIdx = () => {
+        const hash = location.hash.substring(1);
+        const match = /^tab-(\d+)$/.exec(hash);
+        if (match) {
+          const idx = +match[1];
+          if (!Number.isNaN(idx) && idx < this.$header.children().length) {
+            return idx;
+          }
+        }
+        return null;
+      };
+      const handleIdChange = () => {
+        const idx = getIdx();
+        if (typeof idx === 'number') this.switchToTab(idx);
+      };
+      $(window).on('hashchange', handleIdChange);
+      handleIdChange();
+    } else this.currentIndex = 0;
+
+    this.$content
+      .children()
+      .eq(this.currentIndex)
+      .addClass('active');
+    this.$header
+      .children()
+      .eq(this.currentIndex)
+      .addClass('selected');
+
+    return true;
+  }
+}

package/components/tab/tab.page.js

@@ -0,0 +1,9 @@
+import { AutoloadPage } from 'vj/misc/Page';
+import Tab from './Tab';
+
+const tabPage = new AutoloadPage('tabPage', () => {
+  Tab.initAll();
+  Tab.initEventListeners();
+});
+
+export default tabPage;

package/components/tab/tab.page.styl

@@ -0,0 +1,105 @@
+@import './var.inc.styl'
+
+// No JavaScript
+.section__tab-item
+  margin: rem(20px) 0
+  border-bottom: 1px solid #DDD
+  padding: 0 rem($section-gap-h) rem($section-gap-v)
+
+.section__tab-title
+  font-size: rem($font-size-title)
+  color: #888
+  margin-bottom: 0.8em
+
+// Has JavaScript
+.section__tab-header-wrapper
+  overflow: hidden
+
+.section__tab-header
+  padding: 0 rem($section-gap-h)
+  padding-top: rem($tab-item-shadow-size)
+  overflow-x: auto
+  white-space: nowrap
+  padding-bottom: 20px
+  margin-bottom: -20px
+
+  +mobile()
+    padding-top: 0
+    padding-right: rem($section-gap-h + 50px)
+    webkit-overflow-scrolling: touch
+    mask-image: linear-gradient(to right, rgba(0,0,0,1) 80%, rgba(0,0,0,0));
+
+.section__tab-header-item
+  display: inline-block
+  font-size: rem($font-size-secondary)
+  line-height: rem($tab-item-height)
+  height: rem($tab-item-height)
+  padding: 0 rem(20px)
+  margin-right: rem(10px)
+  user-select: none
+  position: relative
+
+  +mobile()
+    line-height: rem($tab-item-height-mobile)
+    height: rem($tab-item-height-mobile)
+
+.section__tab-container.immersive
+  .section__tab-header-item
+    color: rgba(#FFF, 0.9)
+    border-radius: 1px 1px 0 0
+    cursor: pointer
+    transition: background .2s ease-out-cubic
+
+    &:hover
+      color: #FFF
+
+    &.selected
+      background: #FFF
+      color: #666
+      box-shadow: 0 0 10px rgba(#000, 0.3)
+
+    +mobile()
+      &.selected
+        box-shadow: none
+        background: transparent
+        color: #FFF
+
+        &::after
+          position: absolute
+          left: 0
+          width: 100%
+          bottom: 0
+          height: 3px
+          background: $secondary-color
+          content: ''
+
+.section__tab-container:not(.immersive)
+  .section__tab-header
+    padding-top: 0 !important
+
+  .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
+
+    &:hover
+      border-color: #5f9fd6;
+      background: #f8f8f8;
+    
+    &.tab--active
+      border-color: #ed5f82;
+
+    &.selected
+      border-color: #ed5f82;
+
+.section__tab-content
+  position: relative
+
+  .section__tab-main
+    display: none
+    vertical-align: top
+    width: 100%
+
+    &.active
+      display: inline-block

package/components/tab/var.inc.styl

@@ -0,0 +1,3 @@
+$tab-item-height = 35px
+$tab-item-shadow-size = 10px
+$tab-item-height-mobile = 32px   // 32 * (13 / 16) is an integer