test bicolors

colorapp/models.py

@@ -9,6 +9,7 @@ class Data:
     text: str
     pphh: list
     update: str
+    colorType: str
 
 class Entree:
     mot: str

colorapp/views.py

@@ -16,6 +16,7 @@ def main(request):
         data = Data()
         data.text = text
         data.update = updateTime()
+        data.colorType = request.POST.get('colorType')
         data.pphh = []
 
         punctuation = [',','.'] # ')',']','}','%','>',"'",'(','[','{'

static/styles/styles.css

@@ -31,6 +31,14 @@ h2 {
     padding: 10px;
     margin: 10px;
     text-align: center;
+    position: relative;
+}
+
+.param {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    text-align: left;
 }
 
 .inputDiv h2 {
@@ -84,6 +92,8 @@ textarea {
     width: 97%;
 }
 
+/************** STYLES DU DICTIONNAIRE *****************/
+
 .editDico {
     display: inline-table;
     height: 100px;

templates/coloriseur.html

@@ -18,6 +18,10 @@
 
     <div class="inputDiv">
         <form action="/app/" method="post">{% csrf_token %}
+            <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>
             <h2>Entrer du texte à coloriser :</h2>
             <textarea name="inText">{{ data.text }}</textarea><br/>
             <input type="submit" value="Coloriser"/>
@@ -44,7 +48,7 @@
         var dicoTok = {
             {% for token in data.pphh %}
             {% if token != "§" %}
-                'tok{{ forloop.counter }}' : [{% for trans in token %}'{% for entree in trans %}<span class="{{entree.phon}}">{{entree.graph}}</span>{% endfor %}',{% endfor %}],
+                'tok{{ forloop.counter }}' : [{% for trans in token %}'{% for entree in trans %}<span class="phon {{entree.phon}}">{{entree.graph}}</span>{% endfor %}',{% endfor %}],
             {% endif %}
             {% endfor %}
         };
@@ -67,7 +71,10 @@
             };
         };
 
-        
+        //réinitialise le bicolor (si bicolor)
+        if (document.getElementById('bicolor').checked == true) {
+                toBicolor();
+        };
 
         function changeAlign(tok) {
             //console.log(tok);
@@ -78,7 +85,23 @@
             };
             //console.log(dicoId[tok]);
             document.getElementById(tok).innerHTML = dicoTok[tok][dicoId[tok]];
+            
+            //réinitialise le bicolor (si bicolor)
+            if (document.getElementById('bicolor').checked == true) {
+                toBicolor();
+            };
+        };
 
+        // POUR PASSER EN BICOLOR (se fait à partir du résultat aux couleurs SW)
+        function toBicolor() {
+            var phonList = document.getElementsByClassName("phon");
+                for (var i = 0; i < phonList.length; i++) {
+                    if (i%2 == 0) {
+                        phonList.item(i).style.color='red';
+                    } else {
+                        phonList.item(i).style.color='white';
+                    };   
+                };
         };
     </script>