Improve UI

tornadory · Nov 17, 2015 · ae7e62b · ae7e62b
1 parent 7c16554
commit ae7e62b
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 9 deletions.
diff --git a/css/pptx2html.css b/css/pptx2html.css
@@ -19,6 +19,7 @@ section {
 	border-radius: 10px;
 	box-shadow: 1px 1px 3px #AAA;
 	overflow: hidden;
+	transform: scale(0.85);
 }
 
 section div.block {
@@ -129,7 +130,6 @@ section svg.drawing {
 .fileUpload {
     position: relative;
     overflow: hidden;
-    margin: 10px;
 }
 .fileUpload input.upload {
     position: absolute;

diff --git a/index.html b/index.html
@@ -18,7 +18,9 @@
 
 <link rel="stylesheet" href="./css/font-awesome.min.css">
 <link rel="stylesheet" href="./css/pptx2html.css">
+
 <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
+<script type="text/javascript" src="./js/FileSaver.min.js"></script>
 
 </head>
 
@@ -42,16 +44,24 @@ <h1>PPTX2HTML</h1>
 		<div class="row">
 			<div class="col-md-6 col-md-offset-3" style="text-align: center;">
 
-				<!-- Upload -->
-				<h3>Choose a slide(.pptx) file</h3>
-				<div class="fileUpload btn btn-primary">
-					<span><i class="glyphicon glyphicon-upload"></i> Choose PPTX</span>
+				<!-- Split button -->
+				<div class="btn-group">
+				  <div class="fileUpload btn btn-primary">
+					<span><i class="glyphicon glyphicon-upload"></i> Choose a PPTX file</span>
 					<input id="uploadBtn" type="file" class="upload" accept="application/vnd.openxmlformats-officedocument.presentationml.presentation"/>
+				  </div>
+				  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+					<span class="caret"></span>
+					<span class="sr-only">Toggle Dropdown</span>
+				  </button>
+				  <ul class="dropdown-menu">
+					<li><a href="#" data-toggle="modal" data-target="#slideContentModel"><i class="glyphicon glyphicon-download-alt"></i> Raw content of slides</a></li>
+					<li id="download-btn"><a href="#"><i class="glyphicon glyphicon-download-alt"></i> Download html</a></li>
+					<li role="separator" class="divider"></li>
+					<li><a href="#"><i class="glyphicon glyphicon-download-alt"></i> Export to Reveal.js slides</a></li>
+				  </ul>
 				</div>
 
-				<!-- Button trigger modal -->
-				<button id="download-btn" class="btn btn-success" type="button" data-toggle="modal" data-target="#slideContentModel"><i class="glyphicon glyphicon-download-alt"></i> Show content of slides</button>
-
 				<!-- Modal -->
 				<div class="modal fade" id="slideContentModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
 				  <div class="modal-dialog" role="document">
@@ -68,7 +78,7 @@ <h4 class="modal-title" id="myModalLabel">Raw content of slides</h4>
 					  </div>
 					  <div class="modal-footer">
 						<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-						<button type="button" class="btn btn-primary">Download</button>
+						<button id="download-btn2" type="button" class="btn btn-primary">Download</button>
 					  </div>
 					</div>
 				  </div>
@@ -78,6 +88,8 @@ <h4 class="modal-title" id="myModalLabel">Raw content of slides</h4>
 
 		</div>
 
+		<br>
+
 		<div class="row">
 			<div class="col-md-6 col-md-offset-3" style="text-align: center;">
 				<img id="pptx-thumb" class="img-thumbnail" src="" alt="">

diff --git a/js/FileSaver.min.js b/js/FileSaver.min.js
diff --git a/js/pptx2html.js b/js/pptx2html.js
@@ -69,6 +69,19 @@ $(document).ready(function() {
 			$("#slideContentModel .modal-body textarea").text($result.html());
 		});
 
+		$("#download-btn").click(function () {
+			var cssText = "";
+			$.get("css/pptx2html.css", function (data) {
+				cssText = data;
+			}).done(function () {
+				var headHtml = "<style>" + cssText + "</style>";
+				var bodyHtml = $result.html();
+				var html = "<!DOCTYPE html><html><head>" + headHtml + "</head><body>" + bodyHtml + "</body></html>";
+				var blob = new Blob([html], {type: "text/html;charset=utf-8"});
+				saveAs(blob, "slides.html");
+			});
+		});
+
 	} else {
 
 		alert("Browser don't support Web Worker!");