From 195440f2fb1e94c014a9cf08f3eae40f3d224620 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 17 Apr 2022 22:17:50 -0700 Subject: v5.2.0 design refresh, plus responsive offcanvas classes (#35736) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Add responsive offcanvas classes - Updates navbar-expand classes to de-dupe some styles—these shouldn't interfere now. - Adds some JS to the offcanvas component to help with responsiveness Co-Authored-By: GeoSot * Redesign homepage, docs, and examples Homepage: - New Bootstrap purple navbar - Redesigned masthead - Rewrote and redesigned homepage content - Replace Copy text with icons like Bootstrap Icons site across all ClipboardJS instances - Fixed padding issues in site footer - Match homepage button styles to examples page, use gap instead of tons of responsive margin utils Docs: - New navbar, no more subnav. Migrated search and version picker into the main navbar and refreshed the design of it all, including the responsive toggles. - New sidebar navigation is always expanded, and now features Bootstrap Icons alongside section headings - Sidebar navigation autoscrolls to active link for better usability - Subnav and navbar padding issues ironed out - Enhanced the version picker in anticipation of v5.2: we can now link right to the same page in the previous version. - Redesign callouts to add more color to our pages - Collapse table of contents on mobile - Cleanup and redesign button styles with CSS variables - Update design for subnav version dropdown - Update highlight and example to be full-width until md - Improve the Added In badges - Turn the ToC into a well on mobile - Redesign code snippets to better house two action buttons Examples: - Redesign Examples page layout - Add new example for responsive offcanvases in navbars * Convert offcanvas to CSS vars * Feat: add resize handler to Offcanvas.js. If we could use as default the `.offcanvas` class without modifiers, we then, could add a simplified selector The selector itself, ignores the .offcanvas class as it doesn't have any responsive behavior The `aria-modal` addon is to protect us, selection backdrop elements * Separate examples code, Add some selectors, fix stackblitz btn Co-authored-by: GeoSot --- site/assets/js/code-examples.js | 88 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 88 insertions(+) create mode 100644 site/assets/js/code-examples.js (limited to 'site/assets/js/code-examples.js') diff --git a/site/assets/js/code-examples.js b/site/assets/js/code-examples.js new file mode 100644 index 000000000..4a61fa09b --- /dev/null +++ b/site/assets/js/code-examples.js @@ -0,0 +1,88 @@ +// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT +// IT'S ALL JUST JUNK FOR OUR DOCS! +// ++++++++++++++++++++++++++++++++++++++++++ + +/*! + * JavaScript for Bootstrap's docs (https://getbootstrap.com/) + * Copyright 2011-2022 The Bootstrap Authors + * Copyright 2011-2022 Twitter, Inc. + * Licensed under the Creative Commons Attribution 3.0 Unported License. + * For details, see https://creativecommons.org/licenses/by/3.0/. + */ + +/* global ClipboardJS: false, bootstrap: false */ + +(() => { + 'use strict' + // Insert copy to clipboard button before .highlight + const btnTitle = 'Copy to clipboard' + const btnEdit = 'Edit on StackBlitz' + + const btnHtml = [ + '
', + '
', + ' ', + '
', + '
' + ].join('') + + // wrap programmatically code blocks and add copy btn. + document.querySelectorAll('.highlight') + .forEach(element => { + if (!element.closest('.bd-example-snippet')) { // Ignore examples made be shortcode + element.insertAdjacentHTML('beforebegin', btnHtml) + element.previousElementSibling.append(element) + } + }) + + /** + * + * @param {string} selector + * @param {string} title + */ + function snippetButtonTooltip(selector, title) { + document.querySelectorAll(selector).forEach(btn => { + bootstrap.Tooltip.getOrCreateInstance(btn, { title }) + }) + } + + snippetButtonTooltip('.btn-clipboard', btnTitle) + snippetButtonTooltip('.btn-edit', btnEdit) + + const clipboard = new ClipboardJS('.btn-clipboard', { + target: trigger => trigger.closest('.bd-code-snippet').querySelector('.highlight') + }) + + clipboard.on('success', event => { + const iconFirstChild = event.trigger.querySelector('.bi').firstChild + const tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger) + const namespace = 'http://www.w3.org/1999/xlink' + const originalXhref = iconFirstChild.getAttributeNS(namespace, 'href') + const originalTitle = event.trigger.title + + tooltipBtn.setContent({ '.tooltip-inner': 'Copied!' }) + event.trigger.addEventListener('hidden.bs.tooltip', () => { + tooltipBtn.setContent({ '.tooltip-inner': btnTitle }) + }, { once: true }) + event.clearSelection() + iconFirstChild.setAttributeNS(namespace, 'href', originalXhref.replace('clipboard', 'check2')) + + setTimeout(() => { + iconFirstChild.setAttributeNS(namespace, 'href', originalXhref) + event.trigger.title = originalTitle + }, 2000) + }) + + clipboard.on('error', event => { + const modifierKey = /mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-' + const fallbackMsg = `Press ${modifierKey}C to copy` + const tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger) + + tooltipBtn.setContent({ '.tooltip-inner': fallbackMsg }) + event.trigger.addEventListener('hidden.bs.tooltip', () => { + tooltipBtn.setContent({ '.tooltip-inner': btnTitle }) + }, { once: true }) + }) +})() -- cgit v1.2.3