@shzlx/ui-default 4.58.2

package/components/discussion/collapsible.page.tsx

@@ -0,0 +1,62 @@
+import 'jquery.easing';
+
+import $ from 'jquery';
+import { AutoloadPage } from 'vj/misc/Page';
+import { i18n } from 'vj/utils';
+
+function initCollapsibleContent() {
+  $('.collapsible-content').each(function () {
+    const $content = $(this);
+    let $inner = $content.find('.collapsible-content__inner');
+    if ($inner.length) return;
+    const $children = $content.contents().detach();
+    $inner = $('<div class="collapsible-content__inner"></div>');
+    $inner.append($children);
+    $content.append($inner);
+    $content.find('.collapsible-toggle').remove();
+    const scrollHeight = $inner[0].scrollHeight;
+    const clientHeight = $inner[0].clientHeight;
+    if (scrollHeight > clientHeight + 10) {
+      const $toggle = $(`<div class="collapsible-toggle">
+        <a href="javascript:;" class="collapsible-toggle__link">${i18n('Show more')}</a>
+      </div>`);
+      $content.append($toggle);
+      const $toggleLink = $toggle.find('.collapsible-toggle__link');
+      requestAnimationFrame(() => {
+        $toggle.addClass('visible');
+      });
+      $toggleLink.on('click', (e) => {
+        e.preventDefault();
+        if ($content.hasClass('expanded')) {
+          const currentHeight = $inner[0].scrollHeight;
+          $inner.css('max-height', `${currentHeight}px`);
+          requestAnimationFrame(() => {
+            $content.removeClass('expanded');
+            $inner.css('max-height', '');
+            $toggleLink.text(i18n('Show more'));
+          });
+        } else {
+          // Expand: get full height by temporarily removing max-height, then animate to it
+          const currentMaxHeight = $inner.css('max-height');
+          $inner.css('max-height', 'none');
+          const fullHeight = $inner[0].scrollHeight;
+          $inner.css('max-height', currentMaxHeight);
+          requestAnimationFrame(() => {
+            $inner.css('max-height', `${fullHeight}px`);
+            $content.addClass('expanded');
+            $toggleLink.text(i18n('Show less'));
+          });
+        }
+      });
+    } else $content.addClass('expanded');
+  });
+}
+
+const commentsPage = new AutoloadPage('commentsPage', () => {
+  initCollapsibleContent();
+  $(document).on('vjContentNew', () => {
+    initCollapsibleContent();
+  });
+});
+
+export default commentsPage;

package/components/discussion/comments.page.styl

@@ -0,0 +1,142 @@
+$upvote-color = green
+$downvote-color = red
+
+.dczcomments__item .is-editing
+  [name="dczcomments__dummy-box"]
+    display: none
+  > .typo
+    display: none
+
+.dczcomments__box .textbox
+  min-height: rem(180px)
+  resize: vertical
+
+.textbox[name="dczcomments__dummy-box"]
+  min-height: rem(60px)
+  resize: none
+  font-size: rem($font-size-title)
+  color: $comment-placeholder-color
+  padding: rem(10px)
+
+.dczcomments__item,
+.dczcomments__reply
+  border-top: 1px solid $table-border-color
+
+  >.media
+    padding: rem(20px 0)
+
+  &:first-child
+    border-top: 0
+
+.dczcomments__reply
+  >.media
+    // FIXME doesn't work on IE 11
+    display: flex
+
+  &:last-child
+    >.media
+      padding-bottom: 0
+
+.dczcomments__item > .media
+  display: flex
+  >.media__body
+    max-width: calc(100% - 6.5em)
+    +mobile()
+      max-width: 100%
+
+.dczcomments__supplementary
+  float: left
+  margin-bottom: rem(5px)
+
+  .history
+    float: right
+    margin-left: rem(5px)
+
+.dczcomments__operations
+  font-size: rem($font-size)
+  float: right
+  vertical-align: top
+  color: $comment-op-color
+
+  a, a:visited
+    color: $comment-op-link-color
+    margin-left: rem(3px)
+  a:hover
+    color: $primary-color
+    text-decoration: none
+
+.view--solution .dczcomments__replies
+  margin-left: rem(50px)
+
+.dczcomments__item
+  .vote-number
+    width: rem(82px)
+    text-align: center
+    font-size: rem(25px)
+    font-weight: 300
+    margin-bottom: rem(10px)
+
+  .vote-op
+    position: relative
+    border: 1px solid transparent
+    border-radius: rem(14px)
+    transition: border-color .2s linear, opacity .2s linear
+    opacity: 0.5
+
+    &>button
+      width: rem(40px)
+      float: left
+      position: relative
+
+  &:hover .vote-op
+    opacity: 1
+    border-color: $supplementary-border-color
+
+  .vote-button
+    appearance: none
+    border: 0
+    background: none
+    width: 100%
+    outline: 0
+    font-size: rem($font-size-icon)
+    line-height: rem(26px)
+    color: #AAA
+    transition: color .2s linear, background-color .2s linear, box-shadow .2s linear
+
+    &.upvote
+      border-radius: rem(13px 0 0 13px)
+      padding-left: rem(7px)
+
+      &:hover
+        background: $upvote-color
+        color: #FFF
+        box-shadow: 0 2px 10px rgba($upvote-color, 0.4)
+
+      &.active
+        color: $upvote-color
+
+
+    &.downvote
+      border-radius: rem(0 13px 13px 0)
+      padding-right: rem(7px)
+
+      &:hover
+        background: $downvote-color
+        color: #FFF
+        box-shadow: 0 2px 10px rgba($downvote-color, 0.4)
+
+      &.active
+        color: $downvote-color
+
+    &.active
+      background: transparent !important
+      box-shadow: none !important
+      cursor: default
+
+.dczcomments__replies .collapsible-content__inner
+  max-height: rem(200px)
+
++mobile()
+  .dczcomments__item
+    .media__left
+      display: none

package/components/discussion/comments.page.tsx

@@ -0,0 +1,192 @@
+import 'jquery.easing';
+
+import $ from 'jquery';
+import { confirm } from 'vj/components/dialog';
+import CommentBox from 'vj/components/discussion/CommentBox';
+import { AutoloadPage } from 'vj/misc/Page';
+import {
+  delay, i18n, request, slideDown, slideUp,
+} from 'vj/utils';
+
+const $replyTemplate = $('.commentbox-container').eq(0).clone();
+
+function createReplyContainer($parent) {
+  const $container = $replyTemplate
+    .clone()
+    .hide()
+    .prependTo($parent.find('.commentbox-reply-target').eq(0))
+    .trigger('vjContentNew');
+  return $container.find('.commentbox-placeholder');
+}
+
+async function showReplyContainer($parent) {
+  const $container = $parent.find('.commentbox-container');
+  // TODO: fix ugly hack. cannot get $container rect because it is invisible
+  const rect = $container.parent()[0].getBoundingClientRect();
+  const rectBody = document.body.getBoundingClientRect();
+  if (rect.top < 100 || rect.top + 100 > window.innerHeight) {
+    const targetScrollTop = rect.top - rectBody.top - window.innerHeight * 0.382;
+    $('html, body').stop().animate({ scrollTop: targetScrollTop }, 400, 'easeOutCubic');
+    await delay(300);
+    // delay duration is set smaller than animation duration intentionally
+  }
+  $container.css('opacity', 0);
+  await slideDown($container, 300);
+  await $container.transition({ opacity: 1 }, { duration: 200 }).promise();
+  $container.removeAttr('style');
+}
+
+async function destroyReplyContainer($parent) {
+  const $container = $parent.find('.commentbox-container');
+  $container.css('opacity', 1);
+  await $container.transition({ opacity: 0 }, { duration: 200 }).promise();
+  await slideUp($container, 300);
+  $container.remove();
+}
+
+function onClickDummyBox(ev) {
+  const $evTarget = $(ev.currentTarget);
+
+  if (CommentBox.get($evTarget)) {
+    CommentBox.get($evTarget).focus();
+    return;
+  }
+
+  const $mediaBody = $evTarget.closest('.media__body');
+
+  const opt = {
+    form: JSON.parse($evTarget.attr('data-form')),
+    mode: 'comment',
+    onCancel: () => {
+      $mediaBody.removeClass('is-editing');
+    },
+  };
+
+  $mediaBody.addClass('is-editing');
+
+  CommentBox
+    .getOrConstruct($evTarget, opt)
+    .appendTo($mediaBody.find('.commentbox-placeholder').eq(0))
+    .focus();
+}
+
+async function onCommentClickReplyComment(ev, options: any = {}) {
+  const $evTarget = $(ev.currentTarget);
+
+  if (CommentBox.get($evTarget)) {
+    // If comment box is already expanded,
+    // we should insert "initialText"
+    CommentBox
+      .get($evTarget)
+      .insertText(options.initialText || '')
+      .focus();
+    return;
+  }
+
+  const $mediaBody = $evTarget.closest('.media__body');
+
+  const opt = {
+    initialText: '',
+    mode: 'reply',
+    ...options,
+    onCancel: async () => {
+      await destroyReplyContainer($mediaBody);
+    },
+  };
+
+  const cbox = CommentBox
+    .getOrConstruct($evTarget, {
+      form: JSON.parse($evTarget.attr('data-form')),
+      ...opt,
+    })
+    .appendTo(createReplyContainer($mediaBody));
+  await showReplyContainer($mediaBody);
+  cbox.focus();
+}
+
+async function onCommentClickReplyReply(ev) {
+  const $evTarget = $(ev.currentTarget);
+  const $mediaBody = $evTarget.closest('.media__body');
+  const uid = $mediaBody
+    .find('.user-profile-name')
+    .attr('href').split('/user/')[1];
+
+  $evTarget
+    .closest('.dczcomments__item')
+    .find('[data-op="reply"][data-type="comment"]').eq(0)
+    .trigger('click', { initialText: `@[](/user/${uid.trim()}) ` });
+}
+
+async function onCommentClickEdit(mode, ev) {
+  const $evTarget = $(ev.currentTarget);
+
+  if (CommentBox.get($evTarget)) {
+    CommentBox.get($evTarget).focus();
+    return;
+  }
+
+  const $mediaBody = $evTarget.closest('.media__body');
+
+  const raw = await request.get(
+    $mediaBody.find('.typo').eq(0).attr('data-raw-url'),
+    {},
+    { dataType: 'text' },
+  );
+
+  const opt = {
+    initialText: raw,
+    form: JSON.parse($evTarget.attr('data-form')),
+    mode,
+    onCancel: () => {
+      $mediaBody.removeClass('is-editing');
+    },
+  };
+
+  $mediaBody.addClass('is-editing');
+
+  CommentBox
+    .getOrConstruct($evTarget, opt)
+    .appendTo($mediaBody.find('.commentbox-edit-target').eq(0))
+    .focus();
+}
+
+function onCommentClickEditComment(ev) {
+  return onCommentClickEdit('comment-update', ev);
+}
+
+function onCommentClickEditReply(ev) {
+  return onCommentClickEdit('reply-update', ev);
+}
+
+async function onCommentClickDelete(type, ev) {
+  const message = (type === 'comment')
+    ? 'Confirm deleting this comment? Its replies will be deleted as well.'
+    : 'Confirm deleting this reply?';
+  if (!await confirm(i18n(message))) return;
+
+  const $evTarget = $(ev.currentTarget);
+  const form = JSON.parse($evTarget.attr('data-form'));
+
+  await request.post('', form);
+  window.location.reload();
+}
+
+function onCommentClickDeleteComment(ev) {
+  onCommentClickDelete('comment', ev);
+}
+
+function onCommentClickDeleteReply(ev) {
+  onCommentClickDelete('reply', ev);
+}
+
+const commentsPage = new AutoloadPage('commentsPage', () => {
+  $(document).on('click', '[name="dczcomments__dummy-box"]', onClickDummyBox);
+  $(document).on('click', '[data-op="reply"][data-type="comment"]', onCommentClickReplyComment);
+  $(document).on('click', '[data-op="reply"][data-type="reply"]', onCommentClickReplyReply);
+  $(document).on('click', '[data-op="edit"][data-type="comment"]', onCommentClickEditComment);
+  $(document).on('click', '[data-op="edit"][data-type="reply"]', onCommentClickEditReply);
+  $(document).on('click', '[data-op="delete"][data-type="comment"]', onCommentClickDeleteComment);
+  $(document).on('click', '[data-op="delete"][data-type="reply"]', onCommentClickDeleteReply);
+});
+
+export default commentsPage;

package/components/discussion/discussion.page.styl

@@ -0,0 +1,17 @@
+.discussion-node-tag
+  font-size: rem($font-size-small)
+  display: inline-block
+  line-height: rem(22px)
+  padding: rem(0 10px)
+  vertical-align: middle
+  border-radius: rem(12px)
+  border: 1px solid $supplementary-border-color
+
+  &:hover
+    background: $primary-color
+    color: #FFF !important
+    text-decoration: none
+    border-color: $primary-color
+
+  .icon
+    margin-right: rem(5px)

package/components/discussion/history.page.tsx

@@ -0,0 +1,81 @@
+/* eslint-disable react-refresh/only-export-components */
+import { MantineProvider, Popover } from '@mantine/core';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import TimeAgo from 'timeago-react';
+import { InfoDialog } from 'vj/components/dialog';
+import { AutoloadPage } from 'vj/misc/Page';
+import { i18n, request, tpl } from 'vj/utils';
+
+async function historyDialog(payload, time, uid) {
+  const ts = new Date(time).getTime();
+  const rawHtml = await fetch(`${payload}?time=${ts}&render=1`).then((res) => res.text());
+  new InfoDialog({
+    $body: tpl`
+      <div class="typo richmedia">
+        <p><div data-user>${uid}</div> ${i18n('Edited at')} <span class="time relative" data-timestamp="${ts / 1000}">${time}</span></p>
+        <div style="scroll-behavior: smooth; max-height: 60vh; overflow: auto;">
+          ${{ templateRaw: true, html: rawHtml }}
+        </div>
+      </div>`,
+  }).open();
+}
+
+function History({ payload }) {
+  const [load, setLoad] = React.useState(false);
+  const [data, setData] = React.useState([]);
+  const [isLoading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState('');
+
+  React.useEffect(() => {
+    if (!load) return;
+    setLoading(true);
+    request.get(`${payload}?all=1`).then(({ history }) => {
+      setData(history);
+    }).catch((e) => {
+      setError(e.message);
+    }).finally(() => {
+      setLoading(false);
+    });
+  }, [load]);
+
+  return <Popover onOpen={() => setLoad(true)}>
+    <Popover.Target>
+      <span>{i18n('Edited')} <span className="icon icon-expand_more"></span></span>
+    </Popover.Target>
+    <Popover.Dropdown>
+      <ol className="menu">
+        {(isLoading || error) && (
+          <li className="menu__item">
+            <a className="menu__link">
+              {isLoading ? i18n('Loading...') : i18n('Loading failed.')}
+            </a>
+          </li>
+        )}
+        {data?.map((item) => (
+          <li className="menu__item" key={item.time}>
+            <a className="menu__link" onClick={() => historyDialog(payload, item.time, item.uid)}>
+              {i18n('Edited at')}
+              {' '}
+              <TimeAgo datetime={item.time} locale={i18n('timeago_locale')} />
+            </a>
+          </li>
+        ))}
+      </ol>
+    </Popover.Dropdown>
+  </Popover>;
+}
+
+const page = new AutoloadPage('discussionHistoryPage', () => {
+  $('[data-discussion-history]').each((i, e) => {
+    const url = $(e).data('raw-url');
+    if (!url) return;
+    ReactDOM.createRoot(e).render(
+      <MantineProvider>
+        <History payload={url} />
+      </MantineProvider>,
+    );
+  });
+});
+
+export default page;

package/components/discussion/reaction.page.styl

@@ -0,0 +1,30 @@
+.reactions
+  display: inline
+
+  .reaction
+    white-space: nowrap
+    width: auto
+    border-radius: 1.75rem
+    overflow: visible
+    font-size: rem($font-size-small)
+    display: inline-block
+    line-height: rem(22px)
+    padding: rem(0 10px)
+    vertical-align: middle
+    border-radius: rem(12px)
+    border: 1px solid $supplementary-border-color
+    cursor: pointer
+    &.active, &:hover
+      text-decoration: none
+      border-color: $primary-color
+      color: #FFF !important
+    &.active
+      background-color: lighten($primary-color, 10%) !important
+    &:hover
+      background-color: lighten($primary-color, 30%) !important
+    .emoji
+      margin-right: rem(5px)
+
+.popover-reaction-item
+  &:hover
+    background-color: $toolbar-bg-hover

package/components/discussion/reaction.page.tsx

@@ -0,0 +1,103 @@
+/* eslint-disable react-refresh/only-export-components */
+import 'jquery.easing';
+
+import { MantineProvider, Popover } from '@mantine/core';
+import $ from 'jquery';
+import { chunk } from 'lodash';
+import * as React from 'react';
+import ReactDOM from 'react-dom/client';
+import { AutoloadPage } from 'vj/misc/Page';
+import { request } from 'vj/utils';
+
+function renderReactions(reactions = {}, self = {}, rootEle) {
+  let html = '';
+  for (const [k, v] of Object.entries(reactions).sort(([, v1], [, v2]) => +v2 - +v1)) {
+    if (!v) continue;
+    html += `<div class="reaction${self[k] ? ' active' : ''}""><span class="emoji">${k}</span> ${v}</div>\n`;
+  }
+  rootEle.html(html);
+}
+
+async function handleEmojiClick(payload, emoji, ele) {
+  const res = await request.post('', { ...payload, emoji });
+  if (!res.sdoc) return;
+  renderReactions(res.doc?.react, res.sdoc.react, ele);
+}
+
+function getRow(count) {
+  if (count <= 2) return 2;
+  if (count <= 3) return 3;
+  if (count <= 4) return 4;
+  if (count <= 6) return 6;
+  return 12;
+}
+
+function Reaction({ payload, ele }) {
+  const emojiList: string[] = (UiContext.emojiList || '👍 👎 😄 😕 ❤️ 🤔 🤣 🌿 🍋 🕊️ 👀 🤡').split(' ');
+  const elesPerRow = getRow(Math.sqrt(emojiList.length));
+  const [focus, updateFocus] = React.useState(false);
+  const [open, updateOpen] = React.useState(false);
+  const [trigger, updateTrigger] = React.useState(false);
+  return (
+    <Popover opened={trigger || open || focus}>
+      <Popover.Target>
+        <span
+          className="icon icon-emoji"
+          onMouseEnter={() => updateTrigger(true)}
+          onMouseLeave={() => {
+            setTimeout(() => updateTrigger(false), 300);
+          }}
+        />
+      </Popover.Target>
+      <Popover.Dropdown onMouseEnter={() => updateOpen(true)} onMouseLeave={() => updateOpen(false)}>
+        {chunk(emojiList, elesPerRow).map((line, i) => (
+          <div className="row" key={+i} style={{ paddingBottom: 4, paddingTop: 4 }}>
+            {line.map((emoji) => (
+              <div
+                key={emoji}
+                className={`medium-${12 / elesPerRow} small-${12 / elesPerRow} columns popover-reaction-item`}
+                onClick={() => handleEmojiClick(payload, emoji, ele).then(() => {
+                  updateOpen(false);
+                  updateTrigger(false);
+                })}
+              >
+                {emoji}
+              </div>
+            ))}
+          </div>
+        ))}
+        <div className="row" style={{ paddingTop: 7, paddingBottom: 4 }}>
+          <div className="medium-12 columns">
+            <input name="emojiSuggest" onFocus={() => updateFocus(true)} onBlur={() => updateFocus(false)}></input>
+          </div>
+        </div>
+      </Popover.Dropdown>
+    </Popover>
+  );
+}
+
+const reactionPage = new AutoloadPage('reactionPage', () => {
+  const canUseReaction = $('[data-op="react"]').length > 0;
+  $('[data-op="react"]').each((i, e) => {
+    ReactDOM.createRoot(e).render(<MantineProvider>
+      <Reaction payload={$(e).data('form')} ele={$(`.reactions[data-${$(e).data('form').nodeType}='${$(e).data('form').id}']`)} />
+    </MantineProvider>);
+  });
+  $(document).on('click', '.reaction', async (e) => {
+    if (!canUseReaction) {
+      (window as any).showSignInDialog();
+      return;
+    }
+    const target = $(e.currentTarget);
+    const res = await request.post('', {
+      operation: 'reaction',
+      nodeType: target.parent().data('type'),
+      id: target.parent().data(target.parent().data('type')),
+      emoji: target.text().trim().split(' ')[0],
+      reverse: target.hasClass('active'),
+    });
+    renderReactions(res.doc?.react, res.sdoc?.react, target.parent());
+  });
+});
+
+export default reactionPage;

package/components/drop/drop.page.styl

@@ -0,0 +1,40 @@
+.drop-element,
+.drop-element:after,
+.drop-element:before,
+.drop-element *,
+.drop-element *:after,
+.drop-element *:before
+  box-sizing: border-box
+
+.drop-element
+  position: absolute
+  display: none
+  opacity: 0
+  transition: opacity .1s ease-in-out
+  z-index: 1000   // managed
+
+  &.drop-open
+    display: block
+
+  &.drop-open-transitionend
+    display: block
+
+  &.drop-after-open
+    opacity: 1
+
+.drop-target-attached-top.drop-target-attached-left .drop-content
+  transform-origin: -10% 110%
+.drop-target-attached-top.drop-target-attached-center .drop-content
+  transform-origin: 50% 110%
+.drop-target-attached-top.drop-target-attached-right .drop-content
+  transform-origin: 110% 110%
+.drop-target-attached-bottom.drop-target-attached-left .drop-content
+  transform-origin: -10% -10%
+.drop-target-attached-bottom.drop-target-attached-center .drop-content
+  transform-origin: 50% -10%
+.drop-target-attached-bottom.drop-target-attached-right .drop-content
+  transform-origin: 110% -10%
+.drop-target-attached-center.drop-target-attached-right .drop-content
+  transform-origin: -10% 50%
+.drop-target-attached-center.drop-target-attached-left .drop-content
+  transform-origin: 110% 50%