v8: Edit embed in grid (#4899)
This commit is contained in:
Bjarne Fyrstenborg
committed by
Sebastiaan Janssen
Sebastiaan Janssen
parent
73a61e65de
commit
1b0113d3aa
@@ -408,7 +408,19 @@
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.umb-grid .umb-editor-preview {
|
||||
position: relative;
|
||||
|
||||
.umb-editor-preview-overlay {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Active states
|
||||
// -------------------------
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
var origWidth = 500;
|
||||
var origHeight = 300;
|
||||
|
||||
vm.loading = false;
|
||||
vm.trustedPreview = null;
|
||||
|
||||
$scope.model.embed = {
|
||||
@@ -17,9 +18,16 @@
|
||||
preview: "",
|
||||
success: false,
|
||||
info: "",
|
||||
supportsDimensions: ""
|
||||
supportsDimensions: false
|
||||
};
|
||||
|
||||
if ($scope.model.original) {
|
||||
angular.extend($scope.model.embed, $scope.model.original);
|
||||
|
||||
showPreview();
|
||||
}
|
||||
|
||||
vm.toggleConstrain = toggleConstrain;
|
||||
vm.showPreview = showPreview;
|
||||
vm.changeSize = changeSize;
|
||||
vm.submit = submit;
|
||||
@@ -37,10 +45,10 @@
|
||||
|
||||
if ($scope.model.embed.url) {
|
||||
$scope.model.embed.show = true;
|
||||
$scope.model.embed.preview = "<div class=\"umb-loader\" style=\"height: 10px; margin: 10px 0px;\"></div>";
|
||||
$scope.model.embed.info = "";
|
||||
$scope.model.embed.success = false;
|
||||
|
||||
vm.loading = true;
|
||||
|
||||
$http({
|
||||
method: 'GET',
|
||||
@@ -54,29 +62,41 @@
|
||||
|
||||
$scope.model.embed.preview = "";
|
||||
|
||||
|
||||
switch (response.data.OEmbedStatus) {
|
||||
case 0:
|
||||
//not supported
|
||||
$scope.model.embed.preview = "";
|
||||
$scope.model.embed.info = "Not supported";
|
||||
$scope.model.embed.success = false;
|
||||
$scope.model.embed.supportsDimensions = false;
|
||||
vm.trustedPreview = null;
|
||||
break;
|
||||
case 1:
|
||||
//error
|
||||
$scope.model.embed.preview = "";
|
||||
$scope.model.embed.info = "Could not embed media - please ensure the URL is valid";
|
||||
$scope.model.embed.success = false;
|
||||
$scope.model.embed.supportsDimensions = false;
|
||||
vm.trustedPreview = null;
|
||||
break;
|
||||
case 2:
|
||||
$scope.model.embed.success = true;
|
||||
$scope.model.embed.supportsDimensions = response.data.SupportsDimensions;
|
||||
$scope.model.embed.preview = response.data.Markup;
|
||||
vm.trustedPreview = $sce.trustAsHtml(response.data.Markup);
|
||||
$scope.model.embed.supportsDimensions = response.data.SupportsDimensions;
|
||||
$scope.model.embed.success = true;
|
||||
break;
|
||||
}
|
||||
|
||||
vm.loading = false;
|
||||
|
||||
}, function() {
|
||||
$scope.model.embed.success = false;
|
||||
$scope.model.embed.supportsDimensions = false;
|
||||
$scope.model.embed.preview = "";
|
||||
$scope.model.embed.info = "Could not embed media - please ensure the URL is valid";
|
||||
});
|
||||
|
||||
vm.loading = false;
|
||||
});
|
||||
} else {
|
||||
$scope.model.embed.supportsDimensions = false;
|
||||
$scope.model.embed.preview = "";
|
||||
@@ -105,6 +125,10 @@
|
||||
|
||||
}
|
||||
|
||||
function toggleConstrain() {
|
||||
$scope.model.embed.constrain = !$scope.model.embed.constrain;
|
||||
}
|
||||
|
||||
function submit() {
|
||||
if($scope.model && $scope.model.submit) {
|
||||
$scope.model.submit($scope.model);
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<umb-box-content>
|
||||
|
||||
<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" focus-when="{{true}}" required />
|
||||
<input type="text" id="url" class="umb-property-editor input-block-level" ng-model="model.embed.url" ng-keyup="$event.keyCode == 13 ? vm.showPreview() : null" focus-when="{{true}}" required />
|
||||
<umb-button
|
||||
type="button"
|
||||
action="vm.showPreview()"
|
||||
@@ -24,24 +24,30 @@
|
||||
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" ng-blur="vm.changeSize('width')" />
|
||||
|
||||
<umb-load-indicator ng-if="vm.loading"></umb-load-indicator>
|
||||
|
||||
<div ng-if="!vm.loading">
|
||||
|
||||
<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 && model.embed.success">
|
||||
<umb-control-group label="@general_width">
|
||||
<input type="number" pattern="[0-9]*" min="0" ng-model="model.embed.width" ng-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" ng-blur="vm.changeSize('height')" />
|
||||
</umb-control-group>
|
||||
<umb-control-group label="@general_height">
|
||||
<input type="number" pattern="[0-9]*" min="0" ng-model="model.embed.height" ng-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>
|
||||
<umb-control-group label="@general_constrain">
|
||||
<umb-toggle checked="model.embed.constrain" on-click="vm.toggleConstrain()"></umb-toggle>
|
||||
</umb-control-group>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</umb-box-content>
|
||||
@@ -62,6 +68,7 @@
|
||||
button-style="success"
|
||||
label-key="general_submit"
|
||||
state="vm.saveButtonState"
|
||||
disabled="!model.embed.url.length || !model.embed.preview.length"
|
||||
action="vm.submit(model)">
|
||||
</umb-button>
|
||||
</umb-editor-footer-content-right>
|
||||
|
||||
@@ -1,26 +1,42 @@
|
||||
angular.module("umbraco")
|
||||
.controller("Umbraco.PropertyEditors.Grid.EmbedController",
|
||||
function ($scope, $timeout, $sce, editorService) {
|
||||
|
||||
|
||||
|
||||
function getEmbed() {
|
||||
return $sce.trustAsHtml($scope.control.value);
|
||||
}
|
||||
|
||||
|
||||
$scope.embedHtml = getEmbed();
|
||||
$scope.$watch('control.value', function(newValue, oldValue) {
|
||||
if(angular.equals(newValue, oldValue)){
|
||||
return; // simply skip that
|
||||
}
|
||||
|
||||
function onInit() {
|
||||
|
||||
$scope.embedHtml = getEmbed();
|
||||
}, false);
|
||||
$scope.setEmbed = function() {
|
||||
var embedPreview = angular.isObject($scope.control.value) && $scope.control.value.preview ? $scope.control.value.preview : $scope.control.value;
|
||||
|
||||
$scope.trustedValue = embedPreview ? $sce.trustAsHtml(embedPreview) : null;
|
||||
|
||||
if(!$scope.control.value) {
|
||||
$timeout(function(){
|
||||
if($scope.control.$initializing){
|
||||
$scope.setEmbed();
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
|
||||
$scope.setEmbed = function () {
|
||||
|
||||
var original = angular.isObject($scope.control.value) ? $scope.control.value : null;
|
||||
|
||||
var embed = {
|
||||
submit: function(model) {
|
||||
$scope.control.value = model.embed.preview;
|
||||
original: original,
|
||||
submit: function (model) {
|
||||
|
||||
var embed = {
|
||||
constrain: model.embed.constrain,
|
||||
height: model.embed.height,
|
||||
width: model.embed.width,
|
||||
url: model.embed.url,
|
||||
info: model.embed.info,
|
||||
preview: model.embed.preview
|
||||
};
|
||||
|
||||
$scope.control.value = embed;
|
||||
$scope.trustedValue = $sce.trustAsHtml(embed.preview);
|
||||
|
||||
editorService.close();
|
||||
},
|
||||
close: function() {
|
||||
@@ -29,5 +45,6 @@ angular.module("umbraco")
|
||||
};
|
||||
editorService.embed(embed);
|
||||
};
|
||||
|
||||
|
||||
onInit();
|
||||
});
|
||||
|
||||
@@ -1,10 +1,13 @@
|
||||
<div ng-controller="Umbraco.PropertyEditors.Grid.EmbedController">
|
||||
|
||||
<div class="umb-editor-placeholder" ng-click="setEmbed()" ng-if="control.value === null">
|
||||
<i class="icon icon-movie-alt"></i>
|
||||
<div class="help-text"><localize key="grid_clickToEmbed">Click to embed</localize></div>
|
||||
</div>
|
||||
<div class="umb-editor-placeholder" ng-click="setEmbed()" ng-if="trustedValue === null">
|
||||
<i class="icon icon-movie-alt"></i>
|
||||
<div class="help-text"><localize key="grid_clickToEmbed">Click to embed</localize></div>
|
||||
</div>
|
||||
|
||||
<div ng-if="control.value" ng-bind-html="embedHtml"></div>
|
||||
<div class="umb-editor-preview" ng-if="control.value" ng-click="setEmbed()">
|
||||
<div class="umb-editor-preview-overlay"></div>
|
||||
<div ng-bind-html="trustedValue"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -584,6 +584,7 @@
|
||||
<key alias="closewindow">Luk vindue</key>
|
||||
<key alias="comment">Kommentar</key>
|
||||
<key alias="confirm">Bekræft</key>
|
||||
<key alias="constrain">Proportioner</key>
|
||||
<key alias="constrainProportions">Behold proportioner</key>
|
||||
<key alias="content">Indhold</key>
|
||||
<key alias="continue">Fortsæt</key>
|
||||
|
||||
Reference in New Issue
Block a user