Notificação de MP

Detalhes da questão

Endereço do fórum: https://www.pmhabbo.com/
Versão do fórum: ModernBB

Descrição

Olá,

eu gostaria de saber se é possível adicionar/alterar o local de notificação de Mensagens Privadas, ou quem sabe até quaisquer outras notificações que sejam enviadas a um usuário, para que elas fiquem visíveis em cima do avatar/personagem do perfil, ao invés de só ficarem visíveis caso o usuário clique no seu personagem para ver as opções.

Assim, tornando-se uma notificação mais explícita.
Deixarei aqui os prints para que possam se situar, desde já o meu muito obrigado.

https://imgur.com/a/N6LWllc

Bom dia.

Por gentileza, ative a conta "ShiftActif" para que eu possa testar uma coisa. Isto é, preciso obter acesso ao fórum para visualizar melhor a estrutura do template aplicado, afim de saber se é possível fazer algo que penso por jquery.

Obrigado!

Boa tarde!

Ativei, obrigado pela disponibilidade!!

Bom... Boa noite.

Para ser honesto não há boas notícias para sua dúvida. Antes de mais nada, o fórum possui um tema ilegal perante as condições gerais de uso de Forumeiros, e por tanto isso já começa a causar problemas para pedir ajuda aqui no suporte. Para a dúvida em si, seria até possível elaborar algo do tipo, esconder a barra de ferramentas de Forumeiros e talvez obter as notificações do fórum por requisições GET, contudo, quando a barra de ferramentas está desativada o servidor responsável não informa das notificações a serem lidas. Isto é, se a barra de ferramentas não estiver ativada, essa seção (destacada em vermelho na imagem) do perfil não fica visível:

Essa seção que seria o nosso ponto de partida no código jQuery, porque poderíamos exigir no método GET as informações desse bloco. Se ele não existir, não há como fazer muito.

Além do mais, mesmo que ative a barra de notificações, ocultá-la não vai ser uma alternativa, pois, como pode bem notar nas condições gerais de uso de Forumeiros:
Considerando essa situação, você estaria cometendo outra infração nas condições gerais de uso (fora a que citei).

Desde já, o ideal é ativar a barra de notificações para obter essa funcionalidade e ocultá-la não é uma alternativa no modo grátis. O não cumprimento das condições de Forumeiros podem ocasionar na suspensão definitiva do fórum.

Atenciosamente,
Shek

olá

apenas para informar que o fórum acima não está em modo livre
tem um pacote premium e pode acessar recursos adicionais

Como assim, modo livre? Poderia ser mais clara ?

Edit: Acho que entendi o que quis dizer. Porém, vou esperar o autor do tópico reativar a conta "ShiftActif" no fórum para que eu elabore alguma sugestão para o pedido dele.

Oioi, reativei a conta

Boa tarde.

Bom, eu tenho dois códigos para sugerir, mas confesso que não testei porque o seu fórum não tem a barra de notificações ativada (em ambos os códigos é preciso dela ativada), o que me impediu de usar a requisição .get(). Para o primeiro, ele não usa requisições GET, o que é muito bom porque o servidor não ficaria sobrecarregado, e possivelmente, ocasionando páginas 503 (por exemplo).

Depois de ativar a barra de notificações, você pode criar um novo script em PA > Módulos > HTML e Javascript > Gestão dos códigos javascript >> e quando clicar no botão Criar um novo javascript, queira selecionar para Todas as páginas no Investimento.

Código:

function obterNotificacoes() {
   var contagem = $('#notif_unread').text().replace('(','').replace(')','');
   $('div#user-menu div.nf span').remove();
   if(contagem !== '') {
      $('div#user-menu div.nf').append('<span class="new-nf" data-count="'+ contagem +'">'+ contagem +'</span>');
   }
}
$(document).ready(function(){
   setTimeout(function() {
      obterNotificacoes()
   },100);
   $('div#user-menu').click(function(){FA.Notification.markAsRead()});
});

Em tese ela vai checar notificações novas quando sua barra de notificações tiver algo de novo.


Porém, preciso que crie uma coisa no seu template. Mais especificamente, uma div com a classe nf:

Código:

<div class="nf"></div>

Essa div vai ter ficar abaixo de sua <div id="user-menu"> conforme na imagem a seguir:
Quando criar a div no template, salvar e publicar, você poderá incluir esse código CSS na sua folha:

Código:

div.nf {
    margin-top: -10px;
    position: absolute;
    z-index: 1;
    left: 0;
}
span.new-nf {
    background-color: rgb(255, 0, 64);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.0), 0 1px 2px rgba(0, 0, 0, 0.14), inset 0 0 1px 1px rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.0), 0 1px 2px rgba(0, 0, 0, 0.14), inset 0 0 1px 1px rgba(0, 0, 0, .1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.0), 0 1px 2px rgba(0, 0, 0, 0.14), inset 0 0 1px 1px rgba(0, 0, 0, .1);
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    font-size: 11px;
    font-weight: bolder;
    font-family: Segoe UI, SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
    padding: 10px 15px 10px 15px;
    animation: pulse-animation 2s linear infinite;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#fa_toolbar {display:none;}

Esse código aí vai ter uma função simples, que é personalizar quando houver notificações e esconder a barra de notificações Forumeiros: https://i.servimg.com/u/f74/18/76/69/60/screen68.png

Já o segundo código, faz basicamente a mesma coisa, mas é o que menos recomendo porque usa requisições GET. Você deve aplicar o investimento para todos as páginas:

Código:

function obterNotificacoes() {
   $('div#user-menu div.nf span').remove();
   var divnf = $('<div />',{class:'nf'});
   $('#user-menu').before(divnf);
   $.ajax({
      url: '/notif',
      dataType: 'json',
      error: function(xhr, txt, error) {
         FA.Debugger.log('Could not register on push server');
      },
      success: function(data, txt, xhr) {
         if(data.unread > 0) {
            $('div#user-menu div.nf').append('<span class="new-nf" data-count="'+ data.unread +'">'+ data.unread +'</span>');
         }
      }
   });
}
$(document).ready(function(){
   setTimeout(function() {
      obterNotificacoes()
   },5000);
});

Lembrando, de qualquer forma, eu não pude testar por não possuir a função da barra de notificações ativada no seu fórum. Por tanto, queira realizar os processos indicados e diga-nos se resulta.

Atenciosamente,
Shek

Saudações, Shek

Eu fiz tudo conforme foi solicitado, a ideia inicial parece ter se cumprido pois a barra de ferramentas foi devidamente ocultada e anteriormente as notificações apareciam nela. Todavia, ainda não é possível ver a sinalização de que uma mensagem foi enviada, assim como presente na foto que você enviou e como eu também almejava que estivesse.

Não testei o segundo código pois temo que sobrecarregue a página e gere outros problemas maiores, bem como seja inconveniente (sou leigo para mexer nos códigos)

Disponibilizo aqui o resultado final sem a notificação final. Caso precise do meu template ou CSS pode me comunicar que lhe envio.

https://imgur.com/a/qsEnVLu

Obrigado pelo esforço desde já, fico no seu aguardo!

Boa tarde.

Vamos focar no primeiro código, porque ele me pareceu mais eficaz do que o segundo. Eu fiz algumas mudanças no primeiro código, e suponho que deva funcionar agora:

Código:

function obterNotificacoes() {
  var contagem = $('#fa_notifications.unread span#notif_unread').text().replace('(','').replace(')','');
  $('div#user-menu div.nf span').remove();
  if(contagem !== '') {
      $('div#user-menu div.nf').append('<span class="new-nf" data-count="'+ contagem +'">'+ contagem +'</span>');
  }
    return true;
}
setInterval(function() {
  obterNotificacoes();
},1000);
$('div#user-menu').click(function(){FA.Notification.markAsRead()});

E eu criei outra conta para testes chamada "Grupo ShiftActif", porque preciso receber notificações de outra conta para checar o funcionamento do código. Contudo, nessa segunda vez eu creio que va funcionar porque eu mudei o setimeout para setinterval no código, e por tanto, ele irá atualizar a cada um segundo para verificar se existe notificações sem atrapalhar o servidor. Troque o código anterior por esse acima e vejamos.

Tornado10 escreveu:Todavia, ainda não é possível ver a sinalização de que uma mensagem foi enviada, ...

Ok, só ressalto o que disse na mensagem anterior. Qualquer notificação que o usuário receber a nível de estar listado na lista de notificações do usuário na página /profile?mode=editprofile&page_profil=notifications vai ser computado no fórum. Isto é, chegou uma MP? Se houver uma notificação na barra, o ícone vai aparecer. Se o usuário ou grupo foi marcado numa mensagem, será exibido o ícone de notificação. Se tu segue um tópico e alguém postou? Então vai aparecer a notificação. É claro que tudo isso, se houver 15 notificações novas, vai aparecer as 15, entende?

Até mais.

Olá, Shek

Tenho boas notícias, o código está funcionando e a sinalização de notificação aparece. Porém, após visualizar a mensagem enviada e voltar a página normalmente, a notificação permanece como se ainda existisse algo pendente, verifiquei minha MP e constatei que não existe nenhuma mensagem a ser revisada, porém a notificação está lá.

Sobre alguém ser notificado a partir de outras ações, acredito que desde que alguém não esteja seguindo um determinado tópico, está tudo bem pois não irá aparecer, e não costumamos usar a marcação em mensagem. Teria mais alguma problemática além dessa?

Ativei sua segunda conta para os testes.

Desde já, obrigado

Oi!

É por isso que coloquei essa parada no teu script: $('div#user-menu').click(function(){FA.Notification.markAsRead()});Essa parte do código diz o seguinte:

Se o usuário clicar na div#user-menu, eu vou marcar todas as notificações como lidas

Volto a dizer que, esse código visa imprimir todas as notificações da barra, independente do tipo. Se tiver 5 MPs e foi marcado em mais 4 tópicos, totalizando 9 notificações, é 9 que será exibido. Enquanto não clicar no seu nome de usuário no perfil, nada vai ocorrer.

Porém, tem o script no seu template para isso, só não sei dizer onde ele está. É algo desse tipo:

Código:

$('#user-menu').on('click', function() {$('#main-user-menu, #dimmer').toggleClass('hidden visible');});

Se você encontrá-lo, inclua esse trecho: FA.Notification.markAsRead(); depois do $('#main-user-menu, #dimmer').toggleClass('hidden visible');. Aí no script que indiquei acima:

Código:

function obterNotificacoes() {
  var contagem = $('#fa_notifications.unread span#notif_unread').text().replace('(','').replace(')','');
  $('div#user-menu div.nf span').remove();
  if(contagem !== '') {
      $('div#user-menu div.nf').append('<span class="new-nf" data-count="'+ contagem +'">'+ contagem +'</span>');
  }
    return true;
}
setInterval(function() {
  obterNotificacoes();
},1000);
$('div#user-menu').click(function(){FA.Notification.markAsRead()});

Remova essa parte:

Código:

$('div#user-menu').click(function(){FA.Notification.markAsRead()});

Não se esqueça de publicar o template e salvar o código JS com a mudança que falei agora. Neste caso, eu creio que vá dar certo.

Atenciosamente,
Shek

Então, eu reparei que após alguns minutos a notificação desapareceu dali, depois de eu a ter visualizado...
Agora estou na dúvida se faço a alteração ou se não seria preciso, uma vez que parece que, depois de alguns minutos, a notificação já tendo sido aberta ela de fato sai do ícone do meu perfil.

Quanto as notificações de tópicos ou MPs que podem ser muitas ou acumular, está tudo bem, não vejo problemas.

Edit: a notificação sumiu após eu clicar no menu de notificações, irei fazer os próximos passos que me enviaste.

Shek, removi o trecho que você solicitou do JS, entretanto, não consegui achar o código citado em meu template overhall. As notificações permanecem mesmo após a abertura da MP e só saem caso clique em notificações, não sei se esse é o limite até onde pode ser realizado.

Pra todo fim, deixo meu template aqui para você, caso precise.

Overhall:

Boa tarde.

As notificações são marcadas como "lidas" quando se clica no perfil de usuário, que da acesso ao menu de navegação:
É o efeito da função nativa da barra de ferramentas: FA.Notification.markAsRead()

Sobre o outro script, pois... Ele está em algum lugar no seu template. Se apertar Ctrl + U no teclado para abrir o código fonte, verá ele instalado na parte inferior do fórum. Eu diria que é o overall_footer, mas não faz muito sentido. Mas assim, se não encontrar, basta manter o trecho que eu disse inalterável, que o código funcionará normalmente.

PS: Aproveite e diga-nos se a questão sobre o ranking de grupo no perfil está sanada...

Encontrei! A partir da sugestão consegui achar o trecho no footer end, e agora está funcionando da forma que queríamos. Muito obrigado.

E sim, o ranking de grupo foi sanado, não utilizei os códigos que havia me passado pois acabaram não tendo resultado, mas já existia um JavaScript para alocar os códigos de ranks. Agora estou somente ajeitando as cores.

Novamente, obrigado pela ajuda, Shek, forte abraço!

Podem fechar.

Perfeito. Não esqueça de clicar no botão "Resolvido" e marcar alguma mensagem com o botão "Obrigado" para fechar a questão, ok? Até mais.