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 <[email protected]>
Samsung · Oct 13, 2021 · 633273f · 633273f
1 parent 4488799
commit 633273f
Show file tree

Hide file tree

Showing 7 changed files with 213 additions and 1 deletion.
diff --git a/examples/mobile/UIComponents/components/thumbnail/grid-text-icons-mixed.html b/examples/mobile/UIComponents/components/thumbnail/grid-text-icons-mixed.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<title>Grid</title>
+	<meta content="width=device-width, user-scalable=no" name="viewport" />
+	<link href="../../lib/tau/mobile/theme/changeable/tau.css" rel="stylesheet" />
+	<link href="../../css/style.css" rel="stylesheet" />
+	<script data-build-remove="false" src="../../lib/tau/mobile/js/tau.js">
+	</script>
+</head>
+
+<body>
+	<div class="ui-page" id="page-thumbnail-grid">
+		<div class="ui-header" data-position="fixed">
+			<div class="ui-appbar-left-icons-container">
+				<a href="#" class="ui-btn ui-btn-icon ui-btn-icon-back" data-style="flat" data-rel="back"></a>
+			</div>
+			<h1>
+				Thumbnail Icon Grid + text
+			</h1>
+		</div>
+		<div class="ui-content">
+			<ul class="ui-gridview ui-gridview-cols">
+				<li class="ui-gridview-item">
+					<img class="ui-gridview-image" src="./../../icon.png" />
+					<p class="ui-gridview-label">Recipe title</p>
+				</li>
+				<li class="ui-gridview-item">
+					<img class="ui-gridview-image" src="../../images/Thumbnail/thumbnail_002.jpg" />
+					<p class="ui-gridview-label">Recipe title</p>
+				</li>
+				<li class="ui-gridview-item">
+					<img class="ui-gridview-image" src="./../../icon-tizen.png" />
+					<p class="ui-gridview-label">Recipe title</p>
+				</li>
+				<li class="ui-gridview-item">
+					<img class="ui-gridview-image" src="../../images/Thumbnail/thumbnail_004.jpg" />
+					<p class="ui-gridview-label">Recipe title</p>
+				</li>
+				<li class="ui-gridview-item">
+					<img class="ui-gridview-image" src="./../../icon.png" />
+					<p class="ui-gridview-label">Recipe title</p>
+				</li>
+				<li class="ui-gridview-item">
+					<img class="ui-gridview-image" src="../../images/Thumbnail/thumbnail_006.jpg" />
+					<p class="ui-gridview-label">Recipe title</p>
+				</li>
+				<li class="ui-gridview-item">
+					<img class="ui-gridview-image" src="./../../icon.png" />
+					<p class="ui-gridview-label">Recipe title</p>
+				</li>
+				<li class="ui-gridview-item">
+					<img class="ui-gridview-image" src="./../../icon.png" />
+					<p class="ui-gridview-label">Recipe title</p>
+				</li>
+				<li class="ui-gridview-item">
+					<img class="ui-gridview-image" src="../../images/Thumbnail/thumbnail_009.jpg" />
+					<p class="ui-gridview-label">Recipe title</p>
+				</li>
+				<li class="ui-gridview-item">
+					<img class="ui-gridview-image" src="./../../icon.png" />
+					<p class="ui-gridview-label">Recipe title</p>
+				</li>
+			</ul>
+		</div>
+	</div>
+</body>
+
+</html>
diff --git a/examples/mobile/UIComponents/components/thumbnail/index.html b/examples/mobile/UIComponents/components/thumbnail/index.html
@@ -50,6 +50,11 @@ <h1>
 						Thumbnail Grid Reorder
 					</a>
 				</li>
+				<li class="ui-li-anchor">
+					<a href="grid-text-icons-mixed.html">
+						Thumbnail & Icon Grid + Text
+					</a>
+				</li>
 			</ul>
 		</div>
 	</div>

diff --git 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
@@ -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 <[email protected]>
+ * @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
@@ -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
@@ -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
@@ -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",