Merge branch 'Einarsson-master'

src/hide.js

@@ -0,0 +1,40 @@
+import {inject} from 'aurelia-dependency-injection';
+import {customAttribute, Animator} from 'aurelia-templating';
+import {DOM} from 'aurelia-pal';
+
+/**
+* Binding to conditionally show markup in the DOM based on the value.
+* - different from "if" in that the markup is still added to the DOM, simply not shown.
+*/
+@customAttribute('hide')
+@inject(DOM.Element, Animator)
+export class Hide {
+  /**
+  * Creates a new instance of Hide.
+  * @param element Target element to conditionally hide.
+  * @param animator The animator that conditionally adds or removes the aurelia-hide css class.
+  */
+  constructor(element, animator) {
+    this.element = element;
+    this.animator = animator;
+  }
+
+  /**
+  * Invoked everytime the bound value changes.
+  * @param newValue The new value.
+  */
+  valueChanged(newValue) {
+    if (newValue) {
+      this.animator.addClass(this.element, 'aurelia-hide');
+    } else {
+      this.animator.removeClass(this.element, 'aurelia-hide');
+    }
+  }
+
+  /**
+  * Binds the Hide attribute.
+  */
+  bind(bindingContext) {
+    this.valueChanged(this.value);
+  }
+}

test/hide.spec.js

@@ -0,0 +1,38 @@
+import {Hide} from '../src/hide';
+
+describe('hide', () => {
+  let sut, animator;
+
+  beforeEach(() => {
+    animator = new AnimatorMock();
+  });
+
+  it('should add aurelia-hide with animator.addClass when value is true', () => {
+    let target = document.createElement('input');
+
+    sut = new Hide(target, animator);
+
+    spyOn(animator, 'addClass');
+
+    sut.valueChanged(true);
+
+    expect(animator.addClass).toHaveBeenCalledWith(target, 'aurelia-hide');
+  });
+
+  it('should remove aurelia-hide with animator.addClass when value is false', () => {
+    let target = document.createElement('input');
+
+    sut = new Hide(target, animator);
+
+    spyOn(animator, 'removeClass');
+
+    sut.valueChanged(false);
+
+    expect(animator.removeClass).toHaveBeenCalledWith(target, 'aurelia-hide');
+  });
+});
+
+class AnimatorMock {
+  addClass() {}
+  removeClass() {}
+}

test/show.spec.js

@@ -0,0 +1,38 @@
+import {Show} from '../src/show';
+
+describe('show', () => {
+  let sut, animator;
+
+  beforeEach(() => {
+    animator = new AnimatorMock();
+  });
+
+  it('should add aurelia-hide with animator.addClass when value is false', () => {
+    let target = document.createElement('input');
+
+    sut = new Show(target, animator);
+
+    spyOn(animator, 'addClass');
+
+    sut.valueChanged(false);
+
+    expect(animator.addClass).toHaveBeenCalledWith(target, 'aurelia-hide');
+  });
+
+  it('should remove aurelia-hide with animator.addClass when value is true', () => {
+    let target = document.createElement('input');
+
+    sut = new Show(target, animator);
+
+    spyOn(animator, 'removeClass');
+
+    sut.valueChanged(true);
+
+    expect(animator.removeClass).toHaveBeenCalledWith(target, 'aurelia-hide');
+  });
+});
+
+class AnimatorMock {
+  addClass() {}
+  removeClass() {}
+}