@input

Description

The '@input` context query describes information around the input method (i.e. mouse, touch, keyboard) the user is using to interact with the ad and details around such interaction (i.e. mouse position).

Example Usage

Perhaps you had an image of a person you were using in your ad and you wanted the eyes of the person in the photo point in the direction of the position of the mouse. If you had 8 images each with the eyes facing a cardinal direction (N, S, E, W, NE, SE, SW, NW), you could change the image source based on the last known position of the mouse relative to the current component's boundaries.

.eyes {
	/* Mouse is over the ad */
	background-image: url('/assets/eyes-forward.png');
	

	/* Basic Up/Down/Right/Left */	
	@input (ad-top < 0) {
		background-image: url('/assets/eyes-up.png');
	}
	
	@input (ad-left < 0) {
		background-image: url('/assets/eyes-left.png');
	}
	
	@input (ad-right < 0) {
		background-image: url('/assets/eyes-right.png');
	}
	
	@input (ad-bottom < 0) {
		background-image: url('/assets/eyes-down.png');
	}
	
	/* Diagonal Directions */
	
	@input (ad-top < 0) and (ad-left < 0) {
		background-image: url('/assets/eyes-up-left.png');
	}
	
	@input (ad-top < 0) and (ad-right < 0) {
		background-image: url('/assets/eyes-up-right.png');
	}
	
	@input (ad-bottom < 0) and (ad-left < 0) {
		background-image: url('/assets/eyes-down-left.png');
	}
	
	@input (ad-bottom < 0) and (ad-right < 0) {
		background-image: url('/assets/eyes-down-right.png');
	}
}

Available Features

Feature Name	Javascript Name	Value	Example Value	Description
`primary-type`	`inputPrimaryType`	`mouse` `touch` `keyboard` `other`	`mouse`	A string representing the primary input method being used on the current device. In the case of a device having numerous input methods, mouse will override touch, touch will override keyboard, keyboard will override other.
`mouse`	`inputMouse`	`boolean`	`true`	A boolean describing if the device has a mouse.
`touch`	`inputTouch`	`boolean`	`true`	A boolean describing if the device has touch capabilities.
`keyboard`	`inputKeyboard`	`boolean`	`true`	A boolean describing if the device has a keyboard.
`other`	`inputOther`	`boolean`	`true`	A boolean describing if the device has an other type of input method (other than `mouse`, `touch`, or `keyboard`).
`moving`	`inputMoving`	`boolean`	`true`	A boolean describing if the mouse is currently moving.
`ad-top`	`inputAdTop`	`number`	`340`	The position of the ad's top side relative to the last input y coordinate.
`ad-right`	`inputAdRight`	`number`	`-801`	The position of the ad's right side relative to the last input x coordinate.
`ad-bottom`	`inputAdBottom`	`number`	`290`	The position of the ad's bottom side relative to the last input y coordinate.
`ad-left`	`inputAdLeft`	`number`	`-405`	The position of the ad's left side relative to the last input x coordinate.
`document-top`	`inputDocumentTop`	`number`	`736`	The position of the last input event relative to the top side of the document.
`document-right`	`inputDocumentRIght`	`number`	`873`	The position of the last input event relative to the right side of the document.
`document-bottom`	`inputDocumentBottom`	`number`	`1046`	The position of the last input event relative to the bottom side of the document.
`document-left`	`inputDocumentLeft`	`number`	`10`	The position of the last input event relative to the left side of the document.
`viewport-top`	`inputViewportTop`	`number`	`390`	The position of the last input event relative to the top side of the viewport.
`viewport-right`	`inputViewportRight`	`number`	`826`	The position of the last input event relative to the right side of the viewport.
`viewport-bottom`	`inputViewportBottom`	`number`	`543`	The position of the last input event relative to the bottom side of the viewport.
`viewport-left`	`inputViewportLeft`	`number`	`-800`	The position of the last input event relative to the left side of the viewport.
`screen-top`	`inputScreenTop`	`number`	`78`	The position of the last input event relative to the top side of the screen.
`screen-right`	`inputScreenRight`	`number`	`124`	The position of the last input event relative to the right side of the screen.
`screen-bottom`	`inputScreenBottom`	`number`	`947`	The position of the last input event relative to the bottom side of the screen.
`screen-left`	`inputScreenLeft`	`number`	`37`	The position of the last input event relative to the left side of the screen.