Amélioration fonctionnalité champs du site par Maestro974 - page 1

Bonjour à tous,

un de mes amis m'a fourni un script HTML/CSS/Javascript permettant aux utilisateurs d'écrire des SMS et Mails.

Ce qu'il me demande de réaliser est d'améliorer la fonctionnalité du click sur les différents span(Entreprise, Ville, Titre...). Par exemple, soit cliquer sur "Entreprise" , il s'insère dans la zone de saisie à gauche(ça c'est déjà fait), mais trouver un système plus simple et plus esthétique serait souhaitable, soit un système de drag & drop(objet).

D'autre part, il aimerait un système de focus sur la souris, si par exemple "Entreprise" et "Titre" sont déjà présents dans la zone, et que lui souhaite rajouter "Ville" entre les deux, cela puisse se faire(là jusqu'à présent, les boutons s'ajoutent côte à côte).

Et enfin si l'utilisateur souhaite supprimer un bouton, soit il double-clique dessus, soit il utilise le raccourci clavier suppr.

J'espère avoir expliqué comme il se doit mon problème!

Pour ceux qui auraient des idées, ce serait génial! Merci d'avance

Code HTML:

<div class="container mtb">
        <div class="row">
			<ul class="breadcrumb breadcrumb-light breadcrumb-divider-middot">
                <li>Créer ma campagne</li>
                <li>Importer des contacts</li>
				<li class="active">Rédiger mon message</li>
            </ul>
			<TMPL_IF NAME="PROFILE">
				<form role="form" action = "<TMPL_VAR NAME=MYURL>?rm=saveTemplate" method="POST" enctype="application/x-www-form-urlencoded">
				<TMPL_LOOP NAME="DATA">
				<input type="hidden" id='id'  name="id" value="<TMPL_VAR NAME=ID>"/>
				<TMPL_IF NAME="TEMPLATE">
				<div class="panel panel-primary" id="panels" data-effect="helix">
					<div class="panel-heading">Message du SMS</div>
					<div class="panel-body">
            			<div class="col-lg-6">
			  				<div class="form-group">
<!--								<h4 for="template">Contenu</h4>
                		    	<textarea class="form-control" id="template" name="lg_template" rows="6" onkeyup="checkLength()"><TMPL_VAR NAME=TEMPLATE></textarea>
								<p id='message'>Longueur du SMS: 0/160</p>-->
                		  	</div>
						  	<input type="hidden" name="rm" value="saveTemplate"/>
							<div id="smsArea" class="form-control" contenteditable="true">
								<TMPL_VAR NAME=TEMPLATE>
							</div><br />
							<a href="#" class="btn btn-primary" onClick="saveMessage('sms');">Enregistrer</a>
							<a href="#" class="btn btn-primary" onClick="previewMessage('sms');" data-toggle="modal" data-target="#myModal2">Aperçu</a>
							<a href="#" class="btn btn-primary" onClick="testMessage('sms');" data-toggle="modal" data-target="#myModal">Calcul du coût des SMS</a>
							<br>
						</div>
						<div class="col-lg-6">
							<h4 for="template">Personnalisation</h4>
                            <span class="btn btn-default" onClick="editTag('sms','company')" id="smsCompany" title="Nom de votre entreprise">Entreprise</span>
            			    <span class="btn btn-default" onClick="editTag('sms','city')" id="smsCity" title="Ville de votre entreprise">Ville</span>
            			    <span class="btn btn-default" onClick="editTag('sms','title')" id="smsTitle" title="Titre du client (Mr, Mme...)">Titre</span>
            			    <span class="btn btn-default" onClick="editTag('sms','firstname')" id="smsFirstname" title="Prénom du client">Pr&eacutenom</span>
            			    <span class="btn btn-default" onClick="editTag('sms','lastname')" id="smsLastname" title="Nom du client">Nom</span>
							<span class="btn btn-default" onClick="editTag('sms','link')" id="smsLink" title="lien de votre page web, modèle ou questionnaire">Lien</span>
						</div>
					</div>
				</div>
				<div id="myModal2" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                  <div class="modal-dialog">
                    <div class="modal-content">

                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">Aperçu</h4>
                      </div>
                      <div class="modal-body" id="preview">
                      	Génération en cours...
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
                      </div>

                    </div><!-- /.modal-content -->
                  </div><!-- /.modal-dialog -->
                </div><!-- /.modal -->
				<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            	  <div class="modal-dialog">
            	    <div class="modal-content">

            	      <div class="modal-header">
            	        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            	        <h4 class="modal-title" id="myModalLabel">Coût de la campagne</h4>
            	      </div>
            	      <div class="modal-body">
            	        <p id='costTest'>Calcul en cours ...</p>
            	      </div>
            	      <div class="modal-footer">
            	        <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
            	      </div>

            	    </div><!-- /.modal-content -->
            	  </div><!-- /.modal-dialog -->
            	</div><!-- /.modal -->

				</TMPL_IF>
				<TMPL_IF NAME="MAILSUBJECT">
				<div class="panel panel-primary" id="panels" data-effect="helix">
					<div class="panel-heading">Message Email</div>
					<div class="panel-body">
						<div class="col-lg-6">
            		        <div class="form-group">
								<label>Type</label><br />
								<input type= "radio" name="mail_type" value="text" checked> Texte
            		    		<br />
								<label>Objet</label><br />
								<input type="text" class="form-control" id="mail_subject" name="mail_subject" value="<TMPL_VAR NAME=MAILSUBJECT>" style="width:50%">
								<label>Corps</label><br />
								<div id="mailArea" class="form-control" contenteditable="true">
									<TMPL_VAR NAME=MAILBODY>
								</div><br />
                            	<a href="#" class="btn btn-primary" onClick="previewMessage('mail');" data-toggle="modal" data-target="#myModalMail">Aperçu</a>
								<a href="#" class="btn btn-primary" onClick="saveMessage('mail');">Enregistrer</a>
            		    	</div>
						</div>	
						<div class="col-lg-6">
							<h4 for="template">Personnalisation</h4>
                            <span class="btn btn-default" onClick="editTag('mail','company')" id="mailCompany" title="Nom de votre entreprise">Entreprise</span>
            			    <span class="btn btn-default" onClick="editTag('mail','city')" id="mailCity" title="Ville de votre entreprise">Ville</span>
            			    <span class="btn btn-default" onClick="editTag('mail','title')" id="mailTitle" title="Titre du client (Mr, Mme...)">Titre</span>
            			    <span class="btn btn-default" onClick="editTag('mail','firstname')" id="mailFirstname" title="Prénom du client">Pr&eacutenom</span>
            			    <span class="btn btn-default" onClick="editTag('mail','lastname')" id="mailLastname" title="Nom du client">Nom</span>
							<span class="btn btn-default" onClick="editTag('mail','link')" id="mailLink" title="lien de votre page web, modèle ou questionnaire">Lien</span>
						</div>
					</div>
				</div>
				 </div>
				</TMPL_IF>
				</TMPL_LOOP>
				<div id="myModalMail" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            	  <div class="modal-dialog">
            	    <div class="modal-content">

            	      <div class="modal-header">
            	        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            	        <h4 class="modal-title" id="myModalLabel">Aperçu de l'email</h4>
            	      </div>
            	      <div class="modal-body">
            	        <p id='mailPreview'>Génération en cours...</p>
            	      </div>
            	      <div class="modal-footer">
            	        <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
            	      </div>

            	    </div><!-- /.modal-content -->
            	  </div><!-- /.modal-dialog -->
            	</div><!-- /.modal -->
				<br />
				<br />
				<a class="btn btn-primary" href="<TMPL_VAR NAME=MYURL>?rm=design&id=<TMPL_VAR NAME=PID>">Suivant</a>
				<br />
			<TMPL_ELSE>
			<div class="col-lg-4">
				<TMPL_IF NAME="BADLOGINS">
					Mauvais utilisateur ou mot de passe. <TMPL_VAR NAME=BADLOGINS> tentatives.<br/>
				</TMPL_IF>
                <form role="form" action = "<TMPL_VAR NAME=MYURL>" method="POST" enctype="application/x-www-form-urlencoded">
                  <div class="form-group">
                    <label for="username">Nom d'utilisateur</label>
                    <input type="text" class="form-control" id="username" name="lg_nick">
                  </div>
                  <div class="form-group">
                    <label for="password">Mot de passe</label>
                    <input type="password" class="form-control" id="password" name="lg_pass">
                  </div>
                  <input type="submit" class="btn btn-theme" value="Se connecter" />
                </form>
            </div><! --/col-lg-8 -->
			</TMPL_IF>
        </div><! --/row -->
     </div><! --/container -->
	</div>
<link href='assets/css/dragula.css' rel='stylesheet' type='text/css'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.js'></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Code JS:

var area = document.getElementById("template");
var message = document.getElementById("message");
var maxLength = 160;
var re = new RegExp("ô|â|ê|ç");

var myTags = new Object();

myTags['company']	= '#ENTREPRISE#';
myTags['city']		= '#VILLE#';
myTags['link']		= '#LIEN#';
myTags['firstname']	= '#PRENOM#';
myTags['lastname']	= '#NOM#';
myTags['title']		= '#TITRE#';

//$(document).ready(function() {
//	checkLength();
//});

$(document).ready(function() {
	var smsDiv = document.getElementById('smsArea');
	if(smsDiv && smsDiv.innerHTML.match(/smsMessage/))
	{
		smsDiv.innerHTML = '';
	}

	var mailDiv = document.getElementById('mailArea');
	if(mailDiv && mailDiv.innerHTML.match(/mailMessage/))
	{
		mailDiv.innerHTML = ''
	}

	var mailSub = document.getElementById('mail_subject');
	if(mailSub && mailSub.innerHTML.match(/changeSubject/))
	{
		mailSub.value = '';
	}
	
});

var checkLength = function()
{
	if(re.test(area.value))
	{
		maxLength = 70;
	}
	else
	{
		maxLength = 160;
	}

    if(area.value.length <= maxLength) {
        message.innerHTML = "Longueur du SMS: " + (area.value.length) + "/" + maxLength;
    }
	else
	{
		message.innerHTML = "Longueur du SMS: " + (area.value.length) + "/" + maxLength + "(Coûte "+ Math.ceil(area.value.length / maxLength)+" SMS)";
	}

}

function editTag(zoneId,tag)
{
	var zoneDiv 	= document.getElementById(zoneId + 'Area');
	var myButton 	= document.getElementById(zoneId + tag.ucfirst());
	var myLabel 	= document.createElement('span');

	var labels 		= zoneDiv.getElementsByTagName('span');
	var spanSize	= labels.length;

	var delflag  = 0;
	var delIndex = 0;

	if(spanSize != 0)
	{

		for (myLabId = 0; myLabId < spanSize; myLabId++)
		{
			var currentLabel = labels[myLabId];
			if(currentLabel.innerHTML === myButton.innerHTML)
			{
				delflag = 1;
				delIndex = myLabId;
			}
		}
	}

	if(delflag == 1)
    {
        zoneDiv.removeChild(labels[delIndex]);
    }
	else
	{
		myLabel.setAttribute('class', 'label label-info');
		myLabel.setAttribute('data-effect', 'pop');
		myLabel.setAttribute('contentEditable', 'false');
		myLabel.setAttribute('style','cursor:move;font-size:100%');
		myLabel.setAttribute('name', tag);
		myLabel.innerHTML = myButton.innerHTML;

		zoneDiv.appendChild(myLabel);
	}

	//Clean breaklines;
	var bks 	= zoneDiv.getElementsByTagName('br');
	var brSize 	= bks.length;
	
	if(brSize != 0)
	{
		zoneDiv.removeChild(bks[0]);
	}
}

function saveMessage(zoneId)
{
	var zoneDiv = document.getElementById(zoneId + 'Area');

	var message = zoneDiv.childNodes; 
	var messSize = message.length;
	var messageContent = '';

	for (var messId = 0; messId < messSize; messId++)
	{
		if(message[messId].nodeName === '#text' && message[messId].nodeValue.match(/[a-zA-Z0-9\,]/g) && message[messId].nodeValue.length < 100)
		{
			messageContent += message[messId].nodeValue;
		}
		else if(message[messId].nodeName === 'SPAN')
		{
			messageContent += myTags[message[messId].getAttribute("name")];
		}
	}

	var myRegexp = /\+/;
	messageContent.replace(myRegexp, '');

	if(zoneId === 'sms')
	{
		myRegexp = /\n/;
    	messageContent.replace(myRegexp, '');
	}

	var idInput = document.getElementById('id');

	var myData = {
        'rm':'saveMessage',
		'type' : zoneId,
        'message' : messageContent,
		'pid' : idInput.getAttribute('value')
    };

	if(zoneId === 'mail')
	{
		var mySubject = document.getElementById('mail_subject');
		
		myData = {
    	    'rm':'saveMessage',
    	    'type' : zoneId,
			'subject': mySubject.value,
    	    'mail' : messageContent,
    	    'pid' : idInput.getAttribute('value')
    	};
	}

    $.post("index.pl",myData).done(function(data){
		window.alert(data);
    });
}

String.prototype.ucfirst = function()
{
    return this.charAt(0).toUpperCase() + this.substr(1);
}

function previewMessage(zoneId)
{
	var zoneDiv = document.getElementById(zoneId + 'Area');

	var message = zoneDiv.childNodes; 
	var messSize = message.length;
	var messageContent = '';

	var previewDiv = document.getElementById("preview"); 
	var mailPreview = document.getElementById('mailPreview');

	if(zoneId === 'sms')
	{
		previewDiv.setAttribute('style','');
		previewDiv.innerHTML = '<p>Génération en cours ...</p>';
	}
	else if(zoneId === 'mail')
	{
    	mailPreview.innerHTML = 'Génération en cours...';
	}

	for (var messId = 0; messId < messSize; messId++)
	{
		if(message[messId].nodeName === '#text' && message[messId].nodeValue.match(/[a-zA-Z0-9\,]/g) && message[messId].nodeValue.length < 100)
		{
			messageContent += message[messId].nodeValue;
		}
		else if(message[messId].nodeName === 'SPAN')
		{
			messageContent += myTags[message[messId].getAttribute("name")];
		}
	}

	var myRegexp = /\+/;
	messageContent.replace(myRegexp, '');

	if(zoneId === 'sms')
	{
		myRegexp = /\n/;
    	messageContent.replace(myRegexp, '');
	}

	var idInput = document.getElementById('id');

	var myData = {
        'rm':'previewMessage',
		'type' : zoneId,
        'message' : messageContent,
		'pid' : idInput.getAttribute('value')
    };

	if(zoneId === 'mail')
	{
		var mySubject = document.getElementById('mail_subject');
		
		myData = {
    	    'rm':'previewMessage',
    	    'type' : zoneId,
			'subject': mySubject.value,
    	    'mail' : messageContent,
    	    'pid' : idInput.getAttribute('value')
    	};
	}

    $.post("index.pl",myData).done(function(data){
		if(zoneId === 'sms')
    	{
			previewDiv.innerHTML = '';
			previewDiv.setAttribute('class',"preview");
			previewDiv.setAttribute('style', 'background-image:url(/assets/img/smartphone_sms.png);width:435px;height:293px;');

			var myText = document.createElement('p');
			myText.setAttribute('class', 'smstext');
			myText.innerHTML = data;
			previewDiv.appendChild(myText);
		}
		else
		{
			mailPreview.innerHTML = data;
		}
    });
}

function testMessage(zoneId)
{
	var costTestP = document.getElementById('costTest');
    costTestP.innerHTML = 'Calcul en cours ...';

	var zoneDiv = document.getElementById(zoneId + 'Area');

	var message = zoneDiv.childNodes; 
	var messSize = message.length;
	var messageContent = '';

	for (var messId = 0; messId < messSize; messId++)
	{
		if(message[messId].nodeName === '#text' && message[messId].nodeValue.match(/[a-zA-Z0-9\,]/g) && message[messId].nodeValue.length < 100)
		{
			messageContent += message[messId].nodeValue;
		}
		else if(message[messId].nodeName === 'SPAN')
		{
			messageContent += myTags[message[messId].getAttribute("name")];
		}
	}

	var myRegexp = /\+/;
	messageContent.replace(myRegexp, '');

	myRegexp = /\n/;
    messageContent.replace(myRegexp, '');

	var idInput = document.getElementById('id');

	var myData = {
        'rm':'testsms',
        'message' : messageContent,
		'id' : idInput.getAttribute('value')
    };

    $.post("index.pl",myData).done(function(data){
		var costTestP = document.getElementById('costTest');
		costTestP.innerHTML = data;
    });
}

Code CSS:

#smsArea{
	    -moz-appearance: textfield-multiline;
	    -webkit-appearance: textarea;
	    height: 150px;
	    overflow: auto;
	    padding: 5px;
	    resize: both;
	    width: 100%;
	}

	.smstext{
/*		margin-top: 100px;*/
		margin-left: 60px;
		margin-right: 20px;
		padding-top: 30px;
		font-family: verdana, sans-serif;
	}

	#mailArea{
	    -moz-appearance: textfield-multiline;
	    -webkit-appearance: textarea;
	    height: 200px;
	    overflow: auto;
	    padding: 5px;
	    resize: both;
	    width: 100%;
	}

	.mailtext{
/*      margin-top: 100px;*/
        margin-left: 60px;
        margin-right: 20px;
        padding-top: 30px;
        font-family: verdana, sans-serif;
    }
/*	.preview{
/        -moz-appearance: textfield-multiline;
/        -webkit-appearance: textarea;
/        height: 150px;
/        overflow: auto;
/        padding: 5px;
/        resize: both;
/        width: 100%;
/		margin-top:20px;
/    }*/
.gu-mirror {
  position: fixed !important;
  margin: 0 !important;
  z-index: 9999 !important;
  opacity: 0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
}
.gu-hide {
  display: none !important;
}
.gu-unselectable {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}
.gu-transit {
  opacity: 0.2;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
}

Maestro974

13 décembre 2017 à 14:45:51

Pouce bleu à celui qui vous a aidé! Poster votre code : balise </> ! lire les règles générales, charte de bonne conduite :)

Lamecarlate

13 décembre 2017 à 14:55:14

Bonjour,

merci d'éviter les doublons.

On continue là-bas : https://openclassrooms.com/forum/sujet/amelioration-fonctionnalite-champs-dun-site

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Amélioration fonctionnalité champs du site

Supprimer

Modérer

Signaler le message aux modérateurs