Implement a better "view source" button

[belen-albeza]

It should link to local content, and not somewhere on github

[sole]

I mentioned this to Belen on IRC, but a "hacky" way could be to locate the <script> element and display its innerHTML. For extra points we could maybe hook it to something like prism.js so it highlights the code.

[samuknet]

Alternately, to get the source code of the whole demo page we may be able to use "document.documentElement.outerHTML". Then we could wrap this in a <code> or something prism.js likes.

To get this working with the IFrame setup, there could be a viewsource.js script which each demo page includes. Then, we call some toggleViewSource function on the IFrame (which hopefully is possible since the IFrame is ours) from the main index.html when the button is clicked.

[belen-albeza]

I would like to include the whole thing, not just the JavaScript, so accessing the contents of the iframe can be done as @samuknet suggested, with:

frames['viewer'].document.documentElement.outerHTML

I don't think we need to include a script in the demo itself, since we won't have cross-domain issues, we can access the iframe from the outside and communicate with it (listening for onload, etc.).

[samuknet]

@belen-albeza okay sounds good, so with the outerHTML would we just manipulate the contents of the page within the IFrame to display the code? And then revert when the button is clicked again.

Another option would be to 'replace' the IFrame with a separate IFrame (or div, probably), which displays the code only (as opposed to changing the ndocument within existing the IFrame). This way might make reverting back to the demo easier. What do you reckon?