Merge pull request #1163 from chef/chris-rock/tutorial

website / tutorial interaction

www/source/layouts/layout.slim

@@ -35,6 +35,7 @@ html
       $('.try-demo').click(function(event){
         event.stopPropagation();
         $('.inspec-tutorial').show()
+        window.dispatchEvent(new Event('resizeTerminal'));
         $('.quit-inspec-tutorial').click(function(event){
           event.stopPropagation();
           $('.inspec-tutorial').hide()

www/tutorial/app/app.component.css

@@ -55,6 +55,10 @@ img {
   border-radius: 5px;
 }
 
+.tutorial-guide /deep/ code {
+  color: lightskyblue;
+}
+
 .title {
   color: lightskyblue;
 }

www/tutorial/app/app.component.ts

@@ -55,10 +55,6 @@ export class AppComponent implements OnInit {
     this.loadCommands();
   }
 
-  ngAfterViewChecked() {
-    // window.scrollTo( 0, document.body.scrollHeight );
-  }
-
   // determines all commands that are not part of the tutorial
   extraCmds() {
     let extra = this.commands.filter(function(item){
@@ -129,7 +125,6 @@ export class AppComponent implements OnInit {
     // and if it is respond appropriately ('could not fetch inspec profile in ''), otherwise
     // respond with 'invalid command' and the command entered
     if (matchFound === false) {
-      console.log('no match found')
       if (command.match(/^inspec exec\s*.*/)) {
         let target = command.match(/^inspec exec\s*(.*)/)
         response = this.red + "Could not fetch inspec profile in '" + target[1] + "' " + this.black;

www/tutorial/app/xterm-terminal/xterm-terminal.component.ts

@@ -64,7 +64,7 @@ export class XtermTerminalComponent implements OnInit, OnChanges{
 
   updateTerminalSize() {
     // recalculate cols and rows
-    let charwidth = 24;
+    let charwidth = 30;
     // read size from parent wrapping element
     let cols = 80
     let rows = Math.floor(this.terminalContainer.parentElement.clientHeight / charwidth)
@@ -90,9 +90,6 @@ export class XtermTerminalComponent implements OnInit, OnChanges{
     this.term._initialized = true;
     this.writePrompt();
 
-    // determine rows for terminal
-    this.updateTerminalSize()
-
     let self = this
     // raw data
     this.term.on('data', function(data){
@@ -110,6 +107,16 @@ export class XtermTerminalComponent implements OnInit, OnChanges{
     }, function(err) {
       console.error(err)
     })
+
+    // determine rows for terminal
+    this.updateTerminalSize()
+
+    // TODO: hack, find a better way
+    // this allows outside tiggers via
+    // window.dispatchEvent(new Event('resizeTerminal'));
+    window.addEventListener('resizeTerminal', function (e) {
+      self.updateTerminalSize();
+    }, false);
   }
 
   // this writes the raw buffer and includes invisible charaters