From 3033b0a705a5ef0c65227e7d2ce00a504e5f0307 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 27 Oct 2015 08:53:53 +0100 Subject: [PATCH] Fixes: U4-7303 Shift + select to select a range of items --- .../components/umbcontentgrid.directive.js | 4 +- .../components/umbfoldergrid.directive.js | 4 +- .../components/umbmediagrid.directive.js | 27 +---- .../common/services/listviewhelper.service.js | 112 ++++++++++++++++++ .../src/less/components/umb-content-grid.less | 1 + .../src/less/components/umb-folder-grid.less | 3 +- .../views/components/umb-content-grid.html | 2 +- .../src/views/components/umb-folder-grid.html | 2 +- .../src/views/components/umb-media-grid.html | 4 +- .../listview/layouts/grid/grid.html | 2 +- .../grid/grid.listviewlayout.controller.js | 26 ++-- .../listview/listview.controller.js | 23 +--- 12 files changed, 140 insertions(+), 70 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/common/services/listviewhelper.service.js diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcontentgrid.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcontentgrid.directive.js index 4ab935276b..0d8ddc2170 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcontentgrid.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcontentgrid.directive.js @@ -11,9 +11,9 @@ } }; - scope.selectItem = function(item, $event) { + scope.selectItem = function(item, $event, $index) { if(scope.onSelect) { - scope.onSelect(item); + scope.onSelect(item, $event, $index); $event.stopPropagation(); } }; diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbfoldergrid.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbfoldergrid.directive.js index ff46ed7f81..06475e9c45 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbfoldergrid.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbfoldergrid.directive.js @@ -11,9 +11,9 @@ } }; - scope.selectFolder = function(folder, $event) { + scope.selectFolder = function(folder, $event, $index) { if(scope.onSelect) { - scope.onSelect(folder); + scope.onSelect(folder, $event, $index); } $event.stopPropagation(); }; 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 cbd45b098e..fa639b6225 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 @@ -5,8 +5,6 @@ function link(scope, el, attr, ctrl) { - scope.mediaItems = []; - var itemDefaultHeight = 200; var itemDefaultWidth = 200; var itemMaxWidth = 300; @@ -14,22 +12,14 @@ function activate() { - scope.mediaItems = []; - for (var i = 0; scope.items.length > i; i++) { - var item = scope.items[i]; - setItemData(item); - setOriginalSize(item, itemMaxHeight); - - seperateFolderAndMediaItems(item); - } - if(scope.mediaItems.length > 0) { - setFlexValues(scope.mediaItems); + if(scope.items.length > 0) { + setFlexValues(scope.items); } } @@ -37,6 +27,7 @@ function setItemData(item) { item.isFolder = !mediaHelper.hasFilePropertyType(item); + item.hidden = item.isFolder; if(!item.isFolder){ item.thumbnail = mediaHelper.resolveFile(item, true); @@ -84,14 +75,6 @@ } - function seperateFolderAndMediaItems(item) { - - if(!item.isFolder){ - scope.mediaItems.push(item); - } - - } - function setFlexValues(mediaItems) { var flexSortArray = mediaItems; @@ -129,9 +112,9 @@ } - scope.selectItem = function(item, $event) { + scope.selectItem = function(item, $event, $index) { if(scope.onSelect) { - scope.onSelect(item); + scope.onSelect(item, $event, $index); $event.stopPropagation(); } }; diff --git a/src/Umbraco.Web.UI.Client/src/common/services/listviewhelper.service.js b/src/Umbraco.Web.UI.Client/src/common/services/listviewhelper.service.js new file mode 100644 index 0000000000..41d1d62b69 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/services/listviewhelper.service.js @@ -0,0 +1,112 @@ +(function() { + 'use strict'; + + function listViewHelper() { + + var firstSelectedIndex = 0; + + function selectHandler(selectedItem, selectedIndex, items, selection, $event) { + + var start = 0; + var end = 0; + var item = null; + + if ($event.shiftKey === true) { + + if(selectedIndex > firstSelectedIndex) { + + start = firstSelectedIndex; + end = selectedIndex; + + for (; end >= start; start++) { + item = items[start]; + selectItem(item, selection); + } + + } else { + + start = firstSelectedIndex; + end = selectedIndex; + + for (; end <= start; start--) { + item = items[start]; + selectItem(item, selection); + } + + } + + } else { + + if(selectedItem.selected) { + deselectItem(selectedItem, selection); + } else { + selectItem(selectedItem, selection); + } + + firstSelectedIndex = selectedIndex; + + } + + } + + function selectItem(item, selection) { + var isSelected = false; + for (var i = 0; selection.length > i; i++) { + var selectedItem = selection[i]; + if (item.id === selectedItem.id) { + isSelected = true; + } + } + if(!isSelected && !item.hidden) { + selection.push({id: item.id}); + item.selected = true; + } + } + + function deselectItem(item, selection) { + for (var i = 0; selection.length > i; i++) { + var selectedItem = selection[i]; + if (item.id === selectedItem.id) { + selection.splice(i, 1); + item.selected = false; + } + } + } + + function clearSelection(items, folders, selection) { + + var i = 0; + + selection.length = 0; + + if(angular.isArray(items)) { + for(i = 0; items.length > i; i++) { + var item = items[i]; + item.selected = false; + } + } + + if(angular.isArray(items)) { + for(i = 0; folders.length > i; i++) { + var folder = folders[i]; + folder.selected = false; + } + } + } + + var service = { + selectHandler: selectHandler, + selectItem: selectItem, + deselectItem: deselectItem, + clearSelection: clearSelection + }; + + return service; + + } + + + angular.module('umbraco.services').factory('listViewHelper', listViewHelper); + + +})(); diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less index 593c4a6c7a..a4e18abb20 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less @@ -12,6 +12,7 @@ position: relative; margin: 10px; border: 1px solid #ffffff; + user-select: none; } .umb-content-grid__item:hover { diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-folder-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-folder-grid.less index 6b51cab35d..b82a18e3bb 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-folder-grid.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-folder-grid.less @@ -3,7 +3,7 @@ flex-direction: row; flex-wrap: wrap; width: 100%; - margin-bottom: 20px; + margin-bottom: 30px; } .umb-folder-grid__folder { @@ -19,6 +19,7 @@ position: relative; justify-content: space-between; cursor: pointer; + user-select: none; } .umb-folder-grid__folder:focus, diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html index 200bfbee29..fc22a2926c 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html @@ -6,7 +6,7 @@ ng-class="{'-selected': item.selected}" ng-click="clickItem(item)"> - +
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-folder-grid.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-folder-grid.html index 1e8174bc3c..9d658a31a8 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/umb-folder-grid.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-folder-grid.html @@ -11,7 +11,7 @@
{{ folder.name }}
- + 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 b36d7c1946..d6f5f432ea 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 @@
- +
- +
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 83ca164244..ac5d9a6ea3 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 @@ -30,7 +30,7 @@ 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 c63f1011e4..b60caa514e 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 @@ -9,7 +9,7 @@ (function() { "use strict"; - function ListViewGridLayoutController($scope, $routeParams, mediaHelper, mediaResource, $location) { + function ListViewGridLayoutController($scope, $routeParams, mediaHelper, mediaResource, $location, listViewHelper) { var vm = this; @@ -24,9 +24,9 @@ vm.onUploadComplete = onUploadComplete; vm.hoverMediaItemDetails = hoverMediaItemDetails; vm.selectItem = selectItem; + vm.selectFolder = selectFolder; vm.clickItem = clickItem; - function dragEnter(el, event) { vm.activeDrag = true; } @@ -59,24 +59,12 @@ } - function selectItem(item) { - var selection = $scope.selection; - var isSelected = false; + function selectItem(selectedItem, $event, index) { + listViewHelper.selectHandler(selectedItem, index, $scope.items, $scope.selection, $event); + } - for (var i = 0; selection.length > i; i++) { - var selectedItem = selection[i]; - - if (item.id === selectedItem.id) { - isSelected = true; - selection.splice(i, 1); - item.selected = false; - } - } - - if (!isSelected) { - selection.push({id: item.id}); - item.selected = true; - } + function selectFolder(selectedItem, $event, index) { + listViewHelper.selectHandler(selectedItem, index, $scope.folders, $scope.selection, $event); } function clickItem(item) { diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js index 2cf6e8a89d..fbbf6b7bdd 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js @@ -1,4 +1,4 @@ -function listViewController($rootScope, $scope, $routeParams, $injector, notificationsService, iconHelper, dialogService, editorState, localizationService, $location, appState, $timeout, $q, mediaResource) { +function listViewController($rootScope, $scope, $routeParams, $injector, notificationsService, iconHelper, dialogService, editorState, localizationService, $location, appState, $timeout, $q, mediaResource, listViewHelper) { //this is a quick check to see if we're in create mode, if so just exit - we cannot show children for content // that isn't created yet, if we continue this will use the parent id in the route params which isn't what @@ -165,6 +165,8 @@ function listViewController($rootScope, $scope, $routeParams, $injector, notific $scope.reloadView = function (id) { + listViewHelper.clearSelection($scope.listViewResultSet.items, $scope.folders, $scope.selection); + if($scope.entityType === 'media') { mediaResource.getChildFolders($scope.contentId) @@ -176,8 +178,6 @@ function listViewController($rootScope, $scope, $routeParams, $injector, notific getListResultsCallback(id, $scope.options).then(function (data) { - $scope.selection.length = 0; - $scope.actionInProgress = false; $scope.listViewResultSet = data; @@ -231,22 +231,7 @@ function listViewController($rootScope, $scope, $routeParams, $injector, notific }; $scope.clearSelection = function() { - var items = $scope.listViewResultSet.items; - var folders = $scope.folders; - var i = 0; - - for (i = 0; items.length > i; i++) { - var item = items[i]; - item.selected = false; - } - - for (i = 0; folders.length > i; i++) { - var folder = folders[i]; - folder.selected = false; - } - - $scope.selection.length = 0; - + listViewHelper.clearSelection($scope.listViewResultSet.items, $scope.folders, $scope.selection); }; $scope.getIcon = function(entry) {