Getting started with JrkDynamicPopupBundle

Setup

JrkDynamicPopupBundle is a dynamic popup manager for Symfony2, _(*1)

Using composer

Add jrk/dynamicpopup-bundle as a dependency in your project's composer.json file:, _(*2)

{
    "require": {
        "jrk/dynamicpopup-bundle": "dev-master"
    }
}

Update composer, _(*3)

php composer update
or 
php composer.phar update

Add JrkDynamicPopupBundle to your application kernel

``` php <?php // app/AppKernel.php, _(*4)

public function registerBundles() { $bundles = array( // ... new Jrk\DynamicPopupBundle\JrkDynamicPopupBundle(), ); }, _(*5)



Installation & Configuration
----------------------------

- 1. Add bundle's name in your app/config/config.yml

app/config/config.yml

assetic: bundles: [ 'JrkDynamicPopupBundle' ], _(*6)


- 2. Execute the following command:

php app/console assets:install, _(*7)



- 3. Include css files:

{{ dynamic_popup_styles() }}, _(*8)


- 4. Include js files:

{{ dynamic_popup_javascripts() }}, _(*9)


- 5. Add just after the &lt;body> tag

{{ dynamic_popup_template() }}, _(*10)


You can override two things:
- The ajax gif icon for ajax call (`ajaxAsset`)
- The js doT template (`popupTemplate`)

Here is an example:

{{ dynamic_popup_template({ ajaxAsset: 'img/ajax-loader.gif', popupTemplate: 'MyBundle:Acme:my-custom-doT-template.html.twig' }) }}, _(*11)




Usage
-----
We're assuming you have jquery in your project

- modalInformation(data, fancyboxOptions) => // Display a simple popup
- data: an object with 5 keys
    - title: popup's title
    - message: popup's message
    - close: popup's close button label
    - dataTitle: a list of injected dynamic variables into title
    - dataMessage: a list of injected dynamic variables into message
- fancyboxOptions: extend fancybox options

``` js
modalInformation({
    title: 'Popup title',
    message: 'Popup body',
    close: 'Close'
}, {
    minWidth: 320
});

modalInformation(data, fancyboxOptions, this) => // Display a dynamic choice popup
data: an object with 5 keys
- title: popup's title
- message: popup's message
- choices: a list of button (label, action, url, buttonClass)
- dataTitle: a list of injected dynamic variables into title
- dataMessage: a list of injected dynamic variables into message
fancyboxOptions: extend fancybox options
this: save a "this" reference

``` js $('a.clickme').function() { modalChoices({ title: 'Popup title', message: 'Popup body : {{=it.classname}}', choices: [ {label: 'Yes', action: 'doSomething(this)', buttonClass: 'btn btn-primary'}, {label: 'No', action: '$.fancybox.close()', url:true, buttonClass: 'btn btn-danger'}, {label: 'Help', url: 'http://www.some-help-website.com', target:'_blank', buttonClass: 'btn btn-info'}, ], dataMessage: { classname: 'Hello World (from a variable) !' } }, null, $(this)); }, _(*12)

function doSomething(myThisReference) { // myThisReference is a reference of 'a.clickme' DOM Element ... }, _(*13)


There are two other options for both `modalInformation` and `modalChoices`.
In fact, these two options are useful only for `modalChoices`.
This is two examples:

``` js
 modalChoices({
     ...
     input: {
        placeholder: 'Email address',
        type: 'text'
     }
     ...
 });

 modalChoices({
     ...
     select: {
        name: 'favorite-color',
        id: 'my-select-id',
        choices: [
            {value:'#FF0000', label:'Red'},
            {value:'#00FF00', label:'Green'},
            {value:'#0000FF', label:'Blue'}
        ]
     }
     ...
 });

Get data from <input> or <select> by calling that function:, _(*14)

js var formField = getModalFieldElement();, _(*15)

29/07 2015

dev-master

9999999-dev http://github.com/jreziga/JrkDynamicPopupBundle

Dynamic popup management bundle for Symfony2

Sources Download

GNU GPL v2

The Requires

php >=5.3.2
symfony/framework-bundle 2.*

by Jessym Reziga

jquery javascript dynamic popup auto front popin jrk

symfony-bundle dynamicpopup-bundle