Widget.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. /**
  2. * Widget.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. * Widget base class a widget is a control that has a tooltip and some basic states.
  12. *
  13. * @class tinymce.ui.Widget
  14. * @extends tinymce.ui.Control
  15. */
  16. define("tinymce/ui/Widget", [
  17. "tinymce/ui/Control",
  18. "tinymce/ui/Tooltip"
  19. ], function(Control, Tooltip) {
  20. "use strict";
  21. var tooltip;
  22. var Widget = Control.extend({
  23. /**
  24. * Constructs a instance with the specified settings.
  25. *
  26. * @constructor
  27. * @param {Object} settings Name/value object with settings.
  28. * @setting {String} tooltip Tooltip text to display when hovering.
  29. * @setting {Boolean} autofocus True if the control should be focused when rendered.
  30. * @setting {String} text Text to display inside widget.
  31. */
  32. init: function(settings) {
  33. var self = this;
  34. self._super(settings);
  35. settings = self.settings;
  36. self.canFocus = true;
  37. if (settings.tooltip && Widget.tooltips !== false) {
  38. self.on('mouseenter', function(e) {
  39. var tooltip = self.tooltip().moveTo(-0xFFFF);
  40. if (e.control == self) {
  41. var rel = tooltip.text(settings.tooltip).show().testMoveRel(self.getEl(), ['bc-tc', 'bc-tl', 'bc-tr']);
  42. tooltip.toggleClass('tooltip-n', rel == 'bc-tc');
  43. tooltip.toggleClass('tooltip-nw', rel == 'bc-tl');
  44. tooltip.toggleClass('tooltip-ne', rel == 'bc-tr');
  45. tooltip.moveRel(self.getEl(), rel);
  46. } else {
  47. tooltip.hide();
  48. }
  49. });
  50. self.on('mouseleave mousedown click', function() {
  51. self.tooltip().hide();
  52. });
  53. }
  54. self.aria('label', settings.ariaLabel || settings.tooltip);
  55. },
  56. /**
  57. * Returns the current tooltip instance.
  58. *
  59. * @method tooltip
  60. * @return {tinymce.ui.Tooltip} Tooltip instance.
  61. */
  62. tooltip: function() {
  63. if (!tooltip) {
  64. tooltip = new Tooltip({type: 'tooltip'});
  65. tooltip.renderTo();
  66. }
  67. return tooltip;
  68. },
  69. /**
  70. * Sets/gets the active state of the widget.
  71. *
  72. * @method active
  73. * @param {Boolean} [state] State if the control is active.
  74. * @return {Boolean|tinymce.ui.Widget} True/false or current widget instance.
  75. */
  76. active: function(state) {
  77. var self = this, undef;
  78. if (state !== undef) {
  79. self.aria('pressed', state);
  80. self.toggleClass('active', state);
  81. }
  82. return self._super(state);
  83. },
  84. /**
  85. * Sets/gets the disabled state of the widget.
  86. *
  87. * @method disabled
  88. * @param {Boolean} [state] State if the control is disabled.
  89. * @return {Boolean|tinymce.ui.Widget} True/false or current widget instance.
  90. */
  91. disabled: function(state) {
  92. var self = this, undef;
  93. if (state !== undef) {
  94. self.aria('disabled', state);
  95. self.toggleClass('disabled', state);
  96. }
  97. return self._super(state);
  98. },
  99. /**
  100. * Called after the control has been rendered.
  101. *
  102. * @method postRender
  103. */
  104. postRender: function() {
  105. var self = this, settings = self.settings;
  106. self._rendered = true;
  107. self._super();
  108. if (!self.parent() && (settings.width || settings.height)) {
  109. self.initLayoutRect();
  110. self.repaint();
  111. }
  112. if (settings.autofocus) {
  113. self.focus();
  114. }
  115. },
  116. /**
  117. * Removes the current control from DOM and from UI collections.
  118. *
  119. * @method remove
  120. * @return {tinymce.ui.Control} Current control instance.
  121. */
  122. remove: function() {
  123. this._super();
  124. if (tooltip) {
  125. tooltip.remove();
  126. tooltip = null;
  127. }
  128. }
  129. });
  130. return Widget;
  131. });