devs
/
FestivAlgo
5
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
FestivAlgo/assets/js/interface.js

537 lines
17 KiB
JavaScript
Raw Blame History

var process = 0;
var pause = 0;
var reset = 0;
var lire_pending = 0;
var langage_avant_publier = 1;
$(document).ready(function() {
const btn_conversion_algo = $('#programm .action_buttons .conversion_algo');
const btn_conversion_casio = $('#programm .action_buttons .conversion_casio');
const btn_conversion_ti = $('#programm .action_buttons .conversion_ti');
const btn_action_executer = $('#programm .action_buttons .executer');
const btn_action_pause = $('#programm .action_buttons .pause');
const btn_action_reset = $('#programm .action_buttons .reset');
var TIME = 600;
var langage = 1;
var time = 0;
var indices = [
0, 2, 6 , 12,
20, 22, 26, 31,
39, 41, 45, 48,
56
];
var instructions = [
"Lire", "Afficher", "Si", "Alors", "Sinon", "Fin_Si", "Tant_que", "Fin_Tant_que", "Pour", "Allant_de", "à", "Fin_Pour", "Prend_la_valeur", "Hasard", "ET", "OU", "Partie_entière", "Partie_décimale", "Valeur_absolue", "Fin_programme",
"?", "∠", "If", "Then", "Else", "IfEnd", "While", "WhileEnd", "For", "To", "Next", "→", "#Ran", "and", "or", "Int", "Frac", "Abs", "Stop",
"Input", "Disp", "If", "Then", "Else", "End", "While", "For(", "End", "→", "rand", "and", "or", "int(", "fPart(", "abs(", "Stop"
];
function affiche_conversion() {
if(langage == 1)
{
btn_conversion_algo.hide();
btn_conversion_casio.show();
btn_conversion_ti.show();
}
else if(langage == 2)
{
btn_conversion_casio.hide();
btn_conversion_ti.show();
btn_conversion_algo.show();
}
else if(langage == 3)
{
btn_conversion_ti.hide();
btn_conversion_algo.show();
btn_conversion_casio.show();
}
return false;
}
function hide_langage() {
$('.current_language > span').hide();
}
function affiche_langage() {
hide_langage();
if(langage == 1)
$('#langage_algo').show();
if(langage == 2)
$('#langage_casio').show();
if(langage == 3)
$('#langage_ti').show();
$('#info_contenu').replaceWith("<span id='info_contenu'>Cliquez sur l'une des icônes, puis sélectionnez une instruction.</span>");
}
function changement_langage() {
var result;
btn_conversion_algo.click(function(event) {
if(new Date().getTime() - time > TIME && process == 0)
{
btn_action_executer.unbind('click');
time = new Date().getTime();
process = 1;
result = traduction(langage, 1, 1);
if(result == "completed")
{
langage = 1;
langage_avant_publier = 1;
affiche_conversion();
affiche_langage();
}
process = 0;
boutons();
$("#saisie").cleditor()[0].disable(false);
}
});
btn_conversion_casio.click(function(event) {
if(new Date().getTime() - time > TIME && process == 0)
{
btn_action_executer.unbind('click');
time = new Date().getTime();
process = 1;
result = traduction(langage, 2, 1);
if(result == "completed")
{
langage = 2;
langage_avant_publier = 2;
affiche_conversion();
affiche_langage();
}
process = 0;
boutons();
$("#saisie").cleditor()[0].disable(false);
}
});
btn_conversion_ti.click(function(event) {
if(new Date().getTime() - time > TIME && process == 0)
{
btn_action_executer.unbind('click');
time = new Date().getTime();
process = 1;
result = traduction(langage, 3, 1);
if(result == "completed")
{
langage = 3;
langage_avant_publier = 3;
affiche_conversion();
affiche_langage();
}
process = 0;
boutons();
$("#saisie").cleditor()[0].disable(false);
}
});
}
function init_boutons() {
btn_action_pause.hide();
}
function boutons() {
btn_action_executer.click(function() {
if(process == 0)
{
pause = 0;
process = 1;
reset = 0;
execution(langage, 0);
process = 0;
}
if(lire_pending == 1 && pause == 1)
{
btn_action_executer.hide();
btn_action_pause.show();
pause = 0;
document.getElementById("lire").focus();
}
});
btn_action_pause.click(function() {
btn_action_pause.hide();
btn_action_executer.show();
pause = 1;
});
btn_action_reset.click(function() {
btn_action_pause.hide();
btn_action_executer.show();
reset = 1;
process = 0;
execution_init();
$("#saisie").cleditor()[0].disable(false);
});
}
function signes() {
$('#signe1').click(function() {
addText(" &ge; ");
});
$('#signe2').click(function() {
addText(" &le; ");
});
$('#signe3').click(function() {
addText(" &ne; ");
});
$('#signe4').click(function() {
addText("Racine_Carrée(");
});
$('#signe5').click(function() {
addText("^");
});
$('#signe6').click(function() {
addText("&pi;");
});
$('#signe7').click(function() {
addText("exp(");
});
$('#signe8').click(function() {
addText("ln");
});
}
function addText(instext) {
/*var content = document.getElementById("saisie").value;
var saut = 0;
if(content.lastIndexOf("<div>") != -1)
saut = 6;
if(content.lastIndexOf("<br>") != -1)
saut = 10;
document.getElementById("saisie").value = content.substring(0, content.length - saut) + " " + instext;
if(content.lastIndexOf("<div>") != -1)
document.getElementById("saisie").value += "</div>";
$("#saisie").cleditor()[0].updateFrame().focus();*/
if(navigator.appName=='Microsoft Internet Explorer'){
var content = document.getElementById("saisie").value;
var saut = 0;
if(content.lastIndexOf("<div>") != -1)
saut = 6;
if(content.lastIndexOf("<br>") != -1)
saut = 10;
document.getElementById("saisie").value = content.substring(0, content.length - saut) + " " + instext;
if(content.lastIndexOf("<div>") != -1)
document.getElementById("saisie").value += "</div>";
$("#saisie").cleditor()[0].updateFrame().focus();
}
else
{
document.getElementById("main_iframe").blur();
document.getElementById("main_iframe").contentWindow.document.execCommand("InsertHTML", false, instext);
document.getElementById("main_iframe").focus();
}
}
function close_dropdown_menu() {
$('#dropdown_menu').hide();
}
function menus_deroulants_show() {
$('.icone').mouseenter(function() {
var iconeNb, indice_pointeur, ongletNb;
var id = $(this).attr('id');
if(id == 'entrees-sorties')
iconeNb = 0;
if(id == 'conditions')
iconeNb = 1;
if(id == 'boucles')
iconeNb = 2;
if(id == 'autres')
iconeNb = 3;
indice_pointeur = indices[(langage - 1) * 4 + iconeNb];
ongletNb = indices[(langage - 1) * 4 + iconeNb + 1] - indice_pointeur;
let x = $(this).position().left;
// avoid overlapping the info box
if (iconeNb >= 3)
x = $(this).position().left + $(this).width() - 130
let y = $(this).position().top + $(this).height();
close_dropdown_menu();
show_dropdown(x, y, ongletNb, indice_pointeur);
add_instruction_events(ongletNb);
add_dropdown_close_events();
})
}
function add_dropdown_close_events() {
$('.cleditorMain').mouseenter(function() {
close_dropdown_menu();
});
$('.top_buttons').mouseleave(() => {
close_dropdown_menu();
})
}
function show_dropdown(x, y, ongletNb, indice_pointeur) {
$('#dropdown_menu').hide();
$('#dropdown_menu').empty();
$('#dropdown_menu').css('top', y);
$('#dropdown_menu').css('left', x);
for(i = 1; i <= ongletNb; i++)
{
$('#dropdown_menu').append('<li><a href="#" data-instruction-number="' + (indice_pointeur + i - 1) + '" class="instruction" id="instruction' + i + '">' + instructions[indice_pointeur + i - 1] + '</a></li>')
}
$('#dropdown_menu').show();
}
function add_instruction_events(ongletNb) {
var i, syntaxe;
for(i = 1; i <= ongletNb; i++)
{
$('#instruction' + i).mouseenter(function() {
let text = instructions[$(this).data('instruction-number')]
switch(text)
{
case 'Lire':
syntaxe = "<span class='mot_cle'>Lire </span><span class='indications'>variable</span>";
break;
case 'Afficher':
syntaxe = "<span class='mot_cle'>Afficher </span><span class='indications'>\"Mon texte\" (ou variable)</span>";
break;
case 'Si':
syntaxe = "<span class='mot_cle'>Si </span><span class='indications'>condition</span><br /><span class='mot_cle'>Alors </span><span class='indications'>Instructions</span><br />(<span class='mot_cle'>Sinon </span><span class='indications'>Instructions</span>)<br /><span class='mot_cle'>Fin_Si</span>";
break;
case 'Tant_que':
syntaxe = "<span class='mot_cle'>Tant_que </span><span class='indications'>condition</span><br /><span class='indications'>Instructions</span><br /><span class='mot_cle'>Fin_Tant_que</span>";
break;
case 'Fin_Tant_que':
syntaxe = "<span class='mot_cle'>Tant_que </span><span class='indications'>condition</span><br /><span class='indications'>Instructions</span><br /><span class='mot_cle'>Fin_Tant_que</span>";
break;
case 'Pour':
syntaxe = "<span class='mot_cle'>Pour </span><span class='indications'>variable </span><span class='mot_cle'>Allant_de </span><span class='indications'>départ </span><span class='mot_cle'>à </span><span class='indications'>arrivée</span><br /><span class='indications'>Instructions</span><br /><span class='mot_cle'>Fin_Pour</span>";
break;
case 'Prend_la_valeur':
syntaxe = "<span class='indications'>variable </span><span class='mot_cle'>Prend_la_valeur </span><span class='indications'>valeur</span>";
break;
case 'Hasard':
syntaxe = "<span class='mot_cle'>Hasard(</span><span class='indications'>(valeur maximale)</span>";
break;
case 'ET':
syntaxe = "<span class='indications'>condition 1 </span><span class='mot_cle'>ET </span><span class='indications'>condition 2</span>";
break;
case 'OU':
syntaxe = "<span class='indications'>condition 1 </span><span class='mot_cle'>OU </span><span class='indications'>condition 2</span>";
break;
case 'Partie_entière':
syntaxe = "<span class='mot_cle'>Partie_entière </span><span class='indications'>(valeur)</span>";
break;
case 'Partie_décimale':
syntaxe = "<span class='mot_cle'>Partie_décimale </span><span class='indications'>(valeur)</span>";
break;
case 'Valeur_absolue':
syntaxe = "<span class='mot_cle'>Valeur_absolue </span><span class='indications'>(valeur)</span>";
break;
case 'Fin_programme':
syntaxe = "<span class='mot_cle'>Fin_programme</span>";
break;
case '?':
syntaxe = "<span class='mot_cle'>? </span><span class='indications'>&rarr; variable</span>";
break;
case '&ang;':
syntaxe = "<span class='indications'>\"Mon texte\" (ou variable)</span><span class='mot_cle'>&ang;</span>";
break;
case 'If':
syntaxe = "<span class='mot_cle'>If </span><span class='indications'>condition</span><br /><span class='mot_cle'>Then </span><span class='indications'>Instructions</span><br />(<span class='mot_cle'>Else </span><span class='indications'>Instructions</span>)<br /><span class='mot_cle'>IfEnd</span>";
break;
case 'While':
syntaxe = "<span class='mot_cle'>While </span><span class='indications'>condition</span><br /><span class='indications'>Instructions</span><br /><span class='mot_cle'>WhileEnd</span>";
break;
case 'WhileEnd':
syntaxe = "<span class='mot_cle'>While </span><span class='indications'>condition</span><br /><span class='indications'>Instructions</span><br /><span class='mot_cle'>WhileEnd</span>";
break;
case 'For':
syntaxe = "<span class='mot_cle'>For </span><span class='indications'>départ&rarr;variable <span class='mot_cle'>To </span><span class='indications'>arrivée</span><br /><span class='indications'>Instructions</span><br /><span class='mot_cle'>Next</span>";
break;
case '&rarr;':
syntaxe = "<span class='indications'>valeur </span><span class='mot_cle'>&rarr; </span><span class='indications'>variable</span>";
break;
case 'rand':
syntaxe = "<span class='mot_cle'>rand</span><span class='indications'>(valeur maximale)</span>";
break;
case 'and':
syntaxe = "<span class='indications'>condition 1 </span><span class='mot_cle'>and </span><span class='indications'>condition 2</span>";
break;
case 'or':
syntaxe = "<span class='indications'>condition 1 </span><span class='mot_cle'>or </span><span class='indications'>condition 2</span>";
break;
case 'Int':
syntaxe = "<span class='mot_cle'>Int</span><span class='indications'>(valeur)</span>";
break;
case 'Frac':
syntaxe = "<span class='mot_cle'>Frac</span><span class='indications'>(valeur)</span>";
break;
case 'Abs':
syntaxe = "<span class='mot_cle'>Abs</span><span class='indications'>(valeur)</span>";
break;
case 'Stop':
syntaxe = "<span class='mot_cle'>Stop</span>";
break;
case 'Input':
syntaxe = "<span class='mot_cle'>Input </span><span class='indications'>variable</span>";
break;
case 'Disp':
syntaxe = "<span class='mot_cle'>Disp </span><span class='indications'>\"Mon texte\" (ou variable)</span>";
break;
case 'If':
syntaxe = "<span class='mot_cle'>If </span><span class='indications'>condition</span><br /><span class='mot_cle'>Then </span><span class='indications'>Instructions</span><br />(<span class='mot_cle'>Else </span><span class='indications'>Instructions</span>)<br /><span class='mot_cle'>End</span>";
break;
case 'While':
syntaxe = "<span class='mot_cle'>While </span><span class='indications'>condition</span><br /><span class='indications'>Instructions</span><br /><span class='mot_cle'>End</span>";
break;
case 'For(':
syntaxe = "<span class='mot_cle'>For(</span><span class='indications'>variable, départ, arrivée)<br /><span class='indications'>Instructions</span><br /><span class='mot_cle'>End</span>";
break;
case '#Ran':
syntaxe = "<span class='indications'>(valeur maximale)</span><span class='mot_cle'>#Ran</span>";
break;
case 'int(':
syntaxe = "<span class='mot_cle'>int(</span><span class='indications'>valeur)</span>";
break;
case 'fPart(':
syntaxe = "<span class='mot_cle'>fPart(</span><span class='indications'>valeur)</span>";
break;
case 'abs(':
syntaxe = "<span class='mot_cle'>abs(</span><span class='indications'>valeur)</span>";
break;
}
$('#infos').html(syntaxe);
});
}
$('.instruction').click(function() {
let num = $(this).data('instruction-number');
let text = instructions[num]
close_dropdown_menu();
console.log(num)
if((num >= 16 && num <= 18) || num == 13 || (num >= 35 && num <= 37) || num == 49)
text += "()";
if(num >= 52 && num <= 54)
text += ")";
if(num == 32)
text = "()" + text;
addText(text + " ");
return false;
});
}
function default_code()
{
if((document.cookie.indexOf('exemple=') == -1 || readCookie('exemple') == "init") && document.cookie.indexOf('last_algo=') != -1 && document.cookie.indexOf('last_language=') != -1 && (readCookie('last_language') == 1 || readCookie('last_language') == 2 || readCookie('last_language') == 3)){
langage = readCookie('last_language');
var t;
switch(langage)
{
case "1": t = 1; break;
case "2": t = 2; break;
case "3": t = 3; break;
}
langage = t;
var code = unescape(readCookie('last_algo'));
document.getElementById("saisie").value = code;
$("#saisie").cleditor()[0].updateFrame().focus();
affiche_conversion();
affiche_langage();
}
}
$("#saisie").cleditor().focus(); // transforme le textarea en éditeur html
$('#execution').show();
$('#debug').hide();
$('#disable').hide();
close_dropdown_menu();
affiche_langage();
changement_langage();
affiche_conversion();
init_boutons();
boutons();
signes();
menus_deroulants_show();
default_code();
alert_mobile();
});
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value;
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function alert_mobile() {
if(/iPhone|iPod|Android|opera mini|blackberry|palm os|palm|hiptop|avantgo|plucker|xiino|blazer|elaine|iris|3g_t|windows ce|opera mobi|windows ce; smartphone;|windows ce;iemobile/i.test(navigator.userAgent)){
alert("Cette interface ne fonctionne pas encore sur mobile. Merci de vous procurer un ordinateur pour l'utiliser.");
}
}
Reference in New Issue View Git Blame Copy Permalink