blog_theme/assets/js/main.js
2020-09-24 10:29:21 +08:00

294 lines
7.7 KiB
JavaScript

var body = $("body");
window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.loadHidden = false;
$(function () {
"use strict";
author();
stickySidebar();
pagination();
facebook();
loadInstagram();
gallery();
copyright();
offCanvas();
});
function author() {
"use strict";
$(".author-name").on("click", function () {
$(this).next(".author-social").toggleClass("enabled");
});
}
function stickySidebar() {
"use strict";
var marginTop = 30;
jQuery(".sidebar-column, .related-column").theiaStickySidebar({
additionalMarginTop: marginTop,
additionalMarginBottom: 30,
});
}
function pagination() {
"use strict";
var wrapper = $(".post-feed .row");
var button = $(".infinite-scroll-button");
if (body.hasClass("paged-next")) {
wrapper.on("request.infiniteScroll", function (event, path) {
button.hide();
});
wrapper.on("load.infiniteScroll", function (event, response, path) {
if ($(response).find("body").hasClass("paged-next")) {
button.show();
}
});
wrapper.infiniteScroll({
append: ".post-column",
button: ".infinite-scroll-button",
debug: false,
hideNav: ".pagination",
history: false,
path: ".pagination .older-posts",
scrollThreshold: false,
status: ".infinite-scroll-status",
});
}
}
function facebook() {
"use strict";
var widget = $(".widget-facebook");
if (
widget.find(".fb-page").attr("data-href") ==
"__YOUR_FACEBOOK_PAGE_URL__"
) {
widget.remove();
}
}
function loadInstagram() {
"use strict";
var photos;
var feed = $(".instagram-feed");
var storageKey = "ruby_instagram";
if (themeOptions.instagram_token != "") {
if (
localStorage.getItem(storageKey) !== null &&
Math.floor(Date.now() / 1000) -
JSON.parse(localStorage.getItem(storageKey)).timestamp <
300
) {
photos = JSON.parse(localStorage.getItem(storageKey)).photos;
outputInstagram(photos, feed);
} else {
$.ajax({
url: "https://graph.instagram.com/me/media/",
type: "GET",
data: {
access_token: themeOptions.instagram_token,
limit: 6,
fields: "media_url, permalink, thumbnail_url, media_type",
},
success: function (result) {
photos = result.data;
var cache = {
photos: photos,
timestamp: Math.floor(Date.now() / 1000),
};
localStorage.setItem(storageKey, JSON.stringify(cache));
outputInstagram(photos, feed);
},
});
}
} else {
feed.parent(".widget-instagram").remove();
}
}
function outputInstagram(photos, feed) {
"use strict";
var photo;
var output = "";
for (var index in photos) {
photo = photos[index];
var url =
photo.media_type != "VIDEO" ? photo.media_url : photo.thumbnail_url;
output +=
'<a class="instagram-feed-item" href="' +
photo.permalink +
'" target="_blank" rel="noopener noreferrer">' +
'<img class="u-object-fit" src="' +
url +
'">' +
'<i class="instagram-feed-item-icon icon icon-instagram"></i>' +
"</a>";
}
feed.each(function (i, v) {
$(v).html(output);
$(v).css("height", Math.round($(v).height()) + "px");
});
}
function gallery() {
"use strict";
var images = document.querySelectorAll(".kg-gallery-image img");
images.forEach(function (image) {
var container = image.closest(".kg-gallery-image");
var width = image.attributes.width.value;
var height = image.attributes.height.value;
var ratio = width / height;
container.style.flex = ratio + " 1 0%";
});
pswp(
".kg-gallery-container",
".kg-gallery-image",
".kg-gallery-image",
false,
true
);
pswp(".kg-image-card", ".kg-image", ".kg-image", false, false);
}
function copyright() {
"use strict";
if (themeOptions.copyright != "") {
$(".copyright").html(themeOptions.copyright);
}
}
function offCanvas() {
"use strict";
$(".burger:not(.burger.close)").on("click", function () {
body.addClass("canvas-visible canvas-opened");
dimmer("open", "medium");
});
$(".burger-close").on("click", function () {
if (body.hasClass("canvas-opened")) {
body.removeClass("canvas-opened");
dimmer("close", "medium");
}
});
$(".dimmer").on("click", function () {
if (body.hasClass("canvas-opened")) {
body.removeClass("canvas-opened");
dimmer("close", "medium");
}
});
}
function pswp(container, element, trigger, caption, isGallery) {
var parseThumbnailElements = function (el) {
var items = [],
gridEl,
linkEl,
item;
$(el)
.find(element)
.each(function (i, v) {
gridEl = $(v);
linkEl = gridEl.find(trigger);
item = {
src: isGallery
? gridEl.find("img").attr("src")
: gridEl.attr("src"),
w: 0,
h: 0,
};
if (caption && gridEl.find(caption).length) {
item.title = gridEl.find(caption).html();
}
items.push(item);
});
return items;
};
var openPhotoSwipe = function (index, galleryElement) {
var pswpElement = document.querySelectorAll(".pswp")[0],
gallery,
options,
items;
items = parseThumbnailElements(galleryElement);
options = {
closeOnScroll: false,
history: false,
index: index,
shareEl: false,
showAnimationDuration: 0,
showHideOpacity: true,
};
gallery = new PhotoSwipe(
pswpElement,
PhotoSwipeUI_Default,
items,
options
);
gallery.listen("gettingData", function (index, item) {
if (item.w < 1 || item.h < 1) {
// unknown size
var img = new Image();
img.onload = function () {
// will get size after load
item.w = this.width; // set image width
item.h = this.height; // set image height
gallery.updateSize(true); // reinit Items
};
img.src = item.src; // let's download image
}
});
gallery.init();
};
var onThumbnailsClick = function (e) {
e.preventDefault();
var index = $(e.target)
.closest(container)
.find(element)
.index($(e.target).closest(element));
var clickedGallery = $(e.target).closest(container);
openPhotoSwipe(index, clickedGallery[0]);
return false;
};
$(container).on("click", trigger, function (e) {
onThumbnailsClick(e);
});
}
function dimmer(action, speed) {
"use strict";
var dimmer = $(".dimmer");
switch (action) {
case "open":
dimmer.fadeIn(speed);
break;
case "close":
dimmer.fadeOut(speed);
break;
}
}