Differences

This shows you the differences between two versions of the page.

--- add_components_to_app [2019/08/06 11:30] – Degand Patrick
+++ add_components_to_app [2019/08/18 16:26] (current) – removed Degand Patrick
@@ Line 1: / Line 1: @@
-|**====== 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 =====
-\\ ** 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 %%(_%%params) =====
-\\ ** * 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>\\ \\ \\ \\ |