Bootstrap \o/

themes/beautifulhugo/static/js/load-photoswipe.js

@@ -0,0 +1,74 @@
+/*
+Put this file in /static/js/load-photoswipe.js
+Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
+*/
+
+/* TODO: Make the share function work */
+$( document ).ready(function() {
+	/*
+	Initialise Photoswipe
+	*/
+	var items = []; // array of slide objects that will be passed to PhotoSwipe()
+	// for every figure element on the page:
+	$('figure').each( function() {
+		if ($(this).attr('class') == 'no-photoswipe') return true; // ignore any figures where class="no-photoswipe"
+		// get properties from child a/img/figcaption elements,
+		var $figure = $(this),
+			$a 		= $figure.find('a'),
+			$img 	= $figure.find('img'),
+			$src	= $a.attr('href'),
+			$title  = $img.attr('alt'),
+			$msrc	= $img.attr('src');
+		// if data-size on <a> tag is set, read it and create an item
+		if ($a.data('size')) {
+			var $size 	= $a.data('size').split('x');
+			var item = {
+				src		: $src,
+				w		: $size[0],
+				h 		: $size[1],
+				title 	: $title,
+				msrc	: $msrc
+			};
+			//console.log("Using pre-defined dimensions for " + $src);
+		// if not, set temp default size then load the image to check actual size
+		} else {
+			var item = {
+				src		: $src,
+				w		: 800, // temp default size
+				h 		: 600, // temp default size
+				title 	: $title,
+				msrc	: $msrc
+			};
+			//console.log("Using default dimensions for " + $src);
+			// load the image to check its dimensions
+			// update the item as soon as w and h are known (check every 30ms)
+			var img = new Image(); 
+			img.src = $src;
+			var wait = setInterval(function() {
+				var w = img.naturalWidth,
+					h = img.naturalHeight;
+				if (w && h) {
+					clearInterval(wait);
+					item.w = w;
+					item.h = h;
+					//console.log("Got actual dimensions for " + img.src);
+				}
+			}, 30);
+	   	}
+		// Save the index of this image then add it to the array
+		var index = items.length;
+		items.push(item);
+		// Event handler for click on a figure
+		$figure.on('click', function(event) {
+			event.preventDefault(); // prevent the normal behaviour i.e. load the <a> hyperlink
+			// Get the PSWP element and initialise it with the desired options
+			var $pswp = $('.pswp')[0];
+			var options = {
+				index: index, 
+				bgOpacity: 0.8,
+				showHideOpacity: true
+			}
+			new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options).init();
+		});	
+	});
+});

themes/beautifulhugo/static/js/main.js

@@ -0,0 +1,138 @@
+// Dean Attali / Beautiful Jekyll 2016
+
+var main = {
+
+  bigImgEl : null,
+  numImgs : null,
+
+  init : function() {
+    // Shorten the navbar after scrolling a little bit down
+    $(window).scroll(function() {
+        if ($(".navbar").offset().top > 50) {
+            $(".navbar").addClass("top-nav-short");
+        } else {
+            $(".navbar").removeClass("top-nav-short");
+        }
+    });
+    
+    // On mobile, hide the avatar when expanding the navbar menu
+    $('#main-navbar').on('show.bs.collapse', function () {
+      $(".navbar").addClass("top-nav-expanded");
+    });
+    $('#main-navbar').on('hidden.bs.collapse', function () {
+      $(".navbar").removeClass("top-nav-expanded");
+    });
+  
+    // On mobile, when clicking on a multi-level navbar menu, show the child links
+    $('#main-navbar').on("click", ".navlinks-parent", function(e) {
+      var target = e.target;
+      $.each($(".navlinks-parent"), function(key, value) {
+        if (value == target) {
+          $(value).parent().toggleClass("show-children");
+        } else {
+          $(value).parent().removeClass("show-children");
+        }
+      });
+    });
+
+    // Ensure nested navbar menus are not longer than the menu header
+    var menus = $(".navlinks-container");
+    if (menus.length > 0) {
+      var navbar = $("#main-navbar").find("ul");
+      var fakeMenuHtml = "<li class='fake-menu' style='display:none;'><a></a></li>";
+      navbar.append(fakeMenuHtml);
+      var fakeMenu = $(".fake-menu");
+
+      $.each(menus, function(i) {
+        var parent = $(menus[i]).find(".navlinks-parent");
+        var children = $(menus[i]).find(".navlinks-children a");
+        var words = [];
+        $.each(children, function(idx, el) { words = words.concat($(el).text().trim().split(/\s+/)); });
+        var maxwidth = 0;
+        $.each(words, function(id, word) {
+          fakeMenu.html("<a>" + word + "</a>");
+          var width =  fakeMenu.width();
+          if (width > maxwidth) {
+            maxwidth = width;
+          }
+        });
+        $(menus[i]).css('min-width', maxwidth + 'px')
+      });
+
+      fakeMenu.remove();
+    }      
+
+    // show the big header image  
+    main.initImgs();
+  },
+  
+  initImgs : function() {
+    // If the page was large images to randomly select from, choose an image
+    if ($("#header-big-imgs").length > 0) {
+      main.bigImgEl = $("#header-big-imgs");
+      main.numImgs = main.bigImgEl.attr("data-num-img");
+
+          // 2fc73a3a967e97599c9763d05e564189
+    // set an initial image
+    var imgInfo = main.getImgInfo();
+    var src = imgInfo.src;
+    var desc = imgInfo.desc;
+      main.setImg(src, desc);
+    
+    // For better UX, prefetch the next image so that it will already be loaded when we want to show it
+      var getNextImg = function() {
+      var imgInfo = main.getImgInfo();
+      var src = imgInfo.src;
+      var desc = imgInfo.desc;      
+      
+    var prefetchImg = new Image();
+      prefetchImg.src = src;
+    // if I want to do something once the image is ready: `prefetchImg.onload = function(){}`
+    
+      setTimeout(function(){
+                  var img = $("<div></div>").addClass("big-img-transition").css("background-image", 'url(' + src + ')');
+        $(".intro-header.big-img").prepend(img);
+        setTimeout(function(){ img.css("opacity", "1"); }, 50);
+      
+      // after the animation of fading in the new image is done, prefetch the next one
+        //img.one("transitioned webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
+      setTimeout(function() {
+        main.setImg(src, desc);
+      img.remove();
+        getNextImg();
+      }, 1000); 
+        //});   
+      }, 6000);
+      };
+    
+    // If there are multiple images, cycle through them
+    if (main.numImgs > 1) {
+        getNextImg();
+    }
+    }
+  },
+  
+  getImgInfo : function() {
+    var randNum = Math.floor((Math.random() * main.numImgs) + 1);
+    var src = main.bigImgEl.attr("data-img-src-" + randNum);
+  var desc = main.bigImgEl.attr("data-img-desc-" + randNum);
+  
+  return {
+    src : src,
+    desc : desc
+  }
+  },
+  
+  setImg : function(src, desc) {
+  $(".intro-header.big-img").css("background-image", 'url(' + src + ')');
+  if (typeof desc !== typeof undefined && desc !== false) {
+    $(".img-desc").text(desc).show();
+  } else {
+    $(".img-desc").hide();  
+  }
+  }
+};
+
+// 2fc73a3a967e97599c9763d05e564189
+
+document.addEventListener('DOMContentLoaded', main.init);