Updating media picker to work and look properly
This commit is contained in:
Shannon
2
.gitignore
vendored
2
.gitignore
vendored
@@ -77,3 +77,5 @@ src/Umbraco.Web.UI/umbraco/Views/**/*.css
|
||||
src/Umbraco.Web.UI/umbraco/Views/**/*.html
|
||||
src/Umbraco.Web.UI/umbraco/assets/*
|
||||
src/Umbraco.Web.UI.Client/build/*
|
||||
src/Umbraco.Web.UI.Client/build/*
|
||||
src/Umbraco.Web.UI.Client/build/belle/
|
||||
|
||||
@@ -1,49 +0,0 @@
|
||||
<div class="umb-panel" ng-controller="Umbraco.Dialogs.MediaPickerController">
|
||||
<div class="umb-panel-header">
|
||||
<div class="umb-el-wrap umb-panel-buttons">
|
||||
<div class="pull-right umb-btn-toolbar">
|
||||
<button class="btn">Create <i class="icon-upload"></i></button>
|
||||
<button type="button" ng-click="submit(dialogData)" class="btn btn-primary">Select (x)</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="umb-panel-body umb-scrollable" auto-scale="1">
|
||||
<div class="umb-panel">
|
||||
<div class="umb-control-group">
|
||||
<ul class="breadcrumb">
|
||||
<li><strong>You are here:</strong></li>
|
||||
<li><a href="#">Media</a></li>
|
||||
</ul>
|
||||
<div id="search-form" ng-animate="'slide'">
|
||||
<form class="form-search" ng-controller="SearchController">
|
||||
<i class="icon-search"></i>
|
||||
<input type="text"
|
||||
ng-model="ui.searchTerm"
|
||||
class="umb-search-field search-query"
|
||||
placeholder="{{localization.app.search.typeToSearch}}"
|
||||
on-blur="deActivateSearch()"
|
||||
on-keyup="performSearch(ui.searchTerm)">
|
||||
</form>
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
<ul class="thumbnails">
|
||||
<li class="span2" ng-repeat="image in images">
|
||||
|
||||
<a href="#" class="thumbnail" ng-class="{selected: dialogData.selection.indexOf(image) > -1}"
|
||||
ng-click="selectMediaItem(image)"
|
||||
prevent-default>
|
||||
|
||||
<img ng-src="{{image.thumbnail}}" />
|
||||
<span style="color:white;">{{image.name}}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -29,18 +29,25 @@
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
<ul class="thumbnails">
|
||||
<li class="span2" ng-repeat="image in images">
|
||||
<ul class="thumbnails">
|
||||
|
||||
<li class="span2 folder" ng-repeat="image in images">
|
||||
|
||||
<a href="#" class="thumbnail" ng-class="{selected: dialogData.selection.indexOf(image) > -1}"
|
||||
ng-click="selectMediaItem(image)"
|
||||
prevent-default>
|
||||
|
||||
<img ng-src="{{image.thumbnail}}" />
|
||||
<span style="color:white;">{{image.name}}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="#" class="thumbnail" ng-class="{selected: dialogData.selection.indexOf(image) > -1}"
|
||||
ng-click="selectMediaItem(image)"
|
||||
prevent-default>
|
||||
|
||||
<div ng-switch on="image.isImage" >
|
||||
<img ng-src="{{image.thumbnail}}" ng-switch-when="true" alt="{{image.name}}"/>
|
||||
<span ng-switch-default>
|
||||
<i class="icon-folder-close"></i>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{{image.name}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -28,8 +28,7 @@ angular.module("umbraco")
|
||||
}
|
||||
};
|
||||
|
||||
$scope.saveAndPublish = function (cnt) {
|
||||
cnt.publishDate = new Date();
|
||||
$scope.saveAndPublish = function (cnt) {
|
||||
contentResource.publishContent(cnt, $routeParams.create, $scope.files)
|
||||
.then(function(data) {
|
||||
$scope.content = data;
|
||||
@@ -38,7 +37,6 @@ angular.module("umbraco")
|
||||
};
|
||||
|
||||
$scope.save = function (cnt) {
|
||||
cnt.updateDate = new Date();
|
||||
contentResource.saveContent(cnt, $routeParams.create, $scope.files)
|
||||
.then(function (data) {
|
||||
$scope.content = data;
|
||||
|
||||
@@ -25,9 +25,18 @@ function mediaEditController($scope, $routeParams, mediaResource, notificationsS
|
||||
$scope.files.push({ id: propertyId, file: files[i] });
|
||||
}
|
||||
};
|
||||
|
||||
//TODO: Clean this up and share this code with the content editor
|
||||
$scope.saveAndPublish = function (cnt) {
|
||||
mediaResource.saveMedia(cnt, $routeParams.create, $scope.files)
|
||||
.then(function (data) {
|
||||
$scope.content = data;
|
||||
notificationsService.success("Published", "Media has been saved and published");
|
||||
});
|
||||
};
|
||||
|
||||
$scope.save = function (cnt) {
|
||||
cnt.updateDate = new Date();
|
||||
//TODO: Clean this up and share this code with the content editor
|
||||
$scope.save = function (cnt) {
|
||||
mediaResource.saveMedia(cnt, $routeParams.create, $scope.files)
|
||||
.then(function (data) {
|
||||
$scope.content = data;
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
using System;
|
||||
|
||||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.Globalization;
|
||||
using System.IO;
|
||||
@@ -21,6 +22,9 @@ namespace Umbraco.Web.UI.App_Plugins.MyPackage.PropertyEditors
|
||||
/// </summary>
|
||||
internal class FileUploadValueEditor : ValueEditor
|
||||
{
|
||||
//TODO: This needs to come from pre-values
|
||||
private const string ThumbnailSizes = "100";
|
||||
|
||||
/// <summary>
|
||||
/// Overrides the deserialize value so that we can save the file accordingly
|
||||
/// </summary>
|
||||
@@ -106,9 +110,37 @@ namespace Umbraco.Web.UI.App_Plugins.MyPackage.PropertyEditors
|
||||
using (var fileStream = File.OpenRead(file.TempFilePath))
|
||||
{
|
||||
var umbracoFile = UmbracoFile.Save(fileStream, fileName);
|
||||
//add this to the persisted values
|
||||
|
||||
newValue.Add(JObject.FromObject(new { file = umbracoFile.Url }));
|
||||
//create json to be saved
|
||||
var forPersisting = JObject.FromObject(new
|
||||
{
|
||||
file = umbracoFile.Url,
|
||||
isImage = false
|
||||
});
|
||||
|
||||
|
||||
if (umbracoFile.SupportsResizing)
|
||||
{
|
||||
forPersisting["isImage"] = true;
|
||||
|
||||
// make default thumbnail
|
||||
umbracoFile.Resize(100, "thumb");
|
||||
|
||||
// additional thumbnails configured as prevalues on the DataType
|
||||
char sep = (ThumbnailSizes.Contains("") == false && ThumbnailSizes.Contains(",")) ? ',' : ';';
|
||||
|
||||
foreach (string thumb in ThumbnailSizes.Split(sep))
|
||||
{
|
||||
int thumbSize;
|
||||
if (thumb != "" && int.TryParse(thumb, out thumbSize))
|
||||
{
|
||||
umbracoFile.Resize(thumbSize, string.Format("thumb_{0}", thumbSize));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//add this to the persisted values
|
||||
newValue.Add(forPersisting);
|
||||
}
|
||||
//now remove the temp file
|
||||
File.Delete(file.TempFilePath);
|
||||
@@ -117,13 +149,6 @@ namespace Umbraco.Web.UI.App_Plugins.MyPackage.PropertyEditors
|
||||
//TODO: We need to remove any files that were previously persisted but are no longer persisted. FOr example, if we
|
||||
// uploaded 5 files before and then only uploaded 3, then the last two should be deleted.
|
||||
|
||||
//NOTE: We will save a simple string if there is only one media item, this is mostly for backwards compatibility and for
|
||||
// the current media pickers to work.
|
||||
if (newValue.Count == 1)
|
||||
{
|
||||
return newValue[0]["file"].ToString();
|
||||
}
|
||||
|
||||
return newValue.ToString(Formatting.None);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,22 +7,42 @@ define(['namespaceMgr'], function () {
|
||||
|
||||
MyPackage.PropertyEditors.FileUploadEditor = function ($scope, $element, $compile) {
|
||||
|
||||
/** Clears the file collections when content is saving (if we need to clear) or after saved */
|
||||
function clearFiles() {
|
||||
//TODO: There should be a better way! We don't want to have to know about the parent scope
|
||||
//clear the parent files collection (we don't want to upload any!)
|
||||
$scope.$parent.addFiles($scope.model.id, []);
|
||||
//clear the current files
|
||||
$scope.files = [];
|
||||
}
|
||||
|
||||
//clear the current files
|
||||
$scope.files = [];
|
||||
//create the property to show the list of files currently saved
|
||||
if ($scope.model.value != "") {
|
||||
|
||||
//for legacy data, this will not be an array, just a string so convert to an array
|
||||
if (!$scope.model.value.startsWith('[')) {
|
||||
$scope.model.value = "[{\"file\": \"" + $scope.model.value + "\"}]";
|
||||
|
||||
//check if it ends with a common image extensions
|
||||
var lowered = $scope.model.value.toLowerCase();
|
||||
var isImage = false;
|
||||
if (lowered.endsWith(".jpg") || lowered.endsWith(".gif") || lowered.endsWith(".jpeg") || lowered.endsWith(".png")) {
|
||||
isImage = true;
|
||||
}
|
||||
$scope.model.value = "[{\"file\": \"" + $scope.model.value + "\",\"isImage\":" + isImage +"}]";
|
||||
}
|
||||
|
||||
$scope.persistedFiles = _.map(angular.fromJson($scope.model.value), function (item) {
|
||||
return item.file;
|
||||
});
|
||||
|
||||
$scope.persistedFiles = angular.fromJson($scope.model.value);
|
||||
}
|
||||
else {
|
||||
$scope.persistedFiles = [];
|
||||
}
|
||||
|
||||
|
||||
$scope.getThumbnail = function (file) {
|
||||
var ext = file.file.substr(file.file.lastIndexOf('.'));
|
||||
return file.file.substr(0, file.file.lastIndexOf('.')) + "_thumb" + ext;
|
||||
};
|
||||
|
||||
$scope.clearFiles = false;
|
||||
|
||||
@@ -30,24 +50,12 @@ define(['namespaceMgr'], function () {
|
||||
$scope.$watch("clearFiles", function(isCleared) {
|
||||
if (isCleared == true) {
|
||||
$scope.model.value = "{clearFiles: true}";
|
||||
clearFiles();
|
||||
}
|
||||
else {
|
||||
$scope.model.value = "";
|
||||
}
|
||||
});
|
||||
|
||||
//listen for the saving event
|
||||
$scope.$on("contentSaving", function() {
|
||||
//if clear files is selected then we'll clear all the files that are about
|
||||
// to be uploaded
|
||||
if ($scope.clearFiles) {
|
||||
//TODO: There should be a better way! We don't want to have to know about the parent scope
|
||||
//clear the parent files collection (we don't want to upload any!)
|
||||
$scope.$parent.addFiles($scope.model.id, []);
|
||||
//clear the current files
|
||||
$scope.files = [];
|
||||
}
|
||||
});
|
||||
|
||||
//listen for when a file is selected
|
||||
$scope.$on("filesSelected", function (event, args) {
|
||||
|
||||
@@ -12,7 +12,12 @@
|
||||
<div ng-show="persistedFiles.length > 0">
|
||||
<p>Current files</p>
|
||||
<ul>
|
||||
<li ng-repeat="file in persistedFiles">{{file}}</li>
|
||||
<li ng-repeat="file in persistedFiles">
|
||||
<div ng-switch on="file.isImage" >
|
||||
<img ng-src="{{getThumbnail(file)}}" ng-switch-when="true" alt="{{file.file}}"/>
|
||||
<span ng-switch-default>{{file.file}}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<input type="checkbox" name="myPackage_clearFiles" ng-model="clearFiles" />
|
||||
<label for="myPackage_clearFiles">Clear files</label>
|
||||
|
||||
@@ -2566,8 +2566,8 @@
|
||||
</PropertyGroup>
|
||||
<Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets" />
|
||||
<PropertyGroup>
|
||||
<PreBuildEvent>
|
||||
</PreBuildEvent>
|
||||
<PreBuildEvent>REM CD /D $(SolutionDir)Umbraco.Web.UI.Client\
|
||||
REM grunt.cmd build</PreBuildEvent>
|
||||
<PostBuildEvent>xcopy "$(ProjectDir)"..\packages\SqlServerCE.4.0.0.0\amd64\*.* "$(TargetDir)amd64\" /Y /F /E /D
|
||||
xcopy "$(ProjectDir)"..\packages\SqlServerCE.4.0.0.0\x86\*.* "$(TargetDir)x86\" /Y /F /E /D</PostBuildEvent>
|
||||
</PropertyGroup>
|
||||
|
||||
@@ -29,18 +29,25 @@
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
<ul class="thumbnails">
|
||||
<li class="span2" ng-repeat="image in images">
|
||||
<ul class="thumbnails">
|
||||
|
||||
<li class="span2 folder" ng-repeat="image in images">
|
||||
|
||||
<a href="#" class="thumbnail" ng-class="{selected: dialogData.selection.indexOf(image) > -1}"
|
||||
ng-click="selectMediaItem(image)"
|
||||
prevent-default>
|
||||
|
||||
<img ng-src="{{image.thumbnail}}" />
|
||||
<span style="color:white;">{{image.name}}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="#" class="thumbnail" ng-class="{selected: dialogData.selection.indexOf(image) > -1}"
|
||||
ng-click="selectMediaItem(image)"
|
||||
prevent-default>
|
||||
|
||||
<div ng-switch on="image.isImage" >
|
||||
<img ng-src="{{image.thumbnail}}" ng-switch-when="true" alt="{{image.name}}"/>
|
||||
<span ng-switch-default>
|
||||
<i class="icon-folder-close"></i>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{{image.name}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user