summaryrefslogtreecommitdiff
path: root/vendor/FileSaver/demo
diff options
context:
space:
mode:
authorJulie Lala <jules@okfoc.us>2013-12-10 00:47:36 -0500
committerJulie Lala <jules@okfoc.us>2013-12-10 00:47:36 -0500
commit037a0ae8072217f7821549bbdfe030e73289330d (patch)
treeb2e20cff097a44e08cd8e6609e7d5a00b732d88c /vendor/FileSaver/demo
dither stuff
Diffstat (limited to 'vendor/FileSaver/demo')
-rw-r--r--vendor/FileSaver/demo/demo.css55
-rw-r--r--vendor/FileSaver/demo/demo.js213
-rw-r--r--vendor/FileSaver/demo/demo.min.js2
-rw-r--r--vendor/FileSaver/demo/index.xhtml57
4 files changed, 327 insertions, 0 deletions
diff --git a/vendor/FileSaver/demo/demo.css b/vendor/FileSaver/demo/demo.css
new file mode 100644
index 0000000..fe03ca5
--- /dev/null
+++ b/vendor/FileSaver/demo/demo.css
@@ -0,0 +1,55 @@
+html {
+ background-color: #DDD;
+}
+body {
+ width: 900px;
+ margin: 0 auto;
+ font-family: Verdana, Helvetica, Arial, sans-serif;
+ box-shadow: 0 0 5px #000;
+ box-shadow: 0 0 10px 2px rgba(0, 0, 0, .5);
+ padding: 7px 25px 70px;
+ background-color: #FFF;
+}
+h1, h2, h3, h4, h5, h6 {
+ font-family: Georgia, "Times New Roman", serif;
+}
+h2, form {
+ text-align: center;
+}
+form {
+ margin-top: 5px;
+}
+.input {
+ width: 500px;
+ height: 300px;
+ margin: 0 auto;
+ display: block;
+}
+section {
+ margin-top: 40px;
+}
+dt {
+ font-weight: bold;
+ font-size: larger;
+}
+#canvas {
+ cursor: crosshair;
+}
+#canvas, #html {
+ border: 1px solid black;
+}
+.filename {
+ text-align: right;
+}
+#html {
+ box-sizing: border-box;
+ ms-box-sizing: border-box;
+ webkit-box-sizing: border-box;
+ moz-box-sizing: border-box;
+ overflow: auto;
+ padding: 1em;
+}
+dt:target {
+ background-color: Highlight;
+ color: HighlightText;
+}
diff --git a/vendor/FileSaver/demo/demo.js b/vendor/FileSaver/demo/demo.js
new file mode 100644
index 0000000..e08497b
--- /dev/null
+++ b/vendor/FileSaver/demo/demo.js
@@ -0,0 +1,213 @@
+/* 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 */
+
+(function(view) {
+"use strict";
+// The canvas drawing portion of the demo is based off the demo at
+// http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/
+var
+ document = view.document
+ , $ = function(id) {
+ return document.getElementById(id);
+ }
+ , session = view.sessionStorage
+ // only get URL when necessary in case Blob.js hasn't defined it yet
+ , get_blob = function() {
+ return view.Blob;
+ }
+
+ , canvas = $("canvas")
+ , 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 || []
+ , y_points = session.y_points || []
+ , drag_points = session.drag_points || []
+ , add_point = function(x, y, dragging) {
+ x_points.push(x);
+ y_points.push(y);
+ drag_points.push(dragging);
+ }
+ , draw = function(){
+ canvas.width = canvas.width;
+ ctx.lineWidth = 6;
+ ctx.lineJoin = "round";
+ ctx.strokeStyle = "#000000";
+ var
+ i = 0
+ , len = x_points.length
+ ;
+ for(; i < len; i++) {
+ ctx.beginPath();
+ if (i && drag_points[i]) {
+ ctx.moveTo(x_points[i-1], y_points[i-1]);
+ } else {
+ ctx.moveTo(x_points[i]-1, y_points[i]);
+ }
+ ctx.lineTo(x_points[i], y_points[i]);
+ ctx.closePath();
+ ctx.stroke();
+ }
+ }
+ , stop_drawing = function() {
+ drawing = false;
+ }
+
+ // Title guesser and document creator available at https://gist.github.com/1059648
+ , guess_title = function(doc) {
+ var
+ h = "h6 h5 h4 h3 h2 h1".split(" ")
+ , i = h.length
+ , headers
+ , header_text
+ ;
+ while (i--) {
+ headers = doc.getElementsByTagName(h[i]);
+ for (var j = 0, len = headers.length; j < len; j++) {
+ header_text = headers[j].textContent.trim();
+ if (header_text) {
+ return header_text;
+ }
+ }
+ }
+ }
+ , doc_impl = document.implementation
+ , create_html_doc = function(html) {
+ var
+ dt = doc_impl.createDocumentType('html', null, null)
+ , doc = doc_impl.createDocument("http://www.w3.org/1999/xhtml", "html", dt)
+ , doc_el = doc.documentElement
+ , head = doc_el.appendChild(doc.createElement("head"))
+ , charset_meta = head.appendChild(doc.createElement("meta"))
+ , title = head.appendChild(doc.createElement("title"))
+ , body = doc_el.appendChild(doc.createElement("body"))
+ , i = 0
+ , len = html.childNodes.length
+ ;
+ charset_meta.setAttribute("charset", html.ownerDocument.characterSet);
+ for (; i < len; i++) {
+ body.appendChild(doc.importNode(html.childNodes.item(i), true));
+ }
+ var title_text = guess_title(doc);
+ if (title_text) {
+ title.appendChild(doc.createTextNode(title_text));
+ }
+ return doc;
+ }
+;
+canvas.width = 500;
+canvas.height = 300;
+
+ if (typeof x_points === "string") {
+ x_points = JSON.parse(x_points);
+} if (typeof y_points === "string") {
+ y_points = JSON.parse(y_points);
+} if (typeof drag_points === "string") {
+ drag_points = JSON.parse(drag_points);
+} if (session.canvas_filename) {
+ canvas_filename.value = session.canvas_filename;
+} if (session.text) {
+ text.value = session.text;
+} if (session.text_filename) {
+ text_filename.value = session.text_filename;
+} if (session.html) {
+ html.innerHTML = session.html;
+} if (session.html_filename) {
+ html_filename.value = session.html_filename;
+}
+
+drawing = true;
+draw();
+drawing = false;
+
+canvas_clear_button.addEventListener("click", function() {
+ canvas.width = canvas.width;
+ x_points.length =
+ y_points.length =
+ drag_points.length =
+ 0;
+}, false);
+canvas.addEventListener("mousedown", function(event) {
+ event.preventDefault();
+ drawing = true;
+ add_point(event.pageX - canvas.offsetLeft, event.pageY - canvas.offsetTop, false);
+ draw();
+}, false);
+canvas.addEventListener("mousemove", function(event) {
+ if (drawing) {
+ add_point(event.pageX - canvas.offsetLeft, event.pageY - canvas.offsetTop, true);
+ draw();
+ }
+}, false);
+canvas.addEventListener("mouseup", stop_drawing, false);
+canvas.addEventListener("mouseout", stop_drawing, false);
+
+canvas_options_form.addEventListener("submit", function(event) {
+ event.preventDefault();
+ canvas.toBlob(function(blob) {
+ saveAs(
+ blob
+ , (canvas_filename.value || canvas_filename.placeholder) + ".png"
+ );
+ }, "image/png");
+}, false);
+
+text_options_form.addEventListener("submit", function(event) {
+ event.preventDefault();
+ var BB = get_blob();
+ saveAs(
+ new BB(
+ [text.value || text.placeholder]
+ , {type: "text/plain;charset=" + document.characterSet}
+ )
+ , (text_filename.value || text_filename.placeholder) + ".txt"
+ );
+}, false);
+
+html_options_form.addEventListener("submit", function(event) {
+ event.preventDefault();
+ var
+ BB = get_blob()
+ , xml_serializer = new XMLSerializer
+ , doc = create_html_doc(html)
+ ;
+ saveAs(
+ new BB(
+ [xml_serializer.serializeToString(doc)]
+ , {type: "application/xhtml+xml;charset=" + document.characterSet}
+ )
+ , (html_filename.value || html_filename.placeholder) + ".xhtml"
+ );
+}, false);
+
+view.addEventListener("unload", function() {
+ session.x_points = JSON.stringify(x_points);
+ 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);
+}(self));
diff --git a/vendor/FileSaver/demo/demo.min.js b/vendor/FileSaver/demo/demo.min.js
new file mode 100644
index 0000000..77f9ed1
--- /dev/null
+++ b/vendor/FileSaver/demo/demo.min.js
@@ -0,0 +1,2 @@
+/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/demo/demo.js */
+(function(n){"use strict";var s=n.document,g=function(A){return s.getElementById(A)},b=n.sessionStorage,x=function(){return n.Blob},f=g("canvas"),r=g("canvas-options"),y=g("canvas-filename"),p=g("canvas-clear"),q=g("text"),t=g("text-options"),h=g("text-filename"),m=g("html"),e=g("html-options"),i=g("html-filename"),u=f.getContext("2d"),z=false,a=b.x_points||[],o=b.y_points||[],d=b.drag_points||[],j=function(A,C,B){a.push(A);o.push(C);d.push(B)},l=function(){f.width=f.width;u.lineWidth=6;u.lineJoin="round";u.strokeStyle="#000000";var B=0,A=a.length;for(;B<A;B++){u.beginPath();if(B&&d[B]){u.moveTo(a[B-1],o[B-1])}else{u.moveTo(a[B]-1,o[B])}u.lineTo(a[B],o[B]);u.closePath();u.stroke()}},c=function(){z=false},w=function(E){var D="h6 h5 h4 h3 h2 h1".split(" "),C=D.length,F,G;while(C--){F=E.getElementsByTagName(D[C]);for(var B=0,A=F.length;B<A;B++){G=F[B].textContent.trim();if(G){return G}}}},v=s.implementation,k=function(D){var B=v.createDocumentType("html",null,null),J=v.createDocument("http://www.w3.org/1999/xhtml","html",B),A=J.documentElement,H=A.appendChild(J.createElement("head")),K=H.appendChild(J.createElement("meta")),I=H.appendChild(J.createElement("title")),E=A.appendChild(J.createElement("body")),C=0,G=D.childNodes.length;K.setAttribute("charset",D.ownerDocument.characterSet);for(;C<G;C++){E.appendChild(J.importNode(D.childNodes.item(C),true))}var F=w(J);if(F){I.appendChild(J.createTextNode(F))}return J};f.width=500;f.height=300;if(typeof a==="string"){a=JSON.parse(a)}if(typeof o==="string"){o=JSON.parse(o)}if(typeof d==="string"){d=JSON.parse(d)}if(b.canvas_filename){y.value=b.canvas_filename}if(b.text){q.value=b.text}if(b.text_filename){h.value=b.text_filename}if(b.html){m.innerHTML=b.html}if(b.html_filename){i.value=b.html_filename}z=true;l();z=false;p.addEventListener("click",function(){f.width=f.width;a.length=o.length=d.length=0},false);f.addEventListener("mousedown",function(A){A.preventDefault();z=true;j(A.pageX-f.offsetLeft,A.pageY-f.offsetTop,false);l()},false);f.addEventListener("mousemove",function(A){if(z){j(A.pageX-f.offsetLeft,A.pageY-f.offsetTop,true);l()}},false);f.addEventListener("mouseup",c,false);f.addEventListener("mouseout",c,false);r.addEventListener("submit",function(A){A.preventDefault();f.toBlob(function(B){saveAs(B,(y.value||y.placeholder)+".png")},"image/png")},false);t.addEventListener("submit",function(A){A.preventDefault();var B=x();saveAs(new B([q.value||q.placeholder],{type:"text/plain;charset="+s.characterSet}),(h.value||h.placeholder)+".txt")},false);e.addEventListener("submit",function(B){B.preventDefault();var D=x(),A=new XMLSerializer,C=k(m);saveAs(new D([A.serializeToString(C)],{type:"application/xhtml+xml;charset="+s.characterSet}),(i.value||i.placeholder)+".xhtml")},false);n.addEventListener("unload",function(){b.x_points=JSON.stringify(a);b.y_points=JSON.stringify(o);b.drag_points=JSON.stringify(d);b.canvas_filename=y.value;b.text=q.value;b.text_filename=h.value;b.html=m.innerHTML;b.html_filename=i.value},false)}(self)); \ No newline at end of file
diff --git a/vendor/FileSaver/demo/index.xhtml b/vendor/FileSaver/demo/index.xhtml
new file mode 100644
index 0000000..abc8813
--- /dev/null
+++ b/vendor/FileSaver/demo/index.xhtml
@@ -0,0 +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"/>
+</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"/>
+</body>
+</html>