Events

A directive for handling basic html events (e.g., blur, keyup, focus, etc.)
Currently MacGyver has blur, focus, keydown, keyup, mouseenter and mouseleave

Parameters

mac-blur
Type: Expression
Expression to evaluate on blur

mac-focus
Type: Expression
Expression to evaluate on focus

mac-keydown
Type: Expression
Expression to evaluate on keydown

mac-keyup
Type: Expression
Expression to evaluate on keyup

mac-mouseenter
Type: Expression
Expression to evaluate on mouseenter

mac-mouseleave
Type: Expression
Expression to evaluate on mouseleave

Example

Blur and Focus

<input type="text" mac-blur="eventIsFocused = false" mac-focus="eventIsFocused = true" />

Keydown and Keyup

<input type="text" mac-keyup="eventKey = 'keyup'" mac-keydown="eventKey = 'keydown'" />

Mouseenter and Mouseleave

<div mac-mouseenter="eventMouse = 'mouseenter'"
     mac-mouseleave="eventMouse = 'mouseleave'"
     style="width: 100px; height: 100px; background: gray;">Hover Over</div>

Keydown events

A directive for handling certain keys on keydown event
Currently MacGyver supports enter, escape, space, left, up, right and down

Parameters

mac-keydown-enter
Type: Expression
Expression to evaluate on hitting enter

mac-keydown-escape
Type: Expression
Expression to evaluate on hitting escape

mac-keydown-space
Type: Expression
Expression to evaluate on hitting space

mac-keydown-left
Type: Expression
Expression to evaluate on hitting left

mac-keydown-up
Type: Expression
Expression to evaluate on hitting up

mac-keydown-right
Type: Expression
Expression to evaluate on hitting right

mac-keydown-down
Type: Expression
Expression to evaluate on hitting down

Example

<input type="text"
       placeholder="keydown"
       mac-keydown-enter="eventKeydown = 'enter'"
       mac-keydown-escape="eventKeydown = 'escape'"
       mac-keydown-space="eventKeydown = 'space'"
       mac-keydown-left="eventKeydown = 'left'"
       mac-keydown-up="eventKeydown = 'up'"
       mac-keydown-right="eventKeydown = 'right'"
       mac-keydown-down="eventKeydown = 'down'"/>

Pause Typing

macPauseTyping directive allow user to specify custom behavior after user stops typing for more than (delay) milliseconds

Parameters

mac-pause-typing
Type: Expression
Expression to evaluate after delay

mac-pause-typing-delay
Type: Expression
Delay value to evaluate expression (default 800)

Example

<input type="text" mac-pause-typing="afterPausing($event)">

Windows Resize

Binding custom behavior on window resize event

Parameters

mac-window-resize
Type: Expression
Expression to evaluate on window resize

Example