Changeset 335e66 in indico

Timestamp:

10/12/10 17:29:04 (3 years ago)

Author:

Pedro Ferreira <jose.pedro.ferreira@…>

Branches:

master, burotel, hello-world-walkthrough, ipv6, new-webex, v0.97-series, v0.98-series, v0.98.2, v0.98.3, v0.98b1, v0.98b2, v0.99, b8c30da8ebdbdcbd675a873997cc3e95f567de49, 4287315ec967a3da168d83963c14001db8487d53

Children:

8eabfb, 138bf2

Parents:

6e50e1

Message:

[FIX] Several CKeditor fixes

• Added back the "plain text" mode (had misteriously disappeared);
• Redid a bit the editor loading procedure, in order to conform to CKeditor instead of FCKeditor;

Location:

indico

Files:

• MaKaC/webinterface/tpls/ConferenceCreation.tpl (modified) (1 diff)
• MaKaC/webinterface/tpls/MeetingCreation.tpl (modified) (1 diff)
• MaKaC/webinterface/tpls/SimpleEventCreation.tpl (modified) (1 diff)
• htdocs/js/indico/Core/Auxiliar.js (modified) (1 diff)
• htdocs/js/indico/Core/Widgets/RichText.js (modified) (5 diffs)
• htdocs/js/indico/Legacy/Dialogs.js (modified) (1 diff)

indico/MaKaC/webinterface/tpls/ConferenceCreation.tpl

@@ -221 +221 @@
         });
 
-                var editor = new RichTextWidget(500, 200,"IndicoMinimal");
+                var editor = new RichTextWidget(500, 200,'','rich',"IndicoMinimal");
                 $E('descriptionBox').set(editor.draw());
         });

indico/MaKaC/webinterface/tpls/MeetingCreation.tpl

@@ -220 +220 @@
         verifyDates();
 
-        var editor = new RichTextWidget(500, 200,"IndicoMinimal");
+        var editor = new RichTextWidget(500, 200,'','rich',"IndicoMinimal");
         $E('descriptionBox').set(editor.draw());
         });

indico/MaKaC/webinterface/tpls/SimpleEventCreation.tpl

@@ -189 +189 @@
 
 
-        var editor = new RichTextWidget(500, 200,"IndicoMinimal");
+        var editor = new RichTextWidget(500, 200,'','rich',"IndicoMinimal");
         $E('descriptionBox').set(editor.draw());
 

indico/htdocs/js/indico/Core/Auxiliar.js

@@ -31 +31 @@
 
                 var accessor = getAccessorDeep(source);
-                var field = new RichTextWidget(width, height);
+                var field = new RichTextWidget(width, height, '', 'rich');
 
                 var fieldDiv = field.draw();

indico/htdocs/js/indico/Core/Widgets/RichText.js

@@ -12 +12 @@
         });*/
 
-type("RichTextWidget", ["IWidget", "Accessor"],
+type("RichTextEditor", ["IWidget", "Accessor"],
      {
          draw: function() {
-             selfReference = this;
+             var self = this;
              this.div = Html.div({'id': 'text' + this.divId, style : {height: this.height + 75, width: this.width}});
-             window.setTimeout(function() {
-                 initializeEditor('text' + selfReference.divId ,
-                                  selfReference.text ,
-                                  selfReference.callbacks,
-                                  selfReference.width,
-                                  selfReference.height,
-                                  selfReference.toolbarSet);
+
+             setTimeout(function() {
+                 initializeEditor(
+                     self,
+                     'text' + self.divId ,
+                     self.text ,
+                     self.callbacks,
+                     self.width,
+                     self.height,
+                     self.toolbarSet);
              },50);
              return this.div;
@@ -66 +69 @@
              return CKEDITOR.instances["text" + this.divId];
          }
-
      },
      function(width, height, toolbarSet) {
@@ -78 +80 @@
      });
 
+type("RichTextWidget", ["IWidget", "Accessor"],
+     {
+         draw: function() {
+             this.richDiv.append(this.rich.draw());
+             return Html.div({},
+                             this.plain.draw(),
+                             this.richDiv,
+                             Widget.link(this.switchLink));
+         },
+
+         observe: function(callback) {
+            var self = this;
+
+             var observeFunc = function(value) {
+
+                 self.plain.unbind();
+                 self.rich.unbind();
+
+                 if (value == 'rich') {
+                    self.rich.observe(function() {
+                         callback(self.rich);
+                     });
+                 } else {
+                     self.plain.observe(function() {
+                         callback(self.plain);
+                     });
+                 }
+             };
+
+             this.selected.observe(observeFunc);
+             observeFunc(this.selected.get());
+         },
+
+         get: function() {
+             return this.activeAccessor.get();
+         },
+
+         set: function(value, noDetection) {
+
+             this.currentText = value;
+
+             if (!any(noDetection, false)) {
+                 if ((this.isHtml(value)?'rich':'plain') != this.selected.get()) {
+                     this.switchLink.get()(false);
+                 }
+             }
+
+             if (value && (this.loaded || this.selected.get() == 'plain')) {
+                 this.activeAccessor.set(value);
+             }
+         },
+
+         synchronizePlain: function() {
+             this.currentText = this.rich.get();
+             this.plain.set(this.currentText);
+         },
+
+         synchronizeRich: function() {
+             this.currentText = this.plain.get();
+             this.rich.set(this.currentText);
+         },
+
+         isHtml: function(text) {
+             if (/<.*>[\s\S]*<\/.*>/.exec(text)) {
+                 return true;
+             } else {
+                 return false;
+             }
+         },
+
+         postDraw: function() {
+             this.rich.postDraw();
+         },
+
+         destroy: function() {
+             this.rich.destroy();
+         }
+     },
+     function(width, height, initialText, mode, toolbarSet) {
+
+         var textAreaParams = { style: {} };
+         textAreaParams.style.width = pixels(width);
+         textAreaParams.style.height = pixels(height);
+
+         this.plain = new RealtimeTextArea(textAreaParams);
+         this.rich = new RichTextEditor(width, height, toolbarSet);
+         this.richDiv = Html.div({});
+         this.currentText = any(initialText, '');
+         this.loaded = false;
+
+         this.selected = new WatchValue();
+
+         var toPlainFunc = function(sync) {
+             self.plain.setStyle('display', 'block');
+             self.richDiv.setStyle('display', 'none');
+             self.switchLink.set('toRich');
+             self.activeAccessor = self.plain;
+             self.selected.set('plain');
+             if (sync !== false) {
+                 self.synchronizePlain();
+             }
+         };
+
+         var toRichFunc  = function(sync) {
+             self.plain.setStyle('display', 'none');
+             self.richDiv.setStyle('display', 'block');
+             self.switchLink.set('toPlain');
+             self.activeAccessor = self.rich;
+             self.selected.set('rich');
+             if (sync !== false) {
+                 self.synchronizeRich();
+             }
+         };
+
+         var self = this;
+         this.switchLink = new Chooser(
+             {
+                 toPlain: command(
+                     toPlainFunc,
+                     $T("switch to plain text")),
+                 toRich: command(
+                     toRichFunc,
+                     $T("switch to rich text"))
+            });
+
+         if (exists(mode) && mode=='rich') {
+             toRichFunc();
+         } else if (exists(mode)){
+             toPlainFunc();
+         } else if (self.isHtml(self.currentText)) {
+             toRichFunc();
+         } else {
+             toPlainFunc();
+         }
+
+         this.rich.onLoad(function() {
+             self.loaded = true;
+             self.set(self.currentText, true);
+         });
+
+      });
+
+
 type("RichTextInlineEditWidget", ["InlineEditWidget"],
         {
             _handleEditMode: function(value) {
 
-                this.description = new RichTextWidget(600, 400,'IndicoMinimal');
+                this.description = new RichTextWidget(600, 400,
+                                                      '','rich',
+                                                      'IndicoMinimal');
                 this.description.set(value);
                 return this.description.draw();
@@ -133 +280 @@
 
 
-function initializeEditor( editorId, text, callbacks, width, height, toolbarSet ){
+function initializeEditor( wrapper, editorId, text, callbacks, width, height, toolbarSet ){
+    // "wrapper" is the actual Indico API object that represents an editor
+
     try {
 
         CKEDITOR.replace(editorId, {language : userLanguage, width : width, height : height - 75, 'toolbar': toolbarSet});
-        CKEDITOR.instances[editorId].setData(text);
-        CKEDITOR.instances[editorId].on ('key', function(e)
+
+        var cki = CKEDITOR.instances[editorId];
+
+        cki.setData(text);
+        cki.on ('key', function(e)
                 {
                     each(callbacks, function(func) {
@@ -144 +296 @@
                     })
                 });
+
+        // process onLoad events for each individual instance (wrapper)
+        cki.on ('instanceReady', function(e)
+                {
+                    each(wrapper.onLoadList, function(callback) {
+                                 callback();
+                    });
+
+                });
+
     }
     catch (error) {
-        window.setTimeout(function() {
-            initializeEditor(editorId, text, callbacks, width, height);
+        setTimeout(function() {
+            initializeEditor(wrapper, editorId, text, callbacks, width, height);
         },50);
     }

indico/htdocs/js/indico/Legacy/Dialogs.js

@@ -583 +583 @@
                var killProgress = null;
 
-               var rtWidget = new RichTextWidget(700,400,'IndicoFull');
+               var rtWidget = new RichTextWidget(700, 400, '', 'rich', 'IndicoFull');
 
                var saveButton;