feature: up button within scrolled content

alxarno · Nov 18, 2024 · d760fe4 · d760fe4
1 parent d3a5dbe
commit d760fe4
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 1 deletion.
diff --git a/e2e/dir.fixture b/e2e/dir.fixture
@@ -145,5 +145,9 @@
         </figure></a></li>
         </ul>
         </div>
+        <button onclick="onButtonUpClick()" id="button-up" title="Go to top" class="rounded-circle">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="25px" width="25px" version="1.1" id="Layer_1" viewBox="0 0 330 330" xml:space="preserve">
+    <path id="XMLID_224_" d="M325.606,229.393l-150.004-150C172.79,76.58,168.974,75,164.996,75c-3.979,0-7.794,1.581-10.607,4.394  l-149.996,150c-5.858,5.858-5.858,15.355,0,21.213c5.857,5.857,15.355,5.858,21.213,0l139.39-139.393l139.397,139.393  C307.322,253.536,311.161,255,315,255c3.839,0,7.678-1.464,10.607-4.394C331.464,244.748,331.464,235.251,325.606,229.393z"/>
+</svg></button>
     </body>
 </html>
diff --git a/e2e/index.fixture b/e2e/index.fixture
@@ -215,5 +215,9 @@
         </figure></a></li>
         </ul>
         </div>
+        <button onclick="onButtonUpClick()" id="button-up" title="Go to top" class="rounded-circle">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="25px" width="25px" version="1.1" id="Layer_1" viewBox="0 0 330 330" xml:space="preserve">
+    <path id="XMLID_224_" d="M325.606,229.393l-150.004-150C172.79,76.58,168.974,75,164.996,75c-3.979,0-7.794,1.581-10.607,4.394  l-149.996,150c-5.858,5.858-5.858,15.355,0,21.213c5.857,5.857,15.355,5.858,21.213,0l139.39-139.393l139.397,139.393  C307.322,253.536,311.161,255,315,255c3.839,0,7.678-1.464,10.607-4.394C331.464,244.748,331.464,235.251,325.606,229.393z"/>
+</svg></button>
     </body>
 </html>
diff --git a/e2e/search.fixture b/e2e/search.fixture
@@ -128,5 +128,9 @@
         </figure></a></li>
         </ul>
         </div>
+        <button onclick="onButtonUpClick()" id="button-up" title="Go to top" class="rounded-circle">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="25px" width="25px" version="1.1" id="Layer_1" viewBox="0 0 330 330" xml:space="preserve">
+    <path id="XMLID_224_" d="M325.606,229.393l-150.004-150C172.79,76.58,168.974,75,164.996,75c-3.979,0-7.794,1.581-10.607,4.394  l-149.996,150c-5.858,5.858-5.858,15.355,0,21.213c5.857,5.857,15.355,5.858,21.213,0l139.39-139.393l139.397,139.393  C307.322,253.536,311.161,255,315,255c3.839,0,7.678-1.464,10.607-4.394C331.464,244.748,331.464,235.251,325.606,229.393z"/>
+</svg></button>
     </body>
 </html>
diff --git a/pkg/preview/video.go b/pkg/preview/video.go
@@ -161,6 +161,8 @@ func getTimeCodes(duration time.Duration) ([]time.Duration, []bool) {
 		// if video is small (< parts*time.Second), then just copy last images to remaining buffers
 		if timestamp > duration && part > 1 || timestamp == duration {
 			repeat[part] = true
+
+			continue
 		}
 
 		timestamps = append(timestamps, timestamp)
@@ -194,9 +196,10 @@ func produceVideoPreview(path string, duration time.Duration, params VideoParams
 		if !repeat {
 			continue
 		}
-		// just copy data from previous buffer
+
 		images[index] = new(bytes.Buffer)
 
+		// just copy data from previous buffer
 		_, err := images[index].Write(images[index-1].Bytes())
 		if err != nil {
 			return nil, fmt.Errorf("%w: %w", ErrBufferCopy, err)

diff --git a/web/js/button-up.js b/web/js/button-up.js
@@ -0,0 +1,21 @@
+let button = null
+
+const onButtonUpClick = () => {
+    document.body.scrollTop = 0;
+    document.documentElement.scrollTop = 0;
+}
+
+const scrollFunction = () => {
+    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+        button.style.display = "block";
+    } else {
+        button.style.display = "none";
+    }
+  }
+
+const buttonUpInit = () => {
+    window.onscroll = function() {scrollFunction()};
+    button = document.getElementById("button-up");
+}
+
+export {buttonUpInit, onButtonUpClick}
diff --git a/web/js/index.js b/web/js/index.js
@@ -4,6 +4,7 @@ import { videoInit, videoClear  } from "./video";
 import { zoom } from "./zoom"
 import { observeDOM } from "./dom";
 import { onSearch, highlightSearchResults } from "./search"
+import { onButtonUpClick, buttonUpInit } from "./button-up"
 import Cookies from "js-cookie"
 import htmx from "htmx.org"
 
@@ -15,6 +16,7 @@ window.onSort = onSort
 window.htmx = require('htmx.org');
 window.zoom = zoom
 window.onSearch = onSearch
+window.onButtonUpClick = onButtonUpClick
 
 
 let fsLightbox = new FsLightbox();
@@ -47,6 +49,7 @@ window.onload = () => {
     })
     initLightBox();
     highlightSearchResults();
+    buttonUpInit();
     observeDOM()(document.body, (m) => {
         let addedNodes = []
         m.forEach(record => record.addedNodes.length & addedNodes.push(...record.addedNodes));

diff --git a/web/scss/_button-up.scss b/web/scss/_button-up.scss
@@ -0,0 +1,21 @@
+@use 'variables';
+
+#button-up {
+    display: none;
+    position: fixed;
+    bottom: 20px;
+    right: 30px;
+    z-index: 99;
+    font-size: 18px;
+    border: none;
+    outline: none;
+    background-color: variables.$dark-color;
+    cursor: pointer;
+    padding: 20px;
+    opacity: 0.9;
+    border-radius: 4px;
+
+    > svg{
+        fill: variables.$accent-color;
+    }
+}
diff --git a/web/scss/index.scss b/web/scss/index.scss
@@ -4,6 +4,7 @@
 @use 'video';
 @use 'preview';
 @use 'navbar';
+@use 'button-up';
 
 body {
     background-color: variables.$background-color;

diff --git a/web/templates/button-up.html b/web/templates/button-up.html
@@ -0,0 +1,4 @@
+{{ define "button-up" }}<button onclick="onButtonUpClick()" id="button-up" title="Go to top" class="rounded-circle">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="25px" width="25px" version="1.1" id="Layer_1" viewBox="0 0 330 330" xml:space="preserve">
+    <path id="XMLID_224_" d="M325.606,229.393l-150.004-150C172.79,76.58,168.974,75,164.996,75c-3.979,0-7.794,1.581-10.607,4.394  l-149.996,150c-5.858,5.858-5.858,15.355,0,21.213c5.857,5.857,15.355,5.858,21.213,0l139.39-139.393l139.397,139.393  C307.322,253.536,311.161,255,315,255c3.839,0,7.678-1.464,10.607-4.394C331.464,244.748,331.464,235.251,325.606,229.393z"/>
+</svg></button>{{ end }}
diff --git a/web/templates/index.html b/web/templates/index.html
@@ -7,5 +7,6 @@
             {{ if .Search }} <h4 id="found" class="mt-5">Found <span class="text-primary">{{ len .Items }}</span> elements</h4> {{ end }}
             {{template "dir" .Items }}
         </div>
+        {{ template "button-up" }}
     </body>
 </html>{{end}}