Add Pre default text in phalcon flash messages

Question

In phalcon default flash messaging service only provide with default error div.

<div class="alert alert-warning">Our message</div>

But i want to add something inside div box like this.

<div class="alert alert-warning"> <button class="close">x</button> Our Message </div>

However, phalcon we are only allow to set only class of each message as per my knowledge.

$di->set('flash', function () {
    return new FlashSession([
        'error'   => 'alert alert-danger alert-dismissible',
        'success' => 'alert alert-success alert-dismissible',
        'notice'  => 'alert alert-info alert-dismissible',
        'warning' => 'alert alert-warning alert-dismissible'
    ]);
});

Is there any configuration or any other way to add that close button on every message. I want something like

message = '<button class="close-btn">x</button>'+message

However i don't want to add this close button on every flash message because in future may be i need to change the class of close button so that in that case i need to change in all from the project.

Answer 1

I am using something like this, you can extend it like you want. But this is just the gist of how it works:

class Messenger extends Component
{
    protected static $_messageCloseHtml = '<a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">&times;</a>';

    /**
     * @param array|string $messages
     */
    public static function flashError($messages)
    {
        $messages = !is_array($messages) ? [$messages] : $messages;

        foreach ($messages as $message) {
            \Phalcon\Di::getDefault()->get('flashSession')->error(self::_getBody($message));
        }
    }

    /**
     * @param string $message
     * @return string
     */
    protected static function _getBody($message)
    {
        return self::$_messageCloseHtml . $message;
    }
}

For every message, you can add some HTML code to the message.

My flashError is for the error messages. You can add the same method code for the warning, info and success.

So basically you extend the (existing) FlashSession and when assigning the messages you call a global method which adds additional text or html to your message.

Answer 2

You can do this by extending the Phalcon\FlashSession class and overriding the outputMessage() method, or by creating your own flash component to output the HTML you desire. Example of a custom flash component is below, we use a similar class when we develop with Falcon, this component assumes the existence of a session component in the DI.

This is untested but the code in principle would give you the ability to add a close button to the output HTML, or you can set specific HTML content for each message type in the relevant methods (error, success, warning, info).

Example usage:

// settings messages in your controllers / components
// 2nd param defines a position
$this->flashMessage->error('Something is bad!', 'form_top');
$this->flashMessage->success('Something is right!');
$this->flashMessage->info('Something is interesting!');
$this->flashMessage->warning('Something is worrying!');

// rendering messages in your views
// 1st param will render messages for a specific position if a position was set
$this->flashMessage->render();
$this->flashMessage->render('form_top');

Example class:

class FlashMessage extends Phalcon\Mvc\User\Component
{    
    /**
     * @var array
     **/
    public $classmap = array();

    /**
     * Sets defaults for the class map (optional)
     *
     * @param array $classmap
     **/
    public function __construct($classmap = array()) {

        // -- set the defaults 
        $this->classmap = array(
            'error'   => 'flash_message-error',
            'success' => 'flash_message-success',
            'info'  => 'flash_message-info',
            'warning' => 'flash_message-warning'
        );

        // -- set new class map options (also optional)
        if (!empty($classmap)) {
            foreach ($classmap as $key => $value) {
                $this->classmap[$key] = $value;
            }
        }
    }

    /**
     * error(), success(), info(), warning()
     * Sets the flash messages
     *
     * @param  string message
     * @param  string position
     * @return string
     **/
    public function error($message, $position = '')
    {
        $this->session->flashMessage = array(
            'position' => $position, 
            'message' => '<div class="' . $this->classmap['error'] . '">
                 ' . $message . '
             </div>
        ');
    }

    public function success($message, $position = '')
    {
        $this->session->flashMessage = array(
            'position' => $position, 
            'message' => '<div class="' . $this->classmap['success'] . '">
                 ' . $message . '
             </div>
        ');
    }

    public function info($message, $position = '')
    {
        $this->session->flashMessage = array(
            'position' => $position, 
            'message' => '<div class="' . $this->classmap['info'] . '">
                 ' . $message . '
             </div>
        ');
    }

    public function warning($message, $position = '')
    {
        $this->session->flashMessage = array(
            'position' => $position, 
            'message' => '<div class="' . $this->classmap['warning'] . '">
                 ' . $message . '
             </div>
        ');
    }

    /**
     * Check if theres messages in the session to render 
     *
     * @param  string  $position
     * @return bool
     **/
    public function hasMessage($position = null)
    {
        if (isset($this->session->flashMessage) && !empty($position)) {
            return $this->session->flashMessage['position'] == $position ? true : false ;
        } else {
            return $this->session->flashMessage ? true : false ;
        }
    }

    /**
     * Renders the flash message
     * 
     * @param  string  $position
     * @return string
     **/
    public function render($position = null)
    {   
        // -- store the message locally
        $message = $this->session->flashMessage;

        // --  check if there is in fact a flashed message
        if (empty($message))
            return;

        // -- then remove from the session
        $this->session->remove('FlashMessage');

        // -- if no position the just return the message
        if (is_null($position)) {

            return $message['message'];

        // --  else return the requested position
        } elseif ($position == $message['position']) {

            return $message['message'];
        }
    }
}