Skip to content

Instantly share code, notes, and snippets.

@arthursoares

arthursoares/theme4.js

Last active October 23, 2018 12:28
Show Gist options
  • Save arthursoares/42a87570ea784ad790af1d87cc513dd4 to your computer and use it in GitHub Desktop.
Save arthursoares/42a87570ea784ad790af1d87cc513dd4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
theme4.js
window.Theme = window.Theme || {
init: function() {
Theme.fadeInContent(), Theme.Turbolinks.init(), this.reload()
},
reload: function() {
Theme.$ = {
html: $("html"),
body: $("body"),
container: $(".container"),
header: $(".header"),
logo: $(".logo"),
headerContainer: $(".header-items-container"),
menuToggle: $(".mobile-menu-toggle"),
assetsGrid: $(".assets-grid"),
masonry: $(".masonry"),
menu: $(".menu"),
categoryList: $(".category ul"),
category: $(".category")
}, Theme.themeData = _4ORMAT_DATA, Theme.masonryInitialized = !!Theme.$.masonry.data("masonry"), this.initJSForPageType(), Theme.Menu.init()
},
initJSForPageType: function() {
var e = this.normalizedPageType();
window.Theme.hasOwnProperty(e) && window.Theme[e].init()
},
normalizedPageType: function() {
return Theme.themeData.page.hasOwnProperty("nested") ? Theme.themeData.page.nested.type.charAt(0).toUpperCase() + Theme.themeData.page.nested.type.slice(1) : Theme.themeData.page.type.charAt(0).toUpperCase() + Theme.themeData.page.type.slice(1)
},
fadeInContent: function() {
setTimeout(function() {
Theme.$.html.removeClass("is-hidden")
}, 300)
},
isMobileView: function() {
return window.innerWidth <= 1024
}
}, window.Theme.Turbolinks = window.Theme.Turbolinks || {
init: function() {
$(document).on("page:update", this.onUpdate.bind(this)), $(document).on("page:before-change", this.onBeforeChange.bind(this)), $(document).on("page:change", this.onPageChange.bind(this)), $(document).on("page:load", this.onPageLoad.bind(this)), $(document).on("page:restore", this.onRestore.bind(this))
},
onBeforeChange: function() {
Theme.$.header.removeClass("collapsed"), Theme.$.html.addClass("is-changing")
},
onPageChange: function() {
setTimeout(function() {
Theme.$.html.removeClass("is-changing")
}, 1e3)
},
onUpdate: function() {},
onPageLoad: function() {
Theme.reload()
},
onRestore: function() {}
}, window.Theme.Menu = window.Theme.Menu || {
init: function() {
this.bindEvents(), this.toggleMenu(), this.toggleCategories(), this.wrapLogoLetters(), this.collapseHeaderItems(), this.collapseMenu(), this.menuPosition(), this.offsetHeaderHeight()
},
bindEvents: function() {
$(window).on("resize", function() {
Theme.Menu.collapseHeaderItems(), Theme.Menu.collapseMenu(), Theme.Menu.menuPosition(), Theme.Menu.closeMenu(), Theme.Menu.offsetHeaderHeight()
})
},
toggleMenu: function() {
Theme.$.menuToggle.on("click", function() {
Theme.$.header.hasClass("active") ? (Theme.$.header.removeClass("active"), Theme.$.body.removeClass("mobile-menu-active")) : (Theme.$.header.addClass("active"), Theme.$.body.addClass("mobile-menu-active"))
})
},
closeMenu: function() {
Theme.$.header.hasClass("active") && (Theme.$.header.removeClass("active"), Theme.$.body.removeClass("mobile-menu-active")), Theme.$.categoryList.removeClass("visible"), Theme.$.categoryList.height(0)
},
collapseMenu: function() {
window.Theme.isMobileView() && Theme.$.header.addClass("collapsed")
},
collapseHeaderItems: function() {
var e = Theme.$.logo.outerWidth(),
t = Theme.$.headerContainer.outerWidth(),
o = $(window).width(),
i = e + t + 50;
"Top" == Theme.themeData.theme.menu_position ? i > o ? Theme.$.header.addClass("collapsed") : Theme.$.header.removeClass("collapsed") : t > o ? Theme.$.header.addClass("collapsed") : Theme.$.header.removeClass("collapsed")
},
setCategoryHeights: function(e) {
var t = 0;
$(e).children().each(function() {
t += $(this).outerHeight(!0)
}), $(e).height(t)
},
toggleCategoryList: function(e) {
Theme.$.categoryList.removeClass("visible"), Theme.$.categoryList.height(0), e.hasClass("visible") ? e.removeClass("visible") : (Theme.Menu.setCategoryHeights(e), e.addClass("visible"))
},
toggleCategories: function() {
window.Theme.isMobileView() ? Theme.$.category.on("click", function() {
Theme.Menu.toggleCategoryList($(this).find("ul"))
}) : Theme.$.category.hover(function() {
Theme.Menu.toggleCategoryList($(this).find("ul"))
}, function() {
Theme.$.categoryList.removeClass("visible"), Theme.$.categoryList.height(0)
})
},
offsetHeaderHeight: function() {
var e = Theme.$.header.outerHeight(!1);
window.Theme.isMobileView() ? $(".container").css("margin-top", 0) : $(".container").css("margin-top", e), $(".mobile-header-items-container").css("padding-top", e)
},
wrapLogoLetters: function() {
"text" === Theme.themeData.theme.logo_type_toggle && $(".logo.before-wrap").each(function() {
var e = $(this).find("a"),
t = e.html();
t = t.trim().split("");
for (var o = "", i = 0, a = t.length; i < a; i++) " " === t[i] ? o += "<span>&ensp;</span>" : o += "<span>" + t[i] + "</span>";
e.html(o), $(this).removeClass("before-wrap")
})
},
menuPosition: function() {
if (window.Theme.isMobileView()) Theme.$.categoryList.css("top", 0), Theme.$.categoryList.css("bottom", 0);
else {
var e = Theme.$.menu.find("ul").height(),
t = Theme.$.header.height();
"Bottom" == Theme.themeData.theme.menu_position ? (Theme.$.categoryList.css("bottom", e), Theme.$.container.css("padding-bottom", t)) : (Theme.$.categoryList.css("top", e), Theme.$.container.css("padding-bottom", 100))
}
}
}, window.Theme.Gallery = window.Theme.Gallery || {
init: function() {
this.bindEvents(), this.respVideo(), this.fancybox(), this.progressIndicator(), this.alignPairs(), this.galleryOverlay(), this.prepAssets(), this.scrollingHashChange(), this.adjustForCaptions()
},
bindEvents: function() {
$(window).on("resize", function() {
window.Theme.Gallery.adjustForCaptions(), lazySizes.autoSizer.checkElems()
})
},
respVideo: function() {
reframe("iframe")
},
fancybox: function() {
$("[data-fancybox]").fancybox({
baseClass: "boilerplate-slideshow",
animationDuration: 180,
transitionDuration: 180,
toolbar: !1
})
},
prepAssets: function() {
if ("Two" == Theme.themeData.theme.gallery_columns)
for (var e = $(".assets-grid > .asset"), t = 0; t < e.length; t += 2) {
var o = t / 2 + 1;
e.slice(t, t + 2).wrapAll("<div class='section' id=" + o + "></div>")
} else $(".assets-grid > .asset").addClass("section")
},
adjustForCaptions: function() {
window.Theme.isMobileView() || "Two" != Theme.themeData.theme.gallery_columns ? window.Theme.isMobileView() && $(".caption").each(function() {
$(this).removeClass("overlay-caption"), $(this).parent().find(".caption-icon").removeClass("visible"), $(this).siblings(".asset-wrap").css("margin-top", 0), $(this).siblings(".video-container").css("margin-top", 0)
}) : ($(".caption").each(function() {
if (!$(this).hasClass("overlay-caption")) {
var e = $(this).outerHeight(!1);
e > .5 * $(".section").outerHeight(!0) ? ($(this).addClass("overlay-caption"), $(this).parent().find(".caption-icon").addClass("visible")) : ($(this).siblings(".asset-wrap").css("margin-top", e), $(this).siblings(".video-container").css("margin-top", e))
}
}), $(".caption-icon").on("click", function() {
$(this).parent().find(".overlay-caption").toggleClass("visible"), $(this).toggleClass("active")
}))
},
progressIndicator: function() {
Theme.$.body.on("scroll", function() {
var e = Theme.$.assetsGrid.offset().top - $(window).scrollTop(),
t = Theme.$.container.height(),
o = $(window).height(),
i = e / (t - o),
a = Math.round(100 * i);
if (Theme.$.html.hasClass("safari")) {
if (231 * a / 100 * -1 <= 0) var n = 0;
else var n = 231 * a / 100 * -1;
n > 231 && (n = 231)
} else {
var n = 231 * a / 100;
n < -231 && (n = -231)
}
$(".progress-indicator .stroke").css("stroke-dashoffset", n)
})
},
alignPairs: function() {
"Two" == Theme.themeData.theme.gallery_columns && ($(".gallery .asset:odd").addClass("align-left"), $(".gallery .asset:even").addClass("align-right"))
},
galleryOverlay: function() {
window.Theme.isMobileView() || $(".assets-grid .image img").on("click", function(e) {
var t, o = $(this).parents(".asset").first();
t = o.hasClass("is-portrait") ? "portrait" : "landscape", Theme.Gallery.showZoomedImage(t, e), Theme.$.body.css("overflow", "hidden")
}), $("body").on("click", ".gallery-zoom-container", function() {
Theme.Gallery.hideZoomedImage(), Theme.$.body.css("overflow", "auto")
}), $(document).keyup(function(e) {
27 == e.keyCode && (Theme.Gallery.hideZoomedImage(), Theme.$.body.css("overflow", "auto"))
})
},
showZoomedImage: function(e, t) {
var o = window.innerWidth,
i = window.innerHeight,
a = $(".gallery-zoom-container");
$(".gallery-zoomed-image").remove();
var n = $(t.target);
setTimeout(function() {
var t = Math.min(parseInt(n.data("original-width"), 10), 0.8 * o),
s = Math.min(parseInt(n.data("original-height"), 10), 0.8 * i);
n.clone().addClass("gallery-zoomed-image is-" + e).css({
height: "portrait" === e ? s : "auto",
width: "landscape" === e ? t : "auto"
}).appendTo(a), "portrait" === e ? s < i ? $(".gallery-zoomed-image").addClass("is-centered") : s > i && $(".gallery-zoomed-image").width() < o && $(".gallery-zoomed-image").addClass("is-h-centered") : t < o ? $(".gallery-zoomed-image").addClass("is-centered") : t > o && $(".gallery-zoomed-image").height() < i && $(".gallery-zoomed-image").addClass("is-v-centered"), setTimeout(function() {
var e = (a[0].scrollHeight - window.innerHeight) / 2,
t = (a[0].scrollWidth - window.innerWidth) / 2;
a.scrollTop(e).scrollLeft(t), a.addClass("active"), lazySizes.autoSizer.checkElems()
}, 0)
}, 0)
},
hideZoomedImage: function() {
$(".gallery-zoom-container").removeClass("active")
},
setHash: function(e) {
var t = "#" + e;
window.location.hash != t && (history.replaceState ? history.replaceState(null, null, t) : location.hash = t)
},
clearHash: function() {
location.hash = ""
},
scrollingHashChange: function() {
$("body").on("scroll", function() {
$(".section").each(function() {
$(this).offset().top < window.pageYOffset + 10 && $(this).offset().top + $(this).height() > window.pageYOffset + 10 && Theme.Gallery.setHash($(this).attr("id"))
})
})
}
}, window.Theme.Listing = window.Theme.Listing || {
init: function() {
this.addEmptyBlocks(), this.layoutMasonry()
},
layoutMasonry: function() {
Theme.masonryInitialized ? Theme.$.masonry.masonry("reloadItems") : Theme.$.masonry.masonry({
itemSelector: ".masonry-asset",
percentPosition: !0,
transitionDuration: 0
})
},
addEmptyBlocks: function() {
"Masonry" == Theme.themeData.theme.collection_thumbnail_style && "Random" == Theme.themeData.theme.collection_masonry_style && $(".asset:nth-child(2n1)").each(function() {
$("<div class='masonry-asset empty-asset'></div>").insertAfter($(this))
})
}
}, window.Theme.Content = window.Theme.Content || {
init: function() {}
}, $(document).on("lazybeforesizes", function(e) {
$("body").hasClass("listing") && $(e.target).load(function() {
Theme.$.masonry.masonry("layout")
})
}), $(document).on("DOMContentLoaded", function() {
Theme.init()
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment