Difference between revisions of "MediaWiki:Common.js"
From Future Of Mankind
Line 32: | Line 32: | ||
console.log('btnHideGerman does not exist'); | console.log('btnHideGerman does not exist'); | ||
} | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | class Tooltip extends HTMLElement { | ||
+ | connectedCallback() { | ||
+ | this.setup(); | ||
+ | } | ||
+ | |||
+ | handleDropdownPosition() { | ||
+ | const screenPadding = 16; | ||
+ | |||
+ | const placeholderRect = this.placeholder.getBoundingClientRect(); | ||
+ | const dropdownRect = this.dropdown.getBoundingClientRect(); | ||
+ | |||
+ | const dropdownRightX = dropdownRect.x + dropdownRect.width; | ||
+ | const placeholderRightX = placeholderRect.x + placeholderRect.width; | ||
+ | |||
+ | if (dropdownRect.x < 0) { | ||
+ | this.dropdown.style.left = '0'; | ||
+ | this.dropdown.style.right = 'auto'; | ||
+ | this.dropdown.style.transform = `translateX(${-placeholderRect.x + screenPadding}px)`; | ||
+ | } else if (dropdownRightX > window.outerWidth) { | ||
+ | this.dropdown.style.left = 'auto'; | ||
+ | this.dropdown.style.right = '0'; | ||
+ | this.dropdown.style.transform = `translateX(${(window.outerWidth - placeholderRightX) - screenPadding}px)`; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | toggle() { | ||
+ | if (this.classList.contains('tooltip--open')) { | ||
+ | this.close(); | ||
+ | } else { | ||
+ | this.open(); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | open() { | ||
+ | this.classList.add('tooltip--open'); | ||
+ | this.handleDropdownPosition(); | ||
+ | } | ||
+ | |||
+ | close() { | ||
+ | this.classList.remove('tooltip--open'); | ||
+ | } | ||
+ | |||
+ | setup() { | ||
+ | this.placeholder = this.querySelector('[data-tooltip-placeholder]'); | ||
+ | this.dropdown = this.querySelector('[data-tooltip-dropdown]'); | ||
+ | |||
+ | this.placeholder.addEventListener('mouseover', () => this.handleDropdownPosition()); | ||
+ | this.placeholder.addEventListener('touchstart', () => this.toggle()); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function dismissAllTooltips(event) { | ||
+ | if (typeof event.target.closest !== 'function') return; | ||
+ | const currentTooltip = event.target.closest('carwow-tooltip'); | ||
+ | |||
+ | document.querySelectorAll('.tooltip--open').forEach(tooltip => { | ||
+ | if (tooltip === currentTooltip) return; | ||
+ | |||
+ | tooltip.classList.remove('tooltip--open'); | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | customElements.define('wow-tooltip', Tooltip); | ||
+ | document.addEventListener('touchstart', e => dismissAllTooltips(e)); |
Revision as of 17:04, 22 March 2022
/* Any JavaScript here will be loaded for all users on every page load. */ //collapsible table column test, based on: https://codepen.io/feger/pen/eDybC $("#btnHideEnglish").click(function(){ console.log ('Hiding first column of table with an id of report'); $( "table#collapsible_report > tbody:last-child > tr > th:first-child" ).toggle(); $( "table#collapsible_report > tbody:last-child > tr > td:first-child" ).toggle(); if ($(this).text() == "Hide English"){ $(this).text("Show English"); } else { $(this).text("Hide English"); } }); $("#btnHideGerman").click(function(){ console.log ('Hiding second column of table with an id of report'); $( "table#collapsible_report > tbody:last-child > tr > th:last-child" ).toggle(); $( "table#collapsible_report > tbody:last-child > tr > td:last-child" ).toggle(); if ($(this).text() == "Hide German"){ $(this).text("Show German"); } else { $(this).text("Hide German"); } }); // hide the german by default, on page load, but only if the btnHideGerman element exists on the page if (document.getElementById("btnHideGerman")) { console.log('btnHideGerman exists'); //$("#btnHideGerman").click(); } else { // do stuff console.log('btnHideGerman does not exist'); } class Tooltip extends HTMLElement { connectedCallback() { this.setup(); } handleDropdownPosition() { const screenPadding = 16; const placeholderRect = this.placeholder.getBoundingClientRect(); const dropdownRect = this.dropdown.getBoundingClientRect(); const dropdownRightX = dropdownRect.x + dropdownRect.width; const placeholderRightX = placeholderRect.x + placeholderRect.width; if (dropdownRect.x < 0) { this.dropdown.style.left = '0'; this.dropdown.style.right = 'auto'; this.dropdown.style.transform = `translateX(${-placeholderRect.x + screenPadding}px)`; } else if (dropdownRightX > window.outerWidth) { this.dropdown.style.left = 'auto'; this.dropdown.style.right = '0'; this.dropdown.style.transform = `translateX(${(window.outerWidth - placeholderRightX) - screenPadding}px)`; } } toggle() { if (this.classList.contains('tooltip--open')) { this.close(); } else { this.open(); } } open() { this.classList.add('tooltip--open'); this.handleDropdownPosition(); } close() { this.classList.remove('tooltip--open'); } setup() { this.placeholder = this.querySelector('[data-tooltip-placeholder]'); this.dropdown = this.querySelector('[data-tooltip-dropdown]'); this.placeholder.addEventListener('mouseover', () => this.handleDropdownPosition()); this.placeholder.addEventListener('touchstart', () => this.toggle()); } } function dismissAllTooltips(event) { if (typeof event.target.closest !== 'function') return; const currentTooltip = event.target.closest('carwow-tooltip'); document.querySelectorAll('.tooltip--open').forEach(tooltip => { if (tooltip === currentTooltip) return; tooltip.classList.remove('tooltip--open'); }); } customElements.define('wow-tooltip', Tooltip); document.addEventListener('touchstart', e => dismissAllTooltips(e));