chore(plugin): clean back to top code and name major columns
This commit is contained in:
parent
a096717a0b
commit
37c0d69f08
|
@ -14,7 +14,10 @@
|
||||||
}
|
}
|
||||||
return '';
|
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 => {%>
|
<% get_widgets(position).forEach(widget => {%>
|
||||||
<%- partial('widget/' + widget.type, { widget, post: page }) %>
|
<%- partial('widget/' + widget.type, { widget, post: page }) %>
|
||||||
<% }) %>
|
<% }) %>
|
||||||
|
|
|
@ -18,8 +18,8 @@
|
||||||
} %>
|
} %>
|
||||||
<section class="section">
|
<section class="section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="columns main">
|
<div class="columns">
|
||||||
<div class="column <%= main_column_class() %> has-order-2"><%- body %></div>
|
<div class="column <%= main_column_class() %> has-order-2 column-main"><%- body %></div>
|
||||||
<%- partial('common/widget', { position: 'left' }) %>
|
<%- partial('common/widget', { position: 'left' }) %>
|
||||||
<%- partial('common/widget', { position: 'right' }) %>
|
<%- partial('common/widget', { position: 'right' }) %>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -14,9 +14,9 @@
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
$('body').css('opacity', 1);
|
$('body').css('opacity', 1);
|
||||||
if (!isIE()) {
|
if (!isIE()) {
|
||||||
['.main > .column:first-child .card',
|
['.column-main > .card',
|
||||||
'.main > .column:nth-child(2) .card',
|
'.column-left > .card',
|
||||||
'.main > .column:last-child .card'].map(function(target) {
|
'.column-right > .card'].map(function(target) {
|
||||||
anime({
|
anime({
|
||||||
targets: target,
|
targets: target,
|
||||||
scale: [0.8, 1],
|
scale: [0.8, 1],
|
||||||
|
@ -28,7 +28,7 @@
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|
||||||
anime({
|
anime({
|
||||||
targets: '.navbar-main',
|
targets: '.navbar-main',
|
||||||
translateY: [-100, 0],
|
translateY: [-100, 0],
|
||||||
|
|
|
@ -1,17 +1,16 @@
|
||||||
<% if (plugin !== false) { %>
|
<% if (plugin !== false) { %>
|
||||||
<% if (!head) { %>
|
<% 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>
|
<i class="material-icons">keyboard_arrow_up</i>
|
||||||
</a>
|
</a>
|
||||||
<style>
|
<style>
|
||||||
#back-to-top {
|
#back-to-top {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 20px;
|
|
||||||
width: 64px;
|
|
||||||
padding: 8px 0;
|
padding: 8px 0;
|
||||||
transition: 0.4s ease opacity, 0.4s ease width, 0.4s ease transform, 0.4s ease border-radius;
|
transition: 0.4s ease opacity, 0.4s ease width, 0.4s ease transform, 0.4s ease border-radius;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
|
outline: none;
|
||||||
transform: translateY(120px);
|
transform: translateY(120px);
|
||||||
}
|
}
|
||||||
#back-to-top.fade-in {
|
#back-to-top.fade-in {
|
||||||
|
@ -20,79 +19,7 @@
|
||||||
#back-to-top.rise-up {
|
#back-to-top.rise-up {
|
||||||
transform: translateY(0);
|
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>
|
</style>
|
||||||
<script>
|
<%- js('js/back-to-top') %>
|
||||||
$(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>
|
|
||||||
<% } %>
|
<% } %>
|
||||||
<% } %>
|
<% } %>
|
|
@ -9,7 +9,7 @@
|
||||||
<ul class="menu-list">
|
<ul class="menu-list">
|
||||||
<% for (let i in links) { %>
|
<% for (let i in links) { %>
|
||||||
<li>
|
<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-left">
|
||||||
<span class="level-item"><%= i %></span>
|
<span class="level-item"><%= i %></span>
|
||||||
</span>
|
</span>
|
||||||
|
|
|
@ -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);
|
||||||
|
});
|
||||||
|
});
|
Loading…
Reference in New Issue