peisenmann/Readme.md

## Readme.md

      
    Raw
  

              Readme.md
            
          
    The important things to note in this gist are:
app.html
The usage of the custom attribute hover-color is <div hover-color="special-hover-class"> where special-hover-class is
simply a css class that will be applied to all hover-color elements when the given element is hovered.
hover-color.js
This is the source code of the custom attribute itself, and is commented to explain what it does. Essentially, if the element
is hovered, the custom attribute sends out a message to tell all other hover color elements to change. When the mouse leaves
the element, a message is broadcast to tell them all to remove their class change.
styles.css
[hover-color] selects all elements which have the custom attribute. The css classes are declared here for the various base
and hover styles.
main.js
The hover-color attribute was globalized and therefore does not need to be <require>d later.

  
## app.html
<template>
  <h1 hover-color="orange-hover" class="orange">Orange Guy</h1>
  <h1 hover-color="blue-hover" class="blue">Blue Lady</h1>
  <h1 hover-color.bind="greenHoverProp" class="green">Green Dog</h1>
</template>

## app.js
export class App {
  message = 'Hello World!';
  greenHoverProp = 'green-hover';
}

## hover-color.js
import {customAttribute} from 'aurelia-framework';
import {EventAggregator} from 'aurelia-event-aggregator';


@customAttribute("hover-color")
export class HoverColor {

  _subscriptions = [];

  static inject = [Element, EventAggregator];
  constructor(element, eventAggregator) {
    // The element injected will be the HTML Element that this attribute is attached to
    this.element = element;
    this.ea = eventAggregator;
  }

  attached() {
    // Listen for other instances of this attribute to broadcast to us
    this._subscriptions.push(this.ea.subscribe('hovercolor.change', this.onColorChange.bind(this)));

    // We need a reference to the bound function so that we can unsubscribe
    this._mouseEnterListener = this.publishMyEvent.bind(this);
    // Register the DOM listener for enter
    this.element.addEventListener("mouseenter", this._mouseEnterListener);

    // We need a reference to the bound function so that we can unsubscribe
    this._mouseLeaveListener = this.publishLeaveEvent.bind(this);
    // Register the DOM listener for leave
    this.element.addEventListener("mouseleave", this._mouseLeaveListener);
  }

  publishMyEvent() {
    // Here we publish to other hover color attributes that there's been a change
    // this.value comes from the value assigned to the attribute in the html, hover-color="someval", someval would be this.value
    // Can do hover-color.bind="someVMProp" if necessary
    this.ea.publish("hovercolor.change", this.value);
  }

  publishLeaveEvent() {
    // Publish out a change event with a null value to clear it out
    this.ea.publish("hovercolor.change", null);
  }

  onColorChange(newColorClass) {
    // If we're already colored
    if (this.colorClass) {
      // Remove the hover color class
      this.element.classList.remove(this.colorClass);
      this.colorClass = null;
    }

    // If there's a new color class
    if (newColorClass) {
      // Add the new color class
      this.element.classList.add(newColorClass);
      this.colorClass = newColorClass;
    }
  }

  detached() {
    // Clean up when this is routed away
    this._subscriptions.forEach(s => s.dispose());
    this.element.removeEventListener(this._mouseEnterListener);
    this.element.removeEventListener(this._mouseLeaveListener);

  }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <link rel="stylesheet" href="styles.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body aurelia-app="main">
    <h1>Loading...</h1>

    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

## main.js
export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .globalResources('./hover-color');

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

## styles.css
/* styles */

.orange {
  background-color: #FF6633;
}

.green {
  background-color: #00FF44;
}

.blue {
  background-color: #2277FF;
}

.orange-hover {
  background-color: #FF8855;
}

.green-hover {
  background-color: #44FF88;
}

.blue-hover {
  background-color: #4499FF;
}

[hover-color], [hover-color\.bind] {
  color: white;
   transition: background-color 0.5s ease;
}
	<template>
	<h1 hover-color="orange-hover" class="orange">Orange Guy</h1>
	<h1 hover-color="blue-hover" class="blue">Blue Lady</h1>
	<h1 hover-color.bind="greenHoverProp" class="green">Green Dog</h1>
	</template>
	export class App {
	message = 'Hello World!';
	greenHoverProp = 'green-hover';
	}
	import {customAttribute} from 'aurelia-framework';
	import {EventAggregator} from 'aurelia-event-aggregator';


	@customAttribute("hover-color")
	export class HoverColor {

	_subscriptions = [];

	static inject = [Element, EventAggregator];
	constructor(element, eventAggregator) {
	// The element injected will be the HTML Element that this attribute is attached to
	this.element = element;
	this.ea = eventAggregator;
	}

	attached() {
	// Listen for other instances of this attribute to broadcast to us
	this._subscriptions.push(this.ea.subscribe('hovercolor.change', this.onColorChange.bind(this)));

	// We need a reference to the bound function so that we can unsubscribe
	this._mouseEnterListener = this.publishMyEvent.bind(this);
	// Register the DOM listener for enter
	this.element.addEventListener("mouseenter", this._mouseEnterListener);

	// We need a reference to the bound function so that we can unsubscribe
	this._mouseLeaveListener = this.publishLeaveEvent.bind(this);
	// Register the DOM listener for leave
	this.element.addEventListener("mouseleave", this._mouseLeaveListener);
	}

	publishMyEvent() {
	// Here we publish to other hover color attributes that there's been a change
	// this.value comes from the value assigned to the attribute in the html, hover-color="someval", someval would be this.value
	// Can do hover-color.bind="someVMProp" if necessary
	this.ea.publish("hovercolor.change", this.value);
	}

	publishLeaveEvent() {
	// Publish out a change event with a null value to clear it out
	this.ea.publish("hovercolor.change", null);
	}

	onColorChange(newColorClass) {
	// If we're already colored
	if (this.colorClass) {
	// Remove the hover color class
	this.element.classList.remove(this.colorClass);
	this.colorClass = null;
	}

	// If there's a new color class
	if (newColorClass) {
	// Add the new color class
	this.element.classList.add(newColorClass);
	this.colorClass = newColorClass;
	}
	}

	detached() {
	// Clean up when this is routed away
	this._subscriptions.forEach(s => s.dispose());
	this.element.removeEventListener(this._mouseEnterListener);
	this.element.removeEventListener(this._mouseLeaveListener);

	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<link rel="stylesheet" href="styles.css">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body aurelia-app="main">
	<h1>Loading...</h1>

	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>
	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging()
	.globalResources('./hover-color');

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

	.orange {
	background-color: #FF6633;
	}

	.green {
	background-color: #00FF44;
	}

	.blue {
	background-color: #2277FF;
	}

	.orange-hover {
	background-color: #FF8855;
	}

	.green-hover {
	background-color: #44FF88;
	}

	.blue-hover {
	background-color: #4499FF;
	}

	[hover-color], [hover-color\.bind] {
	color: white;
	transition: background-color 0.5s ease;
	}