Add a fieldset element

src/Orchard.Web/Modules/Orchard.DynamicForms/Drivers/FieldsetElementDriver.cs

@@ -0,0 +1,7 @@
+using Orchard.DynamicForms.Elements;
+using Orchard.Layouts.Framework.Drivers;
+
+namespace Orchard.DynamicForms.Drivers {
+    public class FieldsetElementDriver : ElementDriver<Fieldset> {
+    }
+}

src/Orchard.Web/Modules/Orchard.DynamicForms/Elements/Fieldset.cs

@@ -0,0 +1,32 @@
+using Orchard.Layouts.Helpers;
+using Orchard.Layouts.Elements;
+
+namespace Orchard.DynamicForms.Elements {
+    public class Fieldset : Container {
+        public override string Category {
+            get { return "Forms"; }
+        }
+
+        public string Legend {
+            get { return this.Retrieve(f => f.Legend); }
+            set { this.Store(f => f.Legend, value); }
+        }
+
+        public Form Form {
+            get {
+                var parent = Container;
+
+                while (parent != null) {
+                    var form = parent as Form;
+
+                    if (form != null)
+                        return form;
+
+                    parent = parent.Container;
+                }
+
+                return null;
+            }
+        }
+    }
+}

src/Orchard.Web/Modules/Orchard.DynamicForms/Orchard.DynamicForms.csproj

@@ -84,7 +84,9 @@
     <Content Include="Scripts\Forms.min.js">
       <DependentUpon>Forms.js</DependentUpon>
     </Content>
+    <Content Include="Scripts\Layouts\Directives\Fieldset.js" />
     <Content Include="Scripts\Layouts\Directives\Form.js" />
+    <Content Include="Scripts\Layouts\Models\Fieldset.js" />
     <Content Include="Scripts\Layouts\Models\Form.js" />
     <Content Include="Scripts\Lib\jquery.validate.js" />
     <Content Include="Scripts\Lib\jquery.validate.min.js">
@@ -164,6 +166,8 @@
     <Compile Include="Bindings\EnumerationFieldBindings.cs" />
     <Compile Include="Bindings\InputFieldBindings.cs" />
     <Compile Include="Bindings\TaxonomyFieldBindings.cs" />
+    <Compile Include="Drivers\FieldsetElementDriver.cs" />
+    <Compile Include="Elements\Fieldset.cs" />
     <Compile Include="Forms\AddModelErrorForm.cs" />
     <Compile Include="Forms\SelectDynamicForms.cs" />
     <Compile Include="Bindings\TextFieldBindings.cs" />
@@ -189,6 +193,7 @@
     <Compile Include="Handlers\LayoutEditorShapeEventHandler.cs" />
     <Compile Include="Handlers\WorkflowValidatorCoordinator.cs" />
     <Compile Include="ResourceManifest.cs" />
+    <Compile Include="Services\FieldsetModelMap.cs" />
     <Compile Include="Services\FormModelMap.cs" />
     <Compile Include="Services\Models\FormSubmissionTokenContext.cs" />
     <Compile Include="Handlers\ValidatorsCoordinator.cs" />
@@ -504,6 +509,12 @@
   <ItemGroup>
     <Content Include="Views\Elements\Query-SelectList.Design.cshtml" />
   </ItemGroup>
+  <ItemGroup>
+    <Content Include="Views\Elements\Fieldset.cshtml" />
+  </ItemGroup>
+  <ItemGroup>
+    <Content Include="Views\LayoutEditor.Template.Fieldset.cshtml" />
+  </ItemGroup>
   <PropertyGroup>
     <VisualStudioVersion Condition="'$(VisualStudioVersion)' == ''">10.0</VisualStudioVersion>
     <VSToolsPath Condition="'$(VSToolsPath)' == ''">$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)</VSToolsPath>

src/Orchard.Web/Modules/Orchard.DynamicForms/Scripts/Forms.js

@@ -102,3 +102,93 @@ var LayoutEditor;
     LayoutEditor.registerFactory("Form", function(value) { return LayoutEditor.Form.from(value); });
 
 })(jQuery, LayoutEditor || (LayoutEditor = {}));
+angular
+    .module("LayoutEditor")
+    .directive("orcLayoutFieldset", ["$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";
+                        $scope.edit = function () {
+                            $scope.$root.editElement($scope.element).then(function (args) {
+                                if (args.cancel)
+                                    return;
+                                $scope.element.data = decodeURIComponent(args.element.data);
+                                $scope.element.legend = args.elementEditorModel.legend;
+                                $scope.$apply();
+                            });
+                        };
+                    }
+                ],
+                templateUrl: environment.templateUrl("Fieldset"),
+                replace: true
+            };
+        }
+    ]);
+var LayoutEditor;
+(function ($, LayoutEditor) {
+
+    LayoutEditor.Fieldset = function (data, htmlId, htmlClass, htmlStyle, isTemplated, legend, contentType, contentTypeLabel, contentTypeClass, hasEditor, children) {
+        LayoutEditor.Element.call(this, "Fieldset", data, htmlId, htmlClass, htmlStyle, isTemplated);
+        LayoutEditor.Container.call(this, ["Grid", "Content"], children);
+
+        var self = this;
+        this.isContainable = true;
+        this.dropTargetClass = "layout-common-holder";
+        this.contentType = contentType;
+        this.contentTypeLabel = contentTypeLabel;
+        this.contentTypeClass = contentTypeClass;
+        this.legend = legend || "";
+        this.hasEditor = true;
+
+        this.toObject = function () {
+            var result = this.elementToObject();
+            result.legend = this.legend;
+            result.children = this.childrenToObject();
+
+            return result;
+        };
+
+        var getEditorObject = this.getEditorObject;
+        this.getEditorObject = function() {
+            var dto = getEditorObject();
+            return $.extend(dto, {
+                Legend: this.legend
+            });
+        }
+
+        this.setChildren = function (children) {
+            this.children = children;
+            _(this.children).each(function (child) {
+                child.parent = self;
+            });
+        };
+
+        this.setChildren(children);
+    };
+
+    LayoutEditor.Fieldset.from = function (value) {
+        return new LayoutEditor.Fieldset(
+            value.data,
+            value.htmlId,
+            value.htmlClass,
+            value.htmlStyle,
+            value.isTemplated,
+            value.legend,
+            value.contentType,
+            value.contentTypeLabel,
+            value.contentTypeClass,
+            value.hasEditor,
+            LayoutEditor.childrenFrom(value.children));
+    };
+
+    LayoutEditor.registerFactory("Fieldset", function(value) {
+        return LayoutEditor.Fieldset.from(value);
+    });
+
+})(jQuery, LayoutEditor || (LayoutEditor = {}));

src/Orchard.Web/Modules/Orchard.DynamicForms/Scripts/Forms.js.bundle

@@ -12,5 +12,7 @@
   <files>
     <file>/Scripts/Layouts/Directives/Form.js</file>
     <file>/Scripts/Layouts/Models/Form.js</file>
+    <file>/Scripts/Layouts/Directives/Fieldset.js</file>
+    <file>/Scripts/Layouts/Models/Fieldset.js</file>
   </files>
 </bundle>

src/Orchard.Web/Modules/Orchard.DynamicForms/Scripts/Forms.min.js

@@ -1 +1 @@
-angular.module("LayoutEditor").directive("orcLayoutForm",["$compile","scopeConfigurator","environment",function(n,t,i){return{restrict:"E",scope:{element:"="},controller:["$scope","$element",function(n,i){t.configureForElement(n,i);t.configureForContainer(n,i);n.sortableOptions.axis="y";n.edit=function(){n.$root.editElement(n.element).then(function(t){t.cancel||(n.element.data=decodeURIComponent(t.element.data),n.element.name=t.elementEditorModel.name,n.element.formBindingContentType=t.elementEditorModel.formBindingContentType,n.$apply())})}}],templateUrl:i.templateUrl("Form"),replace:!0}}]);var LayoutEditor;(function(n,t){t.Form=function(i,r,u,f,e,o,s,h,c,l,a,v){var y,p;t.Element.call(this,"Form",i,r,u,f,e);t.Container.call(this,["Grid","Content"],v);y=this;this.isContainable=!0;this.dropTargetClass="layout-common-holder";this.contentType=h;this.contentTypeLabel=c;this.contentTypeClass=l;this.name=o||"Untitled";this.formBindingContentType=s;this.hasEditor=a;this.toObject=function(){var n=this.elementToObject();return n.name=this.name,n.formBindingContentType=this.formBindingContentType,n.children=this.childrenToObject(),n};p=this.getEditorObject;this.getEditorObject=function(){var t=p();return n.extend(t,{FormName:this.name,FormBindingContentType:this.formBindingContentType})};this.setChildren=function(n){this.children=n;_(this.children).each(function(n){n.parent=y;y.linkChild(n)})};this.linkChild=function(t){var i=t.getEditorObject;t.getEditorObject=function(){var t=i();return n.extend(t,{FormBindingContentType:y.formBindingContentType})}};this.setChildren(v)};t.Form.from=function(n){return new t.Form(n.data,n.htmlId,n.htmlClass,n.htmlStyle,n.isTemplated,n.name,n.formBindingContentType,n.contentType,n.contentTypeLabel,n.contentTypeClass,n.hasEditor,t.childrenFrom(n.children))};t.registerFactory("Form",function(n){return t.Form.from(n)})})(jQuery,LayoutEditor||(LayoutEditor={}));
+var LayoutEditor;angular.module("LayoutEditor").directive("orcLayoutForm",["$compile","scopeConfigurator","environment",function(n,t,i){return{restrict:"E",scope:{element:"="},controller:["$scope","$element",function(n,i){t.configureForElement(n,i);t.configureForContainer(n,i);n.sortableOptions.axis="y";n.edit=function(){n.$root.editElement(n.element).then(function(t){t.cancel||(n.element.data=decodeURIComponent(t.element.data),n.element.name=t.elementEditorModel.name,n.element.formBindingContentType=t.elementEditorModel.formBindingContentType,n.$apply())})}}],templateUrl:i.templateUrl("Form"),replace:!0}}]),function(n,t){t.Form=function(i,r,u,f,e,o,s,h,c,l,a,v){var y,p;t.Element.call(this,"Form",i,r,u,f,e);t.Container.call(this,["Grid","Content"],v);y=this;this.isContainable=!0;this.dropTargetClass="layout-common-holder";this.contentType=h;this.contentTypeLabel=c;this.contentTypeClass=l;this.name=o||"Untitled";this.formBindingContentType=s;this.hasEditor=a;this.toObject=function(){var n=this.elementToObject();return n.name=this.name,n.formBindingContentType=this.formBindingContentType,n.children=this.childrenToObject(),n};p=this.getEditorObject;this.getEditorObject=function(){var t=p();return n.extend(t,{FormName:this.name,FormBindingContentType:this.formBindingContentType})};this.setChildren=function(n){this.children=n;_(this.children).each(function(n){n.parent=y;y.linkChild(n)})};this.linkChild=function(t){var i=t.getEditorObject;t.getEditorObject=function(){var t=i();return n.extend(t,{FormBindingContentType:y.formBindingContentType})}};this.setChildren(v)};t.Form.from=function(n){return new t.Form(n.data,n.htmlId,n.htmlClass,n.htmlStyle,n.isTemplated,n.name,n.formBindingContentType,n.contentType,n.contentTypeLabel,n.contentTypeClass,n.hasEditor,t.childrenFrom(n.children))};t.registerFactory("Form",function(n){return t.Form.from(n)})}(jQuery,LayoutEditor||(LayoutEditor={}));angular.module("LayoutEditor").directive("orcLayoutFieldset",["$compile","scopeConfigurator","environment",function(n,t,i){return{restrict:"E",scope:{element:"="},controller:["$scope","$element",function(n,i){t.configureForElement(n,i);t.configureForContainer(n,i);n.sortableOptions.axis="y";n.edit=function(){n.$root.editElement(n.element).then(function(t){t.cancel||(n.element.data=decodeURIComponent(t.element.data),n.element.legend=t.elementEditorModel.legend,n.$apply())})}}],templateUrl:i.templateUrl("Fieldset"),replace:!0}}]),function(n,t){t.Fieldset=function(i,r,u,f,e,o,s,h,c,l,a){var v,y;t.Element.call(this,"Fieldset",i,r,u,f,e);t.Container.call(this,["Grid","Content"],a);v=this;this.isContainable=!0;this.dropTargetClass="layout-common-holder";this.contentType=s;this.contentTypeLabel=h;this.contentTypeClass=c;this.legend=o||"";this.hasEditor=!0;this.toObject=function(){var n=this.elementToObject();return n.legend=this.legend,n.children=this.childrenToObject(),n};y=this.getEditorObject;this.getEditorObject=function(){var t=y();return n.extend(t,{Legend:this.legend})};this.setChildren=function(n){this.children=n;_(this.children).each(function(n){n.parent=v})};this.setChildren(a)};t.Fieldset.from=function(n){return new t.Fieldset(n.data,n.htmlId,n.htmlClass,n.htmlStyle,n.isTemplated,n.legend,n.contentType,n.contentTypeLabel,n.contentTypeClass,n.hasEditor,t.childrenFrom(n.children))};t.registerFactory("Fieldset",function(n){return t.Fieldset.from(n)})}(jQuery,LayoutEditor||(LayoutEditor={}));

src/Orchard.Web/Modules/Orchard.DynamicForms/Scripts/Layouts/Directives/Fieldset.js

@@ -0,0 +1,28 @@
+angular
+    .module("LayoutEditor")
+    .directive("orcLayoutFieldset", ["$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";
+                        $scope.edit = function () {
+                            $scope.$root.editElement($scope.element).then(function (args) {
+                                if (args.cancel)
+                                    return;
+                                $scope.element.data = decodeURIComponent(args.element.data);
+                                $scope.element.legend = args.elementEditorModel.legend;
+                                $scope.$apply();
+                            });
+                        };
+                    }
+                ],
+                templateUrl: environment.templateUrl("Fieldset"),
+                replace: true
+            };
+        }
+    ]);

src/Orchard.Web/Modules/Orchard.DynamicForms/Scripts/Layouts/Models/Fieldset.js

@@ -0,0 +1,62 @@
+var LayoutEditor;
+(function ($, LayoutEditor) {
+
+    LayoutEditor.Fieldset = function (data, htmlId, htmlClass, htmlStyle, isTemplated, legend, contentType, contentTypeLabel, contentTypeClass, hasEditor, children) {
+        LayoutEditor.Element.call(this, "Fieldset", data, htmlId, htmlClass, htmlStyle, isTemplated);
+        LayoutEditor.Container.call(this, ["Grid", "Content"], children);
+
+        var self = this;
+        this.isContainable = true;
+        this.dropTargetClass = "layout-common-holder";
+        this.contentType = contentType;
+        this.contentTypeLabel = contentTypeLabel;
+        this.contentTypeClass = contentTypeClass;
+        this.legend = legend || "";
+        this.hasEditor = true;
+
+        this.toObject = function () {
+            var result = this.elementToObject();
+            result.legend = this.legend;
+            result.children = this.childrenToObject();
+
+            return result;
+        };
+
+        var getEditorObject = this.getEditorObject;
+        this.getEditorObject = function() {
+            var dto = getEditorObject();
+            return $.extend(dto, {
+                Legend: this.legend
+            });
+        }
+
+        this.setChildren = function (children) {
+            this.children = children;
+            _(this.children).each(function (child) {
+                child.parent = self;
+            });
+        };
+
+        this.setChildren(children);
+    };
+
+    LayoutEditor.Fieldset.from = function (value) {
+        return new LayoutEditor.Fieldset(
+            value.data,
+            value.htmlId,
+            value.htmlClass,
+            value.htmlStyle,
+            value.isTemplated,
+            value.legend,
+            value.contentType,
+            value.contentTypeLabel,
+            value.contentTypeClass,
+            value.hasEditor,
+            LayoutEditor.childrenFrom(value.children));
+    };
+
+    LayoutEditor.registerFactory("Fieldset", function(value) {
+        return LayoutEditor.Fieldset.from(value);
+    });
+
+})(jQuery, LayoutEditor || (LayoutEditor = {}));

src/Orchard.Web/Modules/Orchard.DynamicForms/Services/FieldsetModelMap.cs

@@ -0,0 +1,17 @@
+using Newtonsoft.Json.Linq;
+using Orchard.DynamicForms.Elements;
+using Orchard.Layouts.Services;
+
+namespace Orchard.DynamicForms.Services {
+    public class FieldsetModelMap : LayoutModelMapBase<Fieldset> {
+        protected override void ToElement(Fieldset element, JToken node) {
+            base.ToElement(element, node);
+            element.Legend = (string) node["legend"];
+        }
+
+        public override void FromElement(Fieldset element, DescribeElementsContext describeContext, JToken node) {
+            base.FromElement(element, describeContext, node);
+            node["legend"] = element.Legend;
+        }
+    }
+}

src/Orchard.Web/Modules/Orchard.DynamicForms/Views/Elements/Fieldset.cshtml

@@ -0,0 +1,11 @@
+@using Orchard.DynamicForms.Elements
+@using Orchard.Layouts.Helpers
+@{
+    var element = (Fieldset) Model.Element;
+    var tagBuilder = TagBuilderExtensions.CreateElementTagBuilder(Model, "fieldset");
+    var legend = element.Legend;
+}
+@tagBuilder.StartElement
+<legend>@legend</legend>
+    @DisplayChildren(Model)
+@tagBuilder.EndElement

src/Orchard.Web/Modules/Orchard.DynamicForms/Views/LayoutEditor.Template.Fieldset.cshtml

@@ -0,0 +1,20 @@
+@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">Fieldset ({{element.legend}})</li>
+        @{
+            var additionalItems = new[] {
+                new LayoutEditorPropertiesItem() {
+                    Label = "Legend:",
+                    Model = "element.legend"
+                }
+            };
+        }
+        @Display(New.LayoutEditor_Template_Properties(ElementTypeName: "fieldset", Items: additionalItems))
+        <li class="layout-panel-item layout-panel-action" title="@T("Delete fieldset (Del)")" ng-click="delete(element)"><i class="fa fa-remove"></i></li>
+    </ul>
+    <div class="layout-container-children-placeholder">
+        Drag an element from the toolbox and drop it here to add content.
+    </div>
+    @Display(New.LayoutEditor_Template_Children())
+</div>