[Tutorial] Sistema de alerta em tempo real
Página 1 de 1 • Compartilhe
Informações:
Autor: Wave
Versões: Todas as versões
Introdução: Sistema de alerta em tempo real
Instalação:
Acesse:
Adicione o seguinte código:Painel de controle >> Visualização >> Imagens e Cores >> Cores >> Folha de estilo CSS
- Código:
.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;
}
Acesse:
Então crie um novo javascript com investimento em todas as paginas com esse código:Painel de controle ->> Modulos ->> HTML & Javascripts ->> Gestão dos códigos Javascripts
- Código:
function realTime_alert() {
var version="VERSAO"; // coloque aqui a versão do seu fórum (exemplo: punbb, phpbb2, phpbb3, invision)
var topicAlertId="IDTOPICO"; // coloque aqui o id do tópico criado
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
}
});
Configuração do código
Para configurar o código, é relativamente simples. Logo na segunda linha, está var version="VERSAO", altere VERSAO pela versão do seu fórum em letras minúsculas. Em var topicAlertId="IDTOPICO" coloque o ID do tópico criado anteriormente.
Para que possamos adicionar o código, teremos de criar uma página HTML, que será onde o script ficará. Para isso é necessário aceder à:
Painel de controle -> Módulos -> HTML -> Gestão das páginas HTML
- Código:
<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">Título</label> <input type="text" name="alert_name" id="alert_name" placeholder="Exemplo: Saiba como integrar a equipe staff" style="width: 60%;"/>
<br /><br />
<label for="alert_content">Conteúdo do alerta</label> <input type="text" name="alert_message" id="alert_message" placeholder="" style="width: 70%;" />
<br /><br />
<label for="alert_image">Imagem (caso aplicável)</label> <input type="text" name="alert_image" id="alert_image" placeholder="http://" style="width: 70%;"/>
<br /><br /><br />
<button class="button1" id="send">Enviar alerta</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('Alerta enviado com sucesso');
$('.result').addClass('done');
})
.fail(function() {
$('.progress-bar span').css('width', '0%');
$('.result').fadeIn().text('Erro ao enviar o alerta');
$('.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>
Pré-requisitos]
Para que este tutorial funcione corretamente, deverá seguir todos os pré-requisitos que serão requisitados. Antes de tudo, deverá criar um tópico em que apenas quem pode enviar alertas poderá postar. O sub-fórum desse tópico deve estar visível a todos os membros, ou até visitantes caso deseje. Em seguida, copie o ID do tópico que se encontra na barra de endereços e guarde-o porque iremos utilizar futuramente:
Por fim aceda a Painel de Controle >> Geral >> Fórum >> Segurança e em "Desautorizar formulários não oficiais de postarem no fórum e enviar mensagens privadas" marque a opção Não.
Resultado
Tópicos semelhantes
Cria uma conta ou logue para postar uma mensagem.
Você precisa ser um membro, para poder postar uma resposta.
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|