jsfiddle / togetherjs Goto Github PK

View Code? Open in Web Editor NEW

7.0K 353.0 846.0 31.34 MB

A service for your website that makes it surprisingly easy to collaborate in real-time.

Home Page: https://togetherjs.com

License: Mozilla Public License 2.0

JavaScript 75.75% HTML 10.14% CSS 13.86% Shell 0.09% Python 0.15%

togetherjs's Introduction

TogetherJS - Surprisingly easy collaboration

What is TogetherJS?

TogetherJS is a service for your website that makes it surprisingly easy to collaborate in real-time.

Using TogetherJS two people can interact on the same page, seeing each other's cursors, edits, and browsing a site together. The TogetherJS service is included by the web site owner, and a web site can customize and configure aspects of TogetherJS's behavior on the site.

For more information and to see TogetherJS in action, visit togetherjs.com

If you want to integrate TogetherJS onto your site see the wiki and specifically Getting Started.

Contributing

The remainder of this document is about contributing to TogetherJS - but reports, fixes, features, etc. Look back at those other links if you are looking for something else.

Bug Reports

Please submit bug reports as github issues. Don't worry about labels or milestones. If you use the in-app feedback to give us a bug report that's fine too.

Roadmap & Plans

To see what we're planning or at least considering to do with TogetherJS, look at see our bug tracker.

Setting up a development environment

TogetherJS has two main pieces:

The server, which echos messages back and forth between users. The server doesn't do much, you may gaze upon its incredibly boring history.
The client in togetherjs/ which does all the real work.

There is a TogetherJS hub server deployed at https://hub.togetherjs.com - and there's little need for other server deployments. If you want to try TogetherJS out we recommend you use our hub server. Note if you include TogetherJS on an https site, you must use an https hub server.

The files need to be lightly "built": we use LESS for styles, and a couple files are generated. To develop you need to build the library using Grunt.

To build a copy of the library, check out TogetherJS:

$ git clone git://github.com/mozilla/togetherjs.git
$ cd togetherjs

Then install npm and run:

$ npm install
$ npm install -g grunt-cli

This will install a bunch of stuff, most of which is only used for development. The only "server" dependency is WebSocket-Node (and if you use our hub then you don't need to worry about the server). By default everything is installed locally, i.e., in node_modules/. This works just fine, but it is useful to install the grunt command-line program globally, which npm install -g grunt-cli does.

Now you can build TogetherJS, like:

$ grunt build buildsite --no-hardlink

This will create a copy of the entire togetherjs.com site in build/. You'll need to setup a local web server of your own pointed to the build/ directory. To start a server on port 8080, run:

$ node devserver.js

If you want to develop with TogetherJS you probably want the files built continually. To do this use:

$ grunt devwatch

This will rebuild when changes are detected. Note that Grunt is configured to create hard links instead of copying so that most changes you make to files in togetherjs/ don't need to be rebuilt to show up in build/togetherjs/. --no-hardlink turns this behavior off.

You may wish to create a static copy of the TogetherJS client to distribute and use on your website. To do this run:

$ grunt build --base-url https://myapp.com --no-hardlink --dest static-myapp

Then static-myapp/togetherjs.js and static-myapp/togetherjs-min.js will be in place, and the rest of the code will be under static-myapp/togetherjs/. You would deploy these on your server.

Running a local server

You shouldn't need to run your own version of the hub server. But if you happen to make changes to the server, you can change the default hub URL by setting the HUB_URL environment variable when building. For example:

$ HUB_URL=http://localhost:8080 grunt devwatch

Testing

Tests are in togetherjs/tests/ -- these are doctest.js tests. To actually run the tests build togetherjs, serve it up, and go to http://localhost:PORT/togetherjs/tests/ -- from there the tests are linked to from the top of the page. The actual tests are *.js files in togetherjs/tests/, generally test_*.js for unit-style tests, and func_*.js for functional tests.

The "Manual testing" link is something that lets you simulate different conditions in TogetherJS without setting up a second browser/client.

There is unfortunately no automated runner for these tests. It might be nice if Karma could be setup with doctest.js in general, but so far that isn't done.

License

This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/.

togetherjs's People

Contributors

Stargazers

Watchers

Forkers

wking secretrobotron gregglind alukaszewski olivalcf exodia lymanlai x-strong adelq diyjack robing wiplug l371559739 gunshor nvdnkpr dearjohn rayleyva creativelyme jintao iwatchallit gigo101 kissdestiny13142 lanthaler mwzkqmuuzkflbxm cyrke git-young bradhuffman tsvetilian kozyty dhanjugopi tradisj ckegelman klughammer petabyte vitalyp datlb dinamic nestorrojas automata ezequielsp tomer aryaky zhefeng birdflysky randylien kirtaniaj codytaylor ashishnamdev hitautodestruct rnwolf rpl qdqmedia rundomif cscott muteokie rahulravindren jimt aguil cmabastar gricks cdoru szelok muffomat r0mk1n yaroslavb midrissi achun2080 premrajah csbarker joe8bit openipd edgar-obr logicstudio mrsmartpants stephenplusplus nogginfuel arunmanoj dk-dev googlearchive rememberlenny hijonathan v1ka5 ziir ibalintha exexzian ejjy momoohidayat hoodwolf okremer84 voznesenskym tanghan chenzihui trfiladelfo eeertekin tabblack taters343 whoyouknow montazze hnq90 ishanray

togetherjs's Issues

add functionality to pop window out of browser chrome

This button pops the window out of the browser window, into a new window. http://cl.ly/image/181j2F3Q1y34

TowTruck should start up with info/share link screen

When you first start TowTruck (not from a reload) it should show the info screen instead of the chat screen.

Dragging window doesn't feel right

When dragging the window it often feels like it is hard to grab onto, and the dragging stops unexpectedly. (Do we want the chat window to be forced on the screen, or keep the ability to drag it off screen?)

Use some automatic avatar by default

Everyone should have an avatar, the default avatar isn't useful at all. Maybe we can use some kind of monster face generator.

An example: http://timpietrusky.github.com/alien-avatar-generator/

Animate 'typing' ellipses next to cursor

let's animate this, and make it look better

resizable window

the window should be resizable, if the cursor goes to the lower right corner of the window

Create script to bundle up client code as static files

The client code is largely static, and could be hosted on gh-pages or elsewhere (using a hub in another location). We should have a build script that creates those static pages.

As input the build script should take the address where the files will be uploaded (baseUrl), and a location for the hub server. It would do the necessary substitutions of code in app/http/views/towtruck/, compile towtruck.less, and copy other files.

A shell script might be good enough.

Make chat scrollable

I think when the video placeholder was added, chat scolling regressed – you can no longer scroll to previous places

avatar rollover should allow user to change pic

when user rolls over avatar in Profile window, there should be text that says "Change picture" and if the user clicks that, they can change their profile picture

Create site config system

TowTruck should be somewhat configurable by sites. No configuration should be necessary, but it should be possible to override hubUrl, maybe indicate other hooks, etc.

I imagine something like require.js (after #10 is implemented), where you could either do:

TowTruck.config({
  hubUrl: "something else"
});
// or like require.js, if TowTruck hasn't been loaded:
TwoTruck = {
  hubUrl: "something else"
});

creating new lines at bottom of window

when user moves the window in Chrome, it creates a bunch of extra lines

Make chat minimizable

The chat box should be able to minimize. It would become a small box. It should show the chat icon, and with #16 it should show an indicator if any new chat messages come in.

Track online status of other participants

There isn't a lot of information right now when someone leaves or returns to the session. We should track that.

I imagine avatar images being dimmed when the person is gone, and maybe a message (that is removed on return).

We'd probably rely on both a "bye" message (as is already being sent) and a ping. An online-but-not-looking state would also be useful, using the visibility API

active window links in left navbar

the active states for the "i" and camera/video icon are not working. when the user is in that window, the color should signify active

User can highlight an area on the page

A user can select the highlighter tool and draw a rectangle with it. When in highlight mode, all click events should be swallowed .

Here's a good example of the drawing mode:

https://vimeo.com/7064475#t=0m37s

All users should be able to see the same result. A click on the highlight should see it animate away. (A faster version of this) http://docs.jquery.com/UI/Effects/Puff

Notify hub server of version

The client should notify the hub server of its version – where the code is located, and maybe a checkout or tag or something (that would be embedded in towtruck.js)

Create a public namespace

Probably TowTruck – would replace startTowTruck, and some public interfaces would live under it. For #9 we'd probably use TowTruck.require() and TowTruck.define()

Make the mouse image smaller

fix the mouse image, so it's smaller and looks better

Improve UI on Participants screen

this screen is messed up currently

Allow avatar to be set

microphone icon animates when user is talking

when a user is talking, the microphone will animate

Use $.Deferred()

There's lots of places where promises would be useful in the codebase, we should switch to using jQuery's Deferred for these. The "ui-ready" event is a specific example.

Animate the arrow pointing down, when a user is down the page

Can we animate the arrow, to pulse down when the user's arrow is down the page?

Make cursor disappear at appropriate times

When the cursor is over the chat box, or there is an indication that the cursor is off screen, it should disappear. Also when the tab is not visible or the cursor has not been moved for a while, it should be hidden.

Hub should be able to send service messages to clients

The hub should be able to react to a bad client version with a service message, or notify of other issues (e.g., a hub that is going away soon). This message would trigger a popup on the client.

UI for when a user's cursor is off the window

UI for when cursor is:

off the window
scrolled down the page
over the towtruck window