From 633273ff46ec3187f2262da58d83d728ea998f5d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomasz=20=C5=81ukawski?= Date: Wed, 13 Oct 2021 13:43:44 +0200 Subject: [PATCH] GridView: Fit image to grid item without crop (#1692) GridView: Fit image icons to grid item size with margin - (util) Image: Check image transparency - implement icon detection - add image-icon styles for TV resolution Signed-off-by: Tomasz Lukawski --- .../thumbnail/grid-text-icons-mixed.html | 70 ++++++++++++++++++ .../components/thumbnail/index.html | 5 ++ src/css/profile/mobile/common/gridview.less | 20 ++++++ src/js/core/util/image.js | 71 +++++++++++++++++++ src/js/mobile.js | 1 + src/js/profile/mobile/widget/GridView.js | 46 +++++++++++- src/js/tv.js | 1 + 7 files changed, 213 insertions(+), 1 deletion(-) create mode 100644 examples/mobile/UIComponents/components/thumbnail/grid-text-icons-mixed.html create mode 100644 src/js/core/util/image.js diff --git a/examples/mobile/UIComponents/components/thumbnail/grid-text-icons-mixed.html b/examples/mobile/UIComponents/components/thumbnail/grid-text-icons-mixed.html new file mode 100644 index 0000000000..0edae54c61 --- /dev/null +++ b/examples/mobile/UIComponents/components/thumbnail/grid-text-icons-mixed.html @@ -0,0 +1,70 @@ + + + + + Grid + + + + + + + +
+
+
+ +
+

+ Thumbnail Icon Grid + text +

+
+
+
    +
  • + +

    Recipe title

    +
    • +
  • + +

    Recipe title

    +
    • +
  • + +

    Recipe title

    +
    • +
  • + +

    Recipe title

    +
    • +
  • + +

    Recipe title

    +
    • +
  • + +

    Recipe title

    +
    • +
  • + +

    Recipe title

    +
    • +
  • + +

    Recipe title

    +
    • +
  • + +

    Recipe title

    +
    • +
  • + +

    Recipe title

    +
    • +
+
+
+ + + \ No newline at end of file diff --git a/examples/mobile/UIComponents/components/thumbnail/index.html b/examples/mobile/UIComponents/components/thumbnail/index.html index de0a454a64..d3154426ab 100644 --- a/examples/mobile/UIComponents/components/thumbnail/index.html +++ b/examples/mobile/UIComponents/components/thumbnail/index.html @@ -50,6 +50,11 @@

Thumbnail Grid Reorder +
  • + + Thumbnail & Icon Grid + Text + +
    • diff --git a/src/css/profile/mobile/common/gridview.less b/src/css/profile/mobile/common/gridview.less index 49fd47a3da..d40e104a33 100644 --- a/src/css/profile/mobile/common/gridview.less +++ b/src/css/profile/mobile/common/gridview.less @@ -164,6 +164,18 @@ tau-gridview { } } + .ui-gridview-item.ui-gridview-image-icon img { + display: flex; + justify-self: center; + align-self: center; + margin: auto; + height: 60%; + width: 60%; + max-height: 70%; + max-width: 70%; + padding-bottom: 57 * @px_base; + transform: initial !important; + } } .ui-content:not(.ui-popup-content-gridview) { @@ -266,6 +278,10 @@ tau-gridview { margin: 0; margin-bottom: 23 * @px_base; } + &.ui-gridview-image-icon .ui-gridview-image { + padding-bottom: 40 * @px_base; + padding-top: 0; + } } } .ui-gridview:not(.ui-gridview-label-out) { @@ -285,6 +301,10 @@ tau-gridview { line-height: 30 *@px_base; padding: 0 10 * @px_base; } + &.ui-gridview-image-icon .ui-gridview-image { + padding-bottom: 40 * @px_base; + padding-top: 0; + } } } } diff --git a/src/js/core/util/image.js b/src/js/core/util/image.js new file mode 100644 index 0000000000..cc63e6f1ef --- /dev/null +++ b/src/js/core/util/image.js @@ -0,0 +1,71 @@ +/* + * Copyright (c) 2021 Samsung Electronics Co., Ltd + * + * Licensed under the Flora License, Version 1.1 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://floralicense.org/license/ + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +/*global define, ns */ +/** + * #Image Utility + * Object supports methods for images + * @author Tomasz Lukawski + * @class ns.util.image + */ +(function (ns) { + "use strict"; + //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); + define( + [ + // fetch namespace + "../util" + ], + function () { + //>>excludeEnd("tauBuildExclude"); + var image = { + /** + * @method checkTransparency + * @param {HTMLElement} image + * @param {Array} points + * @return {boolean} + * @static + * @member ns.util.image + */ + checkTransparency: function (image, points) { + var c, + cnx, + imageData; + + c = document.createElement("canvas"); + cnx = c.getContext("2d"); + c.width = image.width; + c.height = image.height; + + points = points || [ + [0, 0], [image.width - 1, 0], [image.width - 1, image.height - 1], [0, image.height - 1] + ]; + + cnx.drawImage(image, 0, 0, image.width, image.height); + + return points.some(function (point) { + imageData = cnx.getImageData(point[0], point[1], 1, 1); + return imageData && imageData.data[3] !== 255 || false; + }); + } + }; + + ns.util.image = image; + //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); + return image; + } + ); + //>>excludeEnd("tauBuildExclude"); +}(ns)); diff --git a/src/js/mobile.js b/src/js/mobile.js index f970eb5969..e5eb0bd78a 100644 --- a/src/js/mobile.js +++ b/src/js/mobile.js @@ -66,6 +66,7 @@ "./core/util/deferredWhen", "./core/util/path", "./core/util/bezierCurve", + "./core/util/image", "./core/util/zoom", "./core/util/anim/Keyframes", "./core/util/anim/Animation", diff --git a/src/js/profile/mobile/widget/GridView.js b/src/js/profile/mobile/widget/GridView.js index 3c0fedda9f..7c76664968 100644 --- a/src/js/profile/mobile/widget/GridView.js +++ b/src/js/profile/mobile/widget/GridView.js @@ -68,6 +68,7 @@ "../../../core/event/gesture/Instance", "../../../core/util/DOM", "../../../core/util/selectors", + "../../../core/util/image", "../../../core/widget/BaseKeyboardSupport", "../widget" ], @@ -78,6 +79,7 @@ engine = ns.engine, utilsEvents = ns.event, utilsSelectors = ns.util.selectors, + checkTransparency = ns.util.image.checkTransparency, utilsDom = ns.util.DOM, pageEvents = ns.widget.core.Page.events, Popup = ns.widget.mobile.Popup, @@ -170,7 +172,8 @@ * @style ui-gridview-item-has-label * @member ns.widget.mobile.GridView */ - ITEM_HAS_LABEL: "ui-gridview-item-has-label" + ITEM_HAS_LABEL: "ui-gridview-item-has-label", + ITEM_HAS_ICON: "ui-gridview-image-icon" }, selectors = { ANY_NOT_IMAGE: "*:not(." + classes.IMAGE + ")" @@ -341,6 +344,7 @@ self.on("animationend webkitAnimationEnd", animationEndCallback); self.on("change", self); + self.on("load", self, true); utilsEvents.on(window, "resize", self, true); utilsEvents.on(page, pageEvents.SHOW, self._onSetGridStyle); @@ -367,6 +371,7 @@ } self.off("animationend webkitAnimationEnd", animationEndCallback); self.off("change", self); + self.off("load", self, true); utilsEvents.off(page, pageEvents.SHOW, self._onSetGridStyle); }; @@ -388,6 +393,7 @@ self._setLabel(element); self._checkItemLabel(); self._setReorder(element, self.options.reorder); + self._detectIcons(); self._calculateListHeight(); self._ui.content = utilsSelectors.getClosestByClass(element, "ui-content") || window; self._ui.scrollableParent = getScrollableParent(element) || self._ui.content; @@ -419,6 +425,9 @@ case "change": self._shadeCheckbox(event.target); break; + case "load": + self._detectIcon(event.target); + break; case "dragprepare": if (event.detail.srcEvent.srcElement.classList.contains(classes.HANDLER)) { break; @@ -705,6 +714,22 @@ target.parentElement.classList.toggle(classes.CHECKED, target.checked); } + /** + * Set icon class on transparent image + * @method _detectIcon + * @protected + * @param {HTMLElement} target + * @member ns.widget.mobile.GridView + */ + prototype._detectIcon = function (target) { + if (target.complete) { + target.parentElement.classList.toggle( + classes.ITEM_HAS_ICON, + checkTransparency(target) + ); + } + } + /** * Update information of each list item * @method _refreshItemsInfo @@ -798,6 +823,25 @@ } }; + /** + * Method detects icons and add specific css class for icon + * @method _detectIcons + * @protected + * @member ns.widget.mobile.GridView + */ + prototype._detectIcons = function () { + var self = this, + listElements = self._ui.listElements || []; + + listElements.forEach(function (liItem) { + var image = liItem.querySelector("img"); + + if (image) { + self._detectIcon(image); + } + }); + } + /** * Set the width of each item * @method _setItemSize diff --git a/src/js/tv.js b/src/js/tv.js index 50d9960d65..ee0f957621 100644 --- a/src/js/tv.js +++ b/src/js/tv.js @@ -66,6 +66,7 @@ "./core/util/deferredWhen", "./core/util/path", "./core/util/bezierCurve", + "./core/util/image", "./core/util/zoom", "./core/util/anim/Keyframes", "./core/util/anim/Animation",