Commit 23652735 authored by Sylvain Coulange's avatar Sylvain Coulange
Browse files

ajout mémoire couleur background

parent 5f964e3f
......@@ -10,6 +10,7 @@ class Data:
pphh: list
update: str
colorType: str
defaultBg: str
class Entree:
mot: str
......
......@@ -17,6 +17,7 @@ def main(request):
data.text = text
data.update = updateTime()
data.colorType = request.POST.get('colorType')
data.defaultBg = request.POST.get('defaultBg')
data.pphh = []
punctuation = [',','.'] # ')',']','}','%','>',"'",'(','[','{'
......@@ -51,6 +52,7 @@ def main(request):
data.pphh = [[[]]]
data.update = updateTime()
data.colorType = 'sw'
data.defaultBg = 'black'
return render(request, 'coloriseur.html', {'data': data})
def updateTime():
......@@ -64,6 +66,7 @@ def main0(request):
data.pphh = [[[]]]
data.update = updateTime()
data.colorType = 'sw'
data.defaultBg = 'black'
return render(request, 'coloriseur.html', {'data': data})
......
// KEYBOARD
// inspiré de https://mottie.github.io/Keyboard/
$.keyboard.keyaction.undo = function (base) {
base.execCommand('undo');
return false;
};
$.keyboard.keyaction.redo = function (base) {
base.execCommand('redo');
return false;
};
var apizones = Object.entries($('.api-kb'));
for (i = 0 ; i < apizones.length-2 ; i++) {
$(apizones[i][1]).keyboard({
usePreview: false, // disabled for contenteditable
useCombos: false,
autoAccept: true,
layout: 'custom',
customLayout: {
'normal': [
'ɑ ɔ ə ɛ ø œ ɥ ‿ \u0303',
'ɡ ʁ ʃ ʒ ɲ ŋ'
],
},
display: {
del: '\u2326:Delete',
redo: '',
undo: ''
}
});
};
......@@ -47,41 +47,35 @@ function toBicolor() {
};
};
function bg2white() {
// Initialisation couleur background (par défaut black)
if (document.getElementById('defaultBg').value == 'white') {
document.getElementById('outputDiv').classList.toggle('win-white');
document.getElementById('output').classList.toggle('graphContours');
}
// KEYBOARD
// inspiré de https://mottie.github.io/Keyboard/
$.keyboard.keyaction.undo = function (base) {
base.execCommand('undo');
return false;
};
$.keyboard.keyaction.redo = function (base) {
base.execCommand('redo');
return false;
};
var apizones = Object.entries($('.api-kb'));
function bg2white() {
if (document.getElementById('defaultBg').value == 'black') {
document.getElementById('defaultBg').value = 'white';
} else {
document.getElementById('defaultBg').value = 'black';
}
document.getElementById('outputDiv').classList.toggle('win-white');
document.getElementById('output').classList.toggle('graphContours');
//graph2whiteBg();
}
for (i = 0 ; i < apizones.length-2 ; i++) {
$(apizones[i][1]).keyboard({
usePreview: false, // disabled for contenteditable
useCombos: false,
autoAccept: true,
layout: 'custom',
customLayout: {
'normal': [
'ɑ ɔ ə ɛ ø œ ɥ ‿ \u0303',
'ɡ ʁ ʃ ʒ ɲ ŋ'
],
},
display: {
del: '\u2326:Delete',
redo: '',
undo: ''
}
});
};
// Changement des couleurs du bicolor
function graph2whiteBg() {
var bi1List = document.getElementsByClassName('bicolor1');
for (var i = 0; i < bi1List.length; i++) {
//bi1List.item(i).classList.remove("bicolorWhite1");
//bi1List.item(i).classList.remove("bicolorWhite2");
bi1List.item(i).classList.add('bicolorWhite1');
};
var bi2List = document.getElementsByClassName('bicolor2');
for (var i = 0; i < bi2List.length; i++) {
//bi1List.item(i).classList.remove("bicolorWhite1");
//bi1List.item(i).classList.remove("bicolorWhite2");
bi2List.item(i).classList.add('bicolorWhite2');
};
}
:root {
--phon_bicolor1: #ff0000;
--phon_bicolor2: #ffffff;
--phon_bicolor2: #40b9ff;
--phon_bicolorWhite1: #ff0000;
--phon_bicolorWhite2: #00a2ff;
--phon_o_maj_nas: #7f2a18;
--phon_1: #505050;
--phon_2: #c9004d;
......@@ -265,6 +267,10 @@ traitement des affriquées, glide+V et palatalisation
background-clip: unset;
-webkit-text-fill-color: initial;
}
.bicolorWhite1 {
color: var(--phon_bicolorWhite1);
fill: var(--phon_bicolorWhite1);
}
.bicolor2 {
color: var(--phon_bicolor2);
......@@ -272,4 +278,8 @@ traitement des affriquées, glide+V et palatalisation
background: none;
background-clip: unset;
-webkit-text-fill-color: initial;
}
.bicolorWhite2 {
color: var(--phon_bicolorWhite2);
fill: var(--phon_bicolorWhite2);
}
\ No newline at end of file
......@@ -15,14 +15,6 @@ h2 {
-webkit-text-stroke-color: black;
}
.fenetre {
display: inline-block;
margin-top: 100px;
background-color: white;
border: outset;
padding: 10px;
}
.inputDiv {
display: inline-table;
height: 100px;
......@@ -47,7 +39,7 @@ h2 {
}
textarea {
height: 60px;
height: 80px;
width: 90%;
padding: 10px;
margin: 5px;
......@@ -140,7 +132,7 @@ textarea {
.editDico {
display: inline-table;
height: 100px;
width: 65%;
width: 80%;
background-color: white;
border: outset;
padding-bottom: 20px;
......@@ -153,32 +145,43 @@ textarea {
display: flex;
flex-direction: row;
flex-wrap: nowrap; /* étale les items sur la largeur */
justify-content: center;
align-items: center; /* alignement vertical des items */
justify-content: stretch;
align-items: stretch; /* alignement vertical des items */
}
/* Responsive layout */
@media screen and (max-width: 900px) {
.searchWindow {
flex-direction: column;
}
}
.input {
flex: 50%;
padding: 10px;
}
.searchCondition {
-ms-flex: 25%; /* IE10 */
flex: 25%;
-ms-flex: 20%; /* IE10 */
flex: 20%;
padding: 3px;
margin: 5px;
}
.searchField {
-ms-flex: 25%; /* IE10 */
flex: 25%;
-ms-flex: 30%; /* IE10 */
flex: 30%;
padding: 3px;
margin: 5px;
}
.dicEntry {
display: inline-table;
height: 10px;
width: 70%;
margin: 3px;
display: -ms-flexbox; /* IE10 */
display: flex;
justify-content: center;
align-items: stretch;
width: 90%;
margin: 3px auto;
text-align: left;
}
......
......@@ -4,11 +4,11 @@
<head>
<title>Coloriseur phonographémique</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'styles/kinephones_style_v2.css'%}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/styles.css'%}">
<!-- <link rel="stylesheet" type="text/css" href="{% static 'styles/kinephones_style.css'%}"> -->
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
</head>
<body>
{% include 'header.html' %}
......@@ -22,6 +22,7 @@
<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
<input type="hidden" id="defaultBg" name="defaultBg" value="{{ data.defaultBg }}"/>
</div>
<h2>Entrer du texte à coloriser :</h2>
<textarea name="inText">{{ data.text }}</textarea><br/>
......@@ -63,7 +64,7 @@
'tok{{ forloop.counter }}' : 0,
{% endif %}
{% endfor %}
}
};
</script>
<script src="{% static 'scripts/main.js' %}"></script>
......
......@@ -5,11 +5,10 @@
<title>Éditeur dictionnaire</title>
<meta charset="utf-8">
<!-- keyboard widget css & script (required) -->
<link href="{% static 'styles/keyboard-dark.css'%}" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="{% static 'scripts/jquery.keyboard.js'%}"></script>
<link href="{% static 'styles/keyboard-dark.css'%}" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'styles/styles.css'%}">
</head>
......@@ -98,6 +97,6 @@
btnAdd.style.display='none';
}
</script>
<script src="{% static 'scripts/main.js' %}"></script>
<script src="{% static 'scripts/keyboard.js' %}"></script>
</body>
</html>
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment