plarner30 · October 19, 2020 11:51
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>
  <!-- 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>
diff --git a/src\app.ts b/src\app.ts

 import { PermissionCustomAttribute } from './permission'; 

 export class App {
  public message: string = 'Hello Aurelia!';
 }
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.ts b/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;
	}

	}