瀏覽代碼

Viewport: introduce the fullscreenchange event

customisations
alemart 11 月之前
父節點
當前提交
7c98644c9d
共有 2 個檔案被更改,包括 42 行新增6 行删除
  1. 19
    2
      docs/api/viewport.md
  2. 23
    4
      src/core/viewport.ts

+ 19
- 2
docs/api/viewport.md 查看文件

156
 **Example**
156
 **Example**
157
 
157
 
158
 ```js
158
 ```js
159
-viewport.addEventListener('resize', event => {
159
+viewport.addEventListener('resize', () => {
160
     console.log('The viewport has been resized.');
160
     console.log('The viewport has been resized.');
161
 });
161
 });
162
-```
162
+```
163
+
164
+### fullscreenchange
165
+
166
+The viewport has been switched into or out of fullscreen mode.
167
+
168
+*Since:* 0.3.0
169
+
170
+**Example**
171
+
172
+```js
173
+viewport.addEventListener('fullscreenchange', () => {
174
+    if(viewport.fullscreen)
175
+        console.log('Switched into fullscreen mode');
176
+    else
177
+        console.log('Switched out of fullscreen mode');
178
+});
179
+```

+ 23
- 4
src/core/viewport.ts 查看文件

41
 type ViewportSizeGetter = () => SpeedySize;
41
 type ViewportSizeGetter = () => SpeedySize;
42
 
42
 
43
 /** All possible event types emitted by a Viewport */
43
 /** All possible event types emitted by a Viewport */
44
-type ViewportEventType = 'resize';
44
+type ViewportEventType = 'resize' | 'fullscreenchange';
45
 
45
 
46
 /** An event emitted by a Viewport */
46
 /** An event emitted by a Viewport */
47
 class ViewportEvent extends AREvent<ViewportEventType> { }
47
 class ViewportEvent extends AREvent<ViewportEventType> { }
306
  */
306
  */
307
 class ViewportFullscreenHelper
307
 class ViewportFullscreenHelper
308
 {
308
 {
309
+    /** The container to be put in fullscreen */
310
+    private readonly _container: HTMLElement;
311
+
312
+
313
+
309
     /**
314
     /**
310
      * Constructor
315
      * Constructor
311
-     * @param _container the container which will be put in fullscreen
316
+     * @param _viewport Viewport
312
      */
317
      */
313
-    constructor(private readonly _container: HTMLElement)
318
+    constructor(private readonly _viewport: Viewport)
314
     {
319
     {
320
+        this._container = _viewport.container;
315
     }
321
     }
316
 
322
 
317
     /**
323
     /**
342
                     if(container === (document as any).webkitFullscreenElement) {
348
                     if(container === (document as any).webkitFullscreenElement) {
343
                         Utils.log('Entering fullscreen mode...');
349
                         Utils.log('Entering fullscreen mode...');
344
                         resolve();
350
                         resolve();
351
+                        this._triggerEvent();
345
                     }
352
                     }
346
                     else
353
                     else
347
                         reject(new TypeError());
354
                         reject(new TypeError());
360
             }).then(() => {
367
             }).then(() => {
361
                 Utils.log('Entering fullscreen mode...');
368
                 Utils.log('Entering fullscreen mode...');
362
                 resolve();
369
                 resolve();
370
+                this._triggerEvent();
363
             }, reject);
371
             }, reject);
364
         });
372
         });
365
     }
373
     }
387
                     if(doc.webkitFullscreenElement === null) {
395
                     if(doc.webkitFullscreenElement === null) {
388
                         Utils.log('Exiting fullscreen mode...');
396
                         Utils.log('Exiting fullscreen mode...');
389
                         resolve();
397
                         resolve();
398
+                        this._triggerEvent();
390
                     }
399
                     }
391
                     else
400
                     else
392
                         reject(new TypeError());
401
                         reject(new TypeError());
403
             document.exitFullscreen().then(() => {
412
             document.exitFullscreen().then(() => {
404
                 Utils.log('Exiting fullscreen mode...');
413
                 Utils.log('Exiting fullscreen mode...');
405
                 resolve();
414
                 resolve();
415
+                this._triggerEvent();
406
             }, reject);
416
             }, reject);
407
         });
417
         });
408
     }
418
     }
430
         else
440
         else
431
             return false;
441
             return false;
432
     }
442
     }
443
+
444
+    /**
445
+     * Trigger a fullscreenchange event
446
+     */
447
+    _triggerEvent(): void
448
+    {
449
+        const event = new ViewportEvent('fullscreenchange');
450
+        this._viewport.dispatchEvent(event);
451
+    }
433
 }
452
 }
434
 
453
 
435
 
454
 
794
         this._resizer = new ViewportResizer(this);
813
         this._resizer = new ViewportResizer(this);
795
         this._resizer.setStrategyByName(this._style);
814
         this._resizer.setStrategyByName(this._style);
796
 
815
 
797
-        this._fullscreen = new ViewportFullscreenHelper(this.container);
816
+        this._fullscreen = new ViewportFullscreenHelper(this);
798
     }
817
     }
799
 
818
 
800
     /**
819
     /**

Loading…
取消
儲存