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() {
const [{ default: prismjs }, [success, format], React, { render }] = await Promise.all([
import('vj/components/highlighter/prismjs'),
load(),
import('react'),
import('react-dom'),
]);
class AstylePreview extends React.PureComponent {
constructor(props) {
super(props);
this.state = { value: UserContext.astyleOptions };
[this.success, this.preview] = format(code, `${this.state.value.trim()} mode=c`);
this.state.highlight = this.success
? prismjs.highlight(this.preview, prismjs.Prism.languages.cpp, 'C++')
: prismjs.highlight(this.preview, prismjs.Prism.languages.cpp, 'C++');
}
render() {
return (
<>
{i18n('astyle formatting options')}
>
);
}
}
function setOptions($el, options) {
$el.empty();
$.each(options, (key, value) => {
$el.append($('').attr('value', key).text(value));
});
}
const $el = $(tpl`\
`);
$('[name="codeLang"]')
.parent().parent().parent()
.parent()
.hide()
.after($el);
$('#codelang-main-select').on('change', function () {
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();
$('[name="codeLang"]').val($('#codelang-sub-container').val());
} else {
$('#codelang-sub-container').hide();
$('[name="codeLang"]').val(this.value);
}
});
$('#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();
if (current.includes('.')) {
const [m, s] = current.split('.');
$('#codelang-main-select').val(m);
$('#codelang-sub-select').val(s).show();
} else $('#codelang-main-select').val(current);
if (success) {
render(
,
$('[name="form_item_astyleOptions"]').get(0).parentNode.parentNode.parentNode,
);
}
}
mountComponent();
});
export default page;