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

Added Markdown, Description, and About 

Markdown parser is from https://github.com/evilstreak/markdown-js
This commit is contained in:
Robbie Antenesse 2015-10-28 15:53:59 -06:00
parent f81aed185a
commit 8abef4c95d
4 changed files with 170 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
css/styles.css
View File

@ -14,9 +14,12 @@ footer {
padding: 3px; padding: 3px;
} }
#leftColumn {
float: left;
}
form { form {
margin: 15px; margin: 15px;
float: left;
padding: 15px; padding: 15px;
} }
@ -51,6 +54,10 @@ input, textarea {
font-weight: bold; font-weight: bold;
} }
#aboutPanel {
padding: 10px;
}
#dictionaryContainer { #dictionaryContainer {
margin: 15px; margin: 15px;
width: 50%; width: 50%;
@ -58,6 +65,28 @@ input, textarea {
float: left; float: left;
} }
#dictionaryName {
margin: 0 0 5px;
}
.clickable {
font-weight: bold;
cursor: pointer;
padding: 4px;
background: #dddddd;
border-radius: 5px;
}
#descriptionToggle {
font-weight: bold;
font-size: 12px;
cursor: pointer;
}
#wordFilter {
margin: 10px 0;
}
entry { entry {
display: block; display: block;
width: 50%; width: 50%;
@ -85,6 +114,41 @@ longdefinition {
margin-left: 20px; margin-left: 20px;
} }
longDefinition h1, longDefinition h2, longDefinition h3, longDefinition h4, longDefinition h5, longDefinition h6 {
margin: 5px 0 8px;
font-weight: bold;
}
longDefinition h1 {
font-size: 22px;
}
longDefinition h2 {
font-size: 20px;
}
longDefinition h3 {
font-size: 20px;
font-weight: normal;
}
longDefinition h4 {
font-size: 18px;
}
longDefinition h5 {
font-size: 18px;
font-weight: normal;
}
longDefinition h6 {
font-size: 17px;
}
longDefinition p {
margin: 3px 0 8px;
}
.management { .management {
display: block; display: block;
right: 5px; right: 5px;
@ -97,8 +161,6 @@ longdefinition {
.editButton, .deleteButton, .deleteConfirmButton, .deleteCancelButton { .editButton, .deleteButton, .deleteConfirmButton, .deleteCancelButton {
display: inline; display: inline;
font-size: 10px; font-size: 10px;
font-weight: bold;
cursor: pointer;
margin: 5px; margin: 5px;
} }
@ -107,7 +169,7 @@ longdefinition {
font-size: 10px; font-size: 10px;
} }
#settingsBackgroundFade { #settingsBackgroundFade, #aboutBackgroundFade {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@ -117,14 +179,14 @@ longdefinition {
opacity: 0.75; opacity: 0.75;
} }
#settingsOptions { #settingsOptions, #aboutPage {
position: fixed; position: fixed;
top: 10%; top: 10%;
left: 10%; left: 10%;
right: 10%; right: 10%;
bottom: 10%; bottom: 10%;
min-width: 350px; min-width: 300px;
min-height: 500px; min-height: 300px;
padding: 5px 5% 5%; padding: 5px 5% 5%;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
@ -133,11 +195,10 @@ longdefinition {
border: 1px solid black; border: 1px solid black;
} }
#settingsButton, #settingsScreenCloseButton, #settingsSaveButtons button { #settingsButton, #settingsScreenCloseButton,
#settingsSaveButtons button, #aboutScreenCloseButton {
float: right; float: right;
cursor: pointer;
font-size: 12px; font-size: 12px;
font-weight: bold;
} }
#settingsForm { #settingsForm {

72
index.html
View File

@ -5,9 +5,14 @@
<title>Dictionary Builder</title> <title>Dictionary Builder</title>
<link href="css/styles.css" rel="stylesheet" /> <link href="css/styles.css" rel="stylesheet" />
<!-- Markdown Parser -->
<script src="js/markdown-js/markdown.min.js"></script>
<script src="js/dictionaryBuilder.js"></script> <script src="js/dictionaryBuilder.js"></script>
</head> </head>
<body> <body>
<div id="leftColumn">
<form id="wordEntryForm"> <form id="wordEntryForm">
<label><span>Word</span> <label><span>Word</span>
<input type="text" id="word" /> <input type="text" id="word" />
@ -37,16 +42,24 @@
<button type="button" onclick="AddWord(); return false;">Add Word</button> <button type="button" onclick="AddWord(); return false;">Add Word</button>
</div> </div>
<div id="editWordButtonArea" style="display: none;"> <div id="editWordButtonArea" style="display: none;">
<button type="button" onclick="AddWord(); return false;">Edit Word</button> <button type="button" onclick="ClearForm(); return false;">Cancel</button> <button type="button" onclick="AddWord(); return false;">Edit Word</button> <button type="button" onclick="ClearForm(); window.scroll(savedScroll.x, savedScroll.y); return false;">Cancel</button>
</div> </div>
<div id="updateConflict" style="display: none;"></div> <div id="updateConflict" style="display: none;"></div>
</form> </form>
<div id="aboutPanel">
<span id="aboutButton" class="clickable" onclick="ShowAbout()">About Dictionary Builder</span>
</div>
</div>
<div id="dictionaryContainer"> <div id="dictionaryContainer">
<span id="settingsButton" onclick="ShowSettings()">Settings</span> <span id="settingsButton" class="clickable" onclick="ShowSettings()">Settings</span>
<h2 id="dictionaryName"></h2> <h2 id="dictionaryName"></h2>
<label><b>Filter </b><select id="wordFilter" onchange="UpdateFilter()"> <span id="descriptionToggle" onclick="ToggleDescription();">Show Description</span>
<div id="dictionaryDescription" style="display:none;"></div>
<label><b>Filter Words </b><select id="wordFilter" onchange="UpdateFilter()">
<option value="">All</option> <option value="">All</option>
</select> </select>
</label> </label>
@ -55,9 +68,9 @@
</div> </div>
<div id="settingsScreen" style="display:none;"> <div id="settingsScreen" style="display:none;">
<div id="settingsBackgroundFade"></div> <div id="settingsBackgroundFade" onclick="HideSettings()"></div>
<div id="settingsOptions"> <div id="settingsOptions">
<span id="settingsScreenCloseButton" onclick="HideSettings()">Close</span> <span id="settingsScreenCloseButton" class="clickable" onclick="HideSettings()">Close</span>
<h2>Dictionary Settings</h2> <h2>Dictionary Settings</h2>
<form id="settingsForm"> <form id="settingsForm">
<div class="settingsCol"> <div class="settingsCol">
@ -95,6 +108,55 @@
</div> </div>
</div> </div>
<div id="aboutScreen" style="display:none;">
<div id="aboutBackgroundFade" onclick="HideAbout()"></div>
<div id="aboutPage">
<span id="aboutScreenCloseButton" class="clickable" onclick="HideAbout()">Close</span>
<h2>What is Dictionary Builder?</h2>
<p>Dictionary Builder is a tool intended to help build constructed language dictionaries.</p>
<p>
You can enter words and definitions, and they will appear nicely formatted and in alphabetical order under your dictionary's title, where you can also sort them by part of speech. If the default parts of speech are not adequate for your conlang, you can change them to whatever parts of speech you might need. You can even enter a description or full set of language rules that you can toggle on and off below the dictionary's title!
</p>
<p>
It accepts Unicode characters so you can utilize whatever typable characters you might need and Markdown for formatting long text entries, and if you want to share or even just make a backup of your dictionary, you can export it to a single convenient file that can be easily re-imported. It also saves your dictionary to your browser's localStorage every time you make a change, which means as long as you use the same browser and don't deliberately delete it, your dictionary will always be there when you come back.
</p>
<h2>How do I use Dictionary Builder?</h2>
<h3>Getting Started</h3>
<p>
When you have a brand new, empty dictionary, the first thing you'll probably want to do is change the title to whatever your conlang is called and add at least a little description of what your language is like or how to use it. You can do this by clicking on the Settings button, which will open up the settings screen. Here, you will find all the fields you need to update your dictionary's Name and Description/Rules. The Description/Rules text area uses <a href="https://help.github.com/articles/markdown-basics/" target="_blank">Markdown</a> to format any text you include, so brush up on how to do basic things in Markdown before you get started (NOTE: a line break is done by adding 2 or more spaces to the end of the line and then going to the next line!). Update these fields to what you want them to say and click the "Save" button to keep the Settings menu open, or the "Save and Close" button to close the menu and start adding words!
</p>
<p>
To add words, just use the form on the top left side of the window. Hopefully the form is self-explanatory, but if not, here's a little guide:<br>
Enter the word in your language in the "Word" field, an equivalent word or short definition in the "Equivalent Word" field, a longer definition or fuller explanation of the word using Markdown in the "Explanation" text area, choose a part of speech, and click "Add Word". Your word will instantly appear in your dictionary under the dictionary's name! You can add as many words as you want this way.<br>
The only things to remember while adding new words is that the minimum information that you can enter is the Word itself and either the Equivalent Word OR the Explanation. You can have both of these or just one, but you need at least one. If you do not want to use the Parts of Speech, you do not need to, though you will miss out on the handy Filter feature of the dictionary.
</p>
<p>
And that's all you need to get started! Everything else should be pretty self-explanatory, but a full explanation of Dictionary Builder and all of its functions continues below.
</p>
<h3>The Settings Menu</h3>
<p>
While you were in the settings menu, you probably noticed some other things you can set there, like "Parts of Speech", "Allow Duplicates", "Case-Sensitive", and "Dictionary is complete", not to mention the export, import, and erase buttons.
</p>
<p>
The <b>Parts of Speech</b> field is where you can add custom parts of speech for your language if you need to! Just list your parts of speech in a comma-separated list the same way as the default parts of speech are listed, and your options in the word form and filters will update as soon as you save!<br>
Please note that if you have other parts of speech added to existing words, those words will not update and will keep the old parts of speech. You will need to manually update any words with incorrect parts of speech after the fact, which is why I recommend you update the available parts of speech as one of the first things you do if you need to change them at all!
</p>
<p>
The <b>Allow Duplicates</b> checkbox allows you to control whether or not Dictionary Builder will allow you to add the same word multiple times. If you leave Allow Duplicates unchecked and you try to add a word that is already in the dictionary, Dictionary Builder will tell you that the word already exists and will ask if you want to update it with the newly entered word. <em>Note: Allow Duplicates is not yet in the Settings menu!</em>
</p>
<p>
The <b>Case-Sensitive</b> checkbox allows you to control Dictionary Builder's duplicate detection. If you leave Case-Sensitive unchecked, you will be alerted when you are trying to add a word with the same letters to your dictionary a second time. For example, "dog" is identified as the same word as "DOG" or "doG". The dictionary will keep whatever capitalization you save but it will identify words with the same spelling as duplicates. If Case-Sensitive is checked, then it will not identify "dog" and "DOG" as the same word.<br>
If Allow Duplicates is checked, this checkbox becomes unavailable. <em>Note: Case-Sensitive is not yet in the Settings menu!</em>
</p>
<p>
The "<b>Dictionary is complete</b>" checkbox will make the word add/edit form go away so you can view or share it more easily/safely. Plus when you export your dictionary, all of the options to change anything about your dictionary will be excluded when it is re-imported! Your dictionary will become static, and will not be able to be changed or updated without a password. <em>Note: At the moment, ONLY the word form goes away. Nothing else in this paragraph is implemented yet!</em>
</p>
</div>
</div>
<footer>Version <script>document.write(currentVersion);</script>. Dictionary Builder only guaranteed to work with most up-to-date HTML5 browsers.</footer> <footer>Version <script>document.write(currentVersion);</script>. Dictionary Builder only guaranteed to work with most up-to-date HTML5 browsers.</footer>
</body> </body>
</html> </html>

36
js/dictionaryBuilder.js
View File

@ -199,7 +199,10 @@ function ShowDictionary(filter) {
var dictionaryNameArea = document.getElementById("dictionaryName"); var dictionaryNameArea = document.getElementById("dictionaryName");
dictionaryNameArea.innerHTML = htmlEntitiesParse(currentDictionary.name) + " Dictionary"; dictionaryNameArea.innerHTML = htmlEntitiesParse(currentDictionary.name) + " Dictionary";
var dictionaryDescriptionArea = document.getElementById("dictionaryDescription");
dictionaryDescriptionArea.innerHTML = markdown.toHTML(htmlEntitiesParse(currentDictionary.description));
var dictionaryArea = document.getElementById("theDictionary"); var dictionaryArea = document.getElementById("theDictionary");
var dictionaryText = ""; var dictionaryText = "";
@ -216,6 +219,19 @@ function ShowDictionary(filter) {
dictionaryArea.innerHTML = dictionaryText; dictionaryArea.innerHTML = dictionaryText;
} }
function ToggleDescription() {
var descriptionToggle = document.getElementById("descriptionToggle");
var descriptionArea = document.getElementById("dictionaryDescription");
if (descriptionArea.style.display == "none") {
descriptionArea.style.display = "block";
descriptionToggle.innerHTML = "Hide Description";
} else {
descriptionArea.style.display = "none";
descriptionToggle.innerHTML = "Show Description";
}
}
function DictionaryEntry(itemIndex) { function DictionaryEntry(itemIndex) {
var entryText = "<entry>"; var entryText = "<entry>";
@ -232,7 +248,7 @@ function DictionaryEntry(itemIndex) {
} }
if (currentDictionary.words[itemIndex].longDefinition != "") { if (currentDictionary.words[itemIndex].longDefinition != "") {
entryText += "<longdefinition>" + currentDictionary.words[itemIndex].longDefinition + "</longdefinition>"; entryText += "<longdefinition>" + markdown.toHTML(htmlEntitiesParse(currentDictionary.words[itemIndex].longDefinition)) + "</longdefinition>";
} }
entryText += ManagementArea(itemIndex); entryText += ManagementArea(itemIndex);
@ -245,12 +261,12 @@ function DictionaryEntry(itemIndex) {
function ManagementArea(itemIndex) { function ManagementArea(itemIndex) {
var managementHTML = "<div class='management'>"; var managementHTML = "<div class='management'>";
managementHTML += "<span class='editButton' onclick='EditWord(" + itemIndex + ")'>Edit</span>"; managementHTML += "<span class='clickable editButton' onclick='EditWord(" + itemIndex + ")'>Edit</span>";
managementHTML += "<span class='deleteButton' onclick='document.getElementById(\"delete" + itemIndex + "Confirm\").style.display = \"block\";'>Delete</span>"; managementHTML += "<span class='clickable deleteButton' onclick='document.getElementById(\"delete" + itemIndex + "Confirm\").style.display = \"block\";'>Delete</span>";
managementHTML += "<div class='deleteConfirm' id='delete" + itemIndex + "Confirm' style='display:none;'>Are you sure you want to delete this entry?<br>"; managementHTML += "<div class='deleteConfirm' id='delete" + itemIndex + "Confirm' style='display:none;'>Are you sure you want to delete this entry?<br>";
managementHTML += "<span class='deleteCancelButton' onclick='document.getElementById(\"delete" + itemIndex + "Confirm\").style.display = \"none\";'>No</span>"; managementHTML += "<span class='clickable deleteCancelButton' onclick='document.getElementById(\"delete" + itemIndex + "Confirm\").style.display = \"none\";'>No</span>";
managementHTML += "<span class='deleteConfirmButton' onclick='DeleteWord(" + itemIndex + ")'>Yes</span>"; managementHTML += "<span class='clickable deleteConfirmButton' onclick='DeleteWord(" + itemIndex + ")'>Yes</span>";
managementHTML += "</div>"; managementHTML += "</div>";
managementHTML += "</div>"; managementHTML += "</div>";
@ -258,6 +274,14 @@ function ManagementArea(itemIndex) {
return managementHTML; return managementHTML;
} }
function ShowAbout() {
document.getElementById("aboutScreen").style.display = "block";
}
function HideAbout() {
document.getElementById("aboutScreen").style.display = "none";
}
function ShowSettings() { function ShowSettings() {
document.getElementById("settingsScreen").style.display = "block"; document.getElementById("settingsScreen").style.display = "block";
document.getElementById("dictionaryNameEdit").value = htmlEntitiesParse(currentDictionary.name); document.getElementById("dictionaryNameEdit").value = htmlEntitiesParse(currentDictionary.name);

2
js/markdown-js/markdown.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long