()
| 69 | } |
| 70 | |
| 71 | renderFrame() { |
| 72 | // create frame |
| 73 | this.eFrame = document.createElement('div'); |
| 74 | this.eFrame.id = `eFrame-${this.id}`; |
| 75 | this.eFrame.classList.add('m-encrypt-frame'); |
| 76 | const encryptContainer = `<div class="m-encrypt-container"><a id="editorBtn" class="m-encrypt-button"><svg width="30px" heigh="30px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle cx="16" cy="16" r="16" fill="#FF004F"/><path d="M15.995 28.667c-3.39 0-6.57-1.311-8.955-3.691-2.387-2.383-3.704-5.567-3.707-8.966a12.628 12.628 0 0 1 .592-3.836l.007-.028c.087-.306.194-.6.318-.875.022-.055.047-.116.073-.176.11-.251.545-1.115 1.588-1.77.943-.593 1.77-.644 1.866-.648.228-.027.464-.04.699-.04 1.07 0 2.015.423 2.662 1.194.492.587.76 1.307.78 2.097a4.321 4.321 0 0 1 1.959-.481c1.07 0 2.016.424 2.662 1.194.039.046.076.094.113.142.859-.852 1.993-1.336 3.14-1.336 1.07 0 2.015.424 2.662 1.194.656.782.913 1.81.722 2.893l-.672 3.807c-.09.513.017.982.301 1.321.274.327.696.507 1.187.507 1.482 0 2.003-1.08 2.345-2.246.293-1.033.428-2.107.401-3.191a10.675 10.675 0 0 0-3.219-7.387 10.683 10.683 0 0 0-7.445-3.086H16c-2.14 0-4.209.63-5.982 1.825a.97.97 0 0 1-.544.167.958.958 0 0 1-.729-.335L8.74 6.91a.96.96 0 0 1 .196-1.418 12.585 12.585 0 0 1 7.317-2.156 12.604 12.604 0 0 1 8.65 3.67 12.601 12.601 0 0 1 3.758 8.612 12.664 12.664 0 0 1-.41 3.606h.001l-.043.158-.019.063a12.57 12.57 0 0 1-.4 1.187c-.079.187-.518 1.143-1.599 1.822-.935.588-1.673.618-1.76.62a4.89 4.89 0 0 1-.439.02c-1.07 0-2.016-.424-2.662-1.194-.656-.783-.913-1.81-.722-2.893l.672-3.808c.09-.512-.017-.982-.301-1.32-.274-.327-.696-.507-1.187-.507-1.166 0-2.325.99-2.531 2.162l-.735 3.998a.528.528 0 0 1-.52.432h-.883a.527.527 0 0 1-.52-.623l.762-4.144c.09-.51-.017-.98-.3-1.319-.275-.326-.697-.506-1.188-.506-1.165 0-2.324.99-2.531 2.162l-.734 3.998a.528.528 0 0 1-.52.432H9.21a.526.526 0 0 1-.52-.623l.764-4.159.512-2.799c.09-.509-.018-.976-.302-1.315-.274-.327-.696-.507-1.187-.507-1.21 0-1.989.465-2.454 1.463a10.662 10.662 0 0 0-.755 4.408c.108 2.737 1.266 5.313 3.26 7.252 1.995 1.939 4.603 3.024 7.343 3.057H16c2.266 0 4.435-.7 6.272-2.026a.942.942 0 0 1 .555-.18.962.962 0 0 1 .565 1.743 12.571 12.571 0 0 1-7.397 2.389" fill="#FFF2F6"/></g></svg><span>${l10n.map.encrypt_frame_btn_label}</span></a><button type="button" class="m-encrypt-close"><span class="icon-close"></span></button></div>`; |
| 77 | this.eFrame.append(...parseHTML(encryptContainer)); |
| 78 | this.eFrame.querySelector('.m-encrypt-close').addEventListener('click', this.closeFrame.bind(this, false)); |
| 79 | this.eFrame.querySelector('#editorBtn').addEventListener('click', this.onEditorButton.bind(this)); |
| 80 | const shadowRootElem = document.createElement('div'); |
| 81 | this.editElement.parentNode.insertBefore(shadowRootElem, this.editElement.nextSibling); |
| 82 | const eFrameShadow = shadowRootElem.attachShadow({mode: 'open'}); |
| 83 | const encryptContainerStyle = document.createElement('style'); |
| 84 | encryptContainerStyle.textContent = encryptContainerCSS; |
| 85 | eFrameShadow.append(encryptContainerStyle); |
| 86 | eFrameShadow.append(this.eFrame); |
| 87 | window.addEventListener('resize', this.setFrameDim); |
| 88 | // to react on position changes of edit element, e.g. click on CC or BCC in GMail |
| 89 | this.normalizeButtons(); |
| 90 | this.eFrame.classList.add('m-show'); |
| 91 | this.emailTextElement.addEventListener('keypress', this.handleKeypress); |
| 92 | } |
| 93 | |
| 94 | normalizeButtons() { |
| 95 | this.eFrame.querySelector('.m-encrypt-container').classList.remove('active'); |
no test coverage detected