Tags JSON API

The examples shown here are the exact same ones as under the Tag tab, just using a slightly different notation.

When using the JSON API, you create the FIGURE element with data-ts="Tag", use ts.ui.get() get a reference to it and call render() to pass it a new model.

Value-only

```
ts.ui.get('#tag-valonly', tag => {
	tag.render({
		data: new Map([
			[undefined, 'Roll a d20']
		])
	});
});
```

Key-Value

```
ts.ui.get('#tag-keyval', tag => {
	tag.render({
		data: new Map([
			['Area of Origin', 'The Sword Coast']
		])
	});
});
```

Key with multiple values

```
ts.ui.get('#tag-keyvals', tag => {
	tag.render({
		data: new Map([
			['The Teeming Hive of Evil', ['Skullport', 'Port of Shadows']]
		])
	});
});
```

Multiple keys with single value

```
ts.ui.get('#tag-keysval', tag => {
	tag.render({
		data: new Map([
			[['Facial Tentacles', 'Potent Psionics'], 'Mind Flayer']
		])
	});
});
```

Multiple keys with multiple values

```
ts.ui.get('#tag-keysvals', tag => {
	tag.render({
		data: new Map([
			[['Magic-user', 'Undead'], ['Lich', 'Vampire']]
		])
	});
});
```

Multiple sets of key-values

```
ts.ui.get('#tag-multikeysvals', tag => {
	tag.render({
		data: new Map([
			['Acererak'],
			['Alignment', ['Lawful', 'Evil']],
			['Hobbies', 'Building Dungeons'],
		])
	});
});
```

Clickable look & click handler

```
ts.ui.get('#tag-clickable', tag => {
	tag.render({
		onclick: () => {
			ts.ui.Notification.success('Do you see?');
		},
		data: new Map([
			['Vision', ['Blindsight', 'Truesight', 'Darkvision']]
		])
	});
});
```

```
ts.ui.get('#tag-clickable-ownhandler', tag => {
	tag.render({
		clickable: true,
		data: new Map([
			['Vision', ['Blindsight', 'Truesight', 'Darkvision']]
		])
	});
	tag.element.addEventListener('click', e => {
		ts.ui.Notification.success('Do you see?');
	});
});
```

Delete button & delete handler

```
ts.ui.get('#tag-deletable', tag => {
	tag.render({
		ondelete: () => {
			ts.ui.Notification.info('Tag disintegrated!');
		},
		data: new Map([
			['Languages', ['Sylvan', 'Common', 'Draconic', 'Giant']]
		])
	});
});
```

```
ts.ui.get('#tag-deletable-ownhandler', tag => {
	tag.render({
		deletable: true,
		data: new Map([
			['Languages', ['Sylvan', 'Common', 'Draconic', 'Giant']]
		])
	});
	tag.element.addEventListener('click', e => {
		if (e.target.localName === 'del') {
			ts.ui.Notification.info('Tag disintegrated!');
		}
	});
});
```

Click & delete

```
ts.ui.get('#tag-delete-click', tag => {
	tag.render({
		onclick: () => {
			ts.ui.Notification.info('Don\'t poke the beholder!');
		},
		ondelete: () => {
			ts.ui.Notification.warning('I hope you know what you\'re doing...');
		},
		data: new Map([
			['Beholder', 'Xanathar']
		])
	});
});
```

```
ts.ui.get('#tag-delete-click-ownhandler', tag => {
	tag.render({
		clickable: true,
		deletable: true,
		data: new Map([
			['Beholder', 'Xanathar']
		])
	});
	tag.element.addEventListener('click', e => {
		if (e.target.localName === 'del') { // This is an important line!
			ts.ui.Notification.warning('I hope you know what you\'re doing...');
		} else {
			ts.ui.Notification.info('Don\'t poke the beholder!');
		}
	});
});
```

Locked look

```
ts.ui.get('#tag-optlock', tag => {
	tag.render({
		locked: true,
		data: new Map([
			['Dungeon', 'Hidden Shrine of Tamoachan']
		])
	});
});
```

List of Tags

```
ts.ui.get('#tags-lich', tag => {
	tag.render({
		data: new Map([
			['Lich', 'Acererak']
		])
	});
});
ts.ui.get('#tags-beholder', tag => {
	tag.render({
		data: new Map([
			['Beholder', 'Xanathar']
		])
	});
});
```

List of Tags (maximized)

This API is under construction.

If you find a bug or need a feature…

Create GitHub Issue…