mirror of
https://gitcode.com/gh_mirrors/hy/Hydro.git
synced 2026-10-17 09:36:08 +08:00
ui: use lang pretest setting to locate related languages (#390)
This commit is contained in:
undefined committed
1 parent
bbde2b9cda
commit
d9972d6e97
6 files changed
+97
-91
No files matched your search
@@ -137,5 +137,6 @@ module.exports = {
|
||||
'jsx-a11y/no-static-element-interactions': 'off',
|
||||
'jsx-a11y/anchor-is-valid': 'off',
|
||||
'jsx-a11y/click-events-have-key-events': 'off',
|
||||
'jsx-a11y/label-has-associated-control': 'off',
|
||||
},
|
||||
};
|
||||
@@ -87,7 +87,8 @@ export default connect(mapStateToProps, mapDispatchToProps)(class ScratchpadTool
|
||||
super(props);
|
||||
if (!availableLangs[this.props.editorLang]) {
|
||||
// preference not allowed
|
||||
const key = keys.find((i) => availableLangs[i].pretest === this.props.editorLang);
|
||||
const key = keys.filter((i) => availableLangs[i].pretest)
|
||||
.find((i) => availableLangs[i].pretest.split('.')[0] === this.props.editorLang.split('.')[0]);
|
||||
this.props.setEditorLanguage(key || keys[0]);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@hydrooj/ui-default",
|
||||
"version": "4.38.14",
|
||||
"version": "4.38.15",
|
||||
"author": "undefined <i@undefined.moe>",
|
||||
"license": "AGPL-3.0",
|
||||
"main": "hydro.js",
|
||||
|
||||
@@ -1,71 +0,0 @@
|
||||
import { NamedPage } from 'vj/misc/Page';
|
||||
import getAvailableLangs from 'vj/utils/availableLangs';
|
||||
|
||||
function setOptions($el, options) {
|
||||
$el.empty();
|
||||
$.each(options, (key, value) => {
|
||||
$el.append($('<option></option>').attr('value', key).text(value));
|
||||
});
|
||||
}
|
||||
|
||||
const page = new NamedPage(['problem_submit', 'contest_detail_problem_submit', 'homework_detail_problem_submit'], async () => {
|
||||
const { config } = UiContext.pdoc;
|
||||
const availableLangs = getAvailableLangs(config.langs);
|
||||
|
||||
function onChangeMain(update = true) {
|
||||
const options = {};
|
||||
for (const key in availableLangs) {
|
||||
if (key.startsWith(`${this.value}.`) && key !== this.value) options[key] = availableLangs[key].display;
|
||||
}
|
||||
setOptions($('#codelang-sub-select'), options);
|
||||
if (Object.keys(options).length) {
|
||||
$('#codelang-sub-container').show();
|
||||
if (update) $('[name="lang"]').val($('#codelang-sub-select').val());
|
||||
} else {
|
||||
$('#codelang-sub-container').hide();
|
||||
if (update) $('[name="lang"]').val(this.value);
|
||||
}
|
||||
return Object.keys(options)[0];
|
||||
}
|
||||
const main = {};
|
||||
for (const key in availableLangs) {
|
||||
if (config.langs && !config.langs.filter((i) => i === key || i.startsWith(`${key}.`)).length) continue;
|
||||
if (!key.includes('.')) main[key] = window.LANGS[key].display;
|
||||
else {
|
||||
const a = key.split('.')[0];
|
||||
main[a] = window.LANGS[a].display;
|
||||
}
|
||||
}
|
||||
setOptions($('#codelang-main-select'), main);
|
||||
|
||||
let isFallback = false;
|
||||
const current = $('[name="lang"]').val();
|
||||
if (current.includes('.')) {
|
||||
const [m] = current.split('.');
|
||||
if (main[m]) {
|
||||
$('#codelang-main-select').val(m);
|
||||
const fallback = onChangeMain.call({ value: m }, false);
|
||||
$('#codelang-sub-select').val(current);
|
||||
if (fallback && !$('#codelang-sub-select').val()) {
|
||||
$('#codelang-sub-select').val(fallback);
|
||||
$('[name="lang"]').val(fallback);
|
||||
}
|
||||
} else isFallback = true;
|
||||
} else if (main[current]) {
|
||||
$('#codelang-main-select').val(current);
|
||||
onChangeMain.call({ value: $('#codelang-main-select').val() }, false);
|
||||
} else isFallback = true;
|
||||
|
||||
if (isFallback) {
|
||||
$('#codelang-main-select').val(Object.keys(main)[0]);
|
||||
onChangeMain.call({ value: Object.keys(main)[0] }, true);
|
||||
}
|
||||
|
||||
$('#codelang-main-select').on('change', onChangeMain);
|
||||
$('#codelang-sub-select').on('change', function () {
|
||||
$('[name="lang"]').val(this.value);
|
||||
});
|
||||
if (Object.keys(main).length === 1) $('#codelang-main-container').hide();
|
||||
});
|
||||
|
||||
export default page;
|
||||
@@ -0,0 +1,92 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import i18n from 'vj/utils/i18n';
|
||||
import { NamedPage } from 'vj/misc/Page';
|
||||
import getAvailableLangs from 'vj/utils/availableLangs';
|
||||
|
||||
const page = new NamedPage(['problem_submit', 'contest_detail_problem_submit', 'homework_detail_problem_submit'], async () => {
|
||||
const { config } = UiContext.pdoc;
|
||||
const availableLangs = getAvailableLangs(config.langs);
|
||||
const mainLangs = {};
|
||||
const preferences = [($('[name="lang"]').val() as string) || ''];
|
||||
for (const key in availableLangs) {
|
||||
if (config.langs && !config.langs.filter((i) => i === key || i.startsWith(`${key}.`)).length) continue;
|
||||
if (window.LANGS[key].pretest === preferences[0]) preferences.push(key);
|
||||
if (!key.includes('.')) mainLangs[key] = window.LANGS[key].display;
|
||||
else {
|
||||
const a = key.split('.')[0];
|
||||
mainLangs[a] = window.LANGS[a].display;
|
||||
}
|
||||
}
|
||||
for (const key in availableLangs) {
|
||||
if (config.langs && !config.langs.filter((i) => i === key || i.startsWith(`${key}.`)).length) continue;
|
||||
if (window.LANGS[key].pretest?.split('.')[0] === preferences[0].split('.')[0]) preferences.push(key);
|
||||
}
|
||||
|
||||
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, ''];
|
||||
}
|
||||
}
|
||||
return [Object.keys(mainLangs)[0], ''];
|
||||
})();
|
||||
|
||||
function LanguageSelect() {
|
||||
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(() => {
|
||||
$('[name="lang"]').val(sub ? `${main}.${sub}` : main);
|
||||
}, [main, sub]);
|
||||
React.useEffect(() => {
|
||||
const subselections = Object.keys(options).length;
|
||||
if (options[sub]) return;
|
||||
if (!subselections) setSub('');
|
||||
if (subselections === 1) setSub(Object.keys(options)[0]);
|
||||
}, [main]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<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 && (
|
||||
<div className="medium-5 columns form__item end">
|
||||
<label>
|
||||
{i18n('Code language')}
|
||||
<div className="select-container">
|
||||
<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>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('codelang-selector')).render(<LanguageSelect />);
|
||||
});
|
||||
|
||||
export default page;
|
||||
@@ -17,24 +17,7 @@
|
||||
value:handler.user.codeLang
|
||||
}) }}
|
||||
</div>
|
||||
<div class="row nojs--hide">
|
||||
<div class="medium-5 columns form__item end" id="codelang-main-container">
|
||||
<label>
|
||||
{{ _('Code language') }}
|
||||
<div name="form_item_lang" class="select-container">
|
||||
<select id="codelang-main-select" class="select"></select>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="medium-5 columns form__item end" style="display: none" id="codelang-sub-container">
|
||||
<label>
|
||||
{{ _('Code language') }}
|
||||
<div name="form_item_lang" class="select-container">
|
||||
<select id="codelang-sub-select" class="select"></select>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row nojs--hide" id="codelang-selector"></div>
|
||||
{{ form.form_textarea({label:'Code', columns:12, name:'code', extra_class:'monospace', autofocus:true}) }}
|
||||
<div class="row">
|
||||
<div class="medium-12 columns">
|
||||
|
||||
Reference in new issue
Block a user