Skip to content

Commit

Permalink
v1.6.4
Browse files Browse the repository at this point in the history
  • Loading branch information
@Clooos
Clooos authored Jan 9, 2024
1 parent 32b8981 commit 94d4c5b
Show file tree
Hide file tree
Showing 8 changed files with 108 additions and 85 deletions.
31 changes: 19 additions & 12 deletions dist/bubble-card.js
View file

Large diffs are not rendered by default.

24 changes: 15 additions & 9 deletions dist/bubble-pop-up.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/cards/button.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -231,7 +231,7 @@ export function handleButton(context) {
context.eventAdded = true;
} else if (!context.eventAdded && buttonType === 'custom') {
switchButton.addEventListener('click', () => tapFeedback(context.switchButton), { passive: true });
addActions(iconContainer, context.config, hass, forwardHaptic);
addActions(switchButton, context.config, hass, forwardHaptic);
context.eventAdded = true;
}

Expand Down
93 changes: 46 additions & 47 deletions src/cards/pop-up.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,7 @@ import {
import { addActions } from '../tools/tap-actions.ts';
import { getVariables } from '../var/cards.ts';

let mouseUpListenerAdded = false;
let touchEndListenerAdded = false;
let oldTriggerEntityState;

export function handlePopUp(context) {

Expand Down Expand Up @@ -95,6 +94,11 @@ export function handlePopUp(context) {
context.initStyleAdded = true;
}

function removeHash() {
history.replaceState(null, null, location.href.split('#')[0]);
fireEvent(window, "location-changed", true);
}

function createHeader() {
if (!context.headerAdded) {
context.headerContainer = document.createElement("div");
Expand Down Expand Up @@ -154,37 +158,23 @@ export function handlePopUp(context) {
// Reset auto close
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
&& !el.classList.contains('close-pop-up'))
){
const close = setTimeout(function() {
if (window.hash === popUpHash) {
// Vérifiez si le clic a été effectué sur le corps de la page
if (document.body.contains(e.target)) {
popUpOpen = popUpHash + false;
removeHash();
localStorage.setItem('isManuallyClosed_' + popUpHash, true);
}
if (window.hash === popUpHash) { //&& !closeOnClick
removeHash();
localStorage.setItem('isManuallyClosed_' + popUpHash, true);
}
}, 0);
}, 100);
}
}

function removeHash() {
history.replaceState(null, null, location.href.split('#')[0]);
fireEvent(window, "location-changed", true);
}

function resetAutoClose() {
// Clear any existing timeout
clearTimeout(closeTimeout);
Expand All @@ -200,7 +190,6 @@ export function handlePopUp(context) {

function windowKeydownHandler(e) {
if (e.key === 'Escape') {
popUpOpen = popUpHash + false;
removeHash();
localStorage.setItem('isManuallyClosed_' + popUpHash, true)
}
Expand All @@ -223,7 +212,6 @@ export function handlePopUp(context) {

// 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;
removeHash();
localStorage.setItem('isManuallyClosed_' + popUpHash, true)
}
Expand Down Expand Up @@ -303,36 +291,36 @@ export function handlePopUp(context) {
document.body.style.overflow = 'hidden'; // Fix scroll inside pop-ups only
pauseVideos(context.popUp, false);
resetAutoClose();

if (closeOnClick) {
context.popUp.addEventListener('mouseup', removeHash, { passive: true });
context.popUp.addEventListener('touchend', removeHash, { passive: true });
} else {
window.addEventListener('click', closePopUpByClickingOutside, { passive: true });
}
context.popUpOpen = popUpHash + true;

popUpOpen = popUpHash + true;

setTimeout(function() {
window.justOpened = true;
window.addEventListener('click', closePopUpByClickingOutside, { passive: true });
}, 10);
}

function closePopUp() {
window.justOpened = false;
context.popUp.classList.remove('open-pop-up');
context.popUp.classList.add('close-pop-up');
context.content.querySelector('.power-button').removeEventListener('click', powerButtonClickHandler);
window.removeEventListener('keydown', windowKeydownHandler);
window.removeEventListener('click', closePopUpByClickingOutside);
context.popUp.removeEventListener('touchstart', popUpTouchstartHandler);
context.popUp.removeEventListener('touchmove', popUpTouchmoveHandler);
document.body.style.overflow = '';
clearTimeout(closeTimeout);

if (closeOnClick) {
context.popUp.removeEventListener('mouseup', removeHash);
context.popUp.removeEventListener('touchend', removeHash);
} else {
window.removeEventListener('click', closePopUpByClickingOutside);
}
context.popUpOpen = popUpHash + false;
}

popUpOpen = popUpHash + false;

setTimeout(function() {
pauseVideos(context.popUp, true);
Expand All @@ -350,6 +338,9 @@ export function handlePopUp(context) {
window['checkHashRef_' + popUpHash] = checkHash;
window.addEventListener('urlChanged', window['checkHashRef_' + popUpHash], { passive: true });
context.eventAdded = true;
} else if (context.eventAdded && editor) {
window.removeEventListener('urlChanged', window['checkHashRef_' + popUpHash]);
context.eventAdded = false;
}

const popUpStyles = `
Expand Down Expand Up @@ -519,6 +510,8 @@ export function handlePopUp(context) {
// Initialize pop-up

const initPopUp = setTimeout(() => {
const initEvent = new Event('popUpInitialized');

if (!context.element) {
context.element = context.getRootNode().querySelector('#root');
}
Expand All @@ -532,26 +525,32 @@ export function handlePopUp(context) {

if (editor && context.popUp && !context.editorModeAdded) {
context.popUp.classList.add('editor');
context.popUp.classList.remove('close-pop-up', 'open-pop-up', 'hide-pop-up');
context.popUp.classList.remove('close-pop-up', 'open-pop-up');
createPopUp();
context.editorModeAdded = true;
} else {
createPopUp();
return;
}

createPopUp();
clearTimeout(initPopUp);
const initEvent = new Event('popUpInitialized');
window.dispatchEvent(initEvent);
clearTimeout(initPopUp);
window.dispatchEvent(initEvent);

} else if (!editor && context.popUp && context.editorModeAdded) {
context.popUp.classList.remove('editor');
createPopUp();
context.editorModeAdded = false;
}
}, 0);

// Pop-up triggers

const popUpTriggers = () => {
function popUpTriggers(triggerEntityState) {
if (!triggerEntityState || triggerEntityState === oldTriggerEntityState) {
return;
}

oldTriggerEntityState = triggerEntityState;

if (localStorage.getItem('previousTriggerState_' + popUpHash) === null) {
localStorage.setItem('previousTriggerState_' + popUpHash, '');
}
Expand All @@ -566,33 +565,33 @@ export function handlePopUp(context) {
let isManuallyClosed = localStorage.getItem('isManuallyClosed_' + popUpHash) === 'true';
let isTriggered = localStorage.getItem('isTriggered_' + popUpHash) === 'true';

if (hass.states[triggerEntity].state === triggerState && previousTriggerState === null && !isTriggered) {
if (triggerEntityState === triggerState && previousTriggerState === null && !isTriggered) {
navigate('', popUpHash);
isTriggered = true;
localStorage.setItem('isTriggered_' + popUpHash, isTriggered);
}

if (hass.states[triggerEntity].state !== previousTriggerState) {
if (triggerEntityState !== previousTriggerState) {
isManuallyClosed = false;
localStorage.setItem('previousTriggerState_' + popUpHash, hass.states[triggerEntity].state);
localStorage.setItem('previousTriggerState_' + popUpHash, triggerEntityState);
localStorage.setItem('isManuallyClosed_' + popUpHash, isManuallyClosed);
}

if (hass.states[triggerEntity].state === triggerState && !isManuallyClosed) {
if (triggerEntityState === 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) {
} else if (triggerEntityState !== triggerState && triggerClose && context.popUp.classList.contains('open-pop-up') && isTriggered && !isManuallyClosed) {
removeHash();
popUpOpen = popUpHash + false;
isTriggered = false;
isManuallyClosed = true;
localStorage.setItem('isManuallyClosed_' + popUpHash, isManuallyClosed);
localStorage.setItem('isTriggered_' + popUpHash, isTriggered);
}
}

if (context.popUp && triggerEntity && stateChanged) {
popUpTriggers();
if (context.popUp && triggerEntity) {
const triggerEntityState = hass.states[triggerEntity].state;
popUpTriggers(triggerEntityState);
}
}
7 changes: 7 additions & 0 deletions src/editor/bubble-card-editor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -601,6 +601,7 @@ export default class BubbleCardEditor extends LitElement {
<ha-alert alert-type="info">You need to add a card type first.</ha-alert>
<img style="width: 100%" src="https://user-images.githubusercontent.com/36499953/268039672-6dd13476-42c5-427c-a4d8-ad4981fc2db7.gif">
<p>The <b>Bubble Card ${version}</b> changelog is available <a href="https://github.com/Clooos/Bubble-Card/releases/tag/${version}"><b>here</b></a>.
<br/><br/><ha-alert alert-type="info"><b>Column fix</b>: If you experience some issues with your dashboard layout, such as empty columns or misaligned cards. You can apply a fix that restores the behavior of the previous versions by adding <code>column_fix: true</code> in YAML to the <b>first</b> Bubble Card on your dashboard. Then refresh the page.</ha-alert>
<hr />
<p>Almost everything is available in the GUI editor, but in the YAML editor you can add your own <b>custom styles</b>, create <b>custom buttons</b> or modify the <b>tap actions</b> of all cards. You can find more details on my GitHub page.</p>
<a href="https://github.com/Clooos/Bubble-Card"><img src="https://img.shields.io/badge/GitHub-Documentation-blue?logo=github"></a>
Expand Down Expand Up @@ -841,6 +842,12 @@ export default class BubbleCardEditor extends LitElement {
opacity: .15;
margin: 8px 0 0 0;
}
code {
background: var(--accent-color);
background-blend-mode: darken;
padding: 2px 4px;
border-radius: 6px;
}
.button-header {
height: auto;
width: 100%;
Expand Down
20 changes: 13 additions & 7 deletions src/editor/bubble-pop-up-editor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,10 +133,10 @@ let bubblePopUpEditor = new MutationObserver((mutationsList, observer) => {
padding: 2px 6px;
border-radius: 8px;
">
👍 Optimized mode
Optimized mode
</span>
</h3>
<ha-alert alert-type="info">This card allows you to convert any vertical stack into a pop-up. Each pop-up can be opened by targeting its link (e.g. '#pop-up-name'), with navigation_path or with the horizontal buttons stack that is included.<br><b>It must be placed within a vertical-stack card at the top most position to function properly. The pop-up will be hidden by default until you open it.</b></ha-alert>
<ha-alert alert-type="warning">Since the recent updates of Home Assistant, the optimized mode has become obsolete. The regular mode is now exactly as efficient, which greatly simplifies things for both new and current users. So if you are on the latest Home Assistant release you can remove it from your extra modules and in your pop-ups in YAML just replace <code>custom:bubble-pop-up</code> with <code>custom:bubble-card</code> then add <code>card_type: pop-up</code>. This mode will be removed around the v2.0.0.</b></ha-alert>
<ha-textfield
label="Hash (e.g. #kitchen)"
.value="${this._hash}"
Expand Down Expand Up @@ -400,11 +400,17 @@ let bubblePopUpEditor = new MutationObserver((mutationsList, observer) => {

static get styles() {
return css`
div {
display: grid;
grid-gap: 12px;
}
`;
div {
display: grid;
grid-gap: 12px;
}
code {
background: var(--accent-color);
background-blend-mode: darken;
padding: 2px 4px;
border-radius: 6px;
}
`;
}
}

Expand Down
14 changes: 6 additions & 8 deletions src/tools/url-listener.ts
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,19 @@
const event = new Event('urlChanged');

export function addUrlListener() {
if (!window.eventAdded) {

// 'urlChanged' custom event

const event = new Event('urlChanged');
window.eventAdded = true;
window.popUpInitialized = false;

['location-changed', 'connection-status'].forEach((eventType) => {
['location-changed', 'connection-status', 'popstate'].forEach((eventType) => {
window.addEventListener(eventType, urlChanged);
}, { passive: true });

function urlChanged() {
let count = 0;
window.dispatchEvent(event);

// Send more events for when the connexion was lost
const intervalId = setInterval(() => {
Expand All @@ -22,17 +23,14 @@ export function addUrlListener() {
} else {
clearInterval(intervalId);
}
}, 1000);
}, 100);
}

// Check url when pop-ups are initialized
const popUpInitialized = () => {
window.dispatchEvent(event);
window.addEventListener('popstate', urlChanged, { passive: true });
};

window.addEventListener('popUpInitialized', popUpInitialized, { passive: true });

window.eventAdded = true;
window.addEventListener('popUpInitialized', popUpInitialized, { passive: true });
}
}
2 changes: 1 addition & 1 deletion src/var/version.ts
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export let version = 'v1.6.3';
export let version = 'v1.6.4';

0 comments on commit 94d4c5b

Please sign in to comment.