This is a documentation for Board Game Arena: play board games online !

ExpandableSection: Difference between revisions

From Board Game Arena
Jump to navigation Jump to search
mNo edit summary
No edit summary
(2 intermediate revisions by one other user not shown)
Line 1: Line 1:
{{Studio_Framework_Navigation}}
== 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, parent_id);
},
</pre>

Revision as of 17:08, 9 March 2021


Game File Reference



Useful Components

Official

  • Deck: a PHP component to manage cards (deck, hands, picking cards, moving cards, shuffle deck, ...).
  • Draggable: a JS component to manage drag'n'drop actions.
  • Counter: a JS component to manage a counter that can increase/decrease (ex: player's score).
  • ExpandableSection: a JS component to manage a rectangular block of HTML than can be displayed/hidden.
  • Scrollmap: a JS component to manage a scrollable game area (useful when the game area can be infinite. Examples: Saboteur or Takenoko games).
  • Stock: a JS component to manage and display a set of game elements displayed at a position.
  • Zone: a JS component to manage a zone of the board where several game elements can come and leave, but should be well displayed together (See for example: token's places at Can't Stop).

Undocumented component (if somebody knows please help with docs)

  • Wrapper: a JS component to wrap a <div> element around its child, even if these elements are absolute positioned.

Unofficial



Game Development Process



Guides for Common Topics



Miscellaneous Resources

Example

In mygame_mygame.tpl (the border is not required):

<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>

In mygame.js:

define([
    ebg/expandablesection
],
...
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

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.

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 mygame_mygame.tpl:

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>';

In mygame.js:

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