@3dweb/360javascriptviewer 1.8.48 → 1.8.50
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENCE +6 -6
- package/Readme.md +209 -213
- package/lib/JavascriptViewer.esm.js +1 -1
- package/lib/JavascriptViewer.js +1 -1
- package/package.json +85 -85
- package/typings/JavascriptViewer.d.ts +406 -406
|
@@ -1,407 +1,407 @@
|
|
|
1
|
-
import { Slot } from 'ts-event-bus';
|
|
2
|
-
|
|
3
|
-
export class JavascriptViewer {
|
|
4
|
-
/**
|
|
5
|
-
* Create an instance of the viewer.
|
|
6
|
-
* There are multiple instances possible on a page
|
|
7
|
-
* @param options
|
|
8
|
-
*/
|
|
9
|
-
constructor(options: options);
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* Use this to register events.
|
|
13
|
-
* @return IEvents
|
|
14
|
-
*/
|
|
15
|
-
events(): IEvents;
|
|
16
|
-
|
|
17
|
-
/**
|
|
18
|
-
* Start the presentation, loading all images and replace the main image with a 360 presentation
|
|
19
|
-
* @async
|
|
20
|
-
* @return boolean
|
|
21
|
-
* @throws string
|
|
22
|
-
*/
|
|
23
|
-
start(): Promise<boolean>;
|
|
24
|
-
|
|
25
|
-
/**
|
|
26
|
-
* Destroys the presentation and returns to previous state
|
|
27
|
-
* @async
|
|
28
|
-
* @return boolean
|
|
29
|
-
* @throws string
|
|
30
|
-
*/
|
|
31
|
-
destroy(): Promise<boolean>;
|
|
32
|
-
|
|
33
|
-
/**
|
|
34
|
-
* Set the desired rotation and the 360 model is rotating to it.
|
|
35
|
-
* @async
|
|
36
|
-
* @param degree
|
|
37
|
-
* @return IResponse
|
|
38
|
-
* @throws string
|
|
39
|
-
*/
|
|
40
|
-
rotateDegrees(degree: number): Promise<IResponse>;
|
|
41
|
-
|
|
42
|
-
/**
|
|
43
|
-
* Rotate to a certain degree. Frame nr 1 is 0 degrees.
|
|
44
|
-
* @param targetDegree
|
|
45
|
-
* @param shortestWay
|
|
46
|
-
* @param useEasing
|
|
47
|
-
* @return IResponse
|
|
48
|
-
* @throws string
|
|
49
|
-
*/
|
|
50
|
-
rotateToDegree(targetDegree: number, shortestWay?: boolean, useEasing?: boolean): Promise<IResponse>;
|
|
51
|
-
|
|
52
|
-
/**
|
|
53
|
-
* Rotate to a certain degree. Frame nr 1 is 0 degrees.
|
|
54
|
-
* @param frame
|
|
55
|
-
* @param shortestWay
|
|
56
|
-
* @param useEasing
|
|
57
|
-
* @return IResponse
|
|
58
|
-
* @throws string
|
|
59
|
-
*/
|
|
60
|
-
rotateToFrame(frame: number, shortestWay?: boolean, useEasing?: boolean): Promise<IResponse>;
|
|
61
|
-
|
|
62
|
-
/**
|
|
63
|
-
* Set the current speed of rotating for the viewer instance
|
|
64
|
-
* @param speed
|
|
65
|
-
*/
|
|
66
|
-
setSpeed(speed: number): void;
|
|
67
|
-
|
|
68
|
-
/**
|
|
69
|
-
* Set the current inertia of the viewer
|
|
70
|
-
* Set the current inertia for the viewer instance
|
|
71
|
-
* @param inertia
|
|
72
|
-
*/
|
|
73
|
-
setInertia(inertia: number): void;
|
|
74
|
-
|
|
75
|
-
/**
|
|
76
|
-
* Change the current presentation created by 3dweb.io
|
|
77
|
-
* @param id
|
|
78
|
-
*/
|
|
79
|
-
setId(id: number): Promise<boolean>;
|
|
80
|
-
|
|
81
|
-
/**
|
|
82
|
-
* Resets the zoom
|
|
83
|
-
*/
|
|
84
|
-
resetZoom(): Promise<void>
|
|
85
|
-
|
|
86
|
-
/**
|
|
87
|
-
* Zoom to given location.
|
|
88
|
-
* x and y are percentages from the middle 0-1 and -1-0
|
|
89
|
-
*/
|
|
90
|
-
zoomTo(factor: number, x: number, y: number): Promise<void>
|
|
91
|
-
|
|
92
|
-
/**
|
|
93
|
-
* Checks if the presentation is zoomed
|
|
94
|
-
*/
|
|
95
|
-
isZoomedIn(): boolean
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
export type Optional<T> = {
|
|
99
|
-
[P in keyof T]?: T[P];
|
|
100
|
-
};
|
|
101
|
-
|
|
102
|
-
export type options = Optional<IOptions>;
|
|
103
|
-
|
|
104
|
-
export interface IResponse {
|
|
105
|
-
currentDegree: number;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
export interface IOptions {
|
|
109
|
-
|
|
110
|
-
/**
|
|
111
|
-
* ID of the presentation created by 3dweb.io
|
|
112
|
-
*/
|
|
113
|
-
id?: string;
|
|
114
|
-
|
|
115
|
-
/**
|
|
116
|
-
* ID of the image which is the base for all the frames
|
|
117
|
-
* default is jsv-image
|
|
118
|
-
*/
|
|
119
|
-
mainImageId?: string;
|
|
120
|
-
|
|
121
|
-
/**
|
|
122
|
-
* ID of the div where the presentation runs in
|
|
123
|
-
* Default is jsv-holder
|
|
124
|
-
*/
|
|
125
|
-
mainHolderId?: string;
|
|
126
|
-
|
|
127
|
-
/**
|
|
128
|
-
* URl of the first image, doesn't have to be in the document.
|
|
129
|
-
* Default is empty
|
|
130
|
-
*/
|
|
131
|
-
mainImageUrl?: string;
|
|
132
|
-
|
|
133
|
-
/**
|
|
134
|
-
* Amount of frames in the presentation, more images means smoother rotations
|
|
135
|
-
* but also more heavier for the browser
|
|
136
|
-
* default is 72
|
|
137
|
-
*/
|
|
138
|
-
totalFrames?: number;
|
|
139
|
-
|
|
140
|
-
/**
|
|
141
|
-
* After loading the presentation this is the first frame visible
|
|
142
|
-
* Default is 1
|
|
143
|
-
*/
|
|
144
|
-
firstImageNumber?: number;
|
|
145
|
-
|
|
146
|
-
/**
|
|
147
|
-
* Invert the rotation direction when dragging
|
|
148
|
-
* Default is false
|
|
149
|
-
*/
|
|
150
|
-
reverse?: boolean;
|
|
151
|
-
|
|
152
|
-
/**
|
|
153
|
-
* Speed of rotating -199 to 100
|
|
154
|
-
* Default is 80
|
|
155
|
-
*/
|
|
156
|
-
speed?: number;
|
|
157
|
-
|
|
158
|
-
/**
|
|
159
|
-
* Delay when stop dragging
|
|
160
|
-
* Default is 20
|
|
161
|
-
*/
|
|
162
|
-
inertia?: number;
|
|
163
|
-
|
|
164
|
-
/**
|
|
165
|
-
* Disable the build in progress bar, use this when you have
|
|
166
|
-
* implemented your own loader or don't like this one.
|
|
167
|
-
* Default is true
|
|
168
|
-
*/
|
|
169
|
-
defaultProgressBar?: boolean;
|
|
170
|
-
|
|
171
|
-
/**
|
|
172
|
-
* Change the color of the progress bar, can be hex of rgb
|
|
173
|
-
* Default is rgb(0, 0, 0)
|
|
174
|
-
*/
|
|
175
|
-
defaultProgressBarColor?: string;
|
|
176
|
-
|
|
177
|
-
/**
|
|
178
|
-
* Change the background color of the progress bar, can be hex or rgb
|
|
179
|
-
* Default is rgba(255, 255, 255, 0.5)
|
|
180
|
-
*/
|
|
181
|
-
defaultProgressBarBackgroundColor?: string;
|
|
182
|
-
|
|
183
|
-
/**
|
|
184
|
-
* Change the height of the progress bar, can be any css value for height
|
|
185
|
-
* Default is '5px'
|
|
186
|
-
*/
|
|
187
|
-
defaultProgressBarHeight?: string;
|
|
188
|
-
|
|
189
|
-
/**
|
|
190
|
-
* Format for determining the filenames of the frames
|
|
191
|
-
* {filename}_xx.{extension} is the default
|
|
192
|
-
* ipod_x.jpg => ipod_1.jpg
|
|
193
|
-
* ipod_xx.jpg => ipod_01.jpg
|
|
194
|
-
* https://other.cdn/images/ipod_xx.jpg => https://other.cdn/images/ipod_01.jpg
|
|
195
|
-
*/
|
|
196
|
-
imageUrlFormat?: string;
|
|
197
|
-
|
|
198
|
-
/**
|
|
199
|
-
* Load all image urls into the viewer. Total frames will be overwritten
|
|
200
|
-
*/
|
|
201
|
-
imageUrls?: string[];
|
|
202
|
-
|
|
203
|
-
/**
|
|
204
|
-
* Add a class to all the images used in the presentation, separate multiple classes with a space.
|
|
205
|
-
* Default is empty
|
|
206
|
-
*/
|
|
207
|
-
extraImageClass?: string;
|
|
208
|
-
|
|
209
|
-
/**
|
|
210
|
-
* Add an alt text to the images, all images will have the same alt text.
|
|
211
|
-
* Default is empty and no alt text is added
|
|
212
|
-
*/
|
|
213
|
-
imageAltText?: string;
|
|
214
|
-
|
|
215
|
-
/**
|
|
216
|
-
* Use this setting in combination with imageUrlFormat.
|
|
217
|
-
* startFrameNo: 4 => first file is ipod_04.jpg
|
|
218
|
-
* Default is 1
|
|
219
|
-
*/
|
|
220
|
-
startFrameNo?: number;
|
|
221
|
-
|
|
222
|
-
/**
|
|
223
|
-
* Use this setting for rotating the view at start. Rotation stops when user drags the model
|
|
224
|
-
* or another animation method is called
|
|
225
|
-
* startRotation: 0 => No Rotation, 1 => Rotate once, 2 => Rotate twice
|
|
226
|
-
* Default is 0
|
|
227
|
-
*/
|
|
228
|
-
autoRotate?: number;
|
|
229
|
-
|
|
230
|
-
/**
|
|
231
|
-
* Use this setting for changing the speed of the auto rotating. -199 to 100
|
|
232
|
-
* Default is speed of viewer
|
|
233
|
-
*/
|
|
234
|
-
autoRotateSpeed?: number;
|
|
235
|
-
|
|
236
|
-
/**
|
|
237
|
-
* Use this setting for changing the direction of the auto rotating.
|
|
238
|
-
* Default is false
|
|
239
|
-
*/
|
|
240
|
-
autoRotateReverse?: boolean;
|
|
241
|
-
|
|
242
|
-
/**
|
|
243
|
-
* Use this setting for enabling click and pinch events on images
|
|
244
|
-
* Default is false
|
|
245
|
-
*/
|
|
246
|
-
enableImageEvents?: boolean;
|
|
247
|
-
|
|
248
|
-
/**
|
|
249
|
-
* Fires changeImage event in rotation. Keep track what your user is watching.
|
|
250
|
-
* Could be CPU heavy
|
|
251
|
-
* Default is false
|
|
252
|
-
*/
|
|
253
|
-
enableChangeImageEvent?: boolean;
|
|
254
|
-
|
|
255
|
-
/**
|
|
256
|
-
* Use this setting for enabling zoom functions.
|
|
257
|
-
* Default is false
|
|
258
|
-
*/
|
|
259
|
-
zoom?: boolean;
|
|
260
|
-
|
|
261
|
-
/**
|
|
262
|
-
* If zoom is enabled this is the max zoom factor.
|
|
263
|
-
* Default is 2
|
|
264
|
-
*/
|
|
265
|
-
zoomMax?: number;
|
|
266
|
-
|
|
267
|
-
/**
|
|
268
|
-
* Change the speed of zooming with the mousewheel.
|
|
269
|
-
* Default is 50
|
|
270
|
-
*/
|
|
271
|
-
zoomWheelSpeed?: number;
|
|
272
|
-
|
|
273
|
-
/**
|
|
274
|
-
* Blocks repeating images after reaching last image.
|
|
275
|
-
* Default is false
|
|
276
|
-
*/
|
|
277
|
-
stopAtEdges?: boolean;
|
|
278
|
-
|
|
279
|
-
/**
|
|
280
|
-
* Change the cursors for the presentation
|
|
281
|
-
*/
|
|
282
|
-
cursorConfig?: ICursorConfig;
|
|
283
|
-
|
|
284
|
-
/**
|
|
285
|
-
* Configure the notifications
|
|
286
|
-
*/
|
|
287
|
-
notificationConfig?: INotificationConfig;
|
|
288
|
-
|
|
289
|
-
/**
|
|
290
|
-
* Set the query params height and width for use with an image resizer.
|
|
291
|
-
*/
|
|
292
|
-
autoCDNResizer?: boolean;
|
|
293
|
-
|
|
294
|
-
/**
|
|
295
|
-
* Configure the image resizer
|
|
296
|
-
*/
|
|
297
|
-
autoCDNResizerConfig?: IAutoCDNResizerConfig;
|
|
298
|
-
|
|
299
|
-
/**
|
|
300
|
-
* License to remove powered by logo
|
|
301
|
-
* Default is empty
|
|
302
|
-
*/
|
|
303
|
-
license?: string;
|
|
304
|
-
}
|
|
305
|
-
|
|
306
|
-
/**
|
|
307
|
-
* Object for getting the loading progress
|
|
308
|
-
*/
|
|
309
|
-
export interface IProgress {
|
|
310
|
-
totalImages: number;
|
|
311
|
-
currentImage: number;
|
|
312
|
-
percentage: number;
|
|
313
|
-
image: IImage;
|
|
314
|
-
}
|
|
315
|
-
|
|
316
|
-
export interface IHandle {
|
|
317
|
-
invocations: number;
|
|
318
|
-
}
|
|
319
|
-
|
|
320
|
-
export interface IEvents {
|
|
321
|
-
loadImage: Slot<IProgress>;
|
|
322
|
-
started: Slot<boolean>;
|
|
323
|
-
startDragging: Slot<IHandle>;
|
|
324
|
-
changeImage: Slot<IStatus>;
|
|
325
|
-
endAutoRotate: Slot<IStatus>;
|
|
326
|
-
click: Slot<IClick>;
|
|
327
|
-
pinch: Slot<IPinch>;
|
|
328
|
-
scroll: Slot<IScroll>;
|
|
329
|
-
doubleClick: Slot<IClick>;
|
|
330
|
-
}
|
|
331
|
-
|
|
332
|
-
export interface IImage {
|
|
333
|
-
id: string;
|
|
334
|
-
src: string;
|
|
335
|
-
sequence: number;
|
|
336
|
-
}
|
|
337
|
-
|
|
338
|
-
export interface IStatus {
|
|
339
|
-
currentDegree: number;
|
|
340
|
-
currentImage: IImage;
|
|
341
|
-
completed: boolean;
|
|
342
|
-
}
|
|
343
|
-
|
|
344
|
-
export interface IClick extends IStatus {
|
|
345
|
-
originalEvent: TouchEvent | MouseEvent;
|
|
346
|
-
}
|
|
347
|
-
|
|
348
|
-
export interface IPinch extends IStatus {
|
|
349
|
-
originalEvent: TouchEvent,
|
|
350
|
-
scale: number
|
|
351
|
-
}
|
|
352
|
-
|
|
353
|
-
export interface IScroll extends IStatus {
|
|
354
|
-
originalEvent: Event;
|
|
355
|
-
}
|
|
356
|
-
|
|
357
|
-
interface ICursorConfig {
|
|
358
|
-
default: string,
|
|
359
|
-
drag: string,
|
|
360
|
-
zoomIn: string,
|
|
361
|
-
zoomOut: string,
|
|
362
|
-
pan: string
|
|
363
|
-
}
|
|
364
|
-
|
|
365
|
-
interface INotificationConfig {
|
|
366
|
-
dragToRotate: {
|
|
367
|
-
|
|
368
|
-
/**
|
|
369
|
-
* If you want to show a custom image as notification
|
|
370
|
-
*/
|
|
371
|
-
imageUrl?: string,
|
|
372
|
-
|
|
373
|
-
/**
|
|
374
|
-
* Show the default notification when starting to rotate
|
|
375
|
-
* Default is true
|
|
376
|
-
*/
|
|
377
|
-
showStartToRotateDefaultNotification?: boolean,
|
|
378
|
-
|
|
379
|
-
/**
|
|
380
|
-
* Override the default text for the notification for any language
|
|
381
|
-
*/
|
|
382
|
-
languages?: ITranslation[],
|
|
383
|
-
|
|
384
|
-
/**
|
|
385
|
-
* Set the background color for the notification, hex or rgba
|
|
386
|
-
* Default is rgba(0,0,0,0.20)
|
|
387
|
-
*/
|
|
388
|
-
mainColor?: string,
|
|
389
|
-
|
|
390
|
-
/**
|
|
391
|
-
* Set the text color for the notification, hex or rgba
|
|
392
|
-
* Default is rgba(243,237,237,0.80)
|
|
393
|
-
*/
|
|
394
|
-
textColor?: string
|
|
395
|
-
};
|
|
396
|
-
}
|
|
397
|
-
|
|
398
|
-
interface ITranslation {
|
|
399
|
-
language: string;
|
|
400
|
-
text: string;
|
|
401
|
-
}
|
|
402
|
-
|
|
403
|
-
interface IAutoCDNResizerConfig {
|
|
404
|
-
useWidth?: boolean,
|
|
405
|
-
useHeight?: boolean,
|
|
406
|
-
scaleWithZoomMax?: boolean,
|
|
1
|
+
import { Slot } from 'ts-event-bus';
|
|
2
|
+
|
|
3
|
+
export class JavascriptViewer {
|
|
4
|
+
/**
|
|
5
|
+
* Create an instance of the viewer.
|
|
6
|
+
* There are multiple instances possible on a page
|
|
7
|
+
* @param options
|
|
8
|
+
*/
|
|
9
|
+
constructor(options: options);
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* Use this to register events.
|
|
13
|
+
* @return IEvents
|
|
14
|
+
*/
|
|
15
|
+
events(): IEvents;
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* Start the presentation, loading all images and replace the main image with a 360 presentation
|
|
19
|
+
* @async
|
|
20
|
+
* @return boolean
|
|
21
|
+
* @throws string
|
|
22
|
+
*/
|
|
23
|
+
start(): Promise<boolean>;
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* Destroys the presentation and returns to previous state
|
|
27
|
+
* @async
|
|
28
|
+
* @return boolean
|
|
29
|
+
* @throws string
|
|
30
|
+
*/
|
|
31
|
+
destroy(): Promise<boolean>;
|
|
32
|
+
|
|
33
|
+
/**
|
|
34
|
+
* Set the desired rotation and the 360 model is rotating to it.
|
|
35
|
+
* @async
|
|
36
|
+
* @param degree
|
|
37
|
+
* @return IResponse
|
|
38
|
+
* @throws string
|
|
39
|
+
*/
|
|
40
|
+
rotateDegrees(degree: number): Promise<IResponse>;
|
|
41
|
+
|
|
42
|
+
/**
|
|
43
|
+
* Rotate to a certain degree. Frame nr 1 is 0 degrees.
|
|
44
|
+
* @param targetDegree
|
|
45
|
+
* @param shortestWay
|
|
46
|
+
* @param useEasing
|
|
47
|
+
* @return IResponse
|
|
48
|
+
* @throws string
|
|
49
|
+
*/
|
|
50
|
+
rotateToDegree(targetDegree: number, shortestWay?: boolean, useEasing?: boolean): Promise<IResponse>;
|
|
51
|
+
|
|
52
|
+
/**
|
|
53
|
+
* Rotate to a certain degree. Frame nr 1 is 0 degrees.
|
|
54
|
+
* @param frame
|
|
55
|
+
* @param shortestWay
|
|
56
|
+
* @param useEasing
|
|
57
|
+
* @return IResponse
|
|
58
|
+
* @throws string
|
|
59
|
+
*/
|
|
60
|
+
rotateToFrame(frame: number, shortestWay?: boolean, useEasing?: boolean): Promise<IResponse>;
|
|
61
|
+
|
|
62
|
+
/**
|
|
63
|
+
* Set the current speed of rotating for the viewer instance
|
|
64
|
+
* @param speed
|
|
65
|
+
*/
|
|
66
|
+
setSpeed(speed: number): void;
|
|
67
|
+
|
|
68
|
+
/**
|
|
69
|
+
* Set the current inertia of the viewer
|
|
70
|
+
* Set the current inertia for the viewer instance
|
|
71
|
+
* @param inertia
|
|
72
|
+
*/
|
|
73
|
+
setInertia(inertia: number): void;
|
|
74
|
+
|
|
75
|
+
/**
|
|
76
|
+
* Change the current presentation created by 3dweb.io
|
|
77
|
+
* @param id
|
|
78
|
+
*/
|
|
79
|
+
setId(id: number): Promise<boolean>;
|
|
80
|
+
|
|
81
|
+
/**
|
|
82
|
+
* Resets the zoom
|
|
83
|
+
*/
|
|
84
|
+
resetZoom(): Promise<void>
|
|
85
|
+
|
|
86
|
+
/**
|
|
87
|
+
* Zoom to given location.
|
|
88
|
+
* x and y are percentages from the middle 0-1 and -1-0
|
|
89
|
+
*/
|
|
90
|
+
zoomTo(factor: number, x: number, y: number): Promise<void>
|
|
91
|
+
|
|
92
|
+
/**
|
|
93
|
+
* Checks if the presentation is zoomed
|
|
94
|
+
*/
|
|
95
|
+
isZoomedIn(): boolean
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
export type Optional<T> = {
|
|
99
|
+
[P in keyof T]?: T[P];
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
export type options = Optional<IOptions>;
|
|
103
|
+
|
|
104
|
+
export interface IResponse {
|
|
105
|
+
currentDegree: number;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
export interface IOptions {
|
|
109
|
+
|
|
110
|
+
/**
|
|
111
|
+
* ID of the presentation created by 3dweb.io
|
|
112
|
+
*/
|
|
113
|
+
id?: string;
|
|
114
|
+
|
|
115
|
+
/**
|
|
116
|
+
* ID of the image which is the base for all the frames
|
|
117
|
+
* default is jsv-image
|
|
118
|
+
*/
|
|
119
|
+
mainImageId?: string;
|
|
120
|
+
|
|
121
|
+
/**
|
|
122
|
+
* ID of the div where the presentation runs in
|
|
123
|
+
* Default is jsv-holder
|
|
124
|
+
*/
|
|
125
|
+
mainHolderId?: string;
|
|
126
|
+
|
|
127
|
+
/**
|
|
128
|
+
* URl of the first image, doesn't have to be in the document.
|
|
129
|
+
* Default is empty
|
|
130
|
+
*/
|
|
131
|
+
mainImageUrl?: string;
|
|
132
|
+
|
|
133
|
+
/**
|
|
134
|
+
* Amount of frames in the presentation, more images means smoother rotations
|
|
135
|
+
* but also more heavier for the browser
|
|
136
|
+
* default is 72
|
|
137
|
+
*/
|
|
138
|
+
totalFrames?: number;
|
|
139
|
+
|
|
140
|
+
/**
|
|
141
|
+
* After loading the presentation this is the first frame visible
|
|
142
|
+
* Default is 1
|
|
143
|
+
*/
|
|
144
|
+
firstImageNumber?: number;
|
|
145
|
+
|
|
146
|
+
/**
|
|
147
|
+
* Invert the rotation direction when dragging
|
|
148
|
+
* Default is false
|
|
149
|
+
*/
|
|
150
|
+
reverse?: boolean;
|
|
151
|
+
|
|
152
|
+
/**
|
|
153
|
+
* Speed of rotating -199 to 100
|
|
154
|
+
* Default is 80
|
|
155
|
+
*/
|
|
156
|
+
speed?: number;
|
|
157
|
+
|
|
158
|
+
/**
|
|
159
|
+
* Delay when stop dragging
|
|
160
|
+
* Default is 20
|
|
161
|
+
*/
|
|
162
|
+
inertia?: number;
|
|
163
|
+
|
|
164
|
+
/**
|
|
165
|
+
* Disable the build in progress bar, use this when you have
|
|
166
|
+
* implemented your own loader or don't like this one.
|
|
167
|
+
* Default is true
|
|
168
|
+
*/
|
|
169
|
+
defaultProgressBar?: boolean;
|
|
170
|
+
|
|
171
|
+
/**
|
|
172
|
+
* Change the color of the progress bar, can be hex of rgb
|
|
173
|
+
* Default is rgb(0, 0, 0)
|
|
174
|
+
*/
|
|
175
|
+
defaultProgressBarColor?: string;
|
|
176
|
+
|
|
177
|
+
/**
|
|
178
|
+
* Change the background color of the progress bar, can be hex or rgb
|
|
179
|
+
* Default is rgba(255, 255, 255, 0.5)
|
|
180
|
+
*/
|
|
181
|
+
defaultProgressBarBackgroundColor?: string;
|
|
182
|
+
|
|
183
|
+
/**
|
|
184
|
+
* Change the height of the progress bar, can be any css value for height
|
|
185
|
+
* Default is '5px'
|
|
186
|
+
*/
|
|
187
|
+
defaultProgressBarHeight?: string;
|
|
188
|
+
|
|
189
|
+
/**
|
|
190
|
+
* Format for determining the filenames of the frames
|
|
191
|
+
* {filename}_xx.{extension} is the default
|
|
192
|
+
* ipod_x.jpg => ipod_1.jpg
|
|
193
|
+
* ipod_xx.jpg => ipod_01.jpg
|
|
194
|
+
* https://other.cdn/images/ipod_xx.jpg => https://other.cdn/images/ipod_01.jpg
|
|
195
|
+
*/
|
|
196
|
+
imageUrlFormat?: string;
|
|
197
|
+
|
|
198
|
+
/**
|
|
199
|
+
* Load all image urls into the viewer. Total frames will be overwritten
|
|
200
|
+
*/
|
|
201
|
+
imageUrls?: string[];
|
|
202
|
+
|
|
203
|
+
/**
|
|
204
|
+
* Add a class to all the images used in the presentation, separate multiple classes with a space.
|
|
205
|
+
* Default is empty
|
|
206
|
+
*/
|
|
207
|
+
extraImageClass?: string;
|
|
208
|
+
|
|
209
|
+
/**
|
|
210
|
+
* Add an alt text to the images, all images will have the same alt text.
|
|
211
|
+
* Default is empty and no alt text is added
|
|
212
|
+
*/
|
|
213
|
+
imageAltText?: string;
|
|
214
|
+
|
|
215
|
+
/**
|
|
216
|
+
* Use this setting in combination with imageUrlFormat.
|
|
217
|
+
* startFrameNo: 4 => first file is ipod_04.jpg
|
|
218
|
+
* Default is 1
|
|
219
|
+
*/
|
|
220
|
+
startFrameNo?: number;
|
|
221
|
+
|
|
222
|
+
/**
|
|
223
|
+
* Use this setting for rotating the view at start. Rotation stops when user drags the model
|
|
224
|
+
* or another animation method is called
|
|
225
|
+
* startRotation: 0 => No Rotation, 1 => Rotate once, 2 => Rotate twice
|
|
226
|
+
* Default is 0
|
|
227
|
+
*/
|
|
228
|
+
autoRotate?: number;
|
|
229
|
+
|
|
230
|
+
/**
|
|
231
|
+
* Use this setting for changing the speed of the auto rotating. -199 to 100
|
|
232
|
+
* Default is speed of viewer
|
|
233
|
+
*/
|
|
234
|
+
autoRotateSpeed?: number;
|
|
235
|
+
|
|
236
|
+
/**
|
|
237
|
+
* Use this setting for changing the direction of the auto rotating.
|
|
238
|
+
* Default is false
|
|
239
|
+
*/
|
|
240
|
+
autoRotateReverse?: boolean;
|
|
241
|
+
|
|
242
|
+
/**
|
|
243
|
+
* Use this setting for enabling click and pinch events on images
|
|
244
|
+
* Default is false
|
|
245
|
+
*/
|
|
246
|
+
enableImageEvents?: boolean;
|
|
247
|
+
|
|
248
|
+
/**
|
|
249
|
+
* Fires changeImage event in rotation. Keep track what your user is watching.
|
|
250
|
+
* Could be CPU heavy
|
|
251
|
+
* Default is false
|
|
252
|
+
*/
|
|
253
|
+
enableChangeImageEvent?: boolean;
|
|
254
|
+
|
|
255
|
+
/**
|
|
256
|
+
* Use this setting for enabling zoom functions.
|
|
257
|
+
* Default is false
|
|
258
|
+
*/
|
|
259
|
+
zoom?: boolean;
|
|
260
|
+
|
|
261
|
+
/**
|
|
262
|
+
* If zoom is enabled this is the max zoom factor.
|
|
263
|
+
* Default is 2
|
|
264
|
+
*/
|
|
265
|
+
zoomMax?: number;
|
|
266
|
+
|
|
267
|
+
/**
|
|
268
|
+
* Change the speed of zooming with the mousewheel.
|
|
269
|
+
* Default is 50
|
|
270
|
+
*/
|
|
271
|
+
zoomWheelSpeed?: number;
|
|
272
|
+
|
|
273
|
+
/**
|
|
274
|
+
* Blocks repeating images after reaching last image.
|
|
275
|
+
* Default is false
|
|
276
|
+
*/
|
|
277
|
+
stopAtEdges?: boolean;
|
|
278
|
+
|
|
279
|
+
/**
|
|
280
|
+
* Change the cursors for the presentation
|
|
281
|
+
*/
|
|
282
|
+
cursorConfig?: ICursorConfig;
|
|
283
|
+
|
|
284
|
+
/**
|
|
285
|
+
* Configure the notifications
|
|
286
|
+
*/
|
|
287
|
+
notificationConfig?: INotificationConfig;
|
|
288
|
+
|
|
289
|
+
/**
|
|
290
|
+
* Set the query params height and width for use with an image resizer.
|
|
291
|
+
*/
|
|
292
|
+
autoCDNResizer?: boolean;
|
|
293
|
+
|
|
294
|
+
/**
|
|
295
|
+
* Configure the image resizer
|
|
296
|
+
*/
|
|
297
|
+
autoCDNResizerConfig?: IAutoCDNResizerConfig;
|
|
298
|
+
|
|
299
|
+
/**
|
|
300
|
+
* License to remove powered by logo
|
|
301
|
+
* Default is empty
|
|
302
|
+
*/
|
|
303
|
+
license?: string;
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
/**
|
|
307
|
+
* Object for getting the loading progress
|
|
308
|
+
*/
|
|
309
|
+
export interface IProgress {
|
|
310
|
+
totalImages: number;
|
|
311
|
+
currentImage: number;
|
|
312
|
+
percentage: number;
|
|
313
|
+
image: IImage;
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
export interface IHandle {
|
|
317
|
+
invocations: number;
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
export interface IEvents {
|
|
321
|
+
loadImage: Slot<IProgress>;
|
|
322
|
+
started: Slot<boolean>;
|
|
323
|
+
startDragging: Slot<IHandle>;
|
|
324
|
+
changeImage: Slot<IStatus>;
|
|
325
|
+
endAutoRotate: Slot<IStatus>;
|
|
326
|
+
click: Slot<IClick>;
|
|
327
|
+
pinch: Slot<IPinch>;
|
|
328
|
+
scroll: Slot<IScroll>;
|
|
329
|
+
doubleClick: Slot<IClick>;
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
export interface IImage {
|
|
333
|
+
id: string;
|
|
334
|
+
src: string;
|
|
335
|
+
sequence: number;
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
export interface IStatus {
|
|
339
|
+
currentDegree: number;
|
|
340
|
+
currentImage: IImage;
|
|
341
|
+
completed: boolean;
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
export interface IClick extends IStatus {
|
|
345
|
+
originalEvent: TouchEvent | MouseEvent;
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
export interface IPinch extends IStatus {
|
|
349
|
+
originalEvent: TouchEvent,
|
|
350
|
+
scale: number
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
export interface IScroll extends IStatus {
|
|
354
|
+
originalEvent: Event;
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
interface ICursorConfig {
|
|
358
|
+
default: string,
|
|
359
|
+
drag: string,
|
|
360
|
+
zoomIn: string,
|
|
361
|
+
zoomOut: string,
|
|
362
|
+
pan: string
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
interface INotificationConfig {
|
|
366
|
+
dragToRotate: {
|
|
367
|
+
|
|
368
|
+
/**
|
|
369
|
+
* If you want to show a custom image as notification
|
|
370
|
+
*/
|
|
371
|
+
imageUrl?: string,
|
|
372
|
+
|
|
373
|
+
/**
|
|
374
|
+
* Show the default notification when starting to rotate
|
|
375
|
+
* Default is true
|
|
376
|
+
*/
|
|
377
|
+
showStartToRotateDefaultNotification?: boolean,
|
|
378
|
+
|
|
379
|
+
/**
|
|
380
|
+
* Override the default text for the notification for any language
|
|
381
|
+
*/
|
|
382
|
+
languages?: ITranslation[],
|
|
383
|
+
|
|
384
|
+
/**
|
|
385
|
+
* Set the background color for the notification, hex or rgba
|
|
386
|
+
* Default is rgba(0,0,0,0.20)
|
|
387
|
+
*/
|
|
388
|
+
mainColor?: string,
|
|
389
|
+
|
|
390
|
+
/**
|
|
391
|
+
* Set the text color for the notification, hex or rgba
|
|
392
|
+
* Default is rgba(243,237,237,0.80)
|
|
393
|
+
*/
|
|
394
|
+
textColor?: string
|
|
395
|
+
};
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
interface ITranslation {
|
|
399
|
+
language: string;
|
|
400
|
+
text: string;
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
interface IAutoCDNResizerConfig {
|
|
404
|
+
useWidth?: boolean,
|
|
405
|
+
useHeight?: boolean,
|
|
406
|
+
scaleWithZoomMax?: boolean,
|
|
407
407
|
}
|