Get maximize buttons working correctly

index.html

@@ -81,7 +81,7 @@
         <label>Definition<span class="red">*</span><br>
           <input id="wordDefinition" placeholder="Equivalent words">
         </label>
-        <label>Details<span class="red">*</span><a class="label-button">Maximize</a><br>
+        <label>Details<span class="red">*</span><a class="label-button maximize-button">Maximize</a><br>
           <textarea id="wordDetails" placeholder="Markdown formatting allowed"></textarea>
         </label>
         <div id="wordErrorMessage"></div>
@@ -149,7 +149,7 @@
         <label>Specification<br>
           <input id="editSpecification">
         </label>
-        <label>Description<a class="label-button">Maximize</a><br>
+        <label>Description<a class="label-button maximize-button">Maximize</a><br>
           <textarea id="editDescription"></textarea>
         </label>
       </section>
@@ -201,11 +201,11 @@
           <textarea id="editExceptions"></textarea>
         </label>
         <h3>Orthography</h3>
-        <label>Notes<a class="label-button">Maximize</a><br>
+        <label>Notes<a class="label-button maximize-button">Maximize</a><br>
           <textarea id="editOrthography"></textarea>
         </label>
         <h3>Grammar</h3>
-        <label>Notes<a class="label-button">Maximize</a><br>
+        <label>Notes<a class="label-button maximize-button">Maximize</a><br>
           <textarea id="editGrammar"></textarea>
         </label>
       </section>

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) {
       <label>Definition<span class="red">*</span><br>
         <input id="wordDefinition_${wordId}" value="${word.simpleDefinition}" placeholder="Equivalent words">
       </label>
-      <label>Details<span class="red">*</span><a class="label-button">Maximize</a><br>
+      <label>Details<span class="red">*</span><a class="label-button maximize-button">Maximize</a><br>
         <textarea id="wordDetails_${wordId}" placeholder="Markdown formatting allowed">${word.longDefinition}</textarea>
       </label>
       <div id="wordErrorMessage_${wordId}"></div>
@@ -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 = `<section class="modal maximize-modal"><div class="modal-background"></div>
+    <div class="modal-content">
+      <a class="close-button">&times;&#xFE0E;</a>
+      <header><h3>${label}</h3></header>
+      <section>
+        <textarea>${textBox.value}</textarea>
+      </section>
+      <footer><a class="button done-button">Done</a></footer>
+    </div>
+  </section>`;
+
+  document.body.appendChild(modalElement);
+  
+  setupMaximizeModal(modalElement, textBox);
+}

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);
+}

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;
   }
 }
 

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;
   }
 }