Open-ILS/web/js/file-saver/demo/demo.js

   1 /*! FileSaver.js demo script
   2  *  2016-05-26
   3  *
   4  *  By Eli Grey, http://eligrey.com
   5  *  License: 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.toBlobHD(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: "text/plain;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));