From bab88f4739ad5c70e04421790cc49c70b25fd92f Mon Sep 17 00:00:00 2001
From: rr- <rr-@sakuya.pl>
Date: Sun, 29 May 2016 12:24:48 +0200
Subject: [PATCH] client/top-nav: reuse makeAccessLink

---
 client/css/main.styl            | 3 +++
 client/html/top_nav.tpl         | 2 +-
 client/js/util/views.js         | 8 ++++++++
 client/js/views/top_nav_view.js | 8 --------
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/client/css/main.styl b/client/css/main.styl
index f97ddf24..0f114f93 100644
--- a/client/css/main.styl
+++ b/client/css/main.styl
@@ -111,6 +111,9 @@ nav.text-nav
             background: $focused-tab-background-color
             outline: 0
 
+a .access-key
+    text-decoration: underline
+
 #top-nav
     background: $top-nav-color
     margin: 0
diff --git a/client/html/top_nav.tpl b/client/html/top_nav.tpl
index 3eefea52..a997df47 100644
--- a/client/html/top_nav.tpl
+++ b/client/html/top_nav.tpl
@@ -5,7 +5,7 @@
                 --><li data-name='<%= key %>'><!--
                     --><a href='<%= item.url %>' accesskey='<%= item.accessKey %>'><!--
                         --><% 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><!--
                 --></li><!--
             --><% } %><!--
diff --git a/client/js/util/views.js b/client/js/util/views.js
index f99951cc..656ab04f 100644
--- a/client/js/util/views.js
+++ b/client/js/util/views.js
@@ -159,6 +159,13 @@ function makeFlexboxAlign(options) {
         .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) {
     return [name]
         .concat(Object.keys(attributes).map(key => {
@@ -260,6 +267,7 @@ function getTemplate(templatePath) {
             makeColorInput: makeColorInput,
             makeTagLink: makeTagLink,
             makeFlexboxAlign: makeFlexboxAlign,
+            makeAccessKey: makeAccessKey,
         });
         return htmlToDom(templateFactory(ctx));
     };
diff --git a/client/js/views/top_nav_view.js b/client/js/views/top_nav_view.js
index 22973ff0..30a6c970 100644
--- a/client/js/views/top_nav_view.js
+++ b/client/js/views/top_nav_view.js
@@ -12,14 +12,6 @@ class TopNavView {
         const target = this._navHolder;
         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);
     }