chore(plugin): clean back to top code and name major columns
This commit is contained in:
ppoffice
parent
a096717a0b
commit
37c0d69f08
|
|
@ -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 }) %>
|
||||
<% }) %>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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],
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
}
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
anime({
|
||||
targets: '.navbar-main',
|
||||
translateY: [-100, 0],
|
||||
|
|
|
|||
|
|
@ -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') %>
|
||||
<% } %>
|
||||
<% } %>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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