PanelButton.js 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. /**
  2. * PanelButton.js
  3. *
  4. * Copyright, Moxiecode Systems AB
  5. * Released under LGPL License.
  6. *
  7. * License: http://www.tinymce.com/license
  8. * Contributing: http://www.tinymce.com/contributing
  9. */
  10. /**
  11. * Creates a new panel button.
  12. *
  13. * @class tinymce.ui.PanelButton
  14. * @extends tinymce.ui.Button
  15. */
  16. define("tinymce/ui/PanelButton", [
  17. "tinymce/ui/Button",
  18. "tinymce/ui/FloatPanel"
  19. ], function(Button, FloatPanel) {
  20. "use strict";
  21. return Button.extend({
  22. /**
  23. * Shows the panel for the button.
  24. *
  25. * @method showPanel
  26. */
  27. showPanel: function() {
  28. var self = this, settings = self.settings;
  29. self.active(true);
  30. if (!self.panel) {
  31. var panelSettings = settings.panel;
  32. // Wrap panel in grid layout if type if specified
  33. // This makes it possible to add forms or other containers directly in the panel option
  34. if (panelSettings.type) {
  35. panelSettings = {
  36. layout: 'grid',
  37. items: panelSettings
  38. };
  39. }
  40. panelSettings.role = panelSettings.role || 'dialog';
  41. panelSettings.popover = true;
  42. panelSettings.autohide = true;
  43. panelSettings.ariaRoot = true;
  44. self.panel = new FloatPanel(panelSettings).on('hide', function() {
  45. self.active(false);
  46. }).on('cancel', function(e) {
  47. e.stopPropagation();
  48. self.focus();
  49. self.hidePanel();
  50. }).parent(self).renderTo(self.getContainerElm());
  51. self.panel.fire('show');
  52. self.panel.reflow();
  53. } else {
  54. self.panel.show();
  55. }
  56. self.panel.moveRel(self.getEl(), settings.popoverAlign || (self.isRtl() ? ['bc-tr', 'bc-tc'] : ['bc-tl', 'bc-tc']));
  57. },
  58. /**
  59. * Hides the panel for the button.
  60. *
  61. * @method hidePanel
  62. */
  63. hidePanel: function() {
  64. var self = this;
  65. if (self.panel) {
  66. self.panel.hide();
  67. }
  68. },
  69. /**
  70. * Called after the control has been rendered.
  71. *
  72. * @method postRender
  73. */
  74. postRender: function() {
  75. var self = this;
  76. self.aria('haspopup', true);
  77. self.on('click', function(e) {
  78. if (e.control === self) {
  79. if (self.panel && self.panel.visible()) {
  80. self.hidePanel();
  81. } else {
  82. self.showPanel();
  83. self.panel.focus(!!e.aria);
  84. }
  85. }
  86. });
  87. return self._super();
  88. }
  89. });
  90. });