Merge pull request #143 from Anderleht/main

Add widget demo

src/widget/index.html

@@ -0,0 +1,250 @@
+<style>
+    .modal {
+        display: none;
+        position: fixed;
+        z-index: 1;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        background-color: rgba(0, 0, 0, 0.4);
+    }
+
+    .modal-content {
+        background-color: #fefefe;
+        margin: 15% auto;
+        padding: 20px;
+        border: 1px solid #888;
+        width: 80%;
+        max-width: 700px;
+    }
+
+    .modal-close {
+        color: #aaa;
+        float: right;
+        font-size: 28px;
+        font-weight: bold;
+    }
+
+    .modal-close:hover,
+    .modal-close:focus {
+        color: black;
+        text-decoration: none;
+        cursor: pointer;
+    }
+
+    .ReportTypo-header {
+        font-weight: 700;
+        font-size: 150%;
+        margin-bottom: 16px;
+        margin-bottom: 1rem;
+        width: 100%;
+        flex-shrink: 0;
+    }
+
+    .ReportTypo-label {
+        margin-bottom: 8px;
+        margin-bottom: 0.5rem;
+        display: flex;
+        flex-direction: column;
+        flex-shrink: 0;
+    }
+
+    .ReportTypo-message {
+        width: 100%;
+        padding: 5px 10px;
+        margin-bottom: 15px;
+        border: 1px solid #f3f3f3;
+        background: #f3f3f3;
+        overflow-y: auto;
+    }
+
+    .ReportTypo-comment {
+        display: block;
+        width: 100%;
+        height: 100px;
+        margin-bottom: 16px;
+        margin-bottom: 1rem;
+        border: 1px solid #ccc;
+        flex-shrink: 0;
+    }
+
+    .ReportTypo-name {
+        display: block;
+        width: 100%;
+        height: 40px;
+        margin-bottom: 16px;
+        margin-bottom: 1rem;
+        border: 1px solid #ccc;
+        flex-shrink: 0;
+        padding: 5px;
+    }
+
+    .ReportTypo-heighlight {
+        text-decoration: underline;
+        color: black;
+        font-weight: 700;
+        margin: 0 10px;
+    }
+
+    .btn-primary {
+        background-color: blue;
+        color: white;
+    }
+
+    .btn-light {
+        background-color: #f8f9fa;
+    }
+
+    .btn-primary:hover {
+        background-color: #1e7cd6;
+    }
+
+    .btn-light:hover {
+        background-color: #e2e6ea;
+    }
+</style>
+<script>
+    const state = {
+        modalShown: false,
+    };
+    const renderModal = () => {
+        const divModal = document.createElement('div');
+        divModal.classList.add('modal');
+        divModal.style.display = 'block';
+
+        const divContent = document.createElement('div');
+        divContent.classList.add('modal-content');
+        divModal.append(divContent);
+
+        const divTypoReporter = document.createElement('div');
+        divTypoReporter.classList.add('ReportTypo');
+        divContent.append(divTypoReporter);
+
+        const divHeader = document.createElement('div');
+        divHeader.classList.add('ReportTypo-header');
+        divHeader.textContent = 'Сообщите об ошибке на странице';
+
+        const divFirstLabel = document.createElement('div');
+        divFirstLabel.classList.add('ReportTypo-label');
+        divFirstLabel.textContent = 'Ошибка содержится в следующем тексте:';
+
+        const divMessage = document.createElement('div');
+        divMessage.classList.add('ReportTypo-message');
+        divMessage.id = 'selectedText';
+
+        const inputName = document.createElement('input');
+        inputName.type = 'text';
+        inputName.placeholder = 'Ваше имя';
+        inputName.classList.add('ReportTypo-name');
+
+        const textareaComment = document.createElement('textarea');
+        textareaComment.classList.add('ReportTypo-comment');
+        textareaComment.placeholder = 'Опишите ошибку';
+
+        const divSecondLabel = document.createElement('div');
+        divSecondLabel.classList.add('ReportTypo-label');
+        const strong = document.createElement('strong');
+        strong.classList.add('mb-2');
+        strong.textContent = 'Отправить сообщение об ошибке редактору сайта?';
+        divSecondLabel.append(strong);
+
+        const divButtons = document.createElement('div');
+        divButtons.style.textAlign = 'right';
+
+        const submitButton = document.createElement('button');
+        submitButton.type = 'button';
+        submitButton.classList.add('btn', 'btn-primary', 'ReportTypo-submit');
+        submitButton.textContent = 'Отправить';
+
+        const cancelButton = document.createElement('button');
+        cancelButton.type = 'button';
+        cancelButton.classList.add('btn', 'btn-light', 'ReportTypo-cancel');
+        cancelButton.textContent = 'Отмена';
+
+        divButtons.append(submitButton, cancelButton);
+        divTypoReporter.append(divHeader, divFirstLabel, divMessage, inputName, textareaComment, divSecondLabel, divButtons);
+        const body = document.querySelector('body');
+        body.append(divModal);
+
+        state.modalShown = true;
+    };
+
+    const data = {
+        pageUrl: null,
+        reporterName: null,
+        reporterComment: null,
+        textBeforeTypo: null,
+        textTypo: null,
+        textAfterTypo: null,
+    };
+
+    document.addEventListener('keydown', (event) => {
+        const selection = window.getSelection();
+        if (selection.isCollapsed) {
+            return;
+        }
+        if (event.ctrlKey && event.key === 'Enter') {
+            if (state.modalShown === false) {
+                renderModal();
+            }
+            const modal = document.querySelector('.modal');
+            const selectedText = document.getElementById('selectedText');
+            const commentField = document.querySelector('.ReportTypo-comment');
+            const submitButton = document.querySelector('.ReportTypo-submit');
+            const closeModalBtn = document.querySelector('.modal-close');
+            const cancelBtn = document.querySelector('.ReportTypo-cancel');
+            const name = document.querySelector('.ReportTypo-name');
+
+            const closeModal = () => {
+                modal.style.display = 'none';
+                commentField.value = '';
+                name.value = '';
+            }
+
+            modal.style.display = 'block';
+            const selectionText = selection.toString().trim();
+            const anchorNode = selection.anchorNode;
+            const anchorOffset = selection.anchorOffset;
+            const focusOffset = selection.focusOffset;
+            const maxLength = 50;
+            const end = Math.min(focusOffset + maxLength, anchorNode.length);
+            const start = Math.max(anchorOffset - maxLength, 0);
+            const textBeforeSelection = anchorNode.textContent.substring(start, anchorOffset);
+            const textAfterSelection = anchorNode.substringData(focusOffset, end - focusOffset);
+
+            selectedText.innerHTML = `${textBeforeSelection}<u class="ReportTypo-highlight">${selectionText}</u>${textAfterSelection}`;
+            commentField.focus();
+
+            data.textTypo = selectionText;
+            data.textBeforeTypo = textBeforeSelection;
+            data.textAfterTypo = textAfterSelection;
+
+            cancelBtn.addEventListener('click', closeModal);
+            closeModalBtn.addEventListener('click', closeModal);
+
+            submitButton.addEventListener('click', async (event) => {
+                event.preventDefault();
+                data.pageUrl = window.location.href;
+                data.reporterName = name.value;
+                data.reporterComment = commentField.value;
+
+                const response = await fetch('https://hexlet-correction.herokuapp.com/api/workspaces/typos', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Authorization': 'Basic Nzc6ZWEyNzlmNTctMWIyYy00MjA3LTk1NjctNGRiNzk2NzhhYmI5'
+                    },
+                    body: JSON.stringify(data)
+                });
+
+                if (response.ok) {
+                    closeModal();
+                } else {
+                    throw  new Error('Ошибка соединения');
+                }
+            });
+        }
+    });
+</script>