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

Cleans up rte embed dialog

Browse Source
This commit is contained in:
perploug
2013-10-01 10:10:55 +02:00
parent 891955f164
commit fbe388a616
3 changed files with 55 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Umbraco.Web.UI.Client/src/less/hacks.less
View File

@@ -17,7 +17,7 @@
.umbracoDialog form{height: 100%;}
/*ensures dialogs doesnt have side-by-side labels */
.umbracoDialog .controls-row{margin-left: 0px !important;}
.umbracoDialog .controls-row, .umb-modal .controls-row{margin-left: 0px !important;}
.controls-row img {
max-width: none;

59
src/Umbraco.Web.UI.Client/src/views/common/dialogs/rteembed.controller.js
View File

@@ -1,48 +1,49 @@
angular.module("umbraco").controller("Umbraco.Dialogs.RteEmbedController", function ($scope, $http) {
$scope.url = "";
$scope.width = 500;
$scope.height = 300;
$scope.constrain = true;
$scope.preview = "";
$scope.success = false;
$scope.info = "";
$scope.supportsDimensions = false;
$scope.form = {};
$scope.form.url = "";
$scope.form.width = 360;
$scope.form.height = 240;
$scope.form.constrain = true;
$scope.form.preview = "";
$scope.form.success = false;
$scope.form.info = "";
$scope.form.supportsDimensions = false;
var origWidth = 500;
var origHeight = 300;
$scope.showPreview = function(){
if ($scope.url != "") {
$scope.preview = "<div class=\"umb-loader\" style=\"height: 10px; margin: 10px 0px;\"></div>";
$scope.info = "";
$scope.success = false;
if ($scope.form.url != "") {
$scope.form.show = true;
$scope.form.preview = "<div class=\"umb-loader\" style=\"height: 10px; margin: 10px 0px;\"></div>";
$scope.form.info = "";
$scope.form.success = false;
$http({ method: 'GET', url: '/umbraco/UmbracoApi/RteEmbed/GetEmbed', params: { url: $scope.url, width: $scope.width, height: $scope.height } })
$http({ method: 'GET', url: '/umbraco/UmbracoApi/RteEmbed/GetEmbed', params: { url: $scope.form.url, width: $scope.form.width, height: $scope.form.height } })
.success(function (data) {
$scope.preview = "";
$scope.form.preview = "";
switch (data.Status) {
case 0:
//not supported
$scope.info = "Not Supported";
$scope.form.info = "Not Supported";
break;
case 1:
//error
$scope.info = "Computer says no";
$scope.form.info = "Computer says no";
break;
case 2:
$scope.preview = data.Markup;
$scope.supportsDimensions = data.SupportsDimensions;
$scope.success = true;
$scope.form.preview = data.Markup;
$scope.form.supportsDimensions = data.SupportsDimensions;
$scope.form.success = true;
break;
}
})
.error(function() {
$scope.preview = "";
$scope.info = "Computer says no";
$scope.form.preview = "";
$scope.form.info = "Computer says no";
});
}
@@ -52,24 +53,24 @@
$scope.changeSize = function (type) {
var width, height;
if ($scope.constrain) {
width = parseInt($scope.width, 10);
height = parseInt($scope.height, 10);
if ($scope.form.constrain) {
width = parseInt($scope.form.width, 10);
height = parseInt($scope.form.height, 10);
if (type == 'width') {
origHeight = Math.round((width / origWidth) * height);
$scope.height = origHeight;
$scope.form.height = origHeight;
} else {
origWidth = Math.round((height / origHeight) * width);
$scope.width = origWidth;
$scope.form.width = origWidth;
}
}
if ($scope.url != "") {
if ($scope.form.url != "") {
$scope.showPreview();
}
};
$scope.insert = function(){
$scope.submit($scope.preview);
$scope.submit($scope.form.preview);
};
});

56
src/Umbraco.Web.UI.Client/src/views/common/dialogs/rteembed.html
View File

@@ -1,39 +1,31 @@
<form ng-controller="Umbraco.Dialogs.RteEmbedController">
<div class="umb-panel" val-show-validation>
<div class="umb-panel-header">
<div class="umb-el-wrap umb-panel-buttons">
<div class="btn-toolbar umb-btn-toolbar">
<button type="button" class="btn" ng-click="close()">Cancel</button>
<input type="button" ng-click="insert()" class="btn btn-primary" value="Ok" ng-disabled="!success" />
<div class="umb-panel-body no-header with-footer">
<umb-pane>
<umb-control-group label="Url">
<input id="url" class="umb-editor input-block-level" type="text" ng-model="form.url" ng-change="showPreview()" required/>
</umb-control-group>
<umb-control-group label="Size" ng-show="form.supportsDimensions">
<input type="text" ng-model="form.width" on-blur="changeSize('width')" style="width:50px"/> x <input type="text" ng-model="form.height" on-blur="changeSize('height')" style="width:50px"/>
<label for="constrain" style="display:inline">Constrain:</label>
<input id="constrain" type="checkbox" ng-model="form.constrain" style="margin-bottom: 10px;"/>
</umb-control-group>
<div>
<p ng-bind="form.info"></p>
<div ng-bind-html-unsafe="form.preview"></div>
</div>
</div>
</div>
<div class="umb-panel-body umb-scrollable" auto-scale="1">
<div class="umb-control-group">
<div class="umb-pane">
<label for="url">Url:</label>
<input id="url" type="text" ng-model="url" ng-change="showPreview()" required/>
</div>
<div class="umb-pane" ng-show="supportsDimensions">
<label>Size:</label>
<input type="text" ng-model="width" on-blur="changeSize('width')" style="width:50px"/> x <input type="text" ng-model="height" on-blur="changeSize('height')" style="width:50px"/>
<label for="constrain" style="display:inline">Constrain:</label>
<input id="constrain" type="checkbox" ng-model="constrain" style="margin-bottom: 10px;"/>
</div>
<div class="umb-pane">
<p ng-bind="info"></p>
<div ng-bind-html-unsafe="preview">
</div>
</div>
</div>
</umb-pane>
</div>
<div class="umb-panel-footer">
<div class="btn-toolbar umb-btn-toolbar pull-right">
<a href class="btn btn-link" ng-click="close()">Cancel</a>
<input type="button" ng-click="insert()" class="btn btn-primary" value="Ok" ng-disabled="!form.success" />
</div>
</div>
</div>
</form>