Skip to content
This repository was archived by the owner on Jul 4, 2025. It is now read-only.

Commit 59e335f

Browse files
edsilvedsilv
committed
always pass data to set
1 parent abe4fd9 commit 59e335f

File tree

4 files changed

+102
-74
lines changed

4 files changed

+102
-74
lines changed

‎examples/index.html‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
<script src="https://unpkg.com/manifesto.js/dist/client/manifesto.bundle.js"></script>
2020
<script src="https://unpkg.com/@iiif/manifold/dist/manifold.js"></script>
2121
<script src="https://unpkg.com/@iiif/base-component/dist/BaseComponent.js"></script>
22-
<script src="https://unpkg.com/@edsilv/utils/dist/utils.js"></script>
22+
<script src="https://unpkg.com/@edsilv/utils/dist/Utils.js"></script>
2323
<script src="https://unpkg.com/@edsilv/jquery-plugins/dist/jquery-plugins.js"></script>
2424
<script src="../dist/GalleryComponent.js"></script>
2525
</head>
@@ -111,15 +111,7 @@
111111
helper = h;
112112

113113
component = new IIIFComponents.GalleryComponent({
114-
target: document.querySelector('#gallery'),
115-
data: {
116-
chunkedResizingThreshold: 50,
117-
debug: false,
118-
helper: h,
119-
pageModeEnabled: false,
120-
thumbLoadPadding: 1,
121-
searchResults: searchResults
122-
}
114+
target: document.querySelector('#gallery')
123115
});
124116

125117
component.on('decreaseSize', function() {
@@ -141,7 +133,14 @@
141133

142134
multiSelectState = helper.getMultiSelectState();
143135

144-
component.set();
136+
component.set({
137+
chunkedResizingThreshold: 50,
138+
debug: false,
139+
helper: h,
140+
pageModeEnabled: false,
141+
thumbLoadPadding: 1,
142+
searchResults: searchResults
143+
});
145144

146145
resize();
147146

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@iiif/iiif-gallery-component",
3-
"version": "1.1.12",
3+
"version": "1.1.13",
44
"description": "",
55
"main": "./dist/GalleryComponent.js",
66
"types": "./dist/GalleryComponent.d.ts",

‎src/GalleryComponent.ts‎

Lines changed: 90 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,21 @@ namespace IIIFComponents {
88
}
99

1010
export interface IGalleryComponentData {
11-
chunkedResizingThreshold: number;
12-
content: IGalleryComponentContent;
13-
debug: boolean;
14-
helper: Manifold.IHelper | null;
15-
imageFadeInDuration: number;
16-
initialZoom: number;
17-
minLabelWidth: number;
18-
pageModeEnabled: boolean;
19-
searchResults: Manifold.AnnotationGroup[];
20-
scrollStopDuration: number;
21-
sizingEnabled: boolean;
22-
thumbHeight: number;
23-
thumbLoadPadding: number;
24-
thumbWidth: number;
25-
viewingDirection: Manifesto.ViewingDirection;
11+
chunkedResizingThreshold?: number;
12+
content?: IGalleryComponentContent;
13+
debug?: boolean;
14+
helper?: Manifold.IHelper | null;
15+
imageFadeInDuration?: number;
16+
initialZoom?: number;
17+
minLabelWidth?: number;
18+
pageModeEnabled?: boolean;
19+
searchResults?: Manifold.AnnotationGroup[];
20+
scrollStopDuration?: number;
21+
sizingEnabled?: boolean;
22+
thumbHeight?: number;
23+
thumbLoadPadding?: number;
24+
thumbWidth?: number;
25+
viewingDirection?: Manifesto.ViewingDirection;
2626
}
2727

2828
export class GalleryComponent extends _Components.BaseComponent {
@@ -42,13 +42,14 @@ namespace IIIFComponents {
4242
private _$sizeRange: JQuery;
4343
private _$sizeUpButton: JQuery;
4444
private _$thumbs: JQuery;
45+
private _data: IGalleryComponentData = this.data();
4546
private _range: number;
4647
private _thumbs: Manifold.IThumb[];
4748
private _thumbsCache: JQuery | null;
4849

4950
constructor(options: _Components.IBaseComponentOptions) {
5051
super(options);
51-
52+
this._data = this.options.data;
5253
this._init();
5354
this._resize();
5455
}
@@ -94,10 +95,6 @@ namespace IIIFComponents {
9495
this._$thumbs = $('<div class="thumbs"></div>');
9596
this._$main.append(this._$thumbs);
9697

97-
const viewingDirection: Manifesto.ViewingDirection = this.options.data.helper.getViewingDirection() || manifesto.ViewingDirection.leftToRight();
98-
99-
this._$thumbs.addClass(viewingDirection.toString()); // defaults to "left-to-right"
100-
10198
this._$sizeDownButton.on('click', () => {
10299
var val = Number(this._$sizeRange.val()) - 1;
103100

@@ -124,22 +121,32 @@ namespace IIIFComponents {
124121
});
125122

126123
this._$selectAllButton.checkboxButton((checked: boolean) => {
127-
if (checked) {
128-
this._getMultiSelectState().selectAll(true);
129-
} else {
130-
this._getMultiSelectState().selectAll(false);
124+
125+
const multiSelectState: Manifold.MultiSelectState | null = this._getMultiSelectState();
126+
127+
if (multiSelectState) {
128+
if (checked) {
129+
multiSelectState.selectAll(true);
130+
} else {
131+
multiSelectState.selectAll(false);
132+
}
131133
}
132-
133-
this.set();
134+
135+
this.set(this.options.data);
134136
});
135137

136138
this._$selectButton.on('click', () => {
137139

138-
var ids: string[] = this._getMultiSelectState().getAllSelectedCanvases().map((canvas: Manifold.ICanvas) => {
139-
return canvas.id;
140-
});
140+
const multiSelectState: Manifold.MultiSelectState | null = this._getMultiSelectState();
141+
142+
if (multiSelectState) {
143+
var ids: string[] = multiSelectState.getAllSelectedCanvases().map((canvas: Manifold.ICanvas) => {
144+
return canvas.id;
145+
});
146+
147+
this.fire(GalleryComponent.Events.MULTISELECTION_MADE, ids);
148+
}
141149

142-
this.fire(GalleryComponent.Events.MULTISELECTION_MADE, ids);
143150
});
144151

145152
this._setRange();
@@ -229,18 +236,26 @@ namespace IIIFComponents {
229236
}
230237
}
231238

232-
public set(): void {
239+
public set(data: IGalleryComponentData): void {
233240

234-
this._thumbs = <Manifold.IThumb[]>this.options.data.helper.getThumbs(this.options.data.thumbWidth, this.options.data.thumbHeight);
241+
this._data = Object.assign(this._data, data);
235242

236-
if (this.options.data.viewingDirection && this.options.data.viewingDirection.toString() === manifesto.ViewingDirection.bottomToTop().toString()){
237-
this._thumbs.reverse();
243+
if (this._data.helper && this._data.thumbWidth !== undefined && this._data.thumbHeight !== undefined) {
244+
this._thumbs = <Manifold.IThumb[]>this._data.helper.getThumbs(this._data.thumbWidth, this._data.thumbHeight);
238245
}
239246

240-
if (this.options.data.searchResults && this.options.data.searchResults.length) {
247+
if (this._data.viewingDirection) {
248+
if (this._data.viewingDirection.toString() === manifesto.ViewingDirection.bottomToTop().toString()) {
249+
this._thumbs.reverse();
250+
}
251+
252+
this._$thumbs.addClass(this._data.viewingDirection.toString()); // defaults to "left-to-right"
253+
}
241254

242-
for (let i = 0; i < this.options.data.searchResults.length; i++) {
243-
var searchResult: Manifold.AnnotationGroup = this.options.data.searchResults[i];
255+
if (this._data.searchResults && this._data.searchResults.length) {
256+
257+
for (let i = 0; i < this._data.searchResults.length; i++) {
258+
var searchResult: Manifold.AnnotationGroup = this._data.searchResults[i];
244259

245260
// find the thumb with the same canvasIndex and add the searchResult
246261
let thumb: Manifold.IThumb = this._thumbs.en().where(t => t.index === searchResult.canvasIndex).first();
@@ -257,11 +272,13 @@ namespace IIIFComponents {
257272

258273
this._createThumbs();
259274

260-
this.selectIndex(this.options.data.helper.canvasIndex);
275+
if (this._data.helper) {
276+
this.selectIndex(this._data.helper.canvasIndex);
277+
}
261278

262-
var multiSelectState: Manifold.MultiSelectState = this._getMultiSelectState();
279+
const multiSelectState: Manifold.MultiSelectState | null = this._getMultiSelectState();
263280

264-
if (multiSelectState.isEnabled) {
281+
if (multiSelectState && multiSelectState.isEnabled) {
265282
this._$multiSelectOptions.show();
266283
this._$thumbs.addClass("multiSelect");
267284

@@ -291,9 +308,9 @@ namespace IIIFComponents {
291308
}
292309

293310
private _update(): void {
294-
var multiSelectState: Manifold.MultiSelectState = this._getMultiSelectState();
311+
var multiSelectState: Manifold.MultiSelectState | null = this._getMultiSelectState();
295312

296-
if (multiSelectState.isEnabled) {
313+
if (multiSelectState && multiSelectState.isEnabled) {
297314
// check/uncheck Select All checkbox
298315
this._$selectAllButtonCheckbox.prop("checked", multiSelectState.allSelected());
299316

@@ -307,8 +324,13 @@ namespace IIIFComponents {
307324
}
308325
}
309326

310-
private _getMultiSelectState(): Manifold.MultiSelectState {
311-
return this.options.data.helper.getMultiSelectState();
327+
private _getMultiSelectState(): Manifold.MultiSelectState | null {
328+
329+
if (this._data.helper) {
330+
return this._data.helper.getMultiSelectState();
331+
}
332+
333+
return null;
312334
}
313335

314336
private _createThumbs(): void {
@@ -320,7 +342,7 @@ namespace IIIFComponents {
320342

321343
this._$thumbs.empty();
322344

323-
const multiSelectState: Manifold.MultiSelectState = this._getMultiSelectState();
345+
const multiSelectState: Manifold.MultiSelectState | null = this._getMultiSelectState();
324346

325347
// set initial thumb sizes
326348
const heights = [];
@@ -332,7 +354,7 @@ namespace IIIFComponents {
332354
thumb.initialWidth = initialWidth;
333355
//thumb.initialHeight = initialHeight;
334356
heights.push(initialHeight);
335-
thumb.multiSelectEnabled = multiSelectState.isEnabled;
357+
thumb.multiSelectEnabled = (multiSelectState) ? multiSelectState.isEnabled : false;
336358
}
337359

338360
const medianHeight: number = Utils.Maths.median(heights);
@@ -344,7 +366,7 @@ namespace IIIFComponents {
344366

345367
this._$thumbs.link($.templates.galleryThumbsTemplate, this._thumbs);
346368

347-
if (!multiSelectState.isEnabled) {
369+
if (multiSelectState && !multiSelectState.isEnabled) {
348370
// add a selection click event to all thumbs
349371
this._$thumbs.delegate('.thumb', 'click', function (e) {
350372
e.preventDefault();
@@ -364,12 +386,14 @@ namespace IIIFComponents {
364386
const thumb: Manifold.IThumb = $.view(this).data;
365387
that._setThumbMultiSelected(thumb, !thumb.multiSelected);
366388
const range: Manifold.IRange = <Manifold.IRange>that.options.data.helper.getCanvasRange(thumb.data);
367-
const multiSelectState: Manifold.MultiSelectState = that._getMultiSelectState();
368-
369-
if (range) {
370-
multiSelectState.selectRange(<Manifold.IRange>range, thumb.multiSelected);
371-
} else {
372-
multiSelectState.selectCanvas(<Manifold.ICanvas>thumb.data, thumb.multiSelected);
389+
const multiSelectState: Manifold.MultiSelectState | null = that._getMultiSelectState();
390+
391+
if (multiSelectState) {
392+
if (range) {
393+
multiSelectState.selectRange(<Manifold.IRange>range, thumb.multiSelected);
394+
} else {
395+
multiSelectState.selectCanvas(<Manifold.ICanvas>thumb.data, thumb.multiSelected);
396+
}
373397
}
374398

375399
that._update();
@@ -404,13 +428,13 @@ namespace IIIFComponents {
404428

405429
// if search results are visible, size index/label to accommodate it.
406430
// if the resulting size is below options.minLabelWidth, hide search results.
407-
if (this.options.data.searchResults && this.options.data.searchResults.length) {
431+
if (this._data.searchResults && this._data.searchResults.length) {
408432

409433
$searchResults.show();
410434

411435
newLabelWidth = newWidth - (<any>$searchResults).outerWidth();
412436

413-
if (newLabelWidth < this.options.data.minLabelWidth) {
437+
if (this._data.minLabelWidth !== undefined && newLabelWidth < this._data.minLabelWidth) {
414438
$searchResults.hide();
415439
newLabelWidth = newWidth;
416440
} else {
@@ -419,7 +443,7 @@ namespace IIIFComponents {
419443

420444
}
421445

422-
if (this.options.data.pageModeEnabled) {
446+
if (this._data.pageModeEnabled) {
423447
$index.hide();
424448
$label.show();
425449
} else {
@@ -443,7 +467,7 @@ namespace IIIFComponents {
443467
// if no img has been added yet
444468

445469
const visible: string | undefined = $thumb.attr('data-visible');
446-
const fadeDuration: number = this.options.data.imageFadeInDuration;
470+
const fadeDuration: number = this._data.imageFadeInDuration || 0;
447471

448472
if (visible !== 'false') {
449473
$wrap.addClass('loading');
@@ -469,12 +493,17 @@ namespace IIIFComponents {
469493
}
470494

471495
private _getThumbsByRange(range: Manifold.IRange): Manifold.IThumb[] {
496+
472497
let thumbs: Manifold.IThumb[] = [];
473498

499+
if (!this._data.helper) {
500+
return thumbs;
501+
}
502+
474503
for (let i = 0; i < this._thumbs.length; i++) {
475504
const thumb: Manifold.IThumb = this._thumbs[i];
476505
const canvas: Manifold.ICanvas = thumb.data;
477-
const r: Manifold.IRange = <Manifold.IRange>this.options.data.helper.getCanvasRange(canvas, range.path);
506+
const r: Manifold.IRange = <Manifold.IRange>this._data.helper.getCanvasRange(canvas, range.path);
478507

479508
if (r && r.id === range.id){
480509
thumbs.push(thumb);
@@ -486,7 +515,7 @@ namespace IIIFComponents {
486515

487516
private _updateThumbs(): void {
488517

489-
const debug: boolean = this.options.data.debug;
518+
const debug: boolean = !!this._data.debug;
490519

491520
// cache range size
492521
this._setRange();
@@ -511,7 +540,7 @@ namespace IIIFComponents {
511540
const thumbHeight: number | undefined = $thumb.outerHeight();
512541
const thumbBottom: number = thumbTop + (thumbHeight as number);
513542

514-
const padding: number = (thumbHeight as number) * this.options.data.thumbLoadPadding;
543+
const padding: number = (thumbHeight as number) * (this._data.thumbLoadPadding as number);
515544

516545
// check all thumbs to see if they are within the scroll area plus padding
517546
if (thumbTop <= scrollBottom + padding && thumbBottom >= (scrollTop as number) - padding) {
@@ -581,7 +610,7 @@ namespace IIIFComponents {
581610
// }
582611

583612
// public searchPreviewFinish(): void {
584-
// this._scrollToThumb(this.options.data.helper.canvasIndex);
613+
// this._scrollToThumb(this._data.helper.canvasIndex);
585614
// this._getAllThumbs().removeClass('searchpreview');
586615
// }
587616

0 commit comments

Comments
 (0)