| |**Add Components to APP\\ Steps\\ ** 1) Create an HTML file\\ template.html\\ 2) Create a preview image PNG (width = 250px)\\ thumb.png\\ 3) Call public mobirise method\\ %%//%% component.js\\ mbrApp.loadComponents%%({%%\\ 'component-name': {\\ %%//%% component options\\ },\\ ...\\ });\\ **Components (default)\\ ** 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:// |
