Adds folder icons to the photo folder directive
This commit is contained in:
perploug
@@ -28,11 +28,11 @@ angular.module("umbraco.directives.html")
|
||||
var photos = ngModel.$modelValue;
|
||||
var rows = [];
|
||||
|
||||
scope.baseline = element.attr('baseline') | 0;
|
||||
scope.minWidth = element.attr('minwidth') | 420;
|
||||
scope.minHeight = element.attr('minheight') | 200;
|
||||
scope.border = element.attr('border') | 5;
|
||||
|
||||
scope.baseline = element.attr('baseline') ? parseInt(element.attr('baseline'),10) : 0;
|
||||
scope.minWidth = element.attr('min-width') ? parseInt(element.attr('min-width'),10) : 420;
|
||||
scope.minHeight = element.attr('min-height') ? parseInt(element.attr('min-height'),10) : 200;
|
||||
scope.border = element.attr('border') ? parseInt(element.attr('border'),10) : 5;
|
||||
scope.clickHandler = scope.$eval(element.attr('on-click'));
|
||||
scope.lastWidth = Math.max(element.width(), scope.minWidth);
|
||||
|
||||
// get row width - this is fixed.
|
||||
@@ -46,24 +46,30 @@ angular.module("umbraco.directives.html")
|
||||
// store relative widths of all images (scaled to match estimate height above)
|
||||
var ws = [];
|
||||
$.each(photos, function(key, val) {
|
||||
val.width_n = $.grep(val.properties, function(val, index) {return (val.alias === "umbracoWidth");})[0].value;
|
||||
val.height_n = $.grep(val.properties, function(val, index) {return (val.alias === "umbracoHeight");})[0].value;
|
||||
val.url_n = imageHelper.getThumbnail({ imageModel: val, scope: scope });
|
||||
|
||||
var wt = parseInt(val.width_n, 10);
|
||||
var ht = parseInt(val.height_n, 10);
|
||||
|
||||
if( ht !== h ) {
|
||||
wt = Math.floor(wt * (h / ht));
|
||||
}
|
||||
|
||||
ws.push(wt);
|
||||
|
||||
val.width_n = $.grep(val.properties, function(val, index) {return (val.alias === "umbracoWidth");})[0];
|
||||
val.height_n = $.grep(val.properties, function(val, index) {return (val.alias === "umbracoHeight");})[0];
|
||||
|
||||
//val.url_n = imageHelper.getThumbnail({ imageModel: val, scope: scope });
|
||||
|
||||
if(val.width_n && val.height_n){
|
||||
var wt = parseInt(val.width_n.value, 10);
|
||||
var ht = parseInt(val.height_n.value, 10);
|
||||
|
||||
if( ht !== h ) {
|
||||
wt = Math.floor(wt * (h / ht));
|
||||
}
|
||||
|
||||
ws.push(wt);
|
||||
}else{
|
||||
//if its files or folders, we make them square
|
||||
ws.push(scope.minHeight);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var rowNum = 0;
|
||||
var limit = photos.length;
|
||||
|
||||
while(scope.baseline < limit)
|
||||
{
|
||||
rowNum++;
|
||||
@@ -103,7 +109,12 @@ angular.module("umbraco.directives.html")
|
||||
tw += wt + scope.border * 2;
|
||||
|
||||
// Create image, set src, width, height and margin
|
||||
var purl = photo.url_n;
|
||||
//var purl = photo.url_n;
|
||||
photo.thumbnail = imageHelper.getThumbnail({ imageModel: photo, scope: scope });
|
||||
if(!photo.thumbnail){
|
||||
photo.thumbnail = "none";
|
||||
}
|
||||
|
||||
photo.style = {"width": wt, "height": ht, "margin": scope.border+"px", "cursor": "pointer"};
|
||||
row.photos.push(photo);
|
||||
i++;
|
||||
|
||||
@@ -32,14 +32,52 @@ ul.color-picker li a {
|
||||
border:none;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Media picker
|
||||
// --------------------------------------------------
|
||||
.umb-mediapicker .add-link{
|
||||
display: inline-block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
text-align: center;
|
||||
color: @grayLight;
|
||||
border: 2px @grayLight dashed !important;
|
||||
line-height: 120px;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// folder-browser
|
||||
// --------------------------------------------------
|
||||
.umb-folderbrowser .add-link{
|
||||
display: inline-block;
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
text-align: center;
|
||||
border: 1px @grayLight dashed;
|
||||
line-height: 100px
|
||||
line-height: 120px
|
||||
}
|
||||
|
||||
//
|
||||
// Photo folder styling
|
||||
// --------------------------------------------------
|
||||
|
||||
.umb-photo-folder .umb-non-thumbnail{
|
||||
text-align: center;
|
||||
color: @gray;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.umb-photo-folder .umb-non-thumbnail i{
|
||||
color: @grayLight;
|
||||
font-size: 60px;
|
||||
line-height: 80px;
|
||||
display: block
|
||||
}
|
||||
|
||||
|
||||
.umb-photo-folder .selected img{
|
||||
opacity:0.5;
|
||||
}
|
||||
|
||||
|
||||
@@ -55,6 +55,22 @@ angular.module("umbraco")
|
||||
$scope.gotoFolder($scope.options.formData.currentFolder);
|
||||
});
|
||||
|
||||
$scope.clickHandler = function(image, ev){
|
||||
if (image.contentTypeAlias.toLowerCase() == 'folder') {
|
||||
$scope.options.formData.currentFolder = image.id;
|
||||
$scope.gotoFolder(image.id);
|
||||
}else if (image.contentTypeAlias.toLowerCase() == 'image') {
|
||||
eventsService.publish("Umbraco.Dialogs.MediaPickerController.Select", image).then(function(image){
|
||||
if(dialogOptions && dialogOptions.multipicker){
|
||||
$scope.select(image);
|
||||
image.cssclass = ($scope.dialogData.selection.indexOf(image) > -1) ? "selected" : "";
|
||||
}else{
|
||||
$scope.submit(image);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
$scope.selectMediaItem = function(image) {
|
||||
if (image.contentTypeAlias.toLowerCase() == 'folder') {
|
||||
$scope.options.formData.currentFolder = image.id;
|
||||
|
||||
@@ -57,6 +57,14 @@ data-file-upload="options" data-file-upload-progress="" data-ng-class="{'fileupl
|
||||
<div style="height: 10px; margin: 10px 0px 10px 0px" class="umb-loader"
|
||||
ng-hide="active() == 0"></div>
|
||||
|
||||
<umb-photo-folder
|
||||
min-height="100"
|
||||
min-width="220"
|
||||
on-click="clickHandler"
|
||||
ng-model="images"
|
||||
/>
|
||||
|
||||
<!--
|
||||
<ul class="umb-thumbnails thumbnails">
|
||||
<li class="span2 folder" ng-repeat="image in images | orderBy:'contentTypeAlias' | filter:searchTerm">
|
||||
<a href="#" class="thumbnail" ng-class="{selected: dialogData.selection.indexOf(image) > -1}"
|
||||
@@ -76,6 +84,7 @@ data-file-upload="options" data-file-upload-progress="" data-ng-class="{'fileupl
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
-->
|
||||
</div>
|
||||
|
||||
<div class="umb-panel-footer">
|
||||
|
||||
@@ -1,8 +1,28 @@
|
||||
<div class="umb-photo-folder">
|
||||
<div class="picrow" ng-repeat="row in rows">
|
||||
<img class="umb-photo"
|
||||
ng-repeat="img in row.photos"
|
||||
ng-src="{{img.thumbnail}}"
|
||||
ng-style="img.style"/>
|
||||
<a
|
||||
href
|
||||
ng-click="clickHandler(img, $event)"
|
||||
ng-switch="img.thumbnail"
|
||||
ng-repeat="img in row.photos"
|
||||
style="margin: 0px; padding: 0px; border: none; display: inline-block"
|
||||
ng-class="img.cssclass"
|
||||
title="{{img.name}}">
|
||||
|
||||
<div ng-style="img.style" class="umb-non-thumbnail" ng-switch-when="none">
|
||||
<i class="icon large icon-folder"></i>
|
||||
{{img.name}}
|
||||
</div>
|
||||
|
||||
<img class="umb-photo"
|
||||
ng-switch-default
|
||||
ng-src="{{img.thumbnail}}"
|
||||
ng-style="img.style"
|
||||
|
||||
alt="{{img.name}}"/>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -40,7 +40,7 @@ angular.module("umbraco")
|
||||
$scope.images = data;
|
||||
//update the thumbnail property
|
||||
_.each($scope.images, function(img) {
|
||||
img.thumbnail = imageHelper.getThumbnail({ imageModel: img, scope: $scope });
|
||||
//img.thumbnail = imageHelper.getThumbnail({ imageModel: img, scope: $scope });
|
||||
});
|
||||
|
||||
// prettify the look and feel
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<div class="umb-editor umb-mediapicker" ng-controller="Umbraco.Editors.MediaPickerController">
|
||||
|
||||
<ul class="thumbnails umb-thumbnails">
|
||||
<li class="umb-thumbnail thumbnail span2" ng-repeat="image in images">
|
||||
<li class="umb-thumbnail thumbnail span3" ng-repeat="image in images">
|
||||
<a href ng-click="remove($index)">
|
||||
<img ng-src="{{image.src}}" alt="">
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user