1 /*! FileSaver.js demo script

     2  *  2012-01-23

     3  *

     4  *  By Eli Grey, http://eligrey.com

     5  *  License: X11/MIT

     6  *    See LICENSE.md

     7  */

     8 

     9 /*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/demo/demo.js */

    10 

    11 /*jshint laxbreak: true, laxcomma: true, smarttabs: true*/

    12 /*global saveAs, self*/

    13 

    14 (function(view) {

    15 "use strict";

    16 // The canvas drawing portion of the demo is based off the demo at

    17 // http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/

    18 var

    19 	  document = view.document

    20 	, $ = function(id) {

    21 		return document.getElementById(id);

    22 	}

    23 	, session = view.sessionStorage

    24 	// only get URL when necessary in case Blob.js hasn't defined it yet

    25 	, get_blob = function() {

    26 		return view.Blob;

    27 	}

    28 

    29 	, canvas = $("canvas")

    30 	, canvas_options_form = $("canvas-options")

    31 	, canvas_filename = $("canvas-filename")

    32 	, canvas_clear_button = $("canvas-clear")

    33 

    34 	, text = $("text")

    35 	, text_options_form = $("text-options")

    36 	, text_filename = $("text-filename")

    37 

    38 	, html = $("html")

    39 	, html_options_form = $("html-options")

    40 	, html_filename = $("html-filename")

    41 

    42 	, ctx = canvas.getContext("2d")

    43 	, drawing = false

    44 	, x_points = session.x_points || []

    45 	, y_points = session.y_points || []

    46 	, drag_points = session.drag_points || []

    47 	, add_point = function(x, y, dragging) {

    48 		x_points.push(x);

    49 		y_points.push(y);

    50 		drag_points.push(dragging);

    51 	}

    52 	, draw = function(){

    53 		canvas.width = canvas.width;

    54 		ctx.lineWidth = 6;

    55 		ctx.lineJoin = "round";

    56 		ctx.strokeStyle = "#000000";

    57 		var

    58 			  i = 0

    59 			, len = x_points.length

    60 		;

    61 		for(; i < len; i++) {

    62 			ctx.beginPath();

    63 			if (i && drag_points[i]) {

    64 				ctx.moveTo(x_points[i-1], y_points[i-1]);

    65 			} else {

    66 				ctx.moveTo(x_points[i]-1, y_points[i]);

    67 			}

    68 			ctx.lineTo(x_points[i], y_points[i]);

    69 			ctx.closePath();

    70 			ctx.stroke();

    71 		}

    72 	}

    73 	, stop_drawing = function() {

    74 		drawing = false;

    75 	}

    76 

    77 	// Title guesser and document creator available at https://gist.github.com/1059648

    78 	, guess_title = function(doc) {

    79 		var

    80 			  h = "h6 h5 h4 h3 h2 h1".split(" ")

    81 			, i = h.length

    82 			, headers

    83 			, header_text

    84 		;

    85 		while (i--) {

    86 			headers = doc.getElementsByTagName(h[i]);

    87 			for (var j = 0, len = headers.length; j < len; j++) {

    88 				header_text = headers[j].textContent.trim();

    89 				if (header_text) {

    90 					return header_text;

    91 				}

    92 			}

    93 		}

    94 	}

    95 	, doc_impl = document.implementation

    96 	, create_html_doc = function(html) {

    97 		var

    98 			  dt = doc_impl.createDocumentType('html', null, null)

    99 			, doc = doc_impl.createDocument("http://www.w3.org/1999/xhtml", "html", dt)

   100 			, doc_el = doc.documentElement

   101 			, head = doc_el.appendChild(doc.createElement("head"))

   102 			, charset_meta = head.appendChild(doc.createElement("meta"))

   103 			, title = head.appendChild(doc.createElement("title"))

   104 			, body = doc_el.appendChild(doc.createElement("body"))

   105 			, i = 0

   106 			, len = html.childNodes.length

   107 		;

   108 		charset_meta.setAttribute("charset", html.ownerDocument.characterSet);

   109 		for (; i < len; i++) {

   110 			body.appendChild(doc.importNode(html.childNodes.item(i), true));

   111 		}

   112 		var title_text = guess_title(doc);

   113 		if (title_text) {

   114 			title.appendChild(doc.createTextNode(title_text));

   115 		}

   116 		return doc;

   117 	}

   118 ;

   119 canvas.width = 500;

   120 canvas.height = 300;

   121 

   122   if (typeof x_points === "string") {

   123 	x_points = JSON.parse(x_points);

   124 } if (typeof y_points === "string") {

   125 	y_points = JSON.parse(y_points);

   126 } if (typeof drag_points === "string") {

   127 	drag_points = JSON.parse(drag_points);

   128 } if (session.canvas_filename) {

   129 	canvas_filename.value = session.canvas_filename;

   130 } if (session.text) {

   131 	text.value = session.text;

   132 } if (session.text_filename) {

   133 	text_filename.value = session.text_filename;

   134 } if (session.html) {

   135 	html.innerHTML = session.html;

   136 } if (session.html_filename) {

   137 	html_filename.value = session.html_filename;

   138 }

   139 

   140 drawing = true;

   141 draw();

   142 drawing = false;

   143 

   144 canvas_clear_button.addEventListener("click", function() {

   145 	canvas.width = canvas.width;

   146 	x_points.length =

   147 	y_points.length =

   148 	drag_points.length =

   149 		0;

   150 }, false);

   151 canvas.addEventListener("mousedown", function(event) {

   152 	event.preventDefault();

   153 	drawing = true;

   154 	add_point(event.pageX - canvas.offsetLeft, event.pageY - canvas.offsetTop, false);

   155 	draw();

   156 }, false);

   157 canvas.addEventListener("mousemove", function(event) {

   158 	if (drawing) {

   159 		add_point(event.pageX - canvas.offsetLeft, event.pageY - canvas.offsetTop, true);

   160 		draw();

   161 	}

   162 }, false);

   163 canvas.addEventListener("mouseup", stop_drawing, false);

   164 canvas.addEventListener("mouseout", stop_drawing, false);

   165 

   166 canvas_options_form.addEventListener("submit", function(event) {

   167 	event.preventDefault();

   168 	canvas.toBlob(function(blob) {

   169 		saveAs(

   170 			  blob

   171 			, (canvas_filename.value || canvas_filename.placeholder) + ".png"

   172 		);

   173 	}, "image/png");

   174 }, false);

   175 

   176 text_options_form.addEventListener("submit", function(event) {

   177 	event.preventDefault();

   178 	var BB = get_blob();

   179 	saveAs(

   180 		  new BB(

   181 			  [text.value || text.placeholder]

   182 			, {type: "text/plain;charset=" + document.characterSet}

   183 		)

   184 		, (text_filename.value || text_filename.placeholder) + ".txt"

   185 	);

   186 }, false);

   187 

   188 html_options_form.addEventListener("submit", function(event) {

   189 	event.preventDefault();

   190 	var

   191 		  BB = get_blob()

   192 		, xml_serializer = new XMLSerializer()

   193 		, doc = create_html_doc(html)

   194 	;

   195 	saveAs(

   196 		  new BB(

   197 			  [xml_serializer.serializeToString(doc)]

   198 			, {type: "application/xhtml+xml;charset=" + document.characterSet}

   199 		)

   200 		, (html_filename.value || html_filename.placeholder) + ".xhtml"

   201 	);

   202 }, false);

   203 

   204 view.addEventListener("unload", function() {

   205 	session.x_points = JSON.stringify(x_points);

   206 	session.y_points = JSON.stringify(y_points);

   207 	session.drag_points = JSON.stringify(drag_points);

   208 	session.canvas_filename = canvas_filename.value;

   209 

   210 	session.text = text.value;

   211 	session.text_filename = text_filename.value;

   212 

   213 	session.html = html.innerHTML;

   214 	session.html_filename = html_filename.value;

   215 }, false);

   216 }(self));