/* ============================== || Module nsi-xyz pour || || sites internets || ||--------------------------|| || Par Damien B. & Kevin F. || ============================== */ var BDD; var codeVersion = "1.2.0"; class nsixyzElement extends HTMLElement { /* Classe pour prototype d'element HTML A l'interpretation du code, on lance la fonction suivante */ constructor() { super(); var request = new XMLHttpRequest(); request.open('GET', 'https://package.nsi.xyz/api/bdd/'); request.responseType = 'json'; request.send(); var element = this; request.onload = function() { BDD = request.response; next(element); }; } } function next(element) { /* Ajout via intégration */ if (element.hasAttribute("add")) { var toAdd = element.getAttribute("add"); /* Ajout de menu */ if (toAdd === "menu" && element.hasAttribute("ref")) { var toAddRef = element.getAttribute("ref"); /* Recherche de la référence */ if(BDD[toAdd]["refs"][toAddRef] != null) { /* Ajout de l'icone menu latéral */ var icon = document.createElement("img"); icon.id = "nsi-xyz-menu-icon"; icon.setAttribute("onclick", "changeMenuDisplay()"); icon.setAttribute("src","https://package.nsi.xyz/api/images/hamburger.png"); element.appendChild(icon); /* Ajout du titre */ var titre = document.createElement("div"); titre.id = "nsi-xyz-menu-title"; titre.setAttribute("style", "display: none;"); titre.innerHTML = BDD[toAdd]["refs"][toAddRef][0]; element.appendChild(titre); /* Ajout du style */ var style = document.createElement("style"); style.innerHTML = styles[toAdd]; if (element.hasAttribute("theme") && element.getAttribute("theme") == "light") { style.innerHTML += "#nsi-xyz-menu-icon{ filter: invert(1); }"; } element.appendChild(style); /* Ajout du script */ var script = document.createElement("script"); script.innerHTML = scripts[toAdd]; element.appendChild(script); /* Construction du menu */ var chose = document.createElement(BDD[toAdd]["type"]); chose.id = BDD[toAdd]["id"]; chose.setAttribute("style", "display: none"); element.appendChild(chose); for(var i = 1 ; i < BDD[toAdd]["refs"][toAddRef].length ; i++) { addMenu(chose,BDD[toAdd]["refs"][toAddRef][i],BDD[toAdd]); } /* Ajout de l'espace final */ var blank = document.createElement("div"); blank.setAttribute("style", "display: block; position: relative; width: 100%; height: 20%;"); chose.appendChild(blank); } else { alert("La référence n'existe pas."); } } else if (toAdd === "menu" && !element.hasAttribute("ref")) { alert("Vous devez specifier une reference pour l'ajout d'un menu."); } /* Ajout de code */ if (toAdd === "code" && element.hasAttribute("lang")) { var toAddLang = element.getAttribute("lang"); if (BDD[toAdd]["supported"].includes(toAddLang)) { /* Actualisation */ if (element.firstChild.className == "nsi-xyz-code") { if (toAddLang == "html") { element.innerHTML = "\n<42>\n"+element.firstChild.innerHTML+"\n</42>"; } else { element.innerHTML = "\n" + element.firstChild.innerHTML; } } /* Ajout de balises <pre> et traitement des espaces */ var preElement = document.createElement("pre"); var toWork = element.innerHTML.split("\n"); var begin = 0; var end = 0; var nbSpc = 0; for (var i = 0 ; i < toWork.length ; i++) { if (toWork[i].replace(/^\s+|\s+$/g, '') !== "") { end = i; if (toAddLang == "html") { end--; } } if (end != 0 && begin == 0) { begin = i; } } for (var i = 0 ; i < toWork[begin].length ; i++) { if (toWork[begin][i] == " ") { nbSpc++; } else { break; } } var toShow = Array(); for (var i = begin ; i <= end ; i++) { for (tsElement of ["function", "string", "numbers", "comment", "keyword", "logic", "special", "line"]) { toWork[i] = toWork[i].replace(new RegExp("<span class=\"nsi-xyz-code-"+tsElement+"\">", "g"), ""); } toWork[i] = toWork[i].replace(new RegExp("</span>", "g"), ""); var toPut = toWork[i].substring(nbSpc); toPut = toPut.replace(/</gi, "&lt;"); toPut = toPut.replace(/>/gi, "&gt;"); toShow.push(toPut); } /* Coloration syntaxique */ var multiline = 0; var inHtml = 0; var inCss = 0; var cssAfter = 0; for (var i = 0; i < toShow.length; i++) { var coloring = { "function": Array(), "string": Array(), "numbers": Array(), "comment": Array(), "keyword": Array(), "logic": Array(), "special": Array() }; for (var j = 0 ; j < toShow[i].length ; j++) { if (toShow[i].substring(j, j + BDD[toAdd][toAddLang]["multiline"][0].length) == BDD[toAdd][toAddLang]["multiline"][0]) { if (toShow[i].indexOf(BDD[toAdd][toAddLang]["multiline"][1], j + BDD[toAdd][toAddLang]["multiline"][0].length) === -1 && !multiline){ multiline = 1; coloring["comment"].push([toShow[i].substring(j), j]); break; } else if (toShow[i].indexOf(BDD[toAdd][toAddLang]["multiline"][1], j + BDD[toAdd][toAddLang]["multiline"][0].length) !== -1 && !multiline) { coloring["comment"].push([toShow[i].substring(j, j + toShow[i].indexOf(BDD[toAdd][toAddLang]["multiline"][1], j + BDD[toAdd][toAddLang]["multiline"][0].length) + BDD[toAdd][toAddLang]["multiline"][1].length), j]); j += toShow[i].indexOf(BDD[toAdd][toAddLang]["multiline"][1], j + BDD[toAdd][toAddLang]["multiline"][0].length) + BDD[toAdd][toAddLang]["multiline"][1].length; } } if (multiline) { if (toShow[i].indexOf(BDD[toAdd][toAddLang]["multiline"][1]) !== -1){ multiline = 0; coloring["comment"].push([toShow[i].substring(0, toShow[i].indexOf(BDD[toAdd][toAddLang]["multiline"][1]) + BDD[toAdd][toAddLang]["multiline"][1].length), 0]); j += toShow[i].indexOf(BDD[toAdd][toAddLang]["multiline"][1]) + BDD[toAdd][toAddLang]["multiline"][1].length; } else { coloring["comment"].push([toShow[i], 0]); break; } } if (toShow[i][j] !== undefined && toShow[i][j] == '"') { var strLength = 1; while (toShow[i][j + strLength] != '"') { if (toShow[i][j + strLength] === undefined) { break; } strLength++; } coloring["string"].push([toShow[i].substring(j, j + strLength + 1), j]); j += strLength; } if (toShow[i][j] !== undefined && toShow[i][j] === "'") { var strLength = 1; while (toShow[i][j + strLength] !== "'") { if (toShow[i][j + strLength] === undefined) { break; } strLength++; } coloring["string"].push([toShow[i].substring(j, j + strLength + 1), j]); j += strLength; } if (toShow[i][j] !== undefined && toShow[i][j].match(/[0-9]/)) { var numLength = 1; while (j + numLength < toShow[i].length && toShow[i][j + numLength].match(/[0-9.]/)) { numLength++; } coloring["numbers"].push([toShow[i].substring(j, j + numLength), j]); j += numLength; } if (BDD[toAdd][toAddLang]["comment"] !== "" && toShow[i].substring(j, j+BDD[toAdd][toAddLang]["comment"].length) == BDD[toAdd][toAddLang]["comment"]) { coloring["comment"].push([toShow[i].substring(j), j]); break; } if (!["css", "html"].includes(toAddLang)) { if (toShow[i][j] !== undefined && toShow[i][j].match(/[a-zA-Z_]/)) { var wordLength = 1; while (j + wordLength < toShow[i].length && toShow[i][j + wordLength].match(/[a-zA-Z0-9_]/)) { wordLength++; } if (BDD[toAdd][toAddLang]["keyword"].includes(toShow[i].substring(j, j + wordLength))) { coloring["keyword"].push([toShow[i].substring(j, j + wordLength), j]); } else if (BDD[toAdd][toAddLang]["logic"].includes(toShow[i].substring(j, j + wordLength))) { coloring["logic"].push([toShow[i].substring(j, j + wordLength), j]); } else if (BDD[toAdd][toAddLang]["special"].includes(toShow[i].substring(j, j + wordLength))) { coloring["special"].push([toShow[i].substring(j, j + wordLength), j]); } else { for (var strTest = j + wordLength ; strTest < toShow[i].length ; strTest++) { if (toShow[i][strTest] != " ") { if (toShow[i][strTest] == "(") { coloring["function"].push([toShow[i].substring(j, j + wordLength), j]); } break; } } } j += wordLength; } } else if (toAddLang == "html") { if (toShow[i].substring(j, j + 4) == "&lt;") { inHtml = 0; j += 4; if (toShow[i][j] == "/") { j++; } var wordLength = 1; while (j + wordLength < toShow[i].length && toShow[i][j + wordLength].match(/[0-9a-zA-Z_\-]/)) { wordLength++; } coloring["logic"].push([toShow[i].substring(j, j + wordLength), j]); j += wordLength - 1; } else if (toShow[i].substring(j, j + 4) == "&gt;") { inHtml = 1; j += 3; } else if (toShow[i][j] !== undefined && toShow[i][j].match(/[a-zA-Z_\-]/) && inHtml == 0) { var wordLength = 1; while (j + wordLength < toShow[i].length && toShow[i][j + wordLength].match(/[0-9a-zA-Z_\-]/)) { wordLength++; } if (toShow[i][j-1] !== "&") { coloring["keyword"].push([toShow[i].substring(j, j + wordLength), j]); } j += wordLength; } } else if (toAddLang == "css") { if (toShow[i][j] == "{") { inCss = 1; } else if (toShow[i][j] == "}") { inCss = 0; } else if (toShow[i].substring(j, j + 4) == "&gt;") { j += 3 } else if (toShow[i][j] == ":" && inCss) { cssAfter = 1; } else if (cssAfter && toShow[i][j] == ";") { cssAfter = 0 } else if (toShow[i][j] !== undefined && toShow[i][j].match(/[0-9a-zA-Z_\-\#\.\*\@\%]/)) { var wordLength = 1; while (toShow[i][j] !== undefined && j + wordLength < toShow[i].length && toShow[i][j + wordLength].match(/[0-9a-zA-Z_\-\#\.\*\@\%]/)) { wordLength++; } if (inCss) { if (cssAfter) { coloring["special"].push([toShow[i].substring(j, j + wordLength), j]); } else { coloring["keyword"].push([toShow[i].substring(j, j + wordLength), j]); } } else { coloring["logic"].push([toShow[i].substring(j, j + wordLength), j]); } j += wordLength - 1; } } } var spanLength = 0; var toColor = Array(); for (tsElement of ["function", "string", "numbers", "comment", "keyword", "logic", "special"]) { if (coloring[tsElement].length !== 0) { for (el of coloring[tsElement]) { var hasChanged = 0; if (toColor.length == 0) { toColor.push([el, tsElement]); } else { for (var k = 0 ; k < toColor.length ; k++) { if (toColor[k][0][1] > el[1]) { toColor.splice(k, 0, [el, tsElement]); hasChanged = 1; break; } } if (!hasChanged) { toColor.push([el, tsElement]); } } } } } for (elem of toColor) { toShow[i] = toShow[i].substring(0, toShow[i].indexOf(elem[0][0], elem[0][1] + spanLength)) + "<span class='nsi-xyz-code-"+elem[1]+"'>" + elem[0][0] + "</span>" + toShow[i].substring(toShow[i].indexOf(elem[0][0], elem[0][1] + spanLength) + elem[0][0].length); spanLength += "<span class='nsi-xyz-code-".length + elem[1].length + "'></span>".length; } toShow[i] = "<span class='nsi-xyz-code-line'>" + toShow[i] + "</span>"; } preElement.innerHTML = toShow.join("\n"); preElement.setAttribute("class", "nsi-xyz-code"); element.innerHTML = ""; element.appendChild(preElement); /* Ajout du style */ var style = document.createElement("style"); if (element.hasAttribute("theme")) { if (element.getAttribute("theme") == "light") { style.innerHTML = styles["code-light"]; } else { style.innerHTML = styles["code-dark"]; } } else { style.innerHTML = styles["code-dark"]; } element.appendChild(style); } else { alert("Le langage '"+toAddLang+"' n'est pas supporte."); } } else if (toAdd === "code" && !element.hasAttribute("lang")) { alert("Vous devez specifier un langage pour l'ajout de code."); } } else { alert("Vous devez specifier un add."); } } /* Fonctions diverses */ function addMenu(parent, element, donnees) { var child = document.createElement(donnees["childType"]); child.setAttribute("href", element[1]) var subChild = document.createElement("p"); subChild.setAttribute("class", donnees["childClass"]); subChild.innerHTML = element[0]; child.appendChild(subChild); parent.appendChild(child); } /* On définit la balise <nsi-xyz> avec les propiétés précédentes */ customElements.define("nsi-xyz", nsixyzElement); /* Styles et scripts */ var styles = { "menu" : "nsi-xyz{all: initial;} nsi-xyz * {all: unset; box-sizing: content-box;} nsi-xyz style {display: none} nsi-xyz script{display: none} #nsi-xyz-menu-title { position: fixed; top: 15px; right: 60px; z-index: 99999; }\n#nsi-xyz-menu-icon { position: fixed; top: 10px; right: 20px; width: 30px; height: 30px; z-index: 99999; }\n#nsi-xyz-menu * {font: 1em Helvetica; text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none; }\n#nsi-xyz-menu { position: fixed; top: 0; right: 0; width: 30%; height: 100%; z-index: 99998; background-color: #21b2a6; padding: 4em 2em 0 2em; overflow-x: initial; overflow-y: auto; }\n.nsi-xyz-menu-element { position: relative; display: block; border-bottom: 1px solid rgba(0,0,0,0.125); color: white; padding: 0.5em ; cursor: pointer;}", "code-dark" : ".nsi-xyz-code { counter-reset: lines; padding: 0.5em; font-family: monospace; background-color: #282923; color: #EEE; border-radius: 3px; overflow-x: auto; white-space: pre; display:block;}\n.nsi-xyz-code-line::before { counter-increment: lines; content: counter(lines) ' '; color: #777777; font-family: monospace; position: absolute; left: -50px;}\n.nsi-xyz-code-line { color: #ffffff; font-family: monospace; display: list-item inline; position: relative; left: 50px ; border-left: 1px solid #777777; padding: 0 0 0 5px; } \n.nsi-xyz-code-function { color: #67d8ef; font-family: monospace; }\n.nsi-xyz-code-string { color: #e7db74; font-family: monospace; }\n.nsi-xyz-code-numbers { color: #ac80e8; font-family: monospace; }\n.nsi-xyz-code-comment { color: #777777; font-family: monospace; } \n.nsi-xyz-code-keyword { color: #a6e22a; font-family: monospace; }\n.nsi-xyz-code-logic { color: #f92472; font-family: monospace; }\n.nsi-xyz-code-special { color: #fd9622; font-family: monospace; font-style: italic; }", "code-light" : ".nsi-xyz-code { counter-reset: lines; padding: 0.5em; font-family: monospace; background-color: #fafafa; color: #a0a1a7; border-radius: 3px; overflow-x: auto; white-space: pre; display:block; }\n.nsi-xyz-code-line::before { counter-increment: lines; content: counter(lines) ' '; color: #3592ae; font-family: monospace; position: absolute; left: -50px;}\n.nsi-xyz-code-line { color: #383a42; font-family: monospace; display: list-item inline; position: relative; left: 50px ; border-left: 1px solid #777777; padding: 0 0 0 5px; } \n.nsi-xyz-code-function { color: #4d83ef; font-family: monospace; }\n.nsi-xyz-code-string { color: #53a053; font-family: monospace; }\n.nsi-xyz-code-numbers { color: #976715; font-family: monospace; }\n.nsi-xyz-code-comment { color: #a0a1a7; font-family: monospace; } \n.nsi-xyz-code-keyword { color: #a530a3; font-family: monospace; }\n.nsi-xyz-code-logic { color: #a530a3; font-family: monospace; }\n.nsi-xyz-code-special { color: #e2574f; font-family: monospace; font-style: italic; }" }; var scripts = { "menu": "function changeMenuDisplay() { var isDisplayed = document.getElementById('nsi-xyz-menu').style.display; if (isDisplayed.toString() == 'none') {document.getElementById('nsi-xyz-menu').style.display = 'block'; document.getElementById('nsi-xyz-menu-title').style.display = 'inline-block';} else {document.getElementById('nsi-xyz-menu').style.display = 'none'; document.getElementById('nsi-xyz-menu-title').style.display = 'none';} }" };