From 45921b0db7061aa0a84fd8b0bb60c3f2af8d4c56 Mon Sep 17 00:00:00 2001
From: Viktor Lukashov <viktor@vaadin.com>
Date: Wed, 8 Jan 2020 14:45:04 +0200
Subject: [PATCH] fix: add a mass-ignore example to the docs

Follow-up on #421, related to #325

fix linter issue
---
 demo/vaadin-router-demo-shared-styles.html    | 10 +++++
 demo/vaadin-router-getting-started-demos.html | 40 +++++++++++++++++--
 2 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/demo/vaadin-router-demo-shared-styles.html b/demo/vaadin-router-demo-shared-styles.html
index 9d651c40..ece6b07f 100644
--- a/demo/vaadin-router-demo-shared-styles.html
+++ b/demo/vaadin-router-demo-shared-styles.html
@@ -37,3 +37,13 @@
     </style>
   </template>
 </dom-module>
+
+<dom-module id="vaadin-demo-snippet-no-renderer-theme" theme-for="vaadin-demo-snippet">
+  <template>
+    <style include="vaadin-demo-snippet-default-theme">
+      :host([theme~="no-renderer"]) #demo {
+        display: none;
+      }
+    </style>
+  </template>
+</dom-module>
diff --git a/demo/vaadin-router-getting-started-demos.html b/demo/vaadin-router-getting-started-demos.html
index 3580fc44..b3cde549 100644
--- a/demo/vaadin-router-getting-started-demos.html
+++ b/demo/vaadin-router-getting-started-demos.html
@@ -247,14 +247,16 @@ <h3>Base URL</h3>
     </vaadin-demo-snippet>
 
     <h3>Excluded links</h3>
-    <p>Vaadin Router can ignore a link if <code>router-ignore</code>
-      parameter is added to the <code>a</code> tag.
+    <p>When some <code>&lt;a&gt;</code> links are external for the app, Vaadin
+      Router can be configured to ignore them and let the browser handle these
+      links in the default way:
+      <code><pre>&lt;a href="/users" <b>router-ignore</b>&gt;Users&lt;/a&gt;</pre></code>
     </p>
     <vaadin-demo-snippet id="vaadin-router-getting-started-demo-ignore" iframe-src="iframe.html">
       <template preserve-content>
         <nav>
           <a href="/">Home</a>
-          <!-- not handled as indicated by router-ignore attribute -->
+          <!-- ignored by Vaadin Router, triggers a full page reload -->
           <a href="/users" router-ignore>Users</a>
         </nav>
 
@@ -271,6 +273,29 @@ <h3>Excluded links</h3>
         </script>
       </template>
     </vaadin-demo-snippet>
+
+    <p>When an large set of URLs needs to be ignored (e.g. all URLs starting
+      with <code>/external</code>), it may be impractical to add the
+      <code>router-ignore</code> attribute to each link separately.
+      For such cases a more practical approach would be to add a special route
+      to the top of the router config:
+    </p>
+    <vaadin-demo-snippet theme="no-renderer" id="vaadin-router-getting-started-demo-ignore-bulk">
+      <template preserve-content>
+        <script>
+          /* eslint-disable-next-line */
+          var routes = [
+            // this would be the first route in the config
+            {
+              path: '/external/(.*)',
+              action: (ctx, commands) => {
+                window.location.pathname = ctx.pathname;
+              }
+            },
+          ];
+        </script>
+      </template>
+    </vaadin-demo-snippet>
   </template>
   <script>
     class VaadinRouterGettingStartedDemos extends DemoReadyEventEmitter(ElementDemo(Polymer.Element)) {
@@ -294,6 +319,15 @@ <h3>Excluded links</h3>
             iframeDemoRenderer._postIframeMessage({type: 'set-url', url: '/ui/'});
           });
         };
+
+        // TODO(vlukashov): Remove the workaround, and implement the feature in
+        // https://github.com/vaadin/vaadin-demo-helpers
+        const bulkIgnoreDemoSnippet = this.$['vaadin-router-getting-started-demo-ignore-bulk'];
+        const orig = bulkIgnoreDemoSnippet._showDemo;
+        bulkIgnoreDemoSnippet._showDemo = function() {
+          orig.apply(this, arguments);
+          this._markdown = this._markdown.replace(/\n\s*\/\* eslint-.*\*\/\n/g, '\n');
+        };
       }
     }
     customElements.define(VaadinRouterGettingStartedDemos.is, VaadinRouterGettingStartedDemos);