RTE updates for styles and button placement

2013-10-28 20:24:02 +01:00
parent 228230d46b
commit eb622504f2
7 changed files with 98 additions and 36 deletions
--- a/src/Umbraco.Web.UI.Client/src/common/resources/stylesheet.resource.js
+++ b/src/Umbraco.Web.UI.Client/src/common/resources/stylesheet.resource.js
@@ -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 ');
        }
    };
 }
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.controller.js
@@ -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 
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.prevalues.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.prevalues.controller.js
@@ -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");
+
+            
+        });
+
    });
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.prevalues.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.prevalues.html
@@ -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>
--- a/src/Umbraco.Web.UI/config/tinyMceConfig.Release.config
+++ b/src/Umbraco.Web.UI/config/tinyMceConfig.Release.config
@@ -40,17 +40,19 @@
      <tinyMceCommand value="" userInterface="false" frontendCommand="copy">copy</tinyMceCommand>
      <priority>14</priority>
    </command>
+    <!--
    <command>
      <umbracoAlias>mcePasteWord</umbracoAlias>
      <icon>images/editor/paste.gif</icon>
      <tinyMceCommand value="" userInterface="true" frontendCommand="pasteword">pasteword</tinyMceCommand>
      <priority>15</priority>
    </command>
-
-    <command isStyle="true">
-      <umbracoAlias>stylePicker</umbracoAlias>
+    -->
+    
+    <command>
+      <umbracoAlias>styleselect</umbracoAlias>
      <icon>images/editor/showStyles.png</icon>
-      <tinyMceCommand value="" userInterface="false" frontendCommand="umbracocss">umbracocss</tinyMceCommand>
+      <tinyMceCommand value="" userInterface="false" frontendCommand="styleselect">styleselect</tinyMceCommand>
      <priority>20</priority>
    </command>
    <command>
@@ -195,13 +197,6 @@
      <tinyMceCommand value="" userInterface="false" frontendCommand="charmap">charmap</tinyMceCommand>
      <priority>74</priority>
    </command>
-    <command>
-      <umbracoAlias>mceSpellCheck</umbracoAlias>
-      <icon>images/editor/spellchecker.gif</icon>
-      <tinyMceCommand value="" userInterface="true" frontendCommand="mceSpellCheck">spellchecker</tinyMceCommand>
-      <priority>75</priority>
-    </command>
-
  </commands>
  <plugins>
    <plugin loadOnFrontend="true">code</plugin>
--- a/src/Umbraco.Web.UI/config/tinyMceConfig.config
+++ b/src/Umbraco.Web.UI/config/tinyMceConfig.config
@@ -40,18 +40,20 @@
            <tinyMceCommand value="" userInterface="false" frontendCommand="copy">copy</tinyMceCommand>
            <priority>14</priority>
        </command>
+      
+      <!--
        <command>
            <umbracoAlias>mcePasteWord</umbracoAlias>
            <icon>images/editor/paste.gif</icon>
            <tinyMceCommand value="" userInterface="true" frontendCommand="pasteword">pasteword</tinyMceCommand>
            <priority>15</priority>
-        </command>
+        </command>-->

-        <command isStyle="true">
-            <umbracoAlias>stylePicker</umbracoAlias>
-            <icon>images/editor/showStyles.png</icon>
-            <tinyMceCommand value="" userInterface="false" frontendCommand="umbracocss">umbracocss</tinyMceCommand>
-            <priority>20</priority>
+        <command>
+          <umbracoAlias>styleselect</umbracoAlias>
+          <icon>images/editor/showStyles.png</icon>
+          <tinyMceCommand value="" userInterface="false" frontendCommand="styleselect">styleselect</tinyMceCommand>
+          <priority>20</priority>
        </command>
        <command>
            <umbracoAlias>bold</umbracoAlias>
@@ -202,13 +204,7 @@
            <tinyMceCommand value="" userInterface="false" frontendCommand="charmap">charmap</tinyMceCommand>
            <priority>74</priority>
        </command>
-
-        <command>
-            <umbracoAlias>mceSpellCheck</umbracoAlias>
-            <icon>images/editor/spellchecker.gif</icon>
-            <tinyMceCommand value="" userInterface="true" frontendCommand="mceSpellCheck">spellchecker</tinyMceCommand>
-            <priority>75</priority>
-        </command>
+       
    </commands>
    <plugins>
        <plugin loadOnFrontend="true">code</plugin>  
--- a/src/Umbraco.Web/Editors/StylesheetController.cs
+++ b/src/Umbraco.Web/Editors/StylesheetController.cs
@@ -21,7 +21,7 @@ namespace Umbraco.Web.Editors
        {
            return StyleSheet.GetAll()
                .Select(x => 
-                    new Stylesheet() { 
+                    new Stylesheet() {
                        Name = x.Text,
                        Id = x.Id,
                        Path = SystemDirectories.Css + "/" + x.Text + ".css" 
@@ -36,5 +36,16 @@ namespace Umbraco.Web.Editors

            return css.Properties.Select(x => new StylesheetRule() { Id = x.Id, Name = x.Text, Selector = x.Alias });
        }
+
+        public IEnumerable<StylesheetRule> GetRulesByName(string name)
+        {
+            var css = StyleSheet.GetByName(name);
+
+            if (css == null)
+                throw new HttpResponseException(System.Net.HttpStatusCode.NotFound);
+
+            return css.Properties.Select(x => new StylesheetRule() { Id = x.Id, Name = x.Text, Selector = x.Alias });
+        }
    }
+
 }