Add Details field templates

src/constants.js

@@ -59,6 +59,7 @@ export const DEFAULT_SETTINGS = {
   useHotkeys: true,
   showAdvanced: false,
   defaultTheme: 'default',
+  templates: [],
 };
 
 export const DISPLAY_AD_EVERY = 10;

src/js/account/render.js

@@ -94,18 +94,22 @@ export function renderAccountActions() {
   const accountActionsHTML = `<h3>Account Actions</h3>
   <label>Change Dictionary<br><select id="accountSettingsChangeDictionary"></select></label>
   <p><a class="button" id="accountSettingsCreateNewDictionary">Create New Dictionary</a></p>
-  <h4>Request Your Data</h4>
-  <p>
-    Per your <a href="https://www.eugdpr.org/" target="_blank">GDPR</a> rights in Articles 13–15 and 20, we allow you to request any and all data we have stored about you. The only data we have about you personally is your email address and your Public Name, if you decided to set one. All other data (your Dictionary data) is visible and accessible via the Export button under your Dictionary's Settings. Send an email to help@lexicon.ga to request your information.
-  </p>
+  <details>
+    <summary><h4>Request Your Data</h4></summary>
+    <p>
+      Per your <a href="https://www.eugdpr.org/" target="_blank">GDPR</a> rights in Articles 13–15 and 20, we allow you to request any and all data we have stored about you. The only data we have about you personally is your email address and your Public Name, if you decided to set one. All other data (your Dictionary data) is visible and accessible via the Export button under your Dictionary's Settings. Send an email to help@lexicon.ga to request your information.
+    </p>
+  </details>
 
-  <h4>Delete Your Account</h4>
-  <p>
-    Per your <a href="https://www.eugdpr.org/" target="_blank">GDPR</a> rights in Articles 17, if you wish for your account to be deleted, please contact us at help@lexicon.ga, and we will delete your account and all associated dictionaries and words as quickly as possible. Note that you can delete dictionaries yourself via your Dictionary's Settings.
-  </p>
-  <p>
-    Anything that is deleted from our system is permanently and irretrievably removed from our system and cannot be restored, though search engines or internet archives may retain a cached version of your content (there is nothing we can do about this, and you will need to seek out removal of that information by directly contacting the services that are caching your data).
-  </p>
+  <details>
+    <summary><h4>Delete Your Account</h4></summary>
+    <p>
+      Per your <a href="https://www.eugdpr.org/" target="_blank">GDPR</a> rights in Articles 17, if you wish for your account to be deleted, please contact us at help@lexicon.ga, and we will delete your account and all associated dictionaries and words as quickly as possible. Note that you can delete dictionaries yourself via your Dictionary's Settings.
+    </p>
+    <p>
+      Anything that is deleted from our system is permanently and irretrievably removed from our system and cannot be restored, though search engines or internet archives may retain a cached version of your content (there is nothing we can do about this, and you will need to seek out removal of that information by directly contacting the services that are caching your data).
+    </p>
+  </details>
   `;
   accountActionsColumn.innerHTML = accountActionsHTML;
 

src/js/render/index.js

@@ -1,11 +1,13 @@
 import { renderDictionaryDetails, renderPartsOfSpeech } from './details';
 import { renderWords } from './words';
+import { renderTemplateSelectOptions } from './settings';
 
 export function renderAll() {
   renderTheme();
   renderCustomCSS();
   renderDictionaryDetails();
   renderPartsOfSpeech();
+  renderTemplateSelectOptions();
   renderWords();
 }
 

src/js/render/settings.js

@@ -0,0 +1,40 @@
+import { setupTemplateSelectOptions } from "../setupListeners/settings";
+
+export function renderTemplateSelectOptions() {
+  const { templates } = window.settings;
+
+  if (typeof templates !== 'undefined') {
+    const templatesOptionsHTML = templates.map((template, index) => {
+      return `<option value="${index.toString()}">${template.name}</options>`;
+    }).join('');
+
+    Array.from(document.getElementsByClassName('template-select')).forEach(select => {
+      select.innerHTML = '<option value="" selected="selected">None Selected</option>' + templatesOptionsHTML;
+    });
+
+    setupTemplateSelectOptions();
+  }
+}
+
+export function showTemplateEditor(show = true) {
+  document.getElementById('templateFields').style.display = show ? '' : 'none';
+  if (show) {
+    document.getElementById('templateTextarea').focus();
+  } else {
+    clearTemplateEditor();
+  }
+}
+
+export function showSelectedTemplate(template, index) {
+  const nameField = document.getElementById('templateNameField');
+  nameField.value = template.name;
+  nameField.setAttribute('template', index.toString());
+  document.getElementById('templateTextarea').value = template.template;
+  showTemplateEditor(true);
+}
+
+export function clearTemplateEditor() {
+  document.getElementById('savedDetailsTemplates').value = '';
+  document.getElementById('templateNameField').value = '';
+  document.getElementById('templateTextarea').value = '';
+}

src/js/render/words.js

@@ -13,6 +13,7 @@ import { getOpenEditForms, translateOrthography, parseReferences, getWordReferen
 import { renderAd } from '../ads';
 import { getPublicLink } from '../account/utilities';
 import { renderPartsOfSpeech } from './details';
+import { renderTemplateSelectOptions } from './settings';
 
 export function renderWord(savedWord, isPublic) {
   const word = highlightSearchTerm({
@@ -186,6 +187,11 @@ export function renderEditForm(wordId = false) {
         <a id="expandAdvancedForm_${wordId}" class="small button expand-advanced-form">${wordHasAdvancedFields || window.settings.showAdvanced ? 'Hide' : 'Show'} Advanced Fields</a>
       </label>
       <div id="advancedForm_${wordId}" class="advanced-word-form" style="display:${wordHasAdvancedFields || window.settings.showAdvanced ? 'block' : 'none'};">
+        <label>Details Field Templates
+          <select id="templateSelect_${wordId}" class="template-select">
+          </select>
+          <small>Choose one to fill the details field. (Note: Will erase anything currently there.)</small>
+        </label>
         <label>Etymology / Root Words<br>
           <input id="wordEtymology_${wordId}" maxlength="2500" placeholder="comma,separated,root,words" value="${word.hasOwnProperty('etymology') ? word.etymology : ''}">
         </label>
@@ -204,5 +210,6 @@ export function renderEditForm(wordId = false) {
     document.getElementById(wordId.toString()).innerHTML = editForm;
     setupWordEditFormButtons();
     renderPartsOfSpeech(true);
+    renderTemplateSelectOptions();
   }
 }

src/js/settings.js

@@ -4,6 +4,7 @@ import { usePhondueDigraphs } from "./KeyboardFire/phondue/ipaField";
 import { renderWords } from "./render/words";
 import { addMessage, hasToken, objectValuesAreDifferent } from "./utilities";
 import { enableHotKeys, disableHotKeys } from "./hotkeys";
+import { showTemplateEditor, renderTemplateSelectOptions, showSelectedTemplate } from "./render/settings";
 
 export function loadSettings() {
   const storedSettings = window.localStorage.getItem(SETTINGS_KEY);
@@ -18,16 +19,92 @@ export function saveSettings() {
 }
 
 export function openSettingsModal() {
-  const { useIPAPronunciationField, useHotkeys, showAdvanced, defaultTheme } = window.settings;
+  const { useIPAPronunciationField, useHotkeys, showAdvanced, defaultTheme, templates } = window.settings;
 
   document.getElementById('settingsUseIPA').checked = useIPAPronunciationField;
   document.getElementById('settingsUseHotkeys').checked = useHotkeys;
   document.getElementById('settingsShowAdvanced').checked = showAdvanced;
   document.getElementById('settingsDefaultTheme').value = defaultTheme;
 
+  renderTemplateSelectOptions();
+  showTemplateEditor(false);
+
   document.getElementById('settingsModal').style.display = '';
 }
 
+export function updateTemplateSelects() {
+  const { templates } = window.settings;
+
+  if (typeof templates !== 'undefined') {
+    const templatesOptionsHTML = templates.map((template, index) => {
+      return `<option value="${index.toString()}">${template.name}</options>`;
+    }).join('');
+    document.getElementById('savedDetailsTemplates').innerHTML = templatesOptionsHTML;
+
+    const templateSelects = document.getElementsByClassName('template-select');
+    Array.from(templateSelects).forEach(select => {
+      select.removeEventListener('click', showWordOptions);
+      select.innerHTML = templatesOptionsHTML;
+      select.addEventListener('click', showWordOptions);
+    })
+  }
+}
+
+export function createTemplate() {
+  window.settings.templates.push({ name: 'New Blank Template', template: '' });
+  const newTemplateIndex = window.settings.templates.length - 1;
+
+  renderTemplateSelectOptions();
+  document.getElementById('savedDetailsTemplates').value = (newTemplateIndex).toString();
+
+  editSavedTemplate(newTemplateIndex);
+}
+
+export function saveTemplate() {
+  const nameField = document.getElementById('templateNameField');
+  const name = nameField.value.trim();
+  const index = parseInt(nameField.getAttribute('template'));
+  const template = document.getElementById('templateTextarea').value;
+  window.settings.templates[index] = { name, template };
+
+  let storedSettings = window.localStorage.getItem(SETTINGS_KEY);
+  storedSettings = storedSettings ? JSON.parse(storedSettings) : cloneObject(DEFAULT_SETTINGS);
+  storedSettings.templates = window.settings.templates;
+  window.localStorage.setItem(SETTINGS_KEY, JSON.stringify(storedSettings));
+  addMessage('Templates Saved!');
+  
+  showTemplateEditor(false);
+
+  renderTemplateSelectOptions();
+}
+
+export function deleteSelectedTemplate() {
+  const nameField = document.getElementById('templateNameField');
+  const index = nameField.getAttribute('template');
+  const name = window.settings.templates[index].name;
+  if (confirm(`Are you sure you want to delete the "${name}" template? This cannot be undone!`)) {
+    delete window.settings.templates[index];
+    window.settings.templates = window.settings.templates.filter(template => template != null);
+
+    saveSettings();
+
+    showTemplateEditor(false);
+
+    renderTemplateSelectOptions();
+  }
+}
+
+export function editSavedTemplate(selectEvent) {
+  const { templates } = window.settings;
+  const selectedIndex = typeof selectEvent.target !== 'undefined' ? selectEvent.target.value : selectEvent;
+
+  if (selectedIndex !== '') {
+    showSelectedTemplate(templates[selectedIndex], selectedIndex);
+  } else {
+    showTemplateEditor(false);
+  }
+}
+
 export function saveSettingsModal() {
   const updatedSettings = cloneObject(window.settings);
   updatedSettings.useIPAPronunciationField = document.getElementById('settingsUseIPA').checked;

src/js/setupListeners/index.js

@@ -5,14 +5,17 @@ import { fadeOutElement } from '../utilities';
 import { setupDetailsTabs } from './details';
 import { setupWordForm, setupMobileWordFormButton } from './words';
 import { setupIPAButtons, setupHeaderButtons, setupInfoButtons } from './buttons';
+import { setupTemplateForm, setupTemplateSelectOptions } from './settings';
 
 export default function setupListeners() {
   setupAnnouncements();
   setupDetailsTabs();
+  setupTemplateForm();
   setupHeaderButtons();
   setupWordForm();
   setupMobileWordFormButton();
   setupInfoButtons();
+  setupTemplateSelectOptions();
   if (window.settings.useHotkeys) {
     enableHotKeys();
   }

src/js/setupListeners/modals.js

@@ -1,7 +1,16 @@
 import { insertAtCursor, getInputSelection, setSelectionRange } from '../StackOverflow/inputCursorManagement';
-import { openSettingsModal, saveSettingsModal, saveAndCloseSettingsModal } from '../settings';
+import {
+  openSettingsModal,
+  saveSettingsModal,
+  saveAndCloseSettingsModal,
+  createTemplate,
+  saveTemplate
+} from '../settings';
 
 export function setupSettingsModal() {
+  document.getElementById('createTemplateButton').addEventListener('click', createTemplate);
+  document.getElementById('saveTemplateButton').addEventListener('click', saveTemplate);
+
   document.getElementById('settingsButton').addEventListener('click', openSettingsModal);
   document.getElementById('settingsSave').addEventListener('click', saveSettingsModal);
   document.getElementById('settingsSaveAndClose').addEventListener('click', saveAndCloseSettingsModal);

src/js/setupListeners/settings.js

@@ -0,0 +1,31 @@
+import { createTemplate, saveTemplate, editSavedTemplate, deleteSelectedTemplate } from "../settings";
+
+export function setupTemplateForm() {
+  document.getElementById('createTemplateButton').addEventListener('click', createTemplate);
+  document.getElementById('saveTemplateButton').addEventListener('click', saveTemplate);
+  document.getElementById('deleteTemplateButton').addEventListener('click', deleteSelectedTemplate);
+  setupSavedTemplatesSelect();
+}
+
+export function setupSavedTemplatesSelect() {
+  const savedTemplatesSelect = document.getElementById('savedDetailsTemplates');
+
+  savedTemplatesSelect.removeEventListener('change', editSavedTemplate);
+  savedTemplatesSelect.addEventListener('change', editSavedTemplate);
+}
+
+export function setupTemplateSelectOptions() {
+  const fillDetailsWithTemplate = function (e) {
+    if (e.target.value !== '') {
+      const template = window.settings.templates[parseInt(e.target.value)];
+      let detailsId = 'wordDetails' + e.target.id.replace('templateSelect', '');
+      document.getElementById(detailsId).value = template.template;
+    }
+  }
+  Array.from(document.getElementsByClassName('template-select')).forEach(select => {
+    if (select.id !== 'savedDetailsTemplates') {
+      select.removeEventListener('change', fillDetailsWithTemplate);
+      select.addEventListener('change', fillDetailsWithTemplate);
+    }
+  });
+}

src/js/wordManagement.js

@@ -228,6 +228,8 @@ export function clearWordForm() {
   document.getElementById('wordPartOfSpeech').value = '';
   document.getElementById('wordDefinition').value = '';
   document.getElementById('wordDetails').value = '';
+
+  document.getElementById('templateSelect').value = '';
   document.getElementById('wordEtymology').value = '';
   document.getElementById('wordRelated').value = '';
   document.getElementById('wordPrincipalParts').value = '';

src/scss/Account/_structure.scss

@@ -15,6 +15,15 @@
   }
 }
 
+details summary {
+  cursor: pointer;
+
+  h4 {
+    display: inline-block;
+    margin: 5px 0;
+  }
+}
+
 .share-link {
   margin-left: $general-padding !important;
   line-height: 16px !important;

template-index.html

@@ -143,6 +143,11 @@
           <a id="expandAdvancedForm" class="small button expand-advanced-form">Show Advanced Fields</a>
         </label>
         <div id="advancedForm" class="advanced-word-form" style="display:none;">
+          <label>Details Field Templates
+            <select id="templateSelect" class="template-select">
+            </select>
+            <small>Choose one to fill the details field. (Note: Will erase anything currently there.)</small>
+          </label>
           <label>Etymology / Root Words<br>
             <input id="wordEtymology" maxlength="2500" placeholder="comma,separated,root,words">
           </label>
@@ -239,9 +244,33 @@
                 <option value="grape">Grape</option>
               </select>
             </label>
+
+            <h4>Templates for Details Fields</h4>
+            <p>Templates created here are saved only to your local browser.</p>
+            <label>Saved Templates <a id="createTemplateButton" class="label-button">Create New Template</a>
+              <select id="savedDetailsTemplates" class="template-select">
+              </select>
+            </label>
+            <div id="templateFields" style="display:none;">
+              <label>Template Name
+                <input id="templateNameField"><br />
+                <small>If you have chosen a template above, this will overwrite the chosen template.</small>
+              </label>
+              <label>Template<a class="label-button maximize-button">Maximize</a><br>
+                <textarea id="templateTextarea" placeholder="**Era:** 
+
+**Dialect:** 
+
+etc."></textarea>
+              </label>
+              <a id="saveTemplateButton" class="button">Save Template</a>
+              <a id="deleteTemplateButton" class="red button">Delete Template</a>
+            </div>
+          </div>
+          <div>
+            <div id="accountActions"></div>
             <div id="accountSettings"></div>
           </div>
-          <div id="accountActions"></div>
         </form>
       </section>
       <footer>