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)
35kb. It's only loaded on crossword pages, though, and I think is worth it given how concise the resultant code is, and the benefits you get in rendering performance from the DOM diffing React does. CC @phamann