Changeset 471

Timestamp:

03/13/06 11:02:45 (7 years ago)

Author:

mokhet

Message:

apply loadingMessage patch from ticket #595

Location:

trunk

Files:

• htmlarea.css (modified) (1 diff)
• htmlarea.js (modified) (11 diffs)
• lang/de.js (modified) (1 diff)
• lang/fr.js (modified) (1 diff)

trunk/htmlarea.css

@@ -232 +232 @@
 .htmlarea .panels.left  h1     { border-left:none;  }
 .htmlarea { border: 1px solid black; }
+
+.loading
+{
+  background-color:#666;
+  position:absolute;
+  z-index:998;
+}
+.loading_main
+{
+  font-size:1.6em;
+  color:#ff6;
+  text-align:center;
+}
+.loading_sub
+{
+  font-size:1.0em;
+  color:#fff;
+  text-align:center;
+}

trunk/htmlarea.js

@@ -99 +99 @@
       h: textarea.style.height ? textarea.style.height : (textarea.offsetHeight ? (textarea.offsetHeight + 'px') : (textarea.rows+'em'))
     };
+    // Create the loading message elements
+    if (this.config.showLoading)
+    {
+      // Create and show the main loading message and the sub loading message for details of loading actions
+      // global element
+      var loading_message = document.createElement("div");
+      loading_message.id = "loading_" + textarea.name;
+      loading_message.className = "loading";
+      try
+      {
+        // how can i find the real width in pixels without % or em *and* with no visual errors ?
+        // for instance, a textarea with a style="width:100%" and the body padding > 0 result in a horizontal scrollingbar while loading
+        // A few lines above seems to indicate offsetWidth is not always set
+        loading_message.style.width = textarea.offsetWidth + 'px';
+      }
+      catch (e)
+      {
+        // offsetWidth seems not set, so let's use this._initial_ta_size.w, but sometimes it may be too huge width
+        loading_message.style.width = this._initial_ta_size.w;
+      }
+      loading_message.style.left = HTMLArea.findPosX(textarea) +  'px';
+      loading_message.style.top = (HTMLArea.findPosY(textarea) + parseInt(this._initial_ta_size.h) / 2) +  'px';
+      // main static message
+      var loading_main = document.createElement("div");
+      loading_main.className = "loading_main";
+      loading_main.id = "loading_main_" + textarea.name;
+      loading_main.appendChild(document.createTextNode(HTMLArea._lc("Loading in progress. Please wait !")));
+      // sub dynamic message
+      var loading_sub = document.createElement("div");
+      loading_sub.className = "loading_sub";
+      loading_sub.id = "loading_sub_" + textarea.name;
+      loading_sub.appendChild(document.createTextNode(HTMLArea._lc("Constructing main object")));
+      loading_message.appendChild(loading_main);
+      loading_message.appendChild(loading_sub);
+      document.body.appendChild(loading_message);
+      this.setLoadingMessage("Constructing object");
+    }
 
     this._editMode = "wysiwyg";
@@ -297 +334 @@
 
   this.flowToolbars = true;
+  
+  // set to true if you want the loading panel to show at startup
+  this.showLoading = false;
 
   /** CUSTOMIZING THE TOOLBAR
@@ -535 +575 @@
 {
   if(!side) side = 'right';
+  this.setLoadingMessage('Register panel ' + side);
   var panel = this.addPanel(side);
   if(object)
@@ -716 +757 @@
 // Creates the toolbar and appends it to the _htmlarea
 HTMLArea.prototype._createToolbar = function () {
+  this.setLoadingMessage('Create Toolbar');
   var editor = this;    // to access this in nested functions
 
@@ -1144 +1186 @@
 
 HTMLArea.prototype._createStatusBar = function() {
+  this.setLoadingMessage('Create StatusBar');
   var statusbar = document.createElement("div");
   statusbar.className = "statusBar";
@@ -1177 +1220 @@
 HTMLArea.prototype.generate = function ()
 {
+  this.setLoadingMessage('Generate Xinha object');
   var editor = this;    // we'll need "this" in some nested functions
 
@@ -1427 +1471 @@
   HTMLArea.prototype.initSize = function()
   {
+    this.setLoadingMessage('Init editor size');
     var editor = this;
 
@@ -1842 +1887 @@
   HTMLArea.prototype.initIframe = function()
   {
+    this.setLoadingMessage('Init IFrame');
     this.disableToolbar();
     var doc = null;
@@ -2052 +2098 @@
         editor._onGenerate();
       }
+      editor.removeLoadingMessage();
     }
   );
@@ -5605 +5652 @@
     for(var i = 0; i < plugin_names.length; i++)
     {
+      this.setLoadingMessage('Register plugin $plugin', 'HTMLArea', {'plugin': plugin_names[i]});
       this.registerPlugin(eval(plugin_names[i]));
     }
@@ -5718 +5766 @@
 }
 
+// find X position of an element
+HTMLArea.findPosX = function(obj)
+{
+  var curleft = 0;
+  if (obj.offsetParent)
+  {
+    while (obj.offsetParent)
+    {
+      curleft += obj.offsetLeft
+      obj = obj.offsetParent;
+    }
+  }
+  else if (obj.x)
+  {
+    curleft += obj.x;
+  }
+  return curleft;
+};
+
+// find Y position of an element
+HTMLArea.findPosY = function(obj)
+{
+  var curtop = 0;
+  if (obj.offsetParent)
+  {
+    while (obj.offsetParent)
+    {
+      curtop += obj.offsetTop
+      obj = obj.offsetParent;
+    }
+  }
+  else if (obj.y)
+  {
+    curtop += obj.y;
+  }
+  return curtop;
+};
+
+HTMLArea.prototype.setLoadingMessage = function(string, context, replace)
+{
+  if (!this.config.showLoading || !document.getElementById("loading_sub_" + this._textArea.name)) { return ; }
+  var elt = document.getElementById("loading_sub_" + this._textArea.name);
+  elt.innerHTML = HTMLArea._lc(string, context, replace);
+};
+
+HTMLArea.prototype.removeLoadingMessage = function()
+{
+  if (!this.config.showLoading || !document.getElementById("loading_" + this._textArea.name)) { return ; }
+  document.body.removeChild(document.getElementById("loading_" + this._textArea.name));
+};
+
 HTMLArea.toFree = [ ];
 HTMLArea.freeLater = function(obj,prop)

trunk/lang/de.js

@@ -145 +145 @@
   "Clean content pasted from Word": "Von Word eingefÃŒgter Text bereinigen",
   "Headings": "Überschrift Typ 1 bis 6",
-  "Close": "Schließen"
+  "Close": "Schließen",
+
+  // Loading messages
+  "Loading in progress. Please wait !": "Editor wird geladen. Bitte warten !",
+  "Constructing main object": "Hauptteil wird erzeugt",
+  "Create Toolbar": "Bearbeitungswerkzeuge werden angelegt",
+  "Register panel right": "Erzeugt rechte Leiste",
+  "Register panel left": "Erzeugt linke Leiste",
+  "Register panel top": "Erzeugt obere Leiste",
+  "Register panel bottom": "Erzeugt untere Leiste"
 };

trunk/lang/fr.js

@@ -149 +149 @@
   "Clean content pasted from Word": "Nettoyage du contenu copié depuis Word",
   "Headings": "Titres",
-  "Close": "Fermer"
+  "Close": "Fermer",
+
+  // Loading messages
+  "Loading in progress. Please wait !": "Chargement en cours. Veuillez patienter !",
+  "Constructing main object": "Construction de l'objet principal",
+  "Constructing object": "Construction de l'objet",
+  "Register panel right": "Enregistrement du panneau droit",
+  "Register panel left": "Enregistrement du panneau gauche",
+  "Register panel top": "Enregistrement du panneau supérieur",
+  "Register panel bottom": "Enregistrement du panneau inférieur",
+  "Create Toolbar": "Construction de la barre d'icones",
+  "Create StatusBar": "Construction de la barre de status",
+  "Generate Xinha object": "Génération de l'objet Xinha",
+  "Init editor size": "Initialisation de la taille d'édition",
+  "Init IFrame": "Initialisation de l'iframe",
+  "Register plugin $plugin": "Enregistrement du plugin $plugin"
 };