Skip to content

Commit

Permalink
v1.6.0-beta.3
Browse files Browse the repository at this point in the history
  • Loading branch information
@Clooos
Clooos authored Dec 27, 2023
1 parent c15d38d commit 8e4fce2
Show file tree
Hide file tree
Showing 17 changed files with 371 additions and 635 deletions.
147 changes: 77 additions & 70 deletions dist/bubble-card.js
View file

Large diffs are not rendered by default.

92 changes: 4 additions & 88 deletions dist/bubble-pop-up.js
View file

Large diffs are not rendered by default.

6 changes: 4 additions & 2 deletions src/bubble-card.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { version } from './var/version.ts';
import { addUrlListener } from './tools/url-listener.ts';
import { initializeContent, checkEditor } from './tools/init.ts';
import { initializeContent, checkEditor, checkResources } from './tools/init.ts';
import { handlePopUp } from './cards/pop-up.ts';
import { handleHorizontalButtonsStack } from './cards/horizontal-buttons-stack.ts';
import { handleButton } from './cards/button.ts';
Expand All @@ -17,10 +17,12 @@ class BubbleCard extends HTMLElement {
set hass(hass) {

this._hass = hass;

editor = checkEditor();
this.editor = editor;

checkResources(hass);

initializeContent(this);

switch (this.config.card_type) {
Expand Down
6 changes: 2 additions & 4 deletions src/bubble-pop-up.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { version } from './var/version.ts';
import { addUrlListener } from './tools/url-listener.ts';
import { initializeContent, checkEditor, checkResources } from './tools/init.ts';
import { initializeContent, checkEditor } from './tools/init.ts';
import { handlePopUp } from './cards/pop-up.ts';
import { bubblePopUpEditor } from './editor/bubble-pop-up-editor.ts';

Expand All @@ -12,12 +12,10 @@ class BubblePopUp extends HTMLElement {
set hass(hass) {

this._hass = hass;

editor = checkEditor();
this.editor = editor;

checkResources(hass);

initializeContent(this);

// Initialize pop-up card
Expand Down
9 changes: 1 addition & 8 deletions src/cards/button.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,7 @@ import {
getIconStyles
} from '../tools/style.ts';
import {
initializeContent,
checkEditor,
checkResources
} from '../tools/init.ts';
import {
fireEvent,
forwardHaptic,
navigate,
toggleEntity,
hasStateChanged
} from '../tools/utils.ts';
Expand Down Expand Up @@ -56,7 +49,7 @@ export function handleButton(context) {
color,
} = getVariables(context, context.config, hass, editor);

formatedState = stateChanged || editor ? hass.formatEntityState(hass.states[entityId]) : formatedState || '';
formatedState = entityId && (stateChanged || editor) ? hass.formatEntityState(hass.states[entityId]) : '';
const buttonType = context.config.button_type || 'switch';
const showState = !context.config.show_state ? false : context.config.show_state;
let currentBrightness = !entityId ? '' : hass.states[entityId].attributes.brightness || 0;
Expand Down
92 changes: 44 additions & 48 deletions src/cards/horizontal-buttons-stack.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,20 @@ import {
createIcon,
updateIcon,
isColorCloseToWhite,
convertToRGBA,
getIconColor,
getIconStyles
convertToRGBA
} from '../tools/style.ts';
import { checkEditor } from '../tools/init.ts';
import {
initializeContent,
checkEditor,
checkResources
} from '../tools/init.ts';
import {
fireEvent,
forwardHaptic,
navigate,
toggleEntity,
hasStateChanged
navigate
} from '../tools/utils.ts';
import { addActions } from '../tools/tap-actions.ts';
import { getVariables } from '../var/cards.ts';

export function handleHorizontalButtonsStack(context) {

const hass = context._hass;
const editor = context.editor;
let editor;

let {
customStyles,
Expand Down Expand Up @@ -55,6 +46,20 @@ export function handleHorizontalButtonsStack(context) {
color,
} = getVariables(context, context.config, hass, editor);

let editorMode = setInterval(() => {
editor = checkEditor();

if (editor && !context.editorModeAdded) {
context.buttonsContainer.classList.add('editor');
context.card.classList.add('editor');
context.editorModeAdded = true;
} else if (!editor && context.editorModeAdded) {
context.buttonsContainer.classList.remove('editor');
context.card.classList.remove('editor');
context.editorModeAdded = false;
}
}, 100);

const createButton = (button, link, icon) => {
const buttonElement = document.createElement("button");
buttonElement.setAttribute("class", `button ${link.substring(1)}`);
Expand All @@ -65,8 +70,6 @@ export function handleHorizontalButtonsStack(context) {

if (!buttonElement.hasListener) {
buttonElement.addEventListener('click', (event) => {
event.stopPropagation();
forwardHaptic("light");
popUpOpen = location.hash + true;
const manuallyClosed = localStorage.getItem('isManuallyClosed_' + link) === 'true';
if (popUpOpen !== link + true) {
Expand All @@ -76,6 +79,8 @@ export function handleHorizontalButtonsStack(context) {
history.replaceState(null, null, location.href.split('#')[0]);
popUpOpen = link + false;
}
event.stopPropagation();
forwardHaptic("light");
}, { passive: true });

window.addEventListener('urlChanged', highlightButton, { passive: true });
Expand Down Expand Up @@ -180,9 +185,6 @@ export function handleHorizontalButtonsStack(context) {
while (context.buttonsContainer.firstChild) {
context.buttonsContainer.removeChild(context.buttonsContainer.firstChild);
}
localStorage.setItem('editorMode', true);
} else {
localStorage.setItem('editorMode', false);
}
// End of fix

Expand All @@ -199,8 +201,8 @@ export function handleHorizontalButtonsStack(context) {

let currentPosition = 0;
let buttonMargin = 12;
async function updateButtons(context) {

function updateButtons(context) {
if (context.buttonsUpdated) {
return;
}
Expand All @@ -213,29 +215,31 @@ export function handleHorizontalButtonsStack(context) {
promises.push(localStorage.getItem(`buttonContent-${button.link}`));
}
}
let results = await Promise.all(promises);
let index = 0;
for (let button of buttonsList) {
let buttonElement = context.buttons[button.link];
if (buttonElement) {
let buttonWidth = results[index];
let buttonContent = results[index + 1];
index += 2;
if (!buttonWidth || buttonWidth === '0' || buttonContent !== buttonElement.innerHTML || editor) {
buttonWidth = buttonElement.offsetWidth;
await localStorage.setItem(`buttonWidth-${button.link}`, buttonWidth);
await localStorage.setItem(`buttonContent-${button.link}`, buttonElement.innerHTML);
context.previousConfig = context.config;

Promise.all(promises).then(results => {
let index = 0;
for (let button of buttonsList) {
let buttonElement = context.buttons[button.link];
if (buttonElement) {
let buttonWidth = results[index];
let buttonContent = results[index + 1];
index += 2;
if (!buttonWidth || buttonWidth === '0' || buttonContent !== buttonElement.innerHTML || editor) {
buttonWidth = buttonElement.offsetWidth;
localStorage.setItem(`buttonWidth-${button.link}`, buttonWidth);
localStorage.setItem(`buttonContent-${button.link}`, buttonElement.innerHTML);
context.previousConfig = context.config;
}
buttonElement.style.transform = `translateX(${currentPosition}px)`;
currentPosition += parseInt(buttonWidth) + buttonMargin;
}
if (button.lightEntity) {
updateButtonStyle(buttonElement, button.lightEntity, button.link);
}
buttonElement.style.transform = `translateX(${currentPosition}px)`;
currentPosition += parseInt(buttonWidth) + buttonMargin;
}
if (button.lightEntity) {
updateButtonStyle(buttonElement, button.lightEntity, button.link);
}
}

context.buttonsAdded = true;
context.buttonsAdded = true;
});
}

updateButtons(context);
Expand Down Expand Up @@ -379,12 +383,4 @@ export function handleHorizontalButtonsStack(context) {
}

addStyles(hass, context, horizontalButtonsStackStyles, customStyles);

if (editor) {
context.buttonsContainer.classList.add('editor');
context.card.classList.add('editor');
} else {
context.buttonsContainer.classList.remove('editor');
context.card.classList.remove('editor');
}
}
14 changes: 14 additions & 0 deletions src/cards/pop-up-old.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,17 @@
// <h3>Advanced settings</h3>
// <ha-formfield .label="Optional - Back button/event support">
// <ha-switch
// aria-label="Optional - Back button/event support"
// .checked=${this._back_open ? this._back_open : window.backOpen}
// .configValue="${"back_open"}"
// @change=${this._valueChanged}
// ></ha-switch>
// <div class="mdc-form-field">
// <label class="mdc-label">Optional - Back button/event support</label>
// </div>
// </ha-formfield>
// <ha-alert alert-type="info"><b>Back button/event support</b> : This allow you to navigate through your pop-ups history when you press the back button of your browser. <b>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.</b></ha-alert>

import {
addStyles,
createIcon,
Expand Down
Loading

0 comments on commit 8e4fce2

Please sign in to comment.