m-page

Any type of page module (predefined module containing the word "page") must be used to identify a page.

Optional properties include:

• header - [String] This is the unique name of a user defined module. This module is then applied within the <div> of this page. This is great for use of elements you want to be persistent across multiple pages.
• footer - [String] This is the unique name of a user defined module. This module is then applied within the <div> of this page. This is great for use of elements you want to be persistent across multiple pages.

The key manditory property for any page module is the event. The event is what loads this page when triggered. This event should be defined in the project.json sendKeyEvents node.

{
	"id": "m-page",
	"class": "my-class-name",
	"event": "MY_PAGE_EVENT_STRING",
	"header": "optional_header_module",
	"footer": "optional_footer_module",
	"data": {		
	},
	"modules": []	
}

m-div

This creates a simple <div> tag that can host additional nested modules

{
	"id": "m-div",
	"class": "my-class-name",
	"data": {
	},
	"modules": []	
}

m-button

This creates an actionable button. Optional properties include:

• width - [String] Style applied width.
• height - [String] Style applied height.
• image - [String] This applies a URL to background-image
• copy - [String] Text copy applied to text; however, if using languages, is is recommended instead to use the data attribute "lang-copy-id".

The key manditory property for the m-button is the event. The event is the event that is called when the button is clicked. This event should be defined in the project.json sendKeyEvents node.

{
	"id": "m-button",
	"class": "my-class-name",
	"event": "EVENT_STRING",
	"data": {
		"lang-copy-id": "my_lang_id"
	},
	"modules": []	
}

m-string

This creates a <div> tag that contains a string. The new property here is copy. For use with multiple languages, this property can be set to an empty string then, use the data attribute property lang-copy-id to set the copy string per language.

{
	"id": "m-string",
	"class": "my-class-name",
	"copy": "",
	"data": {
		"lang-copy-id": "my_lang_id"
	},
	"modules": []	
}

m-image

This creates a <img> tag.

{
	"id": "m-image",
	"class": "my-class-name",
	"src": "url/to/my/image.jpg",
	"width": "100px",
	"height": "100px",
	"data": {
	},
	"modules": []	
}

m-video

This creates a <div> containing a <video> tag. Optional properties include:

• width - [Number] Video applied width.
• height - [Number] Video applied height.
• autoplay - [Boolean] Autoplay defaults to true unless defined here.
• controls - [Boolean] Controls will default to false unless defined here.
• subtitles - [Object] Subtitles for video.
  • label - [String] See online public documentation for "label" <video> <track> usage.
  • langId - [String] See online public documentation for "srclang" <video> <track> usage.
  • path - [String] Path to to subtitle file.
• events - [Object] This property is manditory but the nested properties are not.
  • VideoEvent - [Event_String] VideoEvent is any event that is associated with the standard javascript on a <video> tag. The value is the event string that will be called when the video player triggers the video event.
    • Predefined video player events that already have events associated with them (but can be overwritten) are:
      • onended - fires EVENT_VIDEO_END.
      • onplay - fires EVENT_VIDEO_START.
      • onpause - fires EVENT_VIDEO_PAUSE.

{
	"id": "m-video",
	"class": "my-class-name",
	"src": "url/to/my/video.mp4",
	"poster": "url/to/my/posterImage.jpg",
	"events": {
	}
}

m-iframe

Creates an iFrame.

{
	"id": "m-iframe",
	"class": "my-class-name",
	"source": "url/to/my/iframe.com"
}

m-form

Creates a <form> tag. The inputs array would contain an array of modules within the <form> tag.

{
	"id": "m-form",
	"class": "my-class-name",
	"data": {
	},
	"inputs": []
}

m-form-checkbox

This creates a checkbox. Within the group is an array of all the checkboxes you want associated with the group.

{
	"id": "m-form-checkbox",
	"class": "my-class-name",
	"name": "group_name",
	"required": false,
	"group": [
		{
			"class": "my-class-name1",
			"value": "Checkbox_Value1",
			"label": "My Check 1"
		},
		{
			"class": "my-class-name2",
			"value": "Checkbox_Value2",
			"label": "My Check 2"
		}
	]
}

m-form-input

This creates an input. Within the group is an array of all the checkboxes you want associated with the group.

{
	"id": "m-form-input",
	"class": "my-class-name",
	"required": false,
	"label": "My Input Label",
	"name": "My_Input_Name",
	"placeholder": "My Placeholder Text",
	"type": "String"
}

m-form-radio

This creates a radio button. Within the group is an array of all the radio buttons you want associated with the group.

{
	"id": "m-form-checkbox",
	"class": "my-class-name",
	"name": "group_name",
	"required": false,
	"label": "My Group Label",
	"group": [
		{
			"class": "my-class-name1",
			"name": "Radio_Name",
			"value": "Radio_Value1",
			"label": "My Radio 1"
		},
		{
			"class": "my-class-name2",
			"name": "Radio_Name",
			"value": "Radio_Value2",
			"label": "My Radio 2"
		}
	]
}

m-form-select

This creates a select/dropdown. Within the options is an array of all the options.

{
	"id": "m-form-select",
	"class": "my-class-name",
	"name": "group_name",
	"required": false,
	"label": "My Dropbox Label",
	"options": [
		{
			"class": "my-class-name1",
			"value": "Select_Value1",
			"label": "My Select 1"
		},
		{
			"class": "my-class-name2",
			"value": "Select_Value2",
			"label": "My Select 2"
		}
	]
}

m-form-textarea

This creates a textarea.

{
	"id": "m-form-textarea",
	"class": "my-class-name",
	"required": false,
	"label": "My Textarea Label",
	"name": "My_Textarea_Name",
	"placeholder": "My Placeholder Text",
	"value": "Value in Textarea"
}