Apply jQuery Events to gadgets

[Peter]

I don't know if similar code already exists, but here is a snippet that allows you to apply jQuery events to gadgets.

Code: Select all

Procedure SelectorOn(Gadget, Event.s, Callback)
  If IsGadget(Gadget) = 0
    Debug "SelectorOn(): Invalid Gadget"
    ProcedureReturn
  EndIf
  Protected GID
  GID = GadgetID(Gadget)
  ! $(v_gid.gadget).on(v_event, function() { v_callback(v_gadget) } );
EndProcedure

Procedure SelectorOff(Gadget, Event.s)
  If IsGadget(Gadget) = 0
    Debug "SelectorOff(): Invalid Gadget"
    ProcedureReturn
  EndIf
  Protected GID
  GID = GadgetID(Gadget)
  ! $(v_gid.gadget).off(v_event);
EndProcedure

Example application:

Code: Select all

Procedure SelectorOn(Gadget, Event.s, Callback)
  If IsGadget(Gadget) = 0
    Debug "SelectorOn(): Invalid Gadget"
    ProcedureReturn
  EndIf
  Protected GID
  GID = GadgetID(Gadget)
  ! $(v_gid.gadget).on(v_event, function() { v_callback(v_gadget) } );
EndProcedure

Procedure SelectorOff(Gadget, Event.s)
  If IsGadget(Gadget) = 0
    Debug "SelectorOff(): Invalid Gadget"
    ProcedureReturn
  EndIf
  Protected GID
  GID = GadgetID(Gadget)
  ! $(v_gid.gadget).off(v_event);
EndProcedure

Procedure ImageMouseEnter(Gadget)
  
  Debug "ImageMouseEnter: " + Gadget
  
EndProcedure

Procedure ImageMouseLeave(Gadget)
  
  Debug "ImageMouseLeave: " + Gadget
  
EndProcedure


If OpenWindow(0, 0, 0, 245, 105, "ImageGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  
  CreateImage(0, 16, 16, 32, #PB_Image_Transparent)
  
  If StartDrawing(ImageOutput(0))
    Circle(8, 8, 7, RGB(255, 0, 0))
    StopDrawing()
  EndIf
  
  ImageGadget(0,  10, 10, 100, 83, ImageID(0))                    ; imagegadget standard
  ImageGadget(1, 130, 10, 100, 83, ImageID(0), #PB_Image_Border)  ; imagegadget with border
  
  SelectorOn(0, "mouseenter", @ImageMouseEnter())
  SelectorOn(1, "mouseenter", @ImageMouseEnter())
  
  SelectorOn(0, "mouseleave", @ImageMouseLeave())
  SelectorOn(1, "mouseleave", @ImageMouseLeave())

EndIf

[Dirk Geppert]

Great stuff Peter! Thx!!

[Stefan]

I don't fully understand the example yet, but it looks very good! Maybe I can use it
Thank you very much, Peter!

[Quin]

I designed an old web app using Jquery, this is taking me way back. Thanks for sharing 8)