Skip to content

Commit b8d08f8

Browse files
committed
WIP
1 parent a137c36 commit b8d08f8

File tree

14 files changed

+101
-71
lines changed

14 files changed

+101
-71
lines changed

demo/validators.html

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -26,20 +26,13 @@
2626
</head>
2727

2828
<uc-file-uploader-regular ctx-name="my-uploader"></uc-file-uploader-regular>
29-
<uc-config multipleMax="2" ctx-name="my-uploader" pubkey="c41dcdfa79a81e265549"></uc-config>
29+
<uc-config multipleMax="2" ctx-name="my-uploader" pubkey="demopublickey"></uc-config>
3030
<uc-upload-ctx-provider ctx-name="my-uploader"></uc-upload-ctx-provider>
3131

3232
<script type="module">
3333
const config = document.querySelector('uc-config');
3434
const imagesOnly = (fileInfo, ctx) => {
35-
if (fileInfo.isImage) {
36-
return {
37-
message: ctx.l10n('file-is-not-an-image-type'),
38-
payload: {
39-
entry: fileInfo,
40-
},
41-
};
42-
}
35+
console.log('vali', fileInfo)
4336
};
4437

4538
config.fileValidators = [imagesOnly];

src/abstract/TypedData.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,15 +58,17 @@ export class TypedData<T extends TypedSchema> {
5858
}
5959
const pDesc = this.__typedSchema[prop];
6060

61+
const isChanged = this.__data.read(prop) !== value;
6162
const isMatchConstructorType = value?.constructor === pDesc.type;
6263
const isMatchInstanceType = (value as object) instanceof (pDesc.type as Constructor);
6364
const isMatchNullable = pDesc.nullable && value === null;
6465

65-
if (isMatchConstructorType || isMatchInstanceType || isMatchNullable) {
66+
if (isChanged && (isMatchConstructorType || isMatchInstanceType || isMatchNullable)) {
6667
this.__data.pub(prop, value);
6768
return;
69+
} else if (isChanged) {
70+
console.warn(MSG_TYPE + prop);
6871
}
69-
console.warn(MSG_TYPE + prop);
7072
}
7173

7274
setMultipleValues(updObj: Partial<ExtractDataFromSchema<T>>): void {

src/abstract/UploaderPublicApi.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
LitActivityBlock,
1212
type RegisteredActivityType,
1313
} from '../lit/LitActivityBlock';
14+
import type { LitBlock } from '../lit/LitBlock';
1415
import type { LitUploaderBlock } from '../lit/LitUploaderBlock';
1516
import type {
1617
OutputCollectionState,
@@ -31,7 +32,6 @@ import {
3132
import { parseCdnUrl } from '../utils/parseCdnUrl';
3233
import { stringToArray } from '../utils/stringToArray';
3334
import { UploadSource } from '../utils/UploadSource';
34-
import type { LitBlock } from '../lit/LitBlock';
3535
import { buildOutputCollectionState } from './buildOutputCollectionState';
3636
import type { UploadEntryData } from './uploadEntrySchema';
3737

@@ -240,7 +240,6 @@ export class UploaderPublicApi {
240240

241241
getOutputItem<TStatus extends OutputFileStatus>(entryId: string): OutputFileEntry<TStatus> {
242242
const uploadEntryData = PubSub.getCtx(entryId).store as UploadEntryData;
243-
244243
const fileInfo = uploadEntryData.fileInfo as UploadcareFile | null;
245244

246245
const status: OutputFileEntry['status'] = uploadEntryData.isRemoved

src/blocks/CloudImageEditor/src/EditorAspectRatioButtonControl.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,8 @@ export class EditorFreeformButtonControl extends EditorButtonControl {
5858
role="option"
5959
type="button"
6060
class=${classMap(this.buttonClasses)}
61-
aria-label=${ifDefined(this.computedAriaLabel)}
62-
title=${ifDefined(this.computedAriaLabel)}
61+
aria-label=${ifDefined(this.titleProp)}
62+
title=${ifDefined(this.titleProp)}
6363
@click=${clickHandler}
6464
>
6565
<div class="uc-title" ?hidden=${!title}>${title}</div>
@@ -183,8 +183,8 @@ export class EditorAspectRatioButtonControl extends EditorButtonControl {
183183
role="option"
184184
type="button"
185185
class=${classMap(this.buttonClasses)}
186-
aria-label=${ifDefined(this.computedAriaLabel)}
187-
title=${ifDefined(this.computedAriaLabel)}
186+
aria-label=${ifDefined(this.titleProp)}
187+
title=${ifDefined(this.titleProp)}
188188
@click=${clickHandler}
189189
>
190190
<uc-icon>${this.renderIcon()}</uc-icon>

src/blocks/CloudImageEditor/src/EditorButtonControl.ts

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -32,11 +32,6 @@ export class EditorButtonControl extends LitBlock {
3232
}
3333
}
3434

35-
protected get computedAriaLabel(): string | undefined {
36-
const label = this.titleProp;
37-
return label ? String(label) : undefined;
38-
}
39-
4035
protected onClick(_event: MouseEvent): void {}
4136

4237
override connectedCallback(): void {
@@ -59,8 +54,8 @@ export class EditorButtonControl extends LitBlock {
5954
<button
6055
role="option"
6156
type="button"
62-
aria-label=${ifDefined(this.computedAriaLabel)}
63-
title=${ifDefined(this.computedAriaLabel)}
57+
aria-label=${ifDefined(this.titleProp)}
58+
title=${ifDefined(this.titleProp)}
6459
@click=${clickHandler}
6560
>
6661
<uc-icon name=${this.icon}></uc-icon>

src/blocks/CloudImageEditor/src/EditorCropButtonControl.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ export class EditorCropButtonControl extends EditorButtonControl {
2929
super.willUpdate(_changedProperties);
3030

3131
if (this.operation) {
32-
// TODO: Add reactive binding for l10n
3332
this.titleProp = this.l10n('a11y-cloud-editor-apply-crop', {
3433
name: this.l10n(this.operation).toLowerCase(),
3534
});

src/blocks/CloudImageEditor/src/EditorFilterControl.ts

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ export class EditorFilterControl extends EditorButtonControl {
1717
private _originalUrl = '';
1818
private _observer?: IntersectionObserver;
1919
private _cancelPreload?: () => void;
20-
private _labelsBound = false;
2120
private _lastPreviewRequestId = 0;
2221
private previewVisibilityCheckRaf?: number;
2322
private previewVisibilityCheckTimeout?: number;
@@ -125,7 +124,7 @@ export class EditorFilterControl extends EditorButtonControl {
125124
this.schedulePreviewVisibilityCheck();
126125
}
127126

128-
if (this._filter && !this._labelsBound) {
127+
if (this._filter) {
129128
this.updateFilterLabels(this._filter);
130129
}
131130

@@ -167,19 +166,14 @@ export class EditorFilterControl extends EditorButtonControl {
167166

168167
private updateFilterLabels(filterName: string): void {
169168
if (!filterName) {
169+
this.titleProp = '';
170170
return;
171171
}
172172

173-
const resolveTitleProp = () => {
174-
const label = this.l10n('a11y-cloud-editor-apply-filter', {
175-
name: filterName.toLowerCase(),
176-
});
177-
this.titleProp = label;
178-
return label;
179-
};
180-
181-
resolveTitleProp();
182-
this._labelsBound = false;
173+
const label = this.l10n('a11y-cloud-editor-apply-filter', {
174+
name: filterName.toLowerCase(),
175+
});
176+
this.titleProp = label;
183177
}
184178

185179
private async loadPreview(observer?: IntersectionObserver): Promise<void> {
@@ -293,8 +287,8 @@ export class EditorFilterControl extends EditorButtonControl {
293287
role="option"
294288
type="button"
295289
class=${classMap(this.buttonClasses)}
296-
aria-label=${ifDefined(this.computedAriaLabel)}
297-
title=${ifDefined(this.computedAriaLabel)}
290+
aria-label=${ifDefined(this.titleProp)}
291+
title=${ifDefined(this.titleProp)}
298292
@click=${clickHandler}
299293
>
300294
<div class="uc-preview" ?loaded=${this.previewLoaded} style=${styleMap(previewStyles)}></div>

src/blocks/CloudImageEditor/src/EditorOperationControl.ts

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { parseFilterValue } from './utils/parseFilterValue.js';
77

88
export class EditorOperationControl extends EditorButtonControl {
99
private _operation: ColorOperation | '' = '';
10-
private _operationLabelsBound = false;
1110

1211
@property({ type: String })
1312
get operation(): ColorOperation | '' {
@@ -46,13 +45,12 @@ export class EditorOperationControl extends EditorButtonControl {
4645

4746
resolveTitleProp();
4847
resolveTitle();
49-
this._operationLabelsBound = false;
5048
}
5149

5250
override initCallback(): void {
5351
super.initCallback();
5452

55-
if (this._operation && !this._operationLabelsBound) {
53+
if (this._operation) {
5654
this.updateOperationMetadata(this._operation as ColorOperation);
5755
}
5856

src/blocks/CloudImageEditor/src/elements/button/BtnUi.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,8 @@ export class BtnUi extends LitBlock {
8585
type="button"
8686
role=${ifDefined(this.ariaRole || undefined)}
8787
aria-controls=${ifDefined(this.ariaControls || undefined)}
88+
aria-label=${ifDefined(this.l10n(this.titleProp))}
89+
title=${ifDefined(this.l10n(this.titleProp))}
8890
>
8991
<uc-icon
9092
class=${classMap(this.iconClassMap)}

src/blocks/CloudImageEditorActivity/CloudImageEditorActivity.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { html } from 'lit';
1+
import { html, nothing } from 'lit';
22
import { state } from 'lit/decorators.js';
33
import { ifDefined } from 'lit/directives/if-defined.js';
44
import type { TypedData } from '../../abstract/TypedData';
@@ -116,7 +116,7 @@ export class CloudImageEditorActivity extends LitUploaderBlock {
116116

117117
override render() {
118118
if (!this.editorConfig) {
119-
return html``;
119+
return nothing;
120120
}
121121

122122
const { cdnUrl, cropPreset, tabs } = this.editorConfig;

0 commit comments

Comments
 (0)