sections in tabs

by Laurens Maneschijn

HTML

<hr>drag link to bookmarks: <a href="javascript:(function(){ let section_selector = '', sections = [], tabs = [], $ = document.querySelector.bind(document), $$ = document.querySelectorAll.bind(document), log = console.log.bind(console), msg = (m) => {alert(m); log(m);}; section_selector = window.sections_in_tabs_last_section_selector || ''; section_selector = prompt('DOM selector for content elements:', section_selector); if(!section_selector) { return; } window.sections_in_tabs_last_section_selector = section_selector; sections = Array.from($$(section_selector)); if (sections.length < 2) { msg('Did not find 2 or more sections. Aborting.'); return; } let i, common_parent = sections[0].parentNode; for (i=0; i<sections.length;i++) { if (common_parent != sections[i].parentNode) { msg('Section selection did not all share same parentNode. Aborting.'); return; } } let already_tabbed = sections.some((section) => { return section.classList.contains('section_tabbed'); }); if (already_tabbed) { msg('Section selection already tabbed. Undoing...'); let old_tabcontainer = sections[0].parentNode.querySelector('.tabcontainer'); let old_sections = Array.from(sections[0].parentNode.querySelectorAll('.section_tabbed')); old_tabcontainer ? old_tabcontainer.remove() : 0; old_sections.forEach(el => { el.style.display = ''; el.classList.remove('section_tabbed'); el.classList.remove('active'); }); return; } sections.forEach((section, i) => { section.classList.add('section_tabbed'); }); let tabcontainer = document.createElement('div'); tabcontainer.classList.add('tabcontainer'); sections[0].parentNode.insertBefore(tabcontainer, sections[0]); let createTab = (text, section) => { let tab = document.createElement('button'); tab.classList.add('section_tab'); tab.textContent = text; tab.addEventListener('click', (e) => { tabs.forEach(el => { el.classList.remove('active'); }); tab.classList.add('active'); sections.forEach(el => { if (el === section || section === '*'|| text === '*') {...

CSS

h1,h2,h3 {
	font-size: 100%;
}
p {
	margin: 0;
}
code {
	display: inline-block;
	margin: 2px 2px;
	padding: 2px 2px;
	border: 1px solid #8884;
	background: #8881;
	user-select: all;
}

JavaScript

/*

Put repeating elments in tabbed content.
Requirements:
- All sections need to be siblings (same parentNode).
- All sections need to be siblings with nothing in between,
  or (optionally?) if there is move that below sections?


// example:
// url     : https://www.sublimetext.com/docs/linux_repositories.html#apt
// selector: 'section#linux-package-manager-repositories > section[id]'
//
// section#linux-package-manager-repositories
//   ul li p a[href="#xxx"]
//   section#xxx

TODO: Make work for any sections selector.
TODO: undo everything on 2nd try (on same section selection?)
TODO: Find links by looking for matching a[href="#SECTIONID"].
TODO: On hash change on any id matching a section or anything in it open the section.
TODO: for section selection: perhaps wait for a click on something,
      and then work upwards to closest block level element, and then select similar siblings?
      See: window.getComputedStyle(element).display === 'block'

*/

/*
(function(){

	let section_selector = '',
		sections = [],
		tabs = [],
		$  = document.querySelector.bind(document),
		$$ = document.querySelectorAll.bind(document),
		log = console.log.bind(console),
		msg = (m) => {alert(m); log(m);};

	section_selector = window.sections_in_tabs_last_section_selector || '';
	section_selector = prompt('DOM selector for content elements:', section_selector);
	if(!section_selector) {
		return;
	}
	window.sections_in_tabs_last_section_selector = section_selector;
	sections = Array.from($$(section_selector));

	// sanity checks:
	// - do we have 2 or more?
	// - are all sections direct siblings?
	// - TODO: is nothing in between the sections?
	if (sections.length < 2) {
		msg('Did not find 2 or more sections. Aborting.');
		return;
	}
	let i, common_parent = sections[0].parentNode;
	for (i=0; i<sections.length;i++) {
		if (common_parent != sections[i].parentNode) {
			msg('Section selection did not all share same parentNode. Aborting.');
			return;
		}
	}
	let already_tabbed =...