Current Dev State

static/js/ketcher2/node_modules/filesaver.js/demo/demo.js

@@ -0,0 +1,216 @@
+/*! 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
+// 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));