splitbutton.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. ///import core
  2. ///import uicore
  3. ///import ui/stateful.js
  4. (function (){
  5. var utils = baidu.editor.utils,
  6. uiUtils = baidu.editor.ui.uiUtils,
  7. domUtils = baidu.editor.dom.domUtils,
  8. UIBase = baidu.editor.ui.UIBase,
  9. Stateful = baidu.editor.ui.Stateful,
  10. SplitButton = baidu.editor.ui.SplitButton = function (options){
  11. this.initOptions(options);
  12. this.initSplitButton();
  13. };
  14. SplitButton.prototype = {
  15. popup: null,
  16. uiName: 'splitbutton',
  17. title: '',
  18. initSplitButton: function (){
  19. this.initUIBase();
  20. this.Stateful_init();
  21. var me = this;
  22. if (this.popup != null) {
  23. var popup = this.popup;
  24. this.popup = null;
  25. this.setPopup(popup);
  26. }
  27. },
  28. _UIBase_postRender: UIBase.prototype.postRender,
  29. postRender: function (){
  30. this.Stateful_postRender();
  31. this._UIBase_postRender();
  32. },
  33. setPopup: function (popup){
  34. if (this.popup === popup) return;
  35. if (this.popup != null) {
  36. this.popup.dispose();
  37. }
  38. popup.addListener('show', utils.bind(this._onPopupShow, this));
  39. popup.addListener('hide', utils.bind(this._onPopupHide, this));
  40. popup.addListener('postrender', utils.bind(function (){
  41. popup.getDom('body').appendChild(
  42. uiUtils.createElementByHtml('<div id="' +
  43. this.popup.id + '_bordereraser" class="edui-bordereraser edui-background" style="width:' +
  44. (uiUtils.getClientRect(this.getDom()).width - 2) + 'px"></div>')
  45. );
  46. popup.getDom().className += ' ' + this.className;
  47. }, this));
  48. this.popup = popup;
  49. },
  50. _onPopupShow: function (){
  51. this.addState('opened');
  52. },
  53. _onPopupHide: function (){
  54. this.removeState('opened');
  55. },
  56. getHtmlTpl: function (){
  57. return '<div id="##" class="edui-box %%">' +
  58. '<div '+ (this.title ? 'title="' + this.title + '"' : '') +' id="##_state" stateful><div class="%%-body">' +
  59. '<div id="##_button_body" class="edui-box edui-button-body" onclick="$$._onButtonClick(event, this);">' +
  60. '<div class="edui-box edui-icon"></div>' +
  61. '</div>' +
  62. '<div class="edui-box edui-splitborder"></div>' +
  63. '<div class="edui-box edui-arrow" onclick="$$._onArrowClick();"></div>' +
  64. '</div></div></div>';
  65. },
  66. showPopup: function (){
  67. // 当popup往上弹出的时候,做特殊处理
  68. var rect = uiUtils.getClientRect(this.getDom());
  69. rect.top -= this.popup.SHADOW_RADIUS;
  70. rect.height += this.popup.SHADOW_RADIUS;
  71. this.popup.showAnchorRect(rect);
  72. },
  73. _onArrowClick: function (event, el){
  74. if (!this.isDisabled()) {
  75. this.showPopup();
  76. }
  77. },
  78. _onButtonClick: function (){
  79. if (!this.isDisabled()) {
  80. this.fireEvent('buttonclick');
  81. }
  82. }
  83. };
  84. utils.inherits(SplitButton, UIBase);
  85. utils.extend(SplitButton.prototype, Stateful, true);
  86. })();