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

RTE updates for styles and button placement

Browse Source
This commit is contained in:
perploug
2013-10-28 20:24:02 +01:00
parent 228230d46b
commit eb622504f2
7 changed files with 98 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/Umbraco.Web.UI.Client/src/common/resources/stylesheet.resource.js
View File

@@ -36,6 +36,27 @@ function stylesheetResource($q, $http, umbRequestHelper) {
"stylesheetApiBaseUrl",
"GetAll")),
'Failed to retreive stylesheets ');
},
getRules: function (id) {
return umbRequestHelper.resourcePromise(
$http.get(
umbRequestHelper.getApiUrl(
"stylesheetApiBaseUrl",
"GetRules",
[{ id: id }]
)),
'Failed to retreive stylesheets ');
},
getRulesByName: function (name) {
return umbRequestHelper.resourcePromise(
$http.get(
umbRequestHelper.getApiUrl(
"stylesheetApiBaseUrl",
"GetRulesByName",
[{ name: name }])),
'Failed to retreive stylesheets ');
}
};
}

31
src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.controller.js
View File

@@ -1,6 +1,6 @@
angular.module("umbraco")
.controller("Umbraco.PropertyEditors.RTEController",
function ($rootScope, $element, $scope, dialogService, $log, imageHelper, assetsService, $timeout, tinyMceService, angularHelper) {
function ($rootScope, $element, $scope, dialogService, $log, imageHelper, assetsService, $timeout, tinyMceService, angularHelper, stylesheetResource) {
tinyMceService.configuration().then(function(tinyMceConfig){
@@ -25,7 +25,32 @@ angular.module("umbraco")
//config value on the data type
var toolbar = editorConfig.toolbar.join(" | ");
var stylesheets = [];
var styleFormats = [];
angular.forEach(editorConfig.stylesheets, function(val, key){
stylesheets.push("/css/" + val + ".css");
stylesheetResource.getRulesByName(val).then(function(rules){
angular.forEach(rules, function(rule){
var r = {};
r.title = rule.name;
if(rule.selector[0] == "."){
r.inline = "span";
r.classes = rule.selector.substring(1);
}else if(rule.selector[0] == "#"){
r.inline = "span";
r.attributes = {id: rule.selector.substring(1)};
}else{
r.block = rule.selector;
}
styleFormats.push(r);
})
});
});
assetsService.loadJs("lib/tinymce/tinymce.min.js", $scope).then(function () {
/** Loads in the editor */
@@ -47,7 +72,9 @@ angular.module("umbraco")
statusbar: false,
height: editorConfig.dimensions.height,
toolbar: toolbar,
content_css: stylesheets.join(','),
relative_urls: false,
style_formats: styleFormats,
setup: function (editor) {
//We need to listen on multiple things here because of the nature of tinymce, it doesn't

22
src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.prevalues.controller.js
View File

@@ -1,7 +1,8 @@
angular.module("umbraco").controller("Umbraco.PrevalueEditors.RteController",
function ($scope, $timeout, tinyMceService, stylesheetResource) {
function ($scope, $timeout, $log, tinyMceService, stylesheetResource) {
var cfg = tinyMceService.defaultPrevalues();
if($scope.model.value){
if(angular.isString($scope.model.value)){
$scope.model.value = cfg;
@@ -12,14 +13,16 @@ angular.module("umbraco").controller("Umbraco.PrevalueEditors.RteController",
tinyMceService.configuration().then(function(config){
$scope.tinyMceConfig = config;
});
stylesheetResource.getAll().then(function(stylesheets){
$scope.stylesheets = stylesheets;
});
$scope.selected = function(alias, lookup){
return lookup.indexOf(alias) >= 0;
$scope.selected = function(cmd, alias, lookup){
cmd.selected = lookup.indexOf(alias) >= 0;
return cmd.selected;
};
$scope.selectCommand = function(command){
@@ -33,12 +36,21 @@ angular.module("umbraco").controller("Umbraco.PrevalueEditors.RteController",
};
$scope.selectStylesheet = function(css){
var index = $scope.model.value.stylesheets.indexOf(css.path);
var index = $scope.model.value.stylesheets.indexOf(css.name);
if(css.selected && index === -1){
$scope.model.value.stylesheets.push(css.path);
$scope.model.value.stylesheets.push(css.name);
}else if(index >= 0){
$scope.model.value.stylesheets.splice(index, 1);
}
};
$scope.$on("formSubmitting", function (ev, args) {
var commands = _.where($scope.tinyMceConfig.commands, {selected: true});
$scope.model.value.toolbar = _.pluck(commands, "frontEndCommand");
});
});

8
src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.prevalues.html
View File

@@ -3,7 +3,7 @@
<umb-control-group label="Toolbar" hide-label="false">
<div ng-repeat="cmd in tinyMceConfig.commands">
<input type="checkbox"
ng-checked="selected(cmd.frontEndCommand, model.value.toolbar)"
ng-checked="selected(cmd, cmd.frontEndCommand, model.value.toolbar)"
ng-model="cmd.selected"
ng-change="selectCommand(cmd)"
/>
@@ -17,7 +17,7 @@
<umb-control-group label="Stylesheets" hide-label="0">
<div ng-repeat="css in stylesheets">
<input type="checkbox"
ng-checked="selected(css.path, model.value.stylesheets)"
ng-checked="selected(css, css.name, model.value.stylesheets)"
ng-model="css.selected"
ng-change="selectStylesheet(css)"
/>
@@ -26,7 +26,7 @@
</umb-control-group>
<umb-control-group label="Dimensions" hide-label="asdasasdas">
<input type="number" ng-model="model.value.dimensions.height" class="umb-editor-tiny" placeholder="Height" /> x <input type="number" ng-model="model.value.dimensions.width" class="umb-editor umb-editor-tiny" placeholder="Width" /> Pixels
<input type="number" ng-model="model.value.dimensions.height"
class="umb-editor-tiny" placeholder="Height" /> x <input type="number" ng-model="model.value.dimensions.width" class="umb-editor-tiny" placeholder="Width" /> Pixels
</umb-control-group>
</div>