Add new features to offline and view

2019-07-10 15:11:46 -06:00 · 2019-07-10 15:11:46 -06:00 · d0a4036f7b
parent 8fb03834c8
commit d0a4036f7b
4 changed files with 52 additions and 15 deletions
--- a/offline.html
+++ b/offline.html
@ -13,7 +13,7 @@
  <meta property="og:title" content="Lexiconga (OFFLINE)">
  <meta property="og:description" content="The quick and easy (offline) dictionary builder for constructed languages.">
  <meta property="og:image" content="processedImages/logo.png">
-  
+
  <meta name="twitter:card" content="summary">
  <meta name="twitter:image:alt" content="Lexiconga logo">

@ -26,13 +26,13 @@
  <meta name="apple-mobile-web-app-title" content="Lexiconga">
  <link rel="apple-touch-icon" href="processedImages/icon-152.png">

-  <link rel="stylesheet" href="src/main.scss" />
+  <link rel="stylesheet" href="src/main.scss">
  <script>window.isOffline = true;</script>
  <script src="src/index.js"></script>
 </head>
 <body id="defaultTheme">
  <header id="top">
-    <a href="/" title="Lexiconga"><svg id="title" alt="Lexiconga Logo"viewBox="0 0 249.78 55.087">
+    <a href="/" title="Lexiconga"><svg id="title" alt="Lexiconga Logo" viewBox="0 0 249.78 55.087">
      <g transform="translate(-107.53 -155.84)">
        <g id="lexi">
          <path d="m144.03 159.39-11.339 22.409h-21.62l11.339-22.409z" />
@ -81,6 +81,9 @@
              <label>Exact Words
                <input type="checkbox" id="searchExactWords">
              </label>
+              <label>Translations
+                <input type="checkbox" id="searchOrthography">
+              </label>
            </div>
          </div>
          <div class="split">
@ -241,9 +244,11 @@
      <section id="editDescriptionTab">
        <label>Name<br>
          <input id="editName" maxlength="50">
+          <small>Won't update if left blank.</small>
        </label>
        <label>Specification<br>
          <input id="editSpecification" maxlength="50">
+          <small>Won't update if left blank.</small>
        </label>
        <label>Description<a class="label-button maximize-button">Maximize</a><br>
          <textarea id="editDescription"></textarea>
@ -254,8 +259,12 @@
        <label>Parts of Speech <small>(Comma Separated List)</small><br>
          <input id="editPartsOfSpeech" maxlength="2500" placeholder="Noun,Adjective,Verb">
        </label>
-        <label>Alphabetical Order <small>(Comma Separated List. Include every letter!)</small><br>
-          <input id="editAlphabeticalOrder" disabled value="English Alphabet">
+        <label>Alphabetical Order <small>(Space Separated List)</small><br>
+          <input id="editAlphabeticalOrder" placeholder="a A b B c C d D ...">
+          <a class="label-help-button" onclick="alert('Include every letter and case! Any letters used in your words that are not specified will be sorted in the default order below your alphabetically custom-sorted words.\n\nLexiconga can only sort by single characters and will sort by the words AS ENTERED, not using orthographic translation.')">
+            Field Info
+          </a>&nbsp;
+          <small>Leave blank for default (case-insensitive ASCII/Unicode sorting)</small>
        </label>
        <h3>Phonology</h3>
        <div class="split three">
@ -284,6 +293,9 @@
            </label>
          </div>
        </div>
+        <label>Notes <small>(Markdown-enabled)</small><br>
+          <textarea id="editPhonologyNotes"></textarea>
+        </label>
        <h3>Phonotactics</h3>
        <div class="split three">
          <div>
@ -309,6 +321,13 @@
          <textarea id="editPhonotacticsNotes"></textarea>
        </label>
        <h3>Orthography</h3>
+        <label>Translations <small>(One translation per line)</small><a class="label-button maximize-button">Maximize</a><br>
+          <textarea id="editTranslations" placeholder="ai=I
+AA=ay
+ou=ow"></textarea>
+          <small>Use format: <code>sequence=replacement</code></small><br>
+          <small>Translations occur in the order specified here, so try to avoid double translations!</small>
+        </label>
        <label>Notes <small>(Markdown-enabled)</small><a class="label-button maximize-button">Maximize</a><br>
          <textarea id="editOrthography"></textarea>
        </label>
@ -345,6 +364,9 @@
            <option value="grape">Grape</option>
          </select>
        </label>
+        <label>Custom Styling <small>(CSS Only)</small><a class="label-button maximize-button">Maximize</a><br>
+          <textarea id="editCustomCSS" placeholder=".orthographic-translation {font-family: serif;}"></textarea>
+        </label>
      </section>

      <section id="editActionsTab" style="display:none;">
--- a/src/js/view/render.js
+++ b/src/js/view/render.js
@ -52,12 +52,14 @@ export function renderDetails() {
  const consonantHTML = `<p><strong>Consonants</strong><br>${consonants.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</p>`;
  const vowelHTML = `<p><strong>Vowels</strong><br>${vowels.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</p>`;
  const blendHTML = blends.length > 0 ? `<p><strong>Polyphthongs&nbsp;/&nbsp;Blends</strong><br>${blends.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</p>` : '';
+  const phonologyNotesHTML = phonology.notes.trim().length > 0 ? '<p><strong>Notes</strong></p><div>' + md(removeTags(phonology.notes)) + '</div>' : '';
  const phonologyHTML = `<h3>Phonology</h3>
  <div class="split two">
    <div>${consonantHTML}</div>
    <div>${vowelHTML}</div>
  </div>
-  ${blendHTML}`;
+  ${blendHTML}
+  ${phonologyNotesHTML}`;

  const { onset, nucleus, coda } = phonotactics;
  const onsetHTML = `<p><strong>Onset</strong><br>${onset.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</p>`;
@ -66,29 +68,32 @@ export function renderDetails() {
  const phonotacticsNotesHTML = phonotactics.notes.trim().length > 0 ? '<p><strong>Notes</strong></p><div>' + md(removeTags(phonotactics.notes)) + '</div>' : '';
  const phonotacticsHTML = onset.length + nucleus.length + coda.length + phonotacticsNotesHTML.length > 0
    ? `<h3>Phonotactics</h3>
-  <div class="split three">
+  ${onset.length > 0 || nucleus.length > 0 || coda.length > 0
+    ? `<div class="split three">
    <div>${onsetHTML}</div>
    <div>${nucleusHTML}</div>
    <div>${codaHTML}</div>
-  </div>
+  </div>` : ''}
  ${phonotacticsNotesHTML}`
    : '';

  const { translations } = orthography;
-  const translationsHTML = `<p><strong>Translations</strong><br>${translations.map(translation => {
+  const translationsHTML = translations.length > 0 ? `<p><strong>Translations</strong><br>${translations.map(translation => {
    translation = translation.split('=').map(value => value.trim());
    if (translation.length > 1 && translation[0] !== '' && translation[1] !== '') {
      return `<span><span class="tag">${translation[0]}</span><span class="tag orthographic-translation">${translation[1]}</span></span>`;
    }
    return false;
-  }).filter(html => html !== false).join(' ')}</p>`;
+  }).filter(html => html !== false).join(' ')}</p>` : '';
  const orthographyNotesHTML = orthography.notes.trim().length > 0 ? '<p><strong>Notes</strong><br>' + md(removeTags(orthography.notes)) + '</div>' : '';
-  const orthographyHTML = translations.length > 0 && orthographyNotesHTML.length > 0
+  const orthographyHTML = translations.length + orthographyNotesHTML.length > 0
    ? `<h3>Orthography</h3>
-  ${translations.length > 0 ? translationsHTML : ''}
+  ${translationsHTML}
  ${orthographyNotesHTML}`
    : '';
-  const grammarHTML = '<h3>Grammar</h3><div>' + md(removeTags(grammar.notes)) + '</div>';
+  const grammarHTML = grammar.notes.trim().length > 0 ? '<h3>Grammar</h3><div>'
+    + (grammar.notes.trim().length > 0 ? md(removeTags(grammar.notes)) : '')
+  + '</div>' : '';

  detailsPanel.innerHTML = generalHTML + phonologyHTML + phonotacticsHTML + orthographyHTML + grammarHTML;
 }
--- a/src/js/view/search.js
+++ b/src/js/view/search.js
@ -22,6 +22,7 @@ export function getSearchFilters() {
    caseSensitive: document.getElementById('searchCaseSensitive').checked,
    ignoreDiacritics: document.getElementById('searchIgnoreDiacritics').checked,
    exact: document.getElementById('searchExactWords').checked,
+    orthography: document.getElementById('searchOrthography').checked,
    name: document.getElementById('searchIncludeName').checked,
    definition: document.getElementById('searchIncludeDefinition').checked,
    details: document.getElementById('searchIncludeDetails').checked,
@ -53,11 +54,13 @@ export function getMatchingSearchWords() {
    }).filter(word => {
      searchTerm = filters.ignoreDiacritics ? removeDiacritics(searchTerm) : searchTerm;
      searchTerm = filters.caseSensitive ? searchTerm : searchTerm.toLowerCase();
-      let name = filters.ignoreDiacritics ? removeDiacritics(word.name) : word.name;
+      let name = filters.orthography ? translateOrthography(word.name) : word.name;
+      name = filters.ignoreDiacritics ? removeDiacritics(name) : name;
      name = filters.caseSensitive ? name : name.toLowerCase();
      let definition = filters.ignoreDiacritics ? removeDiacritics(word.definition) : word.definition;
      definition = filters.caseSensitive ? definition : definition.toLowerCase();
-      let details = filters.ignoreDiacritics ? removeDiacritics(word.details) : word.details;
+      let details = filters.orthography ? parseReferences(word.details) : word.details;
+      details = filters.ignoreDiacritics ? removeDiacritics(details) : details;
      details = filters.caseSensitive ? details : details.toLowerCase();

      const isInName = filters.name && (filters.exact
@ -80,6 +83,10 @@ export function highlightSearchTerm(word) {
  if (searchTerm) {
    const filters = getSearchFilters();
    const markedUpWord = cloneObject(word);
+    if (filters.orthography) {
+      markedUpWord.name = translateOrthography(markedUpWord.name);
+      markedUpWord.details = parseReferences(markedUpWord.details);
+    }
    if (filters.ignoreDiacritics) {
      const searchTermLength = searchTerm.length;
      searchTerm = removeDiacritics(searchTerm);
--- a/template-view.html
+++ b/template-view.html
@ -81,6 +81,9 @@
              <label>Exact Words
                <input type="checkbox" id="searchExactWords">
              </label>
+              <label>Translations
+                <input type="checkbox" id="searchOrthography">
+              </label>
            </div>
          </div>
          <div class="split">