htmlpanel.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. /**
  2. * @fileOverview
  3. * Textarea (source, text) 영역의 컨텐츠를 수정, 관리하기 위한 HtmlPanel 관련 Source
  4. */
  5. /**
  6. * HTML모드(소스모드)의 컨텐츠를 수정, 관리하기 위한 클래스
  7. *
  8. * @class
  9. * @extends Trex.Canvas.BasedPanel
  10. * @param {Object} canvas
  11. * @param {Object} config - canvas의 config
  12. */
  13. Trex.Canvas.HtmlPanel = Trex.Class.create(/** @lends Trex.Canvas.HtmlPanel.prototype */{
  14. /** @ignore */
  15. $extend: Trex.Canvas.TextareaPanel,
  16. /** @ignore */
  17. $const: {
  18. /** @name Trex.Canvas.HtmlPanel.__MODE */
  19. __MODE: Trex.Canvas.__HTML_MODE
  20. },
  21. initialize: function(canvas, config) {
  22. this.$super.initialize(canvas, config);
  23. this.bindEvents();
  24. if($tx.msie_ver == '8') { //NOTE: #FTDUEDTR-963
  25. this.el.setAttribute('style', 'width: 500px; min-width: 100%; max-width: 100%;');
  26. }
  27. if (!config.styles.notApplyBgColorOnSourceMode) {
  28. if ( config.styles.backgroundColor ){
  29. $tx.setStyle( this.el, {
  30. backgroundColor: config.styles.backgroundColor
  31. });
  32. }
  33. if ( config.styles.color ){
  34. $tx.setStyle( this.el, {
  35. color: config.styles.color
  36. });
  37. }
  38. }
  39. },
  40. bindEvents: function() {
  41. var _handlers = {
  42. keydown: function(ev){
  43. this.canvas.fireJobs(Trex.Ev.__CANVAS_SOURCE_PANEL_KEYDOWN, ev);
  44. },
  45. keyup: function(){
  46. var processor = this.canvas.getProcessor();
  47. if (processor && processor.savePosition) {
  48. processor.savePosition();
  49. }
  50. },
  51. mousedown: function(ev){
  52. this.canvas.fireJobs(Trex.Ev.__CANVAS_SOURCE_PANEL_MOUSEDOWN, ev);
  53. },
  54. mouseup: function(){
  55. var processor = this.canvas.getProcessor();
  56. if (processor && processor.savePosition) {
  57. processor.savePosition();
  58. }
  59. },
  60. click: function(ev) {
  61. this.canvas.fireJobs(Trex.Ev.__CANVAS_SOURCE_PANEL_CLICK, ev);
  62. }
  63. };
  64. for(var _eventType in _handlers){
  65. $tx.observe(this.el, _eventType, _handlers[_eventType].bind(this), _TRUE);
  66. }
  67. },
  68. /**
  69. * panel 엘리먼트를 가지고 온다.
  70. * @function
  71. */
  72. getPanel: function(config) {
  73. var _initializedId = ((config.initializedId)? config.initializedId: "");
  74. return $must("tx_canvas_source" + _initializedId, "Trex.Canvas.HtmlPanel");
  75. },
  76. /**
  77. * panel 엘리먼트를 감싸고 있는 wrapper 엘리먼트를 가지고 온다.
  78. * @function
  79. */
  80. getHolder: function(config) {
  81. var _initializedId = ((config.initializedId)? config.initializedId: "");
  82. return $must("tx_canvas_source_holder" + _initializedId, "Trex.Canvas.HtmlPanel");
  83. },
  84. /**
  85. * 컨텐츠 영역의 컨텐츠를 주어진 문자열로 수정한다.
  86. * @function
  87. * @param {String} content - 컨텐츠
  88. */
  89. setContent: function(content) {
  90. var validator = new Trex.Validator();
  91. if (validator.exists(content)) {
  92. this.$super.setContent(content);
  93. } else {
  94. this.$super.setContent("");
  95. }
  96. }
  97. });