jquery

This block is for downloading the jQuery library and its extensions and enabling them on a page. Extensions are enabled via dependencies on the block elements.

Usage

modules.require(['jquery'], function($) {
    console.log($);
});

Overview

Elements of the block

Element	Usage	Description
config	JS	jQuery configuration.
event	JS	Extensions for the jQuery event model.

Properties and methods of the block elements

Element	Name	Return type	Description
config	url	String	String with the URL for connecting the jQuery library.

Events of the block elements

Element	Name	Description
event	pointerclick	Eliminates the delay of the click event on touch devices.
	pointerover	Generated when the pointer on the input device is over an element.
	pointerenter	Generated when the pointer enters an element's active area.
	pointerdown	Generated when the input device enters the active button state.
	pointermove	Generated when the pointer's coordinates change.
	pointerup	Generated when exiting the active button state.
	pointerout	Generated when the pointer leaves the area over an element.
	pointerleave	Generated when the pointer leaves an element's active area.
	pointerpress	Generated on the pointerdown event.
	pointerrelease	Generated on the pointerup and pointercancel events.
	pointercancel	Generated when more pointer events are not expected to occur, or after generating the pointerdown event.

Public block technologies

The block is implemented in:

• js

event element in the jquery block

This element implements support for additional types of jQuery events. The additional types are enabled using the corresponding values of the type modifier.

Element modifiers

type modifier

Provides a set of polyfills that implement the abstraction layer over jQuery events on input devices. This allows you to create a shared logic for different platforms (desktop, phone, etc.) and supplement it with methods specific to the device type.

Each polyfill adds a set of pointer events for creating hardware agnostic logic.

All the pointer events are jQuery user events. Subscribe to pointer events in the standard way:

modules.define('pointer-test', ['i-bem-dom'], function(provide, bemDom) {

provide(bemDom.declBlock(this.name, /** @lends pointer-test.prototype */ {
    onSetMod : {
        js : {
            inited : function() {
                // subscribing to pointerpress on the block itself during initialization
                this._domEvents().on('pointerpress', this._onPress);
            }
        }
    },
    _onPress : function(e) {
        console.log(e.type);
        // subscribing to pointerrelease when calling the pointerpress handler
        this._domEvents().on('pointerrelease', this._onRelease);
    },
    _onRelease : function(e) {
        console.log(e.type);
        // unsubscribing from pointerrelease when calling the pointerrelease handler
        this._domEvents().un('pointerrelease', this._onRelease);
    }
}));
});

Different polyfills are enabled depending on the modifier's value.

type modifier with the pointer value

This is a modifier for enabling all types of pointer events. It doesn't introduce additional logic.

type modifier with the pointerclick value

Enables a polyfill that implements the pointerclick event.

pointerclick event

Generated for a left click or a touch on the device screen. Using pointerclick eliminates the delay of the click event on touch devices.

type modifier with the pointernative value

Enables a polyfill that implements the basic functionality of the W3C Pointer Events model.

The following set of events is available with the modifier:

pointerover event

Generated:

• When the pointer is over an element.
• Before a pointerdown event for devices that don't support hover.

pointerenter event

Generated:

• When the pointer enters the element's active area. When the pointer is over the element or one of its descendants.
• On a pointerdown event for devices that don't support hover.

This event is the same as pointerover, but it doesn't bubble.

pointerdown event

Generated when the input device is in the active buttons state.

• For a mouse, this is when at least one button is pressed.
• For pen and touch devices, this is when physical contact is made with the device screen.

pointermove event

Generated when the pointer's coordinates change.

pointerup event

Generated when exiting the active button state:

• For a mouse, this is the transition from having one or more buttons pressed to the state of no buttons pressed.
• For pen and touch devices, this is when physical contact is removed from the device screen.

pointerout event

Generated when the pointer leaves the element's active area:

• When the pointer leaves the area over the element or one of its descendants.
• After pointerup and pointercancel events for devices that don't support hover. For example, when the stylus or finger leaves the device's working area.

pointerleave event

Generated when the pointer leaves the element's active area:

• When the pointer leaves the area over the element or one of its descendants.
• After pointerup and pointercancel events for devices that don't support hover.

This event is the same as pointerout, but it doesn't bubble.

pointercancel event

Generated when:

• Further pointer events are not expected to occur (for example, after changing hardware settings).
• The pointerdown event has been generated, if the pointer was used for zooming the page.

For example, this event is generated when changing the device orientation while it is in the active buttons state. Or after reaching the maximum number of simultaneous clicks on the device.

After generating the pointercancel event, the pointerout and pointerleave events are generated in succession.

type modifier with the pointerpressrelease value

Enables a polyfill that implements the pointerpress and pointerrelease events. The polyfill uses Pointer Events.

pointerpress event

Generated on the pointerdown event.

pointerrelease event

Generated on the pointerup and pointercancel events.