switcher.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. /**
  2. * @fileoverview
  3. * wysiwyg, source, text 세모드로의 변경을 가능하게하는 dropdown 형식의 tool 'Switcher' Source,
  4. * Class Trex.Tool.Switcher 와 configuration을 포함
  5. *
  6. */
  7. TrexMessage.addMsg({
  8. '@switcher.wysiwyg': '에디터',
  9. '@switcher.source': 'HTML',
  10. '@switcher.text': '텍스트'
  11. });
  12. TrexConfig.addTool(
  13. "switcher",
  14. {
  15. wysiwygonly: _FALSE,
  16. status: _TRUE,
  17. options: [
  18. { label: TXMSG('@switcher.wysiwyg'), title: TXMSG('@switcher.wysiwyg'), data: 'html' },
  19. { label: TXMSG('@switcher.source'), title: TXMSG('@switcher.source'), data: 'source' },
  20. { label: TXMSG('@switcher.text'), title: TXMSG('@switcher.text'), data: 'text' }
  21. ]
  22. }
  23. );
  24. Trex.Tool.Switcher = Trex.Class.create({
  25. $const: {
  26. __Identity: 'switcher'
  27. },
  28. $extend: Trex.Tool,
  29. oninitialized: function(config) {
  30. var _canvas = this.canvas;
  31. var _map = {};
  32. config.options.each(function(option) {
  33. _map[option.data] = {
  34. title: option.title
  35. };
  36. });
  37. var _cachedProperty = "";
  38. var _defaultProperty = config.options[0];
  39. var _isChangeToTextMode = function (mode) {
  40. if (mode === "text") {
  41. if (_canvas.mode !== "text") {
  42. return _TRUE;
  43. }
  44. }
  45. return _FALSE;
  46. };
  47. var _hasContent = function () {
  48. var content, curText, baseText;
  49. content = _canvas.getContent();
  50. curText = content.toLowerCase().trim();
  51. baseText = $tom.EMPTY_PARAGRAPH_HTML.toLowerCase().trim();
  52. if (curText && curText !== baseText && curText !== " ") {
  53. return _TRUE;
  54. }
  55. return _FALSE;
  56. };
  57. var _toolHandler = function (data) {
  58. if (config.changeModeConfirmMsg) {
  59. if (_isChangeToTextMode(data)) {
  60. if (_hasContent()) {
  61. if (_FALSE === confirm(config.changeModeConfirmMsg)) {
  62. return $stop;
  63. }
  64. }
  65. }
  66. }
  67. _canvas.changeMode(data);
  68. };
  69. var _changeMode = function(from, to) {
  70. if(from == to) return;
  71. if(_cachedProperty == to) {
  72. return;
  73. }
  74. if(!_map[to]) {
  75. return;
  76. }
  77. this.button.setValue(to);
  78. this.button.setText(_map[to].title);
  79. _cachedProperty = to; //NOTE: Editor.modify()를 통한 로딩일 경우 switcher 동기화를 위해.
  80. }.bind(this);
  81. _canvas.observeJob(Trex.Ev.__CANVAS_MODE_CHANGE, _changeMode);
  82. _canvas.observeJob(Trex.Ev.__CANVAS_MODE_INITIALIZE, _changeMode);
  83. /* button & menu weave */
  84. this.weave.bind(this)(
  85. /* button */
  86. new Trex.Button.Select(TrexConfig.merge(this.buttonCfg, {
  87. selectedValue: _defaultProperty.data,
  88. selectedText: _defaultProperty.label
  89. })),
  90. /* menu */
  91. new Trex.Menu.Select(this.menuCfg),
  92. /* handler */
  93. _toolHandler
  94. );
  95. }
  96. });