Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(img): add ionError event #17134

Merged
merged 7 commits into from Mar 27, 2019
Merged

feat(img): add ionError event #17134

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9d99560
feat(img): add ionError event
pickfire Jan 16, 2019
e3d8fd4
Merge branch 'master' into master
manucorporat Jan 19, 2019
a87cc2d
Merge branch 'master' into master
liamdebeasi Mar 22, 2019
7f4e70c
Merge branch 'master' into master
liamdebeasi Mar 26, 2019
9759a0d
Merge branch 'master' into master
liamdebeasi Mar 27, 2019
ff1e728
update event descriptions
liamdebeasi Mar 27, 2019
9249ea2
run build
liamdebeasi Mar 27, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 2 additions & 1 deletion angular/src/directives/proxies.ts
View file
Open in desktop
Expand Up @@ -294,11 +294,12 @@ export declare interface IonImg extends StencilComponents<'IonImg'> {}
@Component({ selector: 'ion-img', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['alt', 'src'] })
export class IonImg {
ionImgDidLoad!: EventEmitter<CustomEvent>;
ionError!: EventEmitter<CustomEvent>;
protected el: HTMLElement;
constructor(c: ChangeDetectorRef, r: ElementRef) {
c.detach();
this.el = r.nativeElement;
proxyOutputs(this, this.el, ['ionImgDidLoad']);
proxyOutputs(this, this.el, ['ionImgDidLoad', 'ionError']);
}
}
proxyInputs(IonImg, ['alt', 'src']);
Expand Down
1 change: 1 addition & 0 deletions core/api.txt
View file
Open in desktop
Expand Up @@ -380,6 +380,7 @@ ion-header,prop,translucent,boolean,false,false,false
ion-img,shadow
ion-img,prop,alt,string | undefined,undefined,false,false
ion-img,prop,src,string | undefined,undefined,false,false
ion-img,event,ionError,void,true
ion-img,event,ionImgDidLoad,void,true

ion-infinite-scroll-content,none
Expand Down
6 changes: 5 additions & 1 deletion core/src/components.d.ts
View file
Open in desktop
Expand Up @@ -1546,7 +1546,11 @@ export namespace Components {
*/
'alt'?: string;
/**
* Emitted when the img src is loaded
* Emitted when the img fails to load
*/
'onIonError'?: (event: CustomEvent<void>) => void;
/**
* Emitted when the img src has been set
*/
'onIonImgDidLoad'?: (event: CustomEvent<void>) => void;
/**
Expand Down
13 changes: 12 additions & 1 deletion core/src/components/img/img.tsx
View file
Open in desktop
Expand Up @@ -13,6 +13,8 @@ export class Img implements ComponentInterface {

@State() loadSrc?: string;

@State() loadError?: () => void;

/**
* This attribute defines the alternative text describing the image.
* Users will see this text displayed if the image URL is wrong,
Expand All @@ -29,9 +31,12 @@ export class Img implements ComponentInterface {
this.addIO();
}

/** Emitted when the img src is loaded */
/** Emitted when the img src has been set */
@Event() ionImgDidLoad!: EventEmitter<void>;

/** Emitted when the img fails to load */
@Event() ionError!: EventEmitter<void>;

componentDidLoad() {
this.addIO();
}
Expand Down Expand Up @@ -60,10 +65,15 @@ export class Img implements ComponentInterface {
}

private load() {
this.loadError = this.onError;
this.loadSrc = this.src;
this.ionImgDidLoad.emit();
}

private onError = () => {
this.ionError.emit();
}

private removeIO() {
if (this.io) {
this.io.disconnect();
Expand All @@ -77,6 +87,7 @@ export class Img implements ComponentInterface {
src={this.loadSrc}
alt={this.alt}
decoding="async"
onError={this.loadError}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wondering why we can't just use onError directly

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That error trigger even before the image start loading as there is no src.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@pickfire I think manu means removing onError={this.loadError} and instead using the Listen decorator:

@Listen('error')
onImgError(ev: Event) {
 // Your code from loadError
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tested that but it does not seem to work.

  /** Emitted when img failed to load */
  @Event() ionError!: EventEmitter<void>;

  @Listen('error')
  onImgError() {
    this.ionError.emit();
  }
  ...
  render() {
    return (
      <img
        src={this.loadSrc}
        alt={this.alt}
        decoding="async"
        // onError={this.loadError}
      />
    );
  }

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe this is because the error event does not bubble: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror

/>
);
}
Expand Down
7 changes: 4 additions & 3 deletions core/src/components/img/readme.md
View file
Open in desktop
Expand Up @@ -79,9 +79,10 @@ export default Example

## Events

| Event | Description | Type |
| --------------- | ---------------------------------- | ------------------- |
| `ionImgDidLoad` | Emitted when the img src is loaded | `CustomEvent<void>` |
| Event | Description | Type |
| --------------- | ------------------------------------- | ------------------- |
| `ionError` | Emitted when the img fails to load | `CustomEvent<void>` |
| `ionImgDidLoad` | Emitted when the img src has been set | `CustomEvent<void>` |


----------------------------------------------
Expand Down
11 changes: 11 additions & 0 deletions core/src/components/img/test/basic/index.html
View file
Open in desktop
Expand Up @@ -31,6 +31,13 @@
<f></f>
<f></f>
<ion-img id="hidden" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAARQAQMAAAA2ut43AAAABlBMVEXMzMz////TjRV2AAAEPUlEQVR42u3RMREAMBDDsPAn/eXhavOq87Ztu7u7+6eBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBf2hvgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgatgn4GBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGr7S0wMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDBwFewzMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwcLW9BQYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBq6CfQYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgautrfAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAVbDPwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwNX2FhgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGLgK9hkYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBi42t4CAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDV8E+AwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDA1fbW2BgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYOAq2GdgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGDgansLDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMXAX7DAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDFxtb4GBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGrYJ+BgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBq+0tMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwcBXsMzAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMHC1vQUGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgaugn0GBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGjvYD5WuYrpZqdmcAAAAASUVORK5CYII="></ion-img>
<f></f>
<f></f>
<f></f>
<f></f>
<f></f>
<f></f>
<ion-img id="hidden" src="data:image/png;base64,"></ion-img>

</ion-content>

Expand Down Expand Up @@ -63,6 +70,10 @@
document.body.addEventListener('ionImgDidLoad', (event) => {
console.log('image did load', event.target);
});

document.body.addEventListener('ionError', (event) => {
console.error('image error', event.target);
});
</script>
</body>

Expand Down