Système d'alerte en temps réel

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Astuce Système d'alerte en temps réel

Message par Shadow le Ven 17 Avr 2015 - 11:03

Système d'alerte en temps réel


Ce tutoriel vous permettra de créer un système d'alerte en temps réel sur votre forum et vous guidera pas à pas de l'installation des codes (CSS et Javascript) ainsi que la page d'ajout jusqu'à la personnalisation du code.


0. Prérequis


Pour commencer il va d'abord falloir créer un sujet où les permissions n'autoriseront que les Admins (au tout autre groupe que vous voulez autoriser) à poster dedans et visible par tous les utilisateurs enregistrés (ou invités). Ce sujet regroupera les alertes à afficher.





L'ID du sujet sera utilisé par la suite (ici 232):


Ensuite s'assurer que cette option est sur Non.

Panneau d'administation > Général > Sécurité : Interdire les formulaires non officiels à poster des messages et messages privés sur le forum :
Non


1. Le code CSS (personnalisable à souhait)


Il s'ajoute dans le Panneau d'Administration > Affichage > Couleurs > Feuille de style CSS

Code:
.realTime_alert{
background:#FDFDFD no-repeat 10px center;
-webkit-background-size:50px;
  -moz-background-size:50px;
    -o-background-size:50px;
        background-size:50px;
-webkit-box-shadow:0 0 4px rgba(0,0,0,.6);
  -moz-box-shadow:0 0 4px rgba(0,0,0,.6);
        box-shadow:0 0 4px rgba(0,0,0,.6);
position:fixed;
top:50px;
right:20px;
min-height:60px;
font-size:13px;
width:200px;
padding:10px 10px 10px 70px;
font-family:Helvetica;
color:#474747;
}
.realTime_alert b{
display:block;
margin-bottom:5px;
font-size:15px;
}
.realTime_alert .close{
position:absolute;
right:10px;
top:5px;
font-size:15px;
-webkit-border-radius:50px;
  -moz-border-radius:50px;
        border-radius:50px;
height:16px;
width:16px;
text-align:center;
line-height:13px;
cursor:pointer;
}
.realTime_alert .close:hover{
color:#FFF;
background:#666;
}
#ebtzd .tooltip{
opacity:0;
position:relative;
overflow:visible;
z-index:100!important;
display:inline-block;
top:5px;
-webkit-transition-duration:500ms;
  -moz-transition-duration:500ms;
    -o-transition-duration:500ms;
        transition-duration:500ms;
background:rgba(0, 0, 0, .8);
padding:10px;
-webkit-border-radius:3px;
  -moz-border-radius:3px;
        border-radius:3px;
font-family:Helvetica;
letter-spacing:1px;
font-size:13px;
width:300px;
color:#fff;
}

Vous pouvez personnaliser tout le code, du moment qu'il reste valide. Smile

2. Le code Javascript


Il s'ajoute dans le Panneau d'Administration > Modules > Gestion des codes Javascript avec l'option

Code:
function realTime_alert() {
var version="VERSION";
var topicAlertId="ID";
jQuery.ajax({
        url: "/t"+topicAlertId+"-?view=newest",
        success: function(result) {
            var html = jQuery(result);

           
            if (version=="phpbb3") {
              var alertBody= html.find("div.post .content .codebox code").eq(-1).text();
              var id = html.find("div.post").eq(-1).attr("id");
            }
           
            if (version=="phpbb2") {
              var alertBody= html.find("tr.post .postbody .codebox .cont_code").eq(-1).text();
              var id = html.find("tr.post").eq(-1).attr("id");
            }
           
            if (version=="punbb") {
              var alertBody= html.find("div.post .postbody .entry-content .codebox .cont_code code").eq(-1).text();
              var id = html.find("div.post .postmain .posthead").eq(-1).attr("id");
            }
           
            if (version=="invision") {
              var alertBody= html.find("div.post .post-entry .codebox.contcode dd code").eq(-1).text();
              var id = html.find("div.post").eq(-1).attr("id");
            }
           
            if(localStorage.getItem(id)!='read' && sessionStorage.getItem(id)!=location.pathname) {
                  $('body').append(alertBody);
                  $('.realTime_alert .close').click(function() {
                    $(this).closest('.realTime_alert').fadeOut();
                    localStorage.setItem(id,"read");
                  });
            }
          if(sessionStorage.getItem(id)!=location.pathname) {
              sessionStorage.setItem(id, location.pathname);
          } else {
              sessionStorage.setItem(id, location.pathname);
          }
        },
});
return topicAlertId;
}

$(function(){
if($("#logout").length) {
  realTime_alert();
  setInterval('realTime_alert();', 30000); // Reactualisation toutes les 30s
}
});

Aux lignes:

var topicAlertId="ID"; il faut remplacer ID par l'id du sujet créé (exemple: 232)
var version="VERSION"; il faut remplacer VERSION par la version de votre forum (phpbb2, phpbb3, punbb, ou invision).

• Si vous souhaitez rendre visibles ces alertes aux invités, il faut remplacer:

Code:
$(function(){
if($("#logout").length) {
  realTime_alert();
  setInterval('realTime_alert();', 30000); // Reactualisation toutes les 30s
}
});

par:

Code:
$(function(){
  realTime_alert();
  setInterval('realTime_alert();', 30000); // Reactualisation toutes les 30s
});

3. Création d'une page HTML


Il faudra vous rendre dans Panneau d'Administration > Modules > Gestion des pages HTML pour créer la page avec le haut et le bas du forum.



Code:
<br /><style>
.progress-bar {
height: 12px;
margin-bottom: 20px;
overflow: hidden;
background-color: #F5F5FB;
border-radius: 9px;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}
 
.progress-bar span {
float: left;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background-color: #0787DD;
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
}
 
  .result {
font-size: 25px;
max-width: 350px;
height: 60px;
margin: auto;
padding-top: 80px;
text-align: center;
}
 
.result.done {
background: url(https://cdn2.iconfinder.com/data/icons/color-svg-vector-icons-part-2/512/ok_check_yes_tick_accept_success-64.png) no-repeat top center;
}
 
.result.fail {
background: url(https://cdn2.iconfinder.com/data/icons/color-svg-vector-icons-part-2/512/wrong_table_no_navigator_formula-64.png) no-repeat top center;
}
</style>
 
<form id="form">
  <label for="alert_name">Titre de l'alerte</label> <input type="text" name="alert_name" id="alert_name" placeholder="Exemple: Impossible de changer de mot de passe" style="width: 60%;"/>
  <br /><br />
  <label for="alert_content">Contenu du message</label> <input type="text" name="alert_message" id="alert_message" placeholder="" style="width: 70%;" />
  <br /><br />
  <label for="alert_image">Image</label> <input type="text" name="alert_image" id="alert_image" placeholder="http://" style="width: 70%;"/>
  <br /><br /><br />
  <button class="button1" id="send">Envoyer l'alerte</button>
</form><div class="result"></div><div class="progress-bar"><span style="width: 200px;"></span></div>
 
<script>
  var _param = function(obj, modifier) { var buildParams = function(prefix, obj, traditional, add) { var name; if (jQuery.isArray(obj)) { jQuery.each(obj, function(i, v) { if (traditional || /\[\]$/.test(prefix)) { add(prefix, v); } else { buildParams(prefix + "[" + (typeof v === "object" ? i : "") + "]", v, traditional, add); } }); } else { if (!traditional && jQuery.type(obj) === "object") { for (name in obj) { buildParams(prefix + "[" + name + "]", obj[name], traditional, add); } } else { add(prefix, obj); } } }; var prefix, s = [], add = function(key, value) { var nvalue; if (modifier) { if ((nvalue = modifier(key, value)) === null) { return; } else if (nvalue !== undefined) value = nvalue } value = jQuery.isFunction(value) ? value() : value == null ? "" : value; s[s.length] = _encodeURIComponent(key) + "=" + _encodeURIComponent(value); }; if (jQuery.isArray(obj) || obj.jquery && !jQuery.isPlainObject(obj)) { jQuery.each(obj, function() { add(this.name, this.value); }); } else { for (prefix in obj) { buildParams(prefix, obj[prefix], undefined, add); } } return s.join("&").replace(/%20/g, "+"); }, _encodeURIComponent = function(str) { if ((document.charset ? document.charset : document.characterSet).toLowerCase() != "utf-8") { return encodeURIComponent(escape(str).replace(/%u[A-F0-9]{4}/g, function(x) { return "&#" + parseInt(x.substr(2), 16) + ";"; })).replace(/%25/g, "%"); } else { return encodeURIComponent(str); } };
  $('.progress-bar').hide();
  $('.reslt').hide();
$('form#form').submit(function() {
  var message="[code]<div class='realTime_alert' style='display: block; background-image: url("+document.getElementById('alert_image').value+");'><span class='close'>×</span><b>"+document.getElementById('alert_name').value+"</b>\n<span class='inner'>"+document.getElementById('alert_message').value+"</span></div>[/code]";
  $('.progress-bar').show();
  $('form#form').hide();
  if($('.progress-bar span').css('width')!='100%') {setTimeout("$('.progress-bar span').css('width', '80%');", 100);}
  $.post( "/post", _param({ mode: "reply", t: realTime_alert(), post: 1, notify: 0, message: message }))
        .done(function() {
          $('.progress-bar span').css('width', '100%');
      $('.result').fadeIn().text('Envoyée avec succès');
      $('.result').addClass('done');
        })
      .fail(function() {
          $('.progress-bar span').css('width', '0%');
      $('.result').fadeIn().text('Erreur lors du traitement');
      $('.progress-bar').fadeOut();
      $('.result').addClass('fail');
      alert('Il semblerait qu\'une erreur se soit produite ! Vérifiez votre connexion internet et réessayez ultérieurement <img src="http://r23.imgfast.net/users/2316/18/97/34/smiles/1371890812.gif" alt="Sad" longdesc="3" />');
        });
  return false;
});
 
</script>

Vous devriez avoir un résultat similaire à celui-ci:


Exemple d'une notification:


Seules les personnes autorisées à poster dans les sujet des alertes (cf: Prérequis) sont capables d'envoyer des alertes via ce formulaire.

Voila, il ne vous reste plus qu'à utiliser cette page et à envoyer vos premières notifications!



Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe

Shadow
Adminactive
Adminactive

Féminin
Messages : 23754
Inscrit(e) le : 30/03/2007

http://forum.forumactif.com
Shadow a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum