/* * Skapat av johan ahlbäck * Laboration - Labby Mezzage * * Detta script skapades för en uppgift * som gick ut på att skapa en enkel meddelande tjänst * */ var messageEngine = { //en array som kommer att hålla meddelande objekten. messages:[], //init startar när sidan laddat klart init: function(){ //skriver ut hur många meddelanden det finns messageEngine.clearCounter(); messageEngine.CounterText(); // en funktion som kollar om man trycker på enter. //om man trycker på enter så skickar man in meddelandet document.getElementById("messagetext").onkeypress = function(e){ //fix för internet explorer. //om inte e så blir e window.event if(!e){ var e = window.event; } //variabel för keycode för enter var keycode; //om det är window event (ie) if (window.event){ keycode = window.event.keyCode; } //om det är e (FF) else if (e){ keycode = e.which; } else return true; //om enter trycks tillsammans med shift //gör ingenting if (keycode == 13 && e.shiftKey){ return true; } //om enter trycks ner starta functionen input if (e.shiftKey == false && keycode == 13){ input(); } //om inget av dem stämmer gör ingenting. else{ return true; } } //hämtar id för knappen som kommer att starta input functionen var submitMessage = document.getElementById("submit"); //staratar input när man klickar på knappen submitMessage.onclick = input; //funktionen input startar alla nödvändiga funktioner. function input(){ var messageText = document.getElementById('messagetext').value; var messageObject = new Message(messageText, new Date()); messageEngine.messages.push(messageObject); messageEngine.clearMessages(); messageEngine.writeMessages(); messageEngine.setButtons(); messageEngine.clearCounter(); messageEngine.CounterText(); document.getElementById("messagetext").value=""; } }, //rensar alla meddelanden innan de skrivs ut igen clearMessages: function(){ document.getElementById("messages").innerHTML = ""; }, //funktion som sköter skapandet av alla element ock skriver ut till rätt element writeMessages: function(){ for (var i = 0; i < messageEngine.messages.length; i++) { //elementet som ska innehålla alla andra elementet var messageDiv = document.createElement("div"); messageDiv.setAttribute("class", "message"); messageDiv.setAttribute("id", "messageDiv" + i) //Elementet som ska hålla texten var textDiv = document.createElement("div"); textDiv.setAttribute("id", "textDiv" + i) textDiv.setAttribute("class", "text"); //text element som innehåller texten för meddelandet var textTag = document.createElement("p"); textTag.setAttribute("id", "textTag" + i) //Elementet som innehåller knapparna var buttonsDiv = document.createElement("div"); buttonsDiv.setAttribute("id", "buttonsDiv" + i) buttonsDiv.setAttribute("class", "controll") //Bildelement för valet att visa komplett tidsstämpel var buttonTime = document.createElement("img"); buttonTime.setAttribute("src", "http://madebyjohan.se/scripts/labbyMezzage/images/time.jpg"); buttonTime.setAttribute("alt", "Kolla tiden") buttonTime.setAttribute("id",i +"t") //Bildelement för valet att visa radera meddelandet var buttonDelete = document.createElement("img"); buttonDelete.setAttribute("src", "http://madebyjohan.se/scripts/labbyMezzage/images/delete.jpg"); buttonDelete.setAttribute("alt", "Radera"); buttonDelete.setAttribute("id", i + "d"); //elementet som ska hålla tiden. var timeDiv = document.createElement("div"); timeDiv.setAttribute("id", "timeDiv" + i) timeDiv.setAttribute("class", "time"); //text elementet för tiden var timeP = document.createElement("p"); timeP.setAttribute("id", "timeP" + i) //hämtar id för det element som ska innehålla alla meddelande. //lägger till meddelande elemtet som child. document.getElementById("messages").appendChild(messageDiv); //hämtar meddelande elementet med rätt id och placerar textDiv som child. document.getElementById("messageDiv"+i).appendChild(textDiv); //hämtar textDiv och lägger till textelemntet som child document.getElementById("textDiv"+i).appendChild(textTag); //hämtar meddelande elementet och placerar knapp elementet som child document.getElementById("messageDiv" + i).appendChild(buttonsDiv) //hämtar elemntet gör knapparna och placerar de två bilderna som child. document.getElementById("buttonsDiv" + i).appendChild(buttonTime); document.getElementById("buttonsDiv" + i).appendChild(buttonDelete); //hämtar meddelande elementet och placerar elementet för tiden som child document.getElementById("messageDiv" + i).appendChild(timeDiv) //placerar text elementet för tiden som child för elementet. document.getElementById("timeDiv" + i).appendChild(timeP) //skriver ut meddelandet i rätt element textTag.innerHTML = messageEngine.messages[i].getText(); //skriver ut tiden i rätt element timeP.innerHTML = messageEngine.messages[i].getTime(); } }, //en funktion som hämtar alla knapparnas id //sen sätts ett onclick event på alla som gör att de startar en funktion setButtons: function(){ //en for loop för tids knapparna som startar funktionen time //när man klickar på en sådan knapp for (var i = 0; i < messageEngine.messages.length; i++){ document.getElementById(i + "t").onclick = messageEngine.time; } //en for loop för delete knapparna som startar funktionen del //när man klickar på en sådan knapp for (var i = 0; i < messageEngine.messages.length; i++){ document.getElementById(i + "d").onclick = messageEngine.del; } }, //funktion för vad som ska ske när man klickar på en tid knapp time: function(){ //tar ut id på knappen man klickade på timeButton = this.id; //parsar om id till en integer och //utnytjar att bara siffran kommer med timeButton = parseInt(timeButton) //placerar siffran så att den representerar numret //på det index som meddelandet ligger i var alertdate = messageEngine.messages[timeButton].setFullDate(); //använder alert för att skriva ut det. alert(alertdate); }, //funktion för att radera meddelanden del: function(){ //plockar fram id för den knapp man tryckte på deleteButton = this.id; //parsar om id till en integer och //utnytjar att bara siffran kommer med deleteButton = parseInt(deleteButton) //använder en confirm ruta för att fråga //om man verkligen vill ta bort meddelandet. var answer = confirm("vill du ta bort meddelandet?") if(answer) { //anväder splice för att ta bort det meddelandet man önskar //använder integer från id messageEngine.messages.splice(deleteButton,1); //startar funktioner för att skriva ut meddelandet messageEngine.clearMessages(); messageEngine.writeMessages(); messageEngine.setButtons(); //räknar om hur många meddelanden det finns messageEngine.clearCounter(); messageEngine.CounterText(); } else { } }, //funktion för att skriva ut antalet meddelanden CounterText: function(){ //variabel för räknaren var counter = messageEngine.messages.length; //hämtar elementet som räknaren ska ligga i var counterDiv = document.getElementById("counterDiv"); //skapar ett elemt för texten var counterText = document.createElement("p"); //lägger in texten i rätt element counterText.innerHTML = "Antal meddelanden: " + counter; //lägger texten som child till elementet counterDiv.appendChild(counterText); }, //funktion som rensar räknaren innan den skrivs ut igen clearCounter: function(){ var counterDiv = document.getElementById("counterDiv"); counterDiv.innerHTML = ""; } } //startar init när sidan laddat klart window.onload = messageEngine.init;