feat: implemented functionnalities on Markdown images: 1. featherlight for full size view in popup 2. Height/Width customizables 3. Possibility to add css classes

static/css/featherlight.min.css

@@ -0,0 +1,8 @@
+/**
+ * Featherlight - ultra slim jQuery lightbox
+ * Version 1.2.3 - http://noelboss.github.io/featherlight/
+ *
+ * Copyright 2015, Noël Raoul Bossart (http://www.noelboss.com)
+ * MIT Licensed.
+**/
+@media all{.featherlight{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483647;text-align:center;white-space:nowrap;cursor:pointer;background:#333;background:rgba(0,0,0,0)}.featherlight:last-of-type{background:rgba(0,0,0,.8)}.featherlight:before{content:'';display:inline-block;height:100%;vertical-align:middle;margin-right:-.25em}.featherlight .featherlight-content{position:relative;text-align:left;vertical-align:middle;display:inline-block;overflow:auto;padding:25px 25px 0;border-bottom:25px solid transparent;min-width:30%;margin-left:5%;margin-right:5%;max-height:95%;background:#fff;cursor:auto;white-space:normal}.featherlight .featherlight-inner{display:block}.featherlight .featherlight-close-icon{position:absolute;z-index:9999;top:0;right:0;line-height:25px;width:25px;cursor:pointer;text-align:center;font:Arial,sans-serif;background:#fff;background:rgba(255,255,255,.3);color:#000}.featherlight .featherlight-image{width:100%}.featherlight-iframe .featherlight-content{border-bottom:0;padding:0}.featherlight iframe{border:0}}@media only screen and (max-width:1024px){.featherlight .featherlight-content{margin-left:10px;margin-right:10px;max-height:98%;padding:10px 10px 0;border-bottom:10px solid transparent}}

static/js/clippy.svg

@@ -1,3 +0,0 @@
-<svg height="1024" width="896" xmlns="http://www.w3.org/2000/svg">
-  <path d="M128 768h256v64H128v-64z m320-384H128v64h320v-64z m128 192V448L384 640l192 192V704h320V576H576z m-288-64H128v64h160v-64zM128 704h160v-64H128v64z m576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z" />
-</svg>

static/js/hugo-learn.js

@@ -0,0 +1,56 @@
+// Get Parameters from some url
+var getUrlParameter = function getUrlParameter(sPageURL) {
+    var url = sPageURL.split('?');
+    var obj = {};
+    if (url.length == 2) {
+      var sURLVariables = url[1].split('&'),
+          sParameterName,
+          i;
+      for (i = 0; i < sURLVariables.length; i++) {
+          sParameterName = sURLVariables[i].split('=');
+          obj[sParameterName[0]] = sParameterName[1];
+      }
+      return obj;
+    } else {
+      return undefined;
+    }
+};
+
+// Execute actions on images generated from Markdown pages
+var images = $("div#body-inner img");
+// Wrap image inside a featherlight (to get a full size view in a popup)
+images.wrap(function(){
+  var image =$(this);
+  return "<a href='" + image[0].src + "' data-featherlight='image'></a>";
+});
+
+// Change styles, depending on parameters set to the image
+images.each(function(index){
+  var image = $(this)
+  var o = getUrlParameter(image[0].src);
+  if (typeof o !== "undefined") {
+    var h = o["height"];
+    var w = o["width"];
+    var c = o["classes"];
+    image.css("width", function() {
+      if (typeof w !== "undefined") {
+        return w;
+      } else {
+        return "auto";
+      }
+    });
+    image.css("height", function() {
+      if (typeof h !== "undefined") {
+        return h;
+      } else {
+        return "auto";
+      }
+    });
+    if (typeof c !== "undefined") {
+      var classes = c.split(',');
+      for (i = 0; i < classes.length; i++) {
+        image.addClass(classes[i]);
+      }
+    }
+  }
+});

static/js/learn.js

@@ -127,7 +127,7 @@ jQuery(document).ready(function() {
         var input = jQuery(this),
             value = input.val(),
             items = jQuery('[data-nav-id]');
-
+        console.log(input, value, items);
         items.removeClass('search-match');
         if (!value.length) {
             $('ul.topics').removeClass('searched');
@@ -207,7 +207,7 @@ jQuery(document).ready(function() {
             });
         }
     });
-    
+
     // allow keyboard control for prev/next links
     jQuery(function() {
         jQuery('.nav-prev').click(function(){
@@ -228,7 +228,7 @@ jQuery(document).ready(function() {
       if(e.which == '39') {
         jQuery('.nav.nav-next').click();
       }
-    });     
+    });
 
 });