var lib = {
searchList: [],
toc: [null, null, null, null],
actItem: null, //aktualni polozka - objekt
actItemId: "", // actualni polozka - id
actPhase: "", // aktualne zobrazena faze - id
actPicIndex: -1, // aktualni obrazek
actPic: null,
pics: [], // pole obrazku dane polozky [ file, title, phase]
phases: [0, 0, 0, 0, 0, 0, 0] // indikace pritomnosti fazi
}
function initApp(evt) {
initAlgorithm();
//fillSearchList();
initPhaseMenu();
createTocTree();
var search = document.getElementById("muscle-search");
// search.addEventListener("keyup", searchPhrase);
search.addEventListener("keyup", searchPhrase);
document.getElementById("searcher").addEventListener("click", searchPhrase);
document.querySelector(".pic-prev").addEventListener("click", prevPic);
document.querySelector(".pic-next").addEventListener("click", nextPic);
//setItem("ssv");
}
function initPhaseMenu() {
var links = document.querySelectorAll(".phases [data-ref]");
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.addEventListener("click", showPhase);
}
}
function createTocTree() {
var roots = items.root.children //;
lib.toc = [null, null, null, null];
var frag = getTocLevel(items.root, 0)
var toc = document.querySelector("div.tocmenu");
toc.innerHTML = "";
toc.appendChild(frag);
}
function createTocLevel(evt) {
var node = evt.currentTarget;
var pid = node.getAttribute("data-ref");
var level = parseInt(node.getAttribute("data-level"))
var parent = items[pid]
if (!parent || !parent.children || isNaN(level) ) return null;
if (lib.toc[level] && lib.toc[level] != node) {
lib.toc[level].classList.remove("actual");
}
lib.toc[level] = node;
lib.toc[level].classList.add("actual");
setTocDiv(getTocLevel(parent, level), level)
}
function setTocDiv(frag, level) {
var tocs = document.querySelectorAll("div.tocmenu");
for (var i = level; i < tocs.length; i++) {
var toc = tocs[i];
toc.innerHTML = "";
if (i == level) {
toc.appendChild(frag);
}
}
}
function getTocLevel(parent, level, actual) {
var frag = document.createDocumentFragment();
for (var i = 0; i < parent.children.length; i++) {
var childId = parent.children[i];
var node = items[childId];
var head = addChild(frag, "div", "menuitem");
// vyznaceni aktualniho uzlu pri konstrukci stromu
if (actual != undefined && actual == childId) {
head.classList.add("actual");
lib.toc[level] = head;
}
var name = node.name;
head.setAttribute("data-ref", childId);
head.setAttribute("data-level", level+1);
if (node.children) {
head.addEventListener("click", createTocLevel);
head.classList.add("folder");
}
else {
head.addEventListener("click", showItem);
head.classList.add("item");
if (node.plural) name = "mm. " + name;
else {
if (name.indexOf("á") > 0 || name == "semisvaly") {
}
else {name = "m. " + name}
}
}
head.innerHTML = name;
}
return frag;
}
function createNodeList(node, level) {
var frag = document.createDocumentFragment();
console.log(node.name)
if (node.children && node.children.length > 0) {
var list = addChild(frag, "ul");
list.className = "level" + level;
for (var i = 0; i < node.children.length; i++) {
var child = items[node.children[i]];
if (!child) {
console.log("Spatny id: " + node.children[i])
}
var li = addChild(list, "li");
var link = addChild(li, "a");
link.innerHTML = child.name;
link.className = (child.children == undefined) ? "toc-leaf" : "toc-branch";
link.setAttribute("data-ref", node.children[i]);
li.appendChild(createNodeList(child), level+1);
}
}
return frag;
}
function showItem(evt) {
var item = evt.currentTarget
var iid = item.getAttribute("data-ref");
cancelFormerSelection();
item.classList.add("actual");
setItem(iid);
}
function showFoundItem(evt) {
var iid = evt.currentTarget.getAttribute("data-ref");
var path = [iid];
var item = items[iid];
while (item.parent) {
path.push(item.parent);
item = items[item.parent];
}
path.reverse();
var tocs = document.querySelectorAll(".tocmenu");
var parent = items.root;
for (var i = 0; i < path.length; i++) {
if (i > 0) parent = items[path[i-1]];
var frag = getTocLevel(parent, i, path[i]);
tocs[i].innerHTML = "";
tocs[i].appendChild(frag);
}
for (var i = path.length; i < tocs.length; i++) {
tocs[i].innerHTML = "";
}
setItem(iid);
}
function cancelFormerSelection() {
if (lib.actItemId != "") {
var item = document.querySelector(".tocmenu [data-ref='" + lib.actItemId + "']");
if (item) item.classList.remove("actual");
}
}
function setItem(iid) {
var item = items[iid];
if (!item) {
console.log("Polozka nenalezena: " + iid);
return;
}
lib.actItem = item;
lib.actItemId = iid;
createImgSequence(item);
createThumbs(item);
createMuscleDesc(item)
var head = document.getElementById("item-title");
head.innerHTML = completeName(item.name);
clearPhases(item);
showSection("#viewer")
//setPhase("anatomy");
showPicByIndex(0);
//lib.actPicIndex = 0;
}
function createMuscleDesc(item) {
var out = [];
if (item.begin) {
out = out.concat(createDescList(item.begin, "Začátek"));
}
if (item.upon) {
out = out.concat(createDescList(item.upon, "Úpon"));
}
if (item.inervation) {
out = out.concat(createDescList(item.inervation, "Inervace"));
}
if (item.effect) {
out = out.concat(createDescList(item.effect, "Funkce"));
}
if (item.therapy) {
out = out.concat(createDescList(item.therapy, "Terapie TrPs"));
}
document.getElementById("muscle-desc").innerHTML = out.join("");
}
function createDescList(list, heading) {
var out = [];
out.push("
" + heading +"
")
out.push("- ");
if (typeof list == "string") {
out.push(list);
}
else {
out.push(list.join("
- "));
}
out.push("
");
return out;
}
function completeName(name) {
if (name.indexOf("á") > 0 || name == "semisvaly" ) {
return name.charAt(0).toUpperCase() + name.substring(1);
}
if (lib.actItem.plural) {
return "Musculi " + name;
}
return "Musculus " + name;
}
function createImgSequence(item) {
if (item.pics) return;
item.pics = [];
addPhasePics(item, "anatomy");
addPhasePics(item, "sides");
addPhasePics(item, "clearing");
addPhasePics(item, "palpation");
addPhasePics(item, "PIR");
addPhasePics(item, "pressure");
console.log(item.pics);
}
function addPhasePics(item, series) {
if (!item[series]) return;
item.pics = item.pics || [];
for (var i = 0; i < item[series].length; i++) {
var pic = item[series][i];
var seqPic = [pic.file, pic.title, series, false];
if (pic.complete) seqPic[3] = true;
item.pics.push(seqPic );
}
}
function clearPhases(item) {
var phases = ["anatomy", "sides", "clearing", "palpation", "PIR", "pressure", "ed", "retreatment"];
for (var i = 0; i < phases.length; i++) {
var phase = phases[i];
var link = document.querySelector(".phases [data-ref='" + phase + "']");
if (!link) continue;
link.classList.remove("inactive");
link.classList.remove("actual");
if (!item[phase] || item[phase].length == 0) {
link.classList.add("inactive");
}
}
}
function showPhase(evt) {
var link = evt.currentTarget;
var pid = link.getAttribute("data-ref");
console.log("Pokus o fazi: " + pid)
setPhase(pid);
}
function setPhase(pid) {
if (!lib.actItem) return;
showPhaseDesc(pid);
/*
var pics = lib.actItem[pid];
if (!pics) return;
*/
highlightPhase(pid);
}
function highlightPhase(pid) {
if (lib.actPhase == pid) return;
if (lib.actPhase != "") {
var phase = document.querySelector(".phase[data-ref='" + lib.actPhase + "']");
if (phase) {
phase.classList.remove("actual");
}
}
lib.actPhase = pid;
document.querySelector(".phase[data-ref='" + lib.actPhase + "']").classList.add("actual");
}
function createThumbs(item) {
var pics = item.pics;
var cont = document.getElementById("thumbs");
cont.innerHTML = "";
var frag = document.createDocumentFragment();
var lastSection = "";
var section = null;
for (var i = 0; i< pics.length; i++) {
var pic = pics[i];
console.log(pic[2])
if (pic[2] != lastSection) {
lastSection = pic[2];
section = addThumbSection(frag, lastSection);
}
var fig = addChild(section, "figure", "thumb");
fig.setAttribute("data-phase", pic[2]);
fig.setAttribute("data-index", i);
fig.addEventListener("click", showBigPicture);
var img = addChild(fig, "img");
var src = pic[0]; //pic.file;
if (!pic[3]) src = lib.actItemId + "_" + src;
img.src = "pics/mini/" + src;
var fc = addChild(fig, "figcaption");
fc.innerHTML = pic[1]; //pic.title;
if (i == 0) {
lib.actPic = fig;
fig.classList.add("actual");
setBigPicture(img, pic[1]); // title
}
}
cont.appendChild(frag);
}
function addThumbSection(parent, titleCode) {
var titles = {
"anatomy": "Anatomická korelace",
"palpation": "Palpace",
"PIR": "Postizometrická relaxace",
"clearing": "Ozřejmění",
"sides": "Výběr strany",
"pressure": "Presura"
}
var section = addChild(parent, "div", "thumbs-section");
var head = addChild(section, "h3", "thumbs-label");
head.innerHTML = titles[titleCode];
return section;
}
var citations = [
"Netter, F. H. (2005). Anatomický atlas člověka (překlad 3. vyd.). Grada Publishing, a.s.: Praha.",
"Travell, J. G., Simons, D. G. (1983). Myofascial Pain and Dysfunction, Volume 1, The Trigger Point Manual, The Upper Extremities. Williams and Wilkins: Baltimore.",
"Travell, J. G., Simons, D. G. (1992). Myofascial Pain and Dysfunction, Volume 2, The Trigger Point Manual, The Lower Extremities. Williams and Wilkins: Baltimore.",
"Kendall, F.P., Kendall McCreary, R., Provance, P.G. (1993). Muscles testing and function with posture and pain (4th Ed.). Williams and Wilkins: Baltimore."
]
function showBigPicture(evt) {
var fig = evt.currentTarget;
/*
if (lib.actPic) {
lib.actPic.classList.remove("actual");
}
lib.actPic = fig;
lib.actPic.classList.add('actual');
*/
var index = parseInt(fig.getAttribute("data-index"), 10);
//lib.actPicIndex = index;
showPicByIndex(index);
/*
var img = fig.querySelector("img");
if (!img) return;
var title = fig.querySelector("figcaption").innerHTML;
setBigPicture(img,title);
*/
var phaseId = fig.getAttribute("data-phase");
setPhase(phaseId);
// hideSection("#descriptions");
}
function setBigPicture(img, title) {
var newSrc = img.src.replace("mini/", "big/");
document.getElementById("bigOne").src = newSrc;
var imgDesc = document.getElementById("item-title").innerHTML + " – " + title;
if (title.indexOf("Kendall") > -1) {
imgDesc = citations[3];
}
if (title.indexOf("Netter") > -1) {
imgDesc = citations[0];
}
if (title.indexOf("Travell") > -1) {
imgDesc = (hasParent(lib.actItem, "dk") || lib.actItem.name == "quadratus lumborum") ? citations[2] : citations[1] ;
}
document.getElementById("img-desc").innerHTML = imgDesc;
showSection("#viewport");
}
function showPicByIndex(index) {
if (index == lib.actPicIndex) {
console.log("Stejny index");
return;
}
var prev = document.querySelector(".thumb[data-index='" + lib.actPicIndex + "']");
if (prev) {
prev.classList.remove("actual");
}
lib.actPicIndex = index;
var newActual = document.querySelector(".thumb[data-index='" + lib.actPicIndex + "']");
newActual.classList.add("actual");
var img = newActual.querySelector("img");
if (!img) return;
var title = newActual.querySelector("figcaption").innerHTML;
setBigPicture(img, title);
setPrevNextOf(lib.actPicIndex);
showPhaseDesc(lib.actItem.pics[lib.actPicIndex][2]);
}
function nextPic(evt) {
var link = evt.currentTarget;
if (link.classList.contains("inactive")) {
return;
}
showPicByIndex(lib.actPicIndex+1);
}
function prevPic(evt) {
var link = evt.currentTarget;
if (link.classList.contains("inactive")) {
return;
}
showPicByIndex(lib.actPicIndex-1);
}
function setPrevNextOf(index) {
var prev = document.querySelector(".pic-prev");
var next = document.querySelector(".pic-next");
prev.classList.remove("inactive");
next.classList.remove("inactive");
var item =lib.actItem;
if (index == item.pics.length -1 ) {
next.classList.add("inactive");
}
if (index == 0) {
prev.classList.add("inactive");
}
}
function hasParent(item, parentId) {
if (item.parent) {
if (item.parent == parentId) return true;
else return hasParent(items[item.parent], parentId);
}
return false;
}
function showPhaseDesc(pid) {
var descs = document.querySelectorAll("#descriptions .section");
for (var i = 0; i < descs.length; i++) {
var desc = descs[i];
desc.classList.remove("actual");
if (desc.id == "desc-" + pid) {
desc.classList.add("actual");
}
}
}
function fillSearchList() {
lib.searchList = [];
for (var itemKey in items) {
var node = items[itemKey];
if (!node.anatomy ) continue;
lib.searchList.push([node.name, itemKey]);
}
lib.searchList.sort(searchSorter);
var frag = document.createDocumentFragment();
for (var i = 0; i < lib.searchList.length; i++) {
var item = lib.searchList[i];
var opt = addChild(frag, "option");
opt.value = item[0];
//opt.textContent = item[0];
}
document.getElementById("muscles").appendChild(frag);
}
function searchSorter(a, b) {
return a[0].localeCompare(b[0]);
}
function initAlgorithm() {
var sections = document.querySelectorAll(".algorithm .section");
for (var i = 0; i < sections.length; i++) {
var head = sections[i].querySelector("h3");
var text = head.innerHTML;
head.innerHTML = "";
var exp = head.appendChild(document.createElement("span"));
exp.className = "expander";
exp.addEventListener("click", toggleSection);
exp.innerHTML = "+"
var cont = head.appendChild(document.createElement("span"))
cont.className = "title";
cont.addEventListener("click", showPhase)
cont.innerHTML = text;
}
}
function toggleSection(evt) {
var btn = evt.currentTarget;
var section = btn.parentNode.parentNode;
if (section.classList.contains("expanded")) {
section.classList.remove("expanded")
btn.innerHTML = "+"
}
else {
section.classList.add("expanded")
btn.innerHTML = "−"
}
}
/***** vyhledavani ***********/
function searchPhrase(evt) {
var phrase = document.getElementById("muscle-search").value.trim().toLowerCase();
if (phrase.length < 2) return;
var results = []
for (var itemKey in items) {
var item = items[itemKey];
if (!item.anatomy) continue;
if (item.name.indexOf(phrase) > -1) {
results.push(itemKey);
}
}
makeResultList(results)
}
function makeResultList(results) {
var list = document.querySelector(".results");
list.innerHTML = "";
var frag = document.createDocumentFragment();
for (var i = 0; i < results.length; i++) {
var item = items[results[i]];
var res = addChild(frag, "div", "result-item");
res.innerHTML = item.name;
res.setAttribute("data-ref", results[i]);
res.addEventListener("click", showFoundItem);
}
if (results.length == 0) {
var fb = addChild(frag, "p", "feedback");
fb.innerHTML = "Žádný název neobsahuje zadanou frázi."
}
list.appendChild(frag);
}
/**** pomocne funkce - DOM ****/
function $(cssRule) {
return document.querySelectorAll(cssRule);
}
function addChild(parent, childName, childClass) {
var child = parent.appendChild(document.createElement(childName));
if (childClass) {
child.className = childClass;
}
return child;
}
function removeNode(node) {
var parent = node.parentNode;
if (parent) {
return parent.removeChild(node);
}
return null;
}
function setHTML(cssRule, content) {
var node = document.querySelector(cssRule);
if (node) {
node.innerHTML = content;
}
//node.appendChild(content);
}
function showSection(sectRule) {
var section = document.querySelector(sectRule);
if (section) {
section.classList.remove("hidden");
}
}
function hideSection(sectRule) {
var section = document.querySelector(sectRule);
if (section) {
section.classList.add("hidden");
}
}
window.addEventListener("load", initApp);