Updated Layouts to simplify custom container elements.

These changes simplifies the requirements for implementing custom container elements by minimizing the amount of code necessary to tie things together.

src/Orchard.Web/Modules/Orchard.Layouts/Assets/JavaScript/LayoutEditor/Directives/Content.js

@@ -8,6 +8,7 @@
                 controller: ["$scope", "$element",
                     function ($scope, $element) {
                         scopeConfigurator.configureForElement($scope, $element);
+                        if ($scope.element.hasEditor) {
                             $scope.edit = function () {
                                 $scope.$root.editElement($scope.element).then(function (args) {
                                     $scope.$apply(function () {
@@ -19,6 +20,7 @@
                                     });
                                 });
                             };
+                        }
 
                         // Overwrite the setHtml function so that we can use the $sce service to trust the html (and not have the html binding strip certain tags).
                         $scope.element.setHtml = function (html) {

src/Orchard.Web/Modules/Orchard.Layouts/Assets/JavaScript/LayoutEditor/Services/ScopeConfigurator.js

@@ -150,6 +150,19 @@
                     $scope.delete = function (element) {
                         element.delete();
                     }
+
+                    if ($scope.element.hasEditor) {
+                        $scope.edit = function () {
+                            $scope.$root.editElement($scope.element).then(function (args) {
+                                $scope.$apply(function () {
+                                    if (args.cancel)
+                                        return;
+
+                                    $scope.element.data = args.element.data;
+                                });
+                            });
+                        };
+                    }
                 },
 
                 configureForContainer: function ($scope, $element) {

src/Orchard.Web/Modules/Orchard.Layouts/Assets/JavaScript/Models/Container.js

@@ -6,6 +6,7 @@
         this.allowedChildTypes = allowedChildTypes;
         this.children = children;
         this.isContainer = true;
+        this.containerTemplateStyles = {};
 
         var self = this;
 
@@ -139,6 +140,17 @@
             else if (!!this.parent)
                 this.parent.pasteChild(child);
         }
+
+        this.getContainerTemplateStyles = function () {
+            var styles = this.containerTemplateStyles || {};
+            var css = "";
+
+            for (var property in styles) {
+                css += property + ":" + styles[property] + ";";
+            }
+
+            return css;
+        }
     };
 
 })(LayoutEditor || (LayoutEditor = {}));

src/Orchard.Web/Modules/Orchard.Layouts/Assets/JavaScript/Models/Element.js

@@ -13,6 +13,7 @@
         this.isTemplated = isTemplated;
         this.rule = rule;
 
+        this.templateStyles = {};
         this.editor = null;
         this.parent = null;
         this.setIsFocusedEventHandlers = [];
@@ -191,6 +192,17 @@
             if (!!this.parent)
                 this.parent.paste(clipboardData);
         };
+
+        this.getTemplateStyles = function () {
+            var styles = this.templateStyles || {};
+            var css = "";
+
+            for (var property in styles) {
+                css += property + ":" + styles[property] + ";";
+            }
+
+            return css;
+        }
     };
 
 })(LayoutEditor || (LayoutEditor = {}));

src/Orchard.Web/Modules/Orchard.Layouts/Services/DefaultModelMaps.cs

@@ -35,8 +35,13 @@ namespace Orchard.Layouts.Services {
             node["htmlId"] = element.HtmlId;
             node["htmlClass"] = element.HtmlClass;
             node["htmlStyle"] = element.HtmlStyle;
-            node["isTemplated"] = element.IsTemplated;
             node["rule"] = element.Rule;
+            node["isTemplated"] = element.IsTemplated;
+            node["hasEditor"] = element.Descriptor.EnableEditorDialog;
+            node["contentType"] = element.Descriptor.TypeName;
+            node["contentTypeLabel"] = element.Descriptor.DisplayText.Text;
+            node["contentTypeClass"] = element.DisplayText.Text.HtmlClassify();
+            node["contentTypeDescription"] = element.Descriptor.Description.Text;
         }
 
         protected virtual void ToElement(T element, JToken node) {

src/Orchard.Web/Modules/Orchard.Layouts/Views/LayoutEditor.Template.Children.cshtml

@@ -1,4 +1,4 @@
-<div class="layout-children clearfix" ng-model="element.children" ui-sortable="sortableOptions">
+<div class="layout-children clearfix" ng-model="element.children" ui-sortable="sortableOptions" style="{{element.getContainerTemplateStyles()}}">
     <div class="clearfix" ng-repeat="child in element.children" ng-class="getClasses(child)" ng-mouseenter="child.setIsActive(true)" ng-mouseleave="child.setIsActive(false)" ng-click="click(child, $event)" tabindex="{{$id}}">
         <orc-layout-child element="child" />
     </div>

src/Orchard.Web/Modules/Orchard.Layouts/Views/LayoutEditor.Template.Content.cshtml

@@ -7,5 +7,5 @@
         <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 id="layout-content-markup-{{::$id}}" class="layout-content-markup" ng-bind-html="element.htmlUnsafe" data-templated="{{element.isTemplated}}"></div>
+    <div id="layout-content-markup-{{::$id}}" class="layout-content-markup" ng-bind-html="element.htmlUnsafe" data-templated="{{element.isTemplated}}" style="{{element.getTemplateStyles()}}"></div>
 </div>