yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixes: U4-7303 Shift + select to select a range of items

Browse Source
This commit is contained in:
Mads Rasmussen
2015-10-27 08:53:53 +01:00
parent 8d81d9922c
commit 3033b0a705
12 changed files with 140 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/Umbraco.Web.UI.Client/src/common/directives/components/umbcontentgrid.directive.js
View File

@@ -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();
}
};

4
src/Umbraco.Web.UI.Client/src/common/directives/components/umbfoldergrid.directive.js
View File

@@ -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();
};

27
src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js
View File

@@ -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();
}
};

112
src/Umbraco.Web.UI.Client/src/common/services/listviewhelper.service.js Normal file
View File

@@ -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);
})();

1
src/Umbraco.Web.UI.Client/src/less/components/umb-content-grid.less
View File

@@ -12,6 +12,7 @@
position: relative;
margin: 10px;
border: 1px solid #ffffff;
user-select: none;
}
.umb-content-grid__item:hover {

3
src/Umbraco.Web.UI.Client/src/less/components/umb-folder-grid.less
View File

@@ -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,

2
src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html
View File

@@ -6,7 +6,7 @@
ng-class="{'-selected': item.selected}"
ng-click="clickItem(item)">
<i ng-if="onSelect" class="icon-check umb-content-grid__action" ng-click="selectItem(item, $event)" ng-class="{'-selected': item.selected}"></i>
<i ng-if="onSelect" class="icon-check umb-content-grid__action" ng-click="selectItem(item, $event, $index)" ng-class="{'-selected': item.selected}"></i>
<div class="umb-content-grid__icon-container">
<i class="{{ item.icon }} umb-content-grid__icon" ng-class="{'-light': !item.published}"></i>

2
src/Umbraco.Web.UI.Client/src/views/components/umb-folder-grid.html
View File

@@ -11,7 +11,7 @@
<div class="umb-folder-grid__folder-name">{{ folder.name }}</div>
</div>
<i class="icon-check umb-folder-grid__action" ng-click="selectFolder(folder, $event)" ng-class="{'-selected': folder.selected}"></i>
<i class="icon-check umb-folder-grid__action" ng-click="selectFolder(folder, $event, $index)" ng-class="{'-selected': folder.selected}"></i>
</div>

4
src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html
View File

@@ -1,10 +1,10 @@
<div class="umb-media-grid">
<a href="" ng-click="clickItem(item)" ng-repeat="item in mediaItems" ng-style="item.flexStyle" class="umb-media-grid__item">
<a href="" ng-click="clickItem(item)" ng-repeat="item in items" ng-style="item.flexStyle" class="umb-media-grid__item" ng-hide="item.hidden">
<div class="umb-media-grid__actions">
<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>
<i ng-if="onSelect" class="icon-check umb-media-grid__action" ng-click="selectItem(item, $event, $index)" ng-class="{'-selected': item.selected}" prevent-default></i>
</div>
<div class="umb-media-grid__item-overlay">

2
src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.html
View File

@@ -30,7 +30,7 @@
<umb-folder-grid
ng-if="folders.length > 0"
folders="folders"
on-select="vm.selectItem"
on-select="vm.selectFolder"
on-click="vm.clickItem">
</umb-folder-grid>

26
src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js
View File

@@ -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) {

23
src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js
View File

@@ -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) {