fontsize.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. /**
  2. * @fileoverview
  3. * 설정에서 지정된 여러 fontsize들을 선택할 수 있는 메뉴를 포함하는 tool인 '글자크기' Icon을 위한 source로,
  4. * Class Trex.Tool.FontSize, configuration 을 포함
  5. *
  6. *
  7. */
  8. TrexConfig.addTool(
  9. "fontsize",
  10. {
  11. sync: _TRUE,
  12. status: _TRUE,
  13. options: [
  14. { label: '가나다라마바사 (8pt)', title: '8pt', data: '8pt', klass: 'tx-8pt' },
  15. { label: '가나다라마바사 (9pt)', title: '9pt', data: '9pt', klass: 'tx-9pt' },
  16. { label: '가나다라마바사 (10pt)', title: '10pt', data: '10pt', klass: 'tx-10pt' },
  17. { label: '가나다라마바사 (11pt)', title: '11pt', data: '11pt', klass: 'tx-11pt' },
  18. { label: '가나다라마바사 (12pt)', title: '12pt', data: '12pt', klass: 'tx-12pt' },
  19. { label: '가나다라마바사 (14pt)', title: '14pt', data: '14pt', klass: 'tx-14pt' },
  20. { label: '가나다라마바사 (18pt)', title: '18pt', data: '18pt', klass: 'tx-18pt' },
  21. { label: '가나다라마 (24pt)', title: '24pt', data: '24pt', klass: 'tx-24pt' },
  22. { label: '가나다 (36pt)', title: '36pt', data: '36pt', klass: 'tx-36pt' }
  23. ]
  24. }
  25. );
  26. Trex.Tool.FontSize = Trex.Class.create({
  27. $const: {
  28. __Identity: 'fontsize'
  29. },
  30. $extend: Trex.Tool,
  31. $mixins: [Trex.I.FontTool, Trex.I.MenuFontTool, Trex.I.WrappingSpanFontTool],
  32. beforeOnInitialized: function(config) {
  33. this.createFontSizeMap(config);
  34. },
  35. createButton: function() {
  36. var defaultProperty = this.getDefaultProperty();
  37. var button = this.button = new Trex.Button.Select(this.buttonCfg);
  38. button.setValue(defaultProperty);
  39. button.setText(this.getTextByValue(defaultProperty));
  40. return button;
  41. },
  42. createMenu: function() {
  43. return new Trex.Menu.Select(this.menuCfg);
  44. },
  45. createFontSizeMap: function(config) {
  46. var fontSizeMap = this.fontSizeMap = {};
  47. config.options.each(function(option) {
  48. fontSizeMap[option.data] = option.title;
  49. });
  50. [
  51. //NOTE: font tag의 속성으로 글자 크기를 지정했을 경우
  52. { title: '8pt', data: '1' },
  53. { title: '10pt', data: '2' },
  54. { title: '12pt', data: '3' },
  55. { title: '14pt', data: '4' },
  56. { title: '18pt', data: '5' },
  57. { title: '24pt', data: '6' },
  58. { title: '36pt', data: '7' },
  59. { title: '7.5pt', data: '10px'},
  60. { title: '8pt', data: '11px' },
  61. { title: '9pt', data: '12px' },
  62. { title: '10pt', data: '13px' },
  63. { title: '11pt', data: '15px' },
  64. { title: '12pt', data: '16px' },
  65. { title: '14pt', data: '19px' },
  66. { title: '18pt', data: '24px' },
  67. { title: '24pt', data: '32px' },
  68. { title: '36pt', data: '48px' },
  69. { title: '8pt', data: 'x-small' },
  70. { title: '10pt', data: 'small' },
  71. { title: '12pt', data: 'medium' },
  72. { title: '14pt', data: 'large' },
  73. { title: '18pt', data: 'x-large' },
  74. { title: '24pt', data: 'xx-large' },
  75. { title: '36pt', data: '-webkit-xxx-large' } //NOTE: webkit 계열에서 사용하는 글자 크기
  76. ].each(function(option) {
  77. fontSizeMap[option.data] = option.title;
  78. });
  79. },
  80. reliableQueriedValue: function(value) {
  81. return $tx.webkit === false;
  82. },
  83. getTextByValue: function(value) {
  84. var matchedText = this.fontSizeMap[value];
  85. if (!matchedText) {
  86. var round = Math.round(parseFloat(value)).toPx();
  87. matchedText = this.fontSizeMap[round];
  88. }
  89. return matchedText;
  90. },
  91. getRelatedCssPropertyNames: function() {
  92. return ["font", this.getCssPropertyName()];
  93. },
  94. getCssPropertyName: function() {
  95. return "fontSize";
  96. },
  97. getQueryCommandName: function() {
  98. return "fontsize";
  99. },
  100. getDefaultProperty: function() {
  101. return this.canvas.getStyleConfig().fontSize;
  102. },
  103. getFontTagAttribute: function() {
  104. return "size";
  105. }
  106. });