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

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

import { PolymerElement, html } from '../@polymer/polymer/polymer-element.js';
import { mixinBehaviors } from '../@polymer/polymer/lib/legacy/class.js';

import { TriBlockViewResponsiveBehavior } from "../triblock-responsive-layout/triblock-view-responsive-behavior.js";
import { assertParametersAreDefined, getModuleUrl } from "../tricore-util/tricore-util.js";

class @ElementCamelCaseDetails extends mixinBehaviors([TriBlockViewResponsiveBehavior], PolymerElement) {
	static get template() {
		return html `
			<style include="shared-page-styles tristyles-theme">

				:host {
					@apply --layout-vertical;
				}

				.page-header {
					background-color: var(--ibm-neutral-2);
				}

				:host([small-screen]) .page-header {
					background-color: var(--tri-header-color);
					padding: 5px 10px 5px 10px;
				}

				:host(:not([small-screen])) .detail-page-content {
					@apply --layout-flex;
					@apply --layout-horizontal;
				}

				:host([small-screen]) .detail-page-content {
					@apply --layout-vertical;
				}

				.action-bar {
					@apply --layout-horizontal;
				}

				:host([small-screen]) .action-bar {
					background-color: var(--tri-footer-background-color);
					color: var(--tri-footer-color);
					width: 100%;
					padding: 5px;
					@apply --layout-center-center;
					@apply --layout-fixed-bottom;
					z-index: 102;
				}

				.detail-page-left-panel {
					@apply --layout-vertical;
					flex-shrink: 0;
					padding: 17px 20px 0px 20px;
				}

				.detail-page-right-panel {
					padding: 17px 20px 20px 20px;
					background-color: var(--tri-primary-content-background-color);
					@apply --layout-vertical;
				}

				:host([small-screen]) .detail-page-left-panel, .detail-page-right-panel {
					padding: 10px;
				}

				:host([small-screen]) .detail-page-right-panel {
					flex-shrink: 0;
					border-top: 1px solid var(--ibm-gray-10);
				}

				:host([small-screen]) .detail-page-right-panel::after {
					content: "";
					padding-bottom: 55px;
				}

				:host(:not([small-screen])) .detail-page-right-panel {
					@apply --layout-flex;
				}			

				paper-button {
					margin: 0px;
					height: 44px;
					width: 90px;
					border-width: 2px !important;
				}

				:host([small-screen]) paper-button {
					border: 2px solid var(--tri-footer-color);
				}

				.thumbnail {
					cursor: pointer;
					width:80px; 
					height:80px;
				}


				</style>

				<triplat-route id="detailRoute" name="detail" params="{{_params}}"></triplat-route>

				<div class="page-header">
					<div class="header-text tri-h2" hidden\$="[[smallScreen]]">Record Detail</div>
					<div class="action-bar">
						<paper-button on-tap="_onSubmit">Submit</paper-button>
					</div>
				</div>

				<triblock-responsive-layout class="detail-page-content">
					<div class="detail-page-left-panel">
						<paper-input label="Status" readonly="" value="[[_record.status]]"></paper-input>
						<paper-input label="Name" value="{{_record.name}}"></paper-input>
					</div>
					<div class="detail-page-right-panel">
						<paper-textarea label="Detail" value="{{_record.detail}}"></paper-textarea>
						<label>Image:</label>
						<iron-image class="thumbnail" sizing="contain" src="[[importPath]]images/tririga.jpg" on-tap="_handleImageTap"></iron-image>
					</div>
				</triblock-responsive-layout>

				<triblock-popup id="imageDialog" with-backdrop="[[!smallScreen]]">
					<iron-image id="ironImageDialog" sizing="contain" src="[[importPath]]images/tririga.jpg"></iron-image>
				</triblock-popup>
		`;
	}

	static get properties() {
		return {
			_params: {
				type: Object,
				observer: "_onParamsChanged"
			},
	
			_record: {
				type: Object
			}
		}
	}

	_onSubmit() {
		this.dispatchEvent(new CustomEvent('submit-detail', {bubbles: true, composed: true, detail: {"record": this._record}}));
	}

    _handleImageTap() {
		if (this.smallScreen) {
			this.$.ironImageDialog.width = window.innerWidth-60;
			this.$.ironImageDialog.height = window.innerHeight-60;
		} else {
			this.$.ironImageDialog.width = window.innerWidth/2;
			this.$.ironImageDialog.height = window.innerHeight/2;
		}
		this.$.imageDialog.openPopup();
	}

    _onParamsChanged(newParams, oldParams) {
		this._record = this._getRecord(newParams.id);
	}

    _getRecord(id) {
		var record = {};
		record._id = id;
		record.name = "Name 00000" + id;
		record.detail = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae fringilla turpis. Morbi sollicitudin ultrices erat, vitae finibus ipsum condimentum et. Aliquam fringilla odio mauris, ut tempus arcu aliquet ut.\n Pellentesque sollicitudin tristique lacus non consequat. Quisque odio sem, porttitor quis metus pellentesque, ultrices finibus tellus. Nullam a ligula mattis, tristique sapien ac, consequat lorem. In quis gravida elit. Vivamus in tellus lorem. Vestibulum eu mollis tortor.\n Praesent rutrum lacus nisi, eget suscipit diam tincidunt ut. Donec ac dui at quam tempor consectetur sit amet quis tortor. Aenean ex lacus, mollis eu pulvinar et, accumsan eu ante. Maecenas vel turpis tristique, malesuada eros quis, posuere tellus. Duis metus metus, congue ullamcorper libero sed, bibendum tempor ipsum.";
		switch(id) {
			case "1":
				record.status = "Active";
				break;
			case "2":
				record.status = "Draft";
				break;
			case "3":
				record.status = "Active";
				break;
		}
		return record;
	} 

	static get importMeta() {
		return getModuleUrl("@element/@element-details.js");
	}
}

window.customElements.define("@element-details", @ElementCamelCaseDetails);