Funzioni successive al menu.

Una volta che siamo usciti dal menu, abbiamo:

• La casella il cui click ha evocato il menu
• Le ccrdinate dell'evento che ha evocato il menu
• L'evento click sul menu.

Ora bisogna inserire sulla casella chiamante il contenuto del menu.
Come fare?

Funzione CreateMenu, ultima evoluzione.

Ecco la nuova versione della funzione che crea il menu:

//funzione che crea il menu popup. Funzione è ciò che si vuole che accada quando si clicca sul Menu.
function CreaMenu(evento,mouseSopra,mouseFuori,funzione){
 var casellaCliccata=evento.srcElement;
 var coordinataX=evento.clientX;
 var coordinataY=evento.clientY
 Mnu=document.createElement("div");
 Mnu.id="menu";
 Mnu.onmouseover=mouseSopra;
 Mnu.onmouseout=mouseFuori;
 Mnu.className="Menu";
 Mnu.innerHTML=TestoDelMenu;
 document.body.appendChild(Mnu);
 Mnu.style.left=evento.clientX+"px";
 Mnu.style.top=evento.clientY+"px";
 
 Mnu.onmousedown=function(){
  document.body.removeChild(Mnu);
  funzione(event,casellaCliccata,coordinataX,coordinataY)
 };
}

La funzione accetta come parametri l'evento che l'ha evocata, la funzione da eseguire al MouseOver, la funzione da eseguire al MouseOut, e la funzione da eseguire all'evento MouseDown sul menu.
A questa funzione vengono forniti, quando chiamata, i parametri della casella cliccata all'evento chiamante il menu e delle sue coordinate, oltre all'evento del click sul menu.

Ricostruendo la funzione che crea i menu

Bene.
Ho troncato il programma.

Adesso devo creare una funzione che mi crei un menu.

Ho la posizione del mouse.
Ma la passo ugualmente come parametro.
Ecco la funzione finora:

function CreaMenu(evento,mouseSopra,mouseFuori){
 
 Mnu=document.createElement("div");
 Mnu.id="menu";
 Mnu.onmouseover=mouseSopra;
 Mnu.onmouseout=mouseFuori;
 Mnu.className="Menu";
 Mnu.innerHTML=TestoDelMenu;
 document.body.appendChild(Mnu);
 Mnu.style.left=event.clientX+"px";
 Mnu.style.top=event.clientY+"px";
}

Conviene passare alla funzione che crea il menu anche la casella che è stata cliccata.
Passando l'evento, si passano sia le coordinate sia la casella.
Dunque la funzione che crea il menu conosce sia le coordinate sia l'elemento bersaglio dell'evento.

---

Ecco come ho ricostruito la funzione finora:

//funzione che crea il menu popup. Funzione è ciò che si vuole che accada quando si clicca sul Menu.
function CreaMenu(evento,mouseSopra,mouseFuori){
 var casellaCliccata=evento.srcElement;
 var coordinataX=evento.clientX;
 var coordinataY=evento.clientY
 Mnu=document.createElement("div");
 Mnu.id="menu";
 Mnu.onmouseover=mouseSopra;
 Mnu.onmouseout=mouseFuori;
 Mnu.className="Menu";
 Mnu.innerHTML=TestoDelMenu;
 document.body.appendChild(Mnu);
 Mnu.style.left=evento.clientX+"px";
 Mnu.style.top=evento.clientY+"px";
 
 Mnu.onmousedown=function(){
  var menuCliccato=event.srcElement;
  casellaCliccata.innerHTML=menuCliccato.innerHTML;
 };
}

Salvataggio vecchia versione per inserimento voci del menu nelle caselle del calendario

Ho modificato la parte del programma che inserisce le voci del menu troncate all'interno delle caselle del calendario. La parte commentata è quella precedente, che non voglio perdere per eventualmente analizzarla in seguito; la parte in rosso è quella nuova, basata sulla funzione di servizio stringArray(elemento,numero) che ho inserito nella libreria "funzioni di servizio" di questo programma.

//la funzione che trascrive il contenuto del menu popup sulla casella (ha per parametro la casella sulla quale
//è stato evocato il menu popup)
function trascrivi(cas){
  var voce=document.createElement("span");
  voce.className="menu";
  voce.style.left=0+"px";
  
  voce.innerHTML=stringArray(event.srcElement,15);
  /*var stringArray=event.srcElement.innerHTML.split("");
  for(var i=0;i<8;i++){
   voce.innerHTML+=stringArray[i];
  }*/
  cas.appendChild(voce);
  
  

  rimuoviMenuPopup();
 
 
}

Funzione che identifica il capostipite di un elemento

Mi serve che cliccando su un figlio si debba confrontare il genitore con una serie di parametri per vedere se questo genitore è l'elemento giusto per avere una certa risposta.
Se non ci fosse la necessità di questo, l'evento potrebbe essere percepito dal genitore ed essere attuato sull'event.srcElement senza problemi.
Per questo mi serve una funzione che identifichi il capostipite:

//identifica il capostipite
function capostipite(elem){
 while(elem.parentNode!=document.body){
  elem=elem.parentNode;
 }
 return elem;
}

Banale.

Studio eventi fra padri, figli e bolle...

Creiamo un elemento e un elemento figlio.

function main(){
 elemento=document.createElement("div");
 elemento.className="classe1";
 document.body.appendChild(elemento);
 
 figlio=document.createElement("div");
 figlio.className="classe2";
 elemento.appendChild(figlio);
}

In base alle impostazioni del foglio di stile, ho ottenuto un quadrato più grande con all'interno un quadratino "figlio" più piccolo, sito in alto e a sinistra.

Con questa aggiunta, io "attacco un evento" all'elemento padre, dicendo che allo scattare di quell'evento l'elemento origine dell'evento deve diventare blu.
Vediamo che succede.

window.onload=main;
function main(){ 
 elemento=document.createElement("div");
 elemento.className="classe1";
 document.body.appendChild(elemento);
 
 figlio=document.createElement("div");
 figlio.className="classe2";
 elemento.appendChild(figlio);
 elemento.attachEvent("onmousedown",function(){event.srcElement.style.backgroundColor="blue"});
}

Ecco: se io clicco sul "padre", l'evento viene recepito dal padre, cui è "attaccato" l'evento, e diventa blu il padre, che è l'"elemento origine" dell'evento.
Ma se io clicco sul "figlio", l'evento viene recepito anche dal padre, perchè bubbla, ma diventa blu il figlio, perchè stavolta l'elemento origine dell'evento è lui.

Calendario: progressi, usando le funzioni da me create e immesse in libreria

Ecco il codice, finora:

<html>
<head>
<style>
.casella{
 border:1px solid black;

 font-size:10px;
 position:absolute;
}

.casella2{
 border:1px solid red;

 font-size:8px;
 position:absolute;
}
</style>

<script src="librerie/funzioni.js"></script>
<script>
window.onload=main;
var Nomi=new Array(); 
var Mattine=new Array();
var Pomeriggi=new Array();
var Notti=new Array();
function main(){
 var larghezza=100;
 CreaCaselle(0,0,30,30,15,larghezza,"casella",Nomi);
 CreaCaselle(larghezza,0,30,30,15,larghezza,"casella",Mattine);
 CreaCaselle(larghezza*2,0,30,30,15,larghezza,"casella",Pomeriggi);
 CreaCaselle(larghezza*3,0,30,30,15,larghezza,"casella",Notti); 
 var dat=new Date();
 dat.setDate(1);
 for(var n=0;n<Nomi.length;n++){
  Nomi[n].innerHTML=dataString(dat,WDLETTERALE);
  if(dat.getDay()==0) Nomi[n].style.backgroundColor="#FFAAAA";
  dat.setDate(dat.getDate()+1);
 }
}

</script>
</head>
<body>
</body>
</html>

---

---

Sfuocata, ma comprensibile...