Mobirise Wiki

====== Extension : primary method ======

used for mobirise 3 & 4 themes
becomes obsolete since secondary method implemented for mobirise 4 themes

Those extensions are not editable with witsec or deltapi code-editors

Δπ

===== Steps =====
1) Create an HTML file
template.html
2) Create a preview image PNG (width = 250px)
thumb.png
3) create a component.js file that will call public mobirise method to load the component
// component.js
mbrApp.loadComponents({
    'component-name': {
        // component options
    },
    …
});

===== Structure of Components =====
mbrApp.loadComponents({
    'component-name': {
        _group: 'Group Name',
        _noDrag: true,
        _params: {
        },
        optionName: 'option value',
        …
    },
    …
})
Options:
* _inherit          : inherit template.html and params.js from another component
* _group            : place a component to a group
* _noDrag           : remove a draggable icon from a component block
* _alwaysBottom     : always bottom… like a footer block
* _alwaysTop        : always top… like a menu block
* _global           : will change on all pages
* _positionAbsolute : component with an absolute position (like a menu block)
* _once             : allow to add component only once
* _afterNavbarItem : add .mbr-after-navbar class to an item if the component is
after a menu block
  Usage:
  _afterNavbarItem: '.class-name'
* _autoPadding      : add paddings to the block (see content components)
  Usage:
  _autoPadding: 'namespace'
  It works with the components which have the same 'namespace' parameter.
* _css              : [USE _plugins INSTEAD] include custom styles “style.css”
* _js               : [USE _plugins INSTEAD] include custom script “script.js”
* _plugins          : use registered plugins with this component (see plugins
folder)
* _params           : parameters that are set in the sidebar on the right
* optionName        : a custom option (custom name, custom value)
* …               : unlimited custom options and components :)
Filters:
* _onParamsShow:    : called when the params panel is showed
  Usage:
  _onParamsShow: function(e, $params, $block) {
    // see how it used in Slider component
  }
* _onParamsChange   : called when some params are changed
                    : CALLED also without params when this component is loaded
  Usage
  _onParamsChange: function($item, paramName, paramValue) {
    //
  }
* _publishFilter    : filter for changing a jQuery object of the component that is
published
  Usage:
  _publishFilter: function($obj, pageJSON) {
    $obj.append('Custom Code');
  }

===== Parameters (_params) =====
You can use switchers, selectors, checkboxes, inputs, image file dialogs and lists to set up your
parameters
* Hidden
    paramName: {
        default: 'Some value'
    }
* 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: ''
    }
    Optional RegExp:
    paramName: {
        type: 'text',
        title: 'Title',
        regexp: /^someRegexp/g,
        regexpError: 'Input Error',
        default: ''
    }
* Textarea
    paramName: {
        type: 'textarea',
        title: 'Title',
        default: ''
    }
    Optional RegExp:
    paramName: {
        type: 'text',
        title: 'Title',
        regexp: /^someRegexp/g,
        regexpError: 'Input Error',
        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'
        }
    }
* Fonts
    paramName: {
        type: “fonts”,
        title: “Title”,
        default: {
            name:“Font name”,
            css:“Font name,serif”, // CSS Font definition
            link:“https://google.link“
        }
    }
* 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
        }
    }
* Image Tabs (slider example)
    required fields:
        default.image
        default.active
    optional fields:
        default.thumb (will be added image width width = 800px)
    paramName: {
        type: 'image-tabs',
        title: 'Title',
        _params: {
            image: {
                type: 'image',
                title: 'Image'
            },
            showTitle: {
                type: 'switch',
                title: 'Show Title'
            }
        },
        default: [
            {
                image: 'images/slide1.jpg',
                active: true,
                showTitle: true,
                title: 'SLIDE 1'
            }, {
                image: 'images/slide2.jpg',
                active: false,
                showTitle: true,
                title: 'SLIDE 2'
            }
        ]
    }
Default Parameters
You can set any value and also some predefined system variables:
@USER_EMAIL@ - will added user email
paramName: {
    default: '@USER_EMAIL@'
}
Half width
The “halfWidth” flag shrinks the width of param to half of param-container.
Now applied to separator, text, textarea, switch, radio, check, select, color, range, image-tabs.
The default value is false.
paramName: {
    halfWidth: true
}
Parameters Conditions
Each parameter may have a condition. Example:
_params: {
  firstParam: {
    type: 'switch',
    title: 'Title',
    default: true
  },
  secondParam: {
    type: 'text',
    title: 'Title',
    default: 'Default',
    condition: ['firstParam']
  }
  …
}
If you want to check FALSE, use this condition:
condition: ['!firstParam']
secondParam will be shown when the firstParam switcher is enabled.
For sub-options you may use a dot as a separator:
condition: ['firstParam.thirdSwitch']
Example:
_params: {
  …
  tabsParam:{
    type: 'image-tabs',
    _params: {
        thirdSwitch: {
            type: 'switch',
            title: 'Title3',
            default: false
        },
        fourthParam: {
            type: 'text',
            title: 'Title4',
            default: false,
            default: 'Default',
            condition: ['tabsParam.thirdSwitch']
        }
    }
  }
}
The “fourthParam” will be shown when the fistParam thirdSwitch is enabled.

===== Parameters_example =====
* Switch
    // JS
    mbrApp.loadComponents({
        'component-name': {
            _group: 'Group Name',
            _params: {
                paramName: {
                    type: 'switch',
                    title: 'Title',
                    default: true
                }
            }
        }
    })
    // HTML
    <div>
        paramName: {_params.paramName}
        <div mbr-if=“_params.paramName”>
            Show only if paramName = true
        </div>
    </div>
* Text
    // JS
    mbrApp.loadComponents({
        'component-name': {
            _group: 'Group Name',
            _params: {
                myName: {
                    type: 'text',
                    title: 'My Name',
                    default: 'Mobirise'
                }
            }
        }
    })
    // HTML
    <div>
        My name is {_params.myName}
    </div>
    <div mbr-html=“_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 mbr-src=“_params.image” alt=””>
    </div>
    <div mbr-bg-image=“_params.image”>
    </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>
        <li mbr-each-myval=“_params.paramChecks”>
            {myval}
        </li>
    </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>
* Fonts List
    Return Object with params name, css, link.
    // JS
    mbrApp.loadComponents({
        'component-name': {
            _group: 'Group Name',
            _params: {
              itemFontName: {
                type: “fonts”,
                title: “Font Name”,
                default: {}
              }
            }
        }
    })
    // Example1:
    // HTML
    <span> {_params.itemFontName.name} </span>
    // Example2: apply font style to menu item throw additing css style definition
    // JS
    _onParamsChange: function($item, paramName, paramValue){
        if (undefined === paramName || 'itemFontName' == paramName){
            var itemStyle = this._styles['.mbr-navbar__item .mbr-
buttons__link']||{};
            var font = this._params.itemFontName ||{};
            if (font.css)
                itemStyle[“font-family”] = font.css;
            if (font.url)
                itemStyle[“googleLink”] = font.url; // googleLink - used only in
export
            this._styles['.mbr-navbar__item .mbr-buttons__link'] = itemStyle;
            mbrApp.Core.renderComponentsStyles();
        }
    }
* 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,
                        width:360,
                        loop: false
                    }
                },
                bgVideo: {
                    type: 'video',
                    title: 'YouTube',
                    default: {
                      url: 'http://www.youtube.com/watch?v=uNCr7NdOJgw'
                    }
                }
            }
        }
    })
    // HTML Example 1
    <iframe mbr-width=“_params.video.width” mbr-height=“_params.video.height” mbr-
src=“_params.video.url” frameborder=“0” allowfullscreen></iframe>
    // HTML Example 2
    <div mbr-bg-video=“_params.bgVideo.url” style=“width:360px;height:240px;”>Video
added as backgrounds</div>
Parameters (custom)
You can use custom parameters as you wish:
// 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 component
Example: see 'menu' component
Example:
mbrApp.loadComponents({
    'componentName': {
        _css: true,
        _js: true,
        …
    }
})
And add these new files:
components/componentName/style.css
components/componentName/script.js
Text Editor
If you want to attach a text editor with extended toolbar define “data-app-edit” attribute for custom
element.
“data-app-edit” attribute may have these values: “full”, “content”, “buttons”, “menu”.
Example:
<p data-app-edit=“full”>Text</p>
Toolbar Options
You can remove or add some buttons from toolbar
Available names for Text (“full”,“content”):
style
mbrAlign
mbrLink
ul
ol
mbrFonts
mbrFontSize
mbrColor
Available names for Buttons (“buttons”,“menu”):
mbrLink
mbrFonts
mbrColor
mbrFontSize
mbrBtnColor
mbrBtnMove
mbrBtnAdd
mbrBtnRemove
Example (remove mbrBtnMove):
<div mbr-html=“button1” data-app-edit=“buttons” data-toolbar=“-mbrBtnMove”
class=“mbr-buttons”></div>
Example (remove mbrFonts and mbrLink):
<div mbr-html=“buttons” class=“mbr-buttons” data-app-edit=“buttons” data-toolbar=“-
mbrLink,-mbrBtnAdd,-mbrBtnMove,-mbrBtnRemove”></div>