item-group.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../d2l-dropdown/d2l-dropdown.html">
<link rel="import" href="../d2l-dropdown/d2l-dropdown-menu.html">
<link rel="import" href="../d2l-menu/d2l-menu.html">
<link rel="import" href="../d2l-menu/d2l-menu-item.html">
<link rel="import" href="../d2l-menu/d2l-menu-item-link.html">
<link rel="import" href="../d2l-icons/tier1-icons.html">
<link rel="import" href="../d2l-offscreen/d2l-offscreen-shared-styles.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="item-link-behavior.html">
<link rel="import" href="group-button.html">

<dom-module id="d2l-navigation-item-group">
	<style include="d2l-navigation-shared-styles d2l-offscreen-shared-styles">
		:host {
			@apply(--d2l-navigation-item);
		}
		:host([hide]) {
			@apply(--d2l-offscreen);
		}
		:host-context([dir='rtl']) {
			@apply(--d2l-navigation-item-rtl);
		}
	</style>
	<template>
		<d2l-dropdown>
			<button is="d2l-navigation-group" class="d2l-dropdown-opener" tabindex$="{{tabIndex}}">[[groupText]]</button>
			<d2l-dropdown-menu>
				<d2l-menu>
					<template is="dom-repeat" items="{{links}}">
						<template is="dom-if" if="{{isLink(item)}}">
							<d2l-menu-item-link
								text="[[getText(item)]]"
								href="[[getHref(item)]]"></d2l-menu-item-link>
						</template>
						<template is="dom-if" if="{{!isLink(item)}}">
							<d2l-menu-item
								text="[[getText(item)]]"
								item="[[item]]"
								on-d2l-menu-item-select="_handleItemSelect"></d2l-menu-item>
						</template>
					</template>
				</d2l-menu>
			</d2l-dropdown-menu>
		</d2l-dropdown>
	</template>
</dom-module>
<script>
	Polymer({
		is: 'd2l-navigation-item-group',
		behaviors: [window.D2L.PolymerBehaviors.Navigation.ItemLinkBehavior],
		properties: {
			item: Object,
			groupText: {
				type: String,
				computed: '_computeGroupText(item)'
			},
			links: {
				type: String,
				computed: '_computeLinks(item)'
			}
		},
		hostAttributes: {
			role: 'listitem'
		},
		focus: function() {
			this.$$('button').focus();
		},
		isFocused: function() {
			return (document.activeElement === this.$$('button'));
		},
		_computeGroupText: function(item) {
			if (item.properties.text) {
				return item.properties.text;
			}
			return '';
		},
		_computeLinks: function(item) {
			var links = [];

			if (item.entities.length > 0) {
				item.entities.forEach(function(entity) {
					if (
						(entity.class.indexOf('link') > -1) ||
						(entity.class.indexOf('popup') > -1)
					) {
						links.push(entity);
					}
				});
			}
			return links;
		},
		_handleItemSelect: function(e) {
			this._onPopupOrActionSelect(e.target.item);
		}
	});
</script>