Callable property on custom element?

Help Requests
1

I’m creating a custom element that wraps the SignaturePad library.

The library exposes an isEmpty() method. However, when I add my custom element into a dialog (to allow a user to sign their name in the dialog), I want to be able to check if a signature has been entered or not. I wanted to do this by calling the isEmpty() method, but that is embedded in the custom element so its not (AFAIK) available to the dialog.

Is there a way to expose this method through my custom element so that I can call it from my dialog?

signature-input.ts

import SignaturePad from 'signature_pad'

export class SignatureInputCustomElement{
    sp: SignaturePad;
    sCanvas : HTMLCanvasElement;

    attached(){
           this.sp = new SignaturePad(this.sCanvas);
           this.resize();
    }

   resize(){
      .. //resizes the canvas appropriately
    }
}

custom-dialog.ts

export class CustomDialog(){
    ...

    saveClick(){
        //Need to check here if signature was added (!SignatureInput.sp.isEmpty())
        let sigExists = ??
         if(sigExists){
              this.dialogController.ok(true);
         }
    }
}
1 Like
2

If you have <signature-input view-model.ref="mySignatureInput"></signature-input> in your custom-dialog.html, you should be able to call let sigExists = this.mySignatureInput.sp.isEmpty(); in your custom-dialog.ts.

1 Like
3

Correct me if I’m wrong, but doesn’t ref= only give me access to the HTMLElement not to its associated ViewModel?

I did try this just to be sure and I don’t appear to have access to the ViewModel.

1 Like
4

I’m guessing khuongduybui meant view-model.ref, which should work fine for this.

However, perhaps you could try to intercept signature pad’s events onBegin() and/or onEnd() in your custom element, check isEmpty() there and assign the result to your own isEmpty property which you can decorate with @bindable?
That way you don’t need the viewmodel ref, and you can just bind to the property in your view using the custom element

1 Like
5

Thanks. I had started looking at onBegin() and onEnd() to see if I could work something out that way. However, I realized I also needed a way to get the image to send to the server using toDataURL(). (Could probably do something similar to what you mentioned with isEmpty()) But view-model.ref worked great – so thanks for that!

3 Likes
6

Will you please publish the custom element when you have a chance? (Gist is just fine)

1 Like
7

Just keep in mind that you introduce a tight coupling in this case. You might want to think about an Event aggregator to loosen the coupling if that makes sense in your usecase

2 Likes
8

I’ve created one here – just sample code of what I came up with.

3 Likes