it-swarm.dev

Fai sparire il messaggio "Articolo salvato con successo" dopo x secondi

Diciamo che modifico e salvo un articolo. Il messaggio "Articolo salvato con successo" appare nel system-message-container div e si attacca lì. Diciamo che ora sto facendo un po 'di editing e sono interrotto da qualcos'altro e torno dopo un po' sul mio articolo. Vedo il messaggio "Articolo salvato con successo" e faccio clic su Chiudi. Dopodiché mi sono reso conto che in effetti il ​​messaggio era presente sin dal primo salvataggio e che non avevo salvato la seconda modifica.

So che potrei prestare più attenzione (non solo alla modifica del web a proposito), ma c'è un modo per far svanire il messaggio "Articolo salvato con successo" dopo 20 secondi.

PS: * Mi dirai che posso fare clic su Salva e chiudi se non sono sicuro, ma mi sono trovato in una situazione in cui ho sbagliato l'articolo quando torno e poiché ho visto questo messaggio mi sono detto "ok non è un problema, basta chiudere l'articolo e aprirlo di nuovo senza salvare e otterrai la versione che hai avuto quando sei tornato ma ... ".

Modifica: contenuto di 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>

il contenuto di 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

È possibile utilizzare il seguente jQuery per questo:

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

5000 è di 5 secondi, quindi puoi modificare questo valore come preferisci

Dove devo aggiungere questo codice?

Opzione 1: Questo è un metodo lungo e tortuoso. È possibile creare un piccolo plug-in che chiama questo codice jQuery.

Opzione 2: È sufficiente aggiungere il codice sopra al seguente file:

administrator/templates/isis/js/template.js

Nota che l'Opzione 2 è considerata un hack principale, quindi se installi un aggiornamento Joomla e ci sono state alcune modifiche al modello admin, questa modifica verrà ignorata.

Aggiornamento >> Opzione 3:

Ho appena notato che puoi anche aggiungere questo alla sostituzione del modello per i messaggi di sistema. Quindi, apri il seguente file in un editor di testo:

administrator/templates/isis/html/message.php

Dovresti vedere alla riga 14, $buffer = null;. Direttamente sotto, aggiungi quanto segue:

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

Solo per successo messaggi, usa questo:

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

Spero che sia di aiuto

5
Lodder

Funziona bene ma solo una volta. Se viene visualizzato un secondo messaggio, lo script non viene attivato.

Se lo usi funziona ogni volta per dissolvere un avviso di successo:

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

Lo uso nel front-end aggiungendo questo:

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

dopo la riga 14 in message.php (originariamente presente in templates/beez3/html/layouts/joomla/system) e inseriscilo nella cartella template/html.

1
TLWebdesignNL