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

use <a> wrapper for the toggle icon in options

Browse Source
This commit is contained in:
tophf 2018-03-29 06:27:37 +03:00
parent d4c3df6a09
commit 5a6a403cc9
2 changed files with 16 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
options.html
View File

@ -125,12 +125,16 @@
<div class="block" id="advanced"> <div class="block" id="advanced">
<div class="collapsible-resizer"> <div class="collapsible-resizer">
<h1 i18n-text="optionsAdvanced"> <h1 i18n-text="optionsAdvanced">
<svg class="svg-icon is-collapsed" viewBox="0 0 1792 1792"> <a href="#" class="svg-inline-wrapper is-collapsed">
<svg class="svg-icon" viewBox="0 0 1792 1792">
<path fill-rule="evenodd" d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/> <path fill-rule="evenodd" d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/>
</svg> </svg>
<svg class="svg-icon is-expanded" viewBox="0 0 1792 1792"> </a>
<a href="#" class="svg-inline-wrapper is-expanded">
<svg class="svg-icon" viewBox="0 0 1792 1792">
<path fill-rule="evenodd" d="M1408 1216q0 26-19 45t-45 19h-896q-26 0-45-19t-19-45 19-45l448-448q19-19 45-19t45 19l448 448q19 19 19 45z"/> <path fill-rule="evenodd" d="M1408 1216q0 26-19 45t-45 19h-896q-26 0-45-19t-19-45 19-45l448-448q19-19 45-19t45 19l448 448q19 19 19 45z"/>
</svg> </svg>
</a>
</h1> </h1>
</div> </div>
<div class="items"> <div class="items">

11
options/options.js
View File

@ -8,15 +8,14 @@ setTimeout(splitLongTooltips);
if (!FIREFOX && !OPERA) { if (!FIREFOX && !OPERA) {
const block = $('#advanced'); const block = $('#advanced');
const toggleAdvanced = event => { $('h1', block).onclick = event => {
if (block.classList.contains('collapsed') || event.target.closest('h1')) { event.preventDefault();
block.classList.toggle('collapsed'); block.classList.toggle('collapsed');
} const isCollapsed = block.classList.contains('collapsed');
const visibleToggle = $(isCollapsed ? '.is-collapsed' : '.is-expanded', block);
visibleToggle.focus();
}; };
block.classList.add('collapsible', 'collapsed'); block.classList.add('collapsible', 'collapsed');
block.onclick = toggleAdvanced;
block.onkeydown = event => event.which === 13 && toggleAdvanced(event);
$('h1', block).tabIndex = 0;
} }
// actions // actions