Coral Spectrum
ExamplesPlaygroundReference Source

coral-spectrum/coral-component-masonry/src/scripts/MasonryLayoutUtil.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. /** @ignore */
  14. const setTransform = (el, value) => {
  15.   el.style.setProperty('-webkit-transform', value);
  16.   el.style.setProperty('-ms-transform', value);
  17.   el.style.transform = value;
  18. };
  19.  
  20. /** @ignore */
  21. const setTransition = (el, value) => {
  22.   el.style.setProperty('-webkit-transition', value);
  23.   el.style.setProperty('-ms-transition', value);
  24.   el.style.transition = value;
  25. };
  26.  
  27. /** @ignore */
  28. const getFirstRowFilledColumns = (columns, items) => {
  29.   let filledColumns = 0;
  30.   for (let i = 0 ; i < items.length ; i++) {
  31.     const item = items[i];
  32.     filledColumns += item._layoutData.colspan;
  33.     if (filledColumns >= columns.length) {
  34.       return columns.length;
  35.     }
  36.   }
  37.   return filledColumns;
  38. };
  39.  
  40. /** @ignore */
  41. const csspx = (el, property) => parseFloat(window.getComputedStyle(el)[property], 10);
  42.  
  43. // TODO if the property changes, it will not automatically relayout the masonry
  44. // TODO test columnWidth and colspan property and default values
  45. /** @ignore */
  46. const getPositiveNumberProperty = (element, property, attribute, defaultValue) => {
  47.   let value = element[property];
  48.   if (value === undefined) {
  49.     value = element.getAttribute(attribute);
  50.   }
  51.   value = parseInt(value, 10);
  52.   if (value <= 0 || isNaN(value)) {
  53.     value = defaultValue;
  54.   }
  55.   return value;
  56. };
  57.  
  58. export {setTransform, setTransition, getFirstRowFilledColumns, csspx, getPositiveNumberProperty};