Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including kefir-jquery with all npm packages installed. Try it out:

require("jquery/package.json"); // jquery is a peer dependency. require("kefir/package.json"); // kefir is a peer dependency. var kefirJquery = require("kefir-jquery")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

kefir-jquery v1.0.0

jQuery bindings for Kefir.js

kefir-jquery Build Status

jQuery bindings for Kefir.js

Installation

NPM

npm install kefir-jquery

Bower

bower install kefir-jquery

Without package management

<script src="...kefir.js"></script>
<script src="...jquery.js"></script>

<!-- You can take this file from this repo -->
<script src="...kefir-jquery.js"></script>

Initialisation

Before you'll be able to use this plugin, you must call kefirJQuery.init method, which will add methods to your jQuery.fn object.

// with browserify, webpack, etc.

var Kefir = require('kefir');
var jQuery = require('jquery');
var kefirJQuery = require('kefir-jquery');

kefirJQuery.init(Kefir, jQuery);
// with globals

window.kefirJQuery.init(window.Kefir, window.jQuery);

API

asKefirStream

$(...).asKefirStream(eventName, [selector], [eventTransformer])

Creates a stream from events on a jQuery object. This methods mimics jQuery .on method with two exceptions: it not accepts data argument, and instead of handler function it accepts optional eventTransformer function, which, if provided, will be called on each event with same arguments and context as jQuery handler callback, and value returned by eventTransformer will be emitted to Kefir stream. If no eventTransformer provided, jQuery event object will be emited in stream.

Example:

var clicks = $('body').asKefirStream('click');
clicks.log();

// Will print:
//    > [asKefirStream] <value> jQuery.Event {originalEvent: MouseEvent...}
//    > [asKefirStream] <value> jQuery.Event {originalEvent: MouseEvent...}
//    > [asKefirStream] <value> jQuery.Event {originalEvent: MouseEvent...}
//
// Events in time:
//    clicks: ----•---------•-------------•---
//       jQuery.Event   jQuery.Event   jQuery.Event

Example with optional arguments:

var clicksOnContainer = $('body').asKefirStream('click', '.container');
clicksOnContainer.log('[clicks on .container]');

var clicksPageX = $('body').asKefirStream('click', function(e) {return e.pageX});
clicksPageX.log('[e.pageX]');

// Will print:
//    > [clicks on .container] <value> jQuery.Event {originalEvent: MouseEvent...}
//    > [e.pageX] <value> 643
//    > [e.pageX] <value> 15
//    > [clicks on .container] <value> jQuery.Event {originalEvent: MouseEvent...}
//    > [e.pageX] <value> 721
//
// Events in time:
//    clicksOnContainer: ----•-------•---
//                  jQuery.Event   jQuery.Event
//    clicksPageX:       ----•---•---•---
//                         643  15   721

asKefirProperty

$(...).asKefirProperty(eventName, [selector], getter)

This method is a shorthand for:
$(...).asKefirStream(eventName, [selector], getter).toProperty(getter())

Like asKefirStream, but instead of optional eventTransformer accepts required getter function, which is called like eventTransformer for each new event, but also called once without any argument at moment when property is created. Also unlike asKefirStream returns a property.

Example:

var cursorPosition = $('body').asKefirProperty('mousemove', function(event) {
  if (!event) { // if no event passed then it's an "on creation" call
    return [0, 0];
  } else {
    return [event.pageX, event.pageY];
  }
});
cursorPosition.log();

// Will print:
//    > [asKefirProperty] <value:current> [0, 0]
//    > [asKefirProperty] <value> [551, 1168]
//    > [asKefirProperty] <value> [551, 1168]
//    > [asKefirProperty] <value> [556, 1161]
//    > ...
//
// Events in time:
//    cursorPosition: •-----------•-----------•-----------•---
//                 [0,0]  [551,1168]  [551,1168]  [556,1161]
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free