certainlyakey
1/19/2016 - 1:05 PM

Semantic logo mixin in Jade

Semantic logo mixin in Jade

//- if background image is used, hides main logo text. If subtitle is present, changes heading tags
//- follows BEM class naming conventions (this requires bemto.jade https://github.com/kizu/bemto)
//- usage: +logo('Main logo text', 'h2', true, 'Секретный архив учреждения')
- function get_subtitletag(mainlogotag) { 
	- var heading_number = 0;
	- if (mainlogotag.slice(0,1) === 'h') {
		- var heading_number = parseInt(mainlogotag.slice(-1));
		- if (heading_number < 6) {
			- heading_number++;
			- subtitleTag = 'h' + heading_number;
		- } else {
			- subtitleTag = 'div';
		- }
	- }
	- else {
		- subtitleTag = 'div'
	- }
	- return subtitleTag	
- }

mixin logo(text, tag, backgroundimage, subtitle)
	if !tag
		- tag = 'div'
	if subtitle
		+b.logogroup
			+b(tag).mainlogo
				if backgroundimage
					+e('span').hidden #{text}
				else 
					| #{text}
			+e(get_subtitletag(tag)).sublogo #{subtitle}
	else
		+b(tag).mainlogo
			if backgroundimage
				+e('span').hidden #{text}
			else 
				| #{text}