Merge pull request #56 from EnsembleUI/docs-and-favicon

Added a few more items in docs and added favicon
EnsembleUI · Nov 18, 2023 · 47cd2e9 · 47cd2e9
2 parents ebf1a58 + 1f4d0e8
commit 47cd2e9
Show file tree

Hide file tree

Showing 11 changed files with 58 additions and 1 deletion.
diff --git a/actions/23-invokeHaptic.md b/actions/23-invokeHaptic.md
@@ -0,0 +1,45 @@
+# Action: invokeHaptic
+
+invokeHaptic action allows users to play haptics on the device allowing better UX. It supports 5 haptics namely heavyImpact, mediumImpact, lightImpact, selectionClick, and vibrate. They are listed in decreasing order of intensity
+and vibrate does a short vibrate pulse. It also supports playing haptic by JavaScript code and also has additional parameters like onTapHaptic or onChangeHaptic added to multiple widgets where haptic would be required.
+
+### Properties
+
+| Property  | Type   | Description                                              |
+| :-------- | :----- | :------------------------------------------------------- |
+| type      | enum   | The type of haptic to perform. It should be one of heavyImpact, mediumImpact, lightImpact, selectionClick, and vibrate |
+| onComplete| action | Execute another Action post executing the haptic |
+
+**Example**
+
+<div class="code-container" markdown=1>
+  <button onclick="copyCode()" class="copy-code-button">Copy Code</button>
+
+```yaml
+View:
+  header:
+    title: Haptic
+  Column:
+    styles: { gap: 16, padding: 24 }
+    children:
+      - Button:
+          label: Using Action
+          onTap:
+            invokeHaptic:
+              type: lightImpact
+              onComplete: |
+                //@code
+                console.log("Haptic completed")
+      - Button:
+          label: Using JavaScript
+          onTap: |
+            //@code
+            invokeHaptic({type: lightImpact})
+      - Button:
+          label: Using methods
+          onTapHaptic: lightImpact
+          onTap: |
+            //@code
+            console.log("Button Press")
+```
+</div>
diff --git a/index.html b/index.html
@@ -12,6 +12,7 @@
   <link rel="stylesheet" href="global.css">
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.min.css" rel="stylesheet">
   <title>Ensemble Docs</title>
+  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
 </head>
 
 <body>

diff --git a/widget-reference/Icon.md b/widget-reference/Icon.md
@@ -11,6 +11,7 @@ The Icon Widget enables easy integration of icons from popular libraries like Fo
 | icon     | string | Icon name from Material Icons or Font Awesome                                                                                                                                                                                                                                                                                                                           |
 | library  | string | Which icon library to use, if there is no value for library then its considered to be default. `fontAwesome` `remix` ( for now only few remix icons are supported but we will support most them soon) You can check list of supported icons [here](https://github.com/EnsembleUI/ensemble/blob/476af9ea9862620205a4e85a3312e5433764f785/lib/framework/widget/icon.dart) |
 | onTap    | action | Call Ensemble's built-in functions or execute code                                                                                                                                                                                                                                                                                                                      |
+| onTapHaptic | enum | The type of haptic to perform when icon is pressed. It should be one of heavyImpact, mediumImpact, lightImpact, selectionClick, and vibrate |
 | styles   | object | [See properties](#styles)                                                                                                                                                                                                                                                                                                                                               |
 
 ### styles

diff --git a/widget-reference/Image.md b/widget-reference/Image.md
@@ -10,6 +10,7 @@ The Image Render Widget provides a simple and intuitive way to display images wi
 | :------- | :----- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | source   | string | URL to or asset name of the image. If the URL is used, it is highly recommended that the dimensions is set (either with width/height or other means) to prevent the UI jerkiness while loading. |
 | onTap    | action | Call Ensemble's built-in functions or execute code                                                                                                                                              |
+| onTapHaptic | enum | The type of haptic to perform when image is pressed. It should be one of heavyImpact, mediumImpact, lightImpact, selectionClick, and vibrate |
 | styles   | object | [See properties](#styles)                                                                                                                                                                       |
 
 ### styles

diff --git a/widget-reference/button.md b/widget-reference/button.md
@@ -12,6 +12,7 @@ A control that can execute an action on tap or click.
 | enabled      | boolean | Enables or disables the interactivity and input functionality of the widget                                         |
 | submitForm   | boolean | If the button is inside a Form and upon on tap, it will execute the form's onSubmit action if this property is TRUE |
 | onTap        | action  | Call Ensemble's built-in functions or execute code                                                                  |
+| onTapHaptic | enum | The type of haptic to perform when button is pressed. It should be one of heavyImpact, mediumImpact, lightImpact, selectionClick, and vibrate |
 | styles       | object  | [see properties](#styles)                                                                                           |
 | endingIcon   | object  | Icon placed behind the label, according to device text alignment                                                    |
 | startingIcon | object  | Icon placed in front of the label, according to device text alignment                                               |

diff --git a/widget-reference/gridview.md b/widget-reference/gridview.md
@@ -9,7 +9,8 @@ The GridView Widget empowers you to render grid-based layouts, enabling the disp
 | Property      | Type   | Description                                                                             |
 | :------------ | :----- | :-------------------------------------------------------------------------------------- |
 | item-template | object | [See properties](#item-template)                                                        |
-| onItemTap     |        | Call Ensemble's built-in functions or execute code when tapping on an item in the list. The index of the item can be retrieved using 'selectedItemIndex'. You can access as this.selectedItemIndex. See example linked above |
+| onItemTap     | action | Call Ensemble's built-in functions or execute code when tapping on an item in the list. The index of the item can be retrieved using 'selectedItemIndex'. You can access as this.selectedItemIndex. See example linked above |
+| onItemTapHaptic | enum | The type of haptic to perform when item is pressed. It should be one of heavyImpact, mediumImpact, lightImpact, selectionClick, and vibrate |
 | styles        | object | [See properties](#styles)                                                               |
 
 ### item-template

diff --git a/widget-reference/listview.md b/widget-reference/listview.md
@@ -11,6 +11,7 @@ The ListView Widget enables the rendering of lists with dynamic and scrollable c
 | item-template     | object  | [See properties](#item-template)                                                                                                                                        |
 | children          | array   | List of widgets                                                                                                                                                         |
 | onItemTap         | action  | Dispatch when an ListView item is selected/tapped.The event dispatches only when you tap on the item. The index of the item can be retrieved using 'selectedItemIndex'. You can access as this.selectedItemIndex. See example linked above|
+| onItemTapHaptic | enum | The type of haptic to perform when item is pressed. It should be one of heavyImpact, mediumImpact, lightImpact, selectionClick, and vibrate |
 | selectedItemIndex | integer | Selecting a ListView item gives the index of selected item                                                                                                              |
 | onSwipeToRefresh  | action  | Enable swipe to refresh. This will trigger onRefresh action if enabled                                                                                                  |
 | styles            | object  | [See properties](#styles)                                                                                                                                               |

diff --git a/widget-reference/lottie.md b/widget-reference/lottie.md
@@ -13,9 +13,11 @@ The Lottie Render Widget allows you to effortlessly render Lottie animation file
 | onForward | action | Callback which is fired when the animation starts playing in the forward direction |
 | onReverse | action | Callback which is fired when the animation starts playing in the reverse direction |
 | onComplete | action | Callback which is fired when the animation is completed |
+| onTap | action | Run a block of code or execute a given action when there is a tap event on lottie widget |
 | onStop | action | Callback which is fired when the animation is stopped. This is fired only when animation is stopped or aborted in between. |
 | autoPlay | boolean | Whether to automatically start the animation in the forward direction (default true) |
 | repeat | boolean | Whether we should repeat the animation (default true) |
+| onTapHaptic | enum | The type of haptic to perform when lottie is pressed. It should be one of heavyImpact, mediumImpact, lightImpact, selectionClick, and vibrate |
 
 ### styles
 

diff --git a/widget-reference/staggeredgrid.md b/widget-reference/staggeredgrid.md
@@ -9,6 +9,7 @@ StaggeredGrid is a versatile widget that arranges its children in a staggered la
 | Property      | Type   | Description                                                                             |
 | :------------ | :----- | :-------------------------------------------------------------------------------------- |
 | onItemTap     | action | Call Ensemble's built-in functions or execute code when tapping on an item in the list. |
+| onItemTapHaptic | enum | The type of haptic to perform when a item is pressed. It should be one of heavyImpact, mediumImpact, lightImpact, selectionClick, and vibrate |
 | children      | array  | List of widgets                                                                         |
 | styles        | object | [See properties](#styles)                                                               |
 | item-template | object | [See properties](#item-template)                                                        |

diff --git a/widget-reference/switch.md b/widget-reference/switch.md
@@ -17,6 +17,7 @@ The Switch Widget enables the rendering of switch toggle elements, providing use
 | enabled      | boolean | Enables or disables the interactivity and input functionality of the widget                                                                                                                              |
 | icon         | object  | [See properties](#icon)                                                                                                                                                                                  |
 | onChange     | action  | Call Ensemble's built-in functions or execute code when the input changes. Note for free-form text input, this event only dispatches if the text changes AND the focus is lost (e.g. clicking on button) |
+| onChangeHaptic | enum | The type of haptic to perform when switch state is changed. It should be one of heavyImpact, mediumImpact, lightImpact, selectionClick, and vibrate |
 | value        | string  | Specifying the value of your Text Input                                                                                                                                                                  |
 | autoComplete | boolean | Enable the Input search suggestion option                                                                                                                                                                |
 | items        | array   | List of values, or Objects with value/label pairs                                                                                                                                                        |

diff --git a/widget-reference/tabbar.md b/widget-reference/tabbar.md
@@ -11,6 +11,8 @@ The TabBar Widget enables the creation of tab bars, providing a convenient and v
 | styles        | object  | [See properties](#styles)                |
 | selectedIndex | integer | Selecting a Tab based on its index order |
 | items         | array   | Define each of your Tab here             |
+| onTabSelection | action | The action that will be performed when a tab is pressed. |
+| onTabSelectionHaptic | enum | The type of haptic to perform when a tab is pressed. It should be one of heavyImpact, mediumImpact, lightImpact, selectionClick, and vibrate |
 
 ### styles