Commit 03eb607d authored by Sylvain Coulange's avatar Sylvain Coulange
Browse files

ajout fonction copier/coller

parent 54656cec
......@@ -79,3 +79,128 @@ function graph2whiteBg() {
bi2List.item(i).classList.add('bicolorWhite2');
};
}
//////////////////////////////////////
////////// PARAMÉTRAGE POPUP /////////
////////// POUR COPIER TEXTE /////////
//////////////////////////////////////
// Get the modal
var modal = document.getElementById("myModal");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// Fonction pour ouvrir le PopUp
function getPopUp() {
var outputContent = document.getElementById('output').innerHTML;
// <span> </span><span class="tokens" id="tok1" onclick="changeAlign(this.id)"><span class="phon phon_b">B</span><span class="phon phon_o_maj_nas">on</span><span class="phon phon_z_maj">j</span><span class="phon phon_u">ou</span><span class="phon phon_r_maj">r</span></span><span> </span><span class="tokens transMult" id="tok2" onclick="changeAlign(this.id)" title="changer de prononciation"><span class="phon phon_neutre">à</span></span><span> </span><span class="tokens transMult" id="tok3" onclick="changeAlign(this.id)" title="changer de prononciation"><span class="phon phon_t">t</span><span class="phon phon_u">ous</span></span>
function phon2color(correspondance, p1, decalage, chaine){
if (p1 == 'phon_wa'){
var col1 = getComputedStyle(document.documentElement).getPropertyValue('--phon_w');
var col2 = getComputedStyle(document.documentElement).getPropertyValue('--phon_a');
var res = '<span style="background-color:'+col1+';color:'+col2+';-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: black;">';
} else if (p1 == 'phon_we_maj_nas'){
var col1 = getComputedStyle(document.documentElement).getPropertyValue('--phon_w');
var col2 = getComputedStyle(document.documentElement).getPropertyValue('--phon_e_maj_nas');
var res = '<span style="background-color:'+col1+';color:'+col2+';-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: black;">';
} else if (p1 == 'phon_ij'){
var col1 = getComputedStyle(document.documentElement).getPropertyValue('--phon_i');
var col2 = getComputedStyle(document.documentElement).getPropertyValue('--phon_j');
var res = '<span style="background-color:'+col1+';color:'+col2+';-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: black;">';
} else if (p1 == 'phon_nj'){
var col1 = getComputedStyle(document.documentElement).getPropertyValue('--phon_n');
var col2 = getComputedStyle(document.documentElement).getPropertyValue('--phon_j');
var res = '<span style="background-color:'+col1+';color:'+col2+';-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: black;">';
} else if (p1 == 'phon_ts_maj'){
var col1 = getComputedStyle(document.documentElement).getPropertyValue('--phon_t');
var col2 = getComputedStyle(document.documentElement).getPropertyValue('--phon_s_maj');
var res = '<span style="background-color:'+col1+';color:'+col2+';-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: black;">';
} else if (p1 == 'phon_dz_maj'){
var col1 = getComputedStyle(document.documentElement).getPropertyValue('--phon_d');
var col2 = getComputedStyle(document.documentElement).getPropertyValue('--phon_z_maj');
var res = '<span style="background-color:'+col1+';color:'+col2+';-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: black;">';
} else if (p1 == 'phon_ks'){
var col1 = getComputedStyle(document.documentElement).getPropertyValue('--phon_k');
var col2 = getComputedStyle(document.documentElement).getPropertyValue('--phon_s');
var res = '<span style="background-color:'+col1+';color:'+col2+';-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: black;">';
} else if (p1 == 'phon_gz'){
var col1 = getComputedStyle(document.documentElement).getPropertyValue('--phon_g');
var col2 = getComputedStyle(document.documentElement).getPropertyValue('--phon_z');
var res = '<span style="background-color:'+col1+';color:'+col2+';-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: black;">';
} else if (p1 == 'phon_ts'){
var col1 = getComputedStyle(document.documentElement).getPropertyValue('--phon_t');
var col2 = getComputedStyle(document.documentElement).getPropertyValue('--phon_s');
var res = '<span style="background-color:'+col1+';color:'+col2+';-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: black;">';
} else {
var col = getComputedStyle(document.documentElement).getPropertyValue('--'+p1);
var res = '<span style="color:'+col+';">';
}
console.log(p1+''+col);
console.log(res);
return res;
}
function bicol2color(correspondance, p1, decalage, chaine){
var col = getComputedStyle(document.documentElement).getPropertyValue('--phon_'+p1);
var res = '<span style="color:'+col+';">';
console.log(p1+''+col);
console.log(res);
return res;
}
outputContent = outputContent.replace(/<span class="phon (\w+)">/g, phon2color);
outputContent = outputContent.replace(/<span class="phon \w+ (\w+)">/g, bicol2color);
outputContent = outputContent.replace(/onclick="changeAlign\(this\.id\)"/g,'');
outputContent = outputContent.replace(/title="changer de prononciation"/g,'');
outputContent = outputContent.replace(/class="tokens( transMult)*" /g,'');
outputContentWhite = outputContent.replace(/#ffffff/g,'#000000');
document.getElementById('pLienDiv').innerHTML = outputContent;
document.getElementById('pLienDivWhite').innerHTML = outputContentWhite;
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
// COPIE AUTO DU LIEN DANS PRESSE-PAPIER
function toClipBoard(containerid) {
//var copyText = document.getElementById("pLienDiv");
// copyText.select();
// copyText.setSelectionRange(0, 99999);
// document.execCommand("copy");
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(containerid));
range.select().createTextRange();
document.execCommand("copy");
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById(containerid));
window.getSelection().addRange(range);
document.execCommand("copy");
}
var tooltip = document.getElementById("myTooltip");
tooltip.innerHTML = "Copié !";
}
function outFunc() {
var tooltip = document.getElementById("myTooltip");
tooltip.innerHTML = "Copier";
}
function outFuncWhite() {
var tooltip = document.getElementById("myTooltipWhite");
tooltip.innerHTML = "Copier";
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 50%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {padding: 20px 16px;}
.modal-body p {
text-align: left;
}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
font-style: italic;
}
/* TextArea du lien à copier */
.copyButton {
position: relative;
display: inline-block;
margin: 5px;
}
.copyButton .copyButtonText {
position: absolute;
bottom: 115px;
left: 50%;
visibility: hidden;
width: 130px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
z-index: 1;
margin: -75px;
opacity: 0;
transition: opacity 0.3s;
}
.copyButton .copyButtonText::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.copyButton:hover .copyButtonText {
visibility: visible;
opacity: 1;
}
.pLienDiv {
border: outset;
/* background-color: black; */
padding: 10px 5px;
font-size: 2em;
text-align: left;
/* font-weight: bold; */
}
\ No newline at end of file
......@@ -79,6 +79,11 @@ textarea {
top: 0px;
padding: 15px;
}
.outputParam span {
cursor: pointer;
padding: 5px;
font-size: 1em;
}
.output {
display: inline-table;
......
......@@ -7,6 +7,7 @@
<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/popup.css'%}">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
</head>
......@@ -32,8 +33,9 @@
</div>
<div id="outputDiv" class="win-black outputMainDiv">
<div class="outputParam" onclick="bg2white()">
<span class="glyphicon glyphicon-adjust" aria-hidden="true" title="Changer la couleur du fond"></span>
<div class="outputParam">
<span class="glyphicon glyphicon-adjust" aria-hidden="true" title="Changer la couleur du fond" onclick="bg2white()"></span><br>
<span class="glyphicon glyphicon-duplicate" aria-hidden="true" title="Copier/Coller le contenu" onclick="getPopUp()"></span>
</div>
<h2>Résultat :</h2>
<div id="output" class="output">
......@@ -47,6 +49,32 @@
</form>
</div>
<!-- Modal PopUp qui apparaît lors de l'enregistrement -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">&times;</span>
<h2>Copier/coller le résultat</h2>
</div>
<div class="modal-body">
<p>Le texte ci-dessous peut-être copié-collé dans Word, LibreOffice ou dans un email, par exemple.</p>
<div id="pLienDiv" contenteditable="true" class="pLienDiv" style="background-color: #000000; font-weight: bold;"></div>
<div class="copyButton">
<button onclick="toClipBoard('pLienDiv')" onmouseout="outFunc()"><span class="copyButtonText" id="myTooltip">Copier</span>Copier</button>
</div>
<div id="pLienDivWhite" contenteditable="true" class="pLienDiv" style="font-weight: bold;-webkit-text-stroke-width: 0.5px;-webkit-text-stroke-color: #000000;"></div>
<div class="copyButton">
<button onclick="toClipBoard('pLienDivWhite')" onmouseout="outFuncWhite()"><span class="copyButtonText" id="myTooltipWhite">Copier</span>Copier</button>
</div>
</div>
<div class="modal-footer">
<h3>WikiColor</h3>
</div>
</div>
</div>
{% include 'footer.html' %}
<script type="text/javascript">
......
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