From 08eaf16f113ea57e89e8b832d198899479b28db0 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Tue, 21 Aug 2018 12:54:23 +0200
Subject: [PATCH] turn embed overlay into infinite editor

---
 .../src/common/services/editor.service.js     | 21 ++++-
 .../infiniteeditors/embed/embed.controller.js | 18 +++-
 .../common/infiniteeditors/embed/embed.html   | 88 +++++++++++++------
 .../propertyeditors/rte/rte.controller.js     | 21 +++--
 .../src/views/propertyeditors/rte/rte.html    |  7 --
 5 files changed, 109 insertions(+), 46 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js b/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js
index d395a53a5c..4e08718f6b 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js
@@ -124,7 +124,7 @@
 
         /**
          * @ngdoc method
-         * @name umbraco.services.editorService#copy
+         * @name umbraco.services.editorService#move
          * @methodOf umbraco.services.editorService
          *
          * @description
@@ -142,6 +142,24 @@
             open(editor);
         }
 
+        /**
+         * @ngdoc method
+         * @name umbraco.services.editorService#embed
+         * @methodOf umbraco.services.editorService
+         *
+         * @description
+         * Opens an embed editor in infinite editing.
+         * @param {Callback} editor.submit Saves, submits, and closes the editor
+         * @param {Callback} editor.close Closes the editor
+         * @returns {Object} editor object
+         */
+
+        function embed(editor) {
+            editor.view = "views/common/infiniteeditors/embed/embed.html";
+            editor.size = "small";
+            open(editor);
+        }
+
         /**
          * @ngdoc method
          * @name umbraco.services.editorService#mediaEditor
@@ -405,6 +423,7 @@
             contentPicker: contentPicker,
             copy: copy,
             move: move,
+            embed: embed,
             mediaPicker: mediaPicker,
             iconPicker: iconPicker,
             documentTypeEditor: documentTypeEditor,
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/embed/embed.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/embed/embed.controller.js
index b4d5567e89..fb66552731 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/embed/embed.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/embed/embed.controller.js
@@ -1,7 +1,7 @@
 (function() {
    "use strict";
 
-   function EmbedOverlay($scope, $http, $sce, umbRequestHelper, localizationService) {
+   function EmbedController($scope, $http, $sce, umbRequestHelper, localizationService) {
 
         var vm = this;
         var origWidth = 500;
@@ -22,6 +22,8 @@
 
         vm.showPreview = showPreview;
         vm.changeSize = changeSize;
+        vm.submit = submit;
+        vm.close = close;
 
         function onInit() {
             if(!$scope.model.title) {
@@ -102,10 +104,22 @@
 
        }
 
+       function submit() {
+            if($scope.model && $scope.model.submit) {
+                $scope.model.submit($scope.model);
+            }
+        }
+
+        function close() {
+            if($scope.model && $scope.model.close) {
+                $scope.model.close();
+            }
+        }
+
         onInit();
 
    }
 
-   angular.module("umbraco").controller("Umbraco.Overlays.EmbedOverlay", EmbedOverlay);
+   angular.module("umbraco").controller("Umbraco.Editors.EmbedController", EmbedController);
 
 })();
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/embed/embed.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/embed/embed.html
index b642d2e7ec..f6a641f2af 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/embed/embed.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/embed/embed.html
@@ -1,34 +1,72 @@
-<div ng-controller="Umbraco.Overlays.EmbedOverlay as vm">
+<div ng-controller="Umbraco.Editors.EmbedController as vm">
     <form name="embedForm">
 
-        <umb-control-group label="@general_url">
-            <input id="url" class="umb-property-editor input-block-level" type="text" style="margin-bottom: 10px;" ng-model="model.embed.url" ng-keyup="$event.keyCode == 13 ? vm.showPreview() : null" required />
-            <umb-button
-                type="button"
-                action="vm.showPreview()"
-                button-style="info"
-                label-key="general_retrieve">
-            </umb-button>
-        </umb-control-group>
+        <umb-editor-view>
+                
+            <umb-editor-header
+                name="model.title"
+                name-locked="true"
+                hide-alias="true"
+                hide-icon="true"
+                hide-description="true">
+            </umb-editor-header>
 
-        <umb-control-group>
-            <p ng-bind="model.embed.info"></p>
-            <div ng-bind-html="vm.trustedPreview"></div>
-        </umb-control-group>
+            <umb-editor-container class="block-form">
+                <umb-box>
+                    <umb-box-content>
 
-        <div ng-show="model.embed.supportsDimensions">
-            <umb-control-group label="@general_width">
-                <input type="number" pattern="[0-9]*" min="0" ng-model="model.embed.width" on-blur="vm.changeSize('width')" />
-            </umb-control-group>
+                        <umb-control-group label="@general_url">
+                            <input id="url" class="umb-property-editor input-block-level" type="text" style="margin-bottom: 10px;" ng-model="model.embed.url" ng-keyup="$event.keyCode == 13 ? vm.showPreview() : null" required />
+                            <umb-button
+                                type="button"
+                                action="vm.showPreview()"
+                                button-style="info"
+                                label-key="general_retrieve">
+                            </umb-button>
+                        </umb-control-group>
+                
+                        <umb-control-group>
+                            <p ng-bind="model.embed.info"></p>
+                            <div ng-bind-html="vm.trustedPreview"></div>
+                        </umb-control-group>
+                
+                        <div ng-show="model.embed.supportsDimensions">
+                            <umb-control-group label="@general_width">
+                                <input type="number" pattern="[0-9]*" min="0" ng-model="model.embed.width" on-blur="vm.changeSize('width')" />
+                            </umb-control-group>
+                
+                            <umb-control-group label="@general_height">
+                                <input type="number" pattern="[0-9]*" min="0" ng-model="model.embed.height" on-blur="vm.changeSize('height')" />
+                            </umb-control-group>
+                
+                            <umb-control-group label="@general_constrain">
+                                <input id="constrain" type="checkbox" ng-model="model.embed.constrain" />
+                            </umb-control-group>
+                        </div>
+                        
+                    </umb-box-content>
+                </umb-box>
+            </umb-editor-container>
 
-            <umb-control-group label="@general_height">
-                <input type="number" pattern="[0-9]*" min="0" ng-model="model.embed.height" on-blur="vm.changeSize('height')" />
-            </umb-control-group>
+            <umb-editor-footer>
+                <umb-editor-footer-content-right>
+                    <umb-button
+                        type="button"
+                        button-style="link"
+                        label-key="general_close"
+                        action="vm.close()">
+                    </umb-button>
+                    <umb-button
+                        type="button"
+                        button-style="success"
+                        label-key="general_submit"
+                        state="vm.saveButtonState"
+                        action="vm.submit(model)">
+                    </umb-button>
+                </umb-editor-footer-content-right>
+            </umb-editor-footer>
 
-            <umb-control-group label="@general_constrain">
-                <input id="constrain" type="checkbox" ng-model="model.embed.constrain" />
-            </umb-control-group>
-        </div>
+        </umb-editor-view>
 
     </form>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.controller.js
index ab5c8b7591..0785d5d674 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.controller.js
@@ -311,17 +311,16 @@ angular.module("umbraco")
                     
                     //Create the embedded plugin
                     tinyMceService.createInsertEmbeddedMedia(editor, $scope, function() {
-
-                      $scope.embedOverlay = {
-                          view: "embed",
-                          show: true,
-                          submit: function(model) {
-                              tinyMceService.insertEmbeddedMediaInEditor(editor, model.embed.preview);
-                              $scope.embedOverlay.show = false;
-                              $scope.embedOverlay = null;
-                          }
-                      };
-
+                        var embed = {
+                            submit: function(model) {
+                                tinyMceService.insertEmbeddedMediaInEditor(editor, model.embed.preview);
+                                editorService.close();
+                            },
+                            close: function() {
+                                editorService.close();
+                            }
+                        };
+                        editorService.embed(embed);
                     });
 
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.html
index 3c8ca82359..902e14c187 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.html
@@ -18,11 +18,4 @@
       view="mediaPickerOverlay.view">
    </umb-overlay>
 
-   <umb-overlay
-      ng-if="embedOverlay.show"
-      model="embedOverlay"
-      position="right"
-      view="embedOverlay.view">
-   </umb-overlay>
-
 </div>