move window.__config to an Angular constant; refactor AngularViewArray -> ViewArray + ViewArrayFactory

static/js/services/view-array/view-array.factory.spec.ts

@@ -0,0 +1,27 @@
+import { ViewArrayFactory } from './view-array.factory';
+import { ViewArray } from './view-array';
+
+
+describe("Factory: ViewArrayFactory", () => {
+  var viewArrayFactory: ViewArrayFactory;
+  var $intervalMock: any;
+
+  beforeEach(() => {
+    $intervalMock = jasmine.createSpy('$intervalSpy');
+    $intervalMock.cancel = jasmine.createSpy('cancelSpy');
+    viewArrayFactory = new ViewArrayFactory($intervalMock)
+  });
+
+  describe("constructor", () => {
+
+  });
+
+  describe("create", () => {
+
+    it("returns a ViewArray object", () => {
+      var viewArray: ViewArray = viewArrayFactory.create();
+
+      expect(viewArray).toBeDefined();
+    });
+  });
+});

static/js/services/view-array/view-array.factory.ts

@@ -0,0 +1,29 @@
+import { ViewArray } from './view-array';
+import { ViewArrayImpl } from './view-array.impl';
+
+
+/**
+ * Factory for creating ViewArray instances.
+ */
+export class ViewArrayFactory {
+
+  private ADDITIONAL_ENTRIES: number = 20;
+
+  /**
+   * @param $interval Angular $interval service.
+   * @return viewArrayFactory A factory for creating ViewArray objects.
+   */
+  static $inject = ['$interval'];
+  constructor(private $interval: ng.IIntervalService) {
+
+  }
+
+  /**
+   * Create a new ViewArray object.
+   * @return viewArray New ViewArrayImpl instance.
+   */
+  public create(): ViewArray {
+    return new ViewArrayImpl(this.$interval, this.ADDITIONAL_ENTRIES);
+  }
+}
+

static/js/services/view-array/view-array.impl.spec.ts

@@ -0,0 +1,140 @@
+import { ViewArrayImpl } from './view-array.impl';
+
+
+describe("ViewArrayImplImpl", () => {
+  var viewArrayImpl: ViewArrayImpl;
+  var $intervalMock: any;
+  var additionalCount: number;
+
+  beforeEach(inject(($injector: ng.auto.IInjectorService) => {
+    $intervalMock = jasmine.createSpy('$intervalSpy');
+    $intervalMock.and.returnValue({});
+    $intervalMock.cancel = jasmine.createSpy('cancelSpy');
+    additionalCount = 20;
+    viewArrayImpl = new ViewArrayImpl($intervalMock, additionalCount);
+  }));
+
+
+  describe("constructor", () => {
+
+    it("initializes values", () => {
+      expect(viewArrayImpl.isVisible).toBe(false);
+      expect(viewArrayImpl.visibleEntries).toBe(null);
+      expect(viewArrayImpl.entries.length).toEqual(0);
+      expect(viewArrayImpl.hasEntries).toBe(false);
+      expect(viewArrayImpl.hasHiddenEntries).toBe(false);
+    });
+  });
+
+  describe("length", () => {
+
+    it("returns the number of entries", () => {
+      viewArrayImpl.entries = [{}, {}, {}];
+
+      expect(viewArrayImpl.length()).toEqual(viewArrayImpl.entries.length);
+    });
+  });
+
+  describe("get", () => {
+
+    it("returns the entry at a given index", () => {
+      var index: number = 8;
+      viewArrayImpl.entries = new Array(10);
+      viewArrayImpl.entries[index] = 3;
+
+      expect(viewArrayImpl.get(index)).toEqual(viewArrayImpl.entries[index]);
+    });
+  });
+
+  describe("push", () => {
+
+    it("adds given element to the end of entries", () => {
+      var element: number = 3;
+      var originalLength: number = viewArrayImpl.length();
+      viewArrayImpl.push(element);
+
+      expect(viewArrayImpl.entries.length).toEqual(originalLength + 1);
+      expect(viewArrayImpl.get(originalLength)).toEqual(element);
+    });
+
+    it("sets 'hasEntries' to true", () => {
+      viewArrayImpl.push(2);
+
+      expect(viewArrayImpl.hasEntries).toBe(true);
+    });
+
+    it("starts timer if 'isVisible' is true", () => {
+      viewArrayImpl.isVisible = true;
+      viewArrayImpl.push(2);
+
+      expect($intervalMock).toHaveBeenCalled();
+    });
+
+    it("does not start timer if 'isVisible' is false", () => {
+      viewArrayImpl.isVisible = false;
+      viewArrayImpl.push(2);
+
+      expect($intervalMock).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("toggle", () => {
+
+    it("sets 'isVisible' to false if currently true", () => {
+      viewArrayImpl.isVisible = true;
+      viewArrayImpl.toggle();
+
+      expect(viewArrayImpl.isVisible).toBe(false);
+    });
+
+    it("sets 'isVisible' to true if currently false", () => {
+      viewArrayImpl.isVisible = false;
+      viewArrayImpl.toggle();
+
+      expect(viewArrayImpl.isVisible).toBe(true);
+    });
+  });
+
+  describe("setVisible", () => {
+
+    it("sets 'isVisible' to false if given false", () => {
+      viewArrayImpl.setVisible(false);
+
+      expect(viewArrayImpl.isVisible).toBe(false);
+    });
+
+    it("sets 'visibleEntries' to empty array if given false", () => {
+      viewArrayImpl.setVisible(false);
+
+      expect(viewArrayImpl.visibleEntries.length).toEqual(0);
+    });
+
+    it("shows additional entries if given true", () => {
+      viewArrayImpl.setVisible(true);
+    });
+
+    it("does not show additional entries if given false", () => {
+      viewArrayImpl.setVisible(false);
+    });
+
+    it("starts timer if given true", () => {
+      viewArrayImpl.setVisible(true);
+
+      expect($intervalMock).toHaveBeenCalled();
+    });
+
+    it("does not stop timer if given false and timer is not active", () => {
+      viewArrayImpl.setVisible(false);
+
+      expect($intervalMock.cancel).not.toHaveBeenCalled();
+    });
+
+    it("stops timer if given false and timer is active", () => {
+      viewArrayImpl.isVisible = true;
+      viewArrayImpl.push(2);
+      viewArrayImpl.setVisible(false);
+
+      expect($intervalMock.cancel).toHaveBeenCalled();
+    });
+  });
+});

static/js/services/view-array/view-array.impl.ts

@@ -0,0 +1,89 @@
+import { ViewArray } from './view-array';
+
+
+export class ViewArrayImpl implements ViewArray {
+
+  public entries: any[];
+  public isVisible: boolean;
+  public visibleEntries: any[];
+  public hasEntries: boolean;
+  public hasHiddenEntries: boolean;
+  private timerRef: any;
+  private currentIndex: number;
+
+  constructor(private interval: any, private additionalCount: number) {
+    this.isVisible = false;
+    this.visibleEntries = null;
+    this.hasEntries = false;
+    this.entries = [];
+    this.hasHiddenEntries = false;
+    this.timerRef = null;
+    this.currentIndex = 0;
+  }
+
+  public length(): number {
+    return this.entries.length;
+  }
+
+  public get(index: number): any {
+    return this.entries[index];
+  }
+
+  public push(elem: any): void {
+    this.entries.push(elem);
+    this.hasEntries = true;
+
+    if (this.isVisible) {
+      this.startTimer();
+    }
+  }
+
+  public toggle(): void {
+    this.setVisible(!this.isVisible);
+  }
+
+  public setVisible(newState: boolean): void {
+    this.isVisible = newState;
+
+    this.visibleEntries = [];
+    this.currentIndex = 0;
+
+    if (newState) {
+      this.showAdditionalEntries();
+      this.startTimer();
+    }
+    else {
+      this.stopTimer();
+    }
+  }
+
+  private showAdditionalEntries(): void {
+    var i: number = 0;
+    for (i = this.currentIndex; i < (this.currentIndex + this.additionalCount) && i < this.entries.length; ++i) {
+      this.visibleEntries.push(this.entries[i]);
+    }
+
+    this.currentIndex = i;
+    this.hasHiddenEntries = this.currentIndex < this.entries.length;
+    if (this.currentIndex >= this.entries.length) {
+      this.stopTimer();
+    }
+  }
+
+  private startTimer(): void {
+    if (this.timerRef) {
+      return;
+    }
+
+    this.timerRef = this.interval(() => {
+      this.showAdditionalEntries();
+    }, 10);
+  }
+
+  private stopTimer(): void {
+    if (this.timerRef) {
+      this.interval.cancel(this.timerRef);
+      this.timerRef = null;
+    }
+  }
+}

static/js/services/view-array/view-array.ts

@@ -0,0 +1,62 @@
+/**
+ * Specialized wrapper around array which provides a toggle() method for viewing the contents of the
+ * array in a manner that is asynchronously filled in over a short time period. This prevents long
+ * pauses in the UI for ngRepeat's when the array is significant in size.
+ */
+export abstract class ViewArray {
+
+    /**
+     * The stored entries.
+     */
+    public abstract entries: any;
+
+    /**
+     * If the entries are displayed.
+     */
+    public abstract isVisible: boolean;
+
+    /**
+     * The displayed entries.
+     */
+    public abstract visibleEntries: any[];
+
+    /**
+     * If there are stored entries.
+     */
+    public abstract hasEntries: boolean;
+
+    /**
+     * If there are entries not visible.
+     */
+    public abstract hasHiddenEntries: boolean;
+
+    /**
+     * Get the number of entries stored.
+     * @return number The number of entries.
+     */
+    public abstract length(): number;
+
+    /**
+     * Get a specific entry.
+     * @param index The index of the entry.
+     * @return element The element at the given index.
+     */
+    public abstract get(index: number): any;
+
+    /**
+     * Add a new element.
+     * @param elem The new element.
+     */
+    public abstract push(elem: any): void;
+
+    /**
+     * Toggle whether the elements are visible.
+     */
+    public abstract toggle(): void;
+
+    /**
+     * Set whether the elements are visible.
+     * @param newState True/False if the contents are visible.
+     */
+    public abstract setVisible(newState: boolean): void;
+}