Code Monkey home page Code Monkey logo

crosstab's Introduction

Crosstab

Javascript library for ensuring that important things happen in just one tab.

Some apps need things to happen in exactly one tab. Or, at the very least, it would be a nice thing to have.

Use it when your app...

  • Plays music and shouldn't play a bunch of things at once! (like Soundcloud)
  • Writes to local files (lock contention, etc).
  • Is a multiplayer game and should only have one person per computer
  • Fights with itself and needs to be kept in line.

Demo

The contents of this repo are more or less hosted on my own site here. Try it out by opening it in a few tabs and pressing the "on" and "off" buttons. Alternately, pull the repo and host it somewhere.

For some reason, localStorage events don't trigger properly on file:// urls, so it does need to be hosted (or, at least this is what I've noticed in Chrome).

Installation

Source it in your html:

<script type="text/javascript" src="path/to/tab.js"></script>

And that's it.

Oh, and there are no dependencies aside from localStorage support. So that's kinda cool, I guess.

Usage, in short

Initialize a tab object in any page you want to track.

var tab = new Tab({
  on: function()  { alert("on!");  },
  off: function() { alert("off!"); }
});

By default, on and off are empty functions. You could initialize a bunch of tabs and have them do nothing. But that's silly.

Turning a tab on turns all other tabs off, and can be done as such:

tab.on();

Manually turning a tab off is similar:

tab.off();

Usage, in long

The Tab() object takes in an object that specifies the functions to call when on and off events are triggered, and supports a number of options. Here are their defaults:

var tab = new Tab({

	/* Code you only want to happen in one tab */
	on: function() {},
	
	/* Code to do when a tab is done being on */
	off: function() {},

	/* Trigger on without waiting for other tabs to turn off */
	force: false

});

An instance of the Tab() object supports a number of methods:

/* Turn a tab on. Pass in args to your supplied method, although this doesn't
 * do anything for now. Force is a string and can either be "off" or "on". 
 */
tab.on([args, force]); 

/* Turns a tab off. Again, pass it arguments if you'd like. Nothing to force
 * here, though. 
 */ 
tab.off([args]);

/* Get the current status of a tab. Returns true if on, false otherwise. 
 */ 
tab.status();

/* Show the tab's id. */
tab.id;

Still to do

  • Implement tab identifiers so multiple tab groups can exist across browsers. Something like group : [group_name].
  • Pass arguments to on and off.
  • Bug fixing (for some reason, on() needs to be called twice. Not ok).

crosstab's People

Contributors

salemhilal avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.