Tagteam

What is it?

Tagteam is used to dynamically show only certain sections in presentations when you don't want to show everything. It uses URL parameters to set the needed sections.

This demo uses only this HTML file. Clicking the demo links will only change the URL parameters and reload the page. Tagteam can work together with Simplemenu to show only the relevant chapters.

An option to use groups is also provided. Also, the need to enter a group can be set, to avoid the possibility to view all slides (no parameters at all).

This is just a simple safeguard. Anyone with a bit of HTML knowledge can find the valid group names.

Tagteam reads 3 different URL parameters:

1. ?t=abcd for data-tag sections
2. ?n=abcd for data-name sections
3. ?g=abcd for predefined groups

Any named or tagged section that is NOT in a parameter will NOT be shown. Sections without tags or name WILL be shown.

You can also use a data-keep attribute, like the title section of this presentation, to make sure that the slide will always be shown, except when a group is mandatory.

Setup

Setup your HTML with data-tags and/or data-names:

                            <section data-name="Brown" data-tag="nice">
                              <section data-tag="cats, small">Cat (brown, small, nice)</section>
                              <section data-tag="dogs">Dog (brown, nice)</section>
                              <section data-tag="dogs, big">Dog (brown, big, nice)</section>
                              <section data-tag="horses">Horse (brown, nice)</section>
                            </section>
                            <section data-name="Black &amp; white">
                              <section data-tag="cats">Cat (black &amp; white)</section>
                              <section data-tag="dogs, small">Dog (black &amp; white + small)</section>
                              <section data-tag="horses">Horse (black &amp; white)</section>
                            </section>

The above markup is used in all following examples.

Note: 'data-tag' can can include multiple comma-separated tags. But 'data-name' can only contain a single term (which may consist of several words).

JavaScript

Load the script and make a reference to it in the Reveal plugin options.

<script src="plugin/tagteam/tagteam.js"></script>
<script>
	Reveal.initialize({
		plugins: [ Tagteam ]
	});
<script>

When using the Markdown plugin as well, load it first, so Tagteam can correctly find tagged or named sections.

Tags

Using a single t parameter

.../demo.html?t=dogs

Test it here now: demo.html?t=dogs

Using multiple t parameters

.../demo.html?t=dogs,cats

Test it here now: demo.html?t=dogs,cats

Using more specific t parameters

Use the plus sign to be more specific.
In this case we want all dogs, but only small cats.

.../demo.html?t=dogs,cats+small

Test it here now: demo.html?t=dogs,cats+small

Using more specific t parameters

This works with nested tags as well.

.../demo.html?t=small+cats,nice+horses

Test it here now: demo.html?t=small+cats,nice+horses

Names

When ordering your presentation with nested sections, you can specify these to be shown in one fell swoop.

Using an n parameter

There are two named stacks with vertical slides. Now we only want the first (data-name="Brown") stack.

.../demo.html?n=brown

Test it here now: demo.html?n=brown

Using multiple n parameters

.../demo.html?n=brown,black+%26+white

Test it here now: demo.html?n=brown,black+%26+white

Groups

Groups are predefined sets of tags and/or names.

Setting a groups option

Each 'groups' object needs a name and an array of tags and/or an array of names.

Reveal.initialize({
    //...
    tagteam: {
        groups: {
            "brownpets": {
                names: ["brown"], tags: ["cats", "dogs"]
            },
            "bwhsd": {
                names: ["black & white"], tags: [ "horses", ["dogs", "small"] ]
            }
        }
    },
    plugins: [ Tagteam ]
});

Note: In the 2nd group, the tags contain a nested array to be more specific (small dogs only).

Using a g parameter

.../demo.html?g=brownpets

Test it here now: demo.html?g=brownpets

Setting the mandatorygroup option

It is possible to set the use of a group to mandatory. This way you can avoid the possibility for users to see all slides by just not entering any URL parameter.

Reveal.initialize({
	//...
	tagteam: {
		mandatorygroup: true,
		groups: {
			"brownpets": {
				names: ["brown"], tags: ["cats", "dogs"]
			}
		}
	},
	plugins: [ Tagteam ]

Note: This is just a simple safeguard. Anyone with a bit of HTML knowledge can find the valid group names.

Using a correct g parameter

With mandatorygroup : true and a correct g parameter, the slides will show.

.../demo-m.html?g=brownpets

Test it here now: demo-m.html?g=brownpets

Using an incorrect g parameter

With mandatorygroup : true and an incorrect g parameter, the slides will NOT show. Only slides with data-mandatory will be shown.

.../demo-m.html?g=pinkpets

Test it here now: demo-m.html?g=pinkpets