Added post peek extension

core/basethemelet.php

@@ -72,7 +72,7 @@ class BaseThemelet
             }
         }
 
-        return "<a href='$h_view_link' class='thumb shm-thumb shm-thumb-link {$custom_classes}' data-tags='$h_tags' data-height='$image->height' data-width='$image->width' data-post-id='$i_id'>".
+        return "<a href='$h_view_link' class='thumb shm-thumb shm-thumb-link {$custom_classes}' data-tags='$h_tags' data-height='$image->height' data-width='$image->width' data-mime='{$image->get_mime()}' data-post-id='$i_id'>".
                 "<img id='thumb_$i_id' title='$h_tip' alt='$h_tip' height='{$tsize[1]}' width='{$tsize[0]}' src='$h_thumb_link'>".
                 "</a>\n";
     }

ext/handle_pixel/theme.php

@@ -30,7 +30,7 @@ class PixelFileHandlerTheme extends Themelet
         }
 
         $html = "<img alt='main image' class='shm-main-image' id='main_image' src='$u_ilink' ".
-            "data-width='{$image->width}' data-height='{$image->height}'>";
+            "data-width='{$image->width}' data-height='{$image->height} data-mime='{$image->get_mime()}'>";
         $page->add_block(new Block("Image", $html, "main", 10));
     }
 }

ext/post_peek/info.php

@@ -0,0 +1,12 @@
+<?php declare(strict_types=1);
+
+class PostPeekInfo extends ExtensionInfo
+{
+    public const KEY = "post_peek";
+
+    public $key = self::KEY;
+    public $name = "Postt Peek";
+    public $url = self::SHIMMIE_URL;
+    public $authors = "Matthew Barbour";
+    public $license = self::LICENSE_WTFPL;
+}

ext/post_peek/main.php

@@ -0,0 +1,5 @@
+<?php declare(strict_types=1);
+
+class PostPeek extends Extension
+{
+}

ext/post_peek/script.js

@@ -0,0 +1,167 @@
+/*jshint bitwise:true, curly:true, forin:false, noarg:true, noempty:true, nonew:true, undef:true, strict:false, browser:true, jquery:true */
+
+var peekerOpen = false;
+function calculatePeekerSize(imageWidth, imageHeight, maxWidth, maxHeight) {
+    let xscale = maxWidth / imageWidth;
+    let yscale = maxHeight / imageHeight;
+
+    let scale;
+    if(yscale  < xscale) {
+        scale = yscale;
+    } else {
+        scale = xscale;
+    }
+
+    return [imageWidth * scale, imageHeight * scale];
+}
+
+function postPeekAddPeeker() {
+    const mimeRegex = /^image\/.+/g;
+    const cursorMargin = 20;
+    const windowMargin = 50;
+
+    var peekerElement = document.createElement("DIV");
+    peekerElement.style.position = "absolute";
+    peekerElement.style.border = "solid 1px black";
+    peekerElement.style.boxShadow = "5px 5px 10px black";
+
+    var image_elements = document.querySelectorAll(".shm-image-list a img");
+    image_elements.forEach(function(item) {
+        var parent = item.parentElement;
+        parent.style.position = "relative";
+
+        var mime =parent.dataset["mime"];
+        if(mime.match(mimeRegex)) {
+            var linkElement = document.createElement("DIV");
+            linkElement.innerHTML = "&#x1F50D;";
+            linkElement.style.position = "absolute";
+            linkElement.style.top = "4px";
+            linkElement.style.left = "4px";
+            linkElement.style.width = "10px";
+            linkElement.style.height = "10px";
+            linkElement.style.fontSize = "20px";
+            linkElement.style.color = "red";
+
+            var width = parseInt(parent.dataset["width"]);
+            var height = parseInt(parent.dataset["height"]);
+            var ratio = width/height;
+
+
+            linkElement.onmouseenter = function(e) {
+                let imgElement = document.createElement("IMG");
+                imgElement.src = item.src.replace("thumb/", "image/");
+                imgElement.style.width = "100%";
+                imgElement.style.aheight = "100%";
+
+                peekerElement.innerHTML = "";
+
+                let sizeCandidates = [];
+
+                // Add arrays defining each possible area to render
+                // Array is [left, right, top, bottom, [width, height]]
+
+                // Calculate for the right area
+                let dimensions = calculatePeekerSize(width, height,  window.innerWidth - e.clientX - windowMargin, window.innerHeight - windowMargin);
+                sizeCandidates.push([
+                    (e.clientX + cursorMargin - window.scrollX) + "px", // left
+                    "", // right
+                    "", // top
+                    ((window.innerHeight - dimensions[1]) / 2  - window.scrollY) + "px", // bottom
+                    dimensions
+                ]);
+
+                // Calculate for the bottom area
+                dimensions = calculatePeekerSize(width, height,  window.innerWidth - windowMargin, window.innerHeight - e.clientY - windowMargin);
+                sizeCandidates.push([
+                    ((window.innerWidth - dimensions[0]) / 2  - window.scrollX) + "px", // left
+                    "", // right
+                    (e.clientY + cursorMargin + window.scrollY) + "px", // top
+                    "", // bottom
+                    dimensions
+                ]);
+
+                // Calculate for the left area
+                dimensions = calculatePeekerSize(width, height, e.clientX - windowMargin, window.innerHeight - windowMargin);
+                sizeCandidates.push([
+                    "", // left
+                    (window.innerWidth - e.clientX + cursorMargin - window.scrollX) + "px", // right
+                    "", // top
+                    ((window.innerHeight - dimensions[1]) / 2 - window.scrollY) + "px", // bottom
+                    dimensions
+                ]);
+
+                // Calculate for the top area
+                dimensions = calculatePeekerSize(width, height,  window.innerWidth - windowMargin, e.clientY - windowMargin);
+                sizeCandidates.push([
+                    ((window.innerWidth - dimensions[0]) / 2  - window.scrollX) + "px", // left
+                    "", // right
+                    "", // top
+                    (window.innerHeight - e.clientY + cursorMargin - window.scrollY) + "px", // bottom
+                    dimensions
+                ]);
+
+                let candidate = null;
+                let candidateSize = 0;
+                for(let i = 0; i < sizeCandidates.length; i++) {
+                    let newCandidate = sizeCandidates[i];
+                    let newCandidateSize = newCandidate[4][0] * newCandidate[4][1];
+                    if(newCandidateSize>candidateSize) {
+                        candidateSize = newCandidateSize;
+                        candidate = newCandidate;
+                    }
+                }
+
+                peekerElement.style.left = candidate[0];
+                peekerElement.style.right = candidate[1];
+                peekerElement.style.top =candidate[2];
+                peekerElement.style.bottom = candidate[3];
+
+                peekerElement.style.width = candidate[4][0] + "px";
+                peekerElement.style.height =  candidate[4][1]  + "px";
+
+
+                peekerElement.appendChild(imgElement);
+
+                if(!peekerOpen) {
+                    document.body.appendChild(peekerElement);
+                }
+
+                peekerOpen = true;
+            }
+            linkElement.onmouseleave = function (e) {
+                if(peekerOpen) {
+                    document.body.removeChild(peekerElement);
+                    peekerOpen = false;
+                }
+            }
+
+            parent.appendChild(linkElement);
+
+
+            //
+            // var offsetX = (item.offsetWidth - newWidth)/2;
+            // var offsetY = (item.offsetHeight - newHeight)/2;
+            //
+            // var scaleX = newWidth / frameWidth;
+            // var scaleY = newHeight / frameHeight;
+            // var scale = scaleX;
+            // if(scaleY<scaleX)  {
+            //     scale = scaleY;
+            // }
+            // frameWidth = frameWidth * scale;
+            // frameHeight = frameHeight * scale;
+            //
+            // offsetX = offsetX + ((newWidth - frameWidth)/2);
+            // offsetY = offsetY + ((newHeight - frameHeight)/2);
+            //
+            // console.log("test");
+            // var frame = $("<div class='frame" + inWidth + "x" + inHeight + "' style='position:absolute; left:" + offsetX + "px; top:" + offsetY + "px; width:" + frameWidth + "px; height:" + frameHeight + "px;outline:solid 1px " + color + ";color:" + color + ";vertical-align: bottom; '><div style='position:absolute; left:0; bottom:0;'>" + inWidth + ":" + inHeight + "</div></div>");
+            // $(parent).append(frame);
+        }
+    });
+}
+
+
+document.addEventListener('DOMContentLoaded', () => {
+    postPeekAddPeeker();
+});

ext/post_peek/theme.php

@@ -0,0 +1,5 @@
+<?php declare(strict_types=1);
+
+class PostPeekTheme extends Themelet
+{
+}