Skip to content

Commit

Permalink
Feat: Update tire_card_custom and images_swipe configurations (#69)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ngocjohn
ngocjohn authored Sep 30, 2024
1 parent 22c0ce1 commit ae8c25d
Show file tree
Hide file tree
Showing 5 changed files with 425 additions and 79 deletions.
147 changes: 146 additions & 1 deletion src/components/editor/panel-images.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import Sortable from 'sortablejs';
import { VehicleCardEditor } from '../../editor';
import { ImageConfig, VehicleCardConfig } from '../../types';
import { imageInputChange, handleFilePicked } from '../../utils/editor-image-handler';
import { Picker } from '../../utils/create';

import editorcss from '../../css/editor.css';

Expand Down Expand Up @@ -76,11 +77,98 @@ export class PanelImages extends LitElement {
<ha-button @click=${() => this.toggleUpload()} class="upload-btn">
${this.editor.hass.localize('ui.components.selectors.image.upload')}
</ha-button>
<ha-button @click=${() => this.toggleSwiperConfig()} class="swiper-btn"> Swiper Config </ha-button>
</div>
`;
return urlInput;
}

private _renderSwiperConfig(): TemplateResult {
const image = this.config?.extra_configs?.images_swipe || {};
const sharedConfig = {
component: this,
configType: 'images_swipe',
};

const swiperConfig = [
{
value: image.max_height || 150,
configValue: 'max_height',
label: 'Max Height (px)',
options: { selector: { number: { min: 100, max: 500, mode: 'slider', step: 1 } } },
pickerType: 'number' as 'number',
},
{
value: image.max_width || 450,
configValue: 'max_width',
label: 'Max Width (px)',
options: { selector: { number: { min: 100, max: 500, mode: 'slider', step: 1 } } },
pickerType: 'number' as 'number',
},

{
value: image.delay || 3000,
configValue: 'delay',
label: 'Delay (ms)',
options: { selector: { number: { min: 500, max: 10000, mode: 'slider', step: 50 } } },
pickerType: 'number' as 'number',
},
{
value: image.speed || 500,
configValue: 'speed',
label: 'Speed (ms)',
options: { selector: { number: { min: 100, max: 5000, mode: 'slider', step: 50 } } },
pickerType: 'number' as 'number',
},
{
value: image.effect || 'slide',
configValue: 'effect',
label: 'Effect',
items: [
{
value: 'slide',
label: 'Slide',
},
{
value: 'fade',
label: 'Fade',
},
{
value: 'coverflow',
label: 'Coverflow',
},
],
pickerType: 'attribute' as 'attribute',
},
];
const swiperBooleanConfig = [
{
value: image.autoplay || false,
configValue: 'autoplay',
label: 'Autoplay',
pickerType: 'selectorBoolean' as 'selectorBoolean',
},
{
value: image.loop || true,
configValue: 'loop',
label: 'Loop',
pickerType: 'selectorBoolean' as 'selectorBoolean',
},
];

return html` <div class="sub-panel-config image-swiper-config" style="display: none;">
<div class="sub-header">
<div class="sub-header-title">Slide layout configuration</div>
</div>
<div class="sub-panel">
<div>${swiperConfig.map((config) => this.generateItemPicker({ ...config, ...sharedConfig }))}</div>
</div>
<div class="sub-content">
${swiperBooleanConfig.map((config) => this.generateItemPicker({ ...config, ...sharedConfig }), 'sub-content')}
</div>
</div>`;
}

private _imageList(): TemplateResult {
if (this._reindexImages) {
return html`<span>Loading...</span>`;
Expand Down Expand Up @@ -141,6 +229,7 @@ export class PanelImages extends LitElement {

return html`${dropArea}${imageList}`;
}

private _renderDropArea(): TemplateResult {
const errorMsg = this.editor.localize('card.common.toastImageError');

Expand Down Expand Up @@ -185,8 +274,9 @@ export class PanelImages extends LitElement {
protected render(): TemplateResult {
const imageList = this._imageList();
const addNewImage = this._renderUploadAddNewImage();
const swiperConfig = this._renderSwiperConfig();

const content = html`${imageList}${addNewImage}`;
const content = html`${imageList}${addNewImage} ${swiperConfig}`;

return content;
}
Expand All @@ -195,6 +285,25 @@ export class PanelImages extends LitElement {
fireEvent(this.editor, 'config-changed', { config: this.config });
}

private toggleSwiperConfig(): void {
const swiperConfig = this.shadowRoot?.querySelector('.image-swiper-config') as HTMLElement;
const imageList = this.shadowRoot?.getElementById('images-list') as HTMLElement;
const swiperBtn = this.shadowRoot?.querySelector('.swiper-btn') as HTMLElement;
const uploadBtn = this.shadowRoot?.querySelector('.upload-btn') as HTMLElement;
const isHidden = swiperConfig?.style.display === 'none';
if (isHidden) {
swiperConfig.style.display = 'block';
imageList.style.display = 'none';
uploadBtn.style.visibility = 'hidden';
swiperBtn.innerHTML = 'Cancel';
} else {
swiperConfig.style.display = 'none';
uploadBtn.style.visibility = 'visible';
imageList.style.display = 'block';
swiperBtn.innerHTML = 'Swiper Config';
}
}

private toggleUpload(): void {
const dropArea = this.shadowRoot?.getElementById('drop-area') as HTMLElement;
const imageList = this.shadowRoot?.getElementById('images-list') as HTMLElement;
Expand All @@ -210,6 +319,17 @@ export class PanelImages extends LitElement {
addImageBtn.innerHTML = 'Add Image';
}
}

private generateItemPicker(config: any, wrapperClass = 'item-content'): TemplateResult {
return html`
<div class="${wrapperClass}">
${Picker({
...config,
})}
</div>
`;
}

private _handleDragOver(event: DragEvent) {
event.preventDefault();
this.isDragging = true;
Expand All @@ -218,6 +338,7 @@ export class PanelImages extends LitElement {
private _handleDragLeave() {
this.isDragging = false;
}

private _handleDrop(event: DragEvent): void {
event.preventDefault();
this.isDragging = false;
Expand Down Expand Up @@ -353,4 +474,28 @@ export class PanelImages extends LitElement {
this._newImageUrl = '';
this._debouncedConfigChanged();
}

_valueChanged(ev: any): void {
ev.stopPropagation();
if (!this.config) return;

const target = ev.target;
const configValue = target.configValue;
const configType = target.configType;
let newValue: any = ev.detail.value;

const updates: Partial<VehicleCardConfig> = {};

if (configType === 'images_swipe') {
let imagesSwipe = this.config.extra_configs?.images_swipe || {};
imagesSwipe = { ...imagesSwipe, [configValue]: newValue };
updates.extra_configs = { ...this.config.extra_configs, images_swipe: imagesSwipe };
this.config = { ...this.config, ...updates };
this._debouncedConfigChanged();
} else {
updates[configValue] = newValue;
this.config = { ...this.config, ...updates };
this._debouncedConfigChanged();
}
}
}
91 changes: 43 additions & 48 deletions src/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -238,7 +238,6 @@ header h1 {
}
}


.grid-container {
display: grid;
grid-template-columns: repeat(2, minmax(140px, 1fr));
Expand All @@ -251,13 +250,9 @@ header h1 {
.grid-item {
display: flex;
position: relative;
gap: var(--vic-card-padding);
padding: var(--vic-gutter-gap) var(--vic-card-padding);
height: 100%;
flex-direction: row;
align-items: center;
background: var(--secondary-background-color, var(--card-background-color, #fff));
box-shadow: var(--ha-card-box-shadow, none);
box-shadow: var(--ha-card-box-shadow);
box-sizing: border-box;
border-radius: var(--ha-card-border-radius, 12px);
border-width: var(--ha-card-border-width, 1px);
Expand All @@ -266,18 +261,22 @@ header h1 {
transition: all 0.3s ease-out;
opacity: 1;
cursor: pointer;
}

&:hover {
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.3);
}
.grid-item:hover {
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.3);
}

/* @media screen and (max-width: 768px) {
.grid-item {
padding: 8px;
gap: 0.5rem;
}
} */

.grid-item .click-container {
display: flex;
height: 100%;
flex-direction: row;
align-items: center;
gap: var(--vic-card-padding);
}


.grid-item .item-notify {
display: flex;
position: absolute;
Expand All @@ -293,12 +292,6 @@ header h1 {
display: none;
}

/* .grid-item .item-icon {
display: inline-block;
border-radius: 50% 50%;
background-color: var(--chip-background-color);
padding: 0.5rem;
} */

.grid-item .item-icon {
position: relative;
Expand Down Expand Up @@ -326,23 +319,23 @@ header h1 {
flex-direction: column;
min-width: 0;
overflow: hidden;
}

.primary {
font-weight: 500;
font-size: 1rem;
white-space: nowrap;
position: relative;
text-overflow: ellipsis;
overflow: hidden;
}
.grid-item .item-content .primary {
font-weight: 500;
font-size: 1rem;
white-space: nowrap;
position: relative;
text-overflow: ellipsis;
overflow: hidden;
}

.secondary {
color: var(--secondary-text-color);
/* text-transform: capitalize; */
letter-spacing: 0.5px;
font-size: smaller;
text-wrap: nowrap;
}
.grid-item .item-content .secondary {
color: var(--secondary-text-color);
/* text-transform: capitalize; */
letter-spacing: 0.5px;
font-size: smaller;
text-wrap: nowrap;
}

.primary.title-wrap {
Expand Down Expand Up @@ -515,6 +508,7 @@ header h1 {
transition: all 0.3s ease-out;
/* margin-bottom: 1rem; */
position: relative;
overflow: hidden;
}

.default-card:not(:first-child) {
Expand Down Expand Up @@ -701,10 +695,10 @@ dialog::backdrop {
opacity: 0.5;
cursor: pointer;
transition: opacity 0.3s;
}

&:hover {
opacity: 1;
}
.tyre-toggle-btn:hover {
opacity: 1;
}

/* TYRE WRAP ROTATED */
Expand All @@ -718,22 +712,22 @@ dialog::backdrop {

.tyre-wrapper .background {
position: absolute;
width: 100%;
height: 100%;
width: var(--vic-tire-size, 100%);
height: var(--vic-tire-size, 100%);
z-index: 0;
top: 50%;
left: 50%;
top: var(--vic-tire-top, 50%);
left: var(--vic-tire-left, 50%);
transform: translate(-50%, -50%);
background-size: cover;
background-size: contain;
background-repeat: no-repeat;
overflow: hidden;
filter: drop-shadow(2px 4px 1rem #000000d8);
}

.tyre-wrapper .tyre-box {
position: absolute;
width: 30%;
height: 60%;
width: 35%;
height: 50%;
z-index: 1;
display: flex;
align-items: center;
Expand All @@ -742,6 +736,7 @@ dialog::backdrop {
gap: 0.5rem;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
transition: all 400ms cubic-bezier(0.3, 0.0, 0.8, 0.15);
scale: var(--vic-tire-value-size);
}

.tyre-value {
Expand All @@ -753,11 +748,11 @@ dialog::backdrop {

.tyre-name {
color: var(--secondary-text-color);
text-align: center;
text-align: left;
margin: 0;
text-transform: uppercase;
letter-spacing: 1.5px;
text-wrap: pretty;
text-wrap: nowrap;
}

.tyre-info {
Expand Down
Loading

0 comments on commit ae8c25d

Please sign in to comment.