Check out the published website at https://tengwartranscriber.github.io
The header is the same on all the pages, so that if the header has to be changed you don't have to go to all 15 files to change it. When the page loads, the content from header.html is loaded into the HEADER div:
<!--at the top of <body> in all the files!-->
<script src="/onload.js"></script>
<div id="HEADER"></div>//in onload.js
$("#HEADER").load("/header.html");If Javascript is disabled, many of the features will not work. The website warns you about it. Below the <div id="HEADER"> element is a noscript element with a simplified menu containing only the pages that work without Javascript and a big red warning:
<noscript>
<a href="https://tengwartranscriber.github.io/abouttengwar.html" class="btn">About Tengwar</a>
<a href="https://tengwartranscriber.github.io/aboutdwarvish.html" class="btn">About Dwarvish Runes</a>
<a href="https://tengwartranscriber.github.io/welshpronunciation.html" class="btn">Welsh Pronunciation</a>
<a href="/feedback.html" class="btn">Feedback</a>
<a href="/tengwarfeanorregular.ttf" id="ElvishButton" class="btn" >Tengwar Font Download</a>
<a href="/dwarvishregular.ttf" id="DwarvishButton" class="btn">Dwarvish Font Download</a>
<a href="https://github.com/TengwarTranscriber/TengwarTranscriber.github.io/" class="btn">View Source</a>
<a href="https://github.com/TengwarTranscriber/TengwarTranscriber.github.io/zipball/master" class="btn">Download Source</a></div>
<div style="background-color:#ff0000;color:#ffffff;text-align:center;">
<h1>Sorry</h1>
<h2>Your browser does not have Javascript enabled. Many of the functions on this website (highlighted in red) require Javascript to function. Please enable Javascript for full functionality</h2>
</noscript>Features that require Javascript are highlighted in red. In the stylesheet, elements with class jsrequired have their background color set to red; if Javascript is disabled, it stays that way:
.jsrequired {
background-color: #ff0000;
}But in onload.js, the background-color for jsrequired is set to white, so if Javascript is enabled the elements end up normally:
$(".jsrequired").css("background-color", "white");If you give the elvish or dwarvish transcribers the URL parameter text=hello world, the text "hello world" will load in the output field, a blue alert appears above the output field saying hello world transcribes to:, and the webpage scrolls down to show only the output. The code looks like this:
<!--in index.html and dwarvish.html above the output field!-->
<div class="alert" id="alert" style="display:none;font-family:Times New Roman;">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<strong id="alerttext" style="font-family:Segoe UI;">Here's you transription:</strong>
</div><!--/alert!-->
<script>
var Input = document.getElementById('Input');
var Output = document.getElementById('Output');
var alert = document.getElementById("alert");
var alerttext = document.getElementById("alerttext");
function getUrlParameter(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}
window.onload = function() {
if( getUrlParameter("text") ){//if the url parameter "text" is not null
Input.value = getUrlParameter("text")//set the input field text to the value of the url parameter
Output.value = convertToTengwar(Input.value)//set the output field text to the tengwar equivalent
alert.style.display='block';//show the alert
alerttext.innerHTML = '"'+getUrlParameter("text")+'"'+" transcribes to:"//set the alert text
alert.scrollIntoView();//scroll down
}
}
</script>There are links below the output fields in dwarvish.html and index.html to save the transcription as image. They work using a javascript library called html2canvas. When the link is clicked, html2canvas converts the text field to a canvas, the canvas is converted into a data url, and the data url is opened in a new window:
<!--in index.html and dwarvish.html below the output field!-->
<script type="text/javascript" src="html2canvas.js"></script>
<div><a style="cursor:pointer;" onclick='html2canvas(document.getElementById("Output"), {onrendered:
function(canvas) {
window.open(canvas.toDataURL("image/png"), "_blank");
}
});'>Download transcription as image</a>. If your browser blocks popups this might not work.</div>There are also links below the output fields in dwarvish.html and index.html to save the transcription as a rich text file. When the links are clicked, Javascript functions create a new invisible <a> element at the bottom of the page that links to a data url and has a download attribute, then clicks that element and deletes it:
<!--in index.html and dwarvish.html below the output field!-->
<div><a style="cursor:pointer;" onclick="saveOutputAsText();">Download transcription as rich text</a>. You must install the font file from <a href="/more.html?font=elvish" target="_blank">here</a> for the file to display correctly</div>var Output = document.getElementById('Output');
function saveOutputAsText() {//function that gets run when the Save As Rich Text link is clicked
download("transcription.rtf", convertHtmlToRtf(Output.value))//download the contents of the output field as transcription.rtf
}
function convertHtmlToRtf(html) {//convert text to rtf
if (!(typeof html === "string" && html)) {//if the value isn't a string or is empty
return null;//return null and exit
}
var richText = html;
richText ="{\\rtf1\\ansi\\deff0 {\\fonttbl {\\f0 Tengwar Feanor;}}\n" + richText +"\n}";//format the text, setting the font to Tengwar Feanor
return richText;//return formatted text
}
function download(filename, text) {//function to download a text file
var element = document.createElement('a');//create a new <a> element
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));//set the element link to a dataurl containing the text
element.setAttribute('download', filename);//set the download attribute
element.style.display = 'none';//make the element invisible
document.body.appendChild(element);//add the element to the body
element.click();//click the element (starting the download)
document.body.removeChild(element);//hide the download
}If you scoll the top of the page, you see a large header with the title and links to the other pages. If you scroll down, however, the header collapses to just the title. The way this works is that there are two headers. The first one (the full one) has the attributes position:relative; and z-position:5. The second one (the collapsed one) has the attributes position:fixed;, z-index:2;, left: 0px;, and top: 0px;. So the full version scrolls with the rest of the page, the collapsed version stays at the top of the page, and when they overlap the full version covers the collapsed version:
<!--at the top of all the files!-->
<section class="page-header">
<!--title and buttons!-->
</section>
<section class="secondary-header">
<!--title only!-->
</section>/*in stylesheet.css*/
.page-header {
color: #fff;
text-align: center;
background-color: #515151;
background-image: linear-gradient(120deg, #515151, #515151);
position:relative;
z-index:5;
}
.secondary-header {
color: #fff;
text-align: center;
background-color: #515151;
background-image: linear-gradient(120deg, #515151, #515151);
padding: 5px;
position: fixed;
z-index:2;
width: 100%;
left: 0px;
top: 0px;
}The radio button iself is made invisible. The label for the button includes a blank span; in the stylesheet it is set to a 19x19 pixel circle. If it is checked the color is light blue; if not the color is black. Background color transition is set to .4 seconds.
<!--for each radio button!-->
<input type="radio" id="radio01" name="Type" value="Help"/><label for="radio01"><span></span>Help Request</label>/*in stylesheet.css*/
input[type="radio"] {
display: none;
}
input[type="radio"] + label {
color: #000000;
font-family: Arial, sans-serif;
font-size: 14px;
}
input[type="radio"] + label span {
display: inline-block;
width: 19px;
height: 19px;
margin: -1px 4px 0 0;
vertical-align: middle;
cursor: pointer;
-moz-border-radius: 50%;
border-radius: 50%;
}
input[type="radio"] + label span {
background-color: #000000;
}
input[type="radio"]:checked + label span {
background-color: #49d7ff;
}
input[type="radio"] + label span,
input[type="radio"]:checked + label span {
-webkit-transition: background-color 0.4s linear;
-o-transition: background-color 0.4s linear;
-moz-transition: background-color 0.4s linear;
transition: background-color 0.4s linear;
}