Skip to content

Commit

Permalink
Replace all remaining jQuery code with vanilla JavaScript
Browse files Browse the repository at this point in the history
  • Loading branch information
@mgeier
mgeier committed Jul 16, 2022
1 parent 085cdac commit a2c9af6
Show file tree
Hide file tree
Showing 2 changed files with 121 additions and 118 deletions.
122 changes: 61 additions & 61 deletions src/insipid_sphinx_theme/insipid/static/insipid-sidebar.js_t
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
(() => { function dom_loaded() {
(dom_loaded => {
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', dom_loaded);
} else {
dom_loaded();
}
})(() => {
'use strict';

const sidebar = document.querySelector('.sphinxsidebar');
const sidebar_tabbable = sidebar.querySelectorAll('input, textarea, select, button, a[href], area[href], iframe');
const sidebar_button = document.getElementById('sidebar-button');
Expand Down Expand Up @@ -86,11 +93,11 @@
}
});

var touchstart;
let touchstart;

document.addEventListener('touchstart', event => {
if (event.touches.length > 1) { return; }
var touch = event.touches[0];
const touch = event.touches[0];
{%- if theme_rightsidebar|tobool %}
if (touch.clientX >= window.innerWidth - sidebar.offsetWidth) {
{%- else %}
Expand All @@ -110,12 +117,12 @@
touchstart = null;
return;
}
var touch = event.changedTouches[0];
var x = touch.clientX;
var y = touch.clientY;
var x_diff = x - touchstart.x;
var y_diff = y - touchstart.y;
var t_diff = Date.now() - touchstart.t;
const touch = event.changedTouches[0];
const x = touch.clientX;
const y = touch.clientY;
const x_diff = x - touchstart.x;
const y_diff = y - touchstart.y;
const t_diff = Date.now() - touchstart.t;
if (t_diff < 400 && Math.abs(x_diff) > Math.max(100, Math.abs(y_diff))) {
{%- if theme_rightsidebar|tobool %}
if (x_diff < 0) {
Expand All @@ -134,28 +141,29 @@
touchstart = null;
});

$('.sidebar-resize-handle').on('mousedown', event => {
$(window).on('mousemove', resize_mouse);
$(window).on('mouseup', stop_resize_mouse);
document.body.classList.add('sidebar-resizing');
return false; // Prevent unwanted text selection while resizing
});

$('.sidebar-resize-handle').on('touchstart', event => {
event = event.originalEvent;
if (event.touches.length > 1) { return; }
$(window).on('touchmove', resize_touch);
$(window).on('touchend', stop_resize_touch);
document.body.classList.add('sidebar-resizing');
return false; // Prevent unwanted text selection while resizing
const sidebar_resize_handles = document.querySelectorAll('.sidebar-resize-handle');
sidebar_resize_handles.forEach(el => {
el.addEventListener('mousedown', event => {
window.addEventListener('mousemove', resize_mouse);
window.addEventListener('mouseup', stop_resize_mouse);
document.body.classList.add('sidebar-resizing');
event.preventDefault(); // Prevent unwanted text selection while resizing
});
el.addEventListener('touchstart', event => {
if (event.touches.length > 1) { return; }
window.addEventListener('touchmove', resize_touch);
window.addEventListener('touchend', stop_resize_touch);
document.body.classList.add('sidebar-resizing');
event.preventDefault(); // Prevent unwanted text selection while resizing
});
});

var ignore_resize = false;
let ignore_resize = false;

function resize_base(event) {
if (ignore_resize) { return; }
var window_width = window.innerWidth;
var width = {% if theme_rightsidebar|tobool -%}
const window_width = window.innerWidth;
const width = {% if theme_rightsidebar|tobool -%}
window_width - {% endif %}event.clientX;
if (width > window_width) {
root.css('--sidebar-width', window_width + 'px');
Expand All @@ -168,11 +176,10 @@
}

function resize_mouse(event) {
resize_base(event.originalEvent);
resize_base(event);
}

function resize_touch(event) {
event = event.originalEvent;
if (event.touches.length > 1) { return; }
resize_base(event.touches[0]);
}
Expand All @@ -187,22 +194,21 @@
}

function stop_resize_mouse(event) {
$(window).off('mousemove', resize_mouse);
$(window).off('mouseup', stop_resize_mouse);
window.removeEventListener('mousemove', resize_mouse);
window.removeEventListener('mouseup', stop_resize_mouse);
stop_resize_base();
}

function stop_resize_touch(event) {
event = event.originalEvent;
if (event.touches.length > 0 || event.changedTouches.length > 1) {
return;
}
$(window).off('touchmove', resize_touch);
$(window).off('touchend', stop_resize_touch);
window.removeEventListener('touchmove', resize_touch);
window.removeEventListener('touchend', stop_resize_touch);
stop_resize_base();
}

$(window).on('resize', () => {
window.addEventListener('resize', event => {
const window_width = window.innerWidth;
if (window_width < sidebar.offsetWidth) {
root.css('--sidebar-width', window_width + 'px');
Expand All @@ -227,7 +233,7 @@

{%- if READTHEDOCS|tobool %}
function setResizeObserver() {
var badge = document.querySelector('.rst-versions.rst-badge');
const badge = document.querySelector('.rst-versions.rst-badge');
if (badge === null) {
console.log('waiting for readthedocs.org badge');
window.requestAnimationFrame(setResizeObserver);
Expand All @@ -253,41 +259,35 @@
window.requestAnimationFrame(setResizeObserver);
{%- endif %}

var $current = $('.sphinxsidebar *:has(> a[href^="#"])');
{# Possible non-jQuery replacement:
const current = Array.from(document.querySelectorAll('.sphinxsidebar *')).filter(el => el.querySelector(':scope > a[href^="#"]'));
#}

$current.addClass('current-page');
if ($current.length) {
var top = $current.offset().top;
var height = $current.height();
const topbar_height = topbar.offsetHeight;
if (top < topbar_height || top + height > sidebar.offsetHeight) {
$current[0].scrollIntoView(true);
}
}

{%- if theme_sidebar_overlay_width != None %}
const small_screen = window.matchMedia('(max-width: {{ theme_sidebar_overlay_width|todim }})');

$current.on('click', '> a', () => {
if (small_screen.matches) {
hide();
}
})

if ($current.length === 1 && $current[0].childElementCount === 1 && small_screen.matches) {
if (current.length === 1 && current[0].childElementCount === 1 && small_screen.matches) {
hide();
}
{%- endif %}
}

if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', dom_loaded);
} else {
dom_loaded();
}})();
if (current.length) {
const top = current[0].getBoundingClientRect().top;
const bottom = current[current.length - 1].getBoundingClientRect().bottom;
if (top < topbar.offsetHeight || bottom > sidebar.offsetHeight) {
current[0].scrollIntoView(true);
}
}

current.forEach(el => {
el.classList.add('current-page');
{%- if theme_sidebar_overlay_width != None %}
el.querySelector(':scope > a').addEventListener('click', event => {
if (small_screen.matches) {
hide();
}
})
{%- endif %}
});
});

{#
vim:ft=javascript
Expand Down
117 changes: 60 additions & 57 deletions src/insipid_sphinx_theme/insipid/static/insipid.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,23 @@
$(document).ready(function () {
(dom_loaded => {
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', dom_loaded);
} else {
dom_loaded();
}
})(() => {
'use strict';

// make sure all scripts are re-executed when navigating to cached page
window.onunload = function () {};
window.onunload = () => {};

var $body = $(document.body);
var $topbar = $('#topbar');
var $topbar_placeholder = $('#topbar-placeholder');
const topbar = document.getElementById('topbar');
const topbar_placeholder = document.getElementById('topbar-placeholder');

// make large tables horizontally scrollable
document.querySelectorAll(
'table.docutils:not(.field-list,.footnote,.citation)'
).forEach(el => {
let wrapper = document.createElement('div');
const wrapper = document.createElement('div');
wrapper.classList.add('insipid-horizontally-scrollable');
el.parentNode.insertBefore(wrapper, el);
wrapper.appendChild(el);
Expand All @@ -22,111 +27,109 @@ $(document).ready(function () {

// auto-hide topbar
function scroll_callback(scroller) {
var ignore_scroll = true;
var initial;
var scroll_timeout;
return function () {
let ignore_scroll = true;
let initial;
let scroll_timeout;
return event => {
window.clearTimeout(scroll_timeout);
var current = scroller.scrollTop;
if (current <= $topbar.height() || (scroller.scrollHeight - current - scroller.clientHeight) < (scroller.clientHeight / 3)) {
$body.removeClass('topbar-folded');
const current = scroller.scrollTop;
if (current <= topbar.offsetHeight || (scroller.scrollHeight - current - scroller.clientHeight) < (scroller.clientHeight / 3)) {
document.body.classList.remove('topbar-folded');
ignore_scroll = true;
return;
} else if (ignore_scroll) {
// We ignore single jumps
ignore_scroll = false;
initial = current;
} else if (current - initial > threshold) {
$body.addClass('topbar-folded');
document.body.classList.add('topbar-folded');
ignore_scroll = true;
return;
} else if (current - initial < -threshold) {
$body.removeClass('topbar-folded');
document.body.classList.remove('topbar-folded');
ignore_scroll = true;
return;
}
scroll_timeout = setTimeout(function() {
ignore_scroll = true;
}, 66);
scroll_timeout = setTimeout(() => { ignore_scroll = true; }, 66);
};
}

$(document).on('scroll', scroll_callback(document.scrollingElement));
document.addEventListener('scroll', scroll_callback(document.scrollingElement));

var sidebar_scroller = document.querySelector('.sphinxsidebar');
const sidebar_scroller = document.querySelector('.sphinxsidebar');
if (sidebar_scroller) {
$(sidebar_scroller).on('scroll', scroll_callback(sidebar_scroller));
sidebar_scroller.addEventListener('scroll', scroll_callback(sidebar_scroller));
}

var div_body = document.querySelector('div.body');
var first_section = document.querySelector('div.body .section, div.body section');
const div_body = document.querySelector('div.body');
const first_section = document.querySelector('div.body .section, div.body section');
if (first_section) {
$(document).on('scroll', function () {
document.addEventListener('scroll', event => {
if (window.pageYOffset >= div_body.offsetTop + first_section.offsetTop) {
$body.addClass('scrolled');
document.body.classList.add('scrolled');
} else {
$body.removeClass('scrolled');
document.body.classList.remove('scrolled');
}
});
$(document).scroll();
document.dispatchEvent(new Event('scroll'));
}

$topbar.on('click', '.top', function () {
$(document.scrollingElement).animate({scrollTop: 0}, 400).focus();
topbar.querySelector('.top').addEventListener('click', event => {
window.scroll({ top: 0, behavior: 'smooth' });
event.preventDefault();
});

// show search
var $search_form = $('#search-form');
var $search_button = $('#search-button');
$search_button.on('click', function () {
const search_form = document.getElementById('search-form');
const search_button = document.getElementById('search-button');
search_button.addEventListener('click', event => {
try {
// https://readthedocs-sphinx-search.readthedocs.io/
showSearchModal();
return;
} catch(e) {}
if ($search_form.is(':hidden')) {
$search_form.show();
$search_button.attr('aria-expanded', 'true');
$search_form.find('input').focus();
$body.removeClass('topbar-folded');
if (window.getComputedStyle(search_form).display === 'none') {
search_form.style.display = 'flex';
search_button.setAttribute('aria-expanded', 'true');
search_form.querySelector('input').focus();
document.body.classList.remove('topbar-folded');
} else {
$search_form.hide();
$search_button.attr('aria-expanded', 'false');
$search_button.blur();
search_form.style.display = 'none';
search_button.setAttribute('aria-expanded', 'false');
search_button.blur();
}
});

const fullscreen_button = document.getElementById('fullscreen-button');
if (document.fullscreenEnabled) {
var $fullscreen_button = $('#fullscreen-button');
$fullscreen_button.on('click', function() {
fullscreen_button.addEventListener('click', event => {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
document.exitFullscreen();
}
$fullscreen_button.blur();
$topbar_placeholder.removeClass('fake-hover');
fullscreen_button.blur();
topbar_placeholder.classList.remove('fake-hover');
});
} else {
$('#fullscreen-button').remove();
fullscreen_button.remove();
}

$topbar_placeholder.on('mouseenter', function() {
$topbar_placeholder.addClass('fake-hover');
topbar_placeholder.addEventListener('mouseenter', event => {
topbar_placeholder.classList.add('fake-hover');
});

$topbar_placeholder.on('mouseleave', function() {
$topbar_placeholder.removeClass('fake-hover');
topbar_placeholder.addEventListener('mouseleave', event => {
topbar_placeholder.classList.remove('fake-hover');
});

$topbar_placeholder.on('touchend', function($event){
if ($event.originalEvent.changedTouches[0].clientY < $topbar.height()) {
$topbar_placeholder.addClass('fake-hover');
document.addEventListener('touchend', event => {
if (event.touches.length > 1) { return; }
const touch = event.touches[0];
if (touch.clientY < topbar.offsetHeight) {
topbar_placeholder.classList.add('fake-hover');
} else {
topbar_placeholder.classList.remove('fake-hover');
}
$event.stopPropagation();
});

$(window).on('touchmove touchend', function(){
$topbar_placeholder.removeClass('fake-hover');
});
});

0 comments on commit a2c9af6

Please sign in to comment.