From eab1e0d0a84b1028c207e4873ec5962fc330afb6 Mon Sep 17 00:00:00 2001
From: Arpad Csanyi <csarpad@gmail.com>
Date: Mon, 14 Mar 2016 17:37:05 +0100
Subject: [PATCH] Add data attributes on menu items.

The view on the right pane will be switched based on this.
---
 app.html |  2 +-
 app.js   | 16 ++++++++++++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/app.html b/app.html
index 1496ad41..956de52e 100644
--- a/app.html
+++ b/app.html
@@ -159,7 +159,7 @@
               {{#if children}}
                 <ul>
                   {{#each children}}
-                    <li class="sidebar__level-2--item {{classes}}">
+                    <li class="sidebar__level-2--item {{classes}}" data-name="{{name}}" data-content="{{menuValue.dataContent}}" data-abbrev="{{abbrev}}">
                       <div class="sidebar__level-2">
                         {{name}}
                         {{#if menuValue.hasDefaults}}
diff --git a/app.js b/app.js
index d8b33b49..d1462f5d 100644
--- a/app.js
+++ b/app.js
@@ -39,32 +39,39 @@ var menuObject = {
       name: 'Keymaps',
       hasDefaults: true,
       expandable: true,
+      dataContent: '.keymap--edit',
       children: [
         {
           icon: '',
           name: 'Factory keymap',
+          abbrev: 'FTY',
           isDefault: true
         },
         {
           icon: '',
           name: 'QWERTY',
+          abbrev: 'QTY',
           classes: 'active'
         },
         {
           icon: '',
-          name: 'Dvorak'
+          name: 'Dvorak',
+          abbrev: 'DVR',
         },
         {
           icon: '',
-          name: 'Colemak'
+          name: 'Colemak',
+          abbrev: 'COL',
         },
         {
           icon: '',
-          name: 'VIM'
+          name: 'VIM',
+          abbrev: 'VIM',
         },
         {
           icon: '',
-          name: 'Mortal Kombat X'
+          name: 'Mortal Kombat X',
+          abbrev: 'MKX',
         }
       ],
       // actions: [
@@ -78,6 +85,7 @@ var menuObject = {
       icon: 'play',
       name: 'Macros',
       expandable: true,
+      dataContent: '.macro--edit',
       children: [
         {
           icon: '',