From 72c0a97dc9936eed8aaf7458f308fc5715d11279 Mon Sep 17 00:00:00 2001
From: Marc Durdin <marc@keyman.com>
Date: Thu, 3 May 2018 11:06:48 +0700
Subject: [PATCH] Restrict modifier options to a small set by default in touch
 layout editor

---
 .../TIKE/xml/layoutbuilder/builder.js         | 123 ++++++++++++++----
 .../TIKE/xml/layoutbuilder/builder.xsl        |   7 +-
 2 files changed, 103 insertions(+), 27 deletions(-)

diff --git a/windows/src/developer/TIKE/xml/layoutbuilder/builder.js b/windows/src/developer/TIKE/xml/layoutbuilder/builder.js
index c7199d027a..6f06617f58 100644
--- a/windows/src/developer/TIKE/xml/layoutbuilder/builder.js
+++ b/windows/src/developer/TIKE/xml/layoutbuilder/builder.js
@@ -350,6 +350,15 @@ $(function () {
     this.modifierCodes.SHIFT | this.modifierCodes.CTRL | this.modifierCodes.ALT
   ];
   
+  this.minimalModifierCombinations = [
+    0,
+    this.modifierCodes.RALT,
+    this.modifierCodes.SHIFT,
+    this.modifierCodes.RALT | this.modifierCodes.SHIFT
+  ];
+  
+  this.showAllModifierCombinations = false;
+  
   // Add CAPS and NO_CAPS variants for all of the above
   (function(c, codes) {
     var i, n = c.length;
@@ -399,6 +408,12 @@ $(function () {
     builder.selectSubKey(null);
     builder.prepareLayer();
   });
+  
+  $('#chkShowAllModifierOptions').click(function () {
+    builder.showAllModifierCombinations = $('#chkShowAllModifierOptions')[0].checked;
+    builder.fillModifierSelect();
+    builder.prepareKey();
+  });
 
   this.preparePlatforms = function () {
     var firstPlatform = null;
@@ -454,12 +469,15 @@ $(function () {
   }
 
   this.prepareLayers = function () {
+    this.fillLayerSelect();
+    this.fillModifierSelect();
+  };
+  
+  this.fillLayerSelect = function() {
     $('#selLayer option').remove();
     $('#selKeyNextLayer option').remove();
     $('#selSubKeyNextLayer option').remove();
-    $('#selKeyLayerOverride option').remove();
-    $('#selSubKeyLayerOverride option').remove();
-
+    
     opt = document.createElement('option');
     $(opt).attr('value', '').text('(none)');
     $('#selKeyNextLayer').append(opt);
@@ -468,14 +486,6 @@ $(function () {
     $(opt).attr('value', '').text('(none)');
     $('#selSubKeyNextLayer').append(opt);
 
-    opt = document.createElement('option');
-    $(opt).attr('value', '').text('(layer default)');
-    $('#selKeyLayerOverride').append(opt);
-
-    opt = document.createElement('option');
-    $(opt).attr('value', '').text('(layer default)');
-    $('#selSubKeyLayerOverride').append(opt);
-
     for (var layer in KVKL[builder.lastPlatform].layer) {
       var opt = document.createElement('option');
       $(opt).attr('value', layer)
@@ -490,21 +500,86 @@ $(function () {
       $(opt).append(KVKL[builder.lastPlatform].layer[layer].id);
       $('#selSubKeyNextLayer').append(opt);
     }
-    for (var modifier = 0; modifier < this.validModifierCombinations.length; modifier++) {
-      var name = this.getModifierCombinationName(this.validModifierCombinations[modifier]);
-      opt = document.createElement('option');
-      $(opt).append(name);
-      $('#selKeyLayerOverride').append(opt);
-
-      opt = document.createElement('option');
-      $(opt).append(name);
-      $('#selSubKeyLayerOverride').append(opt);
+  };
+  
+  this.fillModifierSelect = function() {
+    var modifiers = this.showAllModifierCombinations ? this.validModifierCombinations : this.minimalModifierCombinations;
+    
+    var
+      $selKeyLayerOverride = $('#selKeyLayerOverride'),
+      $selSubKeyLayerOverride = $('#selSubKeyLayerOverride'),
+      $addLayerList = $('#addLayerList');
       
-      opt = document.createElement('option');
-      $(opt).append(name);
-      $('#addLayerList').append(opt);
+    var add = function(e, val, text) {
+      var opt = document.createElement('option');
+      if(typeof text != 'undefined') {
+        $(opt).attr('value', val);
+        $(opt).text(text);
+      } else {
+        $(opt).text(val);
+      }
+      e.append(opt);
+    };
+    
+    $('#selKeyLayerOverride option').remove();
+    $('#selSubKeyLayerOverride option').remove();
+    $('#addLayerList option').remove();
+
+    add($selKeyLayerOverride, '', '(layer default)');
+    add($selSubKeyLayerOverride, '', '(layer default)');
+    add($addLayerList, '', '(custom)');
+    
+        
+    for (var modifier = 0; modifier < modifiers.length; modifier++) {
+      var name = this.getModifierCombinationName(modifiers[modifier]);
+      
+      add($selKeyLayerOverride, name);
+      add($selSubKeyLayerOverride, name);
+      add($addLayerList, name);
     }
-  }
+    
+    var alreadyAdded = function(modifier) {
+      return builder.minimalModifierCombinations.indexOf(modifier) >= 0;
+    };
+
+    
+    // check all keys for modifier usage
+    var modifierNames = [];
+    
+    for(var i = 0; i < KVKL[builder.lastPlatform].layer.length; i++) {
+      var layer = KVKL[builder.lastPlatform].layer[i];
+      for(var j = 0; j < layer.row.length; j++) {
+        var row = layer.row[j];
+        for(var k = 0; k < row.key.length; k++) {
+          if(typeof row.key[k].layer != 'undefined' && modifierNames.indexOf(row.key[k].layer) < 0) {
+            modifierNames.push(row.key[k].layer);
+          }
+          if(typeof row.key[k].sk != 'undefined') {
+            for(var l = 0; l < row.key[k].sk.length; l++) {
+              if(typeof row.key[k].sk[l].layer != 'undefined' && modifierNames.indexOf(row.key[k].sk[l].layer) < 0) {
+                modifierNames.push(row.key[k].sk[l].layer);
+              }
+            }
+          }
+        }
+      }
+    }
+    
+    var isUsed = function(modifierName) {
+      return modifierNames.indexOf(modifierName) >= 0;
+    };
+    
+    if(!this.showAllModifierCombinations) {
+      // Add any layer names that are already referenced
+      for(modifier = 0; modifier < this.validModifierCombinations.length; modifier++) {
+        var name = this.getModifierCombinationName(this.validModifierCombinations[modifier]);
+        if(!alreadyAdded(this.validModifierCombinations[modifier]) && isUsed(name)) {
+          add($selKeyLayerOverride, name);
+          add($selSubKeyLayerOverride, name);
+        }
+      }
+    }
+  };
 
   this.prepareLayer = function () {
     var layer = KVKL[builder.lastPlatform].layer[builder.lastLayerIndex];
diff --git a/windows/src/developer/TIKE/xml/layoutbuilder/builder.xsl b/windows/src/developer/TIKE/xml/layoutbuilder/builder.xsl
index 8c53973d69..5da388c7fe 100644
--- a/windows/src/developer/TIKE/xml/layoutbuilder/builder.xsl
+++ b/windows/src/developer/TIKE/xml/layoutbuilder/builder.xsl
@@ -39,6 +39,7 @@
                         <button id='btnDelLayer'>Del</button>
                         <button id='btnEditLayer'>Edit</button>
                         Presentation: <select id='selPlatformPresentation'></select>
+                        <input type='checkbox' id='chkShowAllModifierOptions'/> <label for='chkShowAllModifierOptions'>Show all modifier options</label>
                     </div>
                     <br class='clear' />
                 </div>
@@ -52,7 +53,7 @@
                   <option value='9'>Blank</option>
                   <option value='10'>Spacer</option>
                 </select>
-                <label for='selKeyLayerOverride'>Shift:</label> <select id='selKeyLayerOverride'></select>
+                <label for='selKeyLayerOverride'>Modifier:</label> <select id='selKeyLayerOverride'></select>
                 <label for='inpKeyName'>Code:</label> <input id='inpKeyName' type='text' size='16' maxlength='64' />
                 <input id='inpKeyCap' type='text' size='8' maxlength='16' />
                 <label for='inpKeyPadding'>Padding Left:</label>
@@ -79,7 +80,7 @@
                         <option value='9'>Blank</option>
                         <option value='10'>Spacer</option>
                     </select>
-                    <label for='selSubKeyLayerOverride'>Shift:</label> <select id='selSubKeyLayerOverride'></select>
+                    <label for='selSubKeyLayerOverride'>Modifier:</label> <select id='selSubKeyLayerOverride'></select>
                     <label for='inpSubKeyName'>Code:</label> <input id='inpSubKeyName' type='text' size='16' maxlength='64' />
                     <input id='inpSubKeyCap' type='text' size='8' maxlength='16' />
                     <label for='selSubKeyNextLayer'>Next Layer:</label> <select id='selSubKeyNextLayer'></select>
@@ -96,7 +97,7 @@
                 <div id='addLayerDialog' title='Add layer'>
                     <form>
                         <fieldset>
-                            <label for='addLayerList'>Modifier-based layer:</label> <select id='addLayerList'><option>(custom)</option></select><br />
+                            <label for='addLayerList'>Modifier-based layer:</label> <select id='addLayerList'></select><br />
                         </fieldset>
                         <fieldset>
                             <label for='addLayerName'>Name:</label> <input type='text' id='addLayerName' size='16' maxlength='64' /><br/>