move confirm logic to compositions controller

src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js

@@ -245,49 +245,19 @@
       scope.openCompositionsDialog = function() {
 
         scope.compositionsDialogModel = {
-            title: "Compositions",
             contentType: scope.model,
             compositeContentTypes: scope.model.compositeContentTypes,
-            confirmSubmit: {
-                title: "Warning",
-                description: "Removing a composition will delete all the associated property data. Once you save the document type there's no way back, are you sure?",
-                checkboxLabel: "I know what I'm doing",
-                enable: true
-            },
-            submit: function(model, oldModel, confirmed) {
+            submit: function() {
+              
+              // make sure that all tabs has an init property
+              if (scope.model.groups.length !== 0) {
+                angular.forEach(scope.model.groups, function(group) {
+                  addInitProperty(group);
+                });
+              }
 
-                var compositionRemoved = false;
-
-                // check if any compositions has been removed
-                for(var i = 0; oldModel.compositeContentTypes.length > i; i++) {
-
-                    var oldComposition = oldModel.compositeContentTypes[i];
-
-                    if(_.contains(model.compositeContentTypes, oldComposition) === false) {
-                        compositionRemoved = true;
-                    }
-
-                }
-
-                // show overlay confirm box if compositions has been removed.
-                if(compositionRemoved && confirmed === false) {
-
-                    scope.compositionsDialogModel.confirmSubmit.show = true;
-
-                // submit overlay if no compositions has been removed
-                // or the action has been confirmed
-                } else {
-
-                    // make sure that all tabs has an init property
-                    if (scope.model.groups.length !== 0) {
-                      angular.forEach(scope.model.groups, function(group) {
-                        addInitProperty(group);
-                      });
-                    }
-
-                    // remove overlay
-                    editorService.close();
-                }
+              // remove overlay
+              editorService.close();
 
             },
             close: function(oldModel) {

src/Umbraco.Web.UI.Client/src/less/components/editor.less

@@ -266,3 +266,14 @@ a.umb-variant-switcher__toggle {
 	margin-right: auto;
 	padding-right: 10px;
 }
+
+/* Confirm */
+.umb-editor-confirm {
+	background-color: @white;
+	padding: 20px;
+	position: absolute;
+	left: 0;
+	bottom: 0;
+	z-index: 10;
+	box-shadow: 0 -3px 12px 0px rgba(0,0,0,0.16);
+}

src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.controller.js

@@ -1,19 +1,28 @@
  (function() {
 	"use strict";
 
-	function CompositionsOverlay($scope,$location) {
+	function CompositionsController($scope,$location) {
 
         var vm = this;
         var oldModel = null;
 
+        vm.showConfirmSubmit = false;
+
         vm.isSelected = isSelected;
         vm.openContentType = openContentType;
         vm.submit = submit;
         vm.close = close;
 
         function onInit() {
-            console.log("on init");
+
+            /* make a copy of the init model so it is possible to roll 
+            back the changes on cancel */
             oldModel = angular.copy($scope.model);
+
+            if(!$scope.model.title) {
+                $scope.model.title = "Compositions";
+            }
+
         }
 
         function isSelected(alias) {
@@ -29,7 +38,21 @@
 
         function submit() {
             if ($scope.model && $scope.model.submit) {
-                $scope.model.submit($scope.model, oldModel);
+                
+                // check if any compositions has been removed
+                vm.compositionRemoved = false;
+                for(var i = 0; oldModel.compositeContentTypes.length > i; i++) {
+                    var oldComposition = oldModel.compositeContentTypes[i];
+                    if(_.contains($scope.model.compositeContentTypes, oldComposition) === false) {
+                        vm.compositionRemoved = true;
+                    }
+                }
+
+                /* submit the form if there havne't been removed any composition
+                or the confirm checkbox has been checked */
+                if(!vm.compositionRemoved || vm.allowSubmit) {
+                    $scope.model.submit($scope.model);
+                }
             }
         }
 
@@ -42,6 +65,6 @@
         onInit();
 	}
 
-	angular.module("umbraco").controller("Umbraco.Overlays.CompositionsOverlay", CompositionsOverlay);
+	angular.module("umbraco").controller("Umbraco.Editors.CompositionsController", CompositionsController);
 
 })();

src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.html

@@ -1,4 +1,4 @@
-<div ng-controller="Umbraco.Overlays.CompositionsOverlay as vm">
+<div ng-controller="Umbraco.Editors.CompositionsController as vm">
 
     <umb-editor-view>
 
@@ -86,6 +86,16 @@
 
                 </umb-box-content>
             </umb-box>
+
+            <div ng-if="vm.compositionRemoved" class="umb-editor-confirm">
+                <h5 class="red"><i class="icon-alert"></i>Warning</h5>
+                <p>Removing a composition will delete all the associated property data. Once you save the document type there's no way back, are you sure?</p>
+                <label class="checkbox no-indent">
+                    <input type="checkbox" ng-model="vm.allowSubmit" />
+                    <strong>I know what I'm doing</strong>
+                </label>
+            </div>
+
         </umb-editor-container>
 
         <umb-editor-footer>