ExpandableSection - Revision history

Thoun at 13:46, 29 December 2025

2025-12-29T13:46:21Z

← Older revision		Revision as of 15:46, 29 December 2025
Line 24:		Line 24:
	<pre>		<pre>
	this.expanded = new ebg.expandablesection();		this.expanded = new ebg.expandablesection();
	this.expanded.create(this, "my_expandable");		this.expanded.create(this.bga.gameui, "my_expandable");
	this.expanded.expand(); // show		this.expanded.expand(); // show
	this.expanded.collapse(); // hide		this.expanded.collapse(); // hide
Line 58:		Line 58:
	<pre>		<pre>
	placeExpandableSection(parent_id, id, content) {		placeExpandableSection(parent_id, id, content) {
	html = this.gameui.format_block('jstpl_expandablesection', { id: id, content: content });		html = this.bga.gameui.format_block('jstpl_expandablesection', { id: id, content: content });
	dojo.place(html, parent_id);		dojo.place(html, parent_id);
	}		}

Thoun at 09:56, 16 December 2025

2025-12-16T09:56:25Z

← Older revision		Revision as of 11:56, 16 December 2025
Line 54:		Line 54:
	</pre>		</pre>

	In '''<tt>~~mygame~~.js</tt>''':		In '''<tt>Game.js</tt>''':

	<pre>		<pre>
	placeExpandableSection~~: function~~(parent_id, id, content) {		placeExpandableSection(parent_id, id, content) {
	html = this.format_block('jstpl_expandablesection', { id: id, content: content });		html = this.gameui.format_block('jstpl_expandablesection', { id: id, content: content });
	dojo.place(html, parent_id);		dojo.place(html, parent_id);
	},		}
	</pre>		</pre>

	[[Category:Studio]]		[[Category:Studio]]

Thoun at 09:55, 16 December 2025

2025-12-16T09:55:55Z

← Older revision		Revision as of 11:55, 16 December 2025
Line 16:		Line 16:
	</pre>		</pre>

	In '''<tt>~~mygame~~.js</tt>''':		In '''<tt>Game.js</tt>''':

	<pre>		<pre>
	~~define~~([		const [expandablesection] = await importDojoLibs(['ebg/expandablesection']);
	ebg/expandablesection
	],
	~~...~~
	</pre>		</pre>

Byte5115 at 06:30, 22 August 2022

2022-08-22T06:30:03Z

← Older revision		Revision as of 08:30, 22 August 2022
Line 36:		Line 36:
	* All of the inner parts of the expandable div must have ids so dojo.query can find them.		* All of the inner parts of the expandable div must have ids so dojo.query can find them.
	* The section already starts with click-to-toggle behavior, so you probably won't need to toggle in your own code. Just set the initial state in your setup method.		* The section already starts with click-to-toggle behavior, so you probably won't need to toggle in your own code. Just set the initial state in your setup method.
			* Source code can be found here : https://x.boardgamearena.net/data/themereleases/220811-1000/js/modules/expandablesection.js


	== Helper Code ==		== Helper Code ==

Victoria La at 23:26, 16 May 2022

2022-05-16T23:26:42Z

← Older revision		Revision as of 01:26, 17 May 2022
Line 63:		Line 63:
	},		},
	</pre>		</pre>

			[[Category:Studio]]

Bartoleo at 16:08, 9 March 2021

2021-03-09T16:08:09Z

← Older revision		Revision as of 18:08, 9 March 2021
Line 60:		Line 60:
	placeExpandableSection: function(parent_id, id, content) {		placeExpandableSection: function(parent_id, id, content) {
	html = this.format_block('jstpl_expandablesection', { id: id, content: content });		html = this.format_block('jstpl_expandablesection', { id: id, content: content });
	dojo.place(html, id);		dojo.place(html, parent_id);
	},		},
	</pre>		</pre>

V k k at 13:29, 19 January 2021

2021-01-19T13:29:29Z

← Older revision		Revision as of 15:29, 19 January 2021
Line 3:		Line 3:
	== Example ==		== Example ==

	In <tt>mygame_mygame.tpl</tt> (the border is not required):		In '''<tt>mygame_mygame.tpl</tt>''' (the border is not required):

	<pre>		<pre>
	<div id="my_expandable" style="border: 1px solid black">		<div id="my_expandable" style="border: 1px solid black">
	<a href="#" id="my_click_to_toggle" class="expandabletoggle expandablearrow">		<a href="#" id="my_click_to_toggle" class="expandabletoggle expandablearrow">
	<div class="icon20"></div>		<div class="icon20"></div>
	</a>		</a>
	<div id="my_hidden_content" class="expandablecontent">		<div id="my_hidden_content" class="expandablecontent">
	Here's the hidden content		Here's the hidden content
	~~</div>~~
	</div>		</div>
			</div>
	</pre>		</pre>

	In <tt>mygame.js</tt>:		In '''<tt>mygame.js</tt>''':

	<pre>		<pre>
	define([		define([
	ebg/expandablesection		ebg/expandablesection
	],		],
	...		...
	</pre>		</pre>

	<pre>		<pre>
	this.expanded = new ebg.expandablesection();		this.expanded = new ebg.expandablesection();
	this.expanded.create(this, "my_expandable");		this.expanded.create(this, "my_expandable");
	this.expanded.expand(); // show		this.expanded.expand(); // show
	this.expanded.collapse(); // hide		this.expanded.collapse(); // hide
	this.expanded.toggle(); // switch show/hide		this.expanded.toggle(); // switch show/hide
	</pre>		</pre>

	== Notes ==		=== Notes ===
	* All of the inner parts of the expandable div must have ids so dojo.query can find them.		* All of the inner parts of the expandable div must have ids so dojo.query can find them.
	* The section already starts with click-to-toggle behavior, so you probably won't need to toggle in your own code. Just set the initial state in your setup method.		* The section already starts with click-to-toggle behavior, so you probably won't need to toggle in your own code. Just set the initial state in your setup method.

			== Helper Code ==

			This doesn't appear to be part of the BGA framework, but might make creating the above code easer and more readable.

			In '''<tt>mygame_mygame.tpl</tt>''':

			<pre>
			var jstpl_expandablesection = '\
			<div id="${id}">\
			<a href="#" id="toggle_${id}" class="expandabletoggle expandablearrow">\
			<div class="icon20"></div>\
			</a>\
			<div id="content_${id}" class="expandablecontent">\
			${content}\
			</div>\
			</div>';
			</pre>

			In '''<tt>mygame.js</tt>''':

			<pre>
			placeExpandableSection: function(parent_id, id, content) {
			html = this.format_block('jstpl_expandablesection', { id: id, content: content });
			dojo.place(html, id);
			},
			</pre>

V k k at 04:53, 19 January 2021

2021-01-19T04:53:42Z

← Older revision		Revision as of 06:53, 19 January 2021
Line 1:		Line 1:
			{{Studio_Framework_Navigation}}

	== Example ==		== Example ==

V k k at 04:50, 19 January 2021

2021-01-19T04:50:28Z

← Older revision		Revision as of 06:50, 19 January 2021
Line 1:		Line 1:
	== Example ==		== Example ==

	In <tt>mygame_mygame.tpl</tt> (the border not required):		In <tt>mygame_mygame.tpl</tt> (the border is not required):

	<pre>		<pre>

V k k: Created page with "== Example == In mygame_mygame.tpl (the border not required):

              
2021-01-19T04:49:55Z
Created page with "== Example ==  In <tt>mygame_mygame.tpl</tt> (the border not required):  <pre>     <div id="my_expandable" style="border: 1px solid black">         <a href="#" id="my_click_to..."
New page
== Example ==



In <tt>mygame_mygame.tpl</tt> (the border not required):



<pre>

    <div id="my_expandable" style="border: 1px solid black">

        <a href="#" id="my_click_to_toggle" class="expandabletoggle expandablearrow">

            <div class="icon20"></div>

        </a>

        <div id="my_hidden_content" class="expandablecontent">

            Here's the hidden content

        </div>

    </div>

</pre>



In <tt>mygame.js</tt>:

<pre>

    define([

        ebg/expandablesection

    ],

    ...

</pre>

<pre>

    this.expanded = new ebg.expandablesection();

    this.expanded.create(this, "my_expandable");

    this.expanded.expand();   // show

    this.expanded.collapse(); // hide

    this.expanded.toggle();   // switch show/hide

</pre>



== Notes ==

* All of the inner parts of the expandable div must have ids so dojo.query can find them.

* The section already starts with click-to-toggle behavior, so you probably won't need to toggle in your own code. Just set the initial state in your setup method.