Subversion-Projekte lars-tiefland.ci

/* 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) {
        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));