mirror of
https://github.com/OrchardCMS/Orchard.git
synced 2025-10-15 19:54:57 +08:00
Add a fieldset element
This commit is contained in:
Bertrand Le Roy
@@ -0,0 +1,7 @@
|
||||
using Orchard.DynamicForms.Elements;
|
||||
using Orchard.Layouts.Framework.Drivers;
|
||||
|
||||
namespace Orchard.DynamicForms.Drivers {
|
||||
public class FieldsetElementDriver : ElementDriver<Fieldset> {
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -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 = {}));
|
||||
|
||||
@@ -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>
|
||||
@@ -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={}));
|
||||
@@ -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
|
||||
};
|
||||
}
|
||||
]);
|
||||
@@ -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 = {}));
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user