bigopon/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>
  <!-- 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 {
  autoinject,
  customAttribute,
  bindable,
  templateController,
  ViewSlot,
  View,
  BoundViewFactory,
  observable,
} from 'aurelia-framework';

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;

  @observable
  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));
    }
  }

  unbind() {
    this.view = null;
  }

  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.view = null;
      this.viewSlot.removeAll();
    }
    this.show = showing;
  }

  viewChanged(view: View, oldView: View) {
    if (oldView) {
      oldView.unbind();
    }
    if (view == null) {
      this.foundElements = null;
    } else {
      const viewHeadingEls = [];
      let current = view.firstChild;
      do {
        if (current.tagName === 'H1') {
          viewHeadingEls.push(current);
        } else {
          const headingEl = current.querySelector('h1');
          if (headingEl !== null) {
            viewHeadingEls.push(headingEl);
          }
        }
        current = current.nextElementSibling;
      } while (current !== null && current !== view.lastChild);
      this.foundElements = viewHeadingEls;
    }
    console.log(this.foundElements);
  }
}
	<!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>
	<!-- 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 {
	autoinject,
	customAttribute,
	bindable,
	templateController,
	ViewSlot,
	View,
	BoundViewFactory,
	observable,
	} from 'aurelia-framework';

	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;

	@observable
	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));
	}
	}

	unbind() {
	this.view = null;
	}

	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.view = null;
	this.viewSlot.removeAll();
	}
	this.show = showing;
	}

	viewChanged(view: View, oldView: View) {
	if (oldView) {
	oldView.unbind();
	}
	if (view == null) {
	this.foundElements = null;
	} else {
	const viewHeadingEls = [];
	let current = view.firstChild;
	do {
	if (current.tagName === 'H1') {
	viewHeadingEls.push(current);
	} else {
	const headingEl = current.querySelector('h1');
	if (headingEl !== null) {
	viewHeadingEls.push(headingEl);
	}
	}
	current = current.nextElementSibling;
	} while (current !== null && current !== view.lastChild);
	this.foundElements = viewHeadingEls;
	}
	console.log(this.foundElements);
	}
	}