From 702cd2e820b680f88a0f299e33085c196806fc52 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Sun, 9 Feb 2014 17:43:00 +0200 Subject: [PATCH] Tweak demo files. --- demo/demo.css | 23 +++++------ demo/demo.js | 29 ++++++++------ demo/index.xhtml | 100 +++++++++++++++++++++++------------------------ 3 files changed, 75 insertions(+), 77 deletions(-) diff --git a/demo/demo.css b/demo/demo.css index fe03ca5..de4a78d 100644 --- a/demo/demo.css +++ b/demo/demo.css @@ -2,10 +2,14 @@ html { background-color: #DDD; } body { + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; width: 900px; margin: 0 auto; font-family: Verdana, Helvetica, Arial, sans-serif; - box-shadow: 0 0 5px #000; + -webkit-box-shadow: 0 0 10px 2px rgba(0, 0, 0, .5); + -moz-box-shadow: 0 0 10px 2px rgba(0, 0, 0, .5); box-shadow: 0 0 10px 2px rgba(0, 0, 0, .5); padding: 7px 25px 70px; background-color: #FFF; @@ -28,28 +32,19 @@ form { section { margin-top: 40px; } -dt { - font-weight: bold; - font-size: larger; -} #canvas { cursor: crosshair; } #canvas, #html { - border: 1px solid black; + border: 1px solid #000; } .filename { text-align: right; } #html { - box-sizing: border-box; - ms-box-sizing: border-box; - webkit-box-sizing: border-box; - moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; overflow: auto; padding: 1em; } -dt:target { - background-color: Highlight; - color: HighlightText; -} diff --git a/demo/demo.js b/demo/demo.js index e08497b..009ab93 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -1,13 +1,16 @@ -/* FileSaver.js demo script - * 2012-01-23 - * - * By Eli Grey, http://eligrey.com - * License: X11/MIT - * See LICENSE.md +/*! FileSaver.js demo script + * 2012-01-23 + * + * By Eli Grey, http://eligrey.com + * License: X11/MIT + * See LICENSE.md */ /*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/demo/demo.js */ +/*jshint laxbreak: true, laxcomma: true, smarttabs: true*/ +/*global saveAs, self*/ + (function(view) { "use strict"; // The canvas drawing portion of the demo is based off the demo at @@ -27,15 +30,15 @@ var , canvas_options_form = $("canvas-options") , canvas_filename = $("canvas-filename") , canvas_clear_button = $("canvas-clear") - + , text = $("text") , text_options_form = $("text-options") , text_filename = $("text-filename") - + , html = $("html") , html_options_form = $("html-options") , html_filename = $("html-filename") - + , ctx = canvas.getContext("2d") , drawing = false , x_points = session.x_points || [] @@ -70,7 +73,7 @@ var , stop_drawing = function() { drawing = false; } - + // Title guesser and document creator available at https://gist.github.com/1059648 , guess_title = function(doc) { var @@ -186,7 +189,7 @@ html_options_form.addEventListener("submit", function(event) { event.preventDefault(); var BB = get_blob() - , xml_serializer = new XMLSerializer + , xml_serializer = new XMLSerializer() , doc = create_html_doc(html) ; saveAs( @@ -203,10 +206,10 @@ view.addEventListener("unload", function() { session.y_points = JSON.stringify(y_points); session.drag_points = JSON.stringify(drag_points); session.canvas_filename = canvas_filename.value; - + session.text = text.value; session.text_filename = text_filename.value; - + session.html = html.innerHTML; session.html_filename = html_filename.value; }, false); diff --git a/demo/index.xhtml b/demo/index.xhtml index abc8813..d6d8d0e 100644 --- a/demo/index.xhtml +++ b/demo/index.xhtml @@ -1,57 +1,57 @@  - -FileSaver.js demo - + + FileSaver.js demo + -

FileSaver.js demo

-

-The following examples demonstrate how it is possible to generate and save any type of data right in the browser using the W3C saveAs() FileSaver interface, without contacting any servers. -

-
-

Saving an image

- -
- - - -
-
-
-

Saving text

- +
+ + +
+
+
+

Saving rich text

+
+

Some example rich text

+
    +
  • Plain Boring text.
    • +
  • Emphasized text!
    • +
  • Strong text!
    • +
  • + + + image + +
    • +
  • A link.
    • +
+
+
+ + +
+
+ + + +