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.