crisp-event

Crisp.EventJS

Object event with repeater, picker and optional asynchronous.

var myObject = Crisp.utilCreate({ ns: 'util.event' }).objIni();
 
myObject.eventListener({
  listen: function( e ) {
    console.log('Listen');
  }
});
console.log('Wait');
 
myObject.eventTrigger();
 
// logs:
// Wait
// Listen

Index Table

• Getting Started
  • Server-Nodes
  • Web-Clients
  • Development
• Usage
  • Crisp.defineEvent()
  • Crisp.utilCreate()
• EventJS function
  • .eventListener()
  • .eventTrigger()
  • .eventPicker()
  • .eventRemove()
• Links

Getting Started

Server-Nodes

Use Node Package Manager (npm) to install crisp-event for Node.js and io.js

$ npm install crisp-event

// use package
require("crisp-event");

or use the OpenCrisp UtilJS wraper

$ npm install crisp-util

// use package
require("crisp-util");

Web-Clients

Use Bower to install crisp-event for Browsers APP's and other front-end workflows.

$ bower install crisp-event

<!-- use package -->
<script type="text/javascript" src="dist/crisp-event.min.js"></script>

or use the OpenCrisp UtilJS wraper

$ bower install crisp-util

<!-- use package -->
<script type="text/javascript" src="dist/crisp-util.min.js"></script>

Development

Use Git to clone Crisp.EventJS from GitHub to develop the repository with Grunt

# Clone:
$ git clone https://github.com/OpenCrisp/Crisp.EventJS.git

# Build: test, concat, test, minify, test
$ grunt

# Test: original sourcecode for developer (included in build)
$ grunt t

# Run all test-scripts on Unix
$ sh grunt-tests.sh

Usage

How to use Crisp.EventJS with JavaScript.

Crisp.defineEvent()

How to use Crisp.defineEvent( object [, option ]) module.

var myObject = {};
 
// initialice event property functions on myObject
Crisp.defineEvent( myObject );
 
// or with manual property name of event and parent 
Crisp.defineEvent( myObject, {
    // default: __event__
    event: '__myevent__',       // manual set the name of event cach
    // default: __parent__
    parent: '__myparent__'      // manual set the name of parent reference
});

Crisp.utilCreate()

How to use Crisp.utilCreate( option ) with util.event namespace.

var myObject = Crisp.utilCreate({
    ns: 'util.event'
}).objIni();

EventJS function

.eventListener()

How to use .eventListener( option ) on myObject

// listen for all triggert events
myObject.eventListener({
  listen: function( e ) {}
});

• option
  • listen - callback function
  • self - alternate for apply thisArg
  • async - acitvate asynchronous callback
  • action - namespace OR RegExp filter
  • path - like OR RegExp filter
  • noteList - like filter for eventPicker notes
  • noteAction - namespace OR RegExp filter for eventPicker notes
  • notePath - like OR RegExp filter for eventPicker notes

option.self (eventListener)

works with .eventTrigger() and .eventPicker()

// set self as alternate for apply thisArg
var thisArg = {};
myObject.eventListener({
  self: thsiArg,
  listen: function( e ) {
    this === thisArg;  // true
  }
});

option.async (eventListener)

works with .eventTrigger() and .eventPicker()

// set asynchronous callback for listen:function
myObject.eventListener({
  async: true,
  listen: function( e ) {}
});

option.action (eventListener)

works with .eventTrigger() and .eventPicker()

// set right namespase string filter
myObject.eventListener({
  action: 'insert',
  listen: function( e ) {}
});
 
// set an expandable RegExp filter like action:'insert'
myObject.eventListener({
  action: /(^|\s)insert($|\s|\.)/,
  listen: function( e ) {}
});
 
// set multi right namespase string filter with space seperator
myObject.eventListener({
  action: 'insert update',
  listen: function( e ) {}
});
 
// set an expandable RegExp filter like action:'insert update'
myObject.eventListener({
  action: /(^|\s)(insert|update)($|\s|\.)/,
  listen: function( e ) {}
});

option.path (eventListener)

works with .eventTrigger() and .eventPicker()

// set 
myObject.eventListener({
  action: /(^|\s)(insert|update)($|\s|\.)/,
  listen: function( e ) {}
});

option.noteList (eventListener)

works with .eventPicker()

// filter notes in specified list 
myObject.eventListener({
  noteList: 'merge',
  listen: function( e ) {}
});

option.noteAction (eventListener)

works with .eventPicker()

// set filter of note action
myObject.eventListener({
  noteAction: 'delete',           // or RegExp like option.action
  listen: function( e ) {}
});

option.notePath (eventListener)

works with .eventPicker()

// set filter of note path
myObject.eventListener({
  notePath: 'doc.b',
  listen: function( e ) {}
});

.eventTrigger()

How to use .eventTrigger( option ) on myObject

var myObject = Crisp.utilCreate({ ns: 'util.event' }).objIni();
 
myObject.eventListener({
  listen: function( e ) {
    console.log('Listen');
  }
});
console.log('Wait');
 
myObject.eventTrigger();
 
// logs:
// Wait
// Listen

• option
  • repeat - trigger parent object
  • exporter - stop recursive trigger loops
  • action - full name name of namespace
  • path - full name of object path
  • args - alternate arguments for eventListener callback

option.repeat (eventTrigger)

// set repeat for trigger parent objects
var myObject = Crisp.utilCreate({
    ns: 'util.event',
    options: {
        parent: { proWri: true }
    }
}).objIni();
 
var myChild = myObject.objClone().objIni({
    parent: myObject
});
 
myObject.a = myChild;
 
myChild.eventListener({
    listen: function( e ) {
        console.log('Listener: Child');
    }
});
 
myObject.eventListener({
    listen: function( e ) {
        console.log('Listener: Object');
    }
});
console.log('JSON', myObject.xTo() );
 
myChild.eventTrigger({
    repeat: true
});
 
// logs:
// JSON {"a":{"b":"B"}}
// Listener: Child
// Listener: Object
// End

option.exporter (eventTrigger)

var myObject = {};
Crisp.defineEvent( myObject );
 
myObject.eventListener({
    listen: function( e ) {
        console.log('Listener');
    }
});
console.log('Wait');
 
myObject.eventTrigger();
 
myObject.eventTrigger({
    exporter: myObject
});
console.log('End');
 
// logs:
// Wait
// Listener
// End

option.action (eventTrigger)

var myObject = {};
Crisp.defineEvent( myObject );
 
myObject.eventListener({
    action: 'change',
    listen: function( e ) {
        assert.strictEqual( 'change', e.action );
        assert.strictEqual( myObject, this );
        assert.strictEqual( myObject, e.self );
    }
});
 
myObject.eventTrigger({
    action: 'change'
});

option.path (eventTrigger)

var myObject = {};
Crisp.defineEvent( myObject );
 
myObject.eventListener({
    path: 'doc',
    listen: function( e ) {
        assert.strictEqual( 'doc', e.path );
        assert.strictEqual( myObject, this );
        assert.strictEqual( myObject, e.self );
    }
});
 
myObject.eventTrigger({
    path: 'doc'
});

option.args (eventTrigger)

var thisArg = {};
 
var myObject = Crisp.utilCreate({
    ns: 'util.event'
}).objIni();
 
myObject.eventListener({
    listen: function( e ) {
        assert.strictEqual( myObject, this );
        assert.strictEqual( thisArg, e );
    }
});
 
myObject.eventTrigger({
    args: thisArg
});

.eventPicker()

How to use .eventPicker( option ) on myObject

var myObject = Crisp.utilCreate({ ns: 'util.event' }).objIni();
 
myObject.eventListener({
  listen: function( e ) {
    console.log('Listen:', e.action, e.List().xTo() );
  }
});
 
var pickerCache = {};
var picker = myObject.eventPicker({
    cache: pickerCache
});
 
picker.Note({
    action: 'update'
});
console.log('Wait');
 
picker.Talk();
console.log('End')
 
// logs:
// Wait
// Listen: task [{"action":"update"}]
// End

• option
  • cache - event sub trigger picker cache
  • action - full name name of namespace
  • path - full name of object path
  • empty - allow trigger picker with empty notes

option.cache (eventPicker)

// Listener wait for the last Talk() on the same cache
var myObject = Crisp.utilCreate({ ns: 'util.event' }).objIni();
 
myObject.eventListener({
  listen: function( e ) {
    console.log('Listen:', e.action, e.List().xTo() );
  }
});
 
var pickerCache = {};
var picker = myObject.eventPicker({
    cache: pickerCache
});
 
{
    var sub_picker = myObject.eventPicker({
        cache: pickerCache
    });
 
    sub_picker.Note({
        action: 'insert'
    });
    console.log('Wait 0');
 
    sub_picker.Talk();
}
 
picker.Note({
    action: 'update'
});
console.log('Wait 1');
 
picker.Talk();
console.log('End')
 
// logs:
// Wait 0
// Wait 1
// Listen: task [{"action":"insert"},{"action":"update"}]
// End

option.action (eventPicker)

var myObject = {};
var pickerCache = {};
 
Crisp.defineEvent( myObject );
 
myObject.eventListener({
    action: 'changed',
    listen: function( e ) {
        assert.strictEqual( myObject, this );
        assert.strictEqual( myObject, e.self );
    }
});
 
var picker = myObject.eventPicker({
    action: 'changed',
    cache: pickerCache
});
 
picker.Note({
    action: 'update'
});
 
picker.Talk();

option.path (eventPicker)

var myObject = {};
var pickerCache = {};
 
Crisp.defineEvent( myObject );
 
myObject.eventListener({
    path: 'doc.a',
    listen: function( e ) {
        assert.strictEqual( myObject, this );
        assert.strictEqual( myObject, e.self );
    }
});
 
var picker = myObject.eventPicker({
    path: 'doc.a',
    cache: pickerCache
});
 
picker.Talk();

option.empty (eventPicker)

var myObject = {};
var pickerCache = {};
 
Crisp.defineEvent( myObject );
 
myObject.eventListener({
    listen: function( e ) {
        assert.strictEqual( '[]', e.List().xTo() );
        assert.strictEqual( myObject, this );
        assert.strictEqual( myObject, e.self );
    }
});
 
var picker = myObject.eventPicker({
    empty: true,
    cache: pickerCache
});
 
picker.Talk();

.eventRemove()

How to use .eventRemove( event ) on myObject

var myObject = Crisp.utilCreate({ ns: 'util.event' }).objIni();
 
var eventObject = myObject.eventListener({
  listen: function( e ) {
    console.log('Listen');
  }
});
console.log('Wait 0');
 
myObject.eventTrigger();
 
myObject.eventRemove( eventObject );
console.log('Wait 1');
 
myObject.eventTrigger();
 
console.log('End')
 
// logs:
// Wait 0
// Listen
// Wait 1
// End

Links

• Repository
• More examples
• Module documentation
• Node package manager
• Version monitoring
• Build history