| 57 | } |
| 58 | |
| 59 | renderFrame() { |
| 60 | this.eFrame = document.createElement('div'); |
| 61 | this.eFrame.id = `eFrame-${this.id}`; |
| 62 | const closeButton = '<a class="m-frame-close">×</a>'; |
| 63 | this.eFrame.append(...parseHTML(closeButton)); |
| 64 | this.eFrame.classList.add('m-extract-frame', 'm-cursor'); |
| 65 | this.pgpElement.append(this.eFrame); |
| 66 | if (this.pgpRange.getBoundingClientRect().height > LARGE_FRAME) { |
| 67 | this.eFrame.classList.add('m-large'); |
| 68 | } |
| 69 | this.eFrame.addEventListener('click', this.clickHandler); |
| 70 | this.eFrame.querySelector('.m-frame-close').addEventListener('click', this.closeFrame.bind(this, false, false)); |
| 71 | this.shadowRootElem = document.createElement('div'); |
| 72 | this.pgpElement.append(this.shadowRootElem); |
| 73 | const eFrameShadow = this.shadowRootElem.attachShadow({mode: 'open'}); |
| 74 | const encryptContainerStyle = document.createElement('style'); |
| 75 | encryptContainerStyle.textContent = encryptContainerCSS; |
| 76 | eFrameShadow.append(encryptContainerStyle); |
| 77 | eFrameShadow.append(this.eFrame); |
| 78 | window.addEventListener('resize', this.setFrameDim); |
| 79 | this.domIntersectionObserver = new IntersectionObserver(entries => { |
| 80 | for (const entry of entries) { |
| 81 | if (entry.intersectionRatio > 0 && entry.boundingClientRect.height > 72) { |
| 82 | this.onShow(); |
| 83 | } |
| 84 | } |
| 85 | }, {root: null}); |
| 86 | this.domIntersectionObserver.observe(this.pgpElement); |
| 87 | } |
| 88 | |
| 89 | registerEventListener() { |
| 90 | document.addEventListener('mailvelope-observe', this.setFrameDim); |