open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

undo fancySelect

Browse Source
This commit is contained in:
tophf 2022-08-21 19:40:08 +03:00
parent 183b52e11d
commit 33682f198f
4 changed files with 34 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
js/dlg/config-dialog.js
View File

@ -255,10 +255,18 @@ async function configDialog(style) {
case 'dropdown':
case 'image':
// TODO: a image picker input?
va.input = $create('select', {va, onchange: updateVarOnChange},
va.options.map(o => $create('option', {value: o.name}, o.label)));
children = [$.fancySelect(va.input)];
children[0].classList.add('config-value');
children = [
$create('.select-resizer.config-value', [
va.input = $create('select', {
va,
onchange: updateVarOnChange,
},
va.options.map(o =>
$create('option', {value: o.name}, o.label))),
$create('SVG:svg.svg-icon.select-arrow',
$create('SVG:use', {'xlink:href': '#svg-icon-select-arrow'})),
]),
];
break;
case 'range':

11
js/dom.js
View File

@ -27,17 +27,6 @@ Object.assign(EventTarget.prototype, {
$.root = document.documentElement;
$.rootCL = $.root.classList;
$.dummies = {
select: $create('.select-resizer',
$create('SVG:svg.svg-icon.select-arrow',
$create('SVG:use', {'xlink:href': '#svg-icon-select-arrow'}))),
};
$.fancySelect = el => {
const res = $.dummies.select.cloneNode(true);
if (el.parentNode) el.replaceWith(res);
res.prepend(el);
return res;
};
// Makes the focus outline appear on keyboard tabbing, but not on mouse clicks.
const focusAccessibility = {

5
js/localization.js
View File

@ -29,7 +29,7 @@ Object.assign(t, {
')',
/(?!\b|\s|$)/,
].map(rx => rx.source || rx).join(''), 'gu'),
SELECTOR: '[i18n], template, select',
SELECTOR: '[i18n], template',
HTML(html) {
return typeof html !== 'string'
@ -49,9 +49,6 @@ Object.assign(t, {
t.createTemplate(node);
continue;
}
if (node.localName === 'select' && (node.nextElementSibling || {}).localName !== 'svg') {
$.fancySelect(node);
}
const attr = node.getAttribute('i18n');
if (!attr) continue;
for (const part of attr.split(',')) {

29
popup/search.html
View File

@ -3,15 +3,28 @@
<div id="search-results" hidden>
<div class="search-results-nav" data-type="top"></div>
<div id="search-params">
<div id="search-years"><select></select> - <select></select></div>
<div id="search-years">
<div class="select-resizer">
<select></select>
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
</div>
-
<div class="select-resizer">
<select></select>
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
</div>
</div>
<input id="search-query" type="search" i18n="placeholder:search, title:searchStyleQueryHint">
<select id="search-order" i18n="title:sortStylesHelpTitle">
<option value="n" i18n="genericTitle">
<option value="u" i18n="searchResultUpdated">
<option value="t" i18n="searchResultInstallCount">
<option value="w" i18n="searchResultWeeklyCount">
<option value="r" i18n="searchResultRating">
</select>
<div class="select-resizer">
<select id="search-order" i18n="title:sortStylesHelpTitle">
<option value="n" i18n="genericTitle">
<option value="u" i18n="searchResultUpdated">
<option value="t" i18n="searchResultInstallCount">
<option value="w" i18n="searchResultWeeklyCount">
<option value="r" i18n="searchResultRating">
</select>
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
</div>
<label class="checkbox-wrapper" i18n="searchGlobalStyles">
<input id="search-globals" type="checkbox" checked>
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>