Added Markdown, Description, and About
Markdown parser is from https://github.com/evilstreak/markdown-js
This commit is contained in:
parent
f81aed185a
commit
8abef4c95d
|
|
@ -14,9 +14,12 @@ footer {
|
|||
padding: 3px;
|
||||
}
|
||||
|
||||
#leftColumn {
|
||||
float: left;
|
||||
}
|
||||
|
||||
form {
|
||||
margin: 15px;
|
||||
float: left;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
|
|
@ -51,6 +54,10 @@ input, textarea {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
#aboutPanel {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#dictionaryContainer {
|
||||
margin: 15px;
|
||||
width: 50%;
|
||||
|
|
@ -58,6 +65,28 @@ input, textarea {
|
|||
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 {
|
||||
display: block;
|
||||
width: 50%;
|
||||
|
|
@ -85,6 +114,41 @@ longdefinition {
|
|||
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 {
|
||||
display: block;
|
||||
right: 5px;
|
||||
|
|
@ -97,8 +161,6 @@ longdefinition {
|
|||
.editButton, .deleteButton, .deleteConfirmButton, .deleteCancelButton {
|
||||
display: inline;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
|
|
@ -107,7 +169,7 @@ longdefinition {
|
|||
font-size: 10px;
|
||||
}
|
||||
|
||||
#settingsBackgroundFade {
|
||||
#settingsBackgroundFade, #aboutBackgroundFade {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -117,14 +179,14 @@ longdefinition {
|
|||
opacity: 0.75;
|
||||
}
|
||||
|
||||
#settingsOptions {
|
||||
#settingsOptions, #aboutPage {
|
||||
position: fixed;
|
||||
top: 10%;
|
||||
left: 10%;
|
||||
right: 10%;
|
||||
bottom: 10%;
|
||||
min-width: 350px;
|
||||
min-height: 500px;
|
||||
min-width: 300px;
|
||||
min-height: 300px;
|
||||
padding: 5px 5% 5%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
|
@ -133,11 +195,10 @@ longdefinition {
|
|||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#settingsButton, #settingsScreenCloseButton, #settingsSaveButtons button {
|
||||
#settingsButton, #settingsScreenCloseButton,
|
||||
#settingsSaveButtons button, #aboutScreenCloseButton {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#settingsForm {
|
||||
|
|
|
|||
72
index.html
72
index.html
|
|
@ -5,9 +5,14 @@
|
|||
<title>Dictionary Builder</title>
|
||||
|
||||
<link href="css/styles.css" rel="stylesheet" />
|
||||
|
||||
<!-- Markdown Parser -->
|
||||
<script src="js/markdown-js/markdown.min.js"></script>
|
||||
|
||||
<script src="js/dictionaryBuilder.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="leftColumn">
|
||||
<form id="wordEntryForm">
|
||||
<label><span>Word</span>
|
||||
<input type="text" id="word" />
|
||||
|
|
@ -37,16 +42,24 @@
|
|||
<button type="button" onclick="AddWord(); return false;">Add Word</button>
|
||||
</div>
|
||||
<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 id="updateConflict" style="display: none;"></div>
|
||||
</form>
|
||||
<div id="aboutPanel">
|
||||
<span id="aboutButton" class="clickable" onclick="ShowAbout()">About Dictionary Builder</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="dictionaryContainer">
|
||||
<span id="settingsButton" onclick="ShowSettings()">Settings</span>
|
||||
<span id="settingsButton" class="clickable" onclick="ShowSettings()">Settings</span>
|
||||
|
||||
<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>
|
||||
</select>
|
||||
</label>
|
||||
|
|
@ -55,9 +68,9 @@
|
|||
</div>
|
||||
|
||||
<div id="settingsScreen" style="display:none;">
|
||||
<div id="settingsBackgroundFade"></div>
|
||||
<div id="settingsBackgroundFade" onclick="HideSettings()"></div>
|
||||
<div id="settingsOptions">
|
||||
<span id="settingsScreenCloseButton" onclick="HideSettings()">Close</span>
|
||||
<span id="settingsScreenCloseButton" class="clickable" onclick="HideSettings()">Close</span>
|
||||
<h2>Dictionary Settings</h2>
|
||||
<form id="settingsForm">
|
||||
<div class="settingsCol">
|
||||
|
|
@ -95,6 +108,55 @@
|
|||
</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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -199,7 +199,10 @@ function ShowDictionary(filter) {
|
|||
|
||||
var dictionaryNameArea = document.getElementById("dictionaryName");
|
||||
dictionaryNameArea.innerHTML = htmlEntitiesParse(currentDictionary.name) + " Dictionary";
|
||||
|
||||
|
||||
var dictionaryDescriptionArea = document.getElementById("dictionaryDescription");
|
||||
dictionaryDescriptionArea.innerHTML = markdown.toHTML(htmlEntitiesParse(currentDictionary.description));
|
||||
|
||||
var dictionaryArea = document.getElementById("theDictionary");
|
||||
var dictionaryText = "";
|
||||
|
||||
|
|
@ -216,6 +219,19 @@ function ShowDictionary(filter) {
|
|||
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) {
|
||||
var entryText = "<entry>";
|
||||
|
||||
|
|
@ -232,7 +248,7 @@ function DictionaryEntry(itemIndex) {
|
|||
}
|
||||
|
||||
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);
|
||||
|
|
@ -245,12 +261,12 @@ function DictionaryEntry(itemIndex) {
|
|||
function ManagementArea(itemIndex) {
|
||||
var managementHTML = "<div class='management'>";
|
||||
|
||||
managementHTML += "<span class='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 editButton' onclick='EditWord(" + itemIndex + ")'>Edit</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 += "<span class='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 deleteCancelButton' onclick='document.getElementById(\"delete" + itemIndex + "Confirm\").style.display = \"none\";'>No</span>";
|
||||
managementHTML += "<span class='clickable deleteConfirmButton' onclick='DeleteWord(" + itemIndex + ")'>Yes</span>";
|
||||
managementHTML += "</div>";
|
||||
|
||||
managementHTML += "</div>";
|
||||
|
|
@ -258,6 +274,14 @@ function ManagementArea(itemIndex) {
|
|||
return managementHTML;
|
||||
}
|
||||
|
||||
function ShowAbout() {
|
||||
document.getElementById("aboutScreen").style.display = "block";
|
||||
}
|
||||
|
||||
function HideAbout() {
|
||||
document.getElementById("aboutScreen").style.display = "none";
|
||||
}
|
||||
|
||||
function ShowSettings() {
|
||||
document.getElementById("settingsScreen").style.display = "block";
|
||||
document.getElementById("dictionaryNameEdit").value = htmlEntitiesParse(currentDictionary.name);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue