github
/
hexo-theme-icarus
mirror of https://github.com/ppoffice/hexo-theme-icarus
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

chore(plugin): clean back to top code and name major columns

pull/351/head
ppoffice 2018-10-30 23:57:31 -04:00
parent a096717a0b
commit 37c0d69f08
6 changed files with 148 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
layout/common/widget.ejs
View File

@ -14,7 +14,10 @@
}
return '';
} %>
<div class="column <%= position === 'left' ? 'has-order-1' : 'has-order-3' %> <%= side_column_class() %> <%= visibility_class() %>">
<% function order_class() {
return position === 'left' ? 'has-order-1' : 'has-order-3';
} %>
<div class="column <%= side_column_class() %> <%= visibility_class() %> <%= order_class() %> column-<%= position %>">
<% get_widgets(position).forEach(widget => {%>
<%- partial('widget/' + widget.type, { widget, post: page }) %>
<% }) %>

4
layout/layout.ejs
View File

@ -18,8 +18,8 @@
} %>
<section class="section">
<div class="container">
<div class="columns main">
<div class="column <%= main_column_class() %> has-order-2"><%- body %></div>
<div class="columns">
<div class="column <%= main_column_class() %> has-order-2 column-main"><%- body %></div>
<%- partial('common/widget', { position: 'left' }) %>
<%- partial('common/widget', { position: 'right' }) %>
</div>

6
layout/plugin/animejs.ejs
View File

@ -14,9 +14,9 @@
$(document).ready(function () {
$('body').css('opacity', 1);
if (!isIE()) {
['.main > .column:first-child .card',
'.main > .column:nth-child(2) .card',
'.main > .column:last-child .card'].map(function(target) {
['.column-main > .card',
'.column-left > .card',
'.column-right > .card'].map(function(target) {
anime({
targets: target,
scale: [0.8, 1],

79
layout/plugin/back-to-top.ejs
View File

@ -1,17 +1,16 @@
<% if (plugin !== false) { %>
<% if (!head) { %>
<a id="back-to-top" class="card has-text-centered" title="<%= __('plugin.backtotop') %>" href="javascript:;">
<a id="back-to-top" title="<%= __('plugin.backtotop') %>" href="javascript:;">
<i class="material-icons">keyboard_arrow_up</i>
</a>
<style>
#back-to-top {
position: fixed;
bottom: 20px;
width: 64px;
padding: 8px 0;
transition: 0.4s ease opacity, 0.4s ease width, 0.4s ease transform, 0.4s ease border-radius;
opacity: 0;
font-size: 0;
outline: none;
transform: translateY(120px);
}
#back-to-top.fade-in {
@ -20,79 +19,7 @@
#back-to-top.rise-up {
transform: translateY(0);
}
@media screen and (max-width: 1087px) {
#back-to-top {
right: 1rem;
}
}
@media screen and (max-width: 768px) {
#back-to-top {
right: .75rem;
}
}
</style>
<script>
$(document).ready(function () {
var $button = $('#back-to-top');
var $footer = $('footer.footer');
var $mainColumn = $('.main .has-order-2');
var $leftColumn = $('.main .has-order-1');
var $rightColumn = $('.main .has-order-3');
var lastScrollTop = 0;
function update() {
// desktop mode or tablet mode with only right sidebar enabled
if (window.innerWidth > 1077 || (window.innerWidth > 768 && $leftColumn.length === 0 && $rightColumn.length === 1)) {
var padding = ($mainColumn.outerWidth() - $mainColumn.width()) / 2;
var left = $mainColumn.offset().left + $mainColumn.outerWidth() + padding;
left = Math.min(left, document.documentElement.clientWidth - $button.outerWidth(true) - padding);
$button.css('left', left);
var minScrollTop = 0;
if ($rightColumn.length > 0) {
minScrollTop = Math.max.apply(null, $rightColumn.find('.widget').map(function () {
return $(this).offset().top + $(this).outerHeight(true);
}));
}
if ($(window).scrollTop() + $(window).height() >= minScrollTop + padding + $button.outerHeight(true)) {
$button.addClass('fade-in');
} else {
$button.removeClass('fade-in');
}
if ($footer.offset().top - $(window).scrollTop() + $button.outerHeight(true) / 2 + 20 < document.documentElement.clientHeight) {
$button.css('bottom', $(window).scrollTop() + document.documentElement.clientHeight - $footer.offset().top - $button.outerHeight(true) / 2);
$button.css('width', '40px');
$button.css('border-radius', '50%');
} else {
$button.css('width', '64px');
$button.css('bottom', '20px');
$button.css('border-radius', '4px');
}
$button.addClass('rise-up');
} else {
// mobile and tablet mode
$button.css('width', '64px');
$button.css('bottom', '20px');
$button.css('border-radius', '4px');
$button.addClass('fade-in');
$button.css('left', '');
var scrollTop = $(window).scrollTop();
if (scrollTop > lastScrollTop || scrollTop === 0) {
$('#back-to-top').removeClass('rise-up');
} else {
$('#back-to-top').addClass('rise-up');
}
lastScrollTop = scrollTop;
}
}
update();
$(window).resize(update);
$(window).scroll(update);
$('#back-to-top').on('click', function () {
$('body, html').animate({ scrollTop: 0 }, 400);
});
});
</script>
<%- js('js/back-to-top') %>
<% } %>
<% } %>

2
layout/widget/links.ejs
View File

@ -9,7 +9,7 @@
<ul class="menu-list">
<% for (let i in links) { %>
<li>
<a class="level" href="<%- links[i] %>" target="_blank">
<a class="level is-mobile" href="<%- links[i] %>" target="_blank">
<span class="level-left">
<span class="level-item"><%= i %></span>
</span>

134
source/js/back-to-top.js Normal file
View File

@ -0,0 +1,134 @@
$(document).ready(function () {
var $button = $('#back-to-top');
var $footer = $('footer.footer');
var $mainColumn = $('.column-main');
var $leftSidebar = $('.column-left');
var $rightSidebar = $('.column-right');
var lastScrollTop = 0;
var rightMargin = 20;
var bottomMargin = 20;
var state = {
base: {
classname: 'card has-text-centered',
left: '',
width: 64,
bottom: bottomMargin,
'border-radius': 4
}
};
state['desktop-hidden'] = Object.assign({}, state.base, {
classname: state.base.classname + ' rise-up',
});
state['desktop-visible'] = Object.assign({}, state['desktop-hidden'], {
classname: state['desktop-hidden'].classname + ' fade-in',
});
state['desktop-dock'] = Object.assign({}, state['desktop-visible'], {
classname: state['desktop-visible'].classname + ' fade-in',
width: 40,
'border-radius': '50%'
});
state['mobile-hidden'] = Object.assign({}, state.base, {
classname: state.base.classname + ' fade-in',
right: rightMargin
});
state['mobile-visible'] = Object.assign({}, state['mobile-hidden'], {
classname: state['mobile-hidden'].classname + ' rise-up',
});
function applyState(state) {
$button.attr('class', state.classname);
for (let prop in state) {
if (prop === 'classname') {
continue;
}
$button.css(prop, state[prop]);
}
}
function isDesktop() {
return window.innerWidth >= 1078;
}
function isTablet() {
return window.innerWidth >= 768 && !isDesktop();
}
function isScrollUp() {
return $(window).scrollTop() < lastScrollTop && $(window).scrollTop() > 0;
}
function hasLeftSidebar() {
return $leftSidebar.length > 0;
}
function hasRightSidebar() {
return $rightSidebar.length > 0;
}
function getRightSidebarBottom() {
if (!hasRightSidebar()) {
return 0;
}
return Math.max.apply(null, $rightSidebar.find('.widget').map(function () {
return $(this).offset().top + $(this).outerHeight(true);
}));
}
function getScrollBottom() {
return $(window).scrollTop() + $(window).height();
}
function getButtonWidth() {
return $button.outerWidth(true);
}
function getButtonHeight() {
return $button.outerHeight(true);
}
function updateScrollTop() {
lastScrollTop = $(window).scrollTop();
}
function update() {
// desktop mode or tablet mode with only right sidebar enabled
if (isDesktop() || (isTablet() && !hasLeftSidebar() && hasRightSidebar())) {
var nextState;
var padding = ($mainColumn.outerWidth() - $mainColumn.width()) / 2;
var maxLeft = $(window).width() - getButtonWidth() - rightMargin;
var maxBottom = $footer.offset().top + getButtonHeight() / 2 + bottomMargin;
if (getScrollBottom() < getRightSidebarBottom() + padding + getButtonHeight()) {
nextState = state['desktop-hidden'];
} else if (getScrollBottom() < maxBottom) {
nextState = state['desktop-visible'];
} else {
nextState = Object.assign({}, state['desktop-dock'], {
bottom: getScrollBottom() - maxBottom + bottomMargin
});
}
var left = $mainColumn.offset().left + $mainColumn.outerWidth() + padding;
nextState = Object.assign({}, nextState, {
left: Math.min(left, maxLeft)
});
applyState(nextState);
} else {
// mobile and tablet mode
if (!isScrollUp()) {
applyState(state['mobile-hidden']);
} else {
applyState(state['mobile-visible']);
}
updateScrollTop();
}
}
update();
$(window).resize(update);
$(window).scroll(update);
$('#back-to-top').on('click', function () {
$('body, html').animate({ scrollTop: 0 }, 400);
});
});