diff --git a/index.html b/index.html index 9a83569..15463fd 100644 --- a/index.html +++ b/index.html @@ -81,7 +81,7 @@ Definition* - Details*Maximize + Details*Maximize @@ -149,7 +149,7 @@ Specification - DescriptionMaximize + DescriptionMaximize @@ -201,11 +201,11 @@ Orthography - NotesMaximize + NotesMaximize Grammar - NotesMaximize + NotesMaximize diff --git a/src/js/render.js b/src/js/render.js index 2234671..5f1f511 100644 --- a/src/js/render.js +++ b/src/js/render.js @@ -3,7 +3,7 @@ import { removeTags, slugify } from '../helpers'; import { getWordsStats, wordExists } from './utilities'; import { getMatchingSearchWords, highlightSearchTerm, getSearchFilters, getSearchTerm } from './search'; import { showSection } from './displayToggles'; -import { setupSearchFilters, setupWordOptionButtons, setupPagination, setupWordOptionSelections, setupWordEditFormButtons } from './setupListeners'; +import { setupSearchFilters, setupWordOptionButtons, setupPagination, setupWordOptionSelections, setupWordEditFormButtons, setupMaximizeModal } from './setupListeners'; import { getPaginationData } from './pagination'; import { getOpenEditForms } from './wordManagement'; @@ -225,7 +225,7 @@ export function renderEditForm(wordId = false) { Definition* - Details*Maximize + Details*Maximize ${word.longDefinition} @@ -237,3 +237,25 @@ export function renderEditForm(wordId = false) { setupWordEditFormButtons(); } } + +export function renderMaximizedTextbox(maximizeButton) { + maximizeButton = typeof maximizeButton.target === 'undefined' ? maximizeButton : maximizeButton.target; + const label = maximizeButton.parentElement.innerText.replace(/(\*|Maximize)/g, '').trim(); + const textBox = maximizeButton.parentElement.querySelector('textarea'); + const modalElement = document.createElement('section'); + modalElement.classList.add('modal'); + modalElement.innerHTML = ` + + ×︎ + ${label} + + ${textBox.value} + + + + `; + + document.body.appendChild(modalElement); + + setupMaximizeModal(modalElement, textBox); +} diff --git a/src/js/setupListeners.js b/src/js/setupListeners.js index 2f5741a..c57ad6b 100644 --- a/src/js/setupListeners.js +++ b/src/js/setupListeners.js @@ -1,5 +1,5 @@ import {showSection} from './displayToggles'; -import { renderWords, renderEditForm } from './render'; +import { renderWords, renderEditForm, renderMaximizedTextbox } from './render'; import { validateWord, addWord, confirmEditWord, cancelEditWord } from './wordManagement'; import { removeTags } from '../helpers'; import { getNextId } from './utilities'; @@ -73,6 +73,8 @@ function setupEditFormInteractions() { function setupEditFormButtons() { document.getElementById('editSave').addEventListener('click', () => save()); document.getElementById('editSaveAndClose').addEventListener('click', () => saveAndClose()); + + setupMaximizeButtons(); } function setupSearchBar() { @@ -144,6 +146,8 @@ function setupWordForm() { addWord(word); } }); + + setupMaximizeButtons(); } export function setupWordOptionButtons() { @@ -197,6 +201,8 @@ export function setupWordEditFormButtons() { button.removeEventListener('click', cancelEditWord); button.addEventListener('click', cancelEditWord); }); + + setupMaximizeButtons(); } export function setupPagination() { @@ -218,3 +224,29 @@ export function setupPagination() { pageSelector.addEventListener('change', goToPage); }); } + +export function setupMaximizeButtons() { + const maximizeButtons = document.getElementsByClassName('maximize-button'); + Array.from(maximizeButtons).forEach(button => { + button.removeEventListener('click', renderMaximizedTextbox); + button.addEventListener('click', renderMaximizedTextbox); + }); +} + +export function setupMaximizeModal(modal, textBox) { + const closeElements = modal.querySelectorAll('.modal-background, .close-button, .done-button'), + maximizedTextBox = modal.querySelector('textarea'); + Array.from(closeElements).forEach(close => { + close.addEventListener('click', () => { + modal.parentElement.removeChild(modal); + }); + }); + + maximizedTextBox.addEventListener('change', () => { + textBox.value = maximizedTextBox.value; + }) + + setTimeout(() => { + modal.querySelector('textarea').focus(); + }, 1); +} diff --git a/src/styles/_elements.scss b/src/styles/_elements.scss index f5e308f..7ddfa7a 100644 --- a/src/styles/_elements.scss +++ b/src/styles/_elements.scss @@ -27,9 +27,14 @@ label { } .label-button { + @extend .button; + font-size: 80%; + font-weight: normal; float: right; cursor: pointer; + line-height: 80% !important; + padding: 3px 3px 5px; } } diff --git a/src/styles/_structure.scss b/src/styles/_structure.scss index c2d9083..0cc08b8 100644 --- a/src/styles/_structure.scss +++ b/src/styles/_structure.scss @@ -205,6 +205,16 @@ } #editDescription { width: 100%; - height: 350px; + height: 280px; + } +} + +.maximize-modal { + textarea { + width: 100%; + max-width: 100%; + min-height: 400px; + border: none; + padding: $general-padding; } }