camera-modal-instance.js 4.1 KB

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