|**====== 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\\ \\ paramName: %%{_%%params.paramName}\\
\\ Show only if paramName = true\\
\\
\\ My name is %%{_%%params.myName}\\
\\ \\ * File Dialog\\ %%//%% JS\\ mbrApp.loadComponents%%({%%\\ 'component-name': {\\ _group: 'Group Name',\\ _params: {\\ image: {\\ type: 'image',\\ title: 'Image',\\ default: 'images/bg.jpg'\\ }\\ }\\ }\\ })\\ %%//%% HTML\\ \\
![]()
\\
\\
\\ * 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\\ \\ * 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\\ \\ Gender: %%{_%%params.gender}\\
\\ * 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\\ %%{_%%params.itemFontName.name} \\ %%//%% 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\\ \\ %%//%% HTML Example 2\\ Video\\ added as backgrounds
\\ **Parameters (custom)\\ ** You can use custom parameters as you wish:\\ %%//%% JS\\ mbrApp.loadComponents%%({%%\\ 'component-name': {\\ _group: 'Group Name',\\ myParam: 'Value'\\ }\\ })\\ %%//%% HTML\\ \\ My custom param value: {myParam}\\
\\ **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:\\ Text
\\ **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):\\ \\ Example (remove mbrFonts and mbrLink):\\ \\ \\ \\ \\ |