Mobirise plugin documentation

***********
*  Adicionar Componentes ao APP
***********
    1. Create HTML file
	1. Crie um arquivo HTML
    component-name.html

    2. Create preview image PNG (width = 250px)
	2. Crie uma imagem de preview em PNG (largura = 250px)
    component-name.png

    3. Call public mobirize method
	3. Chama o método publico do mobirize
    mbrApp.loadComponents({
        'component-name': {
            // component params
			// parametros do componente
        },
        ...
    });




***********
*  Components (default)
***********
    mbrApp.loadComponents({
        'component-name': {
            _group: 'Group Name',
            _noDrag: true,
            _params: {
            },
            paramName: 'param value',
            ...
        },
        ...
    })

    Params:
    * _inherit          : inherit template.html and params.js from another component
    * _group            : place component to group
    * _noDrag           : remove draggable icon from component block
    * _alwaysBottom     : always bottom... like footer
    * _alwaysTop        : always top... like menu
    * _global           : will changed in all pages
    * _positionAbsolute : when component with absoulte position (like menu)
    * _once             : allow to add component once
    * _autoPadding      : add paddings to block (see content components)
      Usage:
      _autoPadding: 'namespace'
      It works with components, which have the same parameter 'namespace'

    * _css              : include custom styles "style.css"
    * _js               : include custom script "script.js"
    * _params           : parameters that are set in the sidebar on the right
    * paramName         : custom parameters (custom name, custom value)
    * ...               : unlimited custom parameters and components :)

    Filters:
    * _onParamsShow:    : called when params panel show
      Usage:
      _onParamsShow: function(e, $params, $block) {
        // see how it used in Slider component
      }

    * _onParamsFocus    : called when some inputs in params focused
      Usage
      _onParamsFocus: function($item, $block) {
        // see how it used in Slider component
      }

    * _onParamsChange   : called when some params changed
      Usage
      _onParamsChange: function($item, paramName, paramValue) {
        //
      }

    * _onRender   : called before rendering of component
      If the function returns false, component is not rendering
      Usage:
      _onParamsChange: function($item, paramName, paramValue, renderFunc) {
        //
      }

    * _publishFilter    : filter for change publish component html code
      Usage:
      _publishFilter: function(html) {
        return html;
      }



***********
*  Parameters (_params)
***********
    You can use switchers, selectors, checkboxes, inputs, image file dialogs and lists to set up your parameters

    * Separator
        uniqueName: {
            type: 'separator',
            title: 'Title'
        }

    * Switch
        paramName: {
            type: 'switch',
            title: 'Title',
            default: true
        }

    * Switch Off
        // When switcher is ON will return FALSE
        paramName: {
            type: 'switch-off',
            title: 'Title',
            default: true
        }

    * Text
        paramName: {
            type: 'text',
            title: 'Title',
            default: ''
        }

    * Textarea
        paramName: {
            type: 'textarea',
            title: 'Title',
            default: ''
        }

    * Image File Dialog
        paramName: {
            type: 'image',
            title: 'Title',
            default: 'images/bg.jpg'
        }

    * Radio
        paramName: {
            type: 'radio',
            title: 'Title',
            name: 'uniqName',
            default: true
        },
        paramName2: {
            type: 'radio',
            title: 'Title 2',
            name: 'uniqName',
            default: false
        }

    * Checkbox
        paramName: {
            type: 'check',
            title: 'Title',
            default: ['val1', 'val4'],
            values: {
                val1: 'Value 1',
                val2: 'Value 2',
                val3: 'Value 3',
                val4: 'Value 4'
            }
        }

    * Select
        paramName: {
            type: 'select',
            title: 'Title',
            default: 'red',
            values: {
                // name: title
                red   : 'Red',
                black : 'Black'
            }
        }

    * Color
        paramName: {
            type: 'color',
            title: 'Title',
            default: '#FFF'
        }

    * Range
        paramName: {
            type: 'range',
            title: 'Title',
            min: 0,
            max: 100,
            step: 10,
            default: 20
        }

    * Video
        paramName: {
            type: 'video',
            title: 'Title',
            default: {
                url: 'http://www.youtube.com/embed/51OgzAzopqI',
                aspectratio: '16:9',
                autoplay: false,
                loop: false
            }
        }

    * List (navigation example)
        paramName: {
            type: 'list',
            title: 'Title',
            default: [
                {title: 'Home', href: '#', active: true, some: true},
                {title: 'About', href: '#about', active: false, some: false},
                {title: 'Contact', href: '#contact', active: false, some: false}
            ],
            values: {
                title: 'text',
                href: 'text',
                active: 'check',
                some: 'switch'
            }
        }


***********
*  Parameters Conditions
***********
    Each parameter may have condition. Example:
        _params: {
          fistParam: {
            type: 'switch',
            title: 'Title',
            default: true
          },
          secondParam: {
            type: 'text',
            title: 'Title',
            default: 'Default',
            condition: ['fistParam']
          }
        }

    secondParam will be shown when fistParam switcher enabled.


***********
*  Parameters example (_params)
***********
    First of all, see Mustache documentation to use params values in HTML - https://github.com/janl/mustache.js

    * Switch
        // JS
        mbrApp.loadComponents({
            'component-name': {
                _group: 'Group Name',
                _params: {
                    paramName: {
                        type: 'switch',
                        title: 'Title',
                        default: true
                    }
                }
            }
        })

        // HTML
        <div>
            paramName: {{_params.paramName}}

            {{#_params.paramName}}
                Show only if paramName = true
            {{/_params.paramName}}
        </div>


    * Text
        // JS
        mbrApp.loadComponents({
            'component-name': {
                _group: 'Group Name',
                _params: {
                    myName: {
                        type: 'text',
                        title: 'My Name',
                        default: 'Mobirize'
                    }
                }
            }
        })

        // HTML
        <div>
            My name is {{{_params.myName}}}
        </div>


    * File Dialog
        // JS
        mbrApp.loadComponents({
            'component-name': {
                _group: 'Group Name',
                _params: {
                    image: {
                        type: 'image',
                        title: 'Image',
                        default: 'images/bg.jpg'
                    }
                }
            }
        })

        // HTML
        <div>
            <img src="{{{_params.image}}}" alt="">
        </div>

    * Checkbox
        // JS
        mbrApp.loadComponents({
            'component-name': {
                _group: 'Group Name',
                _params: {
                    paramName: {
                        type: 'check',
                        title: 'Title',
                        default: ['val1', 'val4'],
                        values: {
                            val1: 'Value 1',
                            val2: 'Value 2',
                            val3: 'Value 3',
                            val4: 'Value 4'
                        }
                    }
                }
            }
        })

        // HTML
        <ul>
            {{#_params.paramName}}
                <li>
                    {{.}}
                </li>
            {{/_params.paramName}}
        </ul>

    * Select
        // JS
        mbrApp.loadComponents({
            'component-name': {
                _group: 'Group Name',
                _params: {
                    gender: {
                        type: 'select',
                        title: 'Gender',
                        default: 'red',
                        values: {
                            women : 'Women',
                            man   : 'Man',
                            other : 'Other'
                        }
                    }
                }
            }
        })

        // HTML
        <div>
            Gender: {{_params.gender}}
        </div>

    * Video
        // JS
        mbrApp.loadComponents({
            'component-name': {
                _group: 'Group Name',
                _params: {
                    video: {
                        type: 'video',
                        title: 'My Video',
                        default: {
                            url: 'http://www.youtube.com/embed/51OgzAzopqI',
                            aspectratio: '16:9',
                            autoplay: false,
                            loop: false
                        }
                    }
                }
            }
        })

        // HTML
        <iframe width="{{_params.video.width}}" height="{{_params.video.height}}" src="{{_params.video.url}}" frameborder="0" allowfullscreen></iframe>

    * List (navigation example)
        // JS
        mbrApp.loadComponents({
            'component-name': {
                _group: 'Group Name',
                _params: {
                    listEx: {
                        type: 'list',
                        title: 'List example',
                        default: [
                            {title: 'Home', href: '#', active: true},
                            {title: 'About', href: '#about', active: false},
                            {title: 'Contact', href: '#contact', active: false}
                        ],
                        values: {
                            title: 'text',
                            href: 'text',
                            active: 'check'
                        }
                    }
                }
            }
        })

        // HTML
        <ul>
            {{#_params.listEx}}
                <li{{#active}} class="active"{{/active}}>
                    <a href="{{href}}">{{{title}}}</a>
                </li>
            {{/_params.listEx}}
        </ul>



***********
*  Parameters (custom)
***********
    You can use custom parameters as you can

    // JS
    mbrApp.loadComponents({
        'component-name': {
            _group: 'Group Name',
            myParam: 'Value'
        }
    })

    // HTML
    <div>
        My custom param value: {{myParam}}
    </div>





***********
*  Custom CSS & JS
***********
    You can add style.css and script.js for each of components

    Example: see 'menu' component

    Example:
    mbrApp.loadComponents({
        'componentName': {
            _css: true,
            _js: true,
            ...
        }
    })

    And add this new files:
    components/componentName/style.css
    components/componentName/script.js




***********
*  Custom Elements
***********
    // Buttons
    <div class="group">
        <a data-app-btn="true" href="http://mobirise.com" class="btn btn-info btn-lg">
            Sign up today
        </a>
        <a data-app-btn="true" class="btn btn-lg btn-default" href="http://mobirise.com">
            Learn more
        </a>
    </div>


    // images
    <img data-app-edit="image:img1" src="{{img1}}" alt="">




***********
*  Inherit Components
***********
    You can inherit template.html and params.js for your new component block from one of default components

    Example params.js:
    mbrApp.loadComponents({
        'myNewComponent': {
            _inherit: 'inheritComponent',
            _params: {
                showText: false,
                bgColor: '#fff'
            },
            text: 'New Text'
        }
    })

    Examples:
    header2 inherited from header1
    msg-box2 inherited from msg-box




***********
*  Toolbar Options
***********
    You can remove some buttons from Summernote toolbar

    Available names for Text:
        mbrAlign
        mbrLink
        mbrFonts
        mbrFontSize
        mbrColor
        bold
        italic
    Available names for Buttons:
        mbrLink
        mbrFonts
        mbrColor
        mbrFontSize
        mbrBtnColor
        mbrBtnMove
        mbrBtnAdd
        mbrBtnRemove

    Example (remove mbrBtnMove):
    <div class="group" data-app-edit="buttons:buttons" data-toolbar="-mbrBtnMove">
        {{{buttons}}}
    </div>

    Example (remove mbrFonts and mbrLink):
    <div class="hero" data-app-edit="content:text" data-toolbar="-mbrLink,-mbrFonts">
        {{{text}}}
    </div>



***********
*  Enable multiline content (for new paragraph using <p>...</p> instead of <br>)
***********
    Example
    <div class="mbr-article"
    data-app-edit="content:text" data-multiline
    data-app-placeholder="Content">{{{text}}}</div>



***********
*  Custom Selectors for additional styles (font/color)
***********
    Example
    <h2 class="mbr-section__header" data-app-edit="content:header" data-app-selector=".mbr-section__header">{{{header}}}</h2>




***********
*  Editable Area Placeholders
***********
    You can set placeholder text for editable area (when text inside removed - placeholder showed up)

    Example (from menu component)
    <span data-app-edit="content:brand" data-app-placeholder="Brand Name">
        {{{brand}}}
    </span>




***********
*  Extended Toolbar
***********
    If you want to use extended toolbar (with lists/styles/etc) use data-app-edit="full:..."

    Example:
    <p data-app-edit="full:text" data-app-placeholder="Text">{{{text}}}</p>



***********
*  Mobirize atributes for templates
***********
mbr-id="_anchor"
mbr-class-mbr-background="_params.paramName"
mbr-class-mbr-parallax-background="_params.paramName"
mbr-bg-image="_params.paramName"
mbr-bg-color="_params.paramName"
mbr-html="_params.paramName"
mbr-if="_params.paramName"