Hello,

with the help of chatGPT I defined a wrapper for

https://github.com/Choices-js/Choices

now, that class fires a custom event

https://github.com/Choices-js/Choices#events

how can I wrap that?

What I'm doing now is quite cumbersome/inelegant (here I'm trying to get the value of the selection):

procedure TMyApplication.BindElements;
begin
  theselect:=TJSHTMLSelectElement(document.getElementById('choices-test'));
  thechoice:=TChoices.new(theselect,new([
     'allowHTML', true
     ]));
   thechoice.setChoices(
     [
       new(['value','a','label','valor a']),
       new(['value','b','label','valor b']),
       new(['value','c','label','valor c'])
     ],'value','label',true
   );
   theselect.addEventListener('choice', at ShowSelection);
end;
procedure TMyApplication.ShowSelection(event: TJSEvent);
var
   detail,choice: TJSObject;
   value: JSValue;
begin
   detail:=TJSObject(event.Properties['detail']);
   console.log(detail);
   choice:=TJSObject(detail.Properties['choice']);
   console.log(choice);
   value:=choice.Properties['value'];
   console.log(value);
end;

gpt suggestion (that I didn't try because the "external name 'Event'" is already used for the definition of TJSEvent) is:

type
   TEvent = class external name 'Event'
   public
     property target: TJSObject; external name 'target';
     property currentTarget: TJSObject; external name 'currentTarget';
     property type_: string; external name 'type';
     property detail: TJSObject; external name 'detail';
     // Add other properties and methods as needed
   end;

Bye

You can reuse a external name.

The chatGPT suggestion is not quite correct.

One of the following should do it.

type
   // read-only properties
   TMyDetail = class external name 'Event' (TJSObject)
   private
     fchoice : TJSObject; external name 'choice';
   public
     property choice : TJSObject read fchoice;
   end;
   TMyEvent = class external name 'Event' (TJSEvent)
   Private
     fdetail : TMyDetail; external name 'detail';
   public
     property detail: TJSObject read fChoice;
   end;
Or
   // Read-write properties can be replaced with simple fields.
   TMyDetail = class external name 'Event' (TJSObject)
     choice : TJSObject; external name 'choice';
   end;
   TMyEvent = class external name 'Event' (TJSEvent)
     detail : TMyDetail; external name 'detail';
   end;

Michael.

Copy & paste error, this should be
TMyDetail = class external name 'Object' (TJSObject)

Michael.

Human intelligence:

type
  TChoisesDetail = class external name 'Something'
    ...
  end;
  TChoicesChoiceEvent = class external name 'ChoiceEvent' (TJSEvent)
  private
    FDetail: TChoisesDetail; external name 'detail';
  public
    property Detail: TChoisesDetail read FDetail;
  end;

Mattias

El 22/5/23 a les 10:49, Michael Van Canneyt via Pas2js ha escrit:

You can reuse a external name.

OK, but I think there is no need to (see below)

The chatGPT suggestion is not quite correct.

Well, yes, the original wrapper for the class was quite buggy and incomplete, but it put me on the right track. Besides, it found all the methods of the Choices class by just giving it the github url.

Anyway, this is what I came up with:

   TChoices = class external name 'Choices'
   public
     constructor new(element: TJSObject; options: JSValue);
     procedure init;
     procedure destroy;
     procedure clear;
     function getValue(pick: Boolean = False): JSValue;
     procedure setValue(value: JSValue);
     function isActiveElement: Boolean;
     procedure highlightItem(item: TJSNode; runEvent: Boolean = True);
     procedure unhighlightItem(item: TJSNode; runEvent: Boolean = True);
     procedure highlightAll(runEvent: Boolean = True);
     procedure unhighlightAll(runEvent: Boolean = True);
     procedure removeActiveItemsByValue(value: JSValue; runEvent:
Boolean = True);
     procedure removeActiveItems(runEvent: Boolean = True);
     procedure enable;
     procedure disable;
     procedure clearStore;
     procedure clearInput(runEvent: Boolean = True);
     procedure setChoices(choices: array of JSValue; value: JSValue =
nil; label_: JSValue = nil; replaceChoices: Boolean = False);
     procedure setChoiceByValue(value: JSValue; runEvent: Boolean = True);
     procedure clearChoices;
   end;
   TChoice = class (TJsObject)
   private
     FActive: boolean; external name 'active';
     FDisabled: boolean; external name 'disabled';
     FElementId: string; external name 'elementId';
     FgroupId: integer; external name 'groupId';
     Fid: integer; external name 'id';
     FKeyCode: integer; external name 'keyCode';
     FLabel: string; external name 'label';
     FPlaceholder: boolean; external name 'placeholder';
     FScore:integer; external name 'score';
     FSelected:boolean; external name 'selected';
     FValue:string; external name 'value';
   public
     property Active:boolean read FActive;
     property Disabled:boolean read FDisabled;
     property ElementId:string read FElementId;
     property GroupId:integer read FGroupId;
     property Id:integer read FId;
     property KeyCode:integer read FKeyCode;
     property Label_:string read FLabel;
     property Placeholder:boolean read FPlaceHolder;
     property Score:integer read FScore;
     property Value:string read FValue;
   end;
   TChoiceEvent = class(TJsEvent)
   private
     FDetail : TJSObject; external name 'detail';
   public
     property Detail:TJSObject read FDetail;
   end;
   TChoiceEventDetail = class(TJsObject)
   private
     FChoice: TChoice; external name 'choice';
   public
     property Choice:TChoice read FChoice;
   end;
procedure TMyApplication.ShowSelection(event: TJSEvent);
var
   choice: TChoice;
begin
   choice:=TChoiceEventDetail(TChoiceEvent(event).Detail).Choice;
   console.log(choice);
   console.log(choice.active);
   console.log(choice.disabled);
   console.log(choice.elementid);
   console.log(choice.groupid);
   console.log(choice.KeyCode);
   console.log(choice.id);
   console.log(choice.Label_);
   console.log(choice.placeholder);
   console.log(choice.score);
   console.log(choice.value);
end;

It seems to work OK

Bye

El 22/5/23 a les 12:14, Luca Olivetti via Pas2js ha escrit:

It seems to work OK

I forgot the Selected property and, while in the object (console.log(choice)) I see it is true, console.log(choice.selected) shows false.

   TChoice = class (TJsObject)
   private
     FActive: boolean; external name 'active';
     FDisabled: boolean; external name 'disabled';
     FElementId: string; external name 'elementId';
     FgroupId: integer; external name 'groupId';
     Fid: integer; external name 'id';
     FKeyCode: integer; external name 'keyCode';
     FLabel: string; external name 'label';
     FPlaceholder: boolean; external name 'placeholder';
     FScore:integer; external name 'score';
     FSelected:boolean; external name 'selected';
     FValue:string; external name 'value';
   public
     property Active:boolean read FActive;
     property Disabled:boolean read FDisabled;
     property ElementId:string read FElementId;
     property GroupId:integer read FGroupId;
     property Id:integer read FId;
     property KeyCode:integer read FKeyCode;
     property Label_:string read FLabel;
     property Placeholder:boolean read FPlaceHolder;
     property Score:integer read FScore;
     property Selected:boolean read FSelected;
     property Value:string read FValue;
   end;

Bye

If the pascal declaration was wrong, then you would get 'undefined' for console.log(choice.selected) so the error is somewhere else.

Michael.