@openui5/sap.ui.webc.fiori 1.111.1 → 1.112.0

package/src/sap/ui/webc/fiori/thirdparty/MediaGallery.js

@@ -21,11 +21,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavig
   _MediaGalleryMenuVerticalAlign = _interopRequireDefault(_MediaGalleryMenuVerticalAlign);
   _MediaGalleryTemplate = _interopRequireDefault(_MediaGalleryTemplate);
   _MediaGallery = _interopRequireDefault(_MediaGallery);
-
   function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
   // Template
+
   // Styles
+
   // The allowed number of thumbnail columns on each size
   // (relevant when <code>showAllThumbnails</code> is enabled)
   const COLUMNS_COUNT = {
@@ -34,16 +34,14 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavig
     "L": 3,
     "XL": 4
   };
+
   /**
    * @public
    */
-
   const metadata = {
     tag: "ui5-media-gallery",
     managedSlots: true,
-    slots:
-    /** @lends sap.ui.webcomponents.fiori.MediaGallery.prototype */
-    {
+    slots: /** @lends sap.ui.webcomponents.fiori.MediaGallery.prototype */{
       /**
        * Defines the component items.
        *
@@ -64,9 +62,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavig
         invalidateOnChildChange: true
       }
     },
-    properties:
-    /** @lends sap.ui.webcomponents.fiori.MediaGallery.prototype */
-    {
+    properties: /** @lends sap.ui.webcomponents.fiori.MediaGallery.prototype */{
       /**
        * If set to <code>true</code>, all thumbnails are rendered in a scrollable container.
        * If <code>false</code>, only up to five thumbnails are rendered, followed by
@@ -79,7 +75,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavig
       showAllThumbnails: {
         type: Boolean
       },
-
       /**
        * If enabled, a <code>display-area-click</code> event is fired
        * when the user clicks or taps on the display area.
@@ -94,7 +89,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavig
       interactiveDisplayArea: {
         type: Boolean
       },
-
       /**
        * Determines the layout of the component.
        * <br><br>
@@ -113,7 +107,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavig
         type: _MediaGalleryLayout.default,
         defaultValue: "Auto"
       },
-
       /**
        * Determines the horizontal alignment of the thumbnails menu
        * vs. the central display area.
@@ -132,7 +125,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavig
         type: _MediaGalleryMenuHorizontalAlign.default,
         defaultValue: _MediaGalleryMenuHorizontalAlign.default.Left
       },
-
       /**
        * Determines the vertical alignment of the thumbnails menu
        * vs. the central display area.
@@ -151,7 +143,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavig
         type: _MediaGalleryMenuVerticalAlign.default,
         defaultValue: _MediaGalleryMenuVerticalAlign.default.Bottom
       },
-
       /**
        * Determines the actual applied layout type
        * (esp. needed when the app did not specify a fixed layout type
@@ -171,7 +162,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavig
         type: _MediaGalleryLayout.default,
         defaultValue: "Vertical"
       },
-
       /**
        * Defines the current media query size.
        *
@@ -180,7 +170,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavig
       mediaRange: {
         type: String
       },
-
       /**
        * The number of items in the overflow.
        *
@@ -192,9 +181,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavig
         defaultValue: 0
       }
     },
-    events:
-    /** @lends sap.ui.webcomponents.fiori.MediaGallery.prototype */
-    {
+    events: /** @lends sap.ui.webcomponents.fiori.MediaGallery.prototype */{
       /**
        * Fired when selection is changed by user interaction.
        *
@@ -209,7 +196,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavig
           }
         }
       },
-
       /**
        * Fired when the thumbnails overflow button is clicked.
        *
@@ -217,7 +203,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavig
        * @public
        */
       "overflow-click": {},
-
       /**
        * Fired when the display area is clicked.<br>
        * The display area is the central area that contains
@@ -229,6 +214,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavig
       "display-area-click": {}
     }
   };
+
   /**
    * @class
    *
@@ -273,30 +259,23 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavig
    * @public
    * @since 1.1.0
    */
-
   class MediaGallery extends _UI5Element.default {
     constructor() {
       super();
       this._onResize = this._updateLayout.bind(this);
       this._selectedItem = null;
-
       this._initItemNavigation();
     }
-
     onEnterDOM() {
       !(0, _Device.isPhone)() && _ResizeHandler.default.register(this, this._onResize);
     }
-
     onExitDOM() {
       !(0, _Device.isPhone)() && _ResizeHandler.default.deregister(this, this._onResize);
     }
-
     onAfterRendering() {
       this._updateLayout();
-
       this._updateSelection();
     }
-
     _initItemNavigation() {
       if (!this._itemNavigation) {
         this._itemNavigation = new _ItemNavigation.default(this, {
@@ -305,125 +284,95 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavig
         });
       }
     }
-
     _updateSelection() {
       let itemToSelect = this.items.find(item => item.selected);
-
       if (!itemToSelect || !this._isSelectableItem(itemToSelect)) {
         itemToSelect = this._findSelectableItem();
       }
-
       if (itemToSelect && itemToSelect !== this._selectedItem) {
         this._selectItem(itemToSelect);
       }
     }
-
     _isSelectableItem(item) {
       return !item.disabled && !item.hidden;
     }
-
     _findSelectableItem() {
       return this.items.find(this._isSelectableItem);
     }
-
     _updateMediaRange(width) {
       this.mediaRange = _MediaRange.default.getCurrentRange(_MediaRange.default.RANGESETS.RANGE_4STEPS, width);
     }
-
     _updateLayout() {
       const rootNode = this.getDomRef(),
-            height = rootNode.offsetHeight,
-            width = rootNode.offsetWidth;
-
+        height = rootNode.offsetHeight,
+        width = rootNode.offsetWidth;
       if (!width || !height || (0, _Device.isPhone)()) {
         return;
       }
-
       this._updateMediaRange(width);
-
       this.effectiveLayout = this._infereffectiveLayout();
       this._overflowSize = this._calculateOverflowSize(width, height);
-
       this._toggleDisplaySquareSize(this._shouldHaveSquareDisplay);
-
       this._toggleMainItem9x16size(this._shouldHaveWideDisplay);
     }
-
     _calculateOverflowSize(width, height) {
       const marginSize = MediaGallery.THUMBNAIL_MARGIN;
       let columnHeight, columnsCount;
-
       if (this.showAllThumbnails) {
         return 0;
       }
-
       if (this.effectiveLayout === _MediaGalleryLayout.default.Horizontal) {
         columnHeight = height - marginSize;
         columnsCount = this.showAllThumbnails ? COLUMNS_COUNT[this.mediaRange] : 1;
       } else {
         columnHeight = width - marginSize * 2; // column is flexed to appear as a row in this case
-
         columnsCount = 1;
       }
-
       return this._getOverflowSize(columnHeight, columnsCount);
     }
-
     _toggleDisplaySquareSize(enable) {
       this._display.style.width = ""; // restore default width
 
       if (enable) {
         const marginSize = MediaGallery.THUMBNAIL_MARGIN,
-              width = this._display.offsetWidth;
+          width = this._display.offsetWidth;
         let availableHeight = this.getDomRef().offsetHeight - 2 * marginSize;
-
         if (this.effectiveLayout === _MediaGalleryLayout.default.Vertical) {
           availableHeight -= MediaGallery.THUMBNAIL_HEIGHT + marginSize;
         }
-
         if (width > availableHeight) {
           // set to square
           this._display.style.width = `${availableHeight}px`;
         }
       }
     }
-
     _toggleMainItem9x16size(enable) {
       if (!this._mainItem) {
         return;
       }
-
       const width = this._mainItem.offsetWidth,
-            contentHeight = enable ? `${width / 16 * 9}px` : "";
+        contentHeight = enable ? `${width / 16 * 9}px` : "";
       this._mainItem.contentHeight = contentHeight;
     }
-
     _infereffectiveLayout() {
       if (this.layout === _MediaGalleryLayout.default.Auto) {
         return this._isPhoneSize ? _MediaGalleryLayout.default.Vertical : _MediaGalleryLayout.default.Horizontal;
       }
-
       return this.layout;
     }
-
     _getMaxAllowedThumbnailsInColumn(columnHeight) {
       let maxAllowedItems = Math.floor(columnHeight / MediaGallery.THUMBNAIL_HEIGHT);
-
       if (!this.showAllThumbnails) {
         maxAllowedItems = Math.min(maxAllowedItems, 5);
       }
-
       return maxAllowedItems;
     }
-
     _getOverflowSize(columnHeight, columnsCount) {
       const maxAlowedThumbnailsInColumn = this._getMaxAllowedThumbnailsInColumn(columnHeight),
-            overflowSize = Math.max(0, this.items.length - maxAlowedThumbnailsInColumn * columnsCount);
-
+        overflowSize = Math.max(0, this.items.length - maxAlowedThumbnailsInColumn * columnsCount);
       if (overflowSize === this.items.length || overflowSize === 0) {
         return overflowSize;
       }
-
       return overflowSize + 1; // overflow 1 extra item to make room for overflow btn as well
     }
 
@@ -431,190 +380,146 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavig
       if (!this._showThumbnails) {
         return [];
       }
-
       const items = this._visibleItems.filter(item => !item.disabled);
-
       if (this._overflowBtn) {
         items.push(this._overflowBtn);
       }
-
       return items;
     }
-
     _selectItem(item, userInteraction) {
       if (item === this._selectedItem) {
         return;
       }
-
       this._selectedItem = item;
-
       this._updateSelectedFlag(item);
-
       this._itemNavigation.setCurrentItem(item);
-
       if (userInteraction) {
         this.fireEvent("selection-change", {
           item
         });
       }
-
       if ((0, _Device.isPhone)()) {
         this._selectItemOnPhone(item);
       } else {
         this._displayContent(item);
       }
     }
-
     _updateSelectedFlag(itemToSelect) {
       this.items.forEach(next => {
         next.selected = false;
       });
       itemToSelect.selected = true;
     }
-
     _selectItemOnPhone(item) {
       const selectableItemIndex = this._selectableItems.indexOf(item),
-            carousel = this._carousel;
-
+        carousel = this._carousel;
       carousel && carousel.navigateTo(selectableItemIndex);
     }
-
     _displayContent(item) {
       let clone;
       const mainItem = this._mainItem,
-            oldContent = mainItem._content,
-            newContent = item._content;
+        oldContent = mainItem._content,
+        newContent = item._content;
       mainItem._thumbnailDesign = false;
       oldContent && oldContent.remove();
-
       if (newContent) {
         clone = newContent.cloneNode(true);
         mainItem.layout = item.layout;
         mainItem.appendChild(clone);
       }
     }
-
     _onThumbnailClick(event) {
       const item = event.target.closest("[ui5-media-gallery-item]");
-
       if (item.disabled) {
         return;
       }
-
       if (item !== this._selectedItem) {
-        this._selectItem(item, true
-        /* userInteraction */
-        );
+        this._selectItem(item, true /* userInteraction */);
       }
     }
 
     _onOverflowBtnClick() {
       this.fireEvent("overflow-click");
     }
-
     _onDisplayAreaClick(event) {
       if (!this.interactiveDisplayArea) {
         return;
       }
-
       this.fireEvent("display-area-click");
     }
-
     _onCarouselNavigate(event) {
       const selectedIndex = event.detail.selectedIndex,
-            item = this._selectableItems[selectedIndex];
+        item = this._selectableItems[selectedIndex];
       this.fireEvent("selection-change", {
         item
       });
     }
-
     get _mainItemTabIndex() {
       return this.interactiveDisplayArea ? 0 : undefined;
     }
-
     get _selectableItems() {
       return this.items.filter(this._isSelectableItem);
     }
-
     get _carousel() {
       return this.shadowRoot.querySelector("[ui5-carousel]");
     }
-
     get _display() {
       return this.shadowRoot.querySelector(".ui5-media-gallery-display");
     }
-
     get _mainItem() {
       return this.shadowRoot.querySelector(".ui5-media-gallery-display [ui5-media-gallery-item]");
     }
-
     get _overflowBtn() {
       return this.shadowRoot.querySelector(".ui5-media-gallery-overflow [ui5-button]");
     }
-
     get _visibleItems() {
       const visibleItemsCount = this.items.length - this._overflowSize;
       return this.items.slice(0, visibleItemsCount);
     }
-
     get _isPhonePlatform() {
       return (0, _Device.isPhone)();
     }
-
     get _showThumbnails() {
       return !(0, _Device.isPhone)();
     }
-
     get _showOverflowBtn() {
       return this._overflowSize > 0;
     }
-
     get _isPhoneSize() {
       return this.mediaRange === "S";
     }
-
     get _mainItemHasWideLayout() {
       return this._mainItem && this._mainItem.layout === _MediaGalleryItemLayout.default.Wide;
     }
-
     get _shouldHaveWideDisplay() {
       return this._mainItemHasWideLayout && this.showAllThumbnails && this.effectiveLayout === _MediaGalleryLayout.default.Horizontal;
     }
-
     get _shouldHaveSquareDisplay() {
       // by default it should be square
       // with the only exception when a wide 9*16 item should be displayed
       return !this._shouldHaveWideDisplay;
     }
-
     static get metadata() {
       return metadata;
     }
-
     static get render() {
       return _LitRenderer.default;
     }
-
     static get template() {
       return _MediaGalleryTemplate.default;
     }
-
     static get staticAreaTemplate() {
       return _MediaGalleryTemplate.default;
     }
-
     static get styles() {
       return [_MediaGallery.default];
     }
-
     static get staticAreaStyles() {
       return null;
     }
-
     static get dependencies() {
       return [_MediaGalleryItem.default, _Button.default, _Carousel.default];
     }
-
     static get THUMBNAIL_HEIGHT() {
       return 80; // px
     }
@@ -622,7 +527,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavig
     static get THUMBNAIL_MARGIN() {
       return 16; // px
     }
-
   }
 
   MediaGallery.define();