122 lines
4.2 KiB
JavaScript
122 lines
4.2 KiB
JavaScript
Mapeate.Web = function(mapeate, entradas){
|
|
|
|
const self = this,
|
|
diccionario = {};
|
|
let iniciado = false,
|
|
hilo_de_proceso = null;
|
|
|
|
const constructor = () => {
|
|
|
|
mapeate.print("info", "mapeate_web_construyendose");
|
|
|
|
mapeate.print("ok", "mapeate_web_construido");
|
|
|
|
};
|
|
|
|
this.iniciar = callback => {
|
|
|
|
const terminar = estado => typeof callback == "function" && callback(estado);
|
|
|
|
if(iniciado){
|
|
terminar(false);
|
|
return false;
|
|
};
|
|
iniciado = true;
|
|
|
|
hilo_de_proceso = mapeate.anadir_hilo_de_proceso(hilo_de_proceso_metodo);
|
|
|
|
(JSON.parse(atob(entradas.diccionario)) || []).forEach(elemento => diccionario[elemento.clave] = {
|
|
links : elemento.links.map(link => mapeate.vistas.coger("elemento_diccionario_link", {
|
|
tipo : link.replace(/^[^\:]+\:\/{2}([^\/]+)(\/.*)?$/, "$1").replace(/[^a-z0-9]+/gi, "_"),
|
|
link : link
|
|
})).join(""),
|
|
descripcion : elemento.descripcion.map(parrafo => `<p>` + parrafo + `</p>`).join("")
|
|
});
|
|
|
|
addEventListener("mouseover", analizar_estado);
|
|
|
|
console.log(diccionario);
|
|
|
|
terminar(true);
|
|
|
|
return true;
|
|
};
|
|
|
|
const hilo_de_proceso_metodo = () => {
|
|
|
|
mapeate.si_mismo.querySelectorAll("[data-diccionario-sin-procesar]").forEach(elemento => {
|
|
elemento.setAttribute("data-diccionario", elemento.getAttribute("data-diccionario-sin-procesar"));
|
|
elemento.setAttribute("onmouseover", mapeate.nombre_objeto + ".web.activar_diccionario(this, event);");
|
|
elemento.removeAttribute("data-diccionario-sin-procesar");
|
|
});
|
|
|
|
};
|
|
|
|
this.marcar_elemento_diccionario = (elemento, evento) => elemento.setAttribute("data-encima", true);
|
|
|
|
this.desmarcar_elemento_diccionario = (elemento, evento) => elemento.setAttribute("data-encima", false);
|
|
|
|
this.activar_diccionario = (elemento, evento) => {
|
|
|
|
elemento.hasAttribute("data-diccionario-hash") ||
|
|
elemento.setAttribute("data-diccionario-hash", mapeate.hash());
|
|
|
|
const hash = elemento.getAttribute("data-diccionario-hash");
|
|
|
|
self.marcar_elemento_diccionario(elemento);
|
|
|
|
if(mapeate.si_mismo.querySelector(".diccionario-elemento[data-diccionario-hash=" + hash + "]"))
|
|
return;
|
|
|
|
const texto = elemento.innerText,
|
|
limites = elemento.getBoundingClientRect(),
|
|
pestana = elemento.appendChild(document.createElement("fieldset")),
|
|
clave = elemento.getAttribute("data-diccionario"),
|
|
cuerpo = document.querySelector("body"),
|
|
[clave_x, clave_y] = [
|
|
limites.x > cuerpo.offsetWidth / 2 ? "right" : "left",
|
|
limites.y > cuerpo.offsetHeight / 2 ? "bottom" : "top"
|
|
];
|
|
|
|
pestana.setAttribute("class", "diccionario-elemento");
|
|
pestana.setAttribute("data-diccionario-hash", hash);
|
|
if(limites.x > cuerpo.offsetWidth / 2)
|
|
pestana.style.right = (cuerpo.offsetWidth - limites.right) + "px";
|
|
else
|
|
pestana.style.left = limites.left + "px";
|
|
if(limites.y > cuerpo.offsetHeight / 2){
|
|
console.log(cuerpo.offsetHeight - limites.bottom + elemento.offsetHeight);
|
|
pestana.style.bottom = (cuerpo.offsetHeight - limites.bottom + elemento.offsetHeight) + "px";
|
|
}else
|
|
pestana.style.top = (limites.top + elemento.offsetHeight) + "px";
|
|
|
|
pestana.innerHTML = mapeate.vistas.coger("elemento_diccionario", {
|
|
...diccionario[clave],
|
|
texto : texto
|
|
});
|
|
|
|
};
|
|
|
|
const analizar_estado = evento => {
|
|
|
|
let elemento = evento.target,
|
|
eliminar = true,
|
|
hash;
|
|
|
|
do{
|
|
if(elemento.hasAttribute && elemento.hasAttribute("data-diccionario-hash")){
|
|
eliminar = false;
|
|
hash = elemento.getAttribute("data-diccionario-hash");
|
|
break;
|
|
};
|
|
}while(elemento = elemento.parentNode);
|
|
|
|
document.querySelectorAll(".diccionario-elemento").forEach(elemento => (
|
|
eliminar || elemento.getAttribute("data-diccionario-hash") != hash
|
|
) && elemento.remove());
|
|
|
|
};
|
|
|
|
constructor();
|
|
|
|
}; |