@tririga/tri-template/lib/templates/app-layout-v3/@element.js

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

import { mixinBehaviors } from '../@polymer/polymer/lib/legacy/class.js';
import { PolymerElement, html } from '../@polymer/polymer/polymer-element.js';
import { TriPlatViewBehavior } from "../triplat-view-behavior/triplat-view-behavior.js";
import "../triblock-app-layout/triblock-app-layout.js";
import "../triplat-routing/triplat-routing.js";
import "../@polymer/iron-pages/iron-pages.js";
import "./@element-styles.js";

class @ElementCamelCase extends mixinBehaviors([TriPlatViewBehavior], PolymerElement) {
	static get template() {
		return html`
			<style include="@element-styles tristyles-theme">

				
			</style>

			<triplat-route id="homeRoute" name="home" path="/"></triplat-route>
			<triplat-route id="reportsRoute" name="reports" path="/reports"></triplat-route>
			<triplat-route id="watsonRoute" name="watson" path="/watson"></triplat-route>

			<triblock-app-layout app-label="@element" mobile-page-label="@element" show-mobile-back-button="">

				<!-- Enable to customize app-title -->
				<!--<div app-title>			
					<span><b>App @element</b></span>
				</div>-->

				<triblock-banner-button tap-handler="_navigateToHome" home slot="banner-button"></triblock-banner-button>
				<triblock-banner-button tap-handler="_navigateBack" back slot="banner-button"></triblock-banner-button>

				<triblock-banner-button icon="ibm:table-tables" label="Reports" triplat-route-id="reportsRoute" slot="banner-button"></triblock-banner-button>
				<triblock-banner-button icon="ibm:world-globe" label="Watson Analytics" triplat-route-id="watsonRoute" slot="banner-button"></triblock-banner-button>
				
				<triplat-route-selector content>
					<iron-pages>
						<section route="home" default-route>
							<span>@element Main Page</span>
						</section>
						<section route="reports">
							<span>Reports Page</span>
						</section>
						<section route="watson">
							<span>Watson Analytics Page</span>
						</section>
					</iron-pages>
				</triplat-route-selector>

			</triblock-app-layout>
		`
	}

	_navigateToHome() {
		this.$.homeRoute.navigate();
	}

    _navigateBack() {
		window.history.back();
	}
}

window.customElements.define('@element', @ElementCamelCase);