MClickable

MClickable ⇐ Trait#

Kind: global class
Extends: Trait
Properties

• MClickable ⇐ Trait
  • new MClickable()
  • .isClicked(mouseEvent) ⇒ boolean
  • .mouseDown(mouseEvent)
  • .mouseUp(mouseEvent)
  • .onClickDown(mouseEvent)
  • .click(child)
  • .getClickableChildren(mouseEvent) ⇒ ClickableChildren
  • ._getClickableChild() ⇒ View | undefined
  • ._getClickableChildren(mouseEvent, [clickableChildren]) ⇒ ClickableChildren
  • ._getSortedClickableCandidates() ⇒ Array.<Object.<id, index>>
  • ._filterClickableCandidates(id) ⇒ boolean

MClickable()#

Mark a view as being clickable

isClicked(mouseEvent) ⇒ boolean#

Return true if the pointer is in the view The view must have it’s MClickable#clickEnabled set to true.

Warning: the view must have it’s absolute coordinate computed, $left, $right, $top and $bottom

Kind: instance method of MClickable

mouseDown(mouseEvent)#

Mouse clicks down the screen

• capture clicked views (@see getClickableChildren)
• call onClickDown extension point

Kind: instance method of MClickable

mouseUp(mouseEvent)#

Called at the end of a click

Kind: instance method of MClickable

onClickDown(mouseEvent)#

Extension point

Kind: instance method of MClickable

click(child)#

Perform click

Kind: instance method of MClickable

getClickableChildren(mouseEvent) ⇒ ClickableChildren#

Find the views that are candidates to handle click.

By default, it uses _getClickableChild to resolve the views.

Kind: instance method of MClickable

_getClickableChild() ⇒ View | undefined#

Get the clickable view identified on mouseDown

Kind: instance method of MClickable
Returns: View | undefined - the identified clickable view

_getClickableChildren(mouseEvent, [clickableChildren]) ⇒ ClickableChildren#

Get all clickable element at position (mouseEvent.pageX ; mouseEvent.pageY)

Try to find the best candidate that has been clicked. It iterates over the view hierarchy to find the clicked view’s (ie the views that are within of the mouseEvent coordinates) Then it keep the first one(s) that have been clicked, the deeper in the hierarchy being prioritary. In other words, as soon as we have found a clicked view in the hierarchy, other clicked view’s of the same hierarchy are candidates for clickable types that have not yet been full-filled.

Examples

 +------------------------------------+
 |  ViewA                             |
 |  +-----------------------------+   |
 |  |                             |   |
 |  |  ButtonA  ButtonB  ButtonC  |   |
 |  |                             |   |
 |  +-----------------------------+   |
 |                                    |
 +------------------------------------+
ViewA, ButtonA, ButtonB & ButtonC are all Tappable

mouse on ButtonA => clickedChildren = { clickable = buttonA }
mouse on ButtonB => clickedChildren = { clickable = buttonA }
mouse on ButtonC => clickedChildren = { clickable = buttonA }
mouse outside ButtonA & ButtonB & ButtonC => clickedChildren = { clickable = ViewA }

Kind: instance method of MClickable
Access: protected

_getSortedClickableCandidates() ⇒ Array.<Object.<id, index>>#

Get the children that are candidates to be selected as clickable. Keep children that are clickable, sort children by layer then declaration order

Remarks: you may override these method to filter additional view(s), for example

Be careful with the format of the returned object

Kind: instance method of MClickable
Returns: Array.<Object.<id, index>> - An array of object, where id key value is the child id and index key value the order of declaration
Access: protected

_filterClickableCandidates(id) ⇒ boolean#

Called when the view is looking for clickable candidates The method is called on children that are clickable (isClickable === true) It must returns true if the candidate must be kept, false otherwise

You can override these method

Kind: instance method of MClickable
Returns: boolean - true if the child must be kept
Access: protected

Example

_filterClickableCandidates: function(id) {
   if (id === "modalPopup" && this.modalPopup.isVisible !== true) {
      // exclude modalPopup if not shown
      return false;
   }
   if (id !== "modalPopup" && this.modalPopup.isVisible === true) {
      // keep only modalPopup if shown
      return false;
   }
   return true;
}