@tririga/tri-template/lib/templates/responsive-app/@element.html

A simple tool for generating IBM TRIRIGA UX view skeletons from available templates.

<link rel="import" href="../triplat-view-behavior/triplat-view-behavior.html">
<link rel="import" href="../triblock-app-layout/triblock-app-layout.html">

<link rel="import" href="triapp-lazy-loading-behavior.html">
<link rel="import" href="@element-banner-routing-behavior.html">
<link rel="import" href="@element-lazy-imports.html">

<dom-module id="@element">
	<template>
		<style>
			triblock-app-layout {
				--triblock-app-layout-body-background-color: white;
				--triblock-app-layout-mobile-drawer-z-index: 104;
			}

			@element-main {
				@apply(--layout-flex);
				@apply(--layout-vertical);
			}
		</style>

		<triblock-app-layout mobile-page-label="[[_mobilePageLabel]]"
				show-mobile-back-button="[[_showMobileBackButton]]">

			<div app-title>
				<span><b>App @element</b></span>
			</div>

			<triblock-banner-button home tap-handler="_navigateHome"></triblock-banner-button>
			<triblock-banner-button back tap-handler="_handleBackButtonTap"></triblock-banner-button>

			<@element-main id="mainContent" content></@element-main>

		</triblock-app-layout>
	</template>
</dom-module>
<script>
	Polymer({

		is: "@element",
		
		behaviors: [
			TriPlatViewBehavior,
			TriAppLazyLoadingBehavior,
			@ElementCamelCaseBannerRoutingBehavior
		],

		_navigateHome: function(e) {
			this.$.mainContent.openInbox();
		},

		attached: function() {
			Polymer.RenderStatus.afterNextRender(this, this._loadRequestsPage);
		},

		_loadRequestsPage: function() {
			this.loadResource(this.$.mainContent, "@element-main.html");
		}
	});
</script>