Commit abdadf67 authored by Jamie Carl's avatar Jamie Carl

Merge remote-tracking branch 'origin/feature/sectionnav'

parents 719f1148 30a3f004
Pipeline #1562 passed with stage
in 0 seconds
......@@ -290,6 +290,14 @@ endif; ?>
<?=$this->post();?>
<?php if(false)://$this->attribute('show_section_nav')): ?>
<script>
$(document).ready(function () {
show_section_nav();
});
</script>
<?php endif; ?>
</body>
</html>
......
......@@ -196,8 +196,7 @@ div.page-container div.fullscreen .main-content .section {
position: absolute;
width: 100%;
height: 100%;
display: table;
overflow: hidden;
overflow-y: auto;
}
div.page-container div.fullscreen .main-content .section > .section-helper {
......@@ -209,21 +208,28 @@ div.page-container div.fullscreen .main-content .section > .section-helper {
div.page-container div.section-nav {
position: fixed;
right: 0;
right: -28px;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.5);
border-radius: 5px 0 0 5px;
padding: 0 10px;
transition: right 1s;
transition-delay: 250ms;
}
div.page-container div.section-nav.show {
right: 0;
}
div.page-container div.section-nav .section-hnd {
width: 12px;
height: 12px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #fff;
margin: 20px;
margin: 15px 0;
cursor: pointer;
opacity: .1;
opacity: .2;
}
div.page-container div.section-nav .section-hnd:hover {
......@@ -236,7 +242,7 @@ div.page-container div.section-nav .section-hnd.active {
div.page-container div.fullscreen .main-content .section .nav-section-next {
margin: auto;
position: absolute;
position: fixed;
bottom: 0;
left: 0;
right: 0;
......
var sections;
function show_section_nav() {
sections = $('#page-container').children().children('.main-content').children('div.section');
if (sections.length > 1) {
var sNav = $('<div class="section-nav">');
sections.each(function (index) {
var hnd = $('<div class="section-hnd">').data('section', this);
if (index == 0)
hnd.addClass('active');
sNav.append(hnd);
});
sNav.children('.section-hnd').click(function () {
var active = $(this).parent().children('.active');
var top = 0;
if (!$(this).is(':first-child'))
top = $($(this).data('section')).offset().top - $('#top-bar').height();
$('html,body').animate({scrollTop: top});
});
$('#page-container').append(sNav);
setTimeout(function(){
sNav.addClass('show');
}, 500);
}
$(window).on('scroll', function (event) {
if (sections) {
var top = $(window).scrollTop() + $('#top-bar').position().top + $('#top-bar').height();
//console.log(sections.offset().top + sections.height());
sections.each(function(index){
if(top > $(this).offset().top && top < ($(this).offset().top + $(this).height())){
var hnd = $(sNav.children()[index]);
if (!hnd.hasClass('active')) {
sNav.children().removeClass('active');
hnd.addClass('active');
}
}
});
}
});
}
function show_section_nav_old() {
var sections = $('#page-container').children().children('.main-content').children('div.section');
if (sections.length > 1) {
var sNav = $('<div class="section-nav">');
var move = function (active, section) {
var cSec = $($(section).addClass('active').data('section'));
var aSec = $($(active).removeClass('active').data('section')).removeClass('active');
if (sections.index(aSec) < sections.index(cSec)) {
cSec.css({'top': window.innerHeight});
aSec.animate({'top': -window.innerHeight});
} else {
cSec.css({'top': -window.innerHeight});
aSec.animate({'top': window.innerHeight});
}
cSec.animate({'top': 0}, function () {
$(this).addClass('active');
checkVisible();
});
};
var navNext = function () {
var active = sNav.children('.active');
var next = active.next();
if (next.length == 0)
next = active.parent().children().first();
move(active, next);
};
var navPrev = function () {
var active = sNav.children('.active');
var prev = active.prev();
if (prev.length == 0)
prev = active.parent().children().last();
move(active, prev);
};
sections.filter(':first-child').addClass('active');
$(window).on('resize', function () {
sections.filter(':not(.active)').css('top', window.innerHeight);
}).resize();
$('#page-container').append(sNav);
sections.each(function (index, item) {
var hnd = $('<div class="section-hnd">').data('section', this);
if (index == 0)
hnd.addClass('active');
sNav.append(hnd);
$(item).append($('<div class="nav-section-next fa fa-angle-down">').click(function () {
navNext();
}));
});
sNav.children('.section-hnd').click(function () {
var active = $(this).parent().children('.active');
move(active, this);
});
}
}
$(document).ready(function () {
$('pre.code,code').each(function (i, block) {
block.innerText = block.innerText.trim();
......@@ -59,54 +153,4 @@ $(document).ready(function () {
if (tb.height() != height)
tb.css('height', height + 'px');
});
var sections = $('#page-container').children('.fullscreen').children('.main-content').children('div.section');
if (sections.length > 1) {
var sNav = $('<div class="section-nav">');
var move = function (active, section) {
var cSec = $($(section).addClass('active').data('section'));
var aSec = $($(active).removeClass('active').data('section'));
if (sections.index(aSec) < sections.index(cSec)) {
cSec.css({'top': window.innerHeight});
aSec.animate({'top': -window.innerHeight});
} else {
cSec.css({'top': -window.innerHeight});
aSec.animate({'top': window.innerHeight});
}
cSec.animate({'top': 0}, function () {
checkVisible();
});
};
var navNext = function () {
var active = sNav.children('.active');
var next = active.next();
if (next.length == 0)
next = active.parent().children().first();
move(active, next);
};
var navPrev = function () {
var active = sNav.children('.active');
var prev = active.prev();
if (prev.length == 0)
prev = active.parent().children().last();
move(active, prev);
};
sections.filter(':first-child').addClass('active');
$(window).on('resize', function () {
sections.filter(':not(.active)').css('top', window.innerHeight);
}).resize();
$('#page-container').append(sNav);
sections.each(function (index, item) {
var hnd = $('<div class="section-hnd">').data('section', this);
if (index == 0)
hnd.addClass('active');
sNav.append(hnd);
$(item).append($('<div class="nav-section-next fa fa-angle-down">').click(function () {
navNext();
}));
});
sNav.children('.section-hnd').click(function () {
var active = $(this).parent().children('.active');
move(active, this);
});
}
});
\ No newline at end of file
......@@ -15,6 +15,9 @@
<file type="article">article.phtml</file>
<file type="gallery">gallery.phtml</file>
</files>
<category>
<layout>normal</layout>
</category>
<pagetext>
<templates>
<template name="normal">Normal</template>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment