share specific images with url

mirva/__init__.py

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

mirva/mirva.py

@@ -252,7 +252,7 @@ Released   : 20110306
       <div id="page-bgtop">
         <div id="page-bgbtm">
           <div id="content">
-            <div class="post">
+            <div class="post" id="post_intro">
               <div class="entry intro">
                 {intro}
               </div>
@@ -281,14 +281,14 @@ Released   : 20110306
         image = urllib.parse.quote(image)
         if self.video_match.match(image):
             return """
-                <div class="post">
+                <div class="post" id="post_{image}">
                     <div class="navigation">&nbsp;</div>
                     <div class="image_wrapper center"><a href="{image}">
                         <video class=post_image controls preload="metadata">
                             <source src="{image}" type="video/mp4" >
                         </video>
                     </a></div>
-                    <div class="meta"><div class="name">{title}</div></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(
@@ -296,12 +296,12 @@ Released   : 20110306
             )
 
         return """
-            <div class="post">
+            <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">
                 </a></div>
-                <div class="meta"><div class="name">{title}</div></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(

mirva/resources/mirva.css

@@ -1,4 +1,3 @@
-
 /*
 Design by TEMPLATED
 http://templated.co
@@ -11,7 +10,7 @@ Released for free under the Creative Commons Attribution License
   --foreground: #d6d6d6;
   --headercolor: #ffffff;
   --title-text: #000000;
-  --title-background: rgba(255,255,255,0.7);
+  --title-background: rgba(255, 255, 255, 0.7);
   --links: #ff8300;
   --subtitle-text: #ffffff;
 }
@@ -39,7 +38,9 @@ body {
   overflow-x: hidden;
 }
 
-h1, h2, h3 {
+h1,
+h2,
+h3 {
   margin: 0;
   padding: 0;
   font-weight: normal;
@@ -58,21 +59,22 @@ h3 {
   font-size: 1.6em;
 }
 
-p, ul, ol {
+p,
+ul,
+ol {
   margin-top: 0;
   line-height: 180%;
 }
 
-ul, ol {
-}
+ul,
+ol {}
 
 a {
   text-decoration: none;
   color: var(--links);
 }
 
-a:hover {
-}
+a:hover {}
 
 #wrapper {
   width: 100vw;
@@ -100,7 +102,8 @@ a:hover {
   color: #000000;
 }
 
-#logo h1, #logo p {
+#logo h1,
+#logo p {
   margin: 0;
   padding: 0;
   color: var(--subtitle-text);
@@ -142,6 +145,7 @@ a:hover {
   margin: 0 auto;
   padding: 0px 0px 0px 0px;
 }
+
 @media only screen and (max-width: 800px) {
   #page {
     width: 100vw;
@@ -152,8 +156,7 @@ a:hover {
   padding: 20px 0px;
 }
 
-#page-bgbtm {
-}
+#page-bgbtm {}
 
 /* Content */
 
@@ -168,11 +171,9 @@ a:hover {
   padding-top: 2px;
 }
 
-.post-bgtop {
-}
+.post-bgtop {}
 
-.post-bgbtm {
-}
+.post-bgbtm {}
 
 .post .title {
   height: 38px;
@@ -195,16 +196,22 @@ a:hover {
   font-weight: bold;
 }
 
-.post .meta .name {
+.post .meta .post_title {
   display: inline;
 }
 
-.post .meta .posted {
+.post_title {
+  cursor: pointer;
 }
 
-.post .meta a {
+.post_title:hover {
+  color: var(--links);
 }
 
+.post .meta .posted {}
+
+.post .meta a {}
+
 .post .entry {
   padding: 0px 5px 20px 5px;
   text-align: justify;
@@ -229,6 +236,7 @@ a:hover {
   max-width: calc(100vw - 128px);
   display: inline;
 }
+
 @media only screen and (max-width: 800px) {
   .post_image {
     max-height: calc(100vh - 2px);
@@ -243,16 +251,19 @@ a:hover {
   height: 27px;
   float: right;
 }
+
 @media only screen and (max-width: 800px) {
   .navigation {
     display: none;
   }
 }
+
 .navigation_button {
   cursor: pointer;
   margin-left: 10px;
   box-shadow: 4px 4px 5px var(--button-shadow);
 }
+
 .navigation_button:hover {
   cursor: pointer;
   box-shadow: 2px 2px 2px var(--button-shadow);

mirva/resources/mirva.js

@@ -11,6 +11,7 @@ r(function() {
   defaultScroll = typeof document.body.dataset.scroll === "string" ? document.body.dataset.scroll : "smooth";
   create_nav();
   document.onkeydown = keyboard_entry;
+  scroll_by_url();
 });
 
 function create_nav() {
@@ -29,6 +30,12 @@ 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() {
+      scroll_to(this.parentElement.parentElement);
+    }
+  }
 }
 
 function create_button(direction, to, next) {
@@ -38,9 +45,7 @@ function create_button(direction, to, next) {
   button.src = ".mirva/arrow_" + direction + ".png";
   button.classList.add("navigation_button");
   button.onclick = function() {
-    to.parentElement.scrollIntoView({
-      behavior: defaultScroll
-    });
+    scroll_to(to.parentElement);
     current = next;
   };
   container.appendChild(button);
@@ -111,6 +116,53 @@ function get_position() {
   }
 }
 
+function scroll_to(element) {
+  /* Scroll smooth, if no frequent keypress */
+  if (scrollTimer) {
+    element.scrollIntoView({
+      behavior: "auto"
+    });
+    clearTimeout(scrollTimer);
+  } else {
+    element.scrollIntoView({
+      behavior: defaultScroll
+    });
+  }
+  scrollTimer = setTimeout(function() {
+      scrollTimer = null;
+    },
+    1200
+  );
+  if (element.id.substring(0, 5) == 'post_') {
+    set_url_arg(element.id.substring(5));
+  }
+}
+
+function set_url_arg(i) {
+  window.history.replaceState('', document.head.title, `?i=${i}`);
+}
+
+function get_url_arg() {
+  let url = new URL(window.location.href);
+  return url.searchParams.get('i');
+}
+
+function scroll_by_url() {
+  let name = get_url_arg();
+  if (name) {
+    let element = document.getElementById(`post_${name}`);
+    if (element) {
+      // Just to be sure..
+      setTimeout(function() {
+        scroll_to(element);
+      }, 1250);
+      setTimeout(function() {
+        scroll_to(element);
+      }, 10);
+    }
+  }
+}
+
 function keyboard_entry(ev) {
   let kC = ev.keyCode;
   let ctrlDown = ev.ctrlKey || ev.metaKey;
@@ -142,20 +194,5 @@ function keyboard_entry(ev) {
   }
   current = Math.max(0, current);
   current = Math.min(posts.length - 1, current);
-  /* Scroll smooth, if no frequent keypress */
-  if (scrollTimer) {
-    posts[current].parentElement.scrollIntoView({
-      behavior: "auto"
-    });
-    clearTimeout(scrollTimer);
-  } else {
-    posts[current].parentElement.scrollIntoView({
-      behavior: defaultScroll
-    });
-  }
-  scrollTimer = setTimeout(function() {
-      scrollTimer = null;
-    },
-    1200
-  );
+  scroll_to(posts[current].parentElement)
 }