From 386e8e70a03f9995e4673868aec5b6471b5c44da Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Mon, 19 Oct 2015 09:18:16 +0200
Subject: [PATCH] media grid: set select and click callbacks instead of having
 logic in directive

---
 .../components/umbmediagrid.directive.js      | 27 +++++++++++--------
 .../src/views/components/umb-media-grid.html  |  6 ++---
 .../listview/layouts/grid/grid.html           |  4 ++-
 .../grid/grid.listviewlayout.controller.js    | 18 ++++++++++---
 4 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js
index c02ed4d839..e2df254a48 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js
@@ -143,19 +143,22 @@
 
          }
 
-         scope.toggleSelectItem = function(item) {
-            item.selected = !item.selected;
-         };
-
-         scope.onDetailsOver = function(item, event) {
-            if(scope.detailsHover) {
-               scope.detailsHover(item, event, true);
+         scope.selectItem = function(item, $event) {
+            if(scope.onSelect) {
+               scope.onSelect(item);
+               $event.stopPropagation();
             }
          };
 
-         scope.onDetailsOut = function(item, event) {
-            if(scope.detailsHover) {
-               scope.detailsHover(item, event, false);
+         scope.clickItem = function(item) {
+            if(scope.onClick) {
+               scope.onClick(item);
+            }
+         };
+
+         scope.hoverItemDetails = function(item, $event, hover) {
+            if(scope.onDetailsHover) {
+               scope.onDetailsHover(item, $event, hover);
             }
          };
 
@@ -175,7 +178,9 @@
          templateUrl: 'views/components/umb-media-grid.html',
          scope: {
             items: '=',
-            detailsHover: "="
+            onDetailsHover: "=",
+            onSelect: '=',
+            onClick: '='
          },
          link: link
       };
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html
index b624d7d38d..7671178663 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html
@@ -1,10 +1,10 @@
 <div class="umb-media-grid" ui-sortable="mediaItemsSortingOptions" ng-model="mediaItems">
 
-   <a href="#{{item.editPath}}" ng-repeat="item in mediaItems" ng-style="item.flexStyle" class="umb-media-grid__item">
+   <a href="" ng-click="clickItem(item)" ng-repeat="item in mediaItems" ng-style="item.flexStyle" class="umb-media-grid__item">
 
       <div class="umb-media-grid__actions">
-         <i class="icon-info umb-media-grid__action -not-clickable" ng-if="detailsHover" ng-mouseover="onDetailsOver(item, $event)" ng-mouseleave="onDetailsOut(item, $event)"></i>
-         <i class="icon-check umb-media-grid__action" ng-click="toggleSelectItem(item)" ng-class="{'-selected': item.selected}" prevent-default></i>
+         <i ng-if="onDetailsHover" class="icon-info umb-media-grid__action -not-clickable" ng-mouseover="hoverItemDetails(item, $event, true)" ng-mouseleave="hoverItemDetails(item, $event, false)"></i>
+         <i ng-if="onSelect" class="icon-check umb-media-grid__action" ng-click="selectItem(item, $event)" ng-class="{'-selected': item.selected}" prevent-default></i>
       </div>
 
       <div class="umb-media-grid__item-overlay">
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.html
index cef8b5ef63..00b399f5db 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.html
@@ -24,7 +24,9 @@
 
       <umb-media-grid
          items="listViewResultSet.items"
-         details-hover="vm.showMediaDetailsTooltip">
+         on-details-hover="vm.hoverMediaItemDetails"
+         on-select="vm.selectMediaItem"
+         on-click="vm.clickMediaItem">
       </umb-media-grid>
 
       <umb-tooltip
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js
index 216e9fa769..64d590f91b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js
@@ -22,9 +22,11 @@
       vm.dragLeave = dragLeave;
 		vm.onFilesQueue = onFilesQueue;
       vm.onUploadComplete = onUploadComplete;
-      vm.showMediaDetailsTooltip = showMediaDetailsTooltip;
+      vm.hoverMediaItemDetails = hoverMediaItemDetails;
       vm.selectFolder = selectFolder;
       vm.clickFolder = clickFolder;
+      vm.selectMediaItem = selectMediaItem;
+      vm.clickMediaItem = clickMediaItem;
 
       function activate() {
 
@@ -56,15 +58,15 @@
       vm.mediaDetailsTooltip = {};
 
 
-      function showMediaDetailsTooltip(item, event, isHovering) {
+      function hoverMediaItemDetails(item, event, hover) {
 
-         if (isHovering && !vm.mediaDetailsTooltip.show) {
+         if (hover && !vm.mediaDetailsTooltip.show) {
 
             vm.mediaDetailsTooltip.event = event;
             vm.mediaDetailsTooltip.item = item;
             vm.mediaDetailsTooltip.show = true;
 
-         } else if (!isHovering && vm.mediaDetailsTooltip.show) {
+         } else if (!hover && vm.mediaDetailsTooltip.show) {
 
             vm.mediaDetailsTooltip.show = false;
 
@@ -80,6 +82,14 @@
          $location.path($scope.entityType + '/' + $scope.entityType + '/edit/' + folder.id);
       }
 
+      function selectMediaItem(mediaItem) {
+         mediaItem.selected = !mediaItem.selected;
+      }
+
+      function clickMediaItem(mediaItem) {
+         $location.path($scope.entityType + '/' + $scope.entityType + '/edit/' + mediaItem.id);
+      }
+
       activate();
 
    }