Custom font styles in X3 with veinjs

custom fonts with veinjs

;(function ($, window, document, undefined) {
  "use strict";

  var cssEl = {
		'body'			: 'body, .button, h1, h2, h3, h4, .h5, h6',
		'logo'			: '.nav .logo',
		'menu'			: '.menu',
		'topbar'		: 'body[class*="topbar"] .menu > li > a',
		'sidebar'		: 'body[class*="sidebar"] .menu > li > a',
		'header'		: '.main h1,.main h2,.main h3,.main h4,.main h5,.main h6',
		'subheader'	: '.subheader',
		'styled'		: '.styled, .article-nav, h6.date, h6.amount, h6.folder_amount',
		'footer'		: '.footer'
  },
	fontSize = {
		'xxlarge'	: 1.3,
		'xlarge'	: 1.2,
		'large'		: 1.1,
		'small'		: .9,
		'xsmall'	: .8,
		'xxsmall'	: .7
	},
	cssOb = {},
	fonts = [];

  // Extract fonts to fonts array
  $.each(font.split('|'), function(index, val) {
  	var item = val.split(':')[0];
  	if(!(item in cssEl)) fonts.push(item.replace('+',' ').replace('%20',' '));
  });

  // set Default font
  cssOb.body = {};
  cssOb.body['font-family'] = fonts[0];

  // get element styles
  $.each(font.split('|'), function(index, val) {
  	var item = val.split(':')[0];
  	if(item in cssEl) {
  		if(item !== 'body') cssOb[item] = {};
  		$.each(val.split(':')[1].split(','), function(index, val) {
  			if(val === 'bold'){
  				cssOb[item]['font-weight'] = 'bold !important'; // bold
  			} else if(val === 'normal'){
  				cssOb[item]['font-weight'] = 'normal !important'; // normal
  			} else if($.isNumeric(val) && val.length === 3 && val.charAt(1) === "0" && val.charAt(2) === "0"){
  				cssOb[item]['font-weight'] = val + ' !important'; // weight custom
  			} else if(val === 'italic'){
  				cssOb[item]['font-style'] = 'italic !important'; // italic
  			} else if(val === 'uppercase'){
  				cssOb[item]['text-transform'] = 'uppercase !important'; // uppercase
  			} else if(/^[0-9A-F]{6}$/i.test(val) && val.length === 6) {
  				cssOb[item]['color'] = '#' + val + ' !important'; // color
  			} else if($.inArray(val, fonts) !== -1){
  				cssOb[item]['font-family'] = val + ' !important'; // font
  			} else if(val in fontSize){
  				if(cssEl[item].indexOf(',') === -1){ // font-size
  					cssOb[item]['font-size'] = Math.round(parseInt($(cssEl[item]).css('font-size'))*fontSize[val]) + 'px !important';
  				} else {
  					$.each(cssEl[item].split(','), function(index, val2) {
  						var size = parseInt($(val2).css('font-size'));
  						if($.isNumeric(size)) {
  							vein.inject(val2, {'font-size' : Math.round(size*fontSize[val]) + 'px !important'});
  						}
  					});
  				}
  			}
  		});
  	}
  });
	
	// Apply CSS
	$.each(cssEl, function(key, val) {
  	vein.inject(val, cssOb[key]);
	});

  // vein.inject(['h2', 'h3'], {'color' : 'green', 'font-weight' : 'bold'});
  // vein.inject('h2, h3', {'color' : 'green', 'font-weight' : 'bold'});
  // vein.inject('.vein-awesomeness .loaded-item', {'background-color': '#eeaaaa'});
  
  // Remove inline script from dom
  //setTimeout(function(){$('#fontloader').remove()},1000);

}(jQuery, this, this.document));