turn embed overlay into infinite editor
This commit is contained in:
Mads Rasmussen
@@ -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,
|
||||
|
||||
@@ -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);
|
||||
|
||||
})();
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user