Merge pull request #2292 from coreos-inc/frontend-typescript
Upgrading Front-end Client to TypeScript
This commit is contained in:
Alec Merdler
GitHub
commit
7c904f2e21
38 changed files with 1021 additions and 759 deletions
|
|
@ -1,104 +0,0 @@
|
|||
(function() {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
angular
|
||||
.module('quay')
|
||||
.factory('AngularViewArray', factory);
|
||||
|
||||
factory.$inject = [
|
||||
'$interval'
|
||||
];
|
||||
|
||||
function factory($interval) {
|
||||
var ADDTIONAL_COUNT = 20;
|
||||
|
||||
function _ViewArray() {
|
||||
this.isVisible = false;
|
||||
this.visibleEntries = null;
|
||||
this.hasEntries = false;
|
||||
this.entries = [];
|
||||
this.hasHiddenEntries = false;
|
||||
|
||||
this.timerRef_ = null;
|
||||
this.currentIndex_ = 0;
|
||||
}
|
||||
|
||||
_ViewArray.prototype.length = function() {
|
||||
return this.entries.length;
|
||||
};
|
||||
|
||||
_ViewArray.prototype.get = function(index) {
|
||||
return this.entries[index];
|
||||
};
|
||||
|
||||
_ViewArray.prototype.push = function(elem) {
|
||||
this.entries.push(elem);
|
||||
this.hasEntries = true;
|
||||
|
||||
if (this.isVisible) {
|
||||
this.startTimer_();
|
||||
}
|
||||
};
|
||||
|
||||
_ViewArray.prototype.toggle = function() {
|
||||
this.setVisible(!this.isVisible);
|
||||
};
|
||||
|
||||
_ViewArray.prototype.setVisible = function(newState) {
|
||||
this.isVisible = newState;
|
||||
|
||||
this.visibleEntries = [];
|
||||
this.currentIndex_ = 0;
|
||||
|
||||
if (newState) {
|
||||
this.showAdditionalEntries_();
|
||||
this.startTimer_();
|
||||
} else {
|
||||
this.stopTimer_();
|
||||
}
|
||||
};
|
||||
|
||||
_ViewArray.prototype.showAdditionalEntries_ = function() {
|
||||
var i = 0;
|
||||
for (i = this.currentIndex_; i < (this.currentIndex_ + ADDTIONAL_COUNT) && 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_();
|
||||
}
|
||||
};
|
||||
|
||||
_ViewArray.prototype.startTimer_ = function() {
|
||||
if (this.timerRef_) { return; }
|
||||
|
||||
var that = this;
|
||||
this.timerRef_ = $interval(function() {
|
||||
that.showAdditionalEntries_();
|
||||
}, 10);
|
||||
};
|
||||
|
||||
_ViewArray.prototype.stopTimer_ = function() {
|
||||
if (this.timerRef_) {
|
||||
$interval.cancel(this.timerRef_);
|
||||
this.timerRef_ = null;
|
||||
}
|
||||
};
|
||||
|
||||
var service = {
|
||||
'create': function() {
|
||||
return new _ViewArray();
|
||||
}
|
||||
};
|
||||
|
||||
return service;
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
@ -1,144 +0,0 @@
|
|||
describe("Service: AngularViewArray", function() {
|
||||
var angularViewArray;
|
||||
|
||||
beforeEach(module('quay'));
|
||||
|
||||
beforeEach(inject(function($injector) {
|
||||
angularViewArray = $injector.get('AngularViewArray');
|
||||
}));
|
||||
|
||||
describe("create", function() {
|
||||
|
||||
it("returns a ViewArray object", function() {
|
||||
var viewArray = angularViewArray.create();
|
||||
|
||||
expect(viewArray).toBeDefined();
|
||||
});
|
||||
|
||||
describe("returned ViewArray object", function() {
|
||||
var viewArray;
|
||||
|
||||
beforeEach(function() {
|
||||
viewArray = angularViewArray.create();
|
||||
});
|
||||
|
||||
describe("constructor", function() {
|
||||
// TODO
|
||||
});
|
||||
|
||||
describe("length", function() {
|
||||
|
||||
it("returns the number of entries", function() {
|
||||
viewArray.entries = [{}, {}, {}];
|
||||
|
||||
expect(viewArray.length()).toEqual(viewArray.entries.length);
|
||||
});
|
||||
});
|
||||
|
||||
describe("get", function() {
|
||||
|
||||
it("returns the entry at a given index", function() {
|
||||
var index = 8;
|
||||
viewArray.entries = new Array(10);
|
||||
viewArray.entries[index] = 3;
|
||||
|
||||
expect(viewArray.get(index)).toEqual(viewArray.entries[index]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("push", function() {
|
||||
|
||||
it("adds given element to the end of entries", function() {
|
||||
var element = 3;
|
||||
var originalLength = viewArray.length();
|
||||
viewArray.push(element);
|
||||
|
||||
expect(viewArray.entries.length).toEqual(originalLength + 1);
|
||||
expect(viewArray.get(originalLength)).toEqual(element);
|
||||
});
|
||||
|
||||
it("sets 'hasEntries' to true", function() {
|
||||
viewArray.push(2);
|
||||
|
||||
expect(viewArray.hasEntries).toBe(true);
|
||||
});
|
||||
|
||||
it("starts timer if 'isVisible' is true", function() {
|
||||
spyOn(viewArray, "startTimer_").and.returnValue();
|
||||
viewArray.isVisible = true;
|
||||
viewArray.push(2);
|
||||
|
||||
expect(viewArray.startTimer_).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("does not start timer if 'isVisible' is false", function() {
|
||||
spyOn(viewArray, "startTimer_").and.returnValue();
|
||||
viewArray.isVisible = false;
|
||||
viewArray.push(2);
|
||||
|
||||
expect(viewArray.startTimer_).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe("toggle", function() {
|
||||
|
||||
it("sets 'isVisible' to false if currently true", function() {
|
||||
viewArray.isVisible = true;
|
||||
viewArray.toggle();
|
||||
|
||||
expect(viewArray.isVisible).toBe(false);
|
||||
});
|
||||
|
||||
it("sets 'isVisible' to true if currently false", function() {
|
||||
viewArray.isVisible = false;
|
||||
viewArray.toggle();
|
||||
|
||||
expect(viewArray.isVisible).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe("setVisible", function() {
|
||||
|
||||
it("sets 'isVisible' to false if given false", function() {
|
||||
viewArray.setVisible(false);
|
||||
|
||||
expect(viewArray.isVisible).toBe(false);
|
||||
});
|
||||
|
||||
it("sets 'visibleEntries' to empty array if given false", function() {
|
||||
viewArray.setVisible(false);
|
||||
|
||||
expect(viewArray.visibleEntries.length).toEqual(0);
|
||||
});
|
||||
|
||||
it("shows additional entries if given true", function() {
|
||||
spyOn(viewArray, "showAdditionalEntries_").and.returnValue();
|
||||
viewArray.setVisible(true);
|
||||
|
||||
expect(viewArray.showAdditionalEntries_).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("does not show additional entries if given false", function() {
|
||||
spyOn(viewArray, "showAdditionalEntries_").and.returnValue();
|
||||
viewArray.setVisible(false);
|
||||
|
||||
expect(viewArray.showAdditionalEntries_).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("starts timer if given true", function() {
|
||||
spyOn(viewArray, "startTimer_").and.returnValue();
|
||||
viewArray.setVisible(true);
|
||||
|
||||
expect(viewArray.startTimer_).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("stops timer if given false", function() {
|
||||
spyOn(viewArray, "stopTimer_").and.returnValue();
|
||||
viewArray.setVisible(true);
|
||||
|
||||
expect(viewArray.stopTimer_).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
import { RouteBuilder } from './route-builder.service';
|
||||
|
||||
|
||||
export class RouteBuilderImpl implements RouteBuilder {
|
||||
|
||||
public currentProfile: string = 'layout';
|
||||
public profiles: any[] = [
|
||||
// Start with the old pages (if we asked for it).
|
||||
{id: 'old-layout', templatePath: '/static/partials/'},
|
||||
// Fallback back combined new/existing pages.
|
||||
{id: 'layout', templatePath: '/static/partials/'}
|
||||
];
|
||||
|
||||
|
||||
constructor(private routeProvider: ng.route.IRouteProvider, private pages: any) {
|
||||
for (let i = 0; i < this.profiles.length; ++i) {
|
||||
if (this.profiles[i].id == this.currentProfile) {
|
||||
this.profiles = this.profiles.slice(i);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public otherwise(options: any): void {
|
||||
this.routeProvider.otherwise(options);
|
||||
}
|
||||
|
||||
public route(path: string, pagename: string): RouteBuilder {
|
||||
// Lookup the page, matching our lists of profiles.
|
||||
var pair = this.pages.get(pagename, this.profiles);
|
||||
if (!pair) {
|
||||
throw Error('Unknown page: ' + pagename);
|
||||
}
|
||||
|
||||
// Create the route.
|
||||
var foundProfile = pair[0];
|
||||
var page = pair[1];
|
||||
var templateUrl = foundProfile.templatePath + page.templateName;
|
||||
|
||||
var options = page.flags || {};
|
||||
options['templateUrl'] = templateUrl;
|
||||
options['reloadOnSearch'] = false;
|
||||
options['controller'] = page.controller;
|
||||
|
||||
this.routeProvider.when(path, options);
|
||||
|
||||
return this;
|
||||
}
|
||||
}
|
||||
117
static/js/services/route-builder/route-builder.service.spec.ts
Normal file
117
static/js/services/route-builder/route-builder.service.spec.ts
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
import { RouteBuilderImpl } from './route-builder.service.impl';
|
||||
|
||||
|
||||
describe("Service: RouteBuilderImpl", () => {
|
||||
var routeProviderMock: any;
|
||||
var pagesMock: any;
|
||||
var profiles: any[];
|
||||
|
||||
beforeEach((() => {
|
||||
profiles = [
|
||||
{id: 'old-layout', templatePath: '/static/partials/'},
|
||||
{id: 'layout', templatePath: '/static/partials/'}
|
||||
];
|
||||
routeProviderMock = jasmine.createSpyObj('routeProvider', ['otherwise', 'when']);
|
||||
pagesMock = jasmine.createSpyObj('pagesMock', ['get', 'create']);
|
||||
}));
|
||||
|
||||
describe("constructor", () => {
|
||||
|
||||
it("returns a RouteBuilder object", () => {
|
||||
var routeBuilder: RouteBuilderImpl = new RouteBuilderImpl(routeProviderMock, pagesMock);
|
||||
|
||||
expect(routeBuilder).toBeDefined();
|
||||
});
|
||||
|
||||
it("initializes current profile to 'layout'", () => {
|
||||
var routeBuilder: RouteBuilderImpl = new RouteBuilderImpl(routeProviderMock, pagesMock);
|
||||
|
||||
expect(routeBuilder.currentProfile).toEqual('layout');
|
||||
});
|
||||
|
||||
it("initializes available profiles", () => {
|
||||
var routeBuilder: RouteBuilderImpl = new RouteBuilderImpl(routeProviderMock, pagesMock);
|
||||
var matchingRoutes: any[] = routeBuilder.profiles.filter((profile) => {
|
||||
return profiles.indexOf(profile) == -1;
|
||||
});
|
||||
expect(matchingRoutes).toEqual(routeBuilder.profiles);
|
||||
});
|
||||
|
||||
it("sets 'profiles' to the first given profile with id matching given current profile", () => {
|
||||
var routeBuilder: RouteBuilderImpl = new RouteBuilderImpl(routeProviderMock, pagesMock);
|
||||
|
||||
expect(routeBuilder.profiles).toEqual([profiles[1]]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("otherwise", () => {
|
||||
var routeBuilder: RouteBuilderImpl;
|
||||
|
||||
beforeEach(() => {
|
||||
routeBuilder = new RouteBuilderImpl(routeProviderMock, pagesMock);
|
||||
});
|
||||
|
||||
it("calls routeProvider to set fallback route with given options", () => {
|
||||
var options = {1: "option"};
|
||||
routeBuilder.otherwise(options);
|
||||
|
||||
expect(routeProviderMock.otherwise.calls.argsFor(0)[0]).toEqual(options);
|
||||
});
|
||||
});
|
||||
|
||||
describe("route", () => {
|
||||
var routeBuilder: RouteBuilderImpl;
|
||||
var path: string;
|
||||
var pagename: string;
|
||||
var page: any;
|
||||
|
||||
beforeEach(() => {
|
||||
path = '/repository/:namespace/:name';
|
||||
pagename = 'repo-view';
|
||||
page = {
|
||||
templateName: 'repository.html',
|
||||
reloadOnSearch: false,
|
||||
controller: jasmine.createSpy('pageController'),
|
||||
flags: {},
|
||||
};
|
||||
routeBuilder = new RouteBuilderImpl(routeProviderMock, pagesMock);
|
||||
});
|
||||
|
||||
it("calls pages with given pagename and 'profiles' to get matching page and profile pair", () => {
|
||||
pagesMock.get.and.returnValue([profiles[1], page]);
|
||||
routeBuilder.route(path, pagename);
|
||||
|
||||
expect(pagesMock.get.calls.argsFor(0)[0]).toEqual(pagename);
|
||||
expect(pagesMock.get.calls.argsFor(0)[1]).toEqual(routeBuilder.profiles);
|
||||
});
|
||||
|
||||
it("throws error if no matching page/profile pair found", () => {
|
||||
pagesMock.get.and.returnValue();
|
||||
try {
|
||||
routeBuilder.route(path, pagename);
|
||||
fail();
|
||||
} catch (error) {
|
||||
expect(error.message).toEqual('Unknown page: ' + pagename);
|
||||
}
|
||||
});
|
||||
|
||||
it("calls routeProvider to set route for given path and options", () => {
|
||||
pagesMock.get.and.returnValue([profiles[1], page]);
|
||||
var expectedOptions: any = {
|
||||
templateUrl: profiles[1].templatePath + page.templateName,
|
||||
reloadOnSearch: false,
|
||||
controller: page.controller,
|
||||
};
|
||||
routeBuilder.route(path, pagename);
|
||||
|
||||
expect(routeProviderMock.when.calls.argsFor(0)[0]).toEqual(path);
|
||||
expect(routeProviderMock.when.calls.argsFor(0)[1]).toEqual(expectedOptions);
|
||||
});
|
||||
|
||||
it("returns itself (the RouteBuilder instance)", () => {
|
||||
pagesMock.get.and.returnValue([profiles[1], page]);
|
||||
|
||||
expect(routeBuilder.route(path, pagename)).toEqual(routeBuilder);
|
||||
});
|
||||
});
|
||||
});
|
||||
18
static/js/services/route-builder/route-builder.service.ts
Normal file
18
static/js/services/route-builder/route-builder.service.ts
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
/**
|
||||
* Constructs client-side routes.
|
||||
*/
|
||||
export abstract class RouteBuilder {
|
||||
|
||||
/**
|
||||
* Configure the redirect route.
|
||||
* @param options Configuration options.
|
||||
*/
|
||||
public abstract otherwise(options: any): void;
|
||||
|
||||
/**
|
||||
* Register a route.
|
||||
* @param path The URL of the route.
|
||||
* @param pagename The name of the page to associate with this route.
|
||||
*/
|
||||
public abstract route(path: string, pagename: string): RouteBuilder;
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
/**
|
||||
* Service which provides helper methods for constructing and managing tabular data.
|
||||
*/
|
||||
angular.module('quay').factory('TableService', ['AngularViewArray', function(AngularViewArray) {
|
||||
angular.module('quay').factory('TableService', ['ViewArray', function(ViewArray) {
|
||||
var tableService = {};
|
||||
|
||||
tableService.tablePredicateClass = function(name, predicate, reverse) {
|
||||
|
|
@ -31,7 +31,7 @@ angular.module('quay').factory('TableService', ['AngularViewArray', function(Ang
|
|||
};
|
||||
|
||||
tableService.buildOrderedItems = function(items, options, filterFields, numericFields, opt_extrafilter) {
|
||||
var orderedItems = AngularViewArray.create();
|
||||
var orderedItems = ViewArray.create();
|
||||
|
||||
items.forEach(function(item) {
|
||||
var filter = options.filter;
|
||||
|
|
|
|||
147
static/js/services/view-array/view-array.impl.spec.ts
Normal file
147
static/js/services/view-array/view-array.impl.spec.ts
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
import { ViewArrayImpl } from './view-array.impl';
|
||||
|
||||
|
||||
describe("ViewArrayImplImpl", () => {
|
||||
var viewArrayImpl: ViewArrayImpl;
|
||||
var $intervalMock: any;
|
||||
|
||||
beforeEach(() => {
|
||||
$intervalMock = jasmine.createSpy('$intervalSpy');
|
||||
$intervalMock.and.returnValue({});
|
||||
$intervalMock.cancel = jasmine.createSpy('cancelSpy');
|
||||
viewArrayImpl = new ViewArrayImpl($intervalMock);
|
||||
});
|
||||
|
||||
|
||||
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();
|
||||
});
|
||||
});
|
||||
|
||||
describe("create", () => {
|
||||
|
||||
it("returns a new ViewArrayImpl instance", () => {
|
||||
var newViewArrayImpl: ViewArrayImpl = viewArrayImpl.create();
|
||||
|
||||
expect(newViewArrayImpl).toBeDefined();
|
||||
});
|
||||
});
|
||||
});
|
||||
95
static/js/services/view-array/view-array.impl.ts
Normal file
95
static/js/services/view-array/view-array.impl.ts
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
import { ViewArray } from './view-array';
|
||||
import { Inject } from '../../decorators/inject/inject.decorator';
|
||||
|
||||
|
||||
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;
|
||||
private additionalCount: number = 20;
|
||||
|
||||
constructor(@Inject('$interval') private interval: any) {
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
public create(): ViewArrayImpl {
|
||||
return new ViewArrayImpl(this.interval);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
69
static/js/services/view-array/view-array.ts
Normal file
69
static/js/services/view-array/view-array.ts
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
import { ViewArrayImpl } from "static/js/services/view-array/view-array.impl";
|
||||
/**
|
||||
* 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;
|
||||
|
||||
/**
|
||||
* Factory function to create a new ViewArray.
|
||||
* @return viewArray New ViewArray instance.
|
||||
*/
|
||||
public abstract create(): ViewArrayImpl;
|
||||
}
|
||||
Reference in a new issue