<style>
.panel_notif_global {
background: #dfdfe1;
box-shadow: 0px 3px 2px #aab2bd;
border-radius: 2px;
margin: 0 auto;
width: 40%;
}
.panel_notif_header_global {
background-color: #38445A;
border-radius: 2px;
color: #fff;
height: 30px;
line-height: 1.9em;
padding: 3px;
padding-left: 11px;
text-transform: uppercase;
}
.panel_notif_bottom_global {
display: block;
height: 30px;
line-height: 2.5em;
margin-top: 8px;
text-align: center;
}
.control-label {
color:#666;
display: block;
float: left;
font-size: 14px;
line-height: 2.4em;
text-align: left;
width: 40%;
}
.form-control {
width: 90%;
padding: 6px 12px!important;
font-size: 14px!important;
line-height: 1.42857143!important;
color: #555!important;
background-color: #fff!important;
background-image: none!important;
border: 1px solid #ccc!important;
border-radius: 4px!important;
-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%)!important;
box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%)!important;
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s!important;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s!important;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s!important;
}
.help-block {
color: #737373;
display: block;
font-size:10px;
margin-top: 5px;
margin-bottom: 10px;
}
.form-horizontal.style-form .form-group {
border-bottom: 1px solid #eff2f7;
display: grid;
margin-bottom: 15px;
margin-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
}
#comptalert_message{
color:#666;
font-size:10px;
}
.correct {
color: #4ECDC4!important;
}
.incorrect {
color: #FF6B6B!important;
}
.btn-send {
color: #fff !important;
background-color: #ed5565 !important;
border-color: #da4453 !important;
border: 1px solid transparent;
border-radius: 3px;
color: white;
cursor: pointer;
display: inline-block;
font-family: "Helvetica";
font-size: 13px;
font-weight: 600;
line-height: 1.42857;
margin-bottom: 0;
margin-left: 4px;
padding: 4px 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
vertical-align: middle;
white-space: normal;
}
.progress-bar {
height: 12px;
margin-bottom: 20px;
margin-top:20px;
overflow: hidden;
background-color: #e0dddd;
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: #f0ad4e;
-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: 540px;
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>
<script type="text/javascript">
$(document).ready(function(e) {
$('#alert_message').keyup(function() {
var nombreCaractere = $(this).val();
var nombreMots = jQuery.trim($(this).val()).split(' ').length;
if($(this).val() === '') {
nombreMots = 0;
}
var msg = ' ' + nombreMots + ' mot(s) | ' + (nombreCaractere.match(/\S/g)||[]).length + ' Caractère(s) / 200 maximum conseillés';
$('#comptalert_message').text(msg);
if ((nombreCaractere.match(/\S/g)||[]).length >= 200) { $('#comptalert_message').addClass("incorrect"); } else { $('#comptalert_message').addClass("correct").removeClass("incorrect");}
})
});
</script>
<script type="text/javascript">
function alertlien(that) {
if (that.value == "En savoir plus") {
document.getElementById("lienOK").style.display = "block";
} else {
document.getElementById("lienOK").style.display = "none";
}
}
function imagelien(that) {
if (that.value == "Non") {
document.getElementById("imageOK").style.display = "none";
} else {
document.getElementById("imageOK").style.display = "block";
}
}
</script>
<div style="display:block;" class="panel_notif_global">
<div class="panel_notif_header_global">
Envoyer une notification en temps réel
</div>
<div id="panel_notif_form">
<form class="form-horizontal style-form" id="form">
<div class="form-group">
<label for="alert_name" class="control-label">Titre de la notification</label>
<input type="text" class="form-control" name="alert_name" id="alert_name" placeholder="Soirée ChatBox !" required/>
<span class="help-block">Choisissez un titre court et évocateur.</span>
</div>
<div class="form-group">
<label for="alert_message" class="control-label">Contenu de la notification</label>
<textarea type="text" class="form-control" rows="7" name="alert_message" id="alert_message" placeholder="N'oubliez pas qu'une soirée ChatBox est organisée le samedi 17 juillet à 21h00. Venez nombreux." required="required"></textarea>
<div id="comptalert_message" align="center" style="line-height: 1.5em;">0 mot(s) | 0 Caractère(s) / 200 maximum conseillés</div>
<span class="help-block">La mise en forme du message ne supporte que le <font color="#FF6B6B"><strong>HTML</strong></font>. Par conséquent, le BBCode est <u>interdit</u>.<br />
Soyez bref dans le message à afficher. Prévoyez entre 150 à 200 caractères.</span>
</div>
<div class="form-group">
<label for="alert_lien" class="control-label">Lien de la notification</label>
<SELECT type="text" class="form-control" id="alert_lien" name="alert_lien" onChange="alertlien(this);" style="width: 15%;">
<OPTION value="">Non</OPTION>
<OPTION value="En savoir plus">Oui</OPTION></SELECT>
<div id="lienOK" style="display:none;"><input type="text" class="form-control" name="alert_lienOK" id="alert_lienOK" placeholder="https://" />
<span class="help-block">Vous pouvez renseigner le lien d'un sujet sur lequel votre communauté peut consulter.</span></div>
</div>
<div class="form-group">
<label for="alert_image" class="control-label">Image de la notification</label>
<SELECT type="text" class="form-control" onChange="imagelien(this);" style="width: 15%;">
<OPTION value="Non">Non</OPTION>
<OPTION value="Oui">Oui</OPTION></SELECT>
<div id="imageOK" style="display:none;"><input type="text" class="form-control" name="alert_image" id="alert_image" placeholder="https://" />
<span class="help-block">Les images sont automatiquement redimensionnées : 50px de hauteur et 50px en largeur.</span></div>
</div>
<div class="panel_notif_bottom_global">
<button class="btn-send" id="send">Envoyer la notification</button>
</div>
</form>
</div>
</div>
<br />
<div class="result"></div><div class="progress-bar"><span style="width: 200px;"></span></div>
<br />
<br />
<script type="text/javascript">
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();
$('.result').hide();
$('form#form').submit(function() {
var message = "<strong>Titre de la notification :</strong> " + document.getElementById('alert_name').value + "<br /><br /><strong>Message :</strong> " + document.getElementById('alert_message').value + "<br /><br /><strong>Pour en savoir plus (si lien renseigné) :</strong>" + document.getElementById('alert_lienOK').value + "<br /><br />[hide][code]<div class='realTime_alert' style='display: block; background-image: url("+document.getElementById('alert_image').value+");'><span class='close'>×</span><span class='alerttitle'>" + document.getElementById('alert_name').value + "</span><br /><span class='inner'>" + document.getElementById('alert_message').value + "</span><br /><span class='alertlien'><a target='_blank' href=" + document.getElementById('alert_lienOK').value + ">" + document.getElementById('alert_lien').value + "</a></span></div>[/code][/hide]";
$('.progress-bar').show();
$('.panel_notif_global').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('La notification a été envoyée avec succès');
$('.result').addClass('done');
})
.fail(function() {
$('.progress-bar span').css('width', '0%');
$('.result').fadeIn().text('Echec 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.');
});
return false;
});
</script>
Système d'alerte en temps réel
afin de sauvegarder les modifications.
