API Docs for: 1.0.0
Show:

File: Resources/public/js/alloyeditor/buttons/mixins/embedalign.js

  1. /*
  2. * Copyright (C) eZ Systems AS. All rights reserved.
  3. * For full copyright and license information view LICENSE file distributed with this source code.
  4. */
  5. YUI.add('ez-alloyeditor-button-mixin-embedalign', function (Y) {
  6. "use strict";
  7.  
  8. /**
  9. * Provides the EmbedAlign mixin
  10. *
  11. * @module ez-alloyeditor-button-mixin-embedalign
  12. */
  13. Y.namespace('eZ.AlloyEditorButton');
  14.  
  15. var AlloyEditor = Y.eZ.AlloyEditor,
  16. React = Y.eZ.React;
  17.  
  18. /**
  19. * Mixin providing the base to implement the embed align buttons.
  20. *
  21. * @uses ButtonStateClasses
  22. * @uses eZ.AlloyEditorButton.WidgetButton
  23. *
  24. * @class ButtonEmbedAlign
  25. * @namespace eZ.AlloyEditorButton
  26. */
  27. Y.eZ.AlloyEditorButton.ButtonEmbedAlign = {
  28. mixins: [
  29. AlloyEditor.ButtonStateClasses,
  30. Y.eZ.AlloyEditorButton.WidgetButton,
  31. ],
  32.  
  33. propTypes: {
  34. /**
  35. * The label that should be used for accessibility purposes. This
  36. * property is deprecated, while using ButtonEmbedAlign, you should
  37. * implement a `_getLabel` method instead.
  38. *
  39. * @property {String} label
  40. * @deprecated
  41. */
  42. label: React.PropTypes.string,
  43.  
  44. /**
  45. * The tabIndex of the button in its toolbar current state. A value other than -1
  46. * means that the button has focus and is the active element.
  47. *
  48. * @property {Number} tabIndex
  49. */
  50. tabIndex: React.PropTypes.number,
  51.  
  52. /**
  53. * The alignment to apply ('center', 'left' or 'right')
  54. *
  55. * @required
  56. * @property {String} alignment
  57. */
  58. alignment: React.PropTypes.string.isRequired,
  59.  
  60. /**
  61. * The suffix of the class to use icon to set the button icon
  62. *
  63. * @property {String} classIcon
  64. */
  65. classIcon: React.PropTypes.string,
  66. },
  67.  
  68. /**
  69. * Checks if the configured alignment is active on the focused embed
  70. * element.
  71. *
  72. * @method isActive
  73. * @return {Boolean}
  74. */
  75. isActive: function () {
  76. return this._getWidget().isAligned(this.props.alignment);
  77. },
  78.  
  79. /**
  80. * Applies or un-applies the alignment on the currently focused embed
  81. * element.
  82. *
  83. * @method applyStyle
  84. */
  85. applyStyle: function () {
  86. var widget = this._getWidget();
  87.  
  88. if ( this.isActive() ) {
  89. widget.unsetAlignment();
  90. } else {
  91. widget.setAlignment(this.props.alignment);
  92. }
  93. },
  94.  
  95. render: function() {
  96. var cssClass = 'ae-button ' + this.getStateClasses(),
  97. iconCss = 'ez-font-icon ez-ae-icon-align-' + this.props.classIcon,
  98. label;
  99.  
  100. if ( this._getLabel ) {
  101. label = this._getLabel();
  102. } else {
  103. console.log('[DEPRECATED] Using deprecated `label` property');
  104. console.log('[DEPRECATED] Please implement a `_getLabel` method instead');
  105. label = this.props.label;
  106. }
  107.  
  108. return (
  109. React.createElement("button", {className: cssClass, onClick: this.applyStyle,
  110. tabIndex: this.props.tabIndex, title: label},
  111. React.createElement("span", {className: iconCss})
  112. )
  113. );
  114. },
  115. };
  116. });
  117.