Skip to content

Commit

Permalink
Performance and accessibility improvements on the embed screen (#9810)
Browse files Browse the repository at this point in the history
  • Loading branch information
@RachBreeze
RachBreeze authored Feb 21, 2021
1 parent 821cba5 commit c11d07d
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 20 deletions.
38 changes: 26 additions & 12 deletions src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/embed/embed.controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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;
Expand All @@ -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({
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
}
Expand All @@ -94,34 +101,41 @@
$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 {
origWidth = Math.round((height / origHeight) * width);
$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() {
Expand All @@ -138,7 +152,7 @@
if ($scope.model && $scope.model.close) {
$scope.model.close();
}
}
}

onInit();
}
Expand Down
17 changes: 9 additions & 8 deletions src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/embed/embed.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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>

Expand Down

0 comments on commit c11d07d

Please sign in to comment.