coloriseur.html 5.97 KB
Newer Older
Sylvain Coulange's avatar
Sylvain Coulange committed
1
2
3
4
5
6
{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>Coloriseur phonographémique</title>
    <meta charset="utf-8">
7
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
8
    <link rel="stylesheet" type="text/css" href="{% static 'styles/kinephones_style_v2.css'%}">
Sylvain Coulange's avatar
Sylvain Coulange committed
9
    <link rel="stylesheet" type="text/css" href="{% static 'styles/styles.css'%}">
10
    <!-- <link rel="stylesheet" type="text/css" href="{% static 'styles/kinephones_style.css'%}"> -->
Sylvain Coulange's avatar
Sylvain Coulange committed
11
12
</head>
<body>
13
14
15
16
17
    {% include 'header.html' %}
    <h2>
            <span class="phon_k">C</span><span class="phon_o_maj">o</span><span class="phon_l">l</span><span class="phon_o_maj">o</span><span class="phon_r_maj">r</span><span class="phon_i">i</span><span class="phon_z">s</span><span class="phon_9">eu</span><span class="phon_r_maj">r</span>
            <span> </span><span class="phon_f">Ph</span><span class="phon_o_maj">o</span><span class="phon_n">n</span><span class="phon_o_maj">o</span><span class="phon_g">g</span><span class="phon_r_maj">r</span><span class="phon_a">a</span><span class="phon_f">ph</span><span class="phon_e">é</span><span class="phon_m">m</span><span class="phon_i">i</span><span class="phon_k">que</span>
    </h2>
Sylvain Coulange's avatar
Sylvain Coulange committed
18

Sylvain Coulange's avatar
Sylvain Coulange committed
19
20
    <div class="inputDiv">
        <form action="/app/" method="post">{% csrf_token %}
Sylvain Coulange's avatar
Sylvain Coulange committed
21
22
23
24
            <div class="param">
                <input id="swcolor" type="radio" name="colorType" value="sw" {%if data.colorType == "sw" %}checked{% endif %}> Silent Way<br/>
                <input id="bicolor" type="radio" name="colorType" value="bi" {%if data.colorType == "bi" %}checked{% endif %}> Bicolor
            </div>
Sylvain Coulange's avatar
Sylvain Coulange committed
25
26
27
            <h2>Entrer du texte à coloriser :</h2>
            <textarea name="inText">{{ data.text }}</textarea><br/>
            <input type="submit" value="Coloriser"/>
Sylvain Coulange's avatar
Sylvain Coulange committed
28
            <button formaction="/app/0">Effacer</button>
Sylvain Coulange's avatar
Sylvain Coulange committed
29
30
31
        </form>
    </div>

32
    <div class="win-black outputMainDiv">
Sylvain Coulange's avatar
Sylvain Coulange committed
33
        <h2>Résultat :</h2>
34
35
36
        <div class="output">
            {% for token in data.pphh %}{% if token == "§" %}<br/>{% elif token in ",.)]}%>"|make_list %}<span class="phon_neutre">{{ token }}</span>{% else %}<span> </span><span class="tokens" id='tok{{ forloop.counter }}' onclick="changeAlign(this.id)"></span>{% endif %}{% endfor %}
        </div>
37
38
    </div>

Sylvain Coulange's avatar
Sylvain Coulange committed
39
    <div>
40
        <form method="POST">{% csrf_token %}
Sylvain Coulange's avatar
Sylvain Coulange committed
41
42
43
44
            <button formaction="/app/dico/">Éditer le dictionnaire</button>
        </form>
    </div>

45
    {% include 'footer.html' %}
46

47
48
49
    <script type="text/javascript">
        var dicoTok = {
            {% for token in data.pphh %}
50
            {% if token != "§" %}
Sylvain Coulange's avatar
Sylvain Coulange committed
51
                'tok{{ forloop.counter }}' : [{% for trans in token %}'{% for entree in trans %}<span class="phon {{entree.phon}}">{{entree.graph}}</span>{% endfor %}',{% endfor %}],
52
            {% endif %}
53
54
55
56
57
            {% endfor %}
        };

        var dicoId = {
            {% for token in data.pphh %}
58
            {% if token != "§" %}
59
                'tok{{ forloop.counter }}' : 0, 
60
            {% endif %}
61
62
63
64
65
66
67
68
69
            {% endfor %}
        }

        var tokens = document.getElementsByClassName("tokens");
        var i;
        for (i = 0; i < tokens.length; i++) {
            tokens[i].innerHTML = dicoTok[tokens[i].id][0];
            if (dicoTok[tokens[i].id].length > 1) {
                $('#'+tokens[i].id).addClass('transMult');
70
                $('#'+tokens[i].id).prop('title', 'changer de prononciation');
71
72
73
            };
        };

Sylvain Coulange's avatar
Sylvain Coulange committed
74
75
76
77
        //réinitialise le bicolor (si bicolor)
        if (document.getElementById('bicolor').checked == true) {
                toBicolor();
        };
78
79
80
81
82
83
84
85
86
87

        function changeAlign(tok) {
            //console.log(tok);
            if (dicoId[tok] == dicoTok[tok].length-1) {
                dicoId[tok] = 0;
            } else {
                dicoId[tok] += 1;
            };
            //console.log(dicoId[tok]);
            document.getElementById(tok).innerHTML = dicoTok[tok][dicoId[tok]];
Sylvain Coulange's avatar
Sylvain Coulange committed
88
89
90
91
92
93
            
            //réinitialise le bicolor (si bicolor)
            if (document.getElementById('bicolor').checked == true) {
                toBicolor();
            };
        };
94

Sylvain Coulange's avatar
test 5    
Sylvain Coulange committed
95
        // POUR PASSER EN BICOLOR (se fait à partir du résultat aux couleurs SW)
Sylvain Coulange's avatar
Sylvain Coulange committed
96
97
98
        function toBicolor() {
            var phonList = document.getElementsByClassName("phon");
                for (var i = 0; i < phonList.length; i++) {
Sylvain Coulange's avatar
test 5    
Sylvain Coulange committed
99
100
                    if (phonList.item(i).classList.contains('phon_neutre') == false) {
                        if (i%2 == 0) {
Sylvain Coulange's avatar
Sylvain Coulange committed
101
102
                            phonList.item(i).style.color='red';
                            phonList.item(i).style.background='none';
Sylvain Coulange's avatar
test 7    
Sylvain Coulange committed
103
                            //phonList.item(i).style.webkitTextFillColor='unset';
Sylvain Coulange's avatar
Sylvain Coulange committed
104
                            phonList.item(i).style.backgroundClip='unset';
Sylvain Coulange's avatar
test 5    
Sylvain Coulange committed
105
                        } else {
Sylvain Coulange's avatar
Sylvain Coulange committed
106
107
                            phonList.item(i).style.color='yellow';
                            phonList.item(i).style.background='none';
Sylvain Coulange's avatar
test 7    
Sylvain Coulange committed
108
                            //phonList.item(i).style.webkitTextFillColor='unset';
Sylvain Coulange's avatar
Sylvain Coulange committed
109
                            phonList.item(i).style.backgroundClip='unset';
Sylvain Coulange's avatar
test 5    
Sylvain Coulange committed
110
                        };
Sylvain Coulange's avatar
Sylvain Coulange committed
111
112
113
114
115
                    };
    
                };
        };
        
Sylvain Coulange's avatar
test 5    
Sylvain Coulange committed
116
        /* NE FONCTIONNE PAS SUR SAFARI
Sylvain Coulange's avatar
Sylvain Coulange committed
117
        // POUR PASSER EN BICOLOR (se fait à partir du résultat aux couleurs SW)
Sylvain Coulange's avatar
Sylvain Coulange committed
118
119
120
        function toBicolor() {
            var phonList = document.getElementsByClassName("phon");
                for (var i = 0; i < phonList.length; i++) {
121
122
                    phonList.item(i).classList.remove("bicolor1");
                    phonList.item(i).classList.remove("bicolor2");
Sylvain Coulange's avatar
Sylvain Coulange committed
123
124
125
126
127
128
129
                    if (phonList.item(i).classList.contains('phon_neutre') == false) {
                        if (i%2 == 0) {
                            phonList.item(i).classList.add("bicolor1");
                        } else {
                            phonList.item(i).classList.add("bicolor2");
                        };
                    };
Sylvain Coulange's avatar
Sylvain Coulange committed
130
                };
131
        };
Sylvain Coulange's avatar
Sylvain Coulange committed
132
        */
133
134
135
    </script>


Sylvain Coulange's avatar
Sylvain Coulange committed
136
137
</body>
</html>