#20012: Refactoring content picker field view and script to a shape for re-usability.

Work Item: 20012

src/Orchard.Web/Modules/Orchard.ContentPicker/Orchard.ContentPicker.csproj

@@ -145,6 +145,9 @@
       <Name>Orchard.Core</Name>
     </ProjectReference>
   </ItemGroup>
+  <ItemGroup>
+    <Content Include="Views\ContentPicker.Edit.cshtml" />
+  </ItemGroup>
   <PropertyGroup>
     <VisualStudioVersion Condition="'$(VisualStudioVersion)' == ''">10.0</VisualStudioVersion>
     <VSToolsPath Condition="'$(VSToolsPath)' == ''">$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)</VSToolsPath>

src/Orchard.Web/Modules/Orchard.ContentPicker/Scripts/ContentPicker.js

@@ -36,4 +36,71 @@
 
         var w = window.open(url, "_blank", data.windowFeatures || "width=685,height=700,status=no,toolbar=no,location=no,menubar=no,resizable=no,scrollbars=yes");
     });
+    
+    // Render content items table and initialize controls.
+    (function() {
+        $("fieldset.content-picker-field").each(function() {
+            var self = this;
+            var required = $(self).data("required");
+            var multiple = $(self).data("multiple");
+            var addButton = $(self).find(".button.add");
+            var removeText = $(self).data("remove-text");
+            var template = '<tr><td>&nbsp;</td><td><span data-id="{contentItemId}" data-fieldid="@idsFieldId" class="content-picker-item">{edit-link}</span></td><td><span data-id="{contentItemId}" class="content-picker-remove button grey">' + removeText + '</span></td></tr>';
+            var selectedItemsFieldname = $(self).data("selected-items-fieldname");
+            var baseUrl = $(self).data("base-url");
+            var partName = $(self).data("part-name");
+            var fieldName = $(self).data("field-name");
+            
+            var refreshIds = function() {
+                var id = $("[name='" + selectedItemsFieldname + "']");
+                var fieldId = $(self).find("span[data-fieldid]");
+                
+                id.val("");
+                fieldId.each(function() {
+                    id.val(id.val() + "," + $(this).attr("data-id"));
+                });
+
+                var itemsCount = fieldId.length;
+            
+                if(!multiple && itemsCount > 0) {
+                    addButton.hide();
+                }
+                else {
+                    addButton.show();
+                }
+            };
+
+            refreshIds();
+        
+            addButton.click(function() {
+                addButton.trigger("orchard-admin-contentpicker-open", {
+                    callback: function(data) {
+                        var tmpl = template.replace( /\{contentItemId\}/g , data.id).replace( /\{edit-link\}/g , data.editLink);
+                        var content = $(tmpl);
+                        $(self).find('table.content-picker tbody').append(content);
+
+                        refreshIds();
+                        $(self).find('.content-picker-message').show();
+                    },
+                    baseUrl: baseUrl,
+                    part: partName,
+                    field: fieldName
+                });
+            });
+
+            $(self).on("click",'table.content-picker .content-picker-remove',function() {
+                $(this).closest('tr').remove();
+                refreshIds();
+                $(self).find('.content-picker-message').show();
+            });
+            
+            $(self).find("table.content-picker tbody").sortable({
+                handle: 'td:first',
+                stop: function(event, ui) {
+                    refreshIds();
+                    $(self).find('.content-picker-message').show();
+                }
+            }).disableSelection();
+        });
+    })();
 });

src/Orchard.Web/Modules/Orchard.ContentPicker/Views/ContentPicker.Edit.cshtml

@@ -0,0 +1,63 @@
+@using Orchard.ContentManagement
+@using Orchard.Environment.Configuration
+@{
+    Script.Require("ContentPicker").AtFoot();
+    Script.Require("jQueryUI_Sortable").AtFoot();
+    Style.Include("content-picker-admin.css");
+
+    var required = ((bool?)Model.Required) ?? false;
+    var multiple = ((bool?)Model.Multiple) ?? false;
+    var displayName = (string)Model.DisplayName ?? "";
+    var idsFieldId = (string)Model.IdsFieldId ?? "";
+    var selectedItemsFieldName = (string)Model.SelectedItemsFieldName ?? "";
+    var contentItems = (IEnumerable<ContentItem>)Model.ContentItems;
+    var hint = (string) Model.Hint;
+    var partName = Model.PartName;
+    var fieldName = Model.FieldName;
+    var baseUrl = Url.Content("~/") + WorkContext.Resolve<ShellSettings>().RequestUrlPrefix;
+}
+
+<fieldset class="content-picker-field"
+          data-required="@required.ToString().ToLower()"
+          data-multiple="@multiple.ToString().ToLower()"
+          data-selected-items-fieldname="@selectedItemsFieldName"
+          data-base-url="@baseUrl"
+          data-part-name="@HttpUtility.JavaScriptStringEncode(partName)"
+          data-field-name="@HttpUtility.JavaScriptStringEncode(fieldName)"
+          data-remove-text="@T("Remove")">
+    @if (!String.IsNullOrWhiteSpace(displayName)) {
+        <label @if(required) { <text>class="required"</text> }>@displayName</label>
+    }
+    <div class="message message-Warning content-picker-message">@T("You need to save your changes.")</div>
+    <table class="items content-picker" summary="@displayName">
+        <colgroup>
+            <col id="Col1" style="width:20px" />
+            <col id="Col2" />
+            <col id="Col3" />
+        </colgroup>
+        <thead>
+            <tr>
+                <th scope="col" >&nbsp;&darr;</th>
+                <th scope="col">@T("Content Item")</th>
+                <th scope="col">&nbsp;</th>
+            </tr>
+        </thead>
+        <tbody>
+            @foreach (var contentItem in contentItems) {
+                <tr>
+                    <td>&nbsp;</td>
+                    <td>
+                        <span data-id="@contentItem.Id" data-fieldid="@idsFieldId" class="content-picker-item">@Html.ItemEditLink(contentItem)</span>
+                    </td>
+                    <td>
+                        <span data-id="@contentItem.Id" class="content-picker-remove button grey">@T("Remove")</span>
+                    </td>
+                </tr>
+            }
+        </tbody>
+    </table>
+
+    <span class="button add">@T("Add")</span>
+    <input type="hidden" name="@selectedItemsFieldName"/>
+    <span class="hint">@hint</span>
+</fieldset>

src/Orchard.Web/Modules/Orchard.ContentPicker/Views/EditorTemplates/Fields/ContentPicker.Edit.cshtml

@@ -1,6 +1,4 @@
 @model Orchard.ContentPicker.ViewModels.ContentPickerFieldViewModel
-@using Orchard.Environment.Configuration
-@using Orchard.Utility.Extensions;
 @using Orchard.ContentPicker.Settings;
 
 @{
@@ -9,107 +7,15 @@
     Style.Include("content-picker-admin.css");
     
     var settings = Model.Field.PartFieldDefinition.Settings.GetModel<ContentPickerFieldSettings>();
-    var baseUrl = Url.Content("~/") + WorkContext.Resolve<ShellSettings>().RequestUrlPrefix;
 }
-
-<fieldset>
-    <label @if(settings.Required) { <text>class="required"</text> }>@Model.Field.DisplayName</label>
-    <div id="save-message-@Html.FieldIdFor(m => m.Field.Ids)" class="message message-Warning content-picker-message">@T("You need to save your changes.")</div>
-    <table id="content-picker-@Html.FieldIdFor(m => m.Field.Ids)" class="items content-picker" summary="@Model.Field.DisplayName">
-        <colgroup>
-            <col id="Col1" style="width:20px" />
-            <col id="Col2" />
-            <col id="Col3" />
-        </colgroup>
-        <thead>
-            <tr>
-                <th scope="col" >&nbsp;&darr;</th>
-                <th scope="col">@T("Content Item")</th>
-                <th scope="col">&nbsp;</th>
-            </tr>
-        </thead>
-        <tbody>
-            @foreach (var contentItem in Model.ContentItems) {
-                <tr>
-                    <td>&nbsp;</td>
-                    <td>
-                        <span data-id="@contentItem.Id" data-fieldid="@Html.FieldIdFor(m => m.Field.Ids)" class="content-picker-item">@Html.ItemEditLink(contentItem)</span>
-                    </td>
-                    <td>
-                        <span data-id="@contentItem.Id" class="content-picker-remove button grey">@T("Remove")</span>
-                    </td>
-                </tr>
-            }
-        </tbody>
-    </table>
-
-    <span id="btn-@Html.FieldIdFor(m => m.Field.Ids)" class="button">@T("Add")</span>
-    
-    @Html.HiddenFor(m => m.SelectedIds)
-    <span class="hint">@settings.Hint</span>
-</fieldset>
-
-@using (Script.Foot()) {
-<script type="text/javascript">
-//<![CDATA[
-
-    (function($) {
-
-        var required = @(settings.Required ? "true" : "false");
-        var multiple = @(settings.Multiple ? "true" : "false");
-        var addButton = $('#btn-@Html.FieldIdFor(m => m.Field.Ids)');
-        var @Html.FieldIdFor(m => m.Field.Ids)_Template = '<tr><td>&nbsp;</td><td><span data-id="{contentItemId}" data-fieldid="@Html.FieldIdFor(m => m.Field.Ids)" class="content-picker-item">{edit-link}</span></td><td><span data-id="{contentItemId}" class="content-picker-remove button grey">@T("Remove")</span></td></tr>';
-        
-        var refreshIds = function() {
-            var id = $('#@Html.FieldIdFor(m => m.SelectedIds)');
-            id.val('');
-            $("span[data-fieldid = @Html.FieldIdFor(m => m.Field.Ids)]").each(function() {
-                id.val(id.val() + "," + $(this).attr("data-id"));
-            });
-
-            var itemsCount = $("span[data-fieldid = @Html.FieldIdFor(m => m.Field.Ids)]").length;
-            
-            if(!multiple && itemsCount > 0) {
-                addButton.hide();    
-            }
-            else {
-                addButton.show();
-            }
-        };
-
-        refreshIds();
-        
-        addButton.click(function() {
-            addButton.trigger("orchard-admin-contentpicker-open", {
-                callback: function(data) {
-                    var template = @Html.FieldIdFor(m => m.Field.Ids)_Template.replace( /\{contentItemId\}/g , data.id).replace( /\{edit-link\}/g , data.editLink);
-                    var content = $(template);
-                    $('#content-picker-@Html.FieldIdFor(m => m.Field.Ids) tbody').append(content);
-
-                    refreshIds();
-                    $('#save-message-@Html.FieldIdFor(m => m.Field.Ids)').show();
-                },
-                baseUrl: '@baseUrl',
-                part: '@HttpUtility.JavaScriptStringEncode(Model.Part.PartDefinition.Name)',
-                field: '@HttpUtility.JavaScriptStringEncode(Model.Field.PartFieldDefinition.Name)'
-            });
-        });
-
-        $(document).on("click",'#content-picker-@Html.FieldIdFor(m => m.Field.Ids) .content-picker-remove',function() {
-            $(this).closest('tr').remove();
-            refreshIds();
-            $('#save-message-@Html.FieldIdFor(m => m.Field.Ids)').show();
-        });
-            
-        $("#content-picker-@Html.FieldIdFor(m => m.Field.Ids) tbody").sortable({
-            handle: 'td:first',
-            stop: function(event, ui) {
-                refreshIds();
-                $('#save-message-@Html.FieldIdFor(m => m.Field.Ids)').show();
-            }
-        }).disableSelection();
-        
-    })(jQuery);
-//]]>
-</script>
-}
+@Display.ContentPicker_Edit(
+    Required: settings.Required,
+    Multiple: settings.Multiple,
+    DisplayName: Model.Field.DisplayName,
+    IdsFieldId: Html.FieldIdFor(m => m.Field.Ids),
+    SelectedItemsFieldName: Html.FieldNameFor(m => m.SelectedIds),
+    ContentItems: Model.ContentItems,
+    Hint: settings.Hint,
+    PartName: Model.Part.PartDefinition.Name,
+    FieldName: Model.Field.PartFieldDefinition.Name
+)