store the red, green, blue values in separate variables color = color.match( /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/ ); r = color[1]; g = color[2]; b = color[3]; } else { // If hex --> Convert it to RGB: http://gist.github.com/983661 color = +( "0x" + color.slice(1).replace(color.length < 5 && /./g, "$&$&") ); r = color >> 16; g = (color >> 8) & 255; b = color & 255; } // HSP (Highly Sensitive Poo) equation from http://alienryderflex.com/hsp.html hsp = Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b)); // Using the HSP value, determine whether the color is light or dark if (hsp > 127.5) { return "light"; } else { return "dark"; } } function rgb2hex(orig) { const rgb = orig.replace(/\s/g, "").match(/^rgba?\((\d+),(\d+),(\d+)/i); return rgb && rgb.length === 4 ? "#" + ("0" + parseInt(rgb[1], 10).toString(16)).slice(-2) + ("0" + parseInt(rgb[2], 10).toString(16)).slice(-2) + ("0" + parseInt(rgb[3], 10).toString(16)).slice(-2) : orig; } function isHidden(el) { if (!el) { return true; } if (el.ariaHidden) { return false; } const style = window.getComputedStyle(el); return (style.display === 'none'); } function init() { const madeWithSoftrEl = document.querySelector(".made-with-softr"); const softrEl = document.querySelector(".made-with-softr a"); if (!madeWithSoftrEl) { createBudgetWrapperDivEl(); } if (!softrEl && madeWithSoftrEl) { madeWithSoftrEl.remove(); createBudgetWrapperDivEl(); } if (isHidden(madeWithSoftrEl) || isHidden(softrEl)) { madeWithSoftrEl.remove(); createBudgetWrapperDivEl(); } const headers = document.querySelectorAll("header"); const sections = document.querySelectorAll("section"); const footers = document.querySelectorAll("footer"); const allSections = [...headers, ...sections, ...footers] setRightTheme(allSections, softrEl); function onScroll() { setRightTheme(allSections, softrEl); } document.addEventListener("scroll", onScroll); function onBlocksRendered() { moveBadgeToTheRightIfHeaderIsVertical(); applyMobileTextSizesForV4Blocks(); } window.addEventListener(BlocksRenderedEventName, onBlocksRendered); moveBadgeToTheRightIfHeaderIsVertical(); return function cleanup() { document.removeEventListener("scroll", onScroll); document.removeEventListener(BlocksRenderedEventName, onBlocksRendered); } } function moveBadgeToTheRightIfHeaderIsVertical () { const madeWithSoftrEl = document.querySelector(".made-with-softr"); const allBlocks = document.querySelector('[data-appid]').children; let headers = [...allBlocks].filter((block)=>{ if (block.hasAttribute('category')){ return block.getAttribute('category') === 'Header'; } }); if (headers.length === 0) { return false;} if(headers.length > 0) { [...headers].map((header)=>{ let blockHrId = header.getAttribute('id'); if (isReactBlock(header)) { setTimeout(()=>{ window.addEventListener('block-loaded-' + blockHrId, function () { if(isVerticalHeader(header)){ madeWithSoftrEl.style.left='320px'; } }, 2500); if(isVerticalHeader(header)){ madeWithSoftrEl.style.left='320px'; } }) } else { if(isVerticalHeader(header)){ madeWithSoftrEl.style.left='320px'; } } }) } } function isVerticalHeader (block){ //react vertical header structure is: div > div //react horizontal header structure is: div > header //non react vertical header structure is: div > nav //non react horizontal header structure is: nav if(block.hasAttribute('category')){ if (block.getAttribute('category') !== 'Header'){ return false; } } if (block.tagName.toLowerCase() === 'nav'){ return false; } if(block.tagName.toLowerCase() === 'section') { return false; } let firstElementChild = block.firstElementChild; return firstElementChild && (firstElementChild.tagName.toLowerCase() === 'div' || firstElementChild.tagName.toLowerCase() === 'nav'); } function isReactBlock (block) { return block.tagName.toLowerCase() === 'div'; } let cleanup = init(); setInterval(() => { cleanup(); cleanup = init(); }, (Math.floor(2 + Math.random() * 5)) * 1000); })(); -->