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/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();
       }
-    });     
+    });
 
 });