{ "$schema": "http://json-schema.org/draft-07/schema#", "name": "view.DO UI-ML: HTML State Data", "description": "Data to create and render a html state", "type": "object", "required": ["id", "name", "url", "next"], "properties": { "id": { "name": "Id", "type": "string", "description": "A unique identifier for the state. Used by iVXjs for navigation and CSS styling." }, "name": { "name": "Name", "type": "string", "description": "A human readable name of the state." }, "type": { "name": "Type", "type": "string", "description": "This state's type indicating what kind of state will render to the user.", "enum": [ "video", "html", "input", "navigation" ] }, "url": { "name": "Url", "type": "string", "description": "The url pathname which this state can be found that must be preceded by a /. For example, if the domain name is \"http://www.example.com\" and this state's url is \"/test\" then the url for this state will be \"http://www.example.com/#/test.\"" }, "next": { "type": "array", "name": "Next", "description": "A collection of rules and state Ids that indicate which state this state will go to once an appropriate actions is performed on the state. Each state will have its own action that will trigger a next navigation.", "minLength": 1, "items": { "name": "Next Collection Items", "type": "object", "description": "Indicates which state to go to next based on its stateId and rule", "required": ["stateId"], "properties": { "stateId": { "name": "State ID", "type": "string", "description": "The stateId the user will go to if the rule is evaluated to true or missing." }, "rule": { "name": "Rule", "type": "object", "description": "Supplies the rule information for this experiences rule function to evaluate if this state should be used. If this rule evaluates to 'true', then iVXjs will navigate to the corresponding state.", "required": ["conditions"], "properties": { "conditionOperators": { "name": "Condition Operators", "type": "string", "description": "Indicates how to evaluate the conditions for this rule.", "enum": [ "and", "or", "not" ] }, "conditions": { "name": "Conditions", "type": "array", "description": "The conditions/rules to be evaluate to a boolean.", "items": { "type": "object", "name": "Condition Settings", "description": "The key, value and the evaluator for each of the conditions.", "required": ["key", "is", "value"], "properties": { "key": { "name": "Condition Key", "type": "string", "description": "The key from the experience.data object or a keyword the rule function uses to get the correct data." }, "is": { "name": "Condition Comparer", "type": "string", "description": "The type of comparison this key will be evaluated against the value", "enum": [ "lt", "lte", "gt", "gte", "equals", "notEquals" ] }, "value": { "name": "Condition Value", "type": ["number", "string", "boolean", "integer"], "description": "The value to evaluate the data found in the 'key'." }, "type": { "name": "Condition Type", "type": "string", "description": "Type of comparison. By default, it is input meaning it looks for any data input in the experience object. However, some data modules may use this to indicate a special kind of condition" } } } } } } } } }, "audio": { "type": "object", "name": "State Audio", "description": "All settings for state-wide audio that plays when a user enters the state.", "required": ["src"], "properties": { "src": { "name": "State Audio Source", "type": "string", "description": "The path to the audio for this state." }, "loop": { "name": "Loop", "type": "boolean", "description": "Determines if the state wide audio should repeat if the audio ends." }, "cuePoints": { "type": "array", "name": "State Audio Cue Points", "description": "Events/Actions to fire while a state wide audio plays.", "items": { "type": "object", "name": "State Audio Cue Points Event Data", "description": "Events to fire at a specific time during an audio clip.", "required": ["timeAt"], "properties": { "timeAt": { "name": "Time At", "type": "number", "description": "Time in the audio at which this event should fire." }, "once": { "name": "Once", "type": "boolean", "description": "Indicates that this event should fire once (just in case the audio loops)" }, "eventName": { "name": "State Audio Event Name", "type": "string", "description": "The event to be fired." }, "args": { "name": "State Audio Event Arguments", "type": "object", "description": "Arguments for this event." } } } }, "onEnd": { "name": "On Audio End", "type": "array", "description": "Events to fire when the audio clip is finished." } } }, "header": { "type": "object", "name": "Header", "description": "Contains all the settings for the header which appears before the main section of the state.", "properties": { "templateUrl": { "name": "Header's Template URL Path", "type": "string", "description": "Url path to an external .html file" }, "html": { "name": "Header's HTML", "type": "string", "description": "HTML to be inserted in the header section of the state." }, "classes": { "name": "Header's CSS Class Names", "type": "string", "description": "Classes to add to the header section of this state. Used mostly for injecting classes for ui frameworks." } } }, "section": { "type": "object", "name": "Section", "description": "Contains all the settings for the section (the wrapper around state specific features like forms, links and video", "properties": { "classes": { "name": "Section CSS Class Names", "type": "string", "description": "Classes to be added to the section part of the state. Primarily used for UI frameworks and targeting specific elements." } } }, "footer": { "type": "object", "name": "Footer", "description": "Contains all the settings for the footer which appears after the main section of the state.", "properties": { "templateUrl": { "name": "Footer Template URL Path", "type": "string", "description": "Url path to an external .html file." }, "html": { "name": "Footer HTML", "type": "string", "description": "HTML to be inserted in the footer section of the state." }, "classes": { "name": "Footer CSS Class Names", "type": "string", "description": "Classes to add to the footer section in this state. Used mostly for injecting classes for ui frameworks." } } }, "onEnter": { "name": "On Enter", "type": "array", "description": "A collection of events and actions to run everytime the user loads this state.", "items": { "type": "object", "descriptions": "Event data as defined in the event section of this documentation" } }, "onExit": { "name": "On Exit", "type": "array", "description": "A collection of events and actions to run everytime the user exits this state.", "items": { "type": "object", "descriptions": "Event data as defined in the event section of this documentation" } }, "templateUrl": { "name": "Template URL", "type": "string", "description": "Url path to an external .html file to be placed in this HTML state." }, "html": { "name": "HTML", "type": "string", "description": "HTML to render in this state" }, "timeoutInMs": { "name": "Timeout (in milliseconds)", "type": "number", "description": "Since there is no native way of progressing to the next state, this will indicate the time in milliseconds for the state to go to the next state." }, "onTimeout": { "name": "On Timeout", "type": "array", "description": "An array of event data to run when a window is timed out but before it navigates to the next state.", "items": { "type": "object", "descriptions": "Event data as defined in the event section of this documentation" } }, "onCompile" : { "name" : "On Compile", "type" : "array", "description" : "An array event data that runs when the HTML has been compiled to the screen. Used primarily for animation on dom elements defined in the the HTML.", "items" : { "type" : "object", "description" : "Event data as defined in the event section of this document" } } } }