ExamplesPlaygroundReference Source

coral-spectrum/coral-component-masonry/src/scripts/MasonryDashboardLayout.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 MasonryVariableLayout from './MasonryVariableLayout';
  14.  
  15. /**
  16. Layout with variable width items which are expanded in their height to fill gaps (which are common with colspan).
  17. The minimal width of the items is defined with the <code>columnwidth</code> attribute.
  18.  
  19. @example
  20. <coral-masonry layout="dashboard" columnwidth="300">
  21.  
  22. @class Coral.Masonry.DashboardLayout
  23. @extends {MasonryVariableLayout}
  24. */
  25. class MasonryDashboardLayout extends MasonryVariableLayout {
  26. /** @inheritdoc */
  27. _writeItemStyle(item) {
  28. // Reset height because otherwise getBoundingClientRect() will not return the real height
  29. this._resetItem(item);
  30. }
  31.  
  32. /** @inheritdoc */
  33. _postLayout(contentHeight) {
  34. for (let columnIndex = 0 ; columnIndex < this._columns.length ; columnIndex++) {
  35. const column = this._columns[columnIndex];
  36. let nextItemTop = contentHeight + this._offsetTop;
  37.  
  38. // Fill gaps by expanding the height of the items
  39. for (let itemIndex = column.items.length - 1 ; itemIndex >= 0 ; itemIndex--) {
  40. const item = column.items[itemIndex];
  41. const layoutData = item._layoutData;
  42. if (layoutData.columnIndex === columnIndex) {
  43. const expandedHeight = nextItemTop - layoutData.top - this._verSpacing;
  44. item.style.height = `${expandedHeight}px`;
  45. }
  46. nextItemTop = layoutData.top;
  47. }
  48. }
  49. }
  50.  
  51. /** @inheritdoc */
  52. _resetItem(item) {
  53. item.style.height = '';
  54. }
  55. }
  56.  
  57. export default MasonryDashboardLayout;