lauchmelder/Lauchmelder23.github.io
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

added comments

Browse source
This commit is contained in:
Robert 2021-01-04 19:47:30 +01:00
parent a520f89fb6
commit fc092f5c45
1 changed files with 26 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
index.html
View file

@ -62,6 +62,7 @@
<h2 id="kanji_meaning">Meanings currently not available due to CORS issues</h2> <h2 id="kanji_meaning">Meanings currently not available due to CORS issues</h2>
<script> <script>
// Helper function to get GET parameter from URL
$.urlParam = function(name){ $.urlParam = function(name){
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href); var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
try { try {
@ -72,60 +73,64 @@
} }
// Helper function to load the KanjiVG from its unicode
$.loadSVG = function(hex) { $.loadSVG = function(hex) {
return $.ajax({ return $.ajax({
url: "assets/0" + hex + ".svg", url: "assets/0" + hex + ".svg",
dataType: "text", dataType: "text",
success: function(data) { success: function(data) {
$("#kanji_container").html(data); $("#kanji_container").html(data); // Put svg in DOM
$("svg > g:nth-child(2)").remove(); $("svg > g:nth-child(2)").remove(); // Remove stroke numbering
$("span").contents().filter((_, el) => el.nodeType === 3).remove(); $("span").contents().filter((_, el) => el.nodeType === 3).remove(); // Remove weird text
} }
}); });
} }
// Helper function to extract only top-level elements of Kanji
$.getHighestElements = function(startPoint, selector, child = false) { $.getHighestElements = function(startPoint, selector, child = false) {
var elems = []; var elems = [];
startPoint.children('g').each(function () { startPoint.children('g').each(function () { // For each element in SVG
if(typeof $(this).attr(selector) !== typeof undefined) { if(typeof $(this).attr(selector) !== typeof undefined) { // If it has the desired attribute
elems.push($(this)); elems.push($(this)); // Add it to list
} else { } else {
$.merge(elems, $.getHighestElements($(this), selector, true)); $.merge(elems, $.getHighestElements($(this), selector, true)); // Recurse
} }
}); });
if(child) if(child) // If this function was called by recursion
return elems; return elems; // Return the raw array
else else
return $(elems).map(function() { return this.toArray(); }); return $(elems).map(function() { return this.toArray(); }); // Prepare array for jQuery usage
} }
// Get Kanji from GET request
const kanji_raw = $.urlParam('kanji'); const kanji_raw = $.urlParam('kanji');
if(kanji_raw != undefined) if(kanji_raw != undefined)
{ {
// Get character representation from URL representation
const kanji = decodeURIComponent(kanji_raw); const kanji = decodeURIComponent(kanji_raw);
// Set value of input field to Kanji
$("form input[name=kanji]").val(kanji); $("form input[name=kanji]").val(kanji);
// Get Hex code of Kanji
var hex = kanji.charCodeAt(0).toString(16); var hex = kanji.charCodeAt(0).toString(16);
$.loadSVG(hex).then( response => { $.loadSVG(hex).then( response => { // Load the SVG of the Kanji
var allParts = $.getHighestElements($("svg > g > g"), "kvg:element"); // Get top-level elements
var allParts = $.getHighestElements($("svg > g > g"), "kvg:element");
allParts.addClass("off"); allParts.addClass("off"); // Give all elements class "off" (for unselected styling)
allParts.addClass("part"); allParts.addClass("part"); // Give them class "part" as well (for default styling)
allParts.on({ allParts.on({ // For each element
mouseenter: function () { mouseenter: function () { // MouseEnter event: off -> on
$(this).switchClass("off", "on"); $(this).switchClass("off", "on");
$(this).find('g.part').switchClass("off", "on");
}, },
mouseleave: function () { mouseleave: function () { // MouseLeave event: on -> off
$(this).switchClass("on", "off"); $(this).switchClass("on", "off");
$(this).find('g.part').switchClass("on", "off");
}, },
}); });
// If element is clicked, redirect website to this element
allParts.click(function() { allParts.click(function() {
window.location = window.location.origin + "?kanji=" + $(this).attr("kvg:element"); window.location = window.location.origin + "?kanji=" + $(this).attr("kvg:element");
}); });