Feature request: tag styling addition

Contribute Feature
3

Thanks @maiki. I will come back later with a detailed answer.

In the meantime, for those landing here in the future, here is a way to implement the feature in a plugin initializer (EDITED 08-18-2017):

import TagChooser from 'discourse/components/tag-chooser'

// Discourse extension to add tag-myTagName class to <li> elements
// See discussion here:
// https://meta.discourse.org/t/feature-request-tag-styling-addition/67744/3?u=jack2
//
// Implementation based on:
// https://github.com/discourse/discourse/blob/b5cc6851cf28bbaa775a9f8f9ee330ea9cd9cef8/app/assets/javascripts/discourse/components/tag-chooser.js.es6#L56
// https://github.com/select2/select2/issues/2830#issuecomment-75008648
// https://stackoverflow.com/a/25069704/3567351
// https://github.com/discourse/discourse/blob/5dbd6a304bed5400be481d71061d3e3ebb4d6785/vendor/assets/javascripts/select2.js#L1115
TagChooser.reopen({
	didInsertElement() {
		// Call the parent function, in order to actually create the 'select2' 
		// component
		this._super()

		// Get the 'select2' data
		const data = this.$().data('select2')

		// Add the tag-xxxx class to selection items
		// At this stage the selection has already been rendered, so we have to 
		// actually change the DOM
		data.selection.find('a.discourse-tag').each((i, el) => {
			const tagClass = $(el).attr('class').match(/(^|\W)tag-\S+/)
			$(el).closest('li').addClass(tagClass[0])
		})

		// Add the tag-xxxx class to dropdown items
		// At this stage the dropdown has not been rendered yet, so we can 
		// use the 'select2' API
		const fn = data.opts.formatResultCssClass || (() => {})
		data.opts.formatResultCssClass = (data, container) =>
			fn(data, container) + ' tag-' + data.id
	}
})

As mentioned by @maiki, notice that providing a CSS rule with display:none will only hide the tag, not disable it. A user can still type the name of the hidden tag and have it saved in the topic, even though the tag is never displayed.

1 Like