Flashes

Flashes

If you want to give the user some information about successful login or registration, you should check the flash message functionallity of EOSS.

What you need is put the flash container into the view for example:

<div id="flashes" data-ignore>

</div>

Maybe you need to do some CSS stuff to make it look good for example:

#flashes {
    position: fixed;
    top: 10px;
    width: 800px;
    left: 50%;
    margin-left: -400px;
}

Now what you need to do is to program the function with name added to config.eoss to the parameter showFlashFunction. Let's create the one in assets/js/flashes.js.

function showFlash(message, cls) {
    var $flashes = $("#flashes");
    if($flashes.length > 0) {
        var $flash = $("<div style='display:none' class='alert alert-" + cls + "'>" + message + "</div>");
        $flashes.append($flash);
        $flash.fadeIn(200);
        setTimeout(function() {
            $flash.fadeOut(2000, function() {
               $(this).remove();
            });
        }, 3000);
    }
}

Now we need to register that into our config.eoss which will looks like this:

    "home_eoss": "indexEOSS",
    "layout_dir": "view/",
    "models": "model/",
    "refresh": true,
    "showFlashFunction" : "showFlash",
    "enviroment": "debug"

Now we can use the functionallity we've programmed to display the flash message. Anywhere in our application we can call $eoss->flashMessage($message, $class). Of course if we are inside the EOSS we can simply use $this->flashMessage($message, $class). Let's do this:

app/controller/indexEOSS.php:

<?php

use EOSS\EOSS;

class indexEOSS extends EOSS {

	public function load() {
        $this->csi->params->title = "Welcome To EOSS | EOSS2";
        $this->csi->setFile("indexView.php");
	}

    public function bind() {
        $this->csi->buttons->onclick[] = "showNumber";
    }

    public function showNumber($sender) {
        $this->flashMessage("You've successfully clicked on " . $sender->value . " button.", "success");
    }
}

And this is it. So easy :).