PHP code example of robsonsuzin / smodal

    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

robsonsuzin / smodal example snippets

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
 

 <script src="/vendor/robsonsuzin/smodal/src/js/smodal.js"></script>
  

<link rel="stylesheet" href="/vendor/robsonsuzin/smodal/example/css/smodal.css"/>
<link rel="stylesheet" href="/vendor/robsonsuzin/smodal/example/css/icons/icons.css"/>
 

$modal = (new \Source\Support\Smodal())
 

->setSmodalname("modal_name_class")
 

->setSmodaltype("delete")
 

->setSmodalhtml("<p>Modal</p>")
 

->setSmodalwidth(700)
 

->setSmodalprint('true')
 

->setSmodaleffect('bounce')
 

->setSmodaldata('js-confirm')
 

->setSadddata($element, $data, $value)
 

->setSremovedata($element, $data)
 

->setSaddattr($element, $attr, $value)
 

->setSremoveattr($element, $attr)
 

->setSaddhtml($element, $value)
 

->setSaddclass($element, $class)
 

->setSremoveclass($element, $class)
 

->setSremoveelement($element)
 

->setSaddcss($element, $css, $value)
 

Botão que vai receber o click

$modal_delete = (new Smodal())
->setSmodaltype("delete")
->setSadddata("js-confirm", "post", url("/" . CONF_VIEW_APP . "/registration/departament"))
->setSaddhtml(
        "js-title",
        "<b>Atenção:</b> Tem certeza que deseja excluir esse departamento! Essa Ação não pode ser desfeita!"
);

Objeto para ser enviado ao callback

$smodal = (new Smodal('suzin_smodal_departament_address'))
                ->setSmodalwidth(700)
                ->setSmodaleffect("bounce")
                ->setSmodalhtml(
                        $this->view->render("widgets/registration/views/modal_vehicle", [
                        "title" => $title,
                        "vehicle" => $vehicleEdit,
                        "departaments" => $departaments->order('name')->fetch(true)
                ]));

$json["smodal"] = $smodal->renderObject();

Monitoramento do callback

if (response.smodal) {
    $(this).smodal(response.smodal, template);
}

    // Envio Ajax pelo click no data-post
    $(document).on("click", "[data-post]", function (e) {
        e.preventDefault();

        var clicked = $(this);
        var data = clicked.data();
        var load = $(".ajax_load");

        $.ajax({
            url: data.post,
            type: "POST",
            data: data,
            dataType: "json",
            beforeSend: function () {
                load.fadeIn(200).css("display", "flex");
            },
            success: function (response) {

                if (response.smodal) {
                    $('.suzin_smodal').fadeOut();
                    $(document).smodal(response.smodal, template);
                }

            },
            error: function () {
                ajaxMessage(ajaxResponseRequestError, 5);
                load.fadeOut();
            }
        });
    });

       /*
        *  Template Smodal
        *  Você pode criar seus templates e chamar no seu objeto Smodal :)
        */
        template = {};
        template.info = `<div class="js-icon icon-notext text-info icon-info-circle text-center"></div>
                    <h3 class="js-title title"></h3>
                    <div class="d-flex text-center" >
                    <a class="js-cancel btn btn-success icon-check radius transition" smodalclose="true" href="#">OK</a>
                    <a class="js-confirm btn btn-info icon-pencil radius transition" smodalclose="true" href="#" >Editar</a></div>`;

        template.delete =  `<div class="js-icon icon-notext text-warning icon-exclamation-triangle text-center"></div>
                    <h3 class="js-title title"></h3>
                    <div class="d-flex text-center" >
                    <a class="js-cancel btn icon-ban radius transition" smodalclose="true" href="#">Cancelar</a>
                    <a class="js-confirm btn btn-danger icon-trash radius transition" smodalclose="true" href="#" >Apagar</a></div>`;

        template.teste =  `<h3>Titulo da Modal</h3>
                    <p>Um paragráfo da Modal</p>
                    <h3 class="js-title title"></h3>
                    <div class="d-flex text-center" >
                    <a class="js-cancel btn icon-ban radius transition" smodalclose="true" href="#">Cancelar</a>
                    <a class="js-confirm btn btn-danger icon-trash radius transition" smodalclose="true" href="#" >Apagar</a></div>`;

        /*
        * APP MODAL
        * Monitoramento do smodalname
        */
        $(document).on('click', "[smodalname]", function (e) {
            e.preventDefault();
            $(this).smodal([], template);
        });


        //Caso você for utilizar no callback do ajax
        if (response.smodal) {              
            $(document).smodal(response.smodal, template);
        }