Preview.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  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. * Internal class for generating previews styles for formats.
  12. *
  13. * Example:
  14. * Preview.getCssText(editor, 'bold');
  15. *
  16. * @class tinymce.fmt.Preview
  17. * @private
  18. */
  19. define("tinymce/fmt/Preview", [
  20. "tinymce/util/Tools"
  21. ], function(Tools) {
  22. var each = Tools.each;
  23. function getCssText(editor, format) {
  24. var name, previewElm, dom = editor.dom;
  25. var previewCss = '', parentFontSize, previewStyles;
  26. previewStyles = editor.settings.preview_styles;
  27. // No preview forced
  28. if (previewStyles === false) {
  29. return '';
  30. }
  31. // Default preview
  32. if (!previewStyles) {
  33. previewStyles = 'font-family font-size font-weight font-style text-decoration ' +
  34. 'text-transform color background-color border border-radius outline text-shadow';
  35. }
  36. // Removes any variables since these can't be previewed
  37. function removeVars(val) {
  38. return val.replace(/%(\w+)/g, '');
  39. }
  40. // Create block/inline element to use for preview
  41. if (typeof(format) == "string") {
  42. format = editor.formatter.get(format);
  43. if (!format) {
  44. return;
  45. }
  46. format = format[0];
  47. }
  48. name = format.block || format.inline || 'span';
  49. previewElm = dom.create(name);
  50. // Add format styles to preview element
  51. each(format.styles, function(value, name) {
  52. value = removeVars(value);
  53. if (value) {
  54. dom.setStyle(previewElm, name, value);
  55. }
  56. });
  57. // Add attributes to preview element
  58. each(format.attributes, function(value, name) {
  59. value = removeVars(value);
  60. if (value) {
  61. dom.setAttrib(previewElm, name, value);
  62. }
  63. });
  64. // Add classes to preview element
  65. each(format.classes, function(value) {
  66. value = removeVars(value);
  67. if (!dom.hasClass(previewElm, value)) {
  68. dom.addClass(previewElm, value);
  69. }
  70. });
  71. editor.fire('PreviewFormats');
  72. // Add the previewElm outside the visual area
  73. dom.setStyles(previewElm, {position: 'absolute', left: -0xFFFF});
  74. editor.getBody().appendChild(previewElm);
  75. // Get parent container font size so we can compute px values out of em/% for older IE:s
  76. parentFontSize = dom.getStyle(editor.getBody(), 'fontSize', true);
  77. parentFontSize = /px$/.test(parentFontSize) ? parseInt(parentFontSize, 10) : 0;
  78. each(previewStyles.split(' '), function(name) {
  79. var value = dom.getStyle(previewElm, name, true);
  80. // If background is transparent then check if the body has a background color we can use
  81. if (name == 'background-color' && /transparent|rgba\s*\([^)]+,\s*0\)/.test(value)) {
  82. value = dom.getStyle(editor.getBody(), name, true);
  83. // Ignore white since it's the default color, not the nicest fix
  84. // TODO: Fix this by detecting runtime style
  85. if (dom.toHex(value).toLowerCase() == '#ffffff') {
  86. return;
  87. }
  88. }
  89. if (name == 'color') {
  90. // Ignore black since it's the default color, not the nicest fix
  91. // TODO: Fix this by detecting runtime style
  92. if (dom.toHex(value).toLowerCase() == '#000000') {
  93. return;
  94. }
  95. }
  96. // Old IE won't calculate the font size so we need to do that manually
  97. if (name == 'font-size') {
  98. if (/em|%$/.test(value)) {
  99. if (parentFontSize === 0) {
  100. return;
  101. }
  102. // Convert font size from em/% to px
  103. value = parseFloat(value, 10) / (/%$/.test(value) ? 100 : 1);
  104. value = (value * parentFontSize) + 'px';
  105. }
  106. }
  107. if (name == "border" && value) {
  108. previewCss += 'padding:0 2px;';
  109. }
  110. previewCss += name + ':' + value + ';';
  111. });
  112. editor.fire('AfterPreviewFormats');
  113. //previewCss += 'line-height:normal';
  114. dom.remove(previewElm);
  115. return previewCss;
  116. }
  117. return {
  118. getCssText: getCssText
  119. };
  120. });