From 994f01dd4b8c95a1313cc4b3c7e641909c32dec2 Mon Sep 17 00:00:00 2001
From: Daniel Bendel <daniel.bendel@gmail.com>
Date: Mon, 11 Apr 2016 23:05:02 +0200
Subject: [PATCH] feat(md-collection-selector): add list-selection
 functionality

---
 src/collection/collection.js               | 14 ++++++++-
 src/collection/md-collection-selector.css  | 36 ++++++++++++++++++++++
 src/collection/md-collection-selector.html |  8 +++++
 src/collection/md-collection-selector.js   | 19 ++++++++++++
 src/config-builder.js                      |  1 +
 5 files changed, 77 insertions(+), 1 deletion(-)
 create mode 100644 src/collection/md-collection-selector.css
 create mode 100644 src/collection/md-collection-selector.html
 create mode 100644 src/collection/md-collection-selector.js

diff --git a/src/collection/collection.js b/src/collection/collection.js
index 5900752a..e314af45 100644
--- a/src/collection/collection.js
+++ b/src/collection/collection.js
@@ -1,4 +1,16 @@
 import { customElement } from 'aurelia-templating';
+import { inject } from 'aurelia-dependency-injection';
 
 @customElement('md-collection')
-export class MdCollection {}
+@inject(Element)
+export class MdCollection {
+  constructor(element) {
+    this.element = element;
+  }
+
+  getSelected() {
+    let items = [].slice.call(this.element.querySelectorAll('md-collection-selector'));
+    return items.filter(i => i.au['md-collection-selector'].viewModel.isSelected)
+      .map(i => i.au['md-collection-selector'].viewModel.item);
+  }
+}
diff --git a/src/collection/md-collection-selector.css b/src/collection/md-collection-selector.css
new file mode 100644
index 00000000..f83f4fa1
--- /dev/null
+++ b/src/collection/md-collection-selector.css
@@ -0,0 +1,36 @@
+md-collection-selector .md-collection-selector__hover {
+  display: inline-block;
+}
+md-collection-selector:hover .md-collection-selector__hover, md-collection-item.selected md-collection-selector .md-collection-selector__hover {
+  display: none !important;
+}
+md-collection-selector .md-collection-selector__checkbox div {
+  margin-left: 5px;
+  display: inline-block;
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  margin-right: 11px;
+  height: 42px;
+  width: 42px;
+  line-height: 42px;
+  text-align: center;
+}
+md-collection-selector .md-collection-selector__checkbox .md-collection-selector__hover ~ div {
+  display: none;
+}
+
+md-collection-selector:hover .md-collection-selector__checkbox .md-collection-selector__hover ~ div, md-collection-item.selected md-collection-selector .md-collection-selector__checkbox .md-collection-selector__hover ~ div {
+  display: inline-block;
+}
+
+md-collection-item.selected {
+  background-color: #eee;
+}
+
+md-collection-selector md-checkbox {
+  display: inline-block;
+}
+md-collection-selector md-collection md-checkbox .md-checkbox.is-upgraded {
+  padding-left: 16px;
+}
diff --git a/src/collection/md-collection-selector.html b/src/collection/md-collection-selector.html
new file mode 100644
index 00000000..985c2217
--- /dev/null
+++ b/src/collection/md-collection-selector.html
@@ -0,0 +1,8 @@
+<template>
+  <require from="./md-collection-selector.css"></require>
+  <div class="md-collection-selector__checkbox">
+    <content select=".md-collection-selector__hover"></content>
+    <div>
+      <md-checkbox md-checked.two-way="isSelected"></mdl-checkbox>
+    </div>
+</template>
diff --git a/src/collection/md-collection-selector.js b/src/collection/md-collection-selector.js
new file mode 100644
index 00000000..6bacad67
--- /dev/null
+++ b/src/collection/md-collection-selector.js
@@ -0,0 +1,19 @@
+import { bindable, customElement } from 'aurelia-templating';
+import { inject } from 'aurelia-dependency-injection';
+import { observable } from 'aurelia-binding';
+import { fireMaterializeEvent } from '../common/events';
+
+@customElement('md-collection-selector')
+@inject(Element)
+export class MdlListSelector {
+  @bindable() item;
+  @observable() isSelected = false;
+
+  constructor(element) {
+    this.element = element;
+  }
+
+  isSelectedChanged(newValue) {
+    fireMaterializeEvent(this.element, 'selection-changed', { item: this.item, isSelected: this.isSelected });
+  }
+}
diff --git a/src/config-builder.js b/src/config-builder.js
index 4279b432..d46c8dd2 100644
--- a/src/config-builder.js
+++ b/src/config-builder.js
@@ -110,6 +110,7 @@ export class ConfigBuilder {
     this.globalResources.push('./collection/collection');
     this.globalResources.push('./collection/collection-item');
     this.globalResources.push('./collection/md-collection-item-secondary.html');
+    this.globalResources.push('./collection/md-collection-selector');
     return this;
   }