Neues Papier-Design, kein Reload beim Download

css/zertifikat.css

@@ -123,6 +123,10 @@ a {
   height: 300px;
 }
 
+#design_preview img {
+  box-shadow: 0 0 10px #e4e4e4;
+}
+
 @media (min-width:768px) {
     .container .jumbotron, .container-fluid .jumbotron {
 	margin-left: 200px;

index.html

@@ -93,6 +93,12 @@
           <div class="form-group">
             <label class="col-md-4 control-label" for="checkboxes">Optionale Formularinhalte</label>
             <div class="col-md-4">
+              <div class="checkbox">
+                <label for="zeitraum">
+                  <input type="checkbox" name="checkboxes" id="zeitraum">
+                  Kurszeitraum (von...bis) anzeigen
+                </label>
+            	</div>	      
               <div class="checkbox">
                 <label for="punkte">
                   <input type="checkbox" name="checkboxes" id="punkte">
@@ -127,9 +133,10 @@
             <div class="col-md-4">
               <select id="design" name="design" class="form-control" onchange="showPreview();">
                 <option value="serioes">Seriös</option>
-                <option value="verspielt">Verspielt</option>
+                <option value="gestrichelt">Gestrichelt</option>
+		<option value="papier">Papier</option>
               </select>
-              <span class="help-block">Spiegelt nicht die obigen Einstellungen wider.</span>
+              <span class="help-block">Die Designvorschau zeigt das Erscheinungsbild und spiegelt nicht die obigen Einstellungen wider (eigenes Logo, optionale Formularinhalte, ...).</span>
               
               <div id="design_preview" onchange="showPreview();"></div>
               
@@ -139,17 +146,17 @@
           </fieldset>
           
           <fieldset>
-          <!-- Button -->
-          <div class="form-group">
-            <label class="col-md-4 control-label" for="download">Vorlage herunterladen</label>
-            <div class="col-md-4">
-              <input type="submit" name="download" value="Download" class="btn btn-primary">
-            </div>
-          </div>    
-        </fieldset>       
+            <!-- Button -->
+            <div class="form-group">
+              <label class="col-md-4 control-label" for="download">Vorlage herunterladen</label>
+              <div class="col-md-4">
+		 <input type="button" name="download" onclick="BuildZIP();" class="btn btn-primary" value="Download"> 
+              </div>
+            </div>    
+          </fieldset>       
           
           </form>
-
+	  
         </div>
 
       </div>
@@ -177,7 +184,7 @@
   </div>
 
 <script>
-  var version = "0.12";
+  var version = "0.13";
   document.write("<script type='text/javascript' src='js/zertifikat.js?v=" + version + "'><\/script>");
 </script>
 

js/zertifikat.js

-
-var zip = new JSZip();
-var logoname = "logo.png";
-
 document.getElementById("version").innerHTML = version;
 
 showPreview();
 
-// Standardlogo verwenden
-JSZipUtils.getBinaryContent("./img/logo.png", function (err, data) {
-  if(err) {
-    throw err; // or handle the error
-  }
-  zip.file(logoname, data);
-}); 
-
 function BuildZIP() {
 
+  var zip = new JSZip();
+  var logoname = "logo.png";
+  var filecounter = 0;
+  var files = [];
+
+  function generateZIP(){
+      zip.generateAsync({
+	type:"blob",
+	compression:"DEFLATE",
+	platform: "UNIX"
+      })
+	 .then(function(content) {
+	   saveAs(content, "openolat-leistungsnachweis-"+document.getElementById('design').value.toLowerCase()+".zip");
+	 }, function (e) {
+	   showError(e);
+	 });
+  }
+  
   var zertifikat = "\
 <!--\n\
   Zweck: Vorlage für Leistungsnachweise/Zertifikate in OpenOLAT\n\
@@ -100,22 +106,33 @@ function BuildZIP() {
         bottom: 1cm;\n\
       }";
 
-  if (document.getElementById("design").value === "serioes") {
-    //Seriös
-  }
-  else {
-    //Verspielt
+  switch (document.getElementById("design").value) {
+    case "gestrichelt":
     zertifikat += "\n\n\
       body {\n\
         border: 3px dashed black;\n\
         padding: 1em;\n\
-        background-color: beige;\n\
+        background-color: #eaf3ff;\n\
         font-family: Courier;\n\
       }\n\
       \n\
       .footer {\n\
         bottom: 2cm;\n\
       }";
+      break;
+    case "papier":
+    zertifikat += "\n\n\
+      html {\n\
+	font-family: Georgia, serif;\n\
+	background-image: url(papier.jpg);\n\
+	background-size: cover;\n\
+      }\n\
+      }";
+
+      files.push("papier.jpg");
+      break;
+    default:
+      // seriös
   }
   
   zertifikat += "\n\
@@ -138,6 +155,9 @@ function BuildZIP() {
     var logofile = document.getElementById('logofile').files[0];
     if (logofile != null) {
       zip.file(logoname, logofile);
+    } else {
+      // Standardlogo verwenden
+      files.push("logo.png");
     }
   
     zertifikat += "\n\
@@ -154,8 +174,13 @@ function BuildZIP() {
   // Name, Zeitraum, Titel
   zertifikat += "\n\
   <p>Hiermit bescheinigen wir, dass</p>\n\
-  <h2>$fullName</h2>\n\
-  <p>vom $from bis $to an der Veranstaltung</p>\n\
+  <h2>$fullName</h2>\n\<p>";
+
+  if (document.getElementById("zeitraum").checked){
+    zertifikat += "vom $from bis $to ";
+  }
+  
+  zertifikat += "an der Veranstaltung</p>\n\
   <h2>„$title“</h2>";
   
   // Punkte
@@ -189,17 +214,27 @@ function BuildZIP() {
 
   zip.file("index.html", zertifikat, {binary:false});
 
-  zip.generateAsync({
-    type:"blob",
-    compression:"DEFLATE",
-    platform: "UNIX"
-  })
-  .then(function(content) {
-      // see FileSaver.js
-      saveAs(content, "openolat-leistungsnachweis.zip");
+  if (files.length == 0) {
+    generateZIP();
+  }
+  
+ files.forEach(function(file){
+  // loading a file and add it in a zip file
+  JSZipUtils.getBinaryContent("./img/" + file, function (err, data) {
+     if(err) {
+        throw err; // or handle the error
+     }
+     zip.file(file, data, {binary:true});
+     filecounter++;
+    if (filecounter == files.length) {
+      generateZIP();
+    }
+
   });
+});
+  
 }
 
 function showPreview() {
-  document.getElementById("design_preview").innerHTML = "<img src='img/"+document.getElementById('design').value+".jpg'>";  
-}
\ No newline at end of file
+  document.getElementById("design_preview").innerHTML = "<img src='img/vorschau_"+document.getElementById('design').value+".jpg'>";  
+}