footer and page buttons

WebGde/WebContent/src/pdfviewer/pdfv.js

@@ -3,41 +3,64 @@ var container = document.createElement('div');
 container.setAttribute('id', 'pdf-container');
 // Get the next and previous buttons
 
-var prevButton = document.createElement('button');
-prevButton.setAttribute('id', 'prev-button');
-prevButton.textContent = 'Prev';
 
-var nextButton = document.createElement('button');
-nextButton.setAttribute('id', 'next-button');
-nextButton.textContent = 'Next';
+let centerContainer = document.createElement("div");
+centerContainer.classList.add("footerCenterContainer");
 
-var fitContentButton = document.createElement('button');
+var fitContentButton = document.createElement("div");
 fitContentButton.setAttribute('id', 'fit-content');
-fitContentButton.textContent = 'Fit-content';
-
-var rotateRightButton = document.createElement('button');
+ fitContentButton.classList.add("TiffViewer_ButtonClass");
+const fitContentIcon = addIcon("Fit Content", "full_content_icon.png");
+    
+var rotateRightButton = document.createElement('div');
 rotateRightButton.setAttribute('id', 'rotate-right');
-rotateRightButton.textContent = 'Rotate-Right';
+  rotateRightButton.classList.add("TiffViewer_ButtonClass");
+const rotateRightIcon = addIcon("Rotate Right", "rotate_right_icon.png");
 
-var rotateLeftButton = document.createElement('button');
+var rotateLeftButton = document.createElement('div');
 rotateLeftButton.setAttribute('id', 'rotate-left');
-rotateLeftButton.textContent = 'Rotate-Light';
+  rotateLeftButton.classList.add("TiffViewer_ButtonClass");
+const rotateLeftIcon = addIcon("Rotate Left", "rotate_left_icon.png");
 
-var zoomInButton = document.createElement('button');
+var zoomInButton = document.createElement('div');
 zoomInButton.setAttribute('id', 'zoom-in');
-zoomInButton.textContent = 'Zoom-in';
+  zoomInButton.classList.add("TiffViewer_ButtonClass");
+const zoomInIcon = addIcon("Zoom In", "zoom_in_icon.png");
 
-var zoomOutButton = document.createElement('button');
-zoomOutButton.setAttribute('id', 'zoom-in');
-zoomOutButton.textContent = 'Zoom-out';
+var zoomOutButton = document.createElement('div');
+zoomOutButton.setAttribute('id', 'zoom-out');
+  zoomOutButton.classList.add("TiffViewer_ButtonClass");
+const zoomOutIcon = addIcon("Zoom Out", "zoom_out_icon.png");
 
-var flipVerticalButton = document.createElement('button');
+var flipVerticalButton = document.createElement('div');
 flipVerticalButton.setAttribute('id', 'flip-vertical');
-flipVerticalButton.textContent = 'Flip-vertical';
+  flipVerticalButton.classList.add("TiffViewer_ButtonClass");
+const flipVerticalIcon = addIcon("Flip Vertical", "flip_vertical_icon.png");
 
-var flipHorizontalButton = document.createElement('button');
+var flipHorizontalButton = document.createElement('div');
 flipHorizontalButton.setAttribute('id', 'flip-horizontal');
-flipHorizontalButton.textContent = 'Flip-horizontal';
+  flipHorizontalButton.classList.add("TiffViewer_ButtonClass");
+const flipHorizontalIcon = addIcon("Flip Horizontal", "flip_horizontal_icon.png");
+
+
+let pageButtonInfoContainer = document.createElement("div");
+pageButtonInfoContainer.classList.add("pageButtonInfoContainer");
+
+var buttonAndPageContainer = document.createElement('div');
+buttonAndPageContainer.classList.add("buttonAndPageContainer")
+
+var prevButton = document.createElement('div');
+prevButton.setAttribute('id', 'prev-button');
+prevButton.classList.add("multiPagePdf_ButtonClass")
+prevButton.textContent = '<';
+
+var nextButton = document.createElement('div');
+nextButton.setAttribute('id', 'next-button');
+nextButton.classList.add("multiPagePdf_ButtonClass")
+nextButton.textContent = '>';
+
+let pageZoomInfoContainer = document.createElement("div");
+pageZoomInfoContainer.classList.add("pageZoomInfoContainer");
 
 var pageInfo = document.createElement('span');          		
 pageInfo.setAttribute('id', 'page-info');
@@ -53,19 +76,37 @@ var footer = document.getElementById("TiffModalFooter");
 var controllsContainer = document.createElement("div");
 controllsContainer.setAttribute('id', 'controlsContainer');
 
+
+
+fitContentButton.append(fitContentIcon);
+rotateRightButton.append(rotateRightIcon);
+rotateLeftButton.append(rotateLeftIcon);
+zoomInButton.append(zoomInIcon);
+zoomOutButton.append(zoomOutIcon);
+flipVerticalButton.append(flipVerticalIcon);
+flipHorizontalButton.append(flipHorizontalIcon);
+
+pageZoomInfoContainer.appendChild(pageInfo);
+pageZoomInfoContainer.appendChild(zoomInfo);
+
+pageButtonInfoContainer.append(prevButton);
+pageButtonInfoContainer.append(pageZoomInfoContainer);
+pageButtonInfoContainer.append(nextButton);
+
+buttonAndPageContainer.append(pageButtonInfoContainer);
+
 footer.appendChild(controllsContainer);
-controllsContainer.appendChild(prevButton);
-controllsContainer.appendChild(nextButton);
-controllsContainer.appendChild(fitContentButton);
-controllsContainer.appendChild(rotateRightButton);
-controllsContainer.appendChild(rotateLeftButton);
-controllsContainer.appendChild(zoomInButton);
-controllsContainer.appendChild(zoomOutButton);
-controllsContainer.appendChild(flipVerticalButton);
-controllsContainer.appendChild(flipHorizontalButton);
-controllsContainer.appendChild(flipHorizontalButton);
-controllsContainer.appendChild(pageInfo);
-controllsContainer.appendChild(zoomInfo);
+
+centerContainer.appendChild(fitContentButton);
+centerContainer.appendChild(rotateRightButton);
+centerContainer.appendChild(rotateLeftButton);
+centerContainer.appendChild(zoomInButton);
+centerContainer.appendChild(zoomOutButton);
+centerContainer.appendChild(flipVerticalButton);
+centerContainer.appendChild(flipHorizontalButton);
+controllsContainer.appendChild(centerContainer);
+
+controllsContainer.appendChild(buttonAndPageContainer);
 
 //canva's
 var canvas = document.createElement('canvas');
@@ -214,3 +255,13 @@ initHighlight();
 
 };
 
+function addIcon(alt, iconDir){
+	
+	 const addIcon = document.createElement("img");
+	    addIcon.classList.add("tiffViewerIcons");
+	    addIcon.src = "/WebGde/assets/" + iconDir;
+	    addIcon.alt = alt;
+	
+	return addIcon;
+}
+

WebGde/WebContent/style.css

@@ -259,6 +259,25 @@ main#viewer {
     padding: 2px 8px;
 }
 
+.multiPagePdf_ButtonClass {
+    display: inline-block;
+    background-color: #000000a1;
+    border: none;
+    font-size: 14px;
+    color: white;
+    font-weight: 600;
+    padding: 2px 7px 2px 8px;
+    margin-right: 2px;
+    cursor: pointer;
+}
+
+.buttonAndPageContainer {
+    position: fixed;
+    top: 0px;
+    margin-top: 8vh;
+    width: 70%;
+}
+
 
 img.tiffViewerIcons {
 	transition: all 0.2s ease-out 100ms;
@@ -727,14 +746,41 @@ vertical-align: middle;
 
 #TiffModalBody {
     margin: auto;
-    height: 95%;
+    height: 82vh;
     width: 100%;
     position: absolute;
     display: inline-block;
-    margin-top: 7%;
+    margin-top: 11vh;
     overflow: auto;
 }
 
+.pageButtonInfoContainer {
+	position: absolute;
+    right: 0px;
+    margin-right: 8vw;
+}
+
+.nextPrevContainer {
+    display: inline-block;
+    position: absolute;
+    margin-left: 7vw;
+}
+
+.footerCenterContainer {
+    margin: auto;
+    display: table;
+}
+
+.pageZoomInfoContainer {
+    display: inline-block;
+    
+}
+
+span#page-info {
+    margin-right: 7px;
+    margin-left: 7px;
+}
+
 #TiffModalFooter {
     height: 38px;
     bottom: 0px;