Skip to content

[POC] Remove jQuery dependency, use vanilla JS #4450

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
dkorpel wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

[POC] Remove jQuery dependency, use vanilla JS #4450

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ecae70a
Remove jQuery dependency, use vanilla JavaScript
dkorpel May 21, 2026
d5c7f51
Remove dead code in JS files
dkorpel May 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions book/dlang.org.ddoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,7 @@ COMMON_HEADERS_DLANG=
<link rel="stylesheet" href="$(STATIC css/codemirror.css)">
_=
COMMON_SCRIPTS =
$(SCRIPTLOAD https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js)
$(SCRIPT window.jQuery || document.write('\x3Cscript src="$(STATIC js/jquery-3.7.1.min.js)">\x3C/script>');$(EXTRA_JS))
$(SCRIPT $(EXTRA_JS))
$(SCRIPTLOAD $(STATIC js/dlang.js))
$(COMMON_SCRIPTS_DLANG)
_=
Expand Down
3 changes: 1 addition & 2 deletions dlang.org.ddoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,7 @@ COMMON_HEADERS_DLANG=
<link rel="stylesheet" href="$(STATIC css/codemirror.css)">
_=
COMMON_SCRIPTS =
$(SCRIPTLOAD https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js)
$(SCRIPT window.jQuery || document.write('\x3Cscript src="$(STATIC js/jquery-3.7.1.min.js)">\x3C/script>');$(EXTRA_JS))
$(SCRIPT $(EXTRA_JS))
$(SCRIPTLOAD $(STATIC js/dlang.js))
$(COMMON_SCRIPTS_DLANG)
_=
Expand Down
114 changes: 71 additions & 43 deletions js/ddox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,56 +1,77 @@
function ddoxReady(fn) {
if (document.readyState !== 'loading') fn();
else document.addEventListener('DOMContentLoaded', fn);
}

function setupDdox()
{
$(".tree-view").children(".package").click(toggleTree);
$(".tree-view.collapsed").children("ul").hide();
$("#symbolSearch").attr("tabindex", "1000");
document.querySelectorAll('.tree-view').forEach(function(tv) {
Array.prototype.filter.call(tv.children, function(c) { return c.classList.contains('package'); })
.forEach(function(pkg) { pkg.addEventListener('click', toggleTree); });
});
document.querySelectorAll('.tree-view.collapsed').forEach(function(tv) {
Array.prototype.filter.call(tv.children, function(c) { return c.tagName === 'UL'; })
.forEach(function(ul) { ul.style.display = 'none'; });
});
var sym = document.getElementById('symbolSearch');
if (sym) sym.setAttribute('tabindex', '1000');

updateSearchBox();
$('#sitesearch').change(updateSearchBox);
var siteSearch = document.getElementById('sitesearch');
if (siteSearch) siteSearch.addEventListener('change', updateSearchBox);
}

function updateSearchBox()
{
var ddox = $('#sitesearch').val() == "dlang.org/library";
$('#q').toggle(!ddox);
$('#symbolSearch').toggle(ddox);
var siteSearch = document.getElementById('sitesearch');
if (!siteSearch) return;
var ddox = siteSearch.value == "dlang.org/library";
var q = document.getElementById('q');
var sym = document.getElementById('symbolSearch');
if (q) q.style.display = ddox ? 'none' : '';
if (sym) sym.style.display = ddox ? '' : 'none';
}

function toggleTree()
{
node = $(this).parent();
node.toggleClass("collapsed");
if( node.hasClass("collapsed") ){
node.children("ul").hide();
var node = this.parentNode;
node.classList.toggle('collapsed');
var uls = Array.prototype.filter.call(node.children, function(c) { return c.tagName === 'UL'; });
if (node.classList.contains('collapsed')) {
uls.forEach(function(ul) { ul.style.display = 'none'; });
} else {
node.children("ul").show();
uls.forEach(function(ul) { ul.style.display = ''; });
}
return false;
}

var searchCounter = 0;
var lastSearchString = "";

function performSymbolSearch(maxlen)
{
if (maxlen === 'undefined') maxlen = 26;

var searchstring = $("#symbolSearch").val().toLowerCase();
var symInput = document.getElementById('symbolSearch');
if (!symInput) return;
var searchstring = symInput.value.toLowerCase();

if (searchstring == lastSearchString) return;
lastSearchString = searchstring;

var scnt = ++searchCounter;
$('#symbolSearchResults').hide();
$('#symbolSearchResults').empty();
var results_el = document.getElementById('symbolSearchResults');
if (results_el) {
results_el.style.display = 'none';
while (results_el.firstChild) results_el.removeChild(results_el.firstChild);
}

var terms = $.trim(searchstring).split(/\s+/);
var terms = searchstring.replace(/^\s+|\s+$/g, '').split(/\s+/);
if (terms.length == 0 || (terms.length == 1 && terms[0].length < 2)) return;

var results = [];
for (i in symbols) {
for (var i in symbols) {
var sym = symbols[i];
var all_match = true;
for (j in terms)
for (var j in terms)
if (sym.name.toLowerCase().indexOf(terms[j]) < 0) {
all_match = false;
break;
Expand All @@ -61,12 +82,10 @@ function performSymbolSearch(maxlen)
}

function compare(a, b) {
// prefer non-deprecated matches
var adep = a.attributes.indexOf("deprecated") >= 0;
var bdep = b.attributes.indexOf("deprecated") >= 0;
if (adep != bdep) return adep - bdep;

// normalize the names
var aname = a.name.toLowerCase();
var bname = b.name.toLowerCase();

Expand All @@ -76,38 +95,33 @@ function performSymbolSearch(maxlen)
var asname = anameparts[anameparts.length-1];
var bsname = bnameparts[bnameparts.length-1];

// prefer exact matches
var aexact = terms.indexOf(asname) >= 0;
var bexact = terms.indexOf(bsname) >= 0;
if (aexact != bexact) return bexact - aexact;

// prefer elements with less nesting
if (anameparts.length < bnameparts.length) return -1;
if (anameparts.length > bnameparts.length) return 1;

// prefer matches with a shorter name
if (asname.length < bsname.length) return -1;
if (asname.length > bsname.length) return 1;

// sort the rest alphabetically
if (aname < bname) return -1;
if (aname > bname) return 1;
return 0;
}

results.sort(compare);

for (i = 0; i < results.length && i < 100; i++) {
for (var i = 0; i < results.length && i < 100; i++) {
var sym = results[i];

var el = $(document.createElement("li"));
el.addClass(sym.kind);
for (j in sym.attributes)
el.addClass(sym.attributes[j]);
var el = document.createElement('li');
el.classList.add(sym.kind);
for (var j in sym.attributes)
el.classList.add(sym.attributes[j]);

var name = sym.name;

// compute a length limited representation of the full name
var nameparts = name.split(".");
var np = nameparts.length-1;
var shortname = "." + nameparts[np];
Expand All @@ -118,23 +132,37 @@ function performSymbolSearch(maxlen)
if (np > 0) shortname = ".." + shortname;
else shortname = shortname.substr(1);

el.append('<a href="'+symbolSearchRootDir+sym.path+'" title="'+name+'" tabindex="1001">'+shortname+'</a>');
$('#symbolSearchResults').append(el);
var a = document.createElement('a');
a.href = symbolSearchRootDir + sym.path;
a.title = name;
a.setAttribute('tabindex', '1001');
a.textContent = shortname;
el.appendChild(a);
if (results_el) results_el.appendChild(el);
}

if (results.length > 100) {
$('#symbolSearchResults').append("<li>&hellip;"+(results.length-100)+" additional results</li>");
if (results.length > 100 && results_el) {
var more = document.createElement('li');
more.innerHTML = '&hellip;' + (results.length - 100) + ' additional results';
results_el.appendChild(more);
}

$('#symbolSearchResults').show();
if (results_el) results_el.style.display = '';
}

$(function(){
$("#search-box form").on("submit", function(e) {
var searchResults = $('#symbolSearchResults').children();
if (searchResults.length > 0) {
window.location = searchResults.first().find("a").attr("href");
e.preventDefault();
ddoxReady(function(){
var form = document.querySelector('#search-box form');
if (!form) return;
form.addEventListener('submit', function(e) {
var results_el = document.getElementById('symbolSearchResults');
if (!results_el) return;
var first = results_el.firstElementChild;
if (first) {
var link = first.querySelector('a');
if (link) {
window.location = link.getAttribute('href');
e.preventDefault();
}
}
});
});
143 changes: 88 additions & 55 deletions js/dlang.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,78 +1,111 @@
(function($) {
$(function() {
(function() {
function ready(fn) {
if (document.readyState !== 'loading') fn();
else document.addEventListener('DOMContentLoaded', fn);
}

function parentsMatching(el, selector) {
var result = [];
var node = el.parentElement;
while (node) {
if (node.matches(selector)) result.push(node);
node = node.parentElement;
}
return result;
}

ready(function() {
if (typeof cssmenu_no_js === 'undefined') {
// add subnav toggle
$('.subnav').addClass('expand-container');
$('.subnav').prepend(
$('.subnav h2').clone().addClass('expand-toggle')
);
document.querySelectorAll('.subnav').forEach(function(subnav) {
subnav.classList.add('expand-container');
var h2 = subnav.querySelector('h2');
if (h2) {
var toggle = h2.cloneNode(true);
toggle.classList.add('expand-toggle');
subnav.insertBefore(toggle, subnav.firstChild);
}
});

// highlight menu entry of the current page
var href = window.location.href.split('#')[0];
var current;
var res = $('#top a, .subnav a').each(function (_, a) {
if (a.href == href) {
current = a;
return false;
}
});
current = $(current);
// direct li parent containing the link
current.parent('li').addClass('active');
// topmost li parent, e.g. 'std'
current.parents('#top .expand-container').addClass('active');
current.parents('.subnav .expand-container')
.addClass('open');
var current = null;
var links = document.querySelectorAll('#top a, .subnav a');
for (var i = 0; i < links.length; i++) {
if (links[i].href == href) { current = links[i]; break; }
}
if (current) {
// direct li parent containing the link
var liParent = current.parentElement.closest('li');
if (liParent) liParent.classList.add('active');
// topmost li parent, e.g. 'std'
parentsMatching(current, '#top .expand-container').forEach(function(p) {
p.classList.add('active');
});
parentsMatching(current, '.subnav .expand-container').forEach(function(p) {
p.classList.add('open');
});
}

var open_main_item = null;
$('.expand-toggle').click(function(e) {
var container = $(this).parent('.expand-container');
container.toggleClass('open');
document.querySelectorAll('.expand-toggle').forEach(function(toggle) {
toggle.addEventListener('click', function(e) {
var container = toggle.parentElement.closest('.expand-container');
if (!container) { e.preventDefault(); return false; }
container.classList.toggle('open');

/* In the main menu, let only one dropdown be open at a
time. Also close any open main menu dropdown when clicking
elsewhere. */
if (open_main_item !== container && open_main_item !== null) {
open_main_item.removeClass("open");
}
var clicking_main_bar = container.parents("#top").length > 0;
var clicking_hamburger = this === $('.hamburger')[0];
if (clicking_main_bar && !clicking_hamburger) {
open_main_item = container.hasClass('open')
? container : null;
}
return false;
if (open_main_item !== container && open_main_item !== null) {
open_main_item.classList.remove('open');
}
var clicking_main_bar = parentsMatching(container, '#top').length > 0;
var hamburger = document.querySelector('.hamburger');
var clicking_hamburger = toggle === hamburger;
if (clicking_main_bar && !clicking_hamburger) {
open_main_item = container.classList.contains('open') ? container : null;
}
e.preventDefault();
return false;
});
});

$('html').click(function(e) {
var clicking_main_bar = $(e.target).parents("#top").length > 0;
document.querySelector('html').addEventListener('click', function(e) {
var clicking_main_bar = parentsMatching(e.target, '#top').length > 0;
if (clicking_main_bar) return;
if (open_main_item !== null) {
open_main_item.removeClass('open');
open_main_item.classList.remove('open');
}
open_main_item = null;
});
}

$('.search-container .expand-toggle').click(function() {
$('#search-query input').focus();
document.querySelectorAll('.search-container .expand-toggle').forEach(function(t) {
t.addEventListener('click', function() {
var input = document.querySelector('#search-query input');
if (input) input.focus();
});
});

// Insert the show/hide button if the contents section exists
$('.page-contents-header').append('<span><a href="javascript:void(0);">[hide]</a></span>');

// Event to hide or show the "contents" section when the hide button
// is clicked
$(".page-contents-header a").click(function () {
var elem = $('.page-contents > ol');
document.querySelectorAll('.page-contents-header').forEach(function(h) {
var span = document.createElement('span');
span.innerHTML = '<a href="javascript:void(0);">[hide]</a>';
h.appendChild(span);
});

if (elem.is(':visible')) {
$(this).text("[show]");
elem.hide();
} else {
$(this).text("[hide]");
elem.show();
}
// Event to hide or show the "contents" section when the hide button is clicked
document.querySelectorAll('.page-contents-header a').forEach(function(a) {
a.addEventListener('click', function() {
var elem = document.querySelector('.page-contents > ol');
if (!elem) return;
var visible = elem.offsetParent !== null && elem.style.display !== 'none';
if (visible) {
a.textContent = '[show]';
elem.style.display = 'none';
} else {
a.textContent = '[hide]';
elem.style.display = '';
}
});
});
});
})(jQuery);
})();
2 changes: 0 additions & 2 deletions js/jquery-3.7.1.min.js
View file
Open in desktop

This file was deleted.

Loading