Add new features to offline and view

offline.html

@@ -26,7 +26,7 @@
   <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>
@@ -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>
+        <label>Alphabetical Order <small>(Space Separated List)</small><br>
-          <input id="editAlphabeticalOrder" disabled value="English Alphabet">
+          <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;">

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

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

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">