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
		
			
				
	
	
		
			50 lines
		
	
	
		
			1.4 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			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>
 |