Group options of long press action. Closes #48.

popup__iframe.html

@@ -130,7 +130,15 @@
             <b class="setting-label" style="position:relative;">Long press action:</b>
             <select class="secondary-role" style="width:135px">
               {{#each secondaryRole}}
-                <option value="{{name}}">{{name}}</option>
+                {{#if groupName}}
+                  <optgroup label="{{groupName}}">
+                {{/if}}
+                {{#each groupValues}}
+                  <option value="{{value}}">{{label}}</option>
+                {{/each}}
+                {{#if groupName}}
+                  </optgroup>
+                {{/if}}
               {{/each}}
             </select>
             <i class="fa fa-question-circle" style="margin-left:5px" data-toggle="tooltip" data-placement="right" title="This action happens when the key is being held along with another key."></i>

script.js

@@ -141,41 +141,68 @@ $(function() {
       ],
       secondaryRole: [
         {
-          name: 'None'
+          groupName: '',
+          groupValues: [
+            {
+              value: 'None',
+              label: 'None',
+            }
+          ]
         },
         {
-          name: 'LShift'
+          groupName: 'Modifiers',
+          groupValues: [
+            {
+              value: 'LShift',
+              label: 'LShift'
             },
             {
-          name: 'LCtrl'
+              value: 'LCtrl',
+              label: 'LCtrl'
             },
             {
-          name: 'LSuper'
+              value: 'LSuper',
+              label: 'LSuper'
             },
             {
-          name: 'LAlt'
+              value: 'LAlt',
+              label: 'LAlt'
             },
             {
-          name: 'RAlt'
+              value: 'RAlt',
+              label: 'RAlt'
             },
             {
-          name: 'RSuper'
+              value: 'RSuper',
+              label: 'RSuper'
             },
             {
-          name: 'RCtrl'
+              value: 'RCtrl',
+              label: 'RCtrl'
             },
             {
-          name: 'RShift'
+              value: 'RShift',
+              label: 'RShift'
+            }
+          ]
         },
         {
-          name: 'Mod'
+          groupName: 'Layer Switcher',
+          groupValues: [
+            {
+              value: 'Mod',
+              label: 'Mod'
             },
             {
-          name: 'Mouse'
+              value: 'Mouse',
+              label: 'Mouse'
             },
             {
-          name: 'Fn'
+              value: 'Fn',
-        },
+              label: 'Fn'
+            }
+          ]
+        }
       ]
     },
     macro: {