desenv-web-rp.com

Tornar a mensagem "Artigo salvo com sucesso" Desaparecer após x segundos

Digamos que eu edite e salve um artigo. A mensagem "Artigo salvo com sucesso" é exibida no system-message-container div e fica lá. Digamos que agora estou editando, sou interrompido por outra coisa e volto depois de um tempo no meu artigo. Vejo a mensagem "Artigo salvo com sucesso" e clique em fechar. Depois disso, percebi que, de fato, a mensagem estava lá desde o primeiro salvamento e que não salvei a segunda edição.

Sei que poderia prestar mais atenção (não apenas pela edição na Web), mas existe uma maneira de fazer a mensagem "Artigo salvo com sucesso" desaparecer após 20 segundos.

PS: * Você me dirá que posso clicar em salvar e fechar se não tiver certeza, mas me encontrei em uma situação em que estraguei o artigo quando voltei e, porque vi essa mensagem, disse a mim mesmo "ok" não tem problema, basta fechar o artigo e abri-lo novamente sem salvar e você receberá a versão que tinha quando voltou, mas ... ".

Editar: conteúdo de administrator\templates\isis\html\layouts\joomla\system\message.php:

<?php
/**
 * @package     Joomla.Administrator
 * @subpackage  Template.Isis
 *
 * @copyright   Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

$msgList = $displayData['msgList'];

$alert = array('error' => 'alert-error', 'warning' => '', 'notice' => 'alert-info', 'message' => 'alert-success');
?>
<div id="system-message-container">
    <?php if (is_array($msgList) && $msgList) : ?>
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <?php foreach ($msgList as $type => $msgs) : ?>
            <div class="alert <?php echo $alert[$type]; ?>">
                <h4 class="alert-heading"><?php echo JText::_($type); ?></h4>
                <?php if ($msgs) : ?>
                    <?php foreach ($msgs as $msg) : ?>
                        <p><?php echo $msg; ?></p>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>
        <?php endforeach; ?>
    <?php endif; ?>
</div>

conteúdo de administrator\templates\isis\js\template.js:

/**
 * @package     Joomla.Administrator
 * @subpackage  Templates.isis
 * @copyright   Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 * @since       3.0
 */

(function($)
{
    $(document).ready(function()
    {
        $('*[rel=tooltip]').tooltip();

        // Turn radios into btn-group
        $('.radio.btn-group label').addClass('btn');
        $('.btn-group label:not(.active)').click(function()
        {
            var label = $(this);
            var input = $('#' + label.attr('for'));

            if (!input.prop('checked')) {
                label.closest('.btn-group').find('label').removeClass('active btn-success btn-danger btn-primary');
                if (input.val() == '') {
                    label.addClass('active btn-primary');
                } else if (input.val() == 0) {
                    label.addClass('active btn-danger');
                } else {
                    label.addClass('active btn-success');
                }
                input.prop('checked', true);
            }
        });
        $('.btn-group input[checked=checked]').each(function()
        {
            if ($(this).val() == '') {
                $('label[for=' + $(this).attr('id') + ']').addClass('active btn-primary');
            } else if ($(this).val() == 0) {
                $('label[for=' + $(this).attr('id') + ']').addClass('active btn-danger');
            } else {
                $('label[for=' + $(this).attr('id') + ']').addClass('active btn-success');
            }
        });
        // add color classes to chosen field based on value
        $('select[class^="chzn-color"], select[class*=" chzn-color"]').on('liszt:ready', function(){
            var select = $(this);
            var cls = this.className.replace(/^.(chzn-color[a-z0-9-_]*)$.*/, '\1');
            var container = select.next('.chzn-container').find('.chzn-single');
            container.addClass(cls).attr('rel', 'value_' + select.val());
            select.on('change click', function()
            {
                container.attr('rel', 'value_' + select.val());
            });

        });
    });
})(jQuery);
3
MagTun

Você pode usar o seguinte jQuery para isso:

setTimeout(function() {
    $('#system-message-container').fadeOut('fast');
}, 5000);

5000 é de 5 segundos, portanto, você pode alterar esse valor para o que quiser

Onde adiciono este código?

Opção 1: Este é um método longo e complicado. Você pode criar um pequeno plugin que chama esse código jQuery.

Opção 2: Basta adicionar o código acima ao seguinte arquivo:

administrator/templates/isis/js/template.js

Observe que a opção 2 é considerada um hack principal, portanto, se você instalar uma atualização do Joomla e houver algumas alterações no modelo de administrador, essa alteração será substituída.

Atualização >> Opção 3:

Só notei que você também pode adicionar isso à substituição de modelo das mensagens do sistema. Portanto, abra o seguinte arquivo em um editor de texto:

administrator/templates/isis/html/message.php

Você deve ver na linha 14, $buffer = null;. Diretamente abaixo disso, adicione o seguinte:

$buffer .= "<script>
                setTimeout(function() {
                    jQuery('#system-message-container').fadeOut('fast');
                }, 5000);
            </script>";

Para sucesso apenas mensagens, use este:

$buffer .= "<script>    
                setTimeout(function() {
                    jQuery('.alert-success').parents('#system-message-container').fadeOut('fast');
                }, 5000);
            </script>";

Espero que isto ajude

5
Lodder

Isso funciona bem, mas apenas uma vez. Se houver uma segunda mensagem renderizada, o script não será acionado.

Se você usar isso, ele funciona toda vez para apagar um alerta de sucesso:

setInterval(function() {
    jQuery('.alert-success').parents('#system-message-container').fadeOut('fast');
}, 5000);

Eu o uso no front-end adicionando isto:

$buffer .= "<script>    
            setInterval(function() {
              jQuery('.alert-success').parents('#system-message-container').fadeOut('fast');
            }, 5000);
            console.log('timout triggered');
            </script>";

depois da linha 14 em messages.php (originalmente encontrado em templates/beez3/html/layouts/joomla/system) e coloque-o na pasta template/html.

1
TLWebdesignNL