camera-modal.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. import { h } from '@stencil/core';
  2. export class PWACameraModal {
  3. constructor() {
  4. this.facingMode = 'user';
  5. this.hidePicker = false;
  6. }
  7. async present() {
  8. const camera = document.createElement('pwa-camera-modal-instance');
  9. camera.facingMode = this.facingMode;
  10. camera.hidePicker = this.hidePicker;
  11. camera.addEventListener('onPhoto', async (e) => {
  12. if (!this._modal) {
  13. return;
  14. }
  15. const photo = e.detail;
  16. this.onPhoto.emit(photo);
  17. });
  18. camera.addEventListener('noDeviceError', async (e) => {
  19. this.noDeviceError.emit(e);
  20. });
  21. document.body.append(camera);
  22. this._modal = camera;
  23. }
  24. async dismiss() {
  25. if (!this._modal) {
  26. return;
  27. }
  28. this._modal && this._modal.parentNode.removeChild(this._modal);
  29. this._modal = null;
  30. }
  31. render() {
  32. return (h("div", null));
  33. }
  34. static get is() { return "pwa-camera-modal"; }
  35. static get encapsulation() { return "shadow"; }
  36. static get originalStyleUrls() {
  37. return {
  38. "$": ["camera-modal.css"]
  39. };
  40. }
  41. static get styleUrls() {
  42. return {
  43. "$": ["camera-modal.css"]
  44. };
  45. }
  46. static get properties() {
  47. return {
  48. "facingMode": {
  49. "type": "string",
  50. "mutable": false,
  51. "complexType": {
  52. "original": "string",
  53. "resolved": "string",
  54. "references": {}
  55. },
  56. "required": false,
  57. "optional": false,
  58. "docs": {
  59. "tags": [],
  60. "text": ""
  61. },
  62. "attribute": "facing-mode",
  63. "reflect": false,
  64. "defaultValue": "'user'"
  65. },
  66. "hidePicker": {
  67. "type": "boolean",
  68. "mutable": false,
  69. "complexType": {
  70. "original": "boolean",
  71. "resolved": "boolean",
  72. "references": {}
  73. },
  74. "required": false,
  75. "optional": false,
  76. "docs": {
  77. "tags": [],
  78. "text": ""
  79. },
  80. "attribute": "hide-picker",
  81. "reflect": false,
  82. "defaultValue": "false"
  83. }
  84. };
  85. }
  86. static get events() {
  87. return [{
  88. "method": "onPhoto",
  89. "name": "onPhoto",
  90. "bubbles": true,
  91. "cancelable": true,
  92. "composed": true,
  93. "docs": {
  94. "tags": [],
  95. "text": ""
  96. },
  97. "complexType": {
  98. "original": "any",
  99. "resolved": "any",
  100. "references": {}
  101. }
  102. }, {
  103. "method": "noDeviceError",
  104. "name": "noDeviceError",
  105. "bubbles": true,
  106. "cancelable": true,
  107. "composed": true,
  108. "docs": {
  109. "tags": [],
  110. "text": ""
  111. },
  112. "complexType": {
  113. "original": "any",
  114. "resolved": "any",
  115. "references": {}
  116. }
  117. }];
  118. }
  119. static get methods() {
  120. return {
  121. "present": {
  122. "complexType": {
  123. "signature": "() => Promise<void>",
  124. "parameters": [],
  125. "references": {
  126. "Promise": {
  127. "location": "global"
  128. }
  129. },
  130. "return": "Promise<void>"
  131. },
  132. "docs": {
  133. "text": "",
  134. "tags": []
  135. }
  136. },
  137. "dismiss": {
  138. "complexType": {
  139. "signature": "() => Promise<void>",
  140. "parameters": [],
  141. "references": {
  142. "Promise": {
  143. "location": "global"
  144. }
  145. },
  146. "return": "Promise<void>"
  147. },
  148. "docs": {
  149. "text": "",
  150. "tags": []
  151. }
  152. }
  153. };
  154. }
  155. }