Thanood · August 14, 2017 09:28 · Jul 4, 2017 · Jul 4, 2017 · Jul 4, 2017 · Jul 4, 2017
diff --git a/app.html b/app.html
@@ -6,8 +6,8 @@
   </div>
 
   <md-sidenav
-    md-sidenav-show.delegate="onShow($event)"
-    md-sidenav-hide.delegate="onHide($event)"
+    md-on-sidenav-show.delegate="onShow($event)"
+    md-on-sidenav-hide.delegate="onHide($event)"
     view-model.ref="sideNav"
   >
     <ul>

diff --git a/app.html b/app.html
@@ -6,8 +6,8 @@
   </div>
 
   <md-sidenav
-    md-sidenav-show="onShow($event)"
-    md-sidenav-hide="onHide($event)"
+    md-sidenav-show.delegate="onShow($event)"
+    md-sidenav-hide.delegate="onHide($event)"
     view-model.ref="sideNav"
   >
     <ul>

diff --git a/app.html b/app.html
@@ -0,0 +1,20 @@
+<template>
+  <require from="./logger"></require>
+  <a md-sidenav-collapse="ref.bind: sideNav;" md-button md-waves>Toggle SideNav</a>
+  <div>
+    <logger class="z-depth-1" view-model.ref="logger"></logger>
+  </div>
+
+  <md-sidenav
+    md-sidenav-show="onShow($event)"
+    md-sidenav-hide="onHide($event)"
+    view-model.ref="sideNav"
+  >
+    <ul>
+      <li md-waves><a href="#">About</a></li>
+      <li md-waves><a href="#">Installation</a></li>
+      <li md-waves><a href="#">Project Status</a></li>
+      <li md-waves><a href="#">Help/Docs</a></li>
+    </ul>
+  </md-sidenav>
+</template>
diff --git a/app.js b/app.js
@@ -0,0 +1,9 @@
+export class App {
+  onShow(e) {
+    this.logger.log(`sidenav opened; ${JSON.stringify(e)}`);
+  }
+
+  onHide(e) {
+    this.logger.log(`sidenav closed; ${JSON.stringify(e)}`);
+  }
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,16 @@
+<!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.20.2/config2.js"></script>
+    <script>
+      System.import('aurelia-bootstrapper');
+    </script>
+  </body>
+</html>
diff --git a/logger.html b/logger.html
@@ -0,0 +1,4 @@
+<template>
+  <div class="console">
+  </div>
+</template>
diff --git a/logger.js b/logger.js
@@ -0,0 +1,106 @@
+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);
+}
diff --git a/main.js b/main.js
@@ -0,0 +1,20 @@
+/*******************************************************************************
+ * 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());
+}
No results found