working scroll, nicer share button

mirva/__init__.py

@@ -1,4 +1,4 @@
-__version__ = "20230928.1"
+__version__ = "20230929.0"
 
 
 def get_version():

mirva/mirva.py

@@ -280,33 +280,32 @@ Released   : 20110306
     def get_post(self, image, title, content):
         image = urllib.parse.quote(image)
         if self.video_match.match(image):
-            return """
-                <div class="post" id="post_{image}">
-                    <div class="navigation">&nbsp;</div>
-                    <div class="image_wrapper center"><a href="{image}">
+            insert = """
                         <video class=post_image controls preload="metadata">
                             <source src="{image}" type="video/mp4" >
                         </video>
-                    </a></div>
-                    <div class="meta"><div class="post_title" id="title_{image}">{title}</div></div>
-                    <div style="clear: both;">&nbsp;</div>
-                    <div class="entry">{content}</div>
-                </div>""".format(
-                image=image, title=title, content=content
-            )
-
-        return """
+            """
+        else:
+            insert = """
+                        <img loading=lazy class=post_image src="{med_dir}/{image}.jpg">
+            """
+        return (
+            """
             <div class="post" id="post_{image}">
                 <div class="navigation">&nbsp;</div>
                 <div class="image_wrapper center"><a href="{image}">
-                    <img loading=lazy class=post_image src="{med_dir}/{image}.jpg">
+                    """
+            + insert
+            + """
                 </a></div>
-                <div class="meta"><div class="post_title" id="title_{image}">{title}</div></div>
+                <div class="meta">
+                    <div class="post_share"></div>
+                    <div class="post_title">{title}</div>
+                </div>
                 <div style="clear: both;">&nbsp;</div>
                 <div class="entry">{content}</div>
-            </div>""".format(
-            image=image, title=title, content=content, med_dir=self.medium_dir
-        )
+            </div>"""
+        ).format(image=image, title=title, content=content, med_dir=self.medium_dir)
 
     def is_created_with_mirva(self):
         with open("index.html", "rt") as fp:
@@ -338,6 +337,7 @@ Released   : 20110306
             "arrow_down.png",
             "mirva.ico",
             "mirva.js",
+            "share.svg",
         ):
             if os.path.exists(os.path.join(self.resource_dir, f)):
                 continue

mirva/resources/mirva.css

@@ -196,16 +196,26 @@ a:hover {}
   font-weight: bold;
 }
 
-.post .meta .post_title {
+.post .meta .post_title,
+.post_share {
   display: inline;
 }
 
-.post_title {
+.post_share {
   cursor: pointer;
 }
 
-.post_title:hover {
-  color: var(--links);
+.post_share {
+  vertical-align: top;
+  margin-right: 0.5em;
+}
+
+.post_share A IMG {
+  filter: brightness(75%);
+}
+
+.post_share A IMG:hover {
+  filter: invert(47%) sepia(97%) saturate(1043%) hue-rotate(359deg) brightness(101%) contrast(105%);
 }
 
 .post .meta .posted {}

mirva/resources/mirva.js

@@ -3,6 +3,7 @@ let currentScrolled = -1;
 let scrollTimer = null;
 let scrollEventTimer = null;
 let defaultScroll = "smooth";
+let loadTime = new Date();
 
 function r(f) {
   /in/.test(document.readyState) ? setTimeout('r(' + f + ')', 9) : f()
@@ -18,7 +19,7 @@ function create_nav() {
   let navis = document.getElementsByClassName("navigation");
   for (let i = 0; i < navis.length; i++) {
     if (i == navis.length - 1) {
-      navis[i].appendChild(create_button("up", navis[0], 0));
+      navis[i].appendChild(create_button("up", document.body, 0));
       continue;
     }
     if (navis[i - 1]) {
@@ -30,11 +31,21 @@ function create_nav() {
       navis[i].appendChild(create_button("down", navis[i + 1], i + 1));
     }
   }
-  let titles = document.getElementsByClassName("post_title");
-  for (let i = 0; i < navis.length; i++) {
-    titles[i].onclick = function() {
+  let shares = document.getElementsByClassName("post_share");
+  for (let i = 0; i < shares.length; i++) {
+    let name = shares[i].parentElement.parentElement.id.substring(5);
+    shares[i].onclick = function(event) {
       scroll_to(this.parentElement.parentElement);
+      event.preventDefault()
     }
+    let button = document.createElement('img');
+    button.src = ".mirva/share.svg";
+    let link = document.createElement('a');
+    let url = window.location.href.split('?')[0] + `?i=${name}`
+    link.href = url;
+    link.title = "Link to this image: " + url;
+    link.appendChild(button);
+    shares[i].appendChild(link);
   }
 }
 
@@ -43,6 +54,7 @@ function create_button(direction, to, next) {
   container.classList.add("float_" + direction);
   let button = document.createElement('img');
   button.src = ".mirva/arrow_" + direction + ".png";
+  button.title = to == document.body ? "Top of page" : `Move ${direction}`;
   button.classList.add("navigation_button");
   button.onclick = function() {
     scroll_to(to.parentElement);
@@ -61,7 +73,6 @@ function is_visible(el, type) {
   }
 }
 
-
 function get_position() {
   let intro = document.getElementsByClassName("intro");
   for (let i = 0; i < intro.length; i++) {
@@ -116,6 +127,16 @@ function get_position() {
   }
 }
 
+function find_by_name(name) {
+  let posts = document.getElementsByClassName("image_wrapper");
+  for (let i = 0; i < posts.length; i++) {
+    if (posts[i].parentElement.id.substring(5) == name) {
+      return i
+    }
+  }
+  return null
+}
+
 function scroll_to(element) {
   /* Scroll smooth, if no frequent keypress */
   if (scrollTimer) {
@@ -148,17 +169,24 @@ function get_url_arg() {
 }
 
 function scroll_by_url() {
+  // Find the image, and scroll to it. With Lazy loading it seems to
+  // escape sometimes..
   let name = get_url_arg();
   if (name) {
     let element = document.getElementById(`post_${name}`);
+    let index = find_by_name(name);
     if (element) {
       // Just to be sure..
       setTimeout(function() {
+        // Try for 10 seconds.
+        if (new Date() - loadTime > 10000) {
+          return
+        }
         scroll_to(element);
-      }, 1250);
-      setTimeout(function() {
-        scroll_to(element);
-      }, 10);
+        if (get_position().current != index) {
+          scroll_by_url();
+        }
+      }, 310);
     }
   }
 }
@@ -192,7 +220,6 @@ function keyboard_entry(ev) {
     });
     return
   }
-  current = Math.max(0, current);
-  current = Math.min(posts.length - 1, current);
+  current = Math.min(posts.length - 1, Math.max(0, current));
   scroll_to(posts[current].parentElement)
-}
+}

mirva/resources/share.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg height="16" id="svg2" version="1.1" width="16" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg"><defs id="defs4"/><g id="layer1" transform="translate(0,-1036.3622)"><path d="m -22.410713,-3.3303571 a 2.3660715,2.3660715 0 1 1 -4.732143,0 2.3660715,2.3660715 0 1 1 4.732143,0 z" id="path2985" style="fill:#ffffff;fill-opacity:1;stroke:none" transform="matrix(0.84528301,0,0,0.84528301,33.943395,1042.1773)"/><path d="m -22.410713,-3.3303571 a 2.3660715,2.3660715 0 1 1 -4.732143,0 2.3660715,2.3660715 0 1 1 4.732143,0 z" id="path2985-1" style="fill:#ffffff;fill-opacity:1;stroke:none" transform="matrix(0.84528301,0,0,0.84528301,33.943395,1052.1773)"/><path d="m -22.410713,-3.3303571 a 2.3660715,2.3660715 0 1 1 -4.732143,0 2.3660715,2.3660715 0 1 1 4.732143,0 z" id="path2985-1-7" style="fill:#ffffff;fill-opacity:1;stroke:none" transform="matrix(0.84528301,0,0,0.84528301,23.943395,1047.1773)"/><path d="M 13,3 3,8 13,13" id="path3791" style="fill:none;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" transform="translate(0,1036.3622)"/></g></svg>