gerrit/polygerrit-ui/app/samples/some-screen.html
Viktar Donich 6ea8c8a31e Support for .screen() plugin API
Adds `.screen()` plugin API method for adding plugin-provided
screens. Such screens only have common headers and footers, while rest
of the page is filled with the registered web component.

Any navigation to URL containing `#/x/` hash results in client-only
redirect to `/x/` and showing appropriate plugin-provided screen.

Adds a `plugin.screenUrl()` method for generating consistent URLs for
such screens.

Adds an example plugin with number of ways the provided API can be used.

Adds partial support for GWT UI `.screen()` method. Notable difference -
does not support RegExp for the screen matching.

Change-Id: I0be3dee8eba6f8535a1fb2be05f473f3649bad8f
2017-12-20 15:14:13 -08:00

50 lines
1.4 KiB
HTML

<dom-module id="some-screen">
<script>
Gerrit.install(plugin => {
// Recommended approach for screen() API.
plugin.screen('main', 'some-screen-main');
const mainUrl = plugin.screenUrl('main');
// Support for deprecated screen API.
plugin.deprecated.screen('foo', ({token, body, show}) => {
body.innerHTML = `This is a plugin screen at ${token}<br/>` +
`<a href="${mainUrl}">Go to main plugin screen</a>`;
show();
});
// Quick and dirty way to get something on screen.
plugin.screen('bar').onAttached(el => {
el.innerHTML = `This is a plugin screen at ${el.token}<br/>` +
`<a href="${mainUrl}">Go to main plugin screen</a>`;
});
// Add a "Plugin screen" link to the change view screen.
plugin.hook('change-metadata-item').onAttached(el => {
el.innerHTML = `<a href="${mainUrl}">Plugin screen</a>`;
});
});
</script>
</dom-module>
<dom-module id="some-screen-main">
<template>
This is the <b>main</b> plugin screen at [[token]]
<ul>
<li><a href$="[[rootUrl]]/foo">via deprecated</a></li>
<li><a href$="[[rootUrl]]/bar">without component</a></li>
</ul>
</template>
<script>
Polymer({
is: 'some-screen-main',
properties: {
rootUrl: String,
},
attached() {
this.rootUrl = `${this.plugin.screenUrl()}`;
},
});
</script>
</dom-module>