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

Migrated the old content picker to the new dialogs

Browse Source
This commit is contained in:
perploug
2013-09-18 15:44:50 +02:00
parent 4dd708820f
commit 4891c54ef5
9 changed files with 59 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.controller.js
View File

@@ -28,7 +28,7 @@ angular.module("umbraco")
$scope.gotoFolder = function(folderId){
if(folderId > 0){
entityResource.getAncestors(folderId)
entityResource.getAncestors(folderId, "media")
.then(function(anc){
anc.splice(0,1);
$scope.path = anc;

15
src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.html
View File

@@ -16,7 +16,7 @@ data-file-upload="options" data-file-upload-progress="" data-ng-class="{'fileupl
</div>
</div>
<div class="pull-right umb-btn-toolbar">
<div class="pull-right">
<span class="btn fileinput-button" ng-class="{disabled: disabled}">
<i class="icon-page-up"></i>
<input type="file" name="files[]" multiple ng-disabled="disabled">
@@ -24,12 +24,9 @@ data-file-upload="options" data-file-upload-progress="" data-ng-class="{'fileupl
</div>
</div>
</div>
<div class="umb-panel-body umb-scrollable" auto-scale="70">
<div class="control-group umb-control-group">
<ul class="breadcrumb">
<div class="row">
<ul class="breadcrumb span12">
<li><a href ng-click="gotoFolder(-1)" prevent-default>Media</a> / </li>
<li ng-repeat="item in path">
@@ -52,7 +49,11 @@ data-file-upload="options" data-file-upload-progress="" data-ng-class="{'fileupl
</li>
</ul>
</div>
</div>
<div class="umb-panel-body umb-scrollable" auto-scale="70">
<div style="height: 10px; margin: 10px 0px 10px 0px" class="umb-loader"
ng-hide="active() == 0"></div>

3
src/Umbraco.Web.UI.Client/src/views/common/dialogs/treepicker.controller.js
View File

@@ -3,7 +3,8 @@ angular.module("umbraco").controller("Umbraco.Dialogs.TreePickerController",
function ($scope, eventsService, $log) {
var dialogOptions = $scope.$parent.dialogOptions;
$scope.dialogTreeEventHandler = $({});
$scope.section = dialogOptions.section | "content";
$scope.section = dialogOptions.section;
$scope.dialogTreeEventHandler.bind("treeNodeSelect", function(ev, args){
args.event.preventDefault();

2
src/Umbraco.Web.UI.Client/src/views/common/dialogs/treepicker.html
View File

@@ -12,7 +12,7 @@
<div class="umb-pane">
<umb-tree
section="{{section}}"
cachekey="contentpickerDialog"
cachekey="treepickerDialog"
showheader="false"
showoptions="false"
eventhandler="dialogTreeEventHandler">

2
src/Umbraco.Web/umbraco.presentation/umbraco/controls/ContentPicker.cs
View File

@@ -44,7 +44,7 @@ namespace umbraco.controls
{
get
{
return TreeService.GetPickerUrl(AppAlias, TreeAlias);
return AppAlias;
}
}

28
src/umbraco.controls/TreePicker/BaseTreePicker.cs
View File

@@ -9,11 +9,13 @@ using umbraco.cms.businesslogic;
namespace umbraco.uicontrols.TreePicker
{
/*
[ClientDependency(0, ClientDependencyType.Javascript, "Application/NamespaceManager.js", "UmbracoClient")]
[ClientDependency(ClientDependencyType.Css, "modal/style.css", "UmbracoClient")]
[ClientDependency(ClientDependencyType.Javascript, "modal/modal.js", "UmbracoClient")]
[ClientDependency(ClientDependencyType.Javascript, "Application/UmbracoClientManager.js", "UmbracoClient")]
[ClientDependency(ClientDependencyType.Javascript, "Application/UmbracoUtils.js", "UmbracoClient")]
[ClientDependency(ClientDependencyType.Javascript, "Application/UmbracoUtils.js", "UmbracoClient")]*/
[ValidationProperty("Value")]
public abstract class BaseTreePicker : Control, INamingContainer
{
@@ -23,7 +25,8 @@ namespace umbraco.uicontrols.TreePicker
protected HtmlAnchor ChooseLink;
protected HtmlGenericControl ItemTitle;
protected HtmlGenericControl ButtonContainer;
protected HtmlGenericControl RootContainer;
public BaseTreePicker()
{
ShowDelete = true;
@@ -177,11 +180,16 @@ namespace umbraco.uicontrols.TreePicker
{
base.CreateChildControls();
RootContainer = new HtmlGenericControl("span");
RootContainer.Attributes.Add("class", "umb-tree-picker");
this.Controls.Add(RootContainer);
//create the hidden field
ItemIdValue = new HiddenField();
ItemIdValue.ID = "ContentIdValue";
this.Controls.Add(ItemIdValue);
RootContainer.Controls.Add(ItemIdValue);
ButtonContainer = new HtmlGenericControl("span");
ButtonContainer.ID = "btns";
@@ -200,6 +208,8 @@ namespace umbraco.uicontrols.TreePicker
DeleteLink.Style.Add(HtmlTextWriterStyle.Color, "red");
DeleteLink.Title = ui.GetText("delete");
DeleteLink.InnerText = ui.GetText("delete");
DeleteLink.Attributes.Add("class", "clear");
ButtonContainer.Controls.Add(DeleteLink);
ButtonContainer.Controls.Add(new LiteralControl("&nbsp;"));
ButtonContainer.Controls.Add(new LiteralControl("&nbsp;"));
@@ -208,14 +218,16 @@ namespace umbraco.uicontrols.TreePicker
DeleteLink.Style.Add(HtmlTextWriterStyle.Display, "none");
}
this.Controls.Add(ButtonContainer);
RootContainer.Controls.Add(ButtonContainer);
//add choose link with padding
ChooseLink = new HtmlAnchor();
ChooseLink.HRef = "#"; //filled in on pre-render
ChooseLink.InnerText = ui.GetText("choose") + "...";
this.Controls.Add(ChooseLink);
ChooseLink.Attributes.Add("data-section", this.TreePickerUrl);
ChooseLink.Attributes.Add("class", "choose");
RootContainer.Controls.Add(ChooseLink);
}
/// <summary>
@@ -236,12 +248,14 @@ namespace umbraco.uicontrols.TreePicker
ItemTitle.InnerText = GetItemTitle();
ItemTitle.Attributes.Add("title", GetItemBreadcrumbs()); // Adding full path/meta info (Issue U4-192)
}
/*
ChooseLink.HRef = string.Format("javascript:mc_{0}.LaunchPicker();", this.ClientID);
DeleteLink.HRef = string.Format("javascript:mc_{0}.ClearSelection();", this.ClientID);
*/
RenderJSComponents();
/*
if (ScriptManager.GetCurrent(Page).IsInAsyncPostBack)
{
ScriptManager.RegisterStartupScript(this, this.GetType(), this.ClientID + "TreePicker", GetJSScript(), true);
@@ -249,7 +263,7 @@ namespace umbraco.uicontrols.TreePicker
else
{
Page.ClientScript.RegisterStartupScript(this.GetType(), this.ClientID + "TreePicker", GetJSScript(), true);
}
}*/
}

115
src/umbraco.controls/TreePicker/BaseTreePicker.js
View File

@@ -1,97 +1,28 @@
/// <reference path="/umbraco_client/Application/NamespaceManager.js" />
Umbraco.Sys.registerNamespace("Umbraco.Controls");
(function($) {
Umbraco.Controls.TreePicker = function(clientId, label, itemIdValueClientID, itemTitleClientID, itemPickerUrl, width, height, showHeader, umbracoPath) {
var obj = {
_itemPickerUrl: itemPickerUrl,
_webServiceUrl: umbracoPath + "/webservices/legacyAjaxCalls.asmx/GetNodeBreadcrumbs",
_label: label,
_width: width,
_height: height,
_itemIdValueClientID: itemIdValueClientID,
_itemTitleClientID: itemTitleClientID,
_showHeader: showHeader,
_clientId: clientId,
GetValue: function() {
return $("#" + this._itemIdValueClientID).val();
},
LaunchPicker: function() {
var _this = this;
UmbClientMgr.openModalWindow(this._itemPickerUrl, this._label, this._showHeader, this._width, this._height, 60, 0, ['#cancelbutton'], function(e) { _this.SaveSelection(e); });
},
SaveSelection: function(e) {
if (!e.outVal) {
return;
}
$("#" + this._itemIdValueClientID).val(e.outVal);
var _this = this;
$.ajax({
type: "POST",
url: _this._webServiceUrl,
data: '{ "nodeId": ' + e.outVal + ' }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
var a = msg.d;
var name = a[a.length - 1];
var breadcrumbs = a.join(" > ");
$("#" + _this._itemTitleClientID)
.html(name)
.attr('title', breadcrumbs)
.parent()
.show();
}
});
},
ClearSelection: function() {
$("#" + this._itemTitleClientID)
.attr('title', '')
.parent()
.hide();
$("#" + this._itemIdValueClientID).val('');
}
};
//store this instance (by counter and id) so we can retrieve it later if needed
Umbraco.Controls.TreePicker.inst[++Umbraco.Controls.TreePicker.cntr] = obj;
Umbraco.Controls.TreePicker.inst[clientId] = obj;
return obj;
};
(function ($) {
$(document).ready(function () {
// Tooltip only Text
$('.treePickerTitle').hover(function () {
// Hover over code
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
$('<p class="treePickerTooltip" style="z-index: 1000;"></p>').text(title).appendTo('body').fadeIn('fast');;
}, function () {
// Hover out code
$(this).attr('title', $(this).data('tipText'));
$('.treePickerTooltip').remove();
}).mousemove(function (e) {
var mousex = e.pageX + 10; //Get X coordinates
var mousey = e.pageY + 5; //Get Y coordinates
$('.treePickerTooltip').css({ top: mousey, left: mousex });
$('.umb-tree-picker a.choose').click(function () {
var that = this;
var s = $(that).data("section");
UmbClientMgr.openAngularModalWindow({
template: 'views/common/dialogs/treepicker.html',
section: s,
callback: function (data) {
//this returns the content object picked
jQuery(that).parent().find("input").val(data.id);
jQuery(that).parent().find(".treePickerTitle").text(data.name).show();
jQuery(that).parent().find(".clear").show();
}
});
return false;
});
$('.umb-tree-picker a.clear').click(function () {
jQuery(this).parent().parent().find("input").val("-1");
jQuery(this).parent().parent().find(".treePickerTitle").text("").hide();
jQuery(this).hide();
});
});
// Static methods
//return the existing picker object based on client id of the control
Umbraco.Controls.TreePicker.GetPickerById = function(id) {
return Umbraco.Controls.TreePicker.inst[id] || null;
};
// instance manager
Umbraco.Controls.TreePicker.cntr = 0;
Umbraco.Controls.TreePicker.inst = {};
})(jQuery);
})(jQuery);

2
src/umbraco.controls/TreePicker/SimpleContentPicker.cs
View File

@@ -12,7 +12,7 @@ namespace umbraco.uicontrols.TreePicker
{
get
{
return TreeUrlGenerator.GetPickerUrl(Constants.Applications.Content, "content");
return Constants.Applications.Content;
}
}

2
src/umbraco.controls/TreePicker/SimpleMediaPicker.cs
View File

@@ -12,7 +12,7 @@ namespace umbraco.uicontrols.TreePicker
{
get
{
return TreeUrlGenerator.GetPickerUrl(Constants.Applications.Media, "media");
return Constants.Applications.Media;
}
}