Displaying all possible keys for a combo in the cheatsheet

Author: rerodrigues

build/hotkeys.css

@@ -61,6 +61,7 @@
 }
 
 .cfp-hotkeys-key {
+  position: relative;
   display: inline-block;
   color: #fff;
   background-color: #333;
@@ -73,6 +74,19 @@
   font-size: 1em;
 }
 
+.cfp-hotkeys-key:not(:last-child) {
+  margin-right: 16px;
+}
+
+.cfp-hotkeys-key:not(:last-child)::after {
+  position: absolute;
+  content: ',';
+  font-size: 28px;
+  color: #000;
+  right: -8px;
+  bottom: -7px;
+}
+
 .cfp-hotkeys-text {
   padding-left: 10px;
   font-size: 1em;

build/hotkeys.js

@@ -172,15 +172,19 @@
        */
       Hotkey.prototype.format = function() {
         if (this._formated === null) {
-          // Don't show all the possible key combos, just the first one.  Not sure
-          // of usecase here, so open a ticket if my assumptions are wrong
-          var combo = this.combo[0];
-
-          var sequence = combo.split(/[\s]/);
-          for (var i = 0; i < sequence.length; i++) {
-            sequence[i] = symbolize(sequence[i]);
-          }
-          this._formated = sequence;
+          // Show all the possible key combos, formatted.
+          // A possible use case could be a combo with keys that differ from platform to platform.
+          // ex. combo: ['home','alt+left'] could be used for PC/Mac key bindings
+          var _formated = [];
+
+          angular.forEach(this.combo, function(combo) {
+            var sequence = combo.split(/[\s]/);
+            for (var i = 0; i < sequence.length; i++) {
+              sequence[i] = symbolize(sequence[i]);
+            }
+            _formated.push(sequence.join(' '));
+          });
+          this._formated = _formated; 
         }
 
         return this._formated;
@@ -1050,7 +1054,7 @@
     }
 
     function _belongsTo(element, ancestor) {
-        if (element === document) {
+        if (element === null || element === document) {
             return false;
         }
 

build/hotkeys.min.css

@@ -55,6 +55,7 @@
 }
 
 .cfp-hotkeys-key {
+  position: relative;
   display: inline-block;
   color: #fff;
   background-color: #333;
@@ -67,6 +68,19 @@
   font-size: 1em;
 }
 
+.cfp-hotkeys-key:not(:last-child) {
+  margin-right: 16px;
+}
+
+.cfp-hotkeys-key:not(:last-child)::after {
+  position: absolute;
+  content: ',';
+  font-size: 28px;
+  color: #000;
+  right: -8px;
+  bottom: -7px;
+}
+
 .cfp-hotkeys-text {
   padding-left: 10px;
   font-size: 1em;

build/hotkeys.min.js

@@ -166,15 +166,19 @@
        */
       Hotkey.prototype.format = function() {
         if (this._formated === null) {
-          // Don't show all the possible key combos, just the first one.  Not sure
-          // of usecase here, so open a ticket if my assumptions are wrong
-          var combo = this.combo[0];
-
-          var sequence = combo.split(/[\s]/);
-          for (var i = 0; i < sequence.length; i++) {
-            sequence[i] = symbolize(sequence[i]);
-          }
-          this._formated = sequence;
+          // Show all the possible key combos, formatted.
+          // A possible use case could be a combo with keys that differ from platform to platform.
+          // ex. combo: ['home','alt+left'] could be used for PC/Mac key bindings
+          var _formated = [];
+
+          angular.forEach(this.combo, function(combo) {
+            var sequence = combo.split(/[\s]/);
+            for (var i = 0; i < sequence.length; i++) {
+              sequence[i] = symbolize(sequence[i]);
+            }
+            _formated.push(sequence.join(' '));
+          });
+          this._formated = _formated; 
         }
 
         return this._formated;