yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Performance and accessibility improvements on the embed screen (#9810)

Browse Source
This commit is contained in:
Rachel Breeze
2021-02-21 12:00:48 +00:00
committed by GitHub
parent 821cba5cd3
commit c11d07dede
2 changed files with 35 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/embed/embed.controller.js
View File

@@ -18,8 +18,11 @@
preview: "",
success: false,
info: "",
supportsDimensions: false
};
a11yInfo: "",
supportsDimensions: false,
originalWidth: 360,
originalHeight: 240
};
if ($scope.model.modify) {
Utilities.extend($scope.model.embed, $scope.model.modify);
@@ -32,8 +35,8 @@
vm.changeSize = changeSize;
vm.submit = submit;
vm.close = close;
function onInit() {
function onInit() {
if (!$scope.model.title) {
localizationService.localize("general_embed").then(function(value){
$scope.model.title = value;
@@ -46,8 +49,8 @@
if ($scope.model.embed.url) {
$scope.model.embed.show = true;
$scope.model.embed.info = "";
$scope.model.embed.a11yInfo = "";
$scope.model.embed.success = false;
vm.loading = true;
$http({
@@ -67,6 +70,7 @@
//not supported
$scope.model.embed.preview = "";
$scope.model.embed.info = "Not supported";
$scope.model.embed.a11yInfo = $scope.model.embed.info;
$scope.model.embed.success = false;
$scope.model.embed.supportsDimensions = false;
vm.trustedPreview = null;
@@ -75,6 +79,7 @@
//error
$scope.model.embed.preview = "";
$scope.model.embed.info = "Could not embed media - please ensure the URL is valid";
$scope.model.embed.a11yInfo = $scope.model.embed.info;
$scope.model.embed.success = false;
$scope.model.embed.supportsDimensions = false;
vm.trustedPreview = null;
@@ -83,6 +88,8 @@
$scope.model.embed.success = true;
$scope.model.embed.supportsDimensions = response.data.SupportsDimensions;
$scope.model.embed.preview = response.data.Markup;
$scope.model.embed.info = "";
$scope.model.embed.a11yInfo = "Retrieved URL";
vm.trustedPreview = $sce.trustAsHtml(response.data.Markup);
break;
}
@@ -94,24 +101,28 @@
$scope.model.embed.supportsDimensions = false;
$scope.model.embed.preview = "";
$scope.model.embed.info = "Could not embed media - please ensure the URL is valid";
$scope.model.embed.a11yInfo = $scope.model.embed.info;
vm.loading = false;
});
} else {
$scope.model.embed.supportsDimensions = false;
$scope.model.embed.preview = "";
$scope.model.embed.info = "Please enter a URL";
$scope.model.embed.a11yInfo = $scope.model.embed.info;
}
}
function changeSize(type) {
var width, height;
var width = parseInt($scope.model.embed.width, 10);
var height = parseInt($scope.model.embed.height, 10);
var originalWidth = parseInt($scope.model.embed.originalWidth, 10);
var originalHeight = parseInt($scope.model.embed.originalHeight, 10);
var resize = originalWidth !== width || originalHeight !== height;
if ($scope.model.embed.constrain) {
width = parseInt($scope.model.embed.width, 10);
height = parseInt($scope.model.embed.height, 10);
if (type == 'width') {
if (type === 'width') {
origHeight = Math.round((width / origWidth) * height);
$scope.model.embed.height = origHeight;
} else {
@@ -119,9 +130,12 @@
$scope.model.embed.width = origWidth;
}
}
if ($scope.model.embed.url !== "") {
$scope.model.embed.originalWidth = $scope.model.embed.width;
$scope.model.embed.originalHeight = $scope.model.embed.height;
if ($scope.model.embed.url !== "" && resize) {
showPreview();
}
}
function toggleConstrain() {
@@ -138,7 +152,7 @@
if ($scope.model && $scope.model.close) {
$scope.model.close();
}
}
}
onInit();
}

17
src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/embed/embed.html
View File

@@ -15,7 +15,7 @@
<umb-box>
<umb-box-content>
<umb-control-group label="@general_url">
<umb-control-group label="@general_url" alias="url">
<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"
@@ -30,21 +30,22 @@
<div ng-if="!vm.loading">
<umb-control-group>
<p ng-bind="model.embed.info"></p>
<p ng-bind="model.embed.info" aria-hidden="true"></p>
<p ng-bind="model.embed.a11yInfo" class="sr-only" role="alert"></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 label="@general_width" alias="width">
<input type="number" id="width" 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 label="@general_height" alias="height">
<input type="number" id="height" pattern="[0-9]*" min="0" ng-model="model.embed.height" ng-blur="vm.changeSize('height')" />
</umb-control-group>
<umb-control-group label="@general_constrain">
<umb-toggle checked="model.embed.constrain" on-click="vm.toggleConstrain()"></umb-toggle>
<umb-control-group label="@general_constrain" alias="constrain">
<umb-toggle checked="model.embed.constrain" id="constrain" on-click="vm.toggleConstrain()"></umb-toggle>
</umb-control-group>
</div>