Added whole Instruction step and a basic how to

This commit is contained in:
2020-12-27 18:10:07 +01:00
parent 20fb9914ef
commit dc9b5c725e
5 changed files with 1249 additions and 1326 deletions

View File

@ -1,76 +1,26 @@
// Init Elm
var app = Elm.Main.init({
node: document.getElementById("elm"),
// flags: Date.now()
});
let text_de = document.getElementById("langDE");
let text_en = document.getElementById("langEN");
// Dom Objects
let pc = document.getElementsByClassName("pc")[0];
let pc_ram = pc.getElementsByClassName("ram")[0];
let pc_cu = pc.getElementsByClassName("cu")[0];
let pc_alu = pc.getElementsByClassName("alu")[0];
let btn_changeToDe = document.getElementById("langPickerDE");
let btn_changeToEn = document.getElementById("langPickerEN");
let pc_ram_scroller = pc_ram.getElementsByClassName("scroller")[0];
let pc_cu_scroller = pc_cu.getElementsByClassName("scroller")[0];
let lang = (typeof document.documentElement.lang == "string") ? document.documentElement.lang: "en"
let control_autoscroll = document.getElementById("enableScrolling");
// Methods
function scrollToCurrent(){
if( control_autoscroll.checked == false ) return;
let current_ram = pc_ram.getElementsByClassName("current")[0];
if( typeof current_ram != "undefined"){
current_ram.scrollIntoView({behavior: "smooth", block: "center"});
}
let current_uCode = pc_cu.getElementsByClassName("current")[0];
if( typeof current_uCode != "undefined"){
current_uCode.scrollIntoView({behavior: "smooth", block: "center"});
}
function changeLang(lang){
if(lang == "de"){
text_de.classList.remove("hidden");
text_en.classList.add("hidden");
}else{
text_en.classList.remove("hidden");
text_de.classList.add("hidden");
}
}
function shrinkTableHead(scroll){
let scroller = scroll.target;
let pos = scroller.scrollTop;
let thead = scroller.getElementsByClassName("head")[0];
if( pos > 70 ){
thead.classList.add("shrunk");
}else if (pos < 40){
thead.classList.remove("shrunk");
}
}
function loadStorage() {
let content = localStorage.getItem("pc_data");
if( typeof content == "string" ){
app.ports.localStorageRecieve.send( content );
}
}
btn_changeToEn.addEventListener("click", () => { changeLang("en") } );
btn_changeToDe.addEventListener("click", () => { changeLang("de") } );
// Load last state of pc
loadStorage();
// EVENT LISTENERS
pc_ram_scroller.addEventListener("scroll", shrinkTableHead);
pc_cu_scroller.addEventListener("scroll", shrinkTableHead);
// Recieve Elm updates via ports
app.ports.sendUUpdate.subscribe( (message) => {
// console.log("Update: ", message);
scrollToCurrent();
// Make sure that even when the calculation takes longer it will scroll correctly
setTimeout( scrollToCurrent, 100 );
} );
// Recieve LocalSession Updates via Ports
app.ports.localStorageSend.subscribe( (message) => {
console.log("localSessionSend: ", message);
localStorage.setItem("pc_data", message);
} );
// Do stuff on loading
changeLang( lang );