Page 1 of 1

Closable (& disableable) PanelGadget-Items with Callback

Posted: Fri May 05, 2017 9:24 am
by Peter
Hello,

here is a code for implementing a Close-Button for PanelGadget-Items:

Image

Code: Select all

EnableExplicit

Procedure PanelGadgetSetItemCloseCallback(Gadget, Position, Callback)
  
  If GadgetType(Gadget) <> #PB_GadgetType_Panel : ProcedureReturn : EndIf
  If Position < 0 : Position = 0 : EndIf
  If Position > CountGadgetItems(Gadget) - 1 : Position = CountGadgetItems(Gadget) - 1 : EndIf
  
  Protected GID = GadgetID(Gadget)
  
  ! dijit.byId(v_gid.gadget.id).getChildren()[v_position].set("onClose", function() { v_callback(v_gadget, v_position); } )
  
EndProcedure

Procedure PanelGadgetSetItemClosable(Gadget, Position, Closable)
  
  If GadgetType(Gadget) <> #PB_GadgetType_Panel : ProcedureReturn : EndIf
  If Position < 0 : Position = 0 : EndIf
  If Position > CountGadgetItems(Gadget) - 1 : Position = CountGadgetItems(Gadget) - 1 : EndIf
  
  Protected GID = GadgetID(Gadget)
  
  ! dijit.byId(v_gid.gadget.id).getChildren()[v_position].set("closable", v_closable)
  
EndProcedure

Procedure PanelGadgetSetItemDisabled(Gadget, Position, Disabled)
  
  If GadgetType(Gadget) <> #PB_GadgetType_Panel : ProcedureReturn : EndIf
  If Position < 0 : Position = 0 : EndIf
  If Position > CountGadgetItems(Gadget) - 1 : Position = CountGadgetItems(Gadget) - 1 : EndIf
  
  Protected GID = GadgetID(Gadget)
  
  ! dijit.byId(v_gid.gadget.id).getChildren()[v_position].set("disabled", v_disabled)
  
EndProcedure

; Example:

Procedure Panel_onClose(Gadget, Position)
  
  Protected PanelText.s = GetGadgetItemText(Gadget, Position)
  Protected ItemCounter

  ! if (confirm('Do you really want to close ' + v_paneltext + '?')) {
  RemoveGadgetItem(Gadget, Position)
  ; Reset the Callback with the new indices:
  For ItemCounter = 0 To CountGadgetItems(Gadget) -1
  	PanelGadgetSetItemCloseCallback(Gadget, ItemCounter, @Panel_onClose())
  Next
  !  }
  
EndProcedure

Enumeration
  #myWindow
  #myPanelGadget
EndEnumeration

If OpenWindow(#myWindow, 0, 0, 600, 400, "PanelGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  
  PanelGadget  (#myPanelGadget, 10, 10, 580, 380)
  AddGadgetItem(#myPanelGadget, -1, "Panel 1")
  AddGadgetItem(#myPanelGadget, -1, "Panel 2")
  AddGadgetItem(#myPanelGadget, -1, "Panel 3")
  AddGadgetItem(#myPanelGadget, -1, "Panel 4")
  AddGadgetItem(#myPanelGadget, -1, "Panel 5 (disabled)")
  CloseGadgetList()
  
  PanelGadgetSetItemCloseCallback(#myPanelGadget, 0, @Panel_onClose())
  PanelGadgetSetItemClosable     (#myPanelGadget, 0, #True)
  
  PanelGadgetSetItemCloseCallback(#myPanelGadget, 2, @Panel_onClose())
  PanelGadgetSetItemClosable     (#myPanelGadget, 2, #True)
  
  PanelGadgetSetItemCloseCallback(#myPanelGadget, 4, @Panel_onClose())
  PanelGadgetSetItemClosable     (#myPanelGadget, 4, #True)
  
  PanelGadgetSetItemDisabled     (#myPanelGadget, 4, #True) ; disable Panel 5
  
EndIf
v_greetings ... Peter

// Edit: Code improved

Re: Closable PanelGadget-Items with Callback

Posted: Fri May 05, 2017 11:19 am
by bbanelli
Fantastic, as always!

Image

Is this bug in Chrome?

Re: Closable PanelGadget-Items with Callback

Posted: Fri May 05, 2017 3:40 pm
by Peter
bbanelli wrote:Is this bug in Chrome?
i guess, this is a bug in the Dijit Flat-CSS (the Aeroglass-CSS seems to be ok).

The first posting is updated with an improved code.

Greetings ... Peter

// Edit: Ups! There is a bug in the code above. Stay tuned... :ugeek:

// Edit2: Code improved again. Should work now... :P

Re: Closable (& disableable) PanelGadget-Items with Callback

Posted: Wed Feb 17, 2021 5:05 pm
by skinkairewalker
have a way to remove this black border on click in tab ?

https://prnt.sc/zvkwkj

Re: Closable (& disableable) PanelGadget-Items with Callback

Posted: Wed Feb 17, 2021 6:33 pm
by Peter
skinkairewalker wrote:have a way to remove this black border on click in tab ?
The border does not appear for me.

Image

Have you integrated another CSS? Which browser are you using?

Perhaps this one will help:

Code: Select all

! $("head").append("<style>.dijitTab:focus{outline: none;}</style>");

Re: Closable (& disableable) PanelGadget-Items with Callback

Posted: Thu Feb 18, 2021 3:03 am
by skinkairewalker
Have you integrated another CSS?
i do not think so ...
but, when mouse over or mouse click near to black border, show this events : https://prnt.sc/zxbm9z
Which browser are you using?
Chrome v88.0.4324.182 (oficial) 64 bits
Perhaps this one will help:

Code: Select all

! $("head").append("<style>.dijitTab:focus{outline: none;}</style>");
[/quote]

is there any specific location that i need to put the line on? because it didn’t work by putting it inside the functions or in the main flow ...

Re: Closable (& disableable) PanelGadget-Items with Callback

Posted: Sun Feb 21, 2021 12:52 pm
by Peter
@skinkairewalker: Can you provide a small test web page? Then I could identify the corresponding element relatively quickly.