Skip to content

Commit

Permalink
fix: add a mass-ignore example to the docs
Browse files Browse the repository at this point in the history
Follow-up on #421, related to #325

fix linter issue
  • Loading branch information
Viktor Lukashov authored and haijian-vaadin committed Jan 9, 2020
1 parent 63f5da6 commit c41583a
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 3 deletions.
10 changes: 10 additions & 0 deletions demo/vaadin-router-demo-shared-styles.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
40 changes: 37 additions & 3 deletions demo/vaadin-router-getting-started-demos.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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)) {
Expand All @@ -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);
Expand Down

0 comments on commit c41583a

Please sign in to comment.