AccordionContainer

Got an idea for enhancing SpiderBasic? New command(s) you'd like to see?
User avatar
Arbrakaan
Posts: 91
Joined: Mon Feb 24, 2014 10:54 pm
Location: Geneva
Contact:

AccordionContainer

Post by Arbrakaan »

Would be awsome to get some accordion container for SpiderBasic.

https://dojotoolkit.org/reference-guide ... ainer.html
the.weavster
Posts: 220
Joined: Sat Mar 01, 2014 3:02 pm

Re: AccordionContainer

Post by the.weavster »

+1
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: AccordionContainer

Post by Peter »

I don't think that will be implemented in the foreseeable future.

Here's a demo I made almost two years ago:

Image

http://spiderbytes.tuebben.de/demos/DijitAccordion/

DijitAccordion.sb:

Code: Select all

EnableExplicit

XIncludeFile "DijitAccordion.sbi"

Enumeration
  #Window
  #Accordion1
  #Image
EndEnumeration

Procedure SizeWindowEvent()
  
  ResizeGadget(#Accordion1, 0, 0, WindowWidth(#Window), WindowHeight(#Window))
  
EndProcedure

Procedure Main()
  
  OpenWindow(#Window, #PB_Ignore, #PB_Ignore, 400, 450, "DijitAccordion-Demo", #PB_Window_ScreenCentered | #PB_Window_SizeGadget)
  
  BindEvent(#PB_Event_SizeWindow, @SizeWindowEvent(), #Window)
  
  DijitAccordion::AccordionGadget(#Accordion1, 0, 0, WindowWidth(#Window), WindowHeight(#Window))
  
  AddGadgetItem(#Accordion1, -1, "Item1")
  ButtonGadget(#PB_Any, 10, 10, 100, 30, "Button1 in Item1")
  
  AddGadgetItem(#Accordion1, -1, "Item2")
  ButtonGadget(#PB_Any, 10, 10, 100, 30, "Button1 in Item2")
  
  AddGadgetItem(#Accordion1, -1, "Awww!")
  ImageGadget(#PB_Any, 0, 0, 0, 0, ImageID(#Image))
  
  ; unfortunately there is a problem with nested Accordions
  ; DijitAccordion::AccordionGadget(#Accordion2, 10, 10, 100, 200)
  ; AddGadgetItem(#Accordion2, -1, "SubItem1")
  ; AddGadgetItem(#Accordion2, -1, "SubItem2")
  ; AddGadgetItem(#Accordion2, -1, "SubItem3")
  ; CloseGadgetList() ; #Accordion2
  
  CloseGadgetList() ; #Accordion1
  
EndProcedure


Procedure Loaded(Type, Filename$, ObjectId)
  DijitAccordion::Init(@Main())
EndProcedure

Procedure LoadingError(Type, Filename$, ObjectId)
EndProcedure

; Register the loading event before calling any resource load command
BindEvent(#PB_Event_Loading, @Loaded())
BindEvent(#PB_Event_LoadingError, @LoadingError())

LoadImage(#Image, "resources/cutekitten.jpg")

DijitAccordion.sbi:

Code: Select all

DeclareModule DijitAccordion
  
  EnableExplicit
  
  Declare Init(Callback)
  
  Declare AccordionGadget(Gadget, x, y, Width, Height)
  
EndDeclareModule

Module DijitAccordion
  
  EnableExplicit
  
  Procedure Init(Callback)
    
    ! require(["dijitx/layout/AccordionContainer"], function() {
    
    ! window.spider_AccordionGadget = function(e, f, h, l, n) {
    
    ! 		var c = spider.gadget.objects.Allocate(e);
    
    ! 		var d = new dijit.layout.AccordionContainer({ doLayout: !0 });
    
    ! 		var b = document.createElement("div");
    
    ! 		b.appendChild(d.domNode);
    
    ! 		d.watch("selectedChildWidget", function(a, b, d) { r(c, 9) });
    
    ! 		c.AddItem = function(a, b, c, e) {
    
    ! 				a = new dijit.layout.ContentPane({
    ! 						title: b,
    ! 				});
    
    !         spider.DojoAspect.before(a, "onShow", function() {
    !           $(".dijitAccordionChildWrapper").css("overflow", "");
    !         });
    
    !         spider.DojoAspect.after(a, "onHide", function() {
    !           $(".dijitAccordionChildWrapper").css("overflow", "auto");
    !         });
    
    ! 				d.addChild(a);
    
    ! 				spider.window.gadgetList.set(a.domNode);
    ! 				d.startup();
    ! 				d.resize();
    !         $(".dijitAccordionChildWrapper").css("overflow", "auto");
    ! 		};
    
    ! 		c.RemoveItem = function(a) {
    ! 				var b = c.CountItems();
    ! 				0 <= a && a < b && (a = m(a),
    ! 				d.removeChild(a),
    ! 				a.destroy(),
    ! 				d.startup(),
    ! 				d.resize());
    ! 		};
    
    ! 		c.ClearItems = function() {
    ! 				for (var a = c.CountItems(), b = 0; b < a; b++)
    ! 						c.RemoveItem(0)
    ! 		};
    
    ! 		c.CountItems = function() {
    ! 				return d.getChildren().length
    ! 		};
    
    ! 		c.GetState = function() {
    ! 				for (var a = d.getChildren(), b = 0; b < a.length; b++)
    ! 						if (a[b].get("selected"))
    ! 								return b;
    ! 				return -1
    ! 		};
    
    ! 		c.SetState = function(a) {
    ! 				var b;
    ! 				(b = m(a)) && d.selectChild(b)
    ! 		};
    
    ! 		c.GetItemData = function(a) {
    ! 				var b;
    ! 				return (b = m(a)) && b.spiderData ? b.spiderData : 0
    ! 		};
    
    ! 		c.SetItemData = function(a, b) {
    ! 				var c;
    ! 				if (c = m(a))
    ! 						c.spiderData = b
    ! 		};
    
    ! 		c.GetItemText = function(a, b) {
    ! 				var c;
    ! 				return (c = m(a)) ? c.get("title") : ""
    ! 		};
    
    ! 		c.SetItemText = function(a, b, c) {
    ! 				var d;
    ! 				(d = m(a)) && d.set("title", b)
    ! 		};
    
    ! 		c.SetItemImage = function(a, b) {
    ! 				var c;
    ! 				(c = m(a)) && c.set("iconClass", b ? spider.image.GetCSS(b) : null)
    ! 		};
    
    !     function s(e, f, h, l, n) {
    !         e.style.position = "absolute";
    !         e.style.left = f + "px";
    !         e.style.top = h + "px";
    !         e.style.width = l + "px";
    !         e.style.height = n + "px"
    !     }
    
    !     function w(e, f, h, l, n) {
    !         e.domNode.style.position = "absolute";
    !         e.domNode.style.left = f + "px";
    !         e.domNode.style.top = h + "px";
    !         e.domNode.style.width = l + "px";
    !         e.domNode.style.height = n + "px"
    !     }    
    
    
    !     function r(e, f) {
    !         e.isDisabled || spider.event.Send(1, e.windowId, e.id, f)
    !     }    
    
    ! 		c.Resize = function(a, e, f, h) {
    ! 				s(b, a, e, f, h);
    ! 				w(d, 0, 0, f, h);
    ! 				c.disableResize || d.resize();
    ! 		};
    
    ! 		spider.gadget.register(c, 0, b, d);
    ! 		c.disableResize = !0;
    ! 		c.Resize(f, h, l, n);
    ! 		c.disableResize = !1;
    ! 		spider.window.gadgetList.push(null);
    ! 		return c.resultId;
    
    ! };  
    
    !   v_callback();
    
    ! });
    
  EndProcedure
  
  Procedure AccordionGadget(Gadget, x, y, Width, Height)
    
    ! return spider_AccordionGadget(v_gadget, v_x, v_y, v_width, v_height);
    
  EndProcedure
  
EndModule
// Edit:

Please note: To make the code work, you have to duplicate the folder "dojo" and rename it to "dijitx".

Image


Greetings ... Peter
Dirk Geppert
Posts: 282
Joined: Fri Sep 22, 2017 7:02 am

Re: AccordionContainer

Post by Dirk Geppert »

Hi Peter, seems there are some files missing. E.g. AccordionContainer.js, focus.js...

May be I can get these files from https://download.dojotoolkit.org/ - but it does not work with Dojo 1.15.0.
What version does SpiderBasic use?

Ciao Dirk
Dirk Geppert
Posts: 282
Joined: Fri Sep 22, 2017 7:02 am

Re: AccordionContainer

Post by Dirk Geppert »

@Peter: I would really like to use that AccordionContainer and had now copied the missing files from your demo page. Unfortunately it doesn't work.
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: AccordionContainer

Post by Peter »

Yeah, I see.

I remember doing some experiments, but I don't remember which files I exchanged. :?

Here is the content of my Javascript folder:

http://spiderbytes.tuebben.de/javascript.zip

Try to see if it works for you. But first make a backup of your Javascript folder!

Greetings ... Peter
Dirk Geppert
Posts: 282
Joined: Fri Sep 22, 2017 7:02 am

Re: AccordionContainer

Post by Dirk Geppert »

Thx Peter! Its works now :D I've only copied the dijitx folder..
the.weavster
Posts: 220
Joined: Sat Mar 01, 2014 3:02 pm

Re: AccordionContainer

Post by the.weavster »

Bump.

It would be nice to have an officially supported accordion.
Post Reply