ExamplesPlaygroundReference Source

coral-spectrum/coral-component-actionbar/src/scripts/ActionBarContainer.js

  1. /**
  2. * Copyright 2019 Adobe. All rights reserved.
  3. * This file is licensed to you under the Apache License, Version 2.0 (the "License");
  4. * you may not use this file except in compliance with the License. You may obtain a copy
  5. * of the License at http://www.apache.org/licenses/LICENSE-2.0
  6. *
  7. * Unless required by applicable law or agreed to in writing, software distributed under
  8. * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
  9. * OF ANY KIND, either express or implied. See the License for the specific language
  10. * governing permissions and limitations under the License.
  11. */
  12.  
  13. import {commons} from '../../../coral-utils';
  14. import {Decorator} from '../../../coral-decorator';
  15. import {BaseComponent} from '../../../coral-base-component';
  16. import BaseActionBarContainer from './BaseActionBarContainer';
  17. import '../../../coral-component-list';
  18.  
  19. const CLASSNAME = '_coral-ActionBar-container';
  20.  
  21. /**
  22. Enumeration for {@link ActionBarContainer} positions.
  23.  
  24. @typedef {Object} ActionBarContainerPositionEnum
  25.  
  26. @property {String} PRIMARY
  27. Primary (left) ActionBar container.
  28. @property {String} SECONDARY
  29. Secondary (right) ActionBar container.
  30. @property {String} INVALID
  31. Invalid ActionBar container.
  32. */
  33. const position = {
  34. PRIMARY: 'primary',
  35. SECONDARY: 'secondary',
  36. INVALID: 'invalid'
  37. };
  38.  
  39. /**
  40. @class Coral.ActionBar.Container
  41. @classdesc An ActionBar container component
  42. @htmltag coral-actionbar-container
  43. @extends {HTMLElement}
  44. @extends {BaseComponent}
  45.  
  46. @deprecated
  47. */
  48. const ActionBarContainer = Decorator(class extends BaseActionBarContainer(BaseComponent(HTMLElement)) {
  49. /** @ignore */
  50. constructor() {
  51. super();
  52.  
  53. commons._log('warn', `Coral.ActionBar.Container: coral-actionbar-container has been deprecated.
  54. Please use coral-actionbar-primary and coral-actionbar-secondary instead`);
  55. }
  56.  
  57. /**
  58. The container position inside the actionbar.
  59.  
  60. @private
  61. @type {String}
  62. @readonly
  63. @default ActionBarContainerPositionEnum.INVALID
  64. */
  65. get _position() {
  66. if (this.parentNode) {
  67. const containers = this.parentNode.getElementsByTagName('coral-actionbar-container');
  68.  
  69. if (containers.length > 0 && containers[0] === this) {
  70. return position.PRIMARY;
  71. } else if (containers.length > 1 && containers[1] === this) {
  72. return position.SECONDARY;
  73. }
  74. }
  75.  
  76. return position.INVALID;
  77. }
  78.  
  79. /** @ignore */
  80. _attachMoreButtonToContainer() {
  81. if (this.parentNode && this.parentNode.secondary === this) {
  82. this.insertBefore(this._elements.moreButton, this.firstChild);
  83. } else {
  84. // add the button to the left/primary contentzone
  85. this.appendChild(this._elements.moreButton);
  86. }
  87. }
  88.  
  89. /**
  90. Returns {@link ActionBarContainer} positions.
  91.  
  92. @return {ActionBarContainerPositionEnum}
  93. */
  94. static get position() {
  95. return position;
  96. }
  97.  
  98. /** @ignore */
  99. render() {
  100. super.render();
  101.  
  102. this.classList.add(CLASSNAME);
  103.  
  104. // Cleanup resize helpers object (cloneNode support)
  105. const resizeHelpers = this.getElementsByTagName('object');
  106. for (let i = 0 ; i < resizeHelpers.length ; ++i) {
  107. const resizeElement = resizeHelpers[i];
  108. if (resizeElement.parentNode === this) {
  109. this.removeChild(resizeElement);
  110. }
  111. }
  112.  
  113. // Cleanup 'More' button
  114. this._elements.moreButton = this.querySelector('[coral-actionbar-more]');
  115. if (this._elements.moreButton) {
  116. this.removeChild(this._elements.moreButton);
  117. }
  118.  
  119. // Cleanup 'More' popover
  120. this._elements.overlay = this.querySelector('[coral-actionbar-popover]');
  121. if (this._elements.overlay) {
  122. this.removeChild(this._elements.overlay);
  123. }
  124.  
  125. // Init 'More' button
  126. this._elements.moreButton.label.textContent = this.moreButtonText;
  127. // 'More' button might be moved later in dom when Container is attached to parent
  128. this.appendChild(this._elements.moreButton);
  129.  
  130. // Init 'More' popover
  131. this._elements.overlay.target = this._elements.moreButton;
  132.  
  133. // Insert popover always as firstChild to ensure element order (cloneNode support)
  134. this.insertBefore(this._elements.overlay, this.firstChild);
  135.  
  136. this._attachMoreButtonToContainer();
  137. }
  138. });
  139.  
  140. export default ActionBarContainer;