Feature/keybinds explain combinations

docs/src/keybindings-keys.md

@@ -1,16 +1,33 @@
 # Keys
 
-These are the possible keys and key combinations one can set in the [Keybindings configuration](./keybindings.md).
-For more information, please see: [https://docs.rs/termion/1.5.6/termion/event/enum.Key.html](https://docs.rs/termion/1.5.6/termion/event/enum.Key.html)
+These are the possible keys and key combinations one can set in the
+[Keybindings configuration](./keybindings.md).
+For more information, please see:
+[https://docs.rs/termion/1.5.6/termion/event/enum.Key.html](https://docs.rs/termion/1.5.6/termion/event/enum.Key.html)
+
+Or some related Github Issues:
+
+- [#351](https://github.com/zellij-org/zellij/issues/351)
+- [#357](https://github.com/zellij-org/zellij/issues/357)
+
+There's a table with an overview of valid key combinations at the bottom of
+this page.
+
 
 ## `Char: <character>`
-A single character with no modifier, eg. `Char: f`
+A single character with no modifier, eg. `Char: 'f'`
+
+**Note:** Please also refer to the table at the bottom of this page
 
 ## `Alt: <character>`
-A single character preceded by the `Alt` modifier, eg. `Alt: f`.
+A single character preceded by the `Alt` modifier, eg. `Alt: 'f'`.
+
+**Note:** Please also refer to the table at the bottom of this page
 
 ## `Ctrl: <character>`
-A single character preceded by the `Ctrl` modifier, eg. `Ctrl: f`.
+A single character preceded by the `Ctrl` modifier, eg. `Ctrl: 'f'`.
+
+**Note:** Please also refer to the table at the bottom of this page
 
 ## `F: <1-12>`
 One of the `F` characters (usually at the top of the keyboard). eg. `F: 11`
@@ -41,3 +58,27 @@ The insert key.
 
 ## `Esc`
 The Esc key.
+
+
+# Valid character combinations
+
+Following is a table that gives an overview of all the possible character
+combinations available for keybindings.
+
+**Note that combining any of the `Ctrl`, `Alt` or `Char` bindings with the
+special keys mentioned above isn't possible.**
+
+
+| Keys       | `Ctrl: ' '` | `Alt: ' '` | `Char: ' '` |
+| :--------: | :---------: | :--------: | :---------: |
+| `a-z`      | yes | yes | yes |
+| `A-Z`      | no  | yes | yes |
+| `0-9`      | no  | yes | yes |
+| Space      | no  | yes | yes |
+| Tab        | no  | yes | yes |
+| `.:,;-_!?` | no  | yes | yes |
+| `'"#$%&()` | no  | yes | yes |
+| `*+/<=>@\` | no  | yes | yes |
+| `[]^_\|{}~` | no  | yes | yes |
+| `äöüß`     | no  | yes | yes |
+

resources/_gen/assets/scss/scss/main.scss_de1a7f5f1c8c46959803c429bb697ff0.json

@@ -1 +1 @@
-{"Target":"main.5872a1e542d1f5b2da2546a914a1dbf24e047785bf21e45fe5d1345a9187e651.css","MediaType":"text/css","Data":{"Integrity":"sha256-WHKh5ULR9bLaJUapFKHb8k4Ed4W/IeRf5dE0WpGH5lE="}}
+{"Target":"main.cd9953cdddeac1263264b9cdf395498e4ef88a2f2fe0d17453ace410f31f1c8b.css","MediaType":"text/css","Data":{"Integrity":"sha256-zZlTzd3qwSYyZLnN85VJjk74ii8v4NF0U6zkEPMfHIs="}}

static/documentation/404.html

@@ -4,49 +4,34 @@
         <!-- Book generated using mdBook -->
         <meta charset="UTF-8">
         <title></title>
-
-
         <base href="/">
-
 
 
         <!-- Custom HTML head -->
 
-
-
         <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta name="theme-color" content="#ffffff" />
 
-
         <link rel="icon" href="favicon.svg">
-
-
         <link rel="shortcut icon" href="favicon.png">
-
         <link rel="stylesheet" href="css/variables.css">
         <link rel="stylesheet" href="css/general.css">
         <link rel="stylesheet" href="css/chrome.css">
-
         <link rel="stylesheet" href="css/print.css" media="print">
-
 
         <!-- Fonts -->
         <link rel="stylesheet" href="FontAwesome/css/font-awesome.css">
-
         <link rel="stylesheet" href="fonts/fonts.css">
-
 
         <!-- Highlight.js Stylesheets -->
         <link rel="stylesheet" href="highlight.css">
         <link rel="stylesheet" href="tomorrow-night.css">
         <link rel="stylesheet" href="ayu-highlight.css">
 
         <!-- Custom theme stylesheets -->
-
 
-
     </head>
     <body>
         <!-- Provide site root to javascript -->
@@ -105,8 +90,7 @@
         <div id="page-wrapper" class="page-wrapper">
 
             <div class="page">
-
-                <div id="menu-bar-hover-placeholder"></div>
+                                <div id="menu-bar-hover-placeholder"></div>
                 <div id="menu-bar" class="menu-bar sticky bordered">
                     <div class="left-buttons">
                         <button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
@@ -122,28 +106,21 @@
                             <li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
                             <li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
                         </ul>
-
                         <button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
                             <i class="fa fa-search"></i>
                         </button>
-
                     </div>
 
                     <h1 class="menu-title">Zellij User Guide</h1>
 
                     <div class="right-buttons">
-
                         <a href="print.html" title="Print this book" aria-label="Print this book">
                             <i id="print-button" class="fa fa-print"></i>
                         </a>
-
-
-
 
                     </div>
                 </div>
 
-
                 <div id="search-wrapper" class="hidden">
                     <form id="searchbar-outer" class="searchbar-outer">
                         <input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
@@ -154,7 +131,6 @@ <h1 class="menu-title">Zellij User Guide</h1>
                         </ul>
                     </div>
                 </div>
-
 
                 <!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
                 <script type="text/javascript">
@@ -174,51 +150,37 @@ <h1 id="document-not-found-404"><a class="header" href="#document-not-found-404"
 
                     <nav class="nav-wrapper" aria-label="Page navigation">
                         <!-- Mobile navigation buttons -->
-
 
-
 
                         <div style="clear: both"></div>
                     </nav>
                 </div>
             </div>
 
             <nav class="nav-wide-wrapper" aria-label="Page navigation">
-
 
-
             </nav>
 
         </div>
 
-
 
-
 
-
 
-
         <script type="text/javascript">
             window.playground_copyable = true;
         </script>
-
 
-
 
-
         <script src="elasticlunr.min.js" type="text/javascript" charset="utf-8"></script>
         <script src="mark.min.js" type="text/javascript" charset="utf-8"></script>
         <script src="searcher.js" type="text/javascript" charset="utf-8"></script>
-
 
         <script src="clipboard.min.js" type="text/javascript" charset="utf-8"></script>
         <script src="highlight.js" type="text/javascript" charset="utf-8"></script>
         <script src="book.js" type="text/javascript" charset="utf-8"></script>
 
         <!-- Custom JS scripts -->
-
 
-
 
     </body>
 </html>

static/documentation/book.js

@@ -108,9 +108,12 @@ function playground_text(playground) {
 
         let text = playground_text(code_block);
         let classes = code_block.querySelector('code').classList;
-        let has_2018 = classes.contains("edition2018");
-        let edition = has_2018 ? "2018" : "2015";
-
+        let edition = "2015";
+        if(classes.contains("edition2018")) {
+            edition = "2018";
+        } else if(classes.contains("edition2021")) {
+            edition = "2021";
+        }
         var params = {
             version: "stable",
             optimize: "0",
@@ -133,7 +136,15 @@ function playground_text(playground) {
             body: JSON.stringify(params)
         })
         .then(response => response.json())
-        .then(response => result_block.innerText = response.result)
+        .then(response => {
+            if (response.result.trim() === '') {
+                result_block.innerText = "No output";
+                result_block.classList.add("result-no-output");
+            } else {
+                result_block.innerText = response.result;
+                result_block.classList.remove("result-no-output");
+            }
+        })
         .catch(error => result_block.innerText = "Playground Communication: " + error.message);
     }
 
@@ -151,12 +162,13 @@ function playground_text(playground) {
     if (window.ace) {
         // language-rust class needs to be removed for editable
         // blocks or highlightjs will capture events
-        Array
-            .from(document.querySelectorAll('code.editable'))
+        code_nodes
+            .filter(function (node) {return node.classList.contains("editable"); })
             .forEach(function (block) { block.classList.remove('language-rust'); });
 
         Array
-            .from(document.querySelectorAll('code:not(.editable)'))
+        code_nodes
+            .filter(function (node) {return !node.classList.contains("editable"); })
             .forEach(function (block) { hljs.highlightBlock(block); });
     } else {
         code_nodes.forEach(function (block) { hljs.highlightBlock(block); });
@@ -359,7 +371,14 @@ function playground_text(playground) {
     });
 
     themePopup.addEventListener('click', function (e) {
-        var theme = e.target.id || e.target.parentElement.id;
+        var theme;
+        if (e.target.className === "theme") {
+            theme = e.target.id;
+        } else if (e.target.parentElement.className === "theme") {
+            theme = e.target.parentElement.id;
+        } else {
+            return;
+        }
         set_theme(theme);
     });