ajout fonction copier/coller

static/scripts/main.js

@@ -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";
+}
+

static/styles/popup.css

+/* 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

static/styles/styles.css

@@ -79,6 +79,11 @@ textarea {
     top: 0px;
     padding: 15px;
 }
+.outputParam span {
+    cursor: pointer;
+    padding: 5px;
+    font-size: 1em;
+}
 
 .output {
     display: inline-table;

templates/coloriseur.html

@@ -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">