Crosswords

![screen shot 2014-10-19 at 17 41 26](https://cloud.githubusercontent.com/assets/1001642/4693924/166fd892-57b3-11e4-8bdb-affa745f94e4.png)

I think it's about time others cast their eyes over this.

## The floating input

I originally used a `table` with separate `input` elements in each editable cell. On mobile browsers, however, you can only focus an `input` in JavaScript from a touch event, to prevent you from annoying the user by popping up the keyboard randomly. Thus, just typing into a cell can't possibly focus an `input` in another cell. I changed it to use a single floating `input` that JavaScript positions to be over the cell you're currently editing. Hacky but it works!

## What's next?

### Support Azed crosswords (currently R1 only)

Azeds look like this:

![azed20701](https://cloud.githubusercontent.com/assets/1001642/4693931/b2ea87ee-57b3-11e4-8fbb-a79eff64cd3a.png)

Part of the information supplied to the JavaScript is the crossword type. If it's an `azed` we can tweak the rendering layer appropriately.

I don't think Azeds currently come through the Content API for some reason, so we'll need to sort that out, too.

### Support Genius crosswords (currently R1 only)

We need to add the capacity to submit Genius crosswords. Currently this is only available in the Java applet on R1.

### Add a service for accurate crossword thumbnails

e.g. https://github.com/guardian/crossword-thumbnail-generator. Although we can probably use SVGs, right? Anyway, this would make the cards look great on fronts.

## Browser support

I've tested it and it works fine on

* Chrome 36
* Firefox 26
* Internet Explorer 10
* Android Chrome 38
* Safari 7.0.3

I tested it on Internet Explorer 9 as well and when I first used it it seemed a little buggy (not being able to enter certain cells), but now, maddeningly, I can't reproduce that behaviour. If we want to support 9 somebody should give it a proper look over.

I don't have an iPhone or iPad or anything so haven't checked on those, will have to have a look in the office.

## Helping out

If you want to help with this you'll need to add credentials for the Crosswords API to your `frontend.properties` file. Come chat with me & I'll help with that.

To run it after that you need to run the `applications` server and navigate to the full ID of the crossword (e.g., http://localhost:9000/crosswords/quick/13850)
(You can, however, use React in Node JS, so if we were using that on the server you'd be able to use the same stuff to render the SVG server side! Cool, but not useful for us. ;-))