bigopon · October 22, 2020 11:29
diff --git a/index.html b/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>
diff --git a/package.json b/package.json
 {
  "dependencies": {
    "aurelia-bootstrapper": "^2.3.3"
  }
 }
diff --git a/src\app.html b/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="togglePermission()">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>
diff --git a/src\app.ts b/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');
  }
  
  togglePermission() {
    console.log('Toggling permission');
    this.showPermissionContent = !this.showPermissionContent;
  }
 }
diff --git a/src\main.ts b/src\main.ts
 import {Aurelia} from 'aurelia-framework';

 export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging('info');
  aurelia.start().then(() => aurelia.setRoot());
 }
diff --git a/src\permission.css b/src\permission.css
 .permission-denied--Fade {
 opacity: 0.5;
 }
diff --git a/src\permission.ts b/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() {
    this.permissionsChanged(this.permissions);
  }

  permissionsChanged(newPermissions: string) {
    const denied: boolean = newPermissions !== 'test-permission';
    
    console.log('Permission changed', { behavior: this.behaviour });
    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);
      return;
    }
    
    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;
      }
      console.log({denied});
      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) {
      this.element = null;
    } else {
      this.element = (view as any).firstChild;
    }
  }

  unbind() {
    if (this.behaviour === PermissionBehaviour.Fade) this.applyFade(false);
    this.view = null;
    this.element = null;
  }

  detached() {
    if (this.behaviour === PermissionBehaviour.Fade) this.applyFade(false);
    this.view = null;
    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="togglePermission()">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');
	}

	togglePermission() {
	console.log('Toggling permission');
	this.showPermissionContent = !this.showPermissionContent;
	}
	}
	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() {
	this.permissionsChanged(this.permissions);
	}

	permissionsChanged(newPermissions: string) {
	const denied: boolean = newPermissions !== 'test-permission';

	console.log('Permission changed', { behavior: this.behaviour });
	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);
	return;
	}

	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;
	}
	console.log({denied});
	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) {
	this.element = null;
	} else {
	this.element = (view as any).firstChild;
	}
	}

	unbind() {
	if (this.behaviour === PermissionBehaviour.Fade) this.applyFade(false);
	this.view = null;
	this.element = null;
	}

	detached() {
	if (this.behaviour === PermissionBehaviour.Fade) this.applyFade(false);
	this.view = null;
	this.element = null;
	}

	}