copy rte embed to new overlay component

src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js

@@ -61,11 +61,22 @@ function tinyMceService(dialogService, $log, imageHelper, $http, $timeout, macro
                 icon: 'custom icon-tv',
                 tooltip: 'Embed',
                 onclick: function () {
-                    dialogService.embedDialog({
-                        callback: function (data) {
-                            editor.insertContent(data);
-                        }
-                    });
+
+                   $scope.embedOverlay = {};
+                   $scope.embedOverlay.view = "rteembed";
+                   $scope.embedOverlay.show = true;
+
+                   $scope.embedOverlay.submit = function(model) {
+                      editor.insertContent(model.form.preview);
+                      $scope.embedOverlay.show = true;
+                      $scope.embedOverlay = null;
+                   };
+
+                   $scope.embedOverlay.close = function(oldModel) {
+                      $scope.embedOverlay.show = true;
+                      $scope.embedOverlay = null;
+                   };
+
                 }
             });
         },

src/Umbraco.Web.UI.Client/src/views/common/overlays/rteembed/rteembed.controller.js

@@ -0,0 +1,99 @@
+(function() {
+   "use strict";
+
+   function RteEmbedOverlay($scope, $http, umbRequestHelper) {
+
+      var vm = this;
+      var origWidth = 500;
+      var origHeight = 300;
+
+      $scope.model.title = "Embed";
+      $scope.model.form = {
+         url: "",
+         width: 360,
+         height: 240,
+         constrain: true,
+         preview: "",
+         success: false,
+         info: "",
+         supportsDimensions: ""
+      };
+
+      vm.showPreview = showPreview;
+      vm.changeSize = changeSize;
+
+      function showPreview() {
+
+         if ($scope.model.form.url) {
+            $scope.model.form.show = true;
+            $scope.model.form.preview = "<div class=\"umb-loader\" style=\"height: 10px; margin: 10px 0px;\"></div>";
+            $scope.model.form.info = "";
+            $scope.model.form.success = false;
+
+            $http({
+                  method: 'GET',
+                  url: umbRequestHelper.getApiUrl("embedApiBaseUrl", "GetEmbed"),
+                  params: {
+                     url: $scope.model.form.url,
+                     width: $scope.model.form.width,
+                     height: $scope.model.form.height
+                  }
+               })
+               .success(function(data) {
+
+                  $scope.model.form.preview = "";
+
+                  switch (data.Status) {
+                     case 0:
+                        //not supported
+                        $scope.model.form.info = "Not supported";
+                        break;
+                     case 1:
+                        //error
+                        $scope.model.form.info = "Computer says no";
+                        break;
+                     case 2:
+                        $scope.model.form.preview = data.Markup;
+                        $scope.model.form.supportsDimensions = data.SupportsDimensions;
+                        $scope.model.form.success = true;
+                        break;
+                  }
+               })
+               .error(function() {
+                  $scope.model.form.supportsDimensions = false;
+                  $scope.model.form.preview = "";
+                  $scope.model.form.info = "Computer says no";
+               });
+         } else {
+            $scope.model.form.supportsDimensions = false;
+            $scope.model.form.preview = "";
+            $scope.model.form.info = "Please enter a URL";
+         }
+      }
+
+      function changeSize(type) {
+
+         var width, height;
+
+         if ($scope.model.form.constrain) {
+            width = parseInt($scope.model.form.width, 10);
+            height = parseInt($scope.model.form.height, 10);
+            if (type == 'width') {
+               origHeight = Math.round((width / origWidth) * height);
+               $scope.model.form.height = origHeight;
+            } else {
+               origWidth = Math.round((height / origHeight) * width);
+               $scope.model.form.width = origWidth;
+            }
+         }
+         if ($scope.model.form.url !== "") {
+            showPreview();
+         }
+
+      }
+
+   }
+
+   angular.module("umbraco").controller("Umbraco.Overlays.RteEmbedOverlay", RteEmbedOverlay);
+
+})();

src/Umbraco.Web.UI.Client/src/views/common/overlays/rteembed/rteembed.html

@@ -0,0 +1,27 @@
+<form ng-controller="Umbraco.Overlays.RteEmbedOverlay as vm">
+
+   <umb-control-group label="Url">
+       <input id="url" class="umb-editor input-block-level" type="text" style="margin-bottom: 10px;" ng-model="model.form.url" ng-keyup="$event.keyCode == 13 ? vm.showPreview() : null" required />
+       <input type="button" ng-click="vm.showPreview()" class="btn" value="Retrieve" />
+   </umb-control-group>
+
+   <umb-control-group>
+      <p ng-bind="model.form.info"></p>
+      <div ng-bind-html-unsafe="model.form.preview"></div>
+   </umb-control-group>
+
+   <div ng-show="model.form.supportsDimensions">
+       <umb-control-group label="Width">
+           <input type="text" ng-model="model.form.width" on-blur="vm.changeSize('width')" />
+       </umb-control-group>
+
+       <umb-control-group label="Height">
+          <input type="text" ng-model="model.form.height" on-blur="vm.changeSize('height')" />
+       </umb-control-group>
+
+       <umb-control-group label="Constrain:">
+          <input id="constrain" type="checkbox" ng-model="model.form.constrain" />
+       </umb-control-group>
+   </div>
+
+</form>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.html

@@ -11,4 +11,11 @@
       view="mediaPickerOverlay.view">
    </umb-overlay>
 
+   <umb-overlay
+      ng-if="embedOverlay.show"
+      model="embedOverlay"
+      position="right"
+      view="embedOverlay.view">
+   </umb-overlay>
+
 </div>