| 13 | static override tag = 'gallery-screen'; |
| 14 | |
| 15 | static override bind(): Promise<void> { |
| 16 | // Now lets make it so that when a player clicks on one of the Images |
| 17 | // of the gallery, the image gets shown. For that purpose, we'll use |
| 18 | // create a function showImage(). You may notice we are not using a simple |
| 19 | // $_().click function, instead we are using the 'on' function, this is |
| 20 | // due to the images being generated automatically, we can't simply |
| 21 | // attach the listener to them so we attach it to their parent (the |
| 22 | // gallery) and then check if the click was actually on an image. |
| 23 | const self = this; |
| 24 | this.instances().on('click', '[data-image]', function(this: HTMLElement) { |
| 25 | const image = $_(this).closest('[data-image]').data('image') as string | undefined; |
| 26 | if (image) { |
| 27 | self.showImage(image); |
| 28 | } |
| 29 | }); |
| 30 | |
| 31 | // This listener will make it so that any click on the image viewer |
| 32 | // closes it |
| 33 | this.instances().on('click', '[data-ui="image-viewer"]', () => { |
| 34 | this.instances().find('[data-ui="image-viewer"]').removeClass('modal--active'); |
| 35 | this.instances().find('[data-ui="image-viewer"] figure').style('background-image', ''); |
| 36 | }); |
| 37 | return Promise.resolve(); |
| 38 | } |
| 39 | |
| 40 | static override init(): Promise<void> { |
| 41 | if (Object.keys(this.engine.assets('gallery') ?? {}).length > 0) { |