panel.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. /**
  2. * @fileOverview
  3. * 각 panel의 컨텐츠를 수정, 관리하기 위한 추상 클래스 관련 Source
  4. */
  5. /**
  6. * 각 panel의 컨텐츠를 수정, 관리하기 위한 클래스로 <br/>
  7. * WysiwygPanel, HtmlPanel, TextPanel에서 상속받아 사용한다. <br/>
  8. *
  9. * @abstract
  10. * @class
  11. * @param {Object} canvas
  12. * @param {Object} config - canvas의 config
  13. */
  14. Trex.Canvas.BasedPanel = Trex.Class.draft(/** @lends Trex.Canvas.BasedPanel.prototype */{
  15. initialize: function(canvas, config) {
  16. this.config = config;
  17. this.canvas = canvas;
  18. this.elHolder = this.getHolder(config);
  19. this.el = this.getPanel(config);
  20. if(!this.el) {
  21. throw new Error("[Exception]Trex.Canvas.Panel : panel element is not founded");
  22. }
  23. var _name = this.constructor.__MODE;
  24. /**
  25. * panel의 이름을 리턴한다.
  26. * @function
  27. * @returns {String} 'html'
  28. */
  29. this.getName = function() { return _name; };
  30. this.lastHeight = _NULL;
  31. },
  32. /**
  33. * 컨텐츠 영역에 포커스를 준다.
  34. * @function
  35. */
  36. focus: function() {
  37. this.el.focus();
  38. },
  39. /**
  40. * panel을 보이게한다.
  41. * @function
  42. */
  43. show: function() {
  44. try{
  45. $tx.show(this.elHolder);
  46. }catch(e){}
  47. },
  48. /**
  49. * panel을 감춘다.
  50. * @function
  51. */
  52. hide: function() {
  53. try{
  54. $tx.hide(this.elHolder);
  55. }catch(e){}
  56. },
  57. /**
  58. * 스타일명으로 컨텐츠 영역의 스타일 값을 얻어온다.
  59. * @function
  60. * @param {String} name - 스타일명
  61. * @returns {String} 해당 스타일 값
  62. */
  63. getStyle: function(name) {
  64. if(this.el.style[name]) {
  65. return this.el.style[name];
  66. } else {
  67. return _NULL;
  68. }
  69. },
  70. /**
  71. * 컨텐츠 영역에 스타일을 적용한다.
  72. * @function
  73. * @param {Object} styles - 적용할 스타일
  74. */
  75. addStyle: function(styles) {
  76. for(var name in styles) {
  77. if(this.el.style[name]) {
  78. this.el.style[name] = styles[name];
  79. }
  80. }
  81. },
  82. /**
  83. * panel 영역의 x,y 위치와 넓이, 높이 값을 얻어온다.
  84. * @function
  85. * @returns {Object} position 객체 = {
  86. * x: number,
  87. * y: number,
  88. * width: number,
  89. * height: number
  90. * }
  91. */
  92. getPosition: function(){
  93. return $tom.getPosition(this.el);
  94. },
  95. /**
  96. * panel 영역의 높이를 얻어온다.
  97. * @function
  98. * @returns {String} textarea 영역의 높이 (px)
  99. */
  100. getPanelHeight: function() {
  101. return $tom.getHeight(this.el).toPx();
  102. },
  103. /**
  104. * panel 영역의 높이를 셋팅한다.
  105. * @function
  106. * @param {Number} height - textarea 영역의 넓이 (px)
  107. */
  108. setPanelHeight: function(height) {
  109. height = height.toPx();
  110. if(this.lastHeight == height) {
  111. return;
  112. }
  113. $tom.setHeight(this.el, height);
  114. this.lastHeight = height;
  115. }
  116. });