GridView: fix for icon detect

Signed-off-by: Tomasz Lukawski <[email protected]>

examples/mobile/UIComponents/components/thumbnail/grid-text-icons-mixed.html

@@ -31,7 +31,7 @@ <h1>
 					<p class="ui-gridview-label">Recipe title</p>
 				</li>
 				<li class="ui-gridview-item">
-					<img class="ui-gridview-image" src="./../../icon.png" />
+					<img class="ui-gridview-image" src="./../../icon-tizen.png" />
 					<p class="ui-gridview-label">Recipe title</p>
 				</li>
 				<li class="ui-gridview-item">

src/css/profile/mobile/common/gridview.less

@@ -165,15 +165,16 @@ tau-gridview {
 	}
 
 	.ui-gridview-item.ui-gridview-image-icon img {
+		display: flex;
 		justify-self: center;
 		align-self: center;
 		margin: auto;
-		max-height: calc(~"100% - "80 * @px_base);
+		height: 60%;
+		width: 60%;
+		max-height: 70%;
+		max-width: 70%;
 		padding-bottom: 57 * @px_base;
 		transform: initial !important;
-		height: initial !important;
-		max-width: calc(~"100% - "80 * @px_base);
-		width: initial;
 	}
 }
 

src/js/core/util/image.js

@@ -40,24 +40,25 @@
 				 * @member ns.util.image
 				 */
 				checkTransparency: function (image, points) {
-					var c = document.createElement("canvas"),
-						cnx = c.getContext("2d"),
-						rect = image.getBoundingClientRect(),
+					var c,
+						cnx,
 						imageData;
 
-					c.width = rect.width;
-					c.height = rect.height;
+					c = document.createElement("canvas");
+					cnx = c.getContext("2d");
+					c.width = image.width;
+					c.height = image.height;
 
 					points = points || [
-						[0, 0], [rect.width - 1, 0], [rect.width - 1, rect.height - 1], [0, rect.height - 1]
+						[0, 0], [image.width - 1, 0], [image.width - 1, image.height - 1], [0, image.height - 1]
 					];
 
-					cnx.drawImage(image, 0, 0, rect.width, rect.height);
+					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.data.at(3) !== 255;
-					})
+						return imageData && imageData.data.at(3) !== 255 || false;
+					});
 				}
 			};
 

src/js/profile/mobile/widget/GridView.js

@@ -393,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;
@@ -714,17 +715,19 @@
 			}
 
 			/**
-			 * Set icon class on transparent images
-			 * @method _checkImage
+			 * Set icon class on transparent image
+			 * @method _detectIcon
 			 * @protected
 			 * @param {HTMLElement} target
 			 * @member ns.widget.mobile.GridView
 			 */
 			prototype._detectIcon = function (target) {
-				target.parentElement.classList.toggle(
-					classes.ITEM_HAS_ICON,
-					checkTransparency(target)
-				);
+				if (target.complete) {
+					target.parentElement.classList.toggle(
+						classes.ITEM_HAS_ICON,
+						checkTransparency(target)
+					);
+				}
 			}
 
 			/**
@@ -820,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