Skip to content

Instantly share code, notes, and snippets.

@Thanood

Thanood/app.css

Created April 25, 2017 09:12
Show Gist options
  • Save Thanood/c727880adbb0d75519a0e444398d4217 to your computer and use it in GitHub Desktop.
Save Thanood/c727880adbb0d75519a0e444398d4217 to your computer and use it in GitHub Desktop.
Download ZIP
Aurelia-Materialize bridge collections selection css-grid
Raw
app.css
md-collection-item.collection-item.selected {
background-color: #ccc;
}
md-collection-item.collection-item.disabled {
background-color: #eee;
}
.icon
{
/*position: relative;*/
/*top: 7px;*/
}
Raw
app.html
<template>
<require from="./logger"></require>
<require from="./app.css"></require>
<div class="row">
<div class="col s12">
<div>
<md-collection view-model.ref="list">
<md-collection-item repeat.for="actor of actors" style="position: relative; min-height: 84px;" class="${ selector.isSelected ? 'selected' : '' } ${ selector.mdDisabled ? 'disabled' : '' }">
<div class="row valign-wrapper">
<div class="col s1">
<md-collection-selector
view-model.ref="selector"
item.bind="actor"
md-on-selection-changed.delegate="onSelectionChanged($event)"
md-disabled="${$index === 2}"
>
<!--preferably i would like to use icon instead of img-->
<i class="material-icons prefix md-collection-selector__hover icon">
add
</i>
<!--<img if.bind="$index !== 2" src="http://aurelia-ui-toolkits.github.io/demo-materialize/images/collections-sample-1.jpg" alt="" class="circle md-collection-selector__hover">-->
</md-collection-selector>
</div>
<div class="col s11">
some text
</div>
</div>
<!--<span class="accent-text title">${actor.name}</span>-->
<!--<p>${actor.description}</p>-->
<!--<div class="secondary-content">-->
<!-- <i class="material-icons">send</i>-->
<!--</div>-->
</md-collection-item>
</md-collection>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div>
<button md-button click.delegate="list.selectAll()">select all</button>
<button md-button click.delegate="list.clearSelection()">clear</button>
</div>
</div>
</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 {
actors = [
{
'name': 'Bryan Cranston',
'episodes': 62,
'description': 'Bryan Cranston played the role of Walter in Breaking Bad. He is also known for playing Hal in Malcom in the Middle.'
}, {
'name': 'Aaron Paul',
'episodes': 62,
'description': 'Aaron Paul played the role of Jesse in Breaking Bad. He also featured in the "Need For Speed" Movie.'
}, {
'name': 'Bob Odenkirk',
'episodes': 62,
'description': 'Bob Odenkrik played the role of Saul in Breaking Bad. Due to public fondness for the character, Bob stars in his own show now, called "Better Call Saul".'
}
];
onSelectionChanged(e) {
let selected = this.list.getSelected();
let names = selected.map(i => i.name);
this.logger.log('selection changed: ' + names.join(', '));
}
}
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.27.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