Tweak demo files.
This commit is contained in:
XhmikosR
+9
-14
@@ -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;
|
||||
}
|
||||
|
||||
+16
-13
@@ -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);
|
||||
|
||||
+50
-50
@@ -1,57 +1,57 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US-x-Hixie">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>FileSaver.js demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="demo.css"/>
|
||||
<meta charset="utf-8"/>
|
||||
<title>FileSaver.js demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="demo.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<h1><a href="https://github.com/eligrey/FileSaver.js">FileSaver.js</a> demo</h1>
|
||||
<p>
|
||||
The following examples demonstrate how it is possible to generate and save any type of data right in the browser using the W3C <code>saveAs()</code> <a href="http://www.w3.org/TR/file-writer-api/#the-filesaver-interface">FileSaver</a> interface, without contacting any servers.
|
||||
</p>
|
||||
<section id="image-demo">
|
||||
<h2>Saving an image</h2>
|
||||
<canvas class="input" id="canvas" width="500" height="300"/>
|
||||
<form id="canvas-options">
|
||||
<label>Filename: <input type="text" class="filename" id="canvas-filename" placeholder="doodle"/>.png</label>
|
||||
<input type="submit" value="Save"/>
|
||||
<input type="button" id="canvas-clear" value="Clear"/>
|
||||
</form>
|
||||
</section>
|
||||
<section id="text-demo">
|
||||
<h2>Saving text</h2>
|
||||
<textarea class="input" id="text" placeholder="Once upon a time..."/>
|
||||
<form id="text-options">
|
||||
<label>Filename: <input type="text" class="filename" id="text-filename" placeholder="a plain document"/>.txt</label>
|
||||
<input type="submit" value="Save"/>
|
||||
</form>
|
||||
</section>
|
||||
<section id="html-demo">
|
||||
<h2>Saving rich text</h2>
|
||||
<div class="input" id="html" contenteditable="">
|
||||
<h3>Some example rich text</h3>
|
||||
<ul>
|
||||
<li><del>Plain</del> <ins>Boring</ins> text.</li>
|
||||
<li><em>Emphasized text!</em></li>
|
||||
<li><strong>Strong text!</strong></li>
|
||||
<li>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="70" height="70">
|
||||
<circle cx="35" cy="35" r="35" fill="red"/>
|
||||
<text x="10" y="40">image</text>
|
||||
</svg>
|
||||
</li>
|
||||
<li><a href="https://github.com/eligrey/FileSaver.js">A link.</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<form id="html-options">
|
||||
<label>Filename: <input type="text" class="filename" id="html-filename" placeholder="a rich document"/>.xhtml</label>
|
||||
<input type="submit" value="Save"/>
|
||||
</form>
|
||||
</section>
|
||||
<script type="application/ecmascript" async="" src="https://raw.github.com/eligrey/Blob.js/master/Blob.min.js"/>
|
||||
<script type="application/ecmascript" async="" src="https://raw.github.com/eligrey/canvas-toBlob.js/master/canvas-toBlob.js"/>
|
||||
<script type="application/ecmascript" async="" src="https://raw.github.com/eligrey/FileSaver.js/master/FileSaver.js"/>
|
||||
<script type="application/ecmascript" async="" src="https://raw.github.com/eligrey/FileSaver.js/master/demo/demo.js"/>
|
||||
<h1><a href="https://github.com/eligrey/FileSaver.js">FileSaver.js</a> demo</h1>
|
||||
<p>
|
||||
The following examples demonstrate how it is possible to generate and save any type of data right in the browser using the W3C <code>saveAs()</code> <a href="http://www.w3.org/TR/file-writer-api/#the-filesaver-interface">FileSaver</a> interface, without contacting any servers.
|
||||
</p>
|
||||
<section id="image-demo">
|
||||
<h2>Saving an image</h2>
|
||||
<canvas class="input" id="canvas" width="500" height="300"></canvas>
|
||||
<form id="canvas-options">
|
||||
<label>Filename: <input type="text" class="filename" id="canvas-filename" placeholder="doodle"/>.png</label>
|
||||
<input type="submit" value="Save"/>
|
||||
<input type="button" id="canvas-clear" value="Clear"/>
|
||||
</form>
|
||||
</section>
|
||||
<section id="text-demo">
|
||||
<h2>Saving text</h2>
|
||||
<textarea class="input" id="text" placeholder="Once upon a time..."></textarea>
|
||||
<form id="text-options">
|
||||
<label>Filename: <input type="text" class="filename" id="text-filename" placeholder="a plain document"/>.txt</label>
|
||||
<input type="submit" value="Save"/>
|
||||
</form>
|
||||
</section>
|
||||
<section id="html-demo">
|
||||
<h2>Saving rich text</h2>
|
||||
<div class="input" id="html" contenteditable="">
|
||||
<h3>Some example rich text</h3>
|
||||
<ul>
|
||||
<li><del>Plain</del> <ins>Boring</ins> text.</li>
|
||||
<li><em>Emphasized text!</em></li>
|
||||
<li><strong>Strong text!</strong></li>
|
||||
<li>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="70" height="70">
|
||||
<circle cx="35" cy="35" r="35" fill="red"/>
|
||||
<text x="10" y="40">image</text>
|
||||
</svg>
|
||||
</li>
|
||||
<li><a href="https://github.com/eligrey/FileSaver.js">A link.</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<form id="html-options">
|
||||
<label>Filename: <input type="text" class="filename" id="html-filename" placeholder="a rich document"/>.xhtml</label>
|
||||
<input type="submit" value="Save"/>
|
||||
</form>
|
||||
</section>
|
||||
<script src="https://raw.github.com/eligrey/Blob.js/master/Blob.min.js"></script>
|
||||
<script src="https://raw.github.com/eligrey/canvas-toBlob.js/master/canvas-toBlob.js"></script>
|
||||
<script src="https://raw.github.com/eligrey/FileSaver.js/master/FileSaver.js"></script>
|
||||
<script src="https://raw.github.com/eligrey/FileSaver.js/master/demo/demo.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user