Merge pull request #342 from googlecodelabs/google-feedback

Using Google Feedback when there is no Feedback link provided.

Author: Nicolas Garnier

claat/render/template.html

@@ -51,6 +51,7 @@
   <script src="{{.Prefix}}/codelab-elements/custom-elements.min.js"></script>
   <script src="{{.Prefix}}/codelab-elements/prettify.js"></script>
   <script src="{{.Prefix}}/codelab-elements/codelab-elements.js"></script>
+  <script src="//support.google.com/inapp/api.js"></script>
 
 </body>
 </html>

codelab-elements/google-codelab/BUILD.bazel

@@ -25,7 +25,7 @@ closure_js_library(
     name = "google_codelab",
     srcs = [
         "google_codelab.js",
-        "google_codelab_def.js"
+        "google_codelab_def.js",
     ],
     deps = [
         "@io_bazel_rules_closure//closure/library",

codelab-elements/google-codelab/google_codelab.js

@@ -559,6 +559,7 @@ class Codelab extends HTMLElement {
       return;
     }
 
+
     let time = 0;
     for (let i = this.currentSelectedStep_; i < this.steps_.length; i++) {
       const step = /** @type {!Element} */ (this.steps_[i]);
@@ -747,6 +748,17 @@ class Codelab extends HTMLElement {
     const feedback = this.getAttribute(FEEDBACK_LINK_ATTR);
     const steps = this.steps_.map((step) => step.getAttribute(LABEL_ATTR));
     soy.renderElement(this.drawer_, Templates.drawer, {steps, feedback});
+    // Start Google Feedback when the feedback link is clicked, if it exists.
+    const feedbackLink = this.drawer_.querySelector('#codelab-feedback');
+    if (feedbackLink) {
+      this.eventHandler_.listen(feedbackLink, events.EventType.CLICK,
+        (e) => {
+          if ('userfeedback' in window) {
+            window['userfeedback']['api']['startFeedback']
+                ({productId: '5143948'});
+          }
+        });
+    }
   }
 
   /**

codelab-elements/google-codelab/google_codelab.soy

@@ -84,11 +84,9 @@
       {/for}
     </ol>
   </div>
-  {if $feedback}
-  <div id="feedback" class="metadata">
-    <a target="_blank" href="{$feedback}">
+  <div class="metadata">
+    <a target="_blank" {if $feedback}href="{$feedback}"{else}href="#" id="codelab-feedback"{/if}>
       <i class="material-icons">bug_report</i> Report a mistake
     </a>
   </div>
-  {/if}
 {/template}