Skip to content

Commit

Permalink
added optional specification of recipient(s) and a nice demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@rodneyrehm
rodneyrehm committed Oct 14, 2010
1 parent e55b80d commit ee04b64
Show file tree
Hide file tree
Showing 3 changed files with 203 additions and 63 deletions.
131 changes: 78 additions & 53 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,70 +14,95 @@
<script type="text/javascript" src="jquery.store.js"></script>
<script type="text/javascript" src="jquery.browserEvent.js"></script>
<script type="text/javascript">

function log( m, className )
{
var t = $( '<p>'+ m +'</p>' ).insertAfter( $(document.body).children().first() );
if( className )
t.addClass( className );
}

var ident = null;

$.storage = new $.store();
$.storageWindow = new $.store( 'windowName' );
(function($,undefined){

function initialize()
{
$.browserEvent.ready = function()
{
ident = this.ident();
log( 'Initialized $.browserEvent with ident ' + ident, 'info' );
};
// initialize storage
$.storage = new $.store();
$.storageWindow = new $.store( 'windowName' );

$.browserEvent.bind( 'interWindowMessage', function( e, data )
{
log( 'interWindowMessage-event received: ' + data, 'event' );
window.focus();
}).bind( 'browserWindows', function( e, data )
{
var windows = [];
$.each( data, function( win, time ){ windows.push( win ); } );
log( 'Registered Windows Changed: ' + windows.join( ', ' ), 'event' );
});

$.browserEvent.init( $.storage, $.storageWindow );
var $windows = null,
$windowList = null,
$messages = null,
$messageList = null,
shorten = function( win ){ return 'win' + win.substr( 13 ) };

var handle = {
windowUpdate: function( e, data, ident )
{
$windowList.empty();
$.each( data, function( win, time )
{
var $t = $( '<li></li>' )
.text( shorten(win) )
.appendTo( $windowList )
.data( 'be', win )
.bind( 'click', handle.sendMessage );

if( win === ident )
$t.addClass( 'self' );
});

$( '<li class="info">broadcast</li>' ).appendTo( $windowList ).bind( 'click', handle.sendMessage );
},
message: function( e, data, origin )
{
var $t = $( '<li></li>' ).prependTo( $messageList );
$( '<span class="ident"></span>' ).text( origin === "self" ? 'I sent' : shorten(origin) ).appendTo( $t );
$( '<span class="message"></span>' ).text( data ).appendTo( $t );

if( origin == 'self' )
$t.addClass( 'self' );

$( '<div class="clear"></div>' ).appendTo( $t );
},
ready: function()
{
$( '<li class="info">ready for business…</li>' ).prependTo( $messageList );
},

sendMessage: function()
{
var ident = $(this).data( 'be' );
$.browserEvent.trigger( 'message', 'Hello, how are you?', ident );
}
};

$.browserEvent.bind( 'someLaterEvent', function( e, data )
$(function()
{
log( 'foobar' );
$windows = $( '#windows' );
$windowList = $( '#windows > ul' );

$messages = $( '#messages' );
$messageList = $( '#messages > ul' );
$.browserEvent.ready = handle.ready;
$.browserEvent
.bind( 'browserWindows', handle.windowUpdate )
.bind( 'message', handle.message )
.init( $.storage, $.storageWindow );

});
}

})(jQuery);

function send()
{
$.browserEvent.trigger( 'interWindowMessage', 'Hello, I am '+ ident +', how are you?' );
}
</script>
</head>
<body>
<div>
<button onclick="initialize(); return false;" type="button">init</button>
<button onclick="send(); return false;" type="button">send</button>
</div>
<script type="text/javascript">
document.write( '<p>Initialized <code>$.storage</code> with driver <code>' + $.storage.driver.ident + '</code></p>' );
</script>


<h1>how to test:</h1>
<h1>$.browserEvent() Demo</h1>
<div id="wrapper">
<div id="windows">
<h2>Registered Windows</h2>
<ul>
<li>Initializing…</li>
</ul>
</div>

<p class="info">
Open this page in two browser windows. Align the windows so you can see them simultaneously.
click [init] in both pages. now click [send] in one window and watch what happens in the other.
</p>
<p class="info">Tested with Firefox, Safari, Chrome, IE8 and yes, even IE7</p>
<p class="info">There's a separate test-page for <a href="store.html">$.store</a></p>
<div id="messages">
<h2>Messages</h2>
<ul>
<li class="info">Initializing…</li>
</ul>
</div>
</div>
</body>
</html>
43 changes: 35 additions & 8 deletions jquery.browserEvent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,8 @@ var _store = null,

// events to send to other windows
queue: [],
queues: {},
queued: false,
sending: true, // wait for ready

// race-condition hack to inexstent locking problem
Expand All @@ -59,9 +61,31 @@ var _store = null,
$( window ).unbind( event );
},

trigger: function( event, data )
trigger: function( event, data, windows )
{
this.queue.push( { event:event, data:data } );
this.queued = true;
var t = { event:event, data:data, origin:this.ident };

if( !windows || !windows.length )
{
this.queue.push( t );
}
else
{
var that = this;
if( typeof windows === 'string' )
windows = [ windows ];

$.each( windows, function( i, win )
{
if( !that.queues[ win ] )
that.queues[ win ] = [];

that.queues[ win ].push( t );
});
}

$( window ).trigger( event, [ data, 'self', windows ] );
},


Expand Down Expand Up @@ -131,21 +155,24 @@ var _store = null,
{
// send queue
var that = this;
if( this.registry && this.queue.length )
if( this.registry && this.queued)
{
$.each( this.registry, function( win, time )
{
// don't send to self
if( win == that.ident )
return true; // continue;

var queue = _store.get( win ) || [];
queue = queue.concat( that.queue );
queue = queue.concat( that.queue, that.queues[ win ] || [] );
_store.set( win, queue );
});
}

// clean queue
this.queue = [];
this.queues = {};
this.queued = false;
this.sending = false;
},

Expand All @@ -166,7 +193,7 @@ var _store = null,
_store.set( this.ident, [] );
$.each( events, function()
{
$( window ).trigger( this.event, [this.data] );
$( window ).trigger( this.event, [ this.data, this.origin ] );
});
}
},
Expand Down Expand Up @@ -210,7 +237,7 @@ var _store = null,
{
this.registry = registry;
this.registryHash = registryHash;
$( window ).trigger( 'browserWindows', [this.registry] );
$( window ).trigger( 'browserWindows', [ this.registry, this.ident ] );
}
},

Expand Down Expand Up @@ -287,9 +314,9 @@ $.extend( $.browserEvent, {
browserEvent.unbind( event );
return $.browserEvent;
},
trigger: function( event, data )
trigger: function( event, data, windows )
{
browserEvent.trigger( event, data );
browserEvent.trigger( event, data, windows );
return $.browserEvent;
},
ident: function()
Expand Down
92 changes: 90 additions & 2 deletions screen.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,91 @@
p { color: red; }
p.info { color: #555555; }
body {
background-color: #CCCCCC;
font-family: Verdana;
font-size: 12px;
}
h1 { font-size: 16px; margin:0 0 5px 3px; padding:0; }
h2 { font-size: 14px; margin:0 0 5px 3px; padding:0; }

#wrapper {
width: 850px;
}

/**********************************************************************
* Window Listing
**********************************************************************/

#windows {
/*
position:absolute;
top: 10px;
right: 10px;
*/
max-width:250px;
float:right;
font-size: 12px;
color: #666666;
}

#windows > ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#windows > ul > li {
margin: 2px;
padding: 4px;
border: 1px solid #999999;
background-color: #DFDFDF;
list-style-type: none;
cursor:pointer;
}

/**********************************************************************
* Window Listing
**********************************************************************/

#messages {
max-width:620px;
max-height:400px;
overflow:auto;
font-family: Verdana;
font-size: 12px;
color: #666666;
}

#messages > ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#messages > ul > li {
margin: 2px;
padding: 4px;
border: 1px solid #999999;
background-color: #FFFFFF;
list-style-type: none;
}

.ident {
width: 180px;
display: inline-block;
font-style:italic;
}
.message {

}

.self {
color: #333399;
background-color: #CCCCFF;
}

.info {
font-style: italic;
}

.clear {
clear:both;
}

0 comments on commit ee04b64

Please sign in to comment.