如何为 Orchard Layout 创建自定义容器元素？

Question

我正在使用 Orchard 1.9.3 并遵循了一些关于如何在 Orchard 中创建自定义普通元素的教程。我找不到任何关于创建容器元素的具体内容，所以我在源代码中挖掘了一下，这就是我目前所拥有的：

Elements/Procedure.cs

public class Procedure : Container
{
    public override string Category
    {
        get { return "Content"; }
    }

    public override string ToolboxIcon
    {
        get { return "\uf0cb"; }
    }

    public override LocalizedString Description
    {
        get { return T("A collection of steps."); }
    }

    public override bool HasEditor
    {
        get { return false; }
    }
}

Drivers/ProcedureElementDriver.cs

public class ProcedureElementDriver : ElementDriver<Procedure> {}

Services/ProcedureModelMap

public class ProcedureModelMap : LayoutModelMapBase<Procedure> {}

Views/LayoutEditor.Template.Procedure

@using Orchard.Layouts.ViewModels;
<div class="layout-element-wrapper" ng-class="{'layout-container-empty': getShowChildrenPlaceholder()}">
<ul class="layout-panel layout-panel-main">
    <li class="layout-panel-item layout-panel-label">Procedure</li>
    @Display()
    @Display(New.LayoutEditor_Template_Properties(ElementTypeName: "procedure"))
    <li class="layout-panel-item layout-panel-action" title="@T("Delete {{element.contentTypeLabel.toLowerCase()}} (Del)")" ng-click="delete(element)"><i class="fa fa-remove"></i></li>
    <li class="layout-panel-item layout-panel-action" title="@T("Move {{element.contentTypeLabel.toLowerCase()}} up (Ctrl+Up)")" ng-click="element.moveUp()" ng-class="{disabled: !element.canMoveUp()}"><i class="fa fa-chevron-up"></i></li>
    <li class="layout-panel-item layout-panel-action" title="@T("Move {{element.contentTypeLabel.toLowerCase()}} down (Ctrl+Down)")" ng-click="element.moveDown()" ng-class="{disabled: !element.canMoveDown()}"><i class="fa fa-chevron-down"></i></li>
</ul>
<div class="layout-container-children-placeholder">
    @T("Drag a steps here.")
</div>
@Display(New.LayoutEditor_Template_Children())

所有这些或多或少都是从 Row 元素复制而来的。我现在有一个 Procedure 元素，我可以将它从工具箱拖到我的布局上，但它没有使用我的模板呈现，即使我可以通过这种方式覆盖其他布局元素的模板，但我仍然可以'不要将任何 children 拖入其中。我曾希望简单地从 Container 继承就能使这成为可能。

我基本上只是想制作一个更具限制性的行和列对，以将一些自定义样式应用于任意内容列表。我如何告诉 Orchard 一个过程只能包含在一个列中并且它应该接受 Steps（或其他一些元素）作为 children？

Answer 1

我通过查看 Mainbit's layout module 了解了如何制作容器和可包含元素。容器元素需要一些额外的 Angular 代码才能使它们工作。 我仍然需要帮助来弄清楚如何限制可以包含哪些元素！

Scripts/LayoutEditor.js

我必须使用指令扩展 LayoutEditor 模块以保存与我的元素相关的所有 Angular 内容：

angular
.module("LayoutEditor")
.directive("orcLayoutProcedure", ["$compile", "scopeConfigurator", "environment",
    function ($compile, scopeConfigurator, environment) {
        return {
            restrict: "E",
            scope: { element: "=" },
            controller: ["$scope", "$element",
                function ($scope, $element) {
                    scopeConfigurator.configureForElement($scope, $element);
                    scopeConfigurator.configureForContainer($scope, $element);
                    $scope.sortableOptions["axis"] = "y";
                }
            ],
            templateUrl: environment.templateUrl("Procedure"),
            replace: true
        };
    }
]);

Scripts/Models.js

以及供 Orchard 的 LayoutEditor 使用的 Provider：

var LayoutEditor;
(function (LayoutEditor) {

LayoutEditor.Procedure = function (data, htmlId, htmlClass, htmlStyle, isTemplated, children) {
    LayoutEditor.Element.call(this, "Procedure", data, htmlId, htmlClass, htmlStyle, isTemplated);
    LayoutEditor.Container.call(this, ["Grid", "Content"], children);

    //this.isContainable = true;
    this.dropTargetClass = "layout-common-holder";

    this.toObject = function () {
        var result = this.elementToObject();
        result.children = this.childrenToObject();
        return result;
    };
};

LayoutEditor.Procedure.from = function (value) {
    var result = new LayoutEditor.Procedure(
        value.data,
        value.htmlId,
        value.htmlClass,
        value.htmlStyle,
        value.isTemplated,
        LayoutEditor.childrenFrom(value.children));
    result.toolboxIcon = value.toolboxIcon;
    result.toolboxLabel = value.toolboxLabel;
    result.toolboxDescription = value.toolboxDescription;
    return result;
};

LayoutEditor.registerFactory("Procedure", function (value) {
    return LayoutEditor.Procedure.from(value);
});

})(LayoutEditor || (LayoutEditor = {}));

这是告诉元素它可以包含什么的行：

LayoutEditor.Container.call(this, ["Grid", "Content"], children);

ResourceManifest.cs

然后我制作了一个资源清单，以便轻松地在 Orchard 的模块中提供这些资源。

public class ResourceManifest : IResourceManifestProvider
{
    public void BuildManifests(ResourceManifestBuilder builder)
    {
        var manifest = builder.Add();
        manifest.DefineScript("MyModule.Models").SetUrl("Models.js").SetDependencies("Layouts.LayoutEditor");
        manifest.DefineScript("MyModule.LayoutEditors").SetUrl("LayoutEditor.js").SetDependencies("Layouts.LayoutEditor", "MyModule.Models");
    }
}

默认情况下，.SetUrl() 指向 module/theme 中的 /Scripts 文件夹。

Handlers/LayoutEditorShapeEventHandler.cs

最后，我添加了这个处理程序以在使用布局编辑器的管理页面上加载我的脚本。

public class LayoutEditorShapeEventHandler : IShapeTableProvider
{
    private readonly Work<IResourceManager> _resourceManager;
    public LayoutEditorShapeEventHandler(Work<IResourceManager> resourceManager)
    {
        _resourceManager = resourceManager;
    }

    public void Discover(ShapeTableBuilder builder)
    {
        builder.Describe("EditorTemplate").OnDisplaying(context =>
        {
            if (context.Shape.TemplateName != "Parts.Layout")
                return;

            _resourceManager.Value.Require("script", "MyModule.LayoutEditors");
        });
    }
}

希望这对以后的人有所帮助。但是，我仍然不知道如何使我的 Container only 包含我的 Containable 或者我的 Containable 将 only 允许自己包含在我的容器中。似乎调整 LayoutEditor.Container.call(this, ["Grid", "Content"], children); 就足以实现这一目标，但事实并非如此。仍然欢迎更多帮助。

Answer 2

首先感谢您的回答。我发现它真的很有帮助。尽管如此，我最终还是遇到了问题，无法限制我的容器元素的放置位置以及可以放置在其中的内容。

我注意到这些限制是根据元素的类别制定的。 Canvas、网格、行、列或内容。 Orchard 遍历所有类别，并运行编写一些代码来了解该类别中的项目可以放置在哪里。 Orchard 布局类别之外的任何内容都是内容。如果你对各种自定义元素有很多不同的自定义分类，它们在Orchard眼中仍然是Contents。所以...对于您拥有的每个类别，Orchard 都会运行一些代码并说明该类别中的每个项目实际上都是一个内容，并且它们最终都具有相同的放置规则。

我不希望将我的任何自定义容器放置在另一个自定义容器中，并且我不希望将内容以外的任何内容放置在我的自定义容器中，因此我最终执行了以下步骤：

转到您的 Procedure.cs 文件并更改您的 class 类别。

public 覆盖字符串类别 => "Container";
转到您的 Models.js 文件并更改 "dropTargetClass" 属性中的值。

this.dropTargetClass = 'layout-common-holder layout-customcontainer';
转到 LayoutEditor.Template.ToolboxGroup.cshtml 文件（您可以在主题中创建自己的文件）并更改 ul 元素中 "ui-sortable" 属性的值。

ui-sortable="category.name == 'Container' ? $parent.getSortableOptions(category.name) : $parent.getSortableOptions('Content')"

转到 Toolbox.js 文件并编辑 "getSortableOptions" 函数，使其包含新创建的 "Container" 类别的案例。注意下面出现 "layout-customcontainer" class 的位置。我想删除在我的容器中放置网格和其他布局元素的功能，所以我也必须更改它们的大小写。

switch (type) {
    case "Container":
        parentClasses = [".layout-column", ".layout-common-holder:not(.layout-customcontainer)"];
        placeholderClasses = "layout-element layout-container ui-sortable-placeholder";
        break;
    case "Grid":
        parentClasses = [".layout-canvas", ".layout-column", ".layout-common-holder:not(.layout-customcontainer)"];
        placeholderClasses = "layout-element layout-container layout-grid ui-sortable-placeholder";
        break;
    case "Row":
        parentClasses = [".layout-grid"];
        placeholderClasses = "layout-element layout-container layout-row row ui-sortable-placeholder";
        break;
    case "Column":
        parentClasses = [".layout-row:not(.layout-row-full)"];
        placeholderClasses = "layout-element layout-container layout-column ui-sortable-placeholder";
        floating = true; // To ensure a smooth horizontal-list reordering. https://github.com/angular-ui/ui-sortable#floating
        break;
    case "Content":
        parentClasses = [".layout-canvas", ".layout-column", ".layout-common-holder"];
        placeholderClasses = "layout-element layout-content ui-sortable-placeholder";
        break;
    case "Canvas":
        parentClasses = [".layout-canvas", ".layout-column", ".layout-common-holder:not(.layout-container)"];
        placeholderClasses = "layout-element layout-container layout-grid ui-sortable-placeholder";
        break;}

运行 Gulpfile.js 任务，因此您的更改放在 Orchard 的 LayoutEditor.js 文件中。

现在，您有一个带有一些自定义限制的容器元素。

希望对你有用还不晚

如何为 Orchard Layout 创建自定义容器元素？

How to create a custom container element for Orchard Layout?

orchardcms

orchardcms-1.9