1 /**

     2  * Preview.js

     3  *

     4  * Copyright, Moxiecode Systems AB

     5  * Released under LGPL License.

     6  *

     7  * License: http://www.tinymce.com/license

     8  * Contributing: http://www.tinymce.com/contributing

     9  */

    10 

    11 /**

    12  * Internal class for generating previews styles for formats.

    13  *

    14  * Example:

    15  *  Preview.getCssText(editor, 'bold');

    16  *

    17  * @class tinymce.fmt.Preview

    18  * @private

    19  */

    20 define("tinymce/fmt/Preview", [

    21 	"tinymce/util/Tools"

    22 ], function(Tools) {

    23 	var each = Tools.each;

    24 

    25 	function getCssText(editor, format) {

    26 		var name, previewElm, dom = editor.dom;

    27 		var previewCss = '', parentFontSize, previewStyles;

    28 

    29 		previewStyles = editor.settings.preview_styles;

    30 

    31 		// No preview forced

    32 		if (previewStyles === false) {

    33 			return '';

    34 		}

    35 

    36 		// Default preview

    37 		if (!previewStyles) {

    38 			previewStyles = 'font-family font-size font-weight font-style text-decoration ' +

    39 				'text-transform color background-color border border-radius outline text-shadow';

    40 		}

    41 

    42 		// Removes any variables since these can't be previewed

    43 		function removeVars(val) {

    44 			return val.replace(/%(\w+)/g, '');

    45 		}

    46 

    47 		// Create block/inline element to use for preview

    48 		if (typeof format == "string") {

    49 			format = editor.formatter.get(format);

    50 			if (!format) {

    51 				return;

    52 			}

    53 

    54 			format = format[0];

    55 		}

    56 

    57 		name = format.block || format.inline || 'span';

    58 		previewElm = dom.create(name);

    59 

    60 		// Add format styles to preview element

    61 		each(format.styles, function(value, name) {

    62 			value = removeVars(value);

    63 

    64 			if (value) {

    65 				dom.setStyle(previewElm, name, value);

    66 			}

    67 		});

    68 

    69 		// Add attributes to preview element

    70 		each(format.attributes, function(value, name) {

    71 			value = removeVars(value);

    72 

    73 			if (value) {

    74 				dom.setAttrib(previewElm, name, value);

    75 			}

    76 		});

    77 

    78 		// Add classes to preview element

    79 		each(format.classes, function(value) {

    80 			value = removeVars(value);

    81 

    82 			if (!dom.hasClass(previewElm, value)) {

    83 				dom.addClass(previewElm, value);

    84 			}

    85 		});

    86 

    87 		editor.fire('PreviewFormats');

    88 

    89 		// Add the previewElm outside the visual area

    90 		dom.setStyles(previewElm, {position: 'absolute', left: -0xFFFF});

    91 		editor.getBody().appendChild(previewElm);

    92 

    93 		// Get parent container font size so we can compute px values out of em/% for older IE:s

    94 		parentFontSize = dom.getStyle(editor.getBody(), 'fontSize', true);

    95 		parentFontSize = /px$/.test(parentFontSize) ? parseInt(parentFontSize, 10) : 0;

    96 

    97 		each(previewStyles.split(' '), function(name) {

    98 			var value = dom.getStyle(previewElm, name, true);

    99 

   100 			// If background is transparent then check if the body has a background color we can use

   101 			if (name == 'background-color' && /transparent|rgba\s*\([^)]+,\s*0\)/.test(value)) {

   102 				value = dom.getStyle(editor.getBody(), name, true);

   103 

   104 				// Ignore white since it's the default color, not the nicest fix

   105 				// TODO: Fix this by detecting runtime style

   106 				if (dom.toHex(value).toLowerCase() == '#ffffff') {

   107 					return;

   108 				}

   109 			}

   110 

   111 			if (name == 'color') {

   112 				// Ignore black since it's the default color, not the nicest fix

   113 				// TODO: Fix this by detecting runtime style

   114 				if (dom.toHex(value).toLowerCase() == '#000000') {

   115 					return;

   116 				}

   117 			}

   118 

   119 			// Old IE won't calculate the font size so we need to do that manually

   120 			if (name == 'font-size') {

   121 				if (/em|%$/.test(value)) {

   122 					if (parentFontSize === 0) {

   123 						return;

   124 					}

   125 

   126 					// Convert font size from em/% to px

   127 					value = parseFloat(value, 10) / (/%$/.test(value) ? 100 : 1);

   128 					value = (value * parentFontSize) + 'px';

   129 				}

   130 			}

   131 

   132 			if (name == "border" && value) {

   133 				previewCss += 'padding:0 2px;';

   134 			}

   135 

   136 			previewCss += name + ':' + value + ';';

   137 		});

   138 

   139 		editor.fire('AfterPreviewFormats');

   140 

   141 		//previewCss += 'line-height:normal';

   142 

   143 		dom.remove(previewElm);

   144 

   145 		return previewCss;

   146 	}

   147 

   148 	return {

   149 		getCssText: getCssText

   150 	};

   151 });