hubzila6
This commit is contained in:
@@ -11,44 +11,21 @@ $(document).ready(function() {
|
||||
if($(window).width() < 992) {
|
||||
$('main').css('width', $(window).width() + $('aside').outerWidth() );
|
||||
} else {
|
||||
$('main').css('width', '100%' );
|
||||
$('main').css('width', '100%');
|
||||
}
|
||||
});
|
||||
}
|
||||
$('#css3-calc').remove(); // Remove the test element
|
||||
|
||||
if($(window).width() >= 992) {
|
||||
$('#left_aside_wrapper, #right_aside_wrapper').stick_in_parent({
|
||||
offset_top: parseInt($('aside').css('padding-top')),
|
||||
parent: 'main',
|
||||
spacer: '.aside_spacer'
|
||||
});
|
||||
}
|
||||
stickyScroll('.aside_spacer_left', '.aside_spacer_top_left', '.content', parseFloat(window.getComputedStyle(document.querySelector('#region_1')).getPropertyValue('padding-top')), 0);
|
||||
stickyScroll('.aside_spacer_right', '.aside_spacer_top_right', '.content', parseFloat(window.getComputedStyle(document.querySelector('#region_3')).getPropertyValue('padding-top')), 20);
|
||||
|
||||
$('#expand-aside').on('click', toggleAside);
|
||||
|
||||
$('section').on('click', function() {
|
||||
$('#expand-aside').on('click', function() {
|
||||
if($('main').hasClass('region_1-on')){
|
||||
toggleAside();
|
||||
toggleAside('left');
|
||||
}
|
||||
});
|
||||
|
||||
var left_aside_height = $('#left_aside_wrapper').height();
|
||||
|
||||
$('#left_aside_wrapper').on('click', function() {
|
||||
if(left_aside_height != $('#left_aside_wrapper').height()) {
|
||||
$(document.body).trigger("sticky_kit:recalc");
|
||||
left_aside_height = $('#left_aside_wrapper').height();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var right_aside_height = $('#right_aside_wrapper').height();
|
||||
|
||||
$('#right_aside_wrapper').on('click', function() {
|
||||
if(right_aside_height != $('#right_aside_wrapper').height()) {
|
||||
$(document.body).trigger("sticky_kit:recalc");
|
||||
right_aside_height = $('#right_aside_wrapper').height();
|
||||
else {
|
||||
toggleAside('right');
|
||||
}
|
||||
});
|
||||
|
||||
@@ -84,7 +61,7 @@ $(document).ready(function() {
|
||||
var doctitle = document.title;
|
||||
function checkNotify() {
|
||||
var notifyUpdateElem = document.getElementById('notify-update');
|
||||
if(notifyUpdateElem !== null) {
|
||||
if(notifyUpdateElem !== null) {
|
||||
if(notifyUpdateElem.innerHTML !== "")
|
||||
document.title = "(" + notifyUpdateElem.innerHTML + ") " + doctitle;
|
||||
else
|
||||
@@ -92,8 +69,103 @@ $(document).ready(function() {
|
||||
}
|
||||
}
|
||||
setInterval(function () {checkNotify();}, 10 * 1000);
|
||||
|
||||
var touch_start = null;
|
||||
var touch_max = window.innerWidth / 10;
|
||||
|
||||
window.addEventListener('touchstart', function(e) {
|
||||
if (e.touches.length === 1){
|
||||
//just one finger touched
|
||||
touch_start = e.touches.item(0).clientX;
|
||||
if (touch_start < touch_max) {
|
||||
$('html, body').css('overflow-y', 'hidden');
|
||||
}
|
||||
}
|
||||
else {
|
||||
//a second finger hit the screen, abort the touch
|
||||
touch_start = null;
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('touchend', function(e) {
|
||||
$('html, body').css('overflow-y', '');
|
||||
|
||||
let touch_offset = 30; //at least 30px are a swipe
|
||||
if (touch_start) {
|
||||
//the only finger that hit the screen left it
|
||||
let touch_end = e.changedTouches.item(0).clientX;
|
||||
|
||||
if (touch_end > (touch_start + touch_offset)) {
|
||||
//a left -> right swipe
|
||||
if (touch_start < touch_max) {
|
||||
toggleAside('right');
|
||||
}
|
||||
}
|
||||
if (touch_end < (touch_start - touch_offset)) {
|
||||
//a right -> left swipe
|
||||
//toggleAside('left');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('hz:hqControlsClickAction', function(e) {
|
||||
toggleAside('left');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
function setStyle(element, cssProperty) {
|
||||
for (var property in cssProperty){
|
||||
element.style[property] = cssProperty[property];
|
||||
}
|
||||
}
|
||||
|
||||
function stickyScroll(sticky, stickyTop, container, topOffset, bottomOffset) {
|
||||
var lastScrollTop = 0;
|
||||
var sticky = document.querySelector(sticky);
|
||||
var stickyHeight = sticky.getBoundingClientRect().height;
|
||||
var stickyTop = document.querySelector(stickyTop);
|
||||
var content = document.querySelector(container);
|
||||
var diff = window.innerHeight - stickyHeight;
|
||||
var h = 0;
|
||||
var lasth = 0;
|
||||
var st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
|
||||
var resizeObserver = new ResizeObserver(function(entries) {
|
||||
stickyHeight = sticky.getBoundingClientRect().height;
|
||||
st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
diff = window.innerHeight - stickyHeight;
|
||||
});
|
||||
|
||||
resizeObserver.observe(sticky);
|
||||
resizeObserver.observe(content);
|
||||
|
||||
window.addEventListener('scroll', function() {
|
||||
if(window.innerHeight > stickyHeight + topOffset) {
|
||||
setStyle(stickyTop, { height: 0 + 'px' });
|
||||
setStyle(sticky, { position: 'sticky', top: topOffset + 'px'});
|
||||
}
|
||||
else {
|
||||
st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
|
||||
if (st > lastScrollTop){
|
||||
// downscroll code
|
||||
setStyle(stickyTop, { height: lasth + 'px' });
|
||||
setStyle(sticky, { position: 'sticky', top: Math.round(diff) - bottomOffset + 'px', bottom: '' });
|
||||
} else {
|
||||
// upscroll code
|
||||
h = sticky.getBoundingClientRect().top - content.getBoundingClientRect().top - topOffset;
|
||||
if(Math.round(stickyTop.getBoundingClientRect().height) === lasth) {
|
||||
setStyle(stickyTop, { height: Math.round(h) + 'px' });
|
||||
}
|
||||
lasth = Math.round(h);
|
||||
setStyle(sticky, { position: 'sticky', top: '', bottom: Math.round(diff - topOffset) + 'px' });
|
||||
}
|
||||
lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
|
||||
}
|
||||
}, false);
|
||||
|
||||
}
|
||||
|
||||
function makeFullScreen(full) {
|
||||
if(typeof full=='undefined' || full == true) {
|
||||
$('main').addClass('fullscreen');
|
||||
@@ -104,26 +176,21 @@ function makeFullScreen(full) {
|
||||
$('main').removeClass('fullscreen');
|
||||
$('header, nav, aside, #fullscreen-btn').show();
|
||||
$('#inline-btn').hide();
|
||||
$(document.body).trigger("sticky_kit:recalc");
|
||||
}
|
||||
}
|
||||
|
||||
function toggleAside() {
|
||||
$('#expand-aside-icon').toggleClass('fa-arrow-circle-right').toggleClass('fa-arrow-circle-left');
|
||||
if($('main').hasClass('region_1-on')){
|
||||
$('html, body').css('overflow-x', '');
|
||||
$('main').removeClass('region_1-on')
|
||||
function toggleAside(swipe) {
|
||||
|
||||
if ($('main').hasClass('region_1-on') && swipe === 'left') {
|
||||
$('#expand-aside-icon').addClass('fa-arrow-circle-right').removeClass('fa-arrow-circle-left');
|
||||
$('html, body').css({ 'position': '', left: '' });
|
||||
$('main').removeClass('region_1-on');
|
||||
$('#overlay').remove();
|
||||
$('#left_aside_wrapper').trigger("sticky_kit:detach");
|
||||
}
|
||||
else {
|
||||
$('html, body').css('overflow-x', 'hidden');
|
||||
$('main').addClass('region_1-on')
|
||||
$('<div id="overlay"></div>').appendTo('section');
|
||||
$('#left_aside_wrapper').stick_in_parent({
|
||||
offset_top: $('nav').outerHeight(true) + 10,
|
||||
parent: '#region_1',
|
||||
spacer: '#left_aside_spacer'
|
||||
});
|
||||
if (!$('main').hasClass('region_1-on') && swipe === 'right') {
|
||||
$('#expand-aside-icon').removeClass('fa-arrow-circle-right').addClass('fa-arrow-circle-left');
|
||||
$('html, body').css({ 'position': 'sticky', 'left': '0px'});
|
||||
$('main').addClass('region_1-on');
|
||||
$('<div id="overlay"></div>').appendTo('body').one('click', function() { toggleAside('left'); });
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user