@shzlx/ui-default 4.58.2

package/components/highlighter/code-example.js

@@ -0,0 +1,111 @@
+export default `\
+#include <world.h>
+
+int main() {
+    // ~ Switch on the power line / Remember to put on PROTECTION ~
+    world.start();
+
+    // ~ Lay down your pieces / And let's begin OBJECT CREATION ~
+    // ~ Fill in my data / Parameters INITIALIZATION ~
+    auto *me = World::createObject("me", world, parameters...);
+    auto &you = *World::createObject("you", world, parameters...);
+
+    // ~ Set up our new world ~
+    auto &world = World{me, you};
+
+    // ~ And let's begin the SIMULATION ~
+    world.beginSimulation();
+
+    switch (me->type) {
+    case Object::SET_OF_POINTS:
+        // ~ If I'm a set of points / Then I will give you my DIMENSION ~
+        you << dynamic_cast<Set<Point>*>(me)->getDimension();
+        break;
+
+    case Object::CIRCLE:
+        // ~ If I'm a circle / Then I will give you my CIRCUMFERENCE ~
+        you << dynamic_cast<Circle * >(me)->getCircumference();
+        break;
+
+    case Object::SINE_WAVE:
+
+        // ~ If I'm a sine wave / Then you can sit on all my TANGENTS ~
+        for (auto &tangent : dynamic_cast<SineWave *>(me)->getTangents())
+            you.sitOn(tangent);
+
+        break;
+
+    default:
+        // ~ If I approach infinity / Then you can be my LIMITATIONS ~
+        you.limit() >> me->limit();
+    }
+
+    // ~ Switch my current / To AC to DC ~
+    me->setCurrent(CurrentType::AC), me->setCurrent(CurrentType::DC);
+
+    // ~ And then blind my vision / So dizzy, so dizzy ~
+    delete me->vision;
+
+    // ~ Oh, we can travel / From A.D to B.C ~
+    world.setTime(CommonEra::AD, 2016y + 6m + 16d);
+    world.setTime(CommonEra::BC, -2016y + 6m + 16d);
+
+    // ~ And we can unite / So deeply, so deeply ~
+    world.unite(you, *me);
+
+    // ~ If I can, if I can, give you all THE SIMULATIONS ~
+    if (std::all_of(world.simulations.begin(), world.simulations.end(), [&](auto & simulation) {
+    return you << me->run(simulation);
+    }))
+    // ~ Then I can, then I can, be your only SATISFACTION ~
+    you.satisfactions = std::vector{me};
+
+    // ~ If I can make you happy / Then I'll run the EXECUTION ~
+    try {
+        me->execute(you.nextCommand());
+    } catch (const NotHappyException &e) {}
+
+    // ~ Though we are trapped in this strange, strange SIMULATION ~
+    world.trap(me);
+
+    // ~ EXECUTION / EXECUTION / EXECUTION / EXECUTION ~
+    // ~ EXECUTION / EXECUTION / EXECUTION / EXECUTION ~
+    // ~ EXECUTION / EXECUTION / EXECUTION / EXECUTION ~
+    for (size_t i = 0; i < 3; i++) {
+        for (size_t j = 0; j < 4; j++)
+            world.continueExecution();
+    }
+
+    // ~ EIN / DOS / TROIS / NE / FEM / LIU / EXECUTION ~
+    for (size_t i = 1; i <= 6; i++)
+        sleepms(500);
+
+    world.continueExecution();
+
+    // ~ If I can, if I can, give you all the EXECUTION ~
+    if (std::all_of(world.begin(), world.end(), [&](auto & object) {
+    return me->execute(object);
+    }))
+    // ~ Then I can, then I can, be your only EXECUTION ~
+    me->execute(you.nextCommand());
+
+    // ~ If I can, have you back ~
+    if (*me << you)
+        // ~ Then I will run the EXECUTION ~
+        me->execute(you.nextCommand());
+
+    // ~ Though we are trapped / We are trapped ah ~
+    world.trap(me);
+
+    // ~ I've studied / I've studied how to properly / LO-O-OVE ~
+    me->study(Knowledge::Love);
+    // ~ Question me / Question me / I can answer all / LO-O-OVE ~
+    you.question(me, Knowledge::Love);
+    // ~ I know the algebraic expression of / LO-O-OVE ~
+    me->answer(you, Knowledge::Love);
+    // ~ Though you are free / I am trapped, trapped in / LO-O-OVE ~
+    world.trap(me);
+
+    // ~ EXECUTION ~
+    world.execute(me);
+}`;

package/components/highlighter/highlighter.page.styl

@@ -0,0 +1,99 @@
+@import 'prism-themes/themes/prism-vs.css'
+
+pre, code
+  background: $syntax-hl-bg-color
+
+pre > code
+  background: none
+  line-height: 1.5
+  color: black
+  text-align: left
+  white-space: pre-wrap
+  word-spacing: normal
+  word-break: normal
+  tab-size: 4
+  hyphens: none
+
+pre
+  position: relative
+  padding: rem(5px)
+  margin-bottom: rem(20px)
+
+code
+  color: $code-color
+  font-size: rem($font-size-secondary)
+
+.line-highlight 
+  position: absolute
+  left: 0
+  right: 0
+  padding: inherit 0
+  margin-top: 1em /* Same as .prism’s padding-top */
+  background: hsla(24, 20%, 50%,.08)
+  background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0))
+  pointer-events: none
+  line-height: inherit
+  white-space: pre
+
+.sample > .toolbar
+  right: 0.9375em !important
+  top: 3.7875em !important
+
+.toolbar
+  position: absolute
+  white-space: no-wrap
+  right: 0 !important
+  top: 0 !important
+  padding: rem(5px) 0
+  opacity: 1 !important
+  background: rgba($syntax-hl-bg-color, 0.8)
+  font-family: $primary-font-family
+  pointer-events: all
+  user-select: none
+
+.toolbar-item
+  a
+    font-size: large !important
+    border-radius: 0px !important
+    background: none !important
+
+.scratchpad-fill-button
+  display: none
+
+.mode--scratchpad .scratchpad-fill-button
+  display: inline-block
+
+.token.tab:not(:empty),
+.token.cr,
+.token.lf,
+.token.space
+	position: relative
+
+.token.tab:not(:empty):before,
+.token.cr:before,
+.token.lf:before,
+.token.space:before
+	color: #808080
+	opacity: 0.6
+	position: absolute
+
+.token.tab:not(:empty):before
+	content: '\21E5'
+
+.token.cr:before
+	content: '\240D'
+
+.token.crlf:before
+	content: '\240D\240A'
+
+.token.lf:before
+	content: '\240A'
+
+.token.space:before
+	content: '\00B7'
+
+@media print {
+  .code-toolbar>.toolbar {
+    display: none !important;
+  }
+}

package/components/highlighter/highlighter.page.ts

@@ -0,0 +1,72 @@
+import $ from 'jquery';
+import Notification from 'vj/components/notification';
+import { AutoloadPage } from 'vj/misc/Page';
+import { i18n, tpl } from 'vj/utils';
+
+const highlighterPage = new AutoloadPage('highlighterPage', () => {
+  import('./prismjs').then(({ default: prismjs }) => {
+    function runHighlight($container) {
+      $container.find('pre code').get().forEach((code) => {
+        const language = ($(code).attr('class') || '').trim();
+        if (language.includes('line-numbers')) $(code).parent().addClass('line-numbers');
+        const m = language.match(/language-([a-z0-9]+)(\|[\d,-]+)/);
+        if (m?.[2]) {
+          $(code).parent().attr('data-line', m[2].substring(1));
+          $(code).attr('class', `language-${m[1]}`);
+        }
+      });
+      prismjs.highlightBlocks($container);
+      $container.find('pre code').get().forEach((code) => {
+        const $code = $(code);
+        const $root = $code.parent().parent();
+        const $typo = $code.closest('.richmedia');
+        const language = ($(code).attr('class') || '').trim();
+        const m = language.match(/language-input([0-9]+)/);
+        if (m?.[1]) {
+          const id = +m[1];
+          if (Number.isSafeInteger(id)) {
+            const $output = ($typo.length ? $typo : $container).find(`pre.language-output${id}`);
+            if ($output.length) {
+              const $c = $(document.createElement('div')).addClass('row');
+              $root.after($c);
+              $root.prepend($(tpl`<h2>${i18n('Sample Input')} ${id}</h2>`))
+                .addClass('medium-6 columns sample').appendTo($c);
+              $output.parent().prepend($(tpl`<h2>${i18n('Sample Output')} ${id}</h2>`))
+                .addClass('medium-6 columns sample').appendTo($c);
+            }
+            if ($root.find('.scratchpad-fill-button').length) return;
+            const $toolbar = $root.find('.toolbar');
+            const $button = $(tpl`
+              <div class="toolbar-item scratchpad-fill-button">
+                <a href="javascript:;">${i18n('Fill to Pretest')}</a>
+              </div>
+            `);
+            $button.on('click', (e) => {
+              const store = (window as any).store;
+              if (!store) return;
+              e.preventDefault();
+              try {
+                store.dispatch({
+                  type: 'SCRATCHPAD_PRETEST_DATA_CHANGE',
+                  payload: {
+                    type: 'input',
+                    value: $code.text(),
+                  },
+                });
+                Notification.success(i18n('Input filled to pretest!'), 2000);
+              } catch (err) {
+                Notification.error(i18n('Failed to fill input'));
+              }
+            });
+            $toolbar.append($button);
+          }
+        }
+      });
+    }
+
+    runHighlight($('body'));
+    $(document).on('vjContentNew', (e) => runHighlight($(e.target)));
+  });
+});
+
+export default highlighterPage;

package/components/highlighter/meta.js

@@ -0,0 +1,15 @@
+// The following content is extracted from:
+// https://github.com/codemirror/CodeMirror/blob/master/mode/meta.js
+
+export default [
+  { name: 'C', ext: ['c', 'h'] },
+  { name: 'C++', ext: ['cpp', 'c++', 'cc', 'cxx', 'hpp', 'h++', 'hh', 'hxx'] },
+  { name: 'Go', ext: ['go'] },
+  { name: 'Haskell', ext: ['hs'] },
+  { name: 'Java', ext: ['java'] },
+  { name: 'JavaScript', ext: ['js'] },
+  { name: 'Pascal', ext: ['p', 'pas'] },
+  { name: 'PHP', ext: ['php', 'php3', 'php4', 'php5', 'php7', 'phtml'] },
+  { name: 'Python', ext: ['BUILD', 'bzl', 'py', 'pyw'] },
+  { name: 'Rust', ext: ['rs'] },
+];

package/components/highlighter/prismjs.js

@@ -0,0 +1,122 @@
+import Prism from 'prismjs'; // eslint-disable-line
+
+import 'prismjs/plugins/toolbar/prism-toolbar';
+import 'prismjs/plugins/toolbar/prism-toolbar.css';
+import 'prismjs/plugins/line-numbers/prism-line-numbers';
+import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
+import 'prismjs/plugins/line-highlight/prism-line-highlight';
+
+import Clipboard from 'clipboard';
+import $ from 'jquery';
+import components from 'prismjs/components';
+import getLoader from 'prismjs/dependencies';
+import Notification from 'vj/components/notification/index';
+import { i18n } from 'vj/utils';
+import languageMeta from './meta';
+
+const files = require.context('prismjs/components/', true, /prism-[a-z0-9-]+\.js/);
+const loadedLanguages = new Set();
+function loadLanguages() {
+  const languages = Object.keys(components.languages).filter((l) => l !== 'meta');
+  const loaded = [...loadedLanguages, ...Object.keys(Prism.languages)];
+  getLoader(components, languages, loaded).load((lang) => {
+    files(`./prism-${lang}.js`);
+    loadedLanguages.add(lang);
+  });
+}
+
+const languageExtMap = {};
+loadLanguages();
+// Map possible language names to Prism language name
+languageMeta.forEach((meta) => {
+  for (let i = 0; i < meta.ext.length; ++i) {
+    if (Prism.languages[meta.ext[i]] !== undefined) {
+      meta.target = meta.ext[i];
+      break;
+    }
+  }
+  meta.ext.forEach((ext) => {
+    languageExtMap[ext] = meta.target;
+  });
+});
+
+// Copy to Clipboard
+Prism.plugins.toolbar.registerButton('copy-to-clipboard', (env) => {
+  const linkCopy = document.createElement('a');
+  linkCopy.href = 'javascript:;';
+  linkCopy.textContent = 'Copy';
+  const clip = new Clipboard(linkCopy, { text: () => env.code });
+  clip.on('success', () => {
+    Notification.success(i18n('Content copied to clipboard!'), 1000);
+  });
+  clip.on('error', () => {
+    Notification.error(i18n('Copy failed :('));
+  });
+  return linkCopy;
+});
+
+const invisibles = {
+  tab: /\t/,
+  crlf: /\r\n/,
+  lf: /\n/,
+  cr: /\r/,
+  space: / /,
+};
+
+function addInvisibles(grammar) {
+  if (!grammar || grammar.tab) return;
+  for (const name in invisibles) {
+    if (Object.hasOwn(invisibles, name)) {
+      grammar[name] = invisibles[name];
+    }
+  }
+  for (const name in grammar) {
+    if (Object.hasOwn(grammar, name) && !invisibles[name]) {
+      if (name === 'rest') addInvisibles(grammar.rest);
+      else handlerInvisiblesToken(grammar, name); // eslint-disable-line ts/no-use-before-define
+    }
+  }
+}
+
+function handlerInvisiblesToken(tokens, name) {
+  const value = tokens[name];
+  const type = Prism.util.type(value);
+  if (type === 'RegExp') {
+    const inside = {};
+    tokens[name] = { pattern: value, inside };
+    addInvisibles(inside);
+  } else if (type === 'Array') {
+    for (let i = 0, l = value.length; i < l; i++) handlerInvisiblesToken(value, i);
+  } else {
+    value.inside ||= {};
+    addInvisibles(value.inside);
+  }
+}
+
+Prism.hooks.add('before-highlight', (env) => {
+  if (UserContext.showInvisibleChar) addInvisibles(env.grammar);
+});
+
+const prismjsApiWrap = {
+  highlightBlocks: ($dom) => {
+    $dom.find('pre code').get().forEach((code) => {
+      const $code = $(code);
+      const $pre = $code.parent();
+      $pre.addClass('syntax-hl');
+      const language = ($(code).attr('class') || '').trim();
+      // try to map the language name
+      const m = language.match(/language-([a-z]+)/);
+      if (m && m[1]) {
+        const languageName = m[1].toLowerCase();
+        if (languageExtMap[languageName]) {
+          $(code).attr('class', `language-${languageExtMap[languageName]}`);
+        }
+      }
+      Prism.highlightElement(code);
+    });
+  },
+  highlight: (text, grammar, language) => Prism.highlight(text, grammar, language),
+  Prism,
+};
+
+export default prismjsApiWrap;

package/components/hint.page.styl

@@ -0,0 +1,9 @@
+.hint
+    font-size: $font-size-small
+    position: relative
+    top: $nav-item-height
+    z-index: 99
+    left: 0
+    width: 100%
+    color: #e58900
+    background: #fff0e3;

package/components/hint.ts

@@ -0,0 +1,19 @@
+import $ from 'jquery';
+import { InfoDialog } from 'vj/components/dialog';
+import { i18n, tpl } from 'vj/utils';
+
+export default function createHint(message: string, element?: any) {
+  if (i18n(message) === message || !element) return;
+  const a = document.createElement('a');
+  a.setAttribute('href', 'javascript:;');
+  const span = document.createElement('span');
+  span.setAttribute('class', 'icon icon-help');
+  a.appendChild(span);
+  a.onclick = () => {
+    new InfoDialog({
+      cancelByClickingBack: false,
+      $body: tpl.typoMsg(i18n(message), true),
+    }).open();
+  };
+  $(element).append(a);
+}

package/components/hitokoto/index.page.js

@@ -0,0 +1,21 @@
+import $ from 'jquery';
+import { NamedPage } from 'vj/misc/Page';
+import { i18n, request, tpl } from 'vj/utils';
+
+export default new NamedPage('homepage', () => {
+  function getHitokoto($containers) {
+    $containers.get().forEach((container) => {
+      request.get('https://v1.hitokoto.cn?c=a&c=b&c=c&c=d&c=e&c=f')
+        .then((hitokoto) => {
+          const dom = $(tpl`<p>${hitokoto.hitokoto}</p>`);
+          dom.appendTo(container);
+        })
+        .catch((e) => {
+          console.error(e);
+          const dom = $(tpl`<p>${i18n('Cannot get hitokoto.')}</p>`);
+          dom.appendTo(container);
+        });
+    });
+  }
+  if ($('[name="hitokoto"]')) getHitokoto($('[name="hitokoto"]'));
+});

package/components/hotkey/hotkey.page.js

@@ -0,0 +1,83 @@
+import $ from 'jquery';
+import _ from 'lodash';
+import { AutoloadPage } from 'vj/misc/Page';
+
+const KEY_MAP = {
+  10: 'enter',
+  13: 'enter',
+  27: 'esc',
+  37: 'left',
+  38: 'up',
+  39: 'right',
+  40: 'down',
+  112: 'f1',
+  113: 'f2',
+  114: 'f3',
+  115: 'f4',
+  116: 'f5',
+  117: 'f6',
+  118: 'f7',
+  119: 'f8',
+  120: 'f9',
+  121: 'f10',
+  122: 'f11',
+  123: 'f12',
+};
+
+function isHotkeyMatch(sortedHotkeyArr, hotkeyStr) {
+  const hotkeyDefined = hotkeyStr.toLowerCase().split('+');
+  return _.isEqual(sortedHotkeyArr, hotkeyDefined.sort());
+}
+
+let triggered = false;
+function testElementHotkey(hotkey, $element, attr) {
+  if (!$element.is(':visible')) return;
+  String($element.attr(attr))
+    .split(',')
+    .forEach((singleDef) => {
+      const [defStr, trigger] = singleDef.split(':');
+      if (isHotkeyMatch(hotkey, defStr)) {
+        triggered = true;
+        switch (trigger) {
+          case 'submit':
+            $element.closest('form').trigger('submit');
+            break;
+          case undefined:
+            $element.trigger('click');
+            break;
+          default:
+            $element.trigger(trigger);
+            break;
+        }
+      }
+    });
+}
+
+const hotkeyPage = new AutoloadPage('hotkeyPage', () => {
+  $(document).on('keydown', (ev) => {
+    const hotkey = ['alt', 'ctrl', 'shift'].filter((modifyKey) => ev[`${modifyKey}Key`]);
+    if (ev.metaKey && !ev.ctrlKey) {
+      hotkey.push('ctrl');
+    }
+    if (KEY_MAP[ev.which] !== undefined) {
+      hotkey.push(KEY_MAP[ev.which]);
+    } else {
+      hotkey.push(String.fromCharCode(ev.which).toLowerCase());
+    }
+    hotkey.sort();
+
+    triggered = false;
+    // Find all global hotkeys
+    $('[data-global-hotkey]').get().forEach((element) => {
+      testElementHotkey(hotkey, $(element), 'data-global-hotkey');
+    });
+
+    // Find all local hotkeys
+    $(ev.target).parents('[data-hotkey]').get().forEach((element) => {
+      testElementHotkey(hotkey, $(element), 'data-hotkey');
+    });
+    if (triggered) ev.preventDefault();
+  });
+});
+
+export default hotkeyPage;

package/components/katex/katex.page.js

@@ -0,0 +1,26 @@
+import $ from 'jquery';
+import { AutoloadPage } from 'vj/misc/Page';
+
+const katexPage = new AutoloadPage('katexPage', () => {
+  import('katex/contrib/auto-render/auto-render').then(({ default: katex }) => {
+    function runKatex($containers) {
+      $containers.get().forEach((container) => katex(container, {
+        delimiters: [
+          { left: '$$', right: '$$', display: true },
+          { left: '$', right: '$', display: false },
+          { left: '\\(', right: '\\)', display: false },
+          { left: '\\[', right: '\\]', display: true },
+          { left: '\\begin{equation}', right: '\\end{equation}', display: true },
+          { left: '\\begin{align}', right: '\\end{align}', display: true },
+          { left: '\\begin{alignat}', right: '\\end{alignat}', display: true },
+          { left: '\\begin{gather}', right: '\\end{gather}', display: true },
+          { left: '\\begin{CD}', right: '\\end{CD}', display: true },
+        ],
+      }));
+    }
+    runKatex($('.richmedia'));
+    $(document).on('vjContentNew', (e) => runKatex($(e.target).find('.richmedia').addBack('.richmedia')));
+  });
+});
+
+export default katexPage;

package/components/katex/katex.page.styl

@@ -0,0 +1,2 @@
+.katex
+  font-size: 1.2em

package/components/languageselect.tsx

@@ -0,0 +1,94 @@
+/* eslint-disable react-refresh/only-export-components */
+import $ from 'jquery';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { i18n } from 'vj/utils';
+
+export default function LanguageSelect({
+  fieldSelector, firstLoadMain, firstLoadSub, availableLangs, mainLangs,
+}) {
+  const [main, setMain] = React.useState(firstLoadMain);
+  const [sub, setSub] = React.useState(firstLoadSub);
+
+  const options = {};
+  for (const key in availableLangs) {
+    if (key.startsWith(`${main}.`)) options[key.split('.')[1]] = availableLangs[key].display;
+  }
+  React.useEffect(() => {
+    $(fieldSelector).val(sub ? `${main}.${sub}` : main);
+  }, [main, sub]);
+  React.useEffect(() => {
+    const subselections = Object.keys(options).length;
+    if (options[sub]) return;
+    if (!subselections) setSub('');
+    setSub(Object.keys(options)[0]);
+  }, [main]);
+
+  return (
+    <>
+      {(Object.keys(mainLangs).length > 1 || Object.keys(options).length === 1) && (
+        <div className="medium-5 columns form__item end">
+          <label>
+            {i18n('Code language')}
+            <div className="select-container">
+              <select value={main} onChange={(ev) => setMain(ev.target.value)} className="select">
+                {Object.keys(mainLangs).map((key) => (
+                  <option key={key} value={key}>{mainLangs[key]}</option>
+                ))}
+              </select>
+            </div>
+          </label>
+        </div>
+      )}
+      {(Object.keys(options).length > 1 || Object.keys(mainLangs).length === 1) && (
+        <div className="medium-5 columns form__item end">
+          <label>
+            {i18n('Code language')}
+            <div className="select-container">
+              {Object.keys(options).length
+                ? <select value={sub} onChange={(ev) => setSub(ev.target.value)} className="select">
+                  {Object.keys(options).map((i) => (
+                    <option value={i} key={i}>{options[i]}</option>
+                  ))}
+                </select>
+                : <select value={main} onChange={(ev) => setMain(ev.target.value)} className="select">
+                  {Object.keys(mainLangs).map((i) => (
+                    <option value={i} key={i}>{mainLangs[i]}</option>
+                  ))}
+                </select>}
+            </div>
+          </label>
+        </div>
+      )}
+    </>
+  );
+}
+
+export function renderLanguageSelect(onElement, fieldSelector, availableLangs, mainLangs, preferences) {
+  const [firstLoadMain, firstLoadSub] = (() => {
+    for (const preference of preferences) {
+      if (preference.includes('.')) {
+        const [l, r] = preference.split('.');
+        if (availableLangs[preference]) return [l, r];
+        if (availableLangs[l]) return [l, ''];
+      } else if (availableLangs[preference]) {
+        return [preference, ''];
+      }
+    }
+    const selected = Object.keys(mainLangs)[0];
+    for (const key in availableLangs) {
+      if (key.startsWith(`${selected}.`)) return [selected, key.split('.')[1]];
+    }
+    return [selected, ''];
+  })();
+
+  ReactDOM.createRoot(onElement).render(
+    <LanguageSelect
+      fieldSelector={fieldSelector}
+      mainLangs={mainLangs}
+      availableLangs={availableLangs}
+      firstLoadMain={firstLoadMain}
+      firstLoadSub={firstLoadSub}
+    />,
+  );
+}