plarner30/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Dumber Gist</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
  <base href="/">
</head>
<!--
Dumber gist uses dumber bundler, the default bundle file
is /dist/entry-bundle.js.
The starting module is pointed to aurelia-bootstrapper
(data-main attribute on script) for Aurelia,
The aurelia bootstrapper then loads up user module "main"
(aurelia-app attribute on <body>) which is your src/main.ts.
-->
<body aurelia-app="main">
  <script src="/dist/entry-bundle.js" data-main="aurelia-bootstrapper"></script>
</body>
</html>

## package.json
{
  "dependencies": {
    "aurelia-bootstrapper": "^2.3.3"
  }
}

## src\app.html
<template>
  <!-- Try to create a css/scss/sass/less file then require it here -->

  <!-- should remain in DOM and would get class added -->
  <h1 permission.bind="test">${message} 1</h1>
  <h1 permission.bind="test">${message} 2</h1>

  <!-- would be removed from DOM -->
  <h1 permission="permissions.bind: 'test'; behaviour.bind: 'Remove'">${message} 3</h1>

</template>

## src\app.ts

import { PermissionCustomAttribute } from './permission';

export class App {
  public message: string = 'Hello Aurelia!';
}

## src\main.ts
import {Aurelia} from 'aurelia-framework';

export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging('info');
  aurelia.start().then(() => aurelia.setRoot());
}

## src\permission.ts
//import { PermissionService } from 'services/permissions-service';
//import { AppPermissions } from 'services/app-permissions';
import { customAttribute, bindable, templateController, ViewSlot, View, BoundViewFactory } from 'aurelia-framework';
import { autoinject } from 'aurelia-dependency-injection';

enum PermissionBehaviour {
  Fade = 'Fade',
  Remove = 'Remove',
}

@customAttribute('permission')
@templateController
@autoinject
export class PermissionCustomAttribute {
  @bindable({ primaryProperty: true }) permissions: any;
  @bindable behaviour: PermissionBehaviour = PermissionBehaviour.Fade;

  bindingContext: any;
  overrideContext: any;
  show = false;
  view: View;

  constructor(private viewFactory: BoundViewFactory, private viewSlot: ViewSlot/*, private element: Element, element becomes undefined with   templateController */) { }

  bind(bindingContext, overrideContext) {
    this.bindingContext = bindingContext;
    this.overrideContext = overrideContext;
    if (this.view) this.view.bind(this.bindingContext, this.overrideContext);

    // putting in this to ensure view set up if remove behviour not needed?
    if (this.behaviour === PermissionBehaviour.Fade) this.applyIf(true);
  }

  attached() {
    if (this.behaviour === PermissionBehaviour.Fade) this.applyFade(this.hasPermission(this.permissions));
    if (this.behaviour === PermissionBehaviour.Remove) this.applyIf(this.hasPermission(this.permissions));
  }

  permissionsChanged(newPermissions: AppPermissions) {
    if (this.behaviour === PermissionBehaviour.Fade) this.applyFade(this.hasPermission(this.permissions));
    if (this.behaviour === PermissionBehaviour.Remove) this.applyIf(this.hasPermission(this.permissions));
  }

  hasPermission(permission) {
    return Math.random() < 0.5;
  }

  applyFade(hasPermission: boolean) {
    // Would add or remove a class from this.element but its undefined with templateController

    // let targetElement: Element = this.element;
    // if (this.overrideElement) targetElement = this.overrideElement;
    // targetElement.removeEventListener('click', this.interceptClick);
    // targetElement.classList.remove('permission-denied', 'permission-denied--' + this.behaviour);
    // if (permissions && !this.permissionService.hasAccess(permissions)) {
    //   targetElement.classList.add('permission-denied', 'permission-denied--' + this.behaviour);
    //   targetElement.removeEventListener('click', this.interceptClick);
    //   targetElement.addEventListener('click', this.interceptClick);
    // }
  }

  applyIf(showing: boolean) {
    if (showing === this.show) return;
    if (showing) {
      this.view = this.viewFactory.create();
      this.view.bind(this.bindingContext, this.overrideContext);
      this.viewSlot.add(this.view);
    } else {
      this.viewSlot.removeAll();
    }
    this.show = showing;
  }

}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Dumber Gist</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
	<base href="/">
	</head>
	<!--
	Dumber gist uses dumber bundler, the default bundle file
	is /dist/entry-bundle.js.
	The starting module is pointed to aurelia-bootstrapper
	(data-main attribute on script) for Aurelia,
	The aurelia bootstrapper then loads up user module "main"
	(aurelia-app attribute on <body>) which is your src/main.ts.
	-->
	<body aurelia-app="main">
	<script src="/dist/entry-bundle.js" data-main="aurelia-bootstrapper"></script>
	</body>
	</html>
	<template>
	<!-- Try to create a css/scss/sass/less file then require it here -->

	<!-- should remain in DOM and would get class added -->
	<h1 permission.bind="test">${message} 1</h1>
	<h1 permission.bind="test">${message} 2</h1>

	<!-- would be removed from DOM -->
	<h1 permission="permissions.bind: 'test'; behaviour.bind: 'Remove'">${message} 3</h1>

	</template>

	import { PermissionCustomAttribute } from './permission';

	export class App {
	public message: string = 'Hello Aurelia!';
	}
	import {Aurelia} from 'aurelia-framework';

	export function configure(aurelia: Aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging('info');
	aurelia.start().then(() => aurelia.setRoot());
	}
	//import { PermissionService } from 'services/permissions-service';
	//import { AppPermissions } from 'services/app-permissions';
	import { customAttribute, bindable, templateController, ViewSlot, View, BoundViewFactory } from 'aurelia-framework';
	import { autoinject } from 'aurelia-dependency-injection';

	enum PermissionBehaviour {
	Fade = 'Fade',
	Remove = 'Remove',
	}

	@customAttribute('permission')
	@templateController
	@autoinject
	export class PermissionCustomAttribute {
	@bindable({ primaryProperty: true }) permissions: any;
	@bindable behaviour: PermissionBehaviour = PermissionBehaviour.Fade;

	bindingContext: any;
	overrideContext: any;
	show = false;
	view: View;

	constructor(private viewFactory: BoundViewFactory, private viewSlot: ViewSlot/, private element: Element, element becomes undefined with templateController /) { }

	bind(bindingContext, overrideContext) {
	this.bindingContext = bindingContext;
	this.overrideContext = overrideContext;
	if (this.view) this.view.bind(this.bindingContext, this.overrideContext);

	// putting in this to ensure view set up if remove behviour not needed?
	if (this.behaviour === PermissionBehaviour.Fade) this.applyIf(true);
	}

	attached() {
	if (this.behaviour === PermissionBehaviour.Fade) this.applyFade(this.hasPermission(this.permissions));
	if (this.behaviour === PermissionBehaviour.Remove) this.applyIf(this.hasPermission(this.permissions));
	}

	permissionsChanged(newPermissions: AppPermissions) {
	if (this.behaviour === PermissionBehaviour.Fade) this.applyFade(this.hasPermission(this.permissions));
	if (this.behaviour === PermissionBehaviour.Remove) this.applyIf(this.hasPermission(this.permissions));
	}

	hasPermission(permission) {
	return Math.random() < 0.5;
	}

	applyFade(hasPermission: boolean) {
	// Would add or remove a class from this.element but its undefined with templateController

	// let targetElement: Element = this.element;
	// if (this.overrideElement) targetElement = this.overrideElement;
	// targetElement.removeEventListener('click', this.interceptClick);
	// targetElement.classList.remove('permission-denied', 'permission-denied--' + this.behaviour);
	// if (permissions && !this.permissionService.hasAccess(permissions)) {
	// targetElement.classList.add('permission-denied', 'permission-denied--' + this.behaviour);
	// targetElement.removeEventListener('click', this.interceptClick);
	// targetElement.addEventListener('click', this.interceptClick);
	// }
	}

	applyIf(showing: boolean) {
	if (showing === this.show) return;
	if (showing) {
	this.view = this.viewFactory.create();
	this.view.bind(this.bindingContext, this.overrideContext);
	this.viewSlot.add(this.view);
	} else {
	this.viewSlot.removeAll();
	}
	this.show = showing;
	}

	}