Alamantus
/
Lexiconga
mirror of https://github.com/Alamantus/Lexiconga.git
1
0
Fork 0
Code Issues Releases Activity

Add new features to offline and view

This commit is contained in:
Robbie Antenesse 2019-07-10 15:11:46 -06:00 committed by Robbie Antenesse
parent 9ca6ef15d7
commit 91a5967727
4 changed files with 52 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
offline.html
View File

@ -13,7 +13,7 @@
<meta property="og:title" content="Lexiconga (OFFLINE)"> <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:description" content="The quick and easy (offline) dictionary builder for constructed languages.">
<meta property="og:image" content="processedImages/logo.png"> <meta property="og:image" content="processedImages/logo.png">
<meta name="twitter:card" content="summary"> <meta name="twitter:card" content="summary">
<meta name="twitter:image:alt" content="Lexiconga logo"> <meta name="twitter:image:alt" content="Lexiconga logo">
@ -26,13 +26,13 @@
<meta name="apple-mobile-web-app-title" content="Lexiconga"> <meta name="apple-mobile-web-app-title" content="Lexiconga">
<link rel="apple-touch-icon" href="processedImages/icon-152.png"> <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>window.isOffline = true;</script>
<script src="src/index.js"></script> <script src="src/index.js"></script>
</head> </head>
<body id="defaultTheme"> <body id="defaultTheme">
<header id="top"> <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 transform="translate(-107.53 -155.84)">
<g id="lexi"> <g id="lexi">
<path d="m144.03 159.39-11.339 22.409h-21.62l11.339-22.409z" /> <path d="m144.03 159.39-11.339 22.409h-21.62l11.339-22.409z" />
@ -81,6 +81,9 @@
<label>Exact Words <label>Exact Words
<input type="checkbox" id="searchExactWords"> <input type="checkbox" id="searchExactWords">
</label> </label>
<label>Translations
<input type="checkbox" id="searchOrthography">
</label>
</div> </div>
</div> </div>
<div class="split"> <div class="split">
@ -241,9 +244,11 @@
<section id="editDescriptionTab"> <section id="editDescriptionTab">
<label>Name<br> <label>Name<br>
<input id="editName" maxlength="50"> <input id="editName" maxlength="50">
<small>Won't update if left blank.</small>
</label> </label>
<label>Specification<br> <label>Specification<br>
<input id="editSpecification" maxlength="50"> <input id="editSpecification" maxlength="50">
<small>Won't update if left blank.</small>
</label> </label>
<label>Description<a class="label-button maximize-button">Maximize</a><br> <label>Description<a class="label-button maximize-button">Maximize</a><br>
<textarea id="editDescription"></textarea> <textarea id="editDescription"></textarea>
@ -254,8 +259,12 @@
<label>Parts of Speech <small>(Comma Separated List)</small><br> <label>Parts of Speech <small>(Comma Separated List)</small><br>
<input id="editPartsOfSpeech" maxlength="2500" placeholder="Noun,Adjective,Verb"> <input id="editPartsOfSpeech" maxlength="2500" placeholder="Noun,Adjective,Verb">
</label> </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> </label>
<h3>Phonology</h3> <h3>Phonology</h3>
<div class="split three"> <div class="split three">
@ -284,6 +293,9 @@
</label> </label>
</div> </div>
</div> </div>
<label>Notes <small>(Markdown-enabled)</small><br>
<textarea id="editPhonologyNotes"></textarea>
</label>
<h3>Phonotactics</h3> <h3>Phonotactics</h3>
<div class="split three"> <div class="split three">
<div> <div>
@ -309,6 +321,13 @@
<textarea id="editPhonotacticsNotes"></textarea> <textarea id="editPhonotacticsNotes"></textarea>
</label> </label>
<h3>Orthography</h3> <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> <label>Notes <small>(Markdown-enabled)</small><a class="label-button maximize-button">Maximize</a><br>
<textarea id="editOrthography"></textarea> <textarea id="editOrthography"></textarea>
</label> </label>
@ -345,6 +364,9 @@
<option value="grape">Grape</option> <option value="grape">Grape</option>
</select> </select>
</label> </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>
<section id="editActionsTab" style="display:none;"> <section id="editActionsTab" style="display:none;">

21
src/js/view/render.js
View File

@ -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 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 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 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> const phonologyHTML = `<h3>Phonology</h3>
<div class="split two"> <div class="split two">
<div>${consonantHTML}</div> <div>${consonantHTML}</div>
<div>${vowelHTML}</div> <div>${vowelHTML}</div>
</div> </div>
${blendHTML}`; ${blendHTML}
${phonologyNotesHTML}`;
const { onset, nucleus, coda } = phonotactics; const { onset, nucleus, coda } = phonotactics;
const onsetHTML = `<p><strong>Onset</strong><br>${onset.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</p>`; 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 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 const phonotacticsHTML = onset.length + nucleus.length + coda.length + phonotacticsNotesHTML.length > 0
? `<h3>Phonotactics</h3> ? `<h3>Phonotactics</h3>
<div class="split three"> ${onset.length > 0 || nucleus.length > 0 || coda.length > 0
? `<div class="split three">
<div>${onsetHTML}</div> <div>${onsetHTML}</div>
<div>${nucleusHTML}</div> <div>${nucleusHTML}</div>
<div>${codaHTML}</div> <div>${codaHTML}</div>
</div> </div>` : ''}
${phonotacticsNotesHTML}` ${phonotacticsNotesHTML}`
: ''; : '';
const { translations } = orthography; 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()); translation = translation.split('=').map(value => value.trim());
if (translation.length > 1 && translation[0] !== '' && translation[1] !== '') { 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 `<span><span class="tag">${translation[0]}</span><span class="tag orthographic-translation">${translation[1]}</span></span>`;
} }
return false; 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 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> ? `<h3>Orthography</h3>
${translations.length > 0 ? translationsHTML : ''} ${translationsHTML}
${orthographyNotesHTML}` ${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; detailsPanel.innerHTML = generalHTML + phonologyHTML + phonotacticsHTML + orthographyHTML + grammarHTML;
} }

11
src/js/view/search.js
View File

@ -22,6 +22,7 @@ export function getSearchFilters() {
caseSensitive: document.getElementById('searchCaseSensitive').checked, caseSensitive: document.getElementById('searchCaseSensitive').checked,
ignoreDiacritics: document.getElementById('searchIgnoreDiacritics').checked, ignoreDiacritics: document.getElementById('searchIgnoreDiacritics').checked,
exact: document.getElementById('searchExactWords').checked, exact: document.getElementById('searchExactWords').checked,
orthography: document.getElementById('searchOrthography').checked,
name: document.getElementById('searchIncludeName').checked, name: document.getElementById('searchIncludeName').checked,
definition: document.getElementById('searchIncludeDefinition').checked, definition: document.getElementById('searchIncludeDefinition').checked,
details: document.getElementById('searchIncludeDetails').checked, details: document.getElementById('searchIncludeDetails').checked,
@ -53,11 +54,13 @@ export function getMatchingSearchWords() {
}).filter(word => { }).filter(word => {
searchTerm = filters.ignoreDiacritics ? removeDiacritics(searchTerm) : searchTerm; searchTerm = filters.ignoreDiacritics ? removeDiacritics(searchTerm) : searchTerm;
searchTerm = filters.caseSensitive ? searchTerm : searchTerm.toLowerCase(); 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(); name = filters.caseSensitive ? name : name.toLowerCase();
let definition = filters.ignoreDiacritics ? removeDiacritics(word.definition) : word.definition; let definition = filters.ignoreDiacritics ? removeDiacritics(word.definition) : word.definition;
definition = filters.caseSensitive ? definition : definition.toLowerCase(); 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(); details = filters.caseSensitive ? details : details.toLowerCase();
const isInName = filters.name && (filters.exact const isInName = filters.name && (filters.exact
@ -80,6 +83,10 @@ export function highlightSearchTerm(word) {
if (searchTerm) { if (searchTerm) {
const filters = getSearchFilters(); const filters = getSearchFilters();
const markedUpWord = cloneObject(word); const markedUpWord = cloneObject(word);
if (filters.orthography) {
markedUpWord.name = translateOrthography(markedUpWord.name);
markedUpWord.details = parseReferences(markedUpWord.details);
}
if (filters.ignoreDiacritics) { if (filters.ignoreDiacritics) {
const searchTermLength = searchTerm.length; const searchTermLength = searchTerm.length;
searchTerm = removeDiacritics(searchTerm); searchTerm = removeDiacritics(searchTerm);

3
template-view.html
View File

@ -81,6 +81,9 @@
<label>Exact Words <label>Exact Words
<input type="checkbox" id="searchExactWords"> <input type="checkbox" id="searchExactWords">
</label> </label>
<label>Translations
<input type="checkbox" id="searchOrthography">
</label>
</div> </div>
</div> </div>
<div class="split"> <div class="split">