mirror of
https://gitcode.com/gh_mirrors/hy/Hydro.git
synced 2026-10-20 01:38:19 +08:00
ui: enhance language selection
This commit is contained in:
1 parent
377ef55d49
commit
80ac44d98e
17 files changed
+201
-70
No files matched your search
@@ -2,6 +2,7 @@ import { NamedPage } from 'vj/misc/Page';
|
||||
import load from 'vj/components/wastyle/index';
|
||||
import code from 'vj/components/highlighter/code-example';
|
||||
import i18n from 'vj/utils/i18n';
|
||||
import tpl from 'vj/utils/tpl';
|
||||
|
||||
const page = new NamedPage('home_preference', async () => {
|
||||
async function mountComponent() {
|
||||
@@ -60,6 +61,66 @@ const page = new NamedPage('home_preference', async () => {
|
||||
}
|
||||
}
|
||||
|
||||
function setOptions($el, options) {
|
||||
$el.empty();
|
||||
$.each(options, (key, value) => {
|
||||
$el.append($('<option></option>').attr('value', key).text(value));
|
||||
});
|
||||
}
|
||||
|
||||
const $el = $(tpl`\
|
||||
<div class="row">
|
||||
<div class="medium-5 columns form__item end">
|
||||
<label>
|
||||
${i18n('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>
|
||||
${i18n('Code language')}
|
||||
<div name="form_item_lang" class="select-container">
|
||||
<select id="codelang-sub-select" class="select"></select>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
$('[name="codeLang"]')
|
||||
.parent().parent().parent()
|
||||
.parent()
|
||||
.hide()
|
||||
.after($el);
|
||||
|
||||
$('#codelang-main-select').on('change', function () {
|
||||
$('[name="codeLang"]').val(this.value);
|
||||
const options = {};
|
||||
for (const key in window.LANGS) {
|
||||
if (`${key.startsWith(this.value)}.` && key !== this.value) options[key] = window.LANGS[key].display;
|
||||
}
|
||||
if (Object.keys(options).length > 1) {
|
||||
setOptions($('#codelang-sub-select'), options);
|
||||
$('#codelang-sub-container').show();
|
||||
} else $('#codelang-sub-container').hide();
|
||||
});
|
||||
$('#codelang-sub-select').on('change', function () {
|
||||
$('[name="codeLang"]').val(this.value);
|
||||
});
|
||||
const main = {};
|
||||
for (const key in window.LANGS) {
|
||||
if (!key.includes('.')) main[key] = window.LANGS[key].display;
|
||||
}
|
||||
setOptions($('#codelang-main-select'), main);
|
||||
const current = $('[name="codeLang"]').val();
|
||||
console.log(current);
|
||||
if (current.includes('.')) {
|
||||
const [m, s] = current.split('.');
|
||||
$('#codelang-main-select').val(m);
|
||||
$('#codelang-sub-select').val(s);
|
||||
} else $('#codelang-main-select').val(current);
|
||||
|
||||
if (success) {
|
||||
render(
|
||||
<AstylePreview></AstylePreview>,
|
||||
|
||||
@@ -1,10 +1,43 @@
|
||||
import { NamedPage } from 'vj/misc/Page';
|
||||
|
||||
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', async () => {
|
||||
$(document).on('click', '[name="problem-sidebar__show-category"]', (ev) => {
|
||||
$(ev.currentTarget).hide();
|
||||
$('[name="problem-sidebar__categories"]').show();
|
||||
});
|
||||
$('#codelang-main-select').on('change', function () {
|
||||
$('[name="lang"]').val(this.value);
|
||||
const options = {};
|
||||
for (const key in window.LANGS) {
|
||||
if (`${key.startsWith(this.value)}.` && key !== this.value) options[key] = window.LANGS[key].display;
|
||||
}
|
||||
if (Object.keys(options).length > 1) {
|
||||
setOptions($('#codelang-sub-select'), options);
|
||||
$('#codelang-sub-container').show();
|
||||
} else $('#codelang-sub-container').hide();
|
||||
});
|
||||
$('#codelang-sub-select').on('change', function () {
|
||||
$('[name="lang"]').val(this.value);
|
||||
});
|
||||
const main = {};
|
||||
for (const key in window.LANGS) {
|
||||
if (!key.includes('.')) main[key] = window.LANGS[key].display;
|
||||
}
|
||||
setOptions($('#codelang-main-select'), main);
|
||||
const current = $('[name="lang"]').val();
|
||||
console.log(current);
|
||||
if (current.includes('.')) {
|
||||
const [m, s] = current.split('.');
|
||||
$('#codelang-main-select').val(m);
|
||||
$('#codelang-sub-select').val(s);
|
||||
} else $('#codelang-main-select').val(current);
|
||||
});
|
||||
|
||||
export default page;
|
||||
Reference in new issue
Block a user