Add support for MultiLineTerminal plugin

Bump version to 0.9.2
costas-basdekis · Sep 28, 2020 · 0ab5d96 · 0ab5d96
1 parent 40902bb
commit 0ab5d96
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 49 deletions.
diff --git a/README.md b/README.md
@@ -6,6 +6,7 @@ Type a command and you will get explanation for the command and the parameters.
 
 ![](/screenshot-example-command.png)
 ![](/screenshot-example-multiple-commands.png)
+![](/screenshot-example-multiline-commands.png)
 ![](/screenshot-example-search.png)
 
 ## Setup

diff --git a/extras/marlingcodedocumentation.md b/extras/marlingcodedocumentation.md
@@ -23,8 +23,11 @@ screenshots:
   alt: Example of a command
   caption: Example of a command
 - url: /screenshot-example-multiple-commands.png
-  alt: Example of multiple commands
-  caption: Example of multiple commands
+  alt: Example of matching multiple commands
+  caption: Example of matching multiple commands
+- url: /screenshot-example-multiline-commands.png
+  alt: Example of multiple commands in different lines
+  caption: Example of multiple commands in different lines
 - url: /screenshot-example-search.png
   alt: Example of search
   caption: Example of search

diff --git a/octoprint_marlingcodedocumentation/static/js/marlingcodedocumentation.js b/octoprint_marlingcodedocumentation/static/js/marlingcodedocumentation.js
@@ -20,9 +20,26 @@ $(function() {
         // Since the terminal VM is bound on `value`, we would only get an
         // update on blur, not after the user types. With this, we get it when
         // the user types, with a 0.5s delay.
-        self.commandValue = ko.observable("").extend({ rateLimit: 500 });
-        $("#terminal-command").on('input', ({target: {value}}) => {
-            self.commandValue(value);
+        self.commandLines = ko.observable([]).extend({ rateLimit: 500 });
+        $(document).on('input', "#terminal-command", ({target: {value}}) => {
+            const newCommandLines = value
+                .trim()
+                .split(/\s*\n\s*/g)
+                .filter(line => line);
+            const commandLinesHaveChanged =
+                JSON.stringify(self.commandLines())
+                !== JSON.stringify(newCommandLines);
+            if (commandLinesHaveChanged) {
+                self.commandLines(newCommandLines);
+            }
+        });
+
+        self.activeCommandLineNumber = ko.observable(0).extend({ rateLimit: 500 });
+        $(document).on("keyup click focus", "#terminal-command", ({target: {value, selectionStart}}) => {
+            const lineNumber = value.slice(0, selectionStart).split(/\n/g).length - 1;
+            if (self.activeCommandLineNumber() !== lineNumber) {
+                self.activeCommandLineNumber(lineNumber);
+            }
         });
 
         self.findDocs = searchString => {
@@ -172,9 +189,21 @@ $(function() {
         };
 
         self.searchResults = ko.computed(() => {
-           const value = self.commandValue();
-            if (!value.trim() || value.trim() === "?") {
+           const commandLines = self.commandLines();
+           const activeCommandLineNumber = self.activeCommandLineNumber();
+           return commandLines.map((line, index) => ({
+               ...self.getSearchResult(line),
+               tabId: `terminal-marlin-gcode-documentation-tab-${index}`,
+               tabLink: `#terminal-marlin-gcode-documentation-tab-${index}`,
+               isActiveInitially: index === activeCommandLineNumber,
+           }));
+        });
+
+        self.getSearchResult = commandLine => {
+            commandLine = commandLine.trim();
+            if (!commandLine || commandLine === "?") {
                 return {
+                    line: commandLine,
                     isEmpty: true,
                     isSearch: false,
                     docItems: [],
@@ -183,13 +212,13 @@ $(function() {
             }
             let docItemsList;
             const parsedParameters = {};
-            const isSearch = value.trim().startsWith('?');
+            const isSearch = commandLine.startsWith('?');
             if (isSearch) {
-                const commands = self.findDocs(value.slice(1));
+                const commands = self.findDocs(commandLine.slice(1));
                 docItemsList = commands.map(
                     command => [command, AllMarlinGcodes[command]]);
             } else {
-                const line = self.parseLine(value);
+                const line = self.parseLine(commandLine);
                 const command = line.words.length
                     ? line.words[0].join('') : null;
                 docItemsList = AllMarlinGcodes[command]
@@ -204,6 +233,7 @@ $(function() {
                     (docItem, index) => [command, index, docItem])));
             const collapsedCommands = self.collapsedCommands();
             return {
+                line: commandLine,
                 isEmpty: false,
                 isSearch,
                 docItems: docItems.slice(0, 20).map(([command, index, docItem]) => ({
@@ -224,7 +254,7 @@ $(function() {
                 })),
                 extraResultsCount: docItems.length > 20 ? docItems.length - 20 : 0,
             };
-        });
+        };
     }
 
     OCTOPRINT_VIEWMODELS.push({

diff --git a/octoprint_marlingcodedocumentation/templates/marlingcodedocumentation.jinja2 b/octoprint_marlingcodedocumentation/templates/marlingcodedocumentation.jinja2
@@ -3,44 +3,57 @@
         Enter a command to get documentation (eg 'G28'), or search by
         prepending with '?' (eg '?endstop')
     </div>
-    <!-- ko if: searchResults().docItems.length -->
-        <div class="btn-group">
-            <button class="btn" data-bind="click: $root.onToggleResultCollapsedNone"><span class=" fa fa-plus"></span>Expand all</button>
-            <button class="btn" data-bind="click: $root.onToggleResultCollapsedAll"><span class=" fa fa-minus"></span>Collapse all</button>
-        </div>
-        <ul class="terminal-documentation-results">
-            <!-- ko foreach: searchResults().docItems -->
-                <li class="terminal-documentation-result">
-                    <a class="pointer fa" data-bind="css: {'fa-plus': collapsed, 'fa-minus': !collapsed}, click: $root.onToggleResultCollapsed"></a>
-                    <span class="terminal-documentation-command" data-bind="text: command"></span>:
-                    <a class="fa fa-external-link-alt" target="_blank" data-bind="attr: {href: documentationUrl}"></a>
-                    <span data-bind="text: docItem.title"></span>:
-                    <span data-bind="text: docItem.brief"></span>
-                    <!-- ko if: !collapsed -->
-                        <ul class="terminal-documentation-result-parameters" data-bind="foreach: docItem.parameters">
-                            <li
-                                    class="terminal-documentation-result-parameter"
-                                    data-bind="css: {required: !optional, missing: !hasValues}"
-                            >
-                                <pre class="terminal-documentation-parameter-tag" data-bind="text: label"></pre>
-                                <pre class="terminal-documentation-parameter-value" data-bind="text: values.join(', ')"></pre>
-                                [<span class="terminal-documentation-parameter-description" data-bind="text: description"></span>]:
+    <ul class="nav nav-tabs">
+        <!-- ko foreach: searchResults() -->
+            <li data-bind="css: {active: isActiveInitially}">
+                <a data-toggle="tab" data-bind="text: line, attr: {href: tabLink}"></a>
+            </li>
+        <!-- /ko -->
+    </ul>
+    <div class="tab-content">
+        <!-- ko foreach: searchResults() -->
+            <div class="tab-pane" data-bind="attr: {id: tabId}, css: {active: isActiveInitially}">
+                <!-- ko if: docItems.length -->
+                    <div class="btn-group">
+                        <button class="btn" data-bind="click: $root.onToggleResultCollapsedNone"><span class=" fa fa-plus"></span>Expand all</button>
+                        <button class="btn" data-bind="click: $root.onToggleResultCollapsedAll"><span class=" fa fa-minus"></span>Collapse all</button>
+                    </div>
+                    <ul class="terminal-documentation-results">
+                        <!-- ko foreach: docItems -->
+                            <li class="terminal-documentation-result">
+                                <a class="pointer fa" data-bind="css: {'fa-plus': collapsed, 'fa-minus': !collapsed}, click: $root.onToggleResultCollapsed"></a>
+                                <span class="terminal-documentation-command" data-bind="text: command"></span>:
+                                <a class="fa fa-external-link-alt" target="_blank" data-bind="attr: {href: documentationUrl}"></a>
+                                <span data-bind="text: docItem.title"></span>:
+                                <span data-bind="text: docItem.brief"></span>
+                                <!-- ko if: !collapsed -->
+                                    <ul class="terminal-documentation-result-parameters" data-bind="foreach: docItem.parameters">
+                                        <li
+                                                class="terminal-documentation-result-parameter"
+                                                data-bind="css: {required: !optional, missing: !hasValues}"
+                                        >
+                                            <pre class="terminal-documentation-parameter-tag" data-bind="text: label"></pre>
+                                            <pre class="terminal-documentation-parameter-value" data-bind="text: values.join(', ')"></pre>
+                                            [<span class="terminal-documentation-parameter-description" data-bind="text: description"></span>]:
+                                        </li>
+                                    </ul>
+                                <!-- /ko -->
                             </li>
-                        </ul>
+                        <!-- /ko -->
+                        <!-- ko if: extraResultsCount -->
+                            <li><span data-bind="text: extraResultsCount"></span> more items</li>
+                        <!-- /ko -->
+                    </ul>
+                <!-- /ko --><!-- ko ifnot: docItems.length -->
+                    <!-- ko ifnot: isEmpty -->
+                        <!-- ko if: isSearch -->
+                            <div class="alert alert-block">Unable to find anything</div>
+                        <!-- /ko --><!-- ko ifnot: isSearch -->
+                            <div class="alert alert-error">Unknown command</div>
+                        <!-- /ko -->
                     <!-- /ko -->
-                </li>
-            <!-- /ko -->
-            <!-- ko if: searchResults().extraResultsCount -->
-                <li><span data-bind="text: searchResults().extraResultsCount"></span> more items</li>
-            <!-- /ko -->
-        </ul>
-    <!-- /ko --><!-- ko ifnot: searchResults().docItems.length -->
-        <!-- ko ifnot: searchResults().isEmpty -->
-            <!-- ko if: searchResults().isSearch -->
-                <div class="alert alert-block">Unable to find anything</div>
-            <!-- /ko --><!-- ko ifnot: searchResults().isSearch -->
-                <div class="alert alert-error">Unknown command</div>
-            <!-- /ko -->
+                <!-- /ko -->
+            </div>
         <!-- /ko -->
-    <!-- /ko -->
+    </div>
 </div>
diff --git a/screenshot-example-multiline-commands.png b/screenshot-example-multiline-commands.png
diff --git a/setup.py b/setup.py
@@ -14,7 +14,7 @@
 plugin_name = "Marlin GCode Documentation"
 
 # The plugin's version. Can be overwritten within OctoPrint's internal data via __plugin_version__ in the plugin module
-plugin_version = "0.9.1"
+plugin_version = "0.9.2"
 
 # The plugin's description. Can be overwritten within OctoPrint's internal data via __plugin_description__ in the plugin
 # module