From 4891c54ef5e8e8e92b6b8eaa7c96028a2a718dd5 Mon Sep 17 00:00:00 2001 From: perploug Date: Wed, 18 Sep 2013 15:44:50 +0200 Subject: [PATCH] Migrated the old content picker to the new dialogs --- .../common/dialogs/mediapicker.controller.js | 2 +- .../src/views/common/dialogs/mediapicker.html | 15 +-- .../common/dialogs/treepicker.controller.js | 3 +- .../src/views/common/dialogs/treepicker.html | 2 +- .../umbraco/controls/ContentPicker.cs | 2 +- .../TreePicker/BaseTreePicker.cs | 28 +++-- .../TreePicker/BaseTreePicker.js | 115 ++++-------------- .../TreePicker/SimpleContentPicker.cs | 2 +- .../TreePicker/SimpleMediaPicker.cs | 2 +- 9 files changed, 59 insertions(+), 112 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.controller.js index d8fdc1f562..e1b44dc5e1 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.controller.js @@ -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; diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.html b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.html index bc82ea924d..88b69a7e65 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.html +++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.html @@ -16,7 +16,7 @@ data-file-upload="options" data-file-upload-progress="" data-ng-class="{'fileupl -
+
@@ -24,12 +24,9 @@ data-file-upload="options" data-file-upload-progress="" data-ng-class="{'fileupl
- -
- -
-
    +
    +
    • Media /
    • @@ -52,7 +49,11 @@ data-file-upload="options" data-file-upload-progress="" data-ng-class="{'fileupl
    - + +
+ +
+
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/treepicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/treepicker.controller.js index df2160e848..8a0c48a13e 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/treepicker.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/treepicker.controller.js @@ -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(); diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/treepicker.html b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/treepicker.html index c6d25c7090..fa07143733 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/treepicker.html +++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/treepicker.html @@ -12,7 +12,7 @@
diff --git a/src/Umbraco.Web/umbraco.presentation/umbraco/controls/ContentPicker.cs b/src/Umbraco.Web/umbraco.presentation/umbraco/controls/ContentPicker.cs index 0e1596b9d5..374a76a71f 100644 --- a/src/Umbraco.Web/umbraco.presentation/umbraco/controls/ContentPicker.cs +++ b/src/Umbraco.Web/umbraco.presentation/umbraco/controls/ContentPicker.cs @@ -44,7 +44,7 @@ namespace umbraco.controls { get { - return TreeService.GetPickerUrl(AppAlias, TreeAlias); + return AppAlias; } } diff --git a/src/umbraco.controls/TreePicker/BaseTreePicker.cs b/src/umbraco.controls/TreePicker/BaseTreePicker.cs index a3d4f013b0..a91a718e9b 100644 --- a/src/umbraco.controls/TreePicker/BaseTreePicker.cs +++ b/src/umbraco.controls/TreePicker/BaseTreePicker.cs @@ -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(" ")); ButtonContainer.Controls.Add(new LiteralControl(" ")); @@ -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); } /// @@ -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); - } + }*/ } diff --git a/src/umbraco.controls/TreePicker/BaseTreePicker.js b/src/umbraco.controls/TreePicker/BaseTreePicker.js index 823baf7f49..79ad9013de 100644 --- a/src/umbraco.controls/TreePicker/BaseTreePicker.js +++ b/src/umbraco.controls/TreePicker/BaseTreePicker.js @@ -1,97 +1,28 @@ /// - -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'); - $('

').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); \ No newline at end of file diff --git a/src/umbraco.controls/TreePicker/SimpleContentPicker.cs b/src/umbraco.controls/TreePicker/SimpleContentPicker.cs index de93637134..e086767899 100644 --- a/src/umbraco.controls/TreePicker/SimpleContentPicker.cs +++ b/src/umbraco.controls/TreePicker/SimpleContentPicker.cs @@ -12,7 +12,7 @@ namespace umbraco.uicontrols.TreePicker { get { - return TreeUrlGenerator.GetPickerUrl(Constants.Applications.Content, "content"); + return Constants.Applications.Content; } } diff --git a/src/umbraco.controls/TreePicker/SimpleMediaPicker.cs b/src/umbraco.controls/TreePicker/SimpleMediaPicker.cs index c7c7125f1e..91d07598a5 100644 --- a/src/umbraco.controls/TreePicker/SimpleMediaPicker.cs +++ b/src/umbraco.controls/TreePicker/SimpleMediaPicker.cs @@ -12,7 +12,7 @@ namespace umbraco.uicontrols.TreePicker { get { - return TreeUrlGenerator.GetPickerUrl(Constants.Applications.Media, "media"); + return Constants.Applications.Media; } }