fixed modal

www/css/autodoc.css

@@ -24,6 +24,5 @@ html body {
 }
 
 .autodoc_valign {
-	margin-top: auto;
-	margin-bottom: auto;
-}
+	padding-top: 50%;
+}

www/index.html

@@ -116,13 +116,13 @@
             </div>
             <div class="modal-body autodoc_home_modal_body">
               <div class="row">
-                <div id="autodoc_home_modal_left" class="col-1 autodoc_valign text-secondary">
+                <div id="autodoc_home_modal_left" class="col-1 autodoc_valign text-light bg-secondary" style="opacity: 0.15;">
                   <i class="fas fa-3x fa-chevron-circle-left"></i>
                 </div>
                 <div class="col">
                   <img class="img-fluid" id="autodoc_home_modal_img" />
                 </div>
-                <div id="autodoc_home_modal_right" class="col-1 autodoc_valign text-secondary">
+                <div id="autodoc_home_modal_right" class="col-1 autodoc_valign text-light bg-secondary" style="opacity: 0.15;">
                   <i class="fas fa-3x fa-chevron-circle-right"></i>
                 </div>
               </div>
@@ -193,4 +193,4 @@
   <script src="js/autodoc.js"></script>
 </body>
 
-</html>
+</html>

www/js/autodoc.js

@@ -33,12 +33,23 @@ $(document).ready(function () {
   });
 
   $('#autodoc_home_modal_left').mouseenter(function(e) {
-      $(e.target).addClass("text-light bg-secondary");
-      $(e.target).removeClass("text-secondary bg-light");
+      $(e.target).fadeTo("slow", 0.8);
     })
     .mouseleave(function(e) {
-      $(e.target).removeClass("text-light bg-secondary");
-      $(e.target).addClass("text-secondary bg-light");
+      $(e.target).fadeTo("slow", 0.15);
+    })
+    .click(function(e) {
+home_modal_page_prev();
+    });
+
+  $('#autodoc_home_modal_right').mouseenter(function(e) {
+      $(e.target).fadeTo("slow", 0.8);
+    })
+    .mouseleave(function(e) {
+      $(e.target).fadeTo("slow", 0.15);
+    })
+    .click(function(e) {
+home_modal_page_next();
     });
 
 });
@@ -377,16 +388,37 @@ function upload_status() {
 }
 
 
-function home_modal_open(docid) {
+function home_modal_page(pageNum) {
+  var doc       = $('#autodoc_home_modal_body').data('document');
+  var pageTotal = doc.pageId.length();
+
+  $('#autodoc_home_modal_body').data('pageNum', pageNum);
+
   $('#autodoc_home_modal_img').attr('src',
-    conf.openapi +
-    "/documents/" +
-    docid +
-    "/image");
+	conf.openapi +
+	"/pages/" +
+	doc.pageId[pageNum] +
+	"/image");
+}
 
-  $('#autodoc_home_modal').modal('show');
+function home_modal_page_prev() {
+	home_modal_page(
+		$('#autodoc_home_modal_body').data('pageNum') - 1 );
+}
+
+function home_modal_page_next() {
+	home_modal_page(
+		$('#autodoc_home_modal_body').data('pageNum') + 1 );
+}
+
+function home_modal_open(docid) {
+  $.getJSON(conf.openapi + "/documents/" + docid, function(data) {
+	$('#autodoc_home_modal_body').data('document', data);
+  	home_modal_page(data.primaryPage);
+        $('#autodoc_home_modal').modal('show');
+  });
 }
 
 function home_modal_close(docid) {
   $('#autodoc_home_modal').modal('hide');
-}
+}