client/top-nav: reuse makeAccessLink
This commit is contained in:
parent
79f22d27cd
commit
bab88f4739
4 changed files with 12 additions and 9 deletions
|
@ -111,6 +111,9 @@ nav.text-nav
|
||||||
background: $focused-tab-background-color
|
background: $focused-tab-background-color
|
||||||
outline: 0
|
outline: 0
|
||||||
|
|
||||||
|
a .access-key
|
||||||
|
text-decoration: underline
|
||||||
|
|
||||||
#top-nav
|
#top-nav
|
||||||
background: $top-nav-color
|
background: $top-nav-color
|
||||||
margin: 0
|
margin: 0
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
--><li data-name='<%= key %>'><!--
|
--><li data-name='<%= key %>'><!--
|
||||||
--><a href='<%= item.url %>' accesskey='<%= item.accessKey %>'><!--
|
--><a href='<%= item.url %>' accesskey='<%= item.accessKey %>'><!--
|
||||||
--><% if (item.imageUrl) { print(ctx.makeThumbnail(item.imageUrl)); } %><!--
|
--><% if (item.imageUrl) { print(ctx.makeThumbnail(item.imageUrl)); } %><!--
|
||||||
--><span class='text'><%- item.name %></span><!--
|
--><span class='text'><%= ctx.makeAccessKey(item.name, item.accessKey) %></span><!--
|
||||||
--></a><!--
|
--></a><!--
|
||||||
--></li><!--
|
--></li><!--
|
||||||
--><% } %><!--
|
--><% } %><!--
|
||||||
|
|
|
@ -159,6 +159,13 @@ function makeFlexboxAlign(options) {
|
||||||
.map(() => '<li class="flexbox-dummy"></li>').join('');
|
.map(() => '<li class="flexbox-dummy"></li>').join('');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function makeAccessKey(html, key) {
|
||||||
|
const regex = new RegExp('(' + key + ')', 'i');
|
||||||
|
html = html.replace(
|
||||||
|
regex, '<span class="access-key" data-accesskey="$1">$1</span>');
|
||||||
|
return html;
|
||||||
|
}
|
||||||
|
|
||||||
function _serializeElement(name, attributes) {
|
function _serializeElement(name, attributes) {
|
||||||
return [name]
|
return [name]
|
||||||
.concat(Object.keys(attributes).map(key => {
|
.concat(Object.keys(attributes).map(key => {
|
||||||
|
@ -260,6 +267,7 @@ function getTemplate(templatePath) {
|
||||||
makeColorInput: makeColorInput,
|
makeColorInput: makeColorInput,
|
||||||
makeTagLink: makeTagLink,
|
makeTagLink: makeTagLink,
|
||||||
makeFlexboxAlign: makeFlexboxAlign,
|
makeFlexboxAlign: makeFlexboxAlign,
|
||||||
|
makeAccessKey: makeAccessKey,
|
||||||
});
|
});
|
||||||
return htmlToDom(templateFactory(ctx));
|
return htmlToDom(templateFactory(ctx));
|
||||||
};
|
};
|
||||||
|
|
|
@ -12,14 +12,6 @@ class TopNavView {
|
||||||
const target = this._navHolder;
|
const target = this._navHolder;
|
||||||
const source = this._template(ctx);
|
const source = this._template(ctx);
|
||||||
|
|
||||||
for (let link of source.querySelectorAll('a')) {
|
|
||||||
const regex = new RegExp(
|
|
||||||
'(' + link.getAttribute('accesskey') + ')', 'i');
|
|
||||||
const span = link.querySelector('span.text');
|
|
||||||
span.innerHTML = span.textContent.replace(
|
|
||||||
regex,
|
|
||||||
'<span class="access-key" data-accesskey="$1">$1</span>');
|
|
||||||
}
|
|
||||||
|
|
||||||
views.showView(this._navHolder, source);
|
views.showView(this._navHolder, source);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue