From ff47cfac78adedb5fe6a88889ac4ba6e2ffdcdec Mon Sep 17 00:00:00 2001 From: Cloos <36499953+Clooos@users.noreply.github.com> Date: Tue, 2 Jan 2024 13:51:51 +0100 Subject: [PATCH] Delete src/cards/pop-up-old.ts --- src/cards/pop-up-old.ts | 669 ---------------------------------------- 1 file changed, 669 deletions(-) delete mode 100644 src/cards/pop-up-old.ts diff --git a/src/cards/pop-up-old.ts b/src/cards/pop-up-old.ts deleted file mode 100644 index c7cd8fce..00000000 --- a/src/cards/pop-up-old.ts +++ /dev/null @@ -1,669 +0,0 @@ - //

Advanced settings

- // - // - //
- // - //
- // - // Back button/event support : This allow you to navigate through your pop-ups history when you press the back button of your browser. This setting can be applied only once, you don't need to change it in all pop-ups. If it's not working just turn it on for each pop-ups. - -import { - addStyles, - createIcon, - updateIcon, - isColorCloseToWhite, - convertToRGBA, - getIconColor, - getIconStyles -} from '../tools/style.ts'; -import { - initializeContent, - checkEditor, - checkResources -} from '../tools/init.ts'; -import { - fireEvent, - forwardHaptic, - navigate, - toggleEntity, - hasStateChanged -} from '../tools/utils.ts'; -import { addActions } from '../tools/tap-actions.ts'; -import { getVariables } from '../var/cards.ts'; - -export function handlePopUp(context) { - - const hass = context._hass; - const editor = context.editor; - const config = context.config; - - if (!editor) { //!hass - return; - } - - let { - customStyles, - entityId, - icon, - name, - widthDesktop, - widthDesktopDivided, - isSidebarHidden, - state, - stateChanged, - stateOn, - formatedState, - riseAnimation, - marginCenter, - popUpOpen, - rgbaColor, - rgbColor, - bgOpacity, - shadowOpacity, - bgBlur, - iconColorOpacity, - iconColor, - iconFilter, - iconStyles, - haStyle, - themeBgColor, - color, - } = getVariables(context, config, hass, editor); - - let autoClose = config.auto_close || false; - let popUpHash = config.hash; - let triggerEntity = config.trigger_entity ? config.trigger_entity : ''; - let triggerState = config.trigger_state ? config.trigger_state : ''; - let triggerClose = config.trigger_close ? config.trigger_close : false; - let startTouchY; - let lastTouchY; - - if (context.errorTriggered) { - return; - } - - if (!context.initStyleAdded && !context.host && !editor) { - // Hide vertical stack content before initialization - context.card.style.marginTop = '4000px'; - context.initStyleAdded = true; - } - - const createPopUp = () => { - if (!context.host) { - context.host = context.getRootNode().host; - } else { - if (!context.popUp) { - context.verticalStack = context.getRootNode(); - context.popUp = context.verticalStack.querySelector('#root'); - - if (!window.popUpInitialized && context.popUp) { - const backOpen = config.back_open || false; - backOpen ? localStorage.setItem('backOpen', true) : localStorage.setItem('backOpen', false); - const backOpenState = localStorage.getItem('backOpen') === 'true'; - - if (backOpenState) { - window.backOpen = true; - const event = new Event('popUpInitialized'); - setTimeout(() => { - window.dispatchEvent(event); - }, 0); - } else { - window.backOpen = false; - popUpOpen = popUpHash + false; - history.replaceState(null, null, location.href.split('#')[0]); - } - - window.popUpInitialized = true; - } - } - - const popUp = context.popUp; - const verticalStack = context.verticalStack; - const text = config.text || ''; - const stateEntityId = config.state; - const marginTopMobile = config.margin_top_mobile - ? (config.margin_top_mobile !== '0' ? config.margin_top_mobile : '0px') - : '0px'; - const marginTopDesktop = config.margin_top_desktop - ? (config.margin_top_desktop !== '0' ? config.margin_top_desktop : '0px') - : '0px'; - const displayPowerButton = config.entity ? 'flex' : 'none'; - state = stateEntityId ? hass.states[stateEntityId].state : ''; - formatedState = stateEntityId ? hass.formatEntityState(hass.states[stateEntityId]) : ''; - let closeTimeout; - let rgbaBgColor; - - if (!context.headerAdded) { - const headerContainer = document.createElement("div"); - headerContainer.setAttribute("id", "header-container"); - - const div = document.createElement("div"); - headerContainer.appendChild(div); - - const iconContainer = document.createElement("div"); - iconContainer.setAttribute("class", "icon-container"); - div.appendChild(iconContainer); - - createIcon(context, hass, entityId, icon, iconContainer, editor); - addActions(iconContainer, config, hass, forwardHaptic); - - const h2 = document.createElement("h2"); - h2.textContent = name; - div.appendChild(h2); - - const p = document.createElement("p"); - p.textContent = formatedState; - div.appendChild(p); - - const haIcon2 = document.createElement("ha-icon"); - haIcon2.setAttribute("class", "power-button"); - haIcon2.setAttribute("icon", "mdi:power"); - haIcon2.setAttribute("style", `display: ${displayPowerButton};`); - div.appendChild(haIcon2); - - const button = document.createElement("button"); - button.setAttribute("class", "close-pop-up"); - button.onclick = function() { history.replaceState(null, null, location.href.split('#')[0]); localStorage.setItem('isManuallyClosed_' + popUpHash, true); }; - headerContainer.appendChild(button); - - const haIcon3 = document.createElement("ha-icon"); - haIcon3.setAttribute("icon", "mdi:close"); - button.appendChild(haIcon3); - - context.content.appendChild(headerContainer); - context.header = div; - - context.headerAdded = true; - } else if (entityId) { - const iconContainer = context.content.querySelector("#header-container .icon-container"); - const h2 = context.content.querySelector("#header-container h2"); - const p = context.content.querySelector("#header-container p"); - const haIcon2 = context.content.querySelector("#header-container .power-button"); - - iconContainer.innerHTML = ''; // Clear the container - createIcon(context, hass, entityId, icon, iconContainer, editor); - - h2.textContent = name; - p.textContent = formatedState; - haIcon2.setAttribute("style", `display: ${displayPowerButton};`); - } - - if (!context.eventAdded && !editor) { - window['checkHashRef_' + popUpHash] = checkHash; - window.addEventListener('urlChanged', window['checkHashRef_' + popUpHash], { passive: true }); - window.addEventListener('click', function(e) { - // Reset auto close - location.hash === popUpHash && resetAutoClose(); - - if (!window.justOpened) { - return; - } - - const target = e.composedPath(); - - if (target && - !target.some(el => el.nodeName === 'HA-MORE-INFO-DIALOG') && - !target.some(el => el.id === 'root' && !el.classList.contains('close-pop-up')) && - popUpOpen === popUpHash + true) { - setTimeout(function() { - if (location.hash === popUpHash) { - popUpOpen = popUpHash + false; - history.replaceState(null, null, location.href.split('#')[0]); - localStorage.setItem('isManuallyClosed_' + popUpHash, true); - } - }, 2); - } - }, { passive: true }); - - context.eventAdded = true; - } - - function powerButtonClickHandler() { - toggleEntity(hass, entityId); - } - - function windowClickHandler(e) { - // Reset auto close - if (window.hash === popUpHash) { - resetAutoClose(); - } - - if (!window.justOpened) { - return; - } - - const target = e.composedPath(); - - if (target && - !target.some(el => el.nodeName === 'HA-MORE-INFO-DIALOG') && - !target.some(el => el.id === 'root' && !el.classList.contains('close-pop-up')) && - popUpOpen === popUpHash + true) { - popUpOpen = popUpHash + false; - history.replaceState(null, null, location.href.split('#')[0]); - localStorage.setItem('isManuallyClosed_' + popUpHash, true) - } - } - - function windowKeydownHandler(e) { - if (e.key === 'Escape') { - popUpOpen = popUpHash + false; - history.replaceState(null, null, location.href.split('#')[0]); - localStorage.setItem('isManuallyClosed_' + popUpHash, true) - } - } - - function popUpTouchstartHandler(event) { - // Reset auto close - if (window.hash === popUpHash) { - resetAutoClose(); - } - - // Record the Y position of the finger at the start of the touch - startTouchY = event.touches[0].clientY; - lastTouchY = startTouchY; - } - - function popUpTouchmoveHandler(event) { - // Calculate the distance the finger has traveled - let touchMoveDistance = event.touches[0].clientY - startTouchY; - - // If the distance is positive (i.e., the finger is moving downward) and exceeds a certain threshold, close the pop-up - if (touchMoveDistance > 300 && event.touches[0].clientY > lastTouchY) { - popUpOpen = popUpHash + false; - history.replaceState(null, null, location.href.split('#')[0]); - popUpOpen = popUpHash + false; - localStorage.setItem('isManuallyClosed_' + popUpHash, true) - } - - // Update the Y position of the last touch - lastTouchY = event.touches[0].clientY; - } - - if (entityId) { - const rgbColor = hass.states[entityId].attributes.rgb_color; - context.rgbColor = rgbColor - ? (!isColorCloseToWhite(rgbColor) ? `rgb(${rgbColor})` : 'rgb(255,220,200)') - : (stateOn - ? (entityId.startsWith("light.") ? 'rgba(255,220,200, 0.5)' : 'var(--accent-color)') - : 'rgba(255, 255, 255, 1'); - - context.rgbColorOpacity = rgbColor - ? (!isColorCloseToWhite(rgbColor) ? `rgba(${rgbColor}, 0.5)` : 'rgba(255,220,200, 0.5)') - : (entityId && stateOn - ? (entityId.startsWith("light.") ? 'rgba(255,220,200, 0.5)' : 'var(--accent-color)') - : 'var(--background-color,var(--secondary-background-color))'); - - rgbaBgColor = convertToRGBA(color, 0); - - context.iconFilter = rgbColor ? - (!isColorCloseToWhite(rgbColor) ? 'brightness(1.1)' : 'none') : - 'none'; - } else { - rgbaBgColor = convertToRGBA(color, 0); - } - - function checkHash() { - if (!editor) { - window.hash = location.hash.split('?')[0]; - - // Open on hash change - if (window.hash === popUpHash) { - openPopUp(); - // Close on back button from browser - } else if (popUp.classList.contains('open-pop-up')) { - closePopUp(); - } - } - }; - - let content = context.content; - - function pauseVideos(root, pause) { - var videos = root.querySelectorAll('video'); - for (var i=0; i 0 && !videos[i].paused && !videos[i].ended && videos[i].readyState > videos[i].HAVE_CURRENT_DATA; - if (pause && isPlaying) { - videos[i].pause(); - } else if (!pause && !isPlaying) { - videos[i].play(); - if (videos[i].currentTime > 0) { - videos[i].currentTime = 10000; - } - } - } - - var nodes = root.querySelectorAll('*'); - for(var i=0; i { window.justOpened = true; }, 10); - resetAutoClose(); - }, 0); - - setTimeout(function() { - pauseVideos(popUp, false); - }, 0); - } - - function closePopUp() { - setTimeout(function() { - popUp.classList.remove('open-pop-up'); - popUp.classList.add('close-pop-up'); - content.querySelector('.power-button').removeEventListener('click', powerButtonClickHandler); - window.removeEventListener('keydown', windowKeydownHandler); - popUp.removeEventListener('touchstart', popUpTouchstartHandler); - popUp.removeEventListener('touchmove', popUpTouchmoveHandler); - popUpOpen = popUpHash + false; - document.body.style.overflow = ''; - window.justOpened = false; - clearTimeout(closeTimeout); - }, 0); - - setTimeout(function() { - pauseVideos(popUp, true); - }, 320); - } - - function resetAutoClose() { - // Clear any existing timeout - clearTimeout(closeTimeout); - // Start autoclose if enabled - if (autoClose > 0) { - closeTimeout = setTimeout(autoClosePopUp, autoClose); - } - } - - function autoClosePopUp(){ - history.replaceState(null, null, location.href.split('#')[0]); - } - - if (editor && !context.editorModeAdded) { - console.log(popUpHash); - popUp.classList.add('editor'); - popUp.classList.remove('open-pop-up'); - popUp.classList.remove('close-pop-up'); - context.editorModeAdded = true; - } - - const popUpStyles = ` - ha-card { - margin-top: 0 !important; - background: none !important; - border: none !important; - } - .card-content { - width: 100% !important; - padding: 0 !important; - } - #root { - transition: all 1s !important; - position: fixed !important; - margin: 0 -${marginCenter}; /* 7px */ - width: 100%; - ${context.bgColorChanged && (config.bg_color || config.bg_opacity) ? "--bubble-pop-up-background: " + rgbaColor : ''}; - background-color: var(--bubble-pop-up-background); - box-shadow: 0px 0px 50px rgba(0,0,0,${shadowOpacity / 100}); - backdrop-filter: blur(${bgBlur}px); - -webkit-backdrop-filter: blur(${bgBlur}px); - border-radius: 42px; - box-sizing: border-box; - top: calc(120% + ${marginTopMobile} + var(--header-height)); - grid-gap: 12px !important; - gap: 12px !important; - grid-auto-rows: min-content; - padding: 18px 18px 220px 18px !important; - height: 100% !important; - -ms-overflow-style: none; /* for Internet Explorer, Edge */ - scrollbar-width: none; /* for Firefox */ - overflow-y: auto; - overflow-x: hidden; - z-index: 1 !important; /* Higher value hide the more-info panel */ - /* For older Safari but not working with Firefox */ - /* display: grid !important; */ - } - #root.hidden { - display: none !important; - } - #root > :first-child::after { - content: ''; - display: block; - position: sticky; - top: 0; - left: -50px; - margin: -70px 0 -36px -36px; - overflow: visible; - width: 200%; - height: 100px; - background: linear-gradient(0deg, ${rgbaBgColor} 0%, var(--bubble-pop-up-background) 80%); - z-index: 0; - } - #root::-webkit-scrollbar { - display: none; /* for Chrome, Safari, and Opera */ - } - #root > :first-child { - position: sticky; - top: 0; - z-index: 1; - background: none !important; - overflow: visible; - } - #root.open-pop-up { - /*will-change: transform;*/ - transform: translateY(-120%); - transition: transform .36s !important; - } - #root.open-pop-up > * { - /* Block child items to overflow and if they do clip them */ - /*max-width: calc(100vw - 38px);*/ - max-width: 100% !important; - /*overflow-x: clip;*/ - } - #root.close-pop-up { - transform: translateY(-20%); - transition: transform .4s !important; - box-shadow: none; - } - @media only screen and (min-width: 600px) { - #root { - top: calc(120% + ${marginTopDesktop} + var(--header-height)); - width: calc(${widthDesktop}${widthDesktopDivided[2] === '%' && !isSidebarHidden ? ' - var(--mdc-drawer-width)' : ''}) !important; - left: calc(50% - ${widthDesktopDivided[1] / 2}${widthDesktopDivided[2]}); - margin: 0 !important; - } - } - @media only screen and (min-width: 870px) { - #root { - left: calc(50% - ${widthDesktopDivided[1] / 2}${widthDesktopDivided[2]} + ${isSidebarHidden ? '0px' : `var(--mdc-drawer-width) ${widthDesktopDivided[2] === '%' ? '' : '/ 2'}`}); - } - } - #root.editor { - position: inherit !important; - width: 100% !important; - padding: 18px !important; - } - `; - - const headerStyles = ` - ${iconStyles} - - ha-card { - margin-top: 0 !important; - } - #header-container { - display: inline-flex; - ${!icon && !name && !entityId && !state && !text ? 'flex-direction: row-reverse;' : ''} - height: 50px; - width: 100%; - margin: 0; - padding: 0; - } - #header-container > div { - display: ${!icon && !name && !entityId && !state && !text ? 'none' : 'inline-flex'}; - align-items: center; - position: relative; - padding-right: 6px; - z-index: 1; - flex-grow: 1; - background-color: ${entityId ? context.rgbColorOpacity : 'var(--background-color,var(--secondary-background-color))'}; - transition: background 1s; - border-radius: 25px; - margin-right: 14px; - backdrop-filter: blur(14px); - -webkit-backdrop-filter: blur(14px); - } - #header-container h2 { - display: inline-flex; - margin: 0 18px 0 0; - padding: 4px; - z-index: 1; - font-size: 18px; - } - #header-container p { - display: inline-flex; - font-size: 16px; - min-width: fit-content ; - } - .power-button { - cursor: pointer; - flex-grow: inherit; - width: 24px; - height: 24px; - border-radius: 12px; - margin: 0 10px; - background: none !important; - justify-content: flex-end; - background-color: var(--background-color,var(--secondary-background-color)); - } - .close-pop-up { - height: 50px; - width: 50px; - border: none; - border-radius: 50%; - z-index: 1; - background: var(--background-color,var(--secondary-background-color)); - color: var(--primary-text-color); - flex-shrink: 0; - cursor: pointer; - } - `; - - setTimeout(() => { - addStyles(hass, context, headerStyles, customStyles, state, entityId, stateChanged); - addStyles(hass, context, popUpStyles, customStyles, state, entityId, '', '', popUp); - }, 0); - } - } - - // Change pop-ups background color if the theme just changed - - // if (context.popUp && rgbaColor && rgbaColor !== context.oldBgColor && location.hash === popUpHash) { - // //if (rgbaColor !== context.oldBgColor && !context.initThemeFix) { - // context.oldBgColor = rgbaColor; - // context.initThemeFix = true; - // console.log("Coucou") - // //return; - // //} - // context.oldBgColor = rgbaColor; - // console.log("Hello") - // context.bgColorChanged = true; - // } else { - // context.bgColorChanged = false; - // } - - // Initialize pop-up card - - if (!context.popUpAdded) { - context.popUpAdded = true; - let initPopUp = setInterval(() => { - createPopUp(); - if (context.popUp) { - clearInterval(initPopUp); - } - }, 0); - - setTimeout(() => { - if (!context.popUp) { - context.errorTriggered = true; - clearInterval(initPopUp); - throw new Error("Pop-up card must be placed inside a vertical_stack! If it's already the case, please ignore this error 🍻"); - } - }, 6000); - } else if (!editor && context.wasEditing && (stateChanged || context.bgColorChanged)) { - createPopUp(); - context.wasEditing = false; - } else if ((popUpHash === window.hash && (stateChanged || context.bgColorChanged)) || (editor && !context.editorModeAdded)) { - createPopUp(); - if (editor) { - context.wasEditing = true; - } - } - - // Hide pop-ups when exiting editor - - if (!editor && context.popUp && context.editorModeAdded) { - context.popUp.classList.remove('editor'); - context.editorModeAdded = false; - } - - // Pop-up triggers - - if (context.popUp && triggerEntity && stateChanged) { - if (localStorage.getItem('previousTriggerState_' + popUpHash) === null) { - localStorage.setItem('previousTriggerState_' + popUpHash, ''); - } - if (localStorage.getItem('isManuallyClosed_' + popUpHash) === null) { - localStorage.setItem('isManuallyClosed_' + popUpHash, 'false'); - } - if (localStorage.getItem('isTriggered_' + popUpHash) === null) { - localStorage.setItem('isTriggered_' + popUpHash, 'false'); - } - - let previousTriggerState = localStorage.getItem('previousTriggerState_' + popUpHash); - let isManuallyClosed = localStorage.getItem('isManuallyClosed_' + popUpHash) === 'true'; - let isTriggered = localStorage.getItem('isTriggered_' + popUpHash) === 'true'; - - if (hass.states[triggerEntity].state === triggerState && previousTriggerState === null && !isTriggered) { - navigate('', popUpHash); - isTriggered = true; - localStorage.setItem('isTriggered_' + popUpHash, isTriggered); - } - - if (hass.states[triggerEntity].state !== previousTriggerState) { - isManuallyClosed = false; - localStorage.setItem('previousTriggerState_' + popUpHash, hass.states[triggerEntity].state); - localStorage.setItem('isManuallyClosed_' + popUpHash, isManuallyClosed); - } - - if (hass.states[triggerEntity].state === triggerState && !isManuallyClosed) { - navigate('', popUpHash); - isTriggered = true; - localStorage.setItem('isTriggered_' + popUpHash, isTriggered); - } else if (hass.states[triggerEntity].state !== triggerState && triggerClose && context.popUp.classList.contains('open-pop-up') && isTriggered && !isManuallyClosed) { - history.replaceState(null, null, location.href.split('#')[0]); - popUpOpen = popUpHash + false; - isTriggered = false; - isManuallyClosed = true; - localStorage.setItem('isManuallyClosed_' + popUpHash, isManuallyClosed); - localStorage.setItem('isTriggered_' + popUpHash, isTriggered); - } - } -} \ No newline at end of file