Skip to content

Instantly share code, notes, and snippets.

@Thanood

Thanood/app.html

Last active October 9, 2017 18:28
Show Gist options
  • Save Thanood/4b3cc8e914e2d642854037f35dd9708b to your computer and use it in GitHub Desktop.
Save Thanood/4b3cc8e914e2d642854037f35dd9708b to your computer and use it in GitHub Desktop.
Download ZIP
Aurelia-Materialize bridge tabs select
Raw
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>
Raw
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')}`);
}
}
Raw
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>
Raw
logger.html
<template>
<div class="console">
</div>
</template>
Raw
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);
}
Raw
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());
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment