Skip to content

Martinomagnifico/reveal.js-tagteam

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Tagteam

Version Downloads

A plugin for Reveal.js which 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.

Screenshot

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.

Demo

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 the demo presentation, to make sure that the slide will always be shown, except when a group is mandatory.

Installation

Regular installation

Copy the tagteam folder to the plugins folder of the reveal.js folder, like this: plugin/tagteam.

npm installation

This plugin is published to, and can be installed from, npm.

npm install reveal.js-tagteam

The Tagteam plugin folder can then be referenced from node_modules/reveal.js-tagteam/plugin/tagteam

Setup

JavaScript

Tagteam works in setups with multiple Reveal instances. However, the usecase will be quite slim, because multiple instances run in a single browser window, where only one range of parameters can be set.

There are two JavaScript files for Tagteam, a regular one, tagteam.js, and a module one, tagteam.esm.js. You only need one of them:

Regular

If you're not using ES modules, for example, to be able to run your presentation from the filesystem, you can add it like this:

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

As a module

If you're using ES modules, you can add it like this:

<script type="module">
	// This will need a server
	import Reveal from './dist/reveal.esm.js';
	import Tagteam from './plugin/tagteam/tagteam.esm.js';
	Reveal.initialize({
		// ...
		plugins: [ Tagteam ]
	});
</script>

HTML

Tags

It is easy to set up your HTML structure for Tagteam. Just add tags to your slides. Tags can consist of only 1 word per tag. And remember, untagged slides WILL be shown if they do not match the URL parameter. You can also tag the parent stack sections.

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

Using tags:

Names

When ordering your presentation with nested sections, you can specify these to be shown in one fell swoop. Names can consist of several words, like "About us". When Tagteam works together with Simplemenu in auto-mode, it uses the (data-)names to only show the relevant chapters in the menu.

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

Using names:

Names and tags can be combined. When the user wants to only show slides with "black and white horses and small black and white dogs", the URL parameter can be like this:

Groups

Groups are predefined sets of tags and/or names. Each definition is a 'groups' object in the options for Tagteam, and each 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 ]
});

When the user wants to only show slides with "black and white horses and small black and white dogs", the URL parameter can be like this: g=bwhsd, which is a lot shorter than in the names/tags combination URL parameter:

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.

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

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

Configuration

There are a few options that you can change from the Reveal.js options. The values below are default and do not need to be set if they are not changed.

Reveal.initialize({
	//...
	tagteam: {
		debug: false,
		mandatorygroup: false,
		groups: {
			"pets": {
				t: ["cats", "dogs"],
				n: ["red"]
			}
		}
	},
	plugins: [ Tagteam ]
});
  • debug: This option can show debug messages in the console.
  • mandatorygroup: This option can set the mandatory use of groups.
  • groups: This contains a standard placeholder for predefined groups.

Like it?

If you like it, please star this repo!

And if you want to show off what you made with it, please do :-)

License

MIT licensed

Copyright (C) 2021 Martijn De Jongh (Martino)

About

A plugin for Reveal.js that 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.

Resources

License

Stars

Watchers

Forks

Packages

No packages published