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

Merge branch 'temp-U4-7178-media-library' of https://github.com/umbraco/Umbraco-CMS into temp-U4-7178-media-library

Browse Source
This commit is contained in:
Per Ploug
2015-10-19 15:22:38 +02:00
parent 55b98cc446 386e8e70a0
commit 51c9d64dad
5 changed files with 65 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,7 +6,11 @@
function link(scope, el, attr, ctrl) {
scope.mediaItems = [];
var itemMaxHeight = 200;
var itemDefaultHeight = 200;
var itemDefaultWidth = 200;
var itemMaxWidth = 300;
var itemMaxHeight = 300;
scope.mediaItemsSortingOptions = {
distance: 10,
@@ -57,29 +61,40 @@
function setOriginalSize(item, maxHeight) {
//set to a square by default
item.originalWidth = maxHeight;
item.originalHeight = maxHeight;
item.width = itemDefaultWidth;
item.height = itemDefaultHeight;
item.aspectRatio = 1;
var widthProp = _.find(item.properties, function(v) { return (v.alias === "umbracoWidth"); });
if (widthProp && widthProp.value) {
item.originalWidth = parseInt(widthProp.value, 10);
if (isNaN(item.originalWidth)) {
item.originalWidth = maxHeight;
item.width = parseInt(widthProp.value, 10);
if (isNaN(item.width)) {
item.width = itemDefaultWidth;
}
}
var heightProp = _.find(item.properties, function(v) { return (v.alias === "umbracoHeight"); });
if (heightProp && heightProp.value) {
item.originalHeight = parseInt(heightProp.value, 10);
if (isNaN(item.originalHeight)) {
item.originalHeight = maxHeight;
item.height = parseInt(heightProp.value, 10);
if (isNaN(item.height)) {
item.height = itemDefaultWidth;
}
}
item.aspectRatio = item.originalWidth / item.originalHeight;
item.aspectRatio = item.width / item.height;
// set max width and height
if(item.width > itemMaxWidth) {
item.width = itemMaxWidth;
item.height = itemMaxWidth / item.aspectRatio;
}
if(item.height > itemMaxHeight) {
item.height = itemMaxHeight;
item.width = itemMaxHeight * item.aspectRatio;
}
}
@@ -98,13 +113,13 @@
var widestImageAspectRatio = null;
// sort array after image width with the widest image first
flexSortArray = $filter('orderBy')(flexSortArray, 'originalWidth', true);
flexSortArray = $filter('orderBy')(flexSortArray, 'width', true);
// find widest image aspect ratio
widestImageAspectRatio = flexSortArray[0].aspectRatio;
// find smallest image width
smallestImageWidth = flexSortArray[flexSortArray.length - 1].originalWidth;
smallestImageWidth = flexSortArray[flexSortArray.length - 1].width;
for (var i = 0; flexSortArray.length > i; i++) {
@@ -119,7 +134,7 @@
var flexStyle = {
"flex": flex + " 1 " + imageMinWidth + "px",
"max-width": mediaItem.originalWidth + "px"
"max-width": mediaItem.width + "px"
};
mediaItem.flexStyle = flexStyle;
@@ -128,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);
}
};
@@ -160,7 +178,9 @@
templateUrl: 'views/components/umb-media-grid.html',
scope: {
items: '=',
detailsHover: "="
onDetailsHover: "=",
onSelect: '=',
onClick: '='
},
link: link
};

2
src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less
View File

@@ -9,7 +9,7 @@
}
.umb-media-grid__item {
margin: 7px;
margin: 2px;
position: relative;
background: @grayLighter;
overflow: hidden;

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

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

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

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

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

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