Application du style sur sélection de fragments (au sens xml).

[ckeditor.git] / skins / ckeditor / plugins / plinn_styles / plugin.js

diff --git a/skins/ckeditor/plugins/plinn_styles/plugin.js b/skins/ckeditor/plugins/plinn_styles/plugin.js
index 009e5d2..7301c07 100644 (file)
--- a/skins/ckeditor/plugins/plinn_styles/plugin.js
+++ b/skins/ckeditor/plugins/plinn_styles/plugin.js
@@ -1,6 +1,7 @@
 ( function() {
 
 var PlinnStylesCombo = function(editor) {
+       this.editor = editor;
        this.label = 'Styles';
        this.title = 'CSS Styles';
        this.toolbar = 'styles,10';
@@ -9,22 +10,72 @@ var PlinnStylesCombo = function(editor) {
                multiSelect : true,
                attributes : {'aria-label': this.title}
        };
+       this.styles = [];
 };
 
+PlinnStylesCombo.prototype.loadStyle = function(definition) {
+       this.styles.push(definition);
+       this.styles[definition.name] = definition;
+};
+
+PlinnStylesCombo.prototype.init = function() {
+       var i, style;
+       for (i=0 ; i < this.styles.length ; i++) {
+               style = this.styles[i];
+               this.add(style.name,
+                                '<div class="' + style.className + '">' +
+                                       style.name + 
+                                '</div>',
+                                style.name
+                               );
+       }
+};
+
+PlinnStylesCombo.prototype.onClick = function(value) {
+       this.editor.focus();
+       this.editor.fire('saveSnapshot');
+       var style = this.styles[value]
+       var className = style.className;
+       var ranges = this.editor.getSelection().getRanges();
+       var element = this.editor.elementPath().lastElement;
+       if(ranges.length === 1) {
+               var start = ranges[0].startContainer;
+               var end = ranges[0].endContainer;
+               if(start.$ !== end.$) {
+                       // selection is a fragment that need to be wrapped in container to apply style
+                       element = new CKEDITOR.dom.element('div');
+                       element.append(ranges[0].cloneContents());
+                       this.editor.insertElement(element);
+               }
+       }
+       if (element.hasClass(className)) {
+               element.removeClass(className);
+       }
+       else {
+               element.addClass(className);
+       }
+       this.editor.fire('saveSnapshot');
+};
 
 var PlinnStylePlugin = function() {
        this.requires = 'richcombo';
+       this.combo = undefined;
 };
 
 PlinnStylePlugin.prototype.init = function(editor) {
-       var psc = new PlinnStylesCombo(editor);
-       editor.ui.addRichCombo('PlinnStyles', psc);
-       editor.on('stylesSet', this.onStylesSet);
+       this.combo = new PlinnStylesCombo(editor);
+       editor.ui.addRichCombo('PlinnStyles', this.combo);
+       var self = this;
+       editor.on('stylesSet', function(evt){self.onStylesSet(evt)});
 };
 
 PlinnStylePlugin.prototype.onStylesSet = function(evt) {
        var stylesDefinitions = evt.data.styles;
        if (!stylesDefinitions) { return; }
+       var i;
+       for(i=0 ; i < stylesDefinitions.length ; i++) {
+               this.combo.loadStyle(stylesDefinitions[i]);
+       }
        
 };
 
@@ -32,4 +83,4 @@ PlinnStylePlugin.prototype.onStylesSet = function(evt) {
 // main
 CKEDITOR.plugins.add( 'plinn_styles', new PlinnStylePlugin());
 
-} )();
+} ());