Amélioration du copier en presse papier sur les input

et mise en place d'un mode maintenance

config.yaml.dist

@@ -1,5 +1,8 @@
 shortTitle: "File 2 Link"
 title: "A file against a temporary link"
+maintenanceMod: false                   # true or false
+maintenanceMsg: "A maintenance is in progress ... Please come back later"
+mainteneurIp: "X.X.X.X"
 backgroundImage: https://picsum.photos/1024/768?random=1
 baseUrl: https://yoururl.tdl/
 uploadDir: files												# Dir in Read/Write accès

index.php

@@ -196,8 +196,18 @@ if (isset($_GET['action']) && $_GET['action'] == 'del') {
         </div>
         <div id="languesLegende" style="display: none"></div>
         <div id="page-wrap">
-        <?php @include_once('./header-page.php'); ?>
-        <?php
+        <?php 
+            if ($config['maintenanceMod'] == true && $config['mainteneurIp'] != $_SERVER['REMOTE_ADDR'])  {
+                echo '<h1>'._('Maintenance').'</h2>';
+                echo '<p>'.$config['maintenanceMsg'].'</p>';
+            } else {
+            
+            // signaler au mainteneur que le mode maintenance est à true
+            if ($config['maintenanceMod'] == true)  {
+                echo '<p>'._('Mode Maintenance as true').'</p>';
+            } 
+            
+            @include_once('./header-page.php'); 
             $similarServicesLink='';
             if ($config['similarServicesView']) {
                 $similarServicesLink='<div class="similarServices">
@@ -223,8 +233,8 @@ if (isset($_GET['action']) && $_GET['action'] == 'del') {
             if (!$config['htmlPages'] && $action == 'page')  {
                 $action = '404';
             }
-            $echoNewUpload = '<div class="newUpload"><a href="'.$config['baseUrl'].'"><img src="'.$config['baseUrl'].'/lib/upload.svg" /></a>
-            <a class="myFiles" href="'.$config['baseUrl'].'/My"><img src="'.$config['baseUrl'].'/lib/folder.svg" /></a>
+            $echoNewUpload = '<div class="newUpload"><a href="'.$config['baseUrl'].'" rel="tooltip" class="bulles" title="'._('Send a new file').'"><img src="'.$config['baseUrl'].'/lib/upload.svg" /></a>
+            <a rel="tooltip" class="bulles myFiles" title="'._('See the files already sent').' href="'.$config['baseUrl'].'/My"><img src="'.$config['baseUrl'].'/lib/folder.svg" /></a>
             '.$similarServicesLink.'</div>
                  <script>
                     if (localStorage.getItem(\'myFiles\')) {
@@ -291,8 +301,8 @@ if (isset($_GET['action']) && $_GET['action'] == 'del') {
                         echo '<div class="fileGlobal fileAll file-ext-zip" >';
                             echo '<div class="file fileAll icone" onclick="location.href=\''.$linkDownload.'\'"><div class="fi fi-zip fi-size-lg"><div class="fi-content">zip</div></div></div>';
                             echo '<div class="file fileAll name"><a href="'.$linkDownload.'" target="_blank">'._('All').'</a> -  <a class="delete deleteLink" href="'.$config['baseUrl'].'del/'.$id.'/KEYHERE/"><img width="15" src="'.$config['baseUrl'].'/lib/trash.svg" /> '._('Delete all (permanently)').'</a></div>';
-                            echo '<div class="file fileAll read input"><a href="'.$config['baseUrl'].$id.'/" target="_blank"><img src="'.$config['baseUrl'].'/lib/eye.svg" /></a> <input class="copy read fileAll" name="read" type="text" value="'.$config['baseUrl'].$id.'/" readonly=""></div>';
-                            echo '<div class="file fileAll dl input"><a href="'.$linkDownload.'" target="_blank"><img src="'.$config['baseUrl'].'/lib/download.svg"</a> /><input class="copy dl fileAll" name="dl" type="text" value="'.$linkDownload.'" readonly=""></div>';
+                            echo '<div class="file fileAll read input"><a href="'.$config['baseUrl'].$id.'/" target="_blank"><img src="'.$config['baseUrl'].'/lib/eye.svg" /></a> <a rel="tooltip" class="bulles" title="'._('Click to copy the link to the clipboard').'"><input class="copy read fileAll" name="read" type="text" value="'.$config['baseUrl'].$id.'/" readonly=""></a></div>';
+                            echo '<div class="file fileAll dl input"><a href="'.$linkDownload.'" target="_blank"><img src="'.$config['baseUrl'].'/lib/download.svg" /></a> <a rel="tooltip" class="bulles" title="'._('Click to copy the link to the clipboard').'"><input class="copy dl fileAll" name="dl" type="text" value="'.$linkDownload.'" readonly=""></a></div>';
                         echo '</div>';
                     }
                     $idFile=0;
@@ -321,8 +331,8 @@ if (isset($_GET['action']) && $_GET['action'] == 'del') {
                                 echo '<span class="type file'.$idFile.'">'._('Type').' : '.mime_content_type($pathInfo['dirname'].'/'.$pathInfo['basename']).'</span> ';
                                 //echo '<span class="size">'._('Type').' : '.mime_content_type($pathInfo['dirname'].'/'.$pathInfo['basename']).'</span> ';
                             echo '</div>';
-                            echo '<div class="file file'.$idFile.' read input"><a href="'.$config['baseUrl'].$id.'/'.$fileInUploadDirId.'" target="_blank"><img src="'.$config['baseUrl'].'/lib/eye.svg" /></a> <input class="copy read file'.$idFile.'" name="read" type="text" value="'.$config['baseUrl'].$id.'/'.$fileInUploadDirId.'" readonly=""></div>';
-                            echo '<div class="file file'.$idFile.' dl input"><a href="'.$linkDownload.'" target="_blank"><img src="'.$config['baseUrl'].'/lib/download.svg" /></a> <input class="copy dl file'.$idFile.'" name="dl" type="text" value="'.$linkDownload.'" readonly=""></div>';
+                            echo '<div class="file file'.$idFile.' read input"><a href="'.$config['baseUrl'].$id.'/'.$fileInUploadDirId.'" target="_blank"><img src="'.$config['baseUrl'].'/lib/eye.svg" /></a> <a rel="tooltip" class="bulles" title="'._('Click to copy the link to the clipboard').'"><input class="copy read file'.$idFile.'" name="read" type="text" value="'.$config['baseUrl'].$id.'/'.$fileInUploadDirId.'"></a></div>';
+                            echo '<div class="file file'.$idFile.' dl input"><a href="'.$linkDownload.'" target="_blank"><img src="'.$config['baseUrl'].'/lib/download.svg" /></a> <a rel="tooltip" class="bulles" title="'._('Click to copy the link to the clipboard').'"><input class="copy dl file'.$idFile.'" name="dl" type="text" value="'.$linkDownload.'" readonly=""></a></div>';
                         echo '</div>';
                         $idFile++;
                     }
@@ -467,6 +477,7 @@ if (isset($_GET['action']) && $_GET['action'] == 'del') {
             </div>
             <?= CheckUpdate(); ?>
             <?php @include_once('./footer-page.php'); ?>
+            <?php } // mod maintenance end ?>
         </div>
         <div id="bg">
             <img src="<?= $config['backgroundImage'] ?>" alt="">

lib/style.css

@@ -183,9 +183,6 @@ a.bulles {
 .file.info .type {
 	margin-left: 10px;
 }
-.file.input {
-	font-size: 5px;
-}
 .file.input img {
 	float: left;
 	width: 25px;

lib/upload.js

@@ -144,9 +144,9 @@ $(function () {
     
     
 
-	$(document).on('click', '.copy', function(e){
-		e.preventDefault(); 
+	$(document).on('click', '.copy', function(){
 		copyToClipboard($(this).val());
+		$(this).select();
 	});
 
 	$("input[type=file]").on('change',function(){
@@ -159,5 +159,29 @@ $(function () {
 		}
 	});
 
+	/* infobulles http://javascript.developpez.com/tutoriels/javascript/creer-info-bulles-css-et-javascript-simplement-avec-jquery/ */
+	// Sélectionner tous les liens ayant l'attribut rel valant tooltip
+	$('a[rel=tooltip]').mouseover(function(e) {
+		// Récupérer la valeur de l'attribut title et l'assigner à une variable
+		var tip = $(this).attr('title');   
+		// Supprimer la valeur de l'attribut title pour éviter l'infobulle native
+		$(this).attr('title','');
+		// Insérer notre infobulle avec son texte dans la page
+		$(this).append('<div id="tooltip"><div class="tipBody">' + tip + '</div></div>');    
+		// Ajuster les coordonnées de l'infobulle
+		$('#tooltip').css('top', e.pageY - 30 );
+		$('#tooltip').css('left', e.pageX - 145 );
+		// Faire apparaitre l'infobulle avec un effet fadeIn
+	}).mousemove(function(e) {
+		// Ajuster la position de l'infobulle au déplacement de la souris
+		$('#tooltip').css('top', e.pageY - 30 );
+		$('#tooltip').css('left', e.pageX - 145 );
+	}).mouseout(function() {
+		// Réaffecter la valeur de l'attribut title
+		$(this).attr('title',$('.tipBody').html());
+		// Supprimer notre infobulle
+		$(this).children('div#tooltip').remove();
+	});
+
 });