Skip to content

Commit

Permalink
Refactor visibleCollection into domCollection #62
Browse files Browse the repository at this point in the history
  • Loading branch information
@sambaptista
sambaptista committed Jul 14, 2022
1 parent cb4149a commit b6eaecf
Show file tree
Hide file tree
Showing 8 changed files with 35 additions and 36 deletions.
2 changes: 1 addition & 1 deletion docs/docs-api.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ <h2>Public API</h2>
<td></td>
</tr>
<tr>
<td>visibleCollectionLength</td>
<td>domCollectionLength</td>
<td>number</td>
<td>Size of collection visible in the DOM</td>
<td></td>
Expand Down
37 changes: 18 additions & 19 deletions src/js/galleries/AbstractGallery.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -239,14 +239,14 @@ export abstract class AbstractGallery<Model extends ModelAttributes> {
* @type {Item[]}
* @private
*/
protected _visibleCollection: Item<Model>[] = [];
protected _domCollection: Item<Model>[] = [];

get visibleCollection(): Item<Model>[] {
return this._visibleCollection;
get domCollection(): Item<Model>[] {
return this._domCollection;
}

get selectedItems(): Model[] {
return this.visibleCollection.filter((item) => item.selected).map(item => item.model);
return this.domCollection.filter((item) => item.selected).map(item => item.model);
}

get width(): number {
Expand All @@ -260,8 +260,8 @@ export abstract class AbstractGallery<Model extends ModelAttributes> {
return this.collection.length;
}

get visibleCollectionLength(): number {
return this.visibleCollection.length;
get domCollectionLength(): number {
return this.domCollection.length;
}

/**
Expand Down Expand Up @@ -323,7 +323,7 @@ export abstract class AbstractGallery<Model extends ModelAttributes> {
});

this.psLightbox.addFilter('numItems', (): number => {
return this.visibleCollection.length;
return this.domCollection.length;
// return this.collection.length;
});

Expand All @@ -349,15 +349,15 @@ export abstract class AbstractGallery<Model extends ModelAttributes> {
this.psLightbox.on('change', () => {
// Positive delta means next slide.
// If we go next slide, and current index is out of visible collection bound, load more items
if (this.psLightbox?.pswp && (this.psLightbox.pswp.currIndex > (this.visibleCollection.length - 10))) {
if (this.psLightbox?.pswp && (this.psLightbox.pswp.currIndex > (this.domCollection.length - 10))) {
this.onPageAdd();
}
});

}

public addItemToPhotoSwipeCollection(item: Item<Model>) {
const photoSwipeId = this.visibleCollection.length - 1;
const photoSwipeId = this.domCollection.length - 1;

item.element.addEventListener('zoom', () => {
this.psLightbox?.loadAndOpen(photoSwipeId);
Expand All @@ -377,7 +377,7 @@ export abstract class AbstractGallery<Model extends ModelAttributes> {
}

// Display newly added images if it's the first addition or if all images are already shown
const display = this.collection.length === this.visibleCollection.length;
const display = this.collection.length === this.domCollection.length;

// Complete collection
models.forEach((model: Model) => {
Expand All @@ -397,15 +397,15 @@ export abstract class AbstractGallery<Model extends ModelAttributes> {
* Ignores buffered items
*/
public selectVisibleItems(): Model[] {
this.visibleCollection.forEach((item) => item.select());
this.domCollection.forEach((item) => item.select());
return this.selectedItems;
}

/**
* Unselect all selected elements
*/
public unselectAllItems(): void {
this.visibleCollection.forEach((item) => item.unselect());
this.domCollection.forEach((item) => item.unselect());
}

/**
Expand Down Expand Up @@ -480,7 +480,7 @@ export abstract class AbstractGallery<Model extends ModelAttributes> {
this.scrollBufferedItems = itemsToAdd;

// Prepare second page
const bufferedItems = this.collection.slice(this.visibleCollection.length);
const bufferedItems = this.collection.slice(this.domCollection.length);
const missing = bufferedItems.length - pageSize;
this.requiredItems = Math.min(missing, bufferedItems.length, 0);

Expand Down Expand Up @@ -544,7 +544,7 @@ export abstract class AbstractGallery<Model extends ModelAttributes> {
}

/**
* Add given item to DOM and to visibleCollection
* Add given item to DOM and to domCollection
* @param {Item} item
* @param destination
*/
Expand All @@ -553,7 +553,7 @@ export abstract class AbstractGallery<Model extends ModelAttributes> {
throw new Error('Gallery not initialized');
}

this.visibleCollection.push(item);
this.domCollection.push(item);

destination.appendChild(item.init());

Expand All @@ -563,7 +563,7 @@ export abstract class AbstractGallery<Model extends ModelAttributes> {

// When selected / unselected
item.element.addEventListener('select', () => {
this.dispatchEvent('select', this.visibleCollection.filter(i => i.selected).map(i => i.model));
this.dispatchEvent('select', this.domCollection.filter(i => i.selected).map(i => i.model));
});

// When activate (if activate event is given in options)
Expand All @@ -580,7 +580,7 @@ export abstract class AbstractGallery<Model extends ModelAttributes> {
return;
}

if (this.visibleCollection.length === this.collection.length) {
if (this.domCollection.length === this.collection.length) {
this.nextButton.style.display = 'none';
} else {
this.nextButton.style.display = 'block';
Expand Down Expand Up @@ -620,7 +620,6 @@ export abstract class AbstractGallery<Model extends ModelAttributes> {
this.bodyElementRef?.classList.remove('resizing');
}


protected dispatchEvent<K extends keyof CustomEventDetailMap<Model>>(name: K, data: CustomEventDetailMap<Model>[K]): void;
protected dispatchEvent(name: keyof CustomEventDetailMap<Model>, data: CustomEventDetailMap<Model>[keyof CustomEventDetailMap<Model>]): void {
const event = new CustomEvent(name, { detail: data });
Expand All @@ -635,7 +634,7 @@ export abstract class AbstractGallery<Model extends ModelAttributes> {
this.bodyElementRef.innerHTML = '';
}

this._visibleCollection = [];
this._domCollection = [];
this._collection = [];
}

Expand Down
8 changes: 4 additions & 4 deletions src/js/galleries/AbstractRowGallery.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,10 @@ export abstract class AbstractRowGallery<Model extends ModelAttributes> extends
*/
protected addRows(rows: number): void {

const nbVisibleImages = this.visibleCollection.length;
const nbVisibleImages = this.domCollection.length;

// Next row to add (first invisible row)
const nextRow = this.visibleCollection.length ? this.visibleCollection[nbVisibleImages - 1].row + 1 : 0;
const nextRow = this.domCollection.length ? this.domCollection[nbVisibleImages - 1].row + 1 : 0;
const lastWantedRow = nextRow + rows - 1;

// Compute size only for elements we're going to add
Expand All @@ -36,12 +36,12 @@ export abstract class AbstractRowGallery<Model extends ModelAttributes> extends

super.endResize();

if (!this.visibleCollection.length) {
if (!this.domCollection.length) {
return;
}

// Compute with new width. Rows indexes may have change
this.organizeItems(this.visibleCollection);
this.organizeItems(this.domCollection);

}

Expand Down
10 changes: 5 additions & 5 deletions src/js/galleries/Masonry.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ export class Masonry<Model extends ModelAttributes = ModelAttributes> extends Ab
protected addUntilFill(): void {
do {
this.addItemsToDom(1);
} while (this.viewPortIsNotFilled() && this.visibleCollection.length < this.collection.length);
} while (this.viewPortIsNotFilled() && this.domCollection.length < this.collection.length);
}

protected addItemToDOM(item: Item<Model>): void {
Expand All @@ -133,12 +133,12 @@ export class Masonry<Model extends ModelAttributes = ModelAttributes> extends Ab

super.endResize();

if (!this.visibleCollection.length) {
if (!this.domCollection.length) {
return;
}

// Compute with new width. Rows indexes may have change
this.visibleCollection.length = 0;
this.domCollection.length = 0;
this.addColumns();
this.addUntilFill();
}
Expand Down Expand Up @@ -172,10 +172,10 @@ export class Masonry<Model extends ModelAttributes = ModelAttributes> extends Ab

private addItemsToDom(nbItems: number) {

const nbVisibleImages = this.visibleCollection.length;
const nbVisibleImages = this.domCollection.length;

// Next row to add (first invisible row)
const firstIndex = this.visibleCollection.length ? nbVisibleImages : 0;
const firstIndex = this.domCollection.length ? nbVisibleImages : 0;
const lastWantedIndex = firstIndex + nbItems - 1;

// Compute size only for elements we're going to add
Expand Down
8 changes: 4 additions & 4 deletions src/js/galleries/Natural.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,18 +155,18 @@ export class Natural<Model extends ModelAttributes = ModelAttributes> extends Ab

private completeLastRow(): void {

if (!this.visibleCollection.length) {
if (!this.domCollection.length) {
return;
}

// Get last row number
const lastVisibleRow = this.visibleCollection[this.visibleCollection.length - 1].row;
const lastVisibleRow = this.domCollection[this.domCollection.length - 1].row;

// Get number of items in that last row
const visibleItemsInLastRow = this.visibleCollection.filter(i => i.row === lastVisibleRow).length;
const visibleItemsInLastRow = this.domCollection.filter(i => i.row === lastVisibleRow).length;

// Get a list from first item of last row until end of collection
const collectionFromLastVisibleRow = this.collection.slice(this.visibleCollection.length - visibleItemsInLastRow);
const collectionFromLastVisibleRow = this.collection.slice(this.domCollection.length - visibleItemsInLastRow);
this.organizeItems(collectionFromLastVisibleRow, collectionFromLastVisibleRow[0].row, collectionFromLastVisibleRow[0].row);
const itemsToAdd = collectionFromLastVisibleRow.slice(visibleItemsInLastRow)
.filter(i => i.row <= collectionFromLastVisibleRow[0].row);
Expand Down
2 changes: 1 addition & 1 deletion testing/unit/masonry.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ describe('Masonry Gallery', () => {
gallery.addItems(images);

expect(gallery.collection.length).toEqual(6);
expect(gallery.visibleCollection.length).toEqual(0);
expect(gallery.domCollection.length).toEqual(0);

});
});
2 changes: 1 addition & 1 deletion testing/unit/natural.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ describe('Natural Gallery', () => {
gallery.addItems(images);

expect(gallery.collection.length).toEqual(6);
expect(gallery.visibleCollection.length).toEqual(0);
expect(gallery.domCollection.length).toEqual(0);
});

test('should return row height', () => {
Expand Down
2 changes: 1 addition & 1 deletion testing/unit/square.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ describe('Square Gallery', () => {
gallery.addItems(images);

expect(gallery.collection.length).toEqual(6);
expect(gallery.visibleCollection.length).toEqual(0);
expect(gallery.domCollection.length).toEqual(0);

});
});

0 comments on commit b6eaecf

Please sign in to comment.