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>
  <require from="./permission"></require>
  <require from="./permission.css"></require>

  Repro Steps:<br/>
  1. click button 'Test', either 'clicked with permission' or 'click blocked successfully' is logged<br/>
  2. click 'Show/Hide Permission Content' button<br/>
  3. click 'Show/Hide Permission Content' button again<br/>
  4. Permission attribute not applied / click.delegates on 'Test' buttons no longer work

  <br/>
<br/>

 always granted permission example:
  <div if.bind="showPermissionContent" style="border: 1px solid blue;" permission.bind="'test-permission'">

    ${message}

    <button click.delegate="clickFunction()">Test</button>

  </div>


<br/><br/><br/><br/>

    <button click.delegate="showPermissionContent = !showPermissionContent">Show/Hide Permission Content</button>


  <br/><br/><br/><br/><br/> always denied permission example:

    <div if.bind="showPermissionContent" style="border: 1px solid blue;" permission.bind="'failed-permission'">

    ${message}

    <button click.delegate="clickFunction()">Test</button>

  </div>


</template>

## src\app.ts
import { observable } from 'aurelia-framework';
import { PermissionCustomAttribute } from './permission';

export class App {
  public message: string = 'This message fades if permission denied and clicks on the child button should be blocked';


  @observable showPermissionContent = true;

  clickFunction() {
    console.log('clicked with permission');
  }
}

## 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.css
.permission-denied--Fade {
 opacity: 0.5;
}

## src\permission.ts
import { bindable, BoundViewFactory, ViewSlot, View, customAttribute, templateController, observable } from 'aurelia-framework';
import { autoinject } from 'aurelia-dependency-injection';

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

const defaultPermissionBehaviour = PermissionBehaviour.Fade;

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

  show = false;
  @observable view: View;
  bindingContext: any;
  overrideContext: any;
  element: HTMLElement;


  interceptClickWithContext: any;
  hasInterception = false;

  constructor(private viewFactory: BoundViewFactory, private viewSlot: ViewSlot) { }

  bind(bindingContext, overrideContext) {
    this.bindingContext = bindingContext;
    this.overrideContext = overrideContext;
    this.interceptClickWithContext = this.interceptClick.bind(this);

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

    // Allows views to pass in undefined behaviour
    if (!this.behaviour) this.behaviour = defaultPermissionBehaviour;
    // Set up view unless might not be needed
    if (this.behaviour !== PermissionBehaviour.Remove) this.applyIf(false);
  }

  attached() {
    const denied: boolean = this.permissions !== 'test-permission';
    if (this.behaviour === PermissionBehaviour.Fade) this.applyFade(denied);
    else if (this.behaviour === PermissionBehaviour.Remove) this.applyIf(denied);
  }

  permissionsChanged(newPermissions: string) {
    const denied: boolean = newPermissions !== 'test-permission';
    if (this.behaviour === PermissionBehaviour.Fade) this.applyFade(denied);
    else if (this.behaviour === PermissionBehaviour.Remove) this.applyIf(denied);
  }

  applyFade(denied: boolean) {
    console.log('applyFade', this.element, denied);

    if (!this.element) this.applyIf(false);

    console.log(this.element, 'element still undefined?');

    if (this.element) {
      if (this.hasInterception) {
        this.element.removeEventListener('click', this.interceptClickWithContext);
        this.element.classList.remove('permission-denied', 'permission-denied--' + this.behaviour);
        this.hasInterception = false;
      }
      if (denied) {
        this.element.classList.add('permission-denied', 'permission-denied--' + this.behaviour);
        this.element.addEventListener('click', this.interceptClickWithContext);
        this.hasInterception = true;
      }
    }
  }

  interceptClick(e) {
    console.log('click blocked successfully');
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
  }

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

  viewChanged(view: View, oldView: View) {
    if (oldView) oldView.unbind();
    if (view == null) {
      // Fix Part 1
      //this.element = null;
    } else {
      this.element = (view as any).firstChild;
    }
  }

  unbind() {
    if (this.behaviour === PermissionBehaviour.Fade) this.applyFade(false); // applied again to ensure click interception removed

    // Fix Part 2
    //this.view = null; // no damage here but commenting out as breaks when used similarly in another attribute
    //this.element = null;
  }

  detached() {
    if (this.behaviour === PermissionBehaviour.Fade) this.applyFade(false); // applied again to ensure click interception removed

   // Fix Part 3
   //this.view = null; // no damage here but commenting out as breaks when used similarly in another attribute
   //this.element = null;
  }

}
	<!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>
	<require from="./permission"></require>
	<require from="./permission.css"></require>

	Repro Steps:<br/>
	1. click button 'Test', either 'clicked with permission' or 'click blocked successfully' is logged<br/>
	2. click 'Show/Hide Permission Content' button<br/>
	3. click 'Show/Hide Permission Content' button again<br/>
	4. Permission attribute not applied / click.delegates on 'Test' buttons no longer work

	<br/>
	<br/>

	always granted permission example:
	<div if.bind="showPermissionContent" style="border: 1px solid blue;" permission.bind="'test-permission'">

	${message}

	<button click.delegate="clickFunction()">Test</button>

	</div>


	<br/><br/><br/><br/>

	<button click.delegate="showPermissionContent = !showPermissionContent">Show/Hide Permission Content</button>


	<br/><br/><br/><br/><br/> always denied permission example:

	<div if.bind="showPermissionContent" style="border: 1px solid blue;" permission.bind="'failed-permission'">

	${message}

	<button click.delegate="clickFunction()">Test</button>

	</div>


	</template>
	import { observable } from 'aurelia-framework';
	import { PermissionCustomAttribute } from './permission';

	export class App {
	public message: string = 'This message fades if permission denied and clicks on the child button should be blocked';


	@observable showPermissionContent = true;

	clickFunction() {
	console.log('clicked with permission');
	}
	}
	import {Aurelia} from 'aurelia-framework';

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

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

	const defaultPermissionBehaviour = PermissionBehaviour.Fade;

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

	show = false;
	@observable view: View;
	bindingContext: any;
	overrideContext: any;
	element: HTMLElement;


	interceptClickWithContext: any;
	hasInterception = false;

	constructor(private viewFactory: BoundViewFactory, private viewSlot: ViewSlot) { }

	bind(bindingContext, overrideContext) {
	this.bindingContext = bindingContext;
	this.overrideContext = overrideContext;
	this.interceptClickWithContext = this.interceptClick.bind(this);

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

	// Allows views to pass in undefined behaviour
	if (!this.behaviour) this.behaviour = defaultPermissionBehaviour;
	// Set up view unless might not be needed
	if (this.behaviour !== PermissionBehaviour.Remove) this.applyIf(false);
	}

	attached() {
	const denied: boolean = this.permissions !== 'test-permission';
	if (this.behaviour === PermissionBehaviour.Fade) this.applyFade(denied);
	else if (this.behaviour === PermissionBehaviour.Remove) this.applyIf(denied);
	}

	permissionsChanged(newPermissions: string) {
	const denied: boolean = newPermissions !== 'test-permission';
	if (this.behaviour === PermissionBehaviour.Fade) this.applyFade(denied);
	else if (this.behaviour === PermissionBehaviour.Remove) this.applyIf(denied);
	}

	applyFade(denied: boolean) {
	console.log('applyFade', this.element, denied);

	if (!this.element) this.applyIf(false);

	console.log(this.element, 'element still undefined?');

	if (this.element) {
	if (this.hasInterception) {
	this.element.removeEventListener('click', this.interceptClickWithContext);
	this.element.classList.remove('permission-denied', 'permission-denied--' + this.behaviour);
	this.hasInterception = false;
	}
	if (denied) {
	this.element.classList.add('permission-denied', 'permission-denied--' + this.behaviour);
	this.element.addEventListener('click', this.interceptClickWithContext);
	this.hasInterception = true;
	}
	}
	}

	interceptClick(e) {
	console.log('click blocked successfully');
	e.preventDefault();
	e.stopPropagation();
	e.stopImmediatePropagation();
	}

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

	viewChanged(view: View, oldView: View) {
	if (oldView) oldView.unbind();
	if (view == null) {
	// Fix Part 1
	//this.element = null;
	} else {
	this.element = (view as any).firstChild;
	}
	}

	unbind() {
	if (this.behaviour === PermissionBehaviour.Fade) this.applyFade(false); // applied again to ensure click interception removed

	// Fix Part 2
	//this.view = null; // no damage here but commenting out as breaks when used similarly in another attribute
	//this.element = null;
	}

	detached() {
	if (this.behaviour === PermissionBehaviour.Fade) this.applyFade(false); // applied again to ensure click interception removed

	// Fix Part 3
	//this.view = null; // no damage here but commenting out as breaks when used similarly in another attribute
	//this.element = null;
	}

	}