Thanood/app.html

## app.html
<template>
  <style>
    div.tab-content {
      padding: 10px;
    }
  </style>
  <require from="./logger"></require>
  <div class="row">

    <ul md-tabs="on-show.call: onShow(element)" md-on-selected.delegate="onTabSelected($event)" class="z-depth-1">
      <li md-waves="color: primary;"><a class="active" href="#tab1">Tab 1</a></li>
      <li md-waves="color: primary;"><a href="#tab2">Tab 2</a></li>
      <li md-waves="color: primary;"><a href="#tab3">Tab 3</a></li>
      <li md-waves="color: primary;"><a href="#tab4">Tab 4</a></li>
    </ul>

    </div>
    <div id="tab1" class="tab-content z-depth-1">
      <p>
        This is tab 1
      </p>
      <select md-select="label: select a value" value.two-way="selectedValue">
        <option value="" disabled selected>select an item</option>
        <option value="item1">item 1</option>
        <option value="item2">item 2</option>
        <option value="item3">item 3</option>
        <option value="item4">item 4</option>
      </select>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi augue, sodales eget felis quis, fringilla luctus ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed in quam a velit ultricies suscipit eu sed arcu. Duis dapibus sodales est, a semper augue laoreet et. Quisque tristique molestie odio in pulvinar. Aliquam eget enim vitae felis varius varius at ut nisl.
      </p>
    </div>
    <div id="tab2" class="tab-content z-depth-1">
      <p>
        This is tab 2
      </p>
      <p>
        Nunc quis lectus elementum, venenatis est eget, blandit dui. Vivamus fermentum nulla interdum massa blandit rhoncus. Ut dui libero, sollicitudin et gravida id, ultricies eu nunc. Nunc nisi sem, facilisis sed mauris et, pharetra tincidunt orci. Cras molestie, arcu ac venenatis fringilla, nulla dui laoreet magna, sit amet blandit diam tellus et nisl. Nunc a augue aliquam, tristique justo vel, efficitur metus. Nullam faucibus blandit tincidunt.
      </p>
    </div>
    <div id="tab3" class="tab-content z-depth-1">
      <p>
        This is tab 3
      </p>
      <p>
        Praesent ullamcorper tortor ante, sed tempor dui aliquet id. Donec vehicula fringilla vestibulum. Proin suscipit ex vitae massa ultricies tempus. Nulla id finibus metus. Phasellus sollicitudin mi ac rhoncus rutrum. Nullam vulputate semper turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
      </p>
    </div>
    <div id="tab4" class="tab-content z-depth-1">
      <p>
        This is tab 4
      </p>
      <p>
        In tincidunt, massa sed mollis ornare, erat turpis aliquam orci, sed elementum nulla dui non nibh. Quisque et quam non ante ultrices pellentesque. Proin tempus ante justo, id placerat augue luctus at. Nullam tincidunt, lacus vitae dignissim aliquam, turpis tortor aliquam nisi, sit amet rhoncus urna odio in leo.
      </p>
    </div>
    <div class="row">
    <div class="col s12">
      <md-card md-title="Console log">
        <logger class="z-depth-1" view-model.ref="logger"></logger>
      </md-card>
    </div>
  </div>
</template>

## app.js
export class App {
  selectedValue = '';

  onTabSelected(e) {
    this.logger.log(`tab selected ${e.detail}`);
  }

  onShow(element) {
    this.logger.log(`onShow on element: ${element.attr('id')}`);
  }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body aurelia-app="main">
    <h1>Loading...</h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
    <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-materialize-bundles/0.30.0/config2.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
      System.import('materialize/dist/css/materialize.css!');
    </script>
  </body>
</html>

## logger.html
<template>
  <div class="console">
  </div>
</template>

## logger.js
export class Logger {
  attached() {
    this.overrideStyles();
  }


  log(message, isError, container) {
    let lastContainer = $('.console div:first', container);
    let counter = lastContainer.find('.count').detach();
    let lastMessage = lastContainer.text();
    let count = 1 * (counter.text() || 1);

    lastContainer.append(counter);

    if (!lastContainer.length || message !== lastMessage) {
      $('<div' + (isError ? ' class=\'error\'' : '') + '/>')
      .css({
        marginTop: -24,
        backgroundColor: isError ? '#ffbbbb' : '#b2ebf2'
      })
      .html(message)
      .prependTo($('.console', container))
      .animate({ marginTop: 0 }, 300)
      .animate({ backgroundColor: isError ? '#ffdddd' : '#ffffff' }, 800);
    } else {
      count++;

      if (counter.length) {
        counter.html(count);
      } else {
        lastContainer.html(lastMessage)
        .append('<span class=\'count\'>' + count + '</span>');
      }
    }
  }

  error(message) {
    this.log(message, true);
  }

  overrideStyles() {
    jQuery.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'], function(i, attr) {
      jQuery.fx.step[attr] = function(fx) {
        if (!fx.state || typeof fx.end === typeof '') {
          fx.start = getColor(fx.elem, attr);
          fx.end = getRGB(fx.end);
        }

        fx.elem.style[attr] = ['rgb(', [
          Math.max(Math.min(parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0], 10), 255), 0),
          Math.max(Math.min(parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1], 10), 255), 0),
          Math.max(Math.min(parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2], 10), 255), 0)
        ].join(','), ')'].join('');
      };
    });
  }
}


// Color Conversion functions from highlightFade
// By Blair Mitchelmore
// http://jquery.offput.ca/highlightFade/

// Parse strings looking for color tuples [255,255,255]
function getRGB(color) {
  let result;

  // Check if we're already dealing with an array of colors
  if (color && color.constructor === Array && color.length === 3) {
    return color;
  }

  // Look for rgb(num,num,num)
  result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color);
  if (result) {
    return [parseInt(result[1], 10), parseInt(result[2], 10), parseInt(result[3], 10)];
  }

  // Look for #a0b1c2
  result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color);
  if (result) {
    return [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)];
  }

  // Otherwise, we're most likely dealing with a named color
  return jQuery.trim(color).toLowerCase();
}

function getColor(elem, attr) {
  let color;

  do {
    color = jQuery.css(elem, attr);

    // Keep going until we find an element that has color, or we hit the body
    if (color && color !== 'transparent' || jQuery.nodeName(elem, 'body')) {
      break;
    }

    attr = 'backgroundColor';

    elem = elem.parentNode;
  } while (elem);

  return getRGB(color);
}

## main.js
/*******************************************************************************
 * The following two lines enable async/await without using babel's
 * "runtime" transformer. Uncomment the lines if you intend to use async/await.
 *
 * More info here:  https://github.com/jdanyow/aurelia-plunker/issues/2
 */
//import regeneratorRuntime from 'babel-runtime/regenerator';
//window.regeneratorRuntime = regeneratorRuntime;
/******************************************************************************/

import 'materialize';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-materialize-bridge', bridge => bridge.useAll() );

  aurelia.start().then(a => a.setRoot());
}
	<template>
	<style>
	div.tab-content {
	padding: 10px;
	}
	</style>
	<require from="./logger"></require>
	<div class="row">

	<ul md-tabs="on-show.call: onShow(element)" md-on-selected.delegate="onTabSelected($event)" class="z-depth-1">
	<li md-waves="color: primary;"><a class="active" href="#tab1">Tab 1</a></li>
	<li md-waves="color: primary;"><a href="#tab2">Tab 2</a></li>
	<li md-waves="color: primary;"><a href="#tab3">Tab 3</a></li>
	<li md-waves="color: primary;"><a href="#tab4">Tab 4</a></li>
	</ul>

	</div>
	<div id="tab1" class="tab-content z-depth-1">
	<p>
	This is tab 1
	</p>
	<select md-select="label: select a value" value.two-way="selectedValue">
	<option value="" disabled selected>select an item</option>
	<option value="item1">item 1</option>
	<option value="item2">item 2</option>
	<option value="item3">item 3</option>
	<option value="item4">item 4</option>
	</select>
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi augue, sodales eget felis quis, fringilla luctus ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed in quam a velit ultricies suscipit eu sed arcu. Duis dapibus sodales est, a semper augue laoreet et. Quisque tristique molestie odio in pulvinar. Aliquam eget enim vitae felis varius varius at ut nisl.
	</p>
	</div>
	<div id="tab2" class="tab-content z-depth-1">
	<p>
	This is tab 2
	</p>
	<p>
	Nunc quis lectus elementum, venenatis est eget, blandit dui. Vivamus fermentum nulla interdum massa blandit rhoncus. Ut dui libero, sollicitudin et gravida id, ultricies eu nunc. Nunc nisi sem, facilisis sed mauris et, pharetra tincidunt orci. Cras molestie, arcu ac venenatis fringilla, nulla dui laoreet magna, sit amet blandit diam tellus et nisl. Nunc a augue aliquam, tristique justo vel, efficitur metus. Nullam faucibus blandit tincidunt.
	</p>
	</div>
	<div id="tab3" class="tab-content z-depth-1">
	<p>
	This is tab 3
	</p>
	<p>
	Praesent ullamcorper tortor ante, sed tempor dui aliquet id. Donec vehicula fringilla vestibulum. Proin suscipit ex vitae massa ultricies tempus. Nulla id finibus metus. Phasellus sollicitudin mi ac rhoncus rutrum. Nullam vulputate semper turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
	</p>
	</div>
	<div id="tab4" class="tab-content z-depth-1">
	<p>
	This is tab 4
	</p>
	<p>
	In tincidunt, massa sed mollis ornare, erat turpis aliquam orci, sed elementum nulla dui non nibh. Quisque et quam non ante ultrices pellentesque. Proin tempus ante justo, id placerat augue luctus at. Nullam tincidunt, lacus vitae dignissim aliquam, turpis tortor aliquam nisi, sit amet rhoncus urna odio in leo.
	</p>
	</div>
	<div class="row">
	<div class="col s12">
	<md-card md-title="Console log">
	<logger class="z-depth-1" view-model.ref="logger"></logger>
	</md-card>
	</div>
	</div>
	</template>
	export class App {
	selectedValue = '';

	onTabSelected(e) {
	this.logger.log(`tab selected ${e.detail}`);
	}

	onShow(element) {
	this.logger.log(`onShow on element: ${element.attr('id')}`);
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body aurelia-app="main">
	<h1>Loading...</h1>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
	<script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-materialize-bundles/0.30.0/config2.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	System.import('materialize/dist/css/materialize.css!');
	</script>
	</body>
	</html>
	export class Logger {
	attached() {
	this.overrideStyles();
	}


	log(message, isError, container) {
	let lastContainer = $('.console div:first', container);
	let counter = lastContainer.find('.count').detach();
	let lastMessage = lastContainer.text();
	let count = 1 * (counter.text() \|\| 1);

	lastContainer.append(counter);

	if (!lastContainer.length \|\| message !== lastMessage) {
	$('<div' + (isError ? ' class=\'error\'' : '') + '/>')
	.css({
	marginTop: -24,
	backgroundColor: isError ? '#ffbbbb' : '#b2ebf2'
	})
	.html(message)
	.prependTo($('.console', container))
	.animate({ marginTop: 0 }, 300)
	.animate({ backgroundColor: isError ? '#ffdddd' : '#ffffff' }, 800);
	} else {
	count++;

	if (counter.length) {
	counter.html(count);
	} else {
	lastContainer.html(lastMessage)
	.append('<span class=\'count\'>' + count + '</span>');
	}
	}
	}

	error(message) {
	this.log(message, true);
	}

	overrideStyles() {
	jQuery.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'], function(i, attr) {
	jQuery.fx.step[attr] = function(fx) {
	if (!fx.state \|\| typeof fx.end === typeof '') {
	fx.start = getColor(fx.elem, attr);
	fx.end = getRGB(fx.end);
	}

	fx.elem.style[attr] = ['rgb(', [
	Math.max(Math.min(parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0], 10), 255), 0),
	Math.max(Math.min(parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1], 10), 255), 0),
	Math.max(Math.min(parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2], 10), 255), 0)
	].join(','), ')'].join('');
	};
	});
	}
	}


	// Color Conversion functions from highlightFade
	// By Blair Mitchelmore
	// http://jquery.offput.ca/highlightFade/

	// Parse strings looking for color tuples [255,255,255]
	function getRGB(color) {
	let result;

	// Check if we're already dealing with an array of colors
	if (color && color.constructor === Array && color.length === 3) {
	return color;
	}

	// Look for rgb(num,num,num)
	result = /rgb\(\s([0-9]{1,3})\s,\s([0-9]{1,3})\s,\s([0-9]{1,3})\s\)/.exec(color);
	if (result) {
	return [parseInt(result[1], 10), parseInt(result[2], 10), parseInt(result[3], 10)];
	}

	// Look for #a0b1c2
	result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color);
	if (result) {
	return [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)];
	}

	// Otherwise, we're most likely dealing with a named color
	return jQuery.trim(color).toLowerCase();
	}

	function getColor(elem, attr) {
	let color;

	do {
	color = jQuery.css(elem, attr);

	// Keep going until we find an element that has color, or we hit the body
	if (color && color !== 'transparent' \|\| jQuery.nodeName(elem, 'body')) {
	break;
	}

	attr = 'backgroundColor';

	elem = elem.parentNode;
	} while (elem);

	return getRGB(color);
	}
	/*******************************************************************************
	* The following two lines enable async/await without using babel's
	* "runtime" transformer. Uncomment the lines if you intend to use async/await.
	*
	* More info here: https://github.com/jdanyow/aurelia-plunker/issues/2
	*/
	//import regeneratorRuntime from 'babel-runtime/regenerator';
	//window.regeneratorRuntime = regeneratorRuntime;
	/******************************************************************************/

	import 'materialize';

	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging()
	.plugin('aurelia-materialize-bridge', bridge => bridge.useAll() );

	aurelia.start().then(a => a.setRoot());
	}