toolbar.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. /*!
  2. * 工具条组件
  3. */
  4. define( function ( require ) {
  5. var kity = require( "kity" ),
  6. UiImpl = require( "ui/ui-impl/ui" ),
  7. $$ = require( "ui/ui-impl/ui-utils" ),
  8. UI_ELE_TYPE = require( "ui/ui-impl/def/ele-type" ),
  9. Tollbar = kity.createClass( "Tollbar", {
  10. constructor: function ( kfEditor, uiComponent, elementList ) {
  11. this.kfEditor = kfEditor;
  12. this.uiComponent = uiComponent;
  13. // 工具栏元素定义列表
  14. this.elementList = elementList;
  15. this.elements = [];
  16. this.initToolbarElements();
  17. this.initEvent();
  18. },
  19. initEvent: function () {
  20. var _self = this;
  21. // 通知所有组件关闭
  22. $$.on( this.kfEditor.getContainer(), "mousedown", function () {
  23. _self.notify( "closeAll" );
  24. } );
  25. // 订阅数据选择主题
  26. $$.subscribe( "data.select", function ( data ) {
  27. _self.insertSource( data );
  28. } );
  29. },
  30. insertSource: function ( val ) {
  31. this.kfEditor.requestService( "control.insert.group", val );
  32. },
  33. // 接受到关闭通知
  34. notify: function ( type ) {
  35. var caller = null;
  36. switch ( type ) {
  37. // 关闭所有组件
  38. case "closeAll":
  39. // 关闭其他组件
  40. case "closeOther":
  41. this.closeElement( arguments[ 1 ] );
  42. return;
  43. }
  44. },
  45. closeElement: function ( exception ) {
  46. kity.Utils.each( this.elements, function ( ele ) {
  47. if ( ele != exception ) {
  48. ele.hide && ele.hide();
  49. }
  50. } );
  51. },
  52. initToolbarElements: function () {
  53. var elements = this.elements,
  54. doc = this.uiComponent.toolbarContainer.ownerDocument,
  55. _self = this;
  56. kity.Utils.each( this.elementList, function ( eleInfo, i ) {
  57. var ele = createElement( eleInfo.type, doc, eleInfo.options );
  58. elements.push( ele );
  59. _self.appendElement( ele );
  60. } );
  61. },
  62. appendElement: function ( uiElement ) {
  63. uiElement.setToolbar( this );
  64. uiElement.attachTo( this.uiComponent.toolbarContainer );
  65. }
  66. } );
  67. function createElement ( type, doc, options ) {
  68. switch ( type ) {
  69. case UI_ELE_TYPE.DRAPDOWN_BOX:
  70. return createDrapdownBox( doc, options );
  71. case UI_ELE_TYPE.DELIMITER:
  72. return createDelimiter( doc );
  73. case UI_ELE_TYPE.AREA:
  74. return createArea( doc, options );
  75. }
  76. }
  77. function createDrapdownBox ( doc, options ) {
  78. return new UiImpl.DrapdownBox( doc, options );
  79. }
  80. function createDelimiter ( doc ) {
  81. return new UiImpl.Delimiter( doc );
  82. }
  83. function createArea ( doc, options ) {
  84. return new UiImpl.Area( doc, options );
  85. }
  86. return Tollbar;
  87. } );