add btn control slides

LuisAraujo · Nov 13, 2024 · 610bb1c · 610bb1c
1 parent 7ac809c
commit 610bb1c
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 12 deletions.
diff --git a/gerate.html b/gerate.html
@@ -18,7 +18,7 @@
 
 </style>
 </head>
-<body>
+<div>
   <header class="bg-white">
     <nav class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" aria-label="Global">
       <div class="flex lg:flex-1">
@@ -32,6 +32,12 @@
       </div>
     </nav>   
   </header>
+  <div id="btn-back-slide" class="btn-controlslide">
+    Back
+  </div>
+  <div id="btn-next-slide"  class="btn-controlslide">
+    Next
+  </div>
   <div class="head mx-auto max-w-7xl px-6 lg:px-8">
     <div class="mx-auto w-full lg:mx-0">
      <!-- <h2 class="text-4xl font-bold tracking-tight text-black sm:text-6xl">Code2Slide</h2>-->

diff --git a/scripts.js b/scripts.js
@@ -6,9 +6,18 @@ btnCreateSlide.addEventListener("click", function() {
     console.log(myFiles);
     readFile(myFiles[0])
 });
-
-codeslide= document.getElementById("codeslide");
-interfaceLoadfile = document.getElementById("interface-loadfile");
+var currentSlide = -1;
+var codeslide = document.getElementById("codeslide");
+var interfaceLoadfile = document.getElementById("interface-loadfile");
+
+btnBackSlide = document.getElementById("btn-back-slide");
+btnNextSlide = document.getElementById("btn-next-slide");
+btnBackSlide.addEventListener("click", function() {
+    backSlide();
+});
+btnNextSlide.addEventListener("click", function() {
+    nextSlide();
+});
 
 function readFile(file){
     console.log(file);
@@ -47,7 +56,7 @@ function showSlide(content_slides){
     console.log(content_slides);
     interfaceLoadfile.style.display = "none";
 
-    var html = '<div class="slide cover"><div class="flex lg:flex-1"><a href="#" class="-m-1.5 p-1.5"><span class="sr-only">Code to Slide</span><img class="h-10 w-auto" src="logo.png" alt=""></a></div>';
+    var html = '<div id="slide-0" class="slide cover"><div class="flex lg:flex-1"><a href="#" class="-m-1.5 p-1.5"><span class="sr-only">Code to Slide</span><img class="h-10 w-auto" src="logo.png" alt=""></a></div>';
 
     var institute = document.getElementById("nameinstitute").value;
     var course =document.getElementById("namecourse").value;
@@ -59,9 +68,9 @@ function showSlide(content_slides){
     html += '<div class="author">Luis Gustavo Araujo</div>';
     html += '<div class="course">Licenciatura em Computação</div></div>';
     codeslide.innerHTML = html;
-    
+
     content_slides.forEach(function(element, index) {
-        html = '<div class="slide"><div class="number-page">'+(index+1)+'</div>';    
+        html = '<div id="slide-'+(index+1)+'"  class="slide"><div class="number-page">'+(index+1)+'</div>';    
         html += '<div class="title">'+element[1].title+'</div>';
         html += '<div class="description">'+element[1].description+'</div>';
         html += '<div class="container">';
@@ -150,9 +159,23 @@ function dataFileDnD() {
             const files = createFileList([...this.files], [...files_val]);
             this.files = files;
             console.log(this.files[0].text())
-
         }
         }
     };
 }
 
+
+function nextSlide(){
+    //todo if total slides
+    //todo obter a altura atual do slide
+    currentSlide++;
+    window.scrollTo(0, 144 + 612*currentSlide);
+
+}
+
+function backSlide(){
+     //todo obter a altura atual do slide
+    if(currentSlide >= 0)
+        currentSlide--;
+    window.scrollTo(0, 144 + 612*currentSlide);
+}
diff --git a/style_template.css b/style_template.css
@@ -13,16 +13,23 @@ src: url("font/NotoSans-VariableFont.ttf") format("truetype")
 
 
 
-html, body{
-
+html{
+    width: 100%;
+    height: 100%; 
+    overflow:auto;
+    margin: 0px;
+    padding: 0px;
+}
+
+body { 
+    height: 100%; 
     width: 100%;
-    height: 100%;
     margin: 0px;
     padding: 0px;
 }
 
 .slide{
-    height: calc(100% - 2px);
+    height: calc(100% - 2px); 
     width: calc(100% - 2px);
     border: 1px solid #000;
 }
@@ -118,3 +125,33 @@ code{
     color:#aaa;
 }
 
+.btn-controlslide{
+    border: 1px #000 solid;
+    padding: 5px;
+    border-radius: 10px;
+    color: #000;
+    background-color: #fff;
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    -ms-border-radius: 10px;
+    -o-border-radius: 10px;
+    position: fixed;
+    top: 50%;
+}
+#btn-back-slide{
+    opacity: 0.2;
+    left: 10px;
+}
+
+#btn-back-slide:hover{
+    opacity: 1;
+}
+
+#btn-next-slide{
+    opacity: 0.2;
+    right: 10px;
+}
+
+#btn-next-slide:hover{
+    opacity: 1;
+}