orchardcms - 如何为 Orchard 布局创建自定义容器元素？

Question

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

元素/过程.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; }
    }
}

驱动程序/ProcedureElementDriver.cs

public class ProcedureElementDriver : ElementDriver<Procedure> {}

服务/程序模型图

public class ProcedureModelMap : LayoutModelMapBase<Procedure> {}

视图/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元素，我可以从工具箱拖到我的布局上，但它没有用我的模板呈现，即使我可以通过这种方式覆盖其他布局元素的模板，我仍然无法将任何子元素拖入它。我曾希望简单地从继承Container就可以做到这一点。

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

score 4 · Accepted Answer

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

脚本/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
        };
    }
]);

脚本/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);

资源清单.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()指向模块/主题中的 /Scripts 文件夹。

处理程序/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只包含我的 Containable 或者我的 Containable只允许它自己被我的 Container 包含。似乎调整LayoutEditor.Container.call(this, ["Grid", "Content"], children);就足以实现这一目标，但事实并非如此。仍然欢迎更多帮助。

score 1 · Accepted Answer

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

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

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

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

公共覆盖字符串类别=>“容器”；
转到您的 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”类出现在下面的位置。我想删除在我的容器中放置网格和其他布局元素的能力，所以我也不得不改变它们的情况。

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 文件中。

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

我希望对你有用还为时不晚。

orchardcms - 如何为 Orchard 布局创建自定义容器元素？

2 回答 2

Related

Reference