Capsule mobiteach components

Useful react components to use in Mobiteach capsules

• Capsule mobiteach components
  • Usage
  • GUI Components
    • MbtLeaveButton
    • MbtPopup
    • MbtScenesMenu
    • MbtScenesIcon
    • MbtBrick
    • MbtDialog
    • MbtFullScreen
    • MbtLoader
    • MbtDragElement
  • Mobiteach Activities
    • MbtDocument
    • MbtDome360
    • MbtPostIt
    • MbtQuiz
    • MbtUrl
  • Language
  • To update the package in npm

Usage

yarn add capsule-mobiteach-components # or npm install capsule-mobiteach-components

Import the components you want to use from the package

import { example } from 'capsule-mobiteach-components';

GUI Components

A list of useful design components for Mobiteach capsules

MbtLeaveButton

A leave button that is placed on the top right of the parent and a function is called when clicked

| Prop | Description | Default | | ------- | -------------------- | ------- | | OnLeave | called upon on click | |

MbtPopup

A popup with a clickable dimmed background

| Prop | Description | Default | | -------- | --------------------------------------------- | -------- | | OnLeave | called upon clicking on the dimmed background | () => {} | | children | JSX Element(s) that will show on the popup | |

MbtScenesMenu

Menu showing the scenes

| Prop | Description | Default | | -------- | ----------------------------------------- | ------------------- | | show | If the menu is visible or not | | | size | Size of the menu | 150 | | mode | Vertical or horizontal menu | ModeType.HORIZONTAL | | children | JSX Element(s) that will show on the menu | |

MbtScenesIcon

Usually used alongside with MbtScenesMenu, represents the icon of a single scene

| Prop | Description | Default | | ---------------- | ------------------------------------------------------- | ------- | | background | Image of the scene | | | name | Name of the scene | | | mode | Horizontal of Vertical for size reasons | | | size | Size wanted | | | onSceneIconClick | Function called upon clicking on the scene | | | selected | If the scene is selected makes a blue outline around it | false |

MbtBrick

A brick, fully customizable
Brick state can be any of the following:

"INVISIBLE | INACTIVE | ACTIVE | INPROGRESS | DONE | FAILED | SUCCESS"

Type can be:

"GOTO | QUIZ | POST-IT | DOC | URL | IMAGE360 | VIDEO360"

And documentType:

"pdf | doc | docx | ppt | pptx | xls | xlsx | image | mp3 | mp4"

| Prop | Description | Default | | ------------ | -------------------------------- | -------- | | name | named of the brick | | | type | brick type | Unknown | | documentType | document type if it's a DOC | | | state | brick state | "ACTIVE" | | showSubIcon | if the brick sub icon is shown | true | | showText | if the brick text below is shown | true | | htmlAttr | All custom html attributes | none |

MbtDialog

A dialog in absolute that the size depends on the parent There's 2 options and a default value.

• Either in a grid (that starts with 1 not 0) with:
  • Start (ex: {2, 2})
  • End (ex: {4, 4})
  • nbSquares (ex: 5)

So the dialog will show up like this relative to it's parent in this example, grid of 5 and starts at 2,2 (s) and ends at 4,4 (e)

• Or in absolute with percentages
  • posStart (ex : {10,10})
  • width (ex: 80)
  • height (ex: 80)

It applies the css properties top,left,width,height in position absolute to the dialog

• If you want to use the modes above you have to provide ALL 3 props related to it, if the props are invalid or none are given the default values will make it take up all available space :
  • posStart: {0 , 0}
  • height: 100
  • width: 100

| Prop | Description | Default | | --------- | ------------------------------------------------------------------ | ------------------- | | start | Start position on the grid | | | end | End position on the grid | | | nbSquares | Number of squares in the grid | | | posStart | Percentage from the top and left it starts (ex: {top: 5, left: 5}) | { top: 0, left: 0 } | | height | Height in percentage | 100 | | width | Width in percentage | 100 | | mode | 'preview' has an opacity and 'plain' is normal | 'plain' | | children | JSX Element(s) in the component | | | htmlAttr | All the html attributes are optional | |

MbtFullScreen

A fullscreen button

| Prop | Description | Default | | ------ | -------------------------------------------- | ------- | | divRef | ref of the div you want to get in fullscreen | |

MbtLoader

Loader with a z-index of 10000

| Prop | Description | Default | | ---- | ------------------------------- | ------- | | show | If the loader is showing or not | |

MbtDragElement

| Prop | Description | Default | | ------------- | --------------------------------------- | ------- | | position | the position | | | dropRef | ref of the drop element | | | showDragImage | If the drag image shows | | | data | Data | | | children | JSX Element(s) shown under this element | | | ...htmlAttr | any html attributes | |

Mobiteach Activities

MbtDocument

A document activity

Example of a documentState :

documentState: {
    results: null,
    successRate: 0 | 1,
    activityCompletedRate: 0...1,
    activityState: {
        currentPdfPageNumber: newPage
        mediaCurrentTime: currentTime
    }
}

| Prop | Description | Default | | ----------------- | ------------------------------------------------------------------------------- | ------------- | | activity | The activity gotten form the API | | | documentState | The initial state of the document | {} | | onDocumentLeave | Function called upon leaving the document through the button | (state) => {} | | onDocumentAdvance | Function called upon changing page/advancing in the document | (state) => {} | | onDocumentFinish | Function called upon finishing the document | (state) => {} | | onStatusChange | When the status of the document changes, best function to use to get the status | (state) => {} | | baseUrl | If there's a baseUrl before the path of the document | "" |

MbtDome360

Dome360 can be used to show 360° images and videos

activity is of type:

{
  url: "src", 
  activityType: "IMAGE360" | "VIDEO360"
}

| Prop | Description | Default | | ---------------- | ------------------------------------------- | ------------- | | activity | The activity | | | mediaCurrentTime | Current time if it's a video360 | 0 | | onStatusChange | When the status of the activity changes | (state) => {} | | onDomeLeave | Function called upon finishing the activity | (state) => {} |

MbtPostIt

Can be used to create post-its, the topic in activity is the title. The best function to use to get all the status changes is onStatusChange.

Activity of type:

{ topic : "" } 

And user of type:

{
  _id: 0, 
  firstname: "", 
  lastname: ""
}

| Prop | Description | Default | | -------------- | ------------------------------------------------------------ | -------------- | | activity | The activity | | | user | The user | | | postIts | If already created postIts you can pass them in props | {} | | onPostItCreate | Function called upon creating a postIt | (postIt) => {} | | onPostItEdit | Function called upon editing a postIt | (postIt) => {} | | onPostItDelete | Function called upon deleting a postIt | (postIt) => {} | | onStatusChange | Function called upon any change in the postIts | (state) => {} | | onPostItLeave | Function called upon clicking the leave button | () => {} | | viewOnly | If the postIts are in "view only" mode, can't edit or create | |

MbtQuiz

Shows the quiz and returns the state.

The initialState if not currentState prop is defined is:

initialState = {
    questionIndex: 0,
    answers: [],
    isFinish: false,
    status: "QUESTION"
}

Mode is the QUIZ mode, it can be:

mode: "MODE01 | MODE02 | MODE03"

| Prop | Description | Default | | ------------------ | ---------------------------------------------------- | ---------------------- | | activity | Data about the activity gotten from the Mobitech API | | | mode | The mode of the quiz | "MODE01" | | currentState | The current state of the activity | InitialState | | onStatusChange | Function called upon any change in the state | (state) => {} | | onQuestionAnswer | Function called upon answering a question | (state) => {} | | onFinish | Function called upon finishing the QUIZ | (state) => {} | | onQuizLeave | Function called upon clicking the leave button | (state) => {} | | hasLeaveButton | If the QUIZ has a leave button | true | | showResultOnFinish | If you want to show the results on finish | true | | baseUrl | If there's a baseUrl | window.location.origin |

MbtUrl

A url type activity, opens the URL in a new tab or in an iframe

| Prop | Description | Default | | -------------- | ----------------------------------------------- | ------------- | | UrlName | Name of the url | | | Url | url | | | withIframe | If it opens in an iframe | false | | onUrlLeave | Function called upong clicking the leave button | (state) => {} | | onStatusChange | The activity | (state) => {} |

Language

You can set and get the language used using the functions:

• SetMbtLang("fr")
• GetMbtLang()

To update the package in npm

• Add the component you want to add to the package to the index.tsx file in the src folder
• Run "npm run build" to compile the folder with babel
• Change the version in package.json and run "npm publish"
• Needs an npm account with access to the package, must use "npm login"