Changeset 404

Timestamp:

10/27/05 08:28:55 (8 years ago)

Author:

niko

Message:

first version of the new-popup-dialog-system more info in #572

Location:

branches/new-dialogs

Files:

• dialogs (added)
• dialogs/insert-image.html (added)
• dialogs/insert-link.html (added)
• dialogs/insert-table.html (added)
• examples/full_example-menu.html (modified) (1 diff)
• examples/full_example.js (modified) (1 diff)
• floating-dialog.js (added)
• htmlarea.css (modified) (1 diff)
• htmlarea.js (modified) (15 diffs)
• inline-dialog.js (modified) (5 diffs)
• plugins/Linker/linker.js (modified) (13 diffs)
• plugins/SuperClean/super-clean.js (modified) (10 diffs)
• popup-dialog.js (added)

branches/new-dialogs/examples/full_example-menu.html

@@ -63 +63 @@
           </select>
         </label>
+        <label>
+          Dialogs:
+          <select name="popupType">
+          <option value="inline">inline</option>
+          <option value="floating">floating</option>
+          <option value="popup">popup</option>
+          </select>
+        </label>
     </fieldset>
 

branches/new-dialogs/examples/full_example.js

@@ -107 +107 @@
       xinha_config.Filters = ["Word", "Paragraph"]
     }
+    
+    config.popupType = f.popupType.value;
 
     return config;

branches/new-dialogs/htmlarea.css

@@ -172 +172 @@
 .dialog legend { font-weight: bold; }
 .dialog fieldset table { margin: 2px 0px; }
+
+.dialog div.insertlink { }
+.dialog div.insertlink div { margin-top: 5px; }
+.dialog div.insertlink label { width: 97px; display: block; float: left; text-align: right; margin-top: 3px; margin-right: 3px; }
+.dialog div.insertlink input { width: 200px; }
+.dialog div.insertlink div.buttons input { width: 90px; }
+
+.dialog div.insertimage { }
+.dialog div.insertimage div { margin-top: 5px; }
+.dialog div.insertimage label { width: 97px; display: block; float: left; text-align: right; margin-top: 3px; margin-right: 3px; }
+.dialog div.insertimage input { width: 200px; }
+.dialog div.insertimage fieldset { width: 40%; float: left; }
+.dialog div.insertimage fieldset label { width: 70px; }
+.dialog div.insertimage fieldset input { width: 50px; }
+.dialog div.insertimage fieldset select { width: 90px; }
+.dialog div.insertimage div.buttons input { width: 90px; }
 
 .popupwin {

branches/new-dialogs/htmlarea.js

@@ -151 +151 @@
       HTMLArea.freeLater(panels[i], 'div');      
     }
+
+    this.dialogs = { };
+
+    var toolbarDlgs = { "createlink"  : HTMLArea.InsertLinkDialog,
+                        "insertimage" : HTMLArea.InsertImageDialog,
+                        "inserttable" : HTMLArea.InsertTableDialog }
+    for (var i = 0; i < this.config.toolbar.length; i++)
+    {
+      if(this.config.toolbar[i].length)
+      {
+        for (var j = 0; j < this.config.toolbar[i].length; j++)
+        {
+          if(toolbarDlgs[this.config.toolbar[i][j]]) {
+            this.addDialog(this.config.toolbar[i][j], toolbarDlgs[this.config.toolbar[i][j]]);
+          }
+        }
+      }
+      else
+      {
+        if(toolbarDlgs[this.config.toolbar[i]]) {
+            this.addDialog(this.config.toolbar[i], toolbarDlgs[this.config.toolbar[i]]);
+        }
+      }
+    }
+
     HTMLArea.freeLater(this, '_textArea');
   }
@@ -297 +322 @@
 
   this.flowToolbars = true;
+
+  // Type of the popup-dialogs
+  // avaliable: popup, inline, floating
+  this.popupType = 'inline';
 
   /** CUSTOMIZING THE TOOLBAR
@@ -698 +727 @@
       }
     }
+  }
+};
+
+HTMLArea.prototype.addDialog = function(name, dialog)
+{
+  this.dialogs[name] = dialog;
+};
+
+HTMLArea.prototype.removeDialog = function(name)
+{
+  if(this.dialogs[name]) {
+    this.dialogs[name] = null;
   }
 };
@@ -1189 +1230 @@
   {
     HTMLArea._loadback
-      (_editor_url + 'inline-dialog.js', function() { editor.generate(); } );
+      (_editor_url + this.config.popupType + '-dialog.js', function() { editor.generate(); } );
       return false;
   }
@@ -1917 +1958 @@
     doc.write(html);
     doc.close();
+
+    // load dialogs
+    for(var i in editor.dialogs)
+    {
+      if(editor.dialogs[i]) {
+        editor.dialogs[i] = new editor.dialogs[i](editor);
+      }
+    }
+
 
     this.setEditorEvents();
@@ -3294 +3344 @@
       return;
     }
-    outparam = {
-      f_href : '',
-      f_title : '',
-      f_target : '',
-      f_usetarget : editor.config.makeLinkShowsTarget
+    inputs = {
+      href : '',
+      title : '',
+      target : ''
     };
   } else
-    outparam = {
-      f_href   : HTMLArea.is_ie ? editor.stripBaseURL(link.href) : link.getAttribute("href"),
-      f_title  : link.title,
-      f_target : link.target,
-      f_usetarget : editor.config.makeLinkShowsTarget
+    inputs = {
+      href   : HTMLArea.is_ie ? editor.stripBaseURL(link.href) : link.getAttribute("href"),
+      title  : link.title,
+      target : link.target
     };
-  this._popupDialog(editor.config.URIs["link"], function(param) {
-    if (!param)
-      return false;
-    var a = link;
-    if (!a) try {
-      editor._doc.execCommand("createlink", false, param.f_href);
-      a = editor.getParentElement();
-      var sel = editor._getSelection();
-      var range = editor._createRange(sel);
-      if (!HTMLArea.is_ie) {
-        a = range.startContainer;
-        if (!/^a$/i.test(a.tagName)) {
-          a = a.nextSibling;
-          if (a == null)
-            a = range.startContainer.parentNode;
-        }
-      }
-    } catch(e) {}
-    else {
-      var href = param.f_href.trim();
-      editor.selectNodeContents(a);
-      if (href == "") {
-        editor._doc.execCommand("unlink", false, null);
-        editor.updateToolbar();
-        return false;
-      }
-      else {
-        a.href = href;
-      }
-    }
-    if (!(a && /^a$/i.test(a.tagName)))
-      return false;
-    a.target = param.f_target.trim();
-    a.title = param.f_title.trim();
-    editor.selectNodeContents(a);
-    editor.updateToolbar();
-  }, outparam);
+    
+  // If we are not editing a link, then we need to insert links now using execCommand
+  // because for some reason IE is losing the selection between now and when doOK is
+  // complete.  I guess because we are defocusing the iframe when we click stuff in the
+  // linker dialog.
+
+  this.a = link; // Why doesn't a get into the closure below, but if I set it as a property then it's fine?
+  
+  var doOK = function()
+  {
+    var a = editor.a;
+
+    var values = editor.dialogs.createlink.hide();
+
+    var atr =
+    {
+      href: '',
+      target:'',
+      title:''
+    }
+
+    if(values.href)
+    {
+      atr.href = values.href;
+      atr.target = values.target;
+    }
+
+    if(a && a.tagName.toLowerCase() == 'a')
+    {
+      if(!atr.href)
+      {
+        if(confirm(editor.dialogs.createlink._lc('Are you sure you wish to remove this link?')))
+        {
+          var p = a.parentNode;
+          while(a.hasChildNodes())
+          {
+            p.insertBefore(a.removeChild(a.childNodes[0]), a);
+          }
+          p.removeChild(a);
+        }
+      }
+      // Update the link
+      for(var i in atr)
+      {
+        a.setAttribute(i, atr[i]);
+      }
+    }
+    else
+    {
+      if(!atr.href) return true;
+
+      // Insert a link, we let the browser do this, we figure it knows best
+      var tmp = HTMLArea.uniq('http://www.example.com/Link');
+      editor._doc.execCommand('createlink', false, tmp);
+
+      // Fix them up
+      var anchors = editor._doc.getElementsByTagName('a');
+      for(var i = 0; i < anchors.length; i++)
+      {
+        var a = anchors[i];
+        if(a.href == tmp)
+        {
+          // Found one.
+          for(var i in atr)
+          {
+            a.setAttribute(i, atr[i]);
+          }
+        }
+      }
+    }    
+  }
+  this.dialogs.createlink.show(inputs, {'ok': doOK} );
 };
 
@@ -3365 +3448 @@
     f_horiz  : image.hspace
   };
-  this._popupDialog(editor.config.URIs["insert_image"], function(param) {
-    if (!param) {       // user must have pressed Cancel
-      return false;
-    }
+  
+  this.image = image; // Why doesn't a get into the closure below, but if I set it as a property then it's fine?
+  
+  var doOK = function()
+  {      
     var img = image;
+    
+    var param = editor.dialogs.insertimage.hide();
+    
     if (!img) {
       var sel = editor._getSelection();
       var range = editor._createRange(sel);
-      editor._doc.execCommand("insertimage", false, param.f_url);
+      editor._doc.execCommand("insertimage", false, param.url);
       if (HTMLArea.is_ie) {
         img = range.parentElement();
@@ -3388 +3475 @@
       }
     } else {
-      img.src = param.f_url;
+      img.src = param.url;
     }
 
@@ -3394 +3481 @@
       var value = param[field];
       switch (field) {
-          case "f_alt"    : img.alt      = value; break;
-          case "f_border" : img.border = parseInt(value || "0"); break;
-          case "f_align"  : img.align    = value; break;
-          case "f_vert"   : img.vspace = parseInt(value || "0"); break;
-          case "f_horiz"  : img.hspace = parseInt(value || "0"); break;
-      }
-    }
-  }, outparam);
+          case "alt"    : img.alt        = value; break;
+          case "border" : img.border = parseInt(value || "0"); break;
+          case "align"  : img.align      = value; break;
+          case "vert"   : img.vspace = parseInt(value || "0"); break;
+          case "horiz"  : img.hspace = parseInt(value || "0"); break;
+      }
+    }  
+  }
+  this.dialogs.insertimage.show(outparam, { 'ok': doOK });
+  
 };
 
@@ -3409 +3498 @@
   var range = this._createRange(sel);
   var editor = this;    // for nested functions
-  this._popupDialog(editor.config.URIs["insert_table"], function(param) {
-    if (!param) {       // user must have pressed Cancel
-      return false;
-    }
+  
+  var doOK = function()
+  {      
     var doc = editor._doc;
     // create the table element
@@ -3418 +3506 @@
     // assign the given arguments
 
+    var param = editor.dialogs.inserttable.hide();
+    
     for (var field in param) {
       var value = param[field];
@@ -3424 +3514 @@
       }
       switch (field) {
-          case "f_width"   : table.style.width = value + param["f_unit"]; break;
-          case "f_align"   : table.align         = value; break;
-          case "f_border"  : table.border        = parseInt(value); break;
-          case "f_spacing" : table.cellSpacing = parseInt(value); break;
-          case "f_padding" : table.cellPadding = parseInt(value); break;
+          case "width"   : table.style.width = value + param["unit"]; break;
+          case "align"   : table.align   = value; break;
+          case "border"  : table.border  = parseInt(value); break;
+          case "spacing" : table.cellSpacing = parseInt(value); break;
+          case "padding" : table.cellPadding = parseInt(value); break;
       }
     }
     var cellwidth = 0;
-    if (param.f_fixed)
-      cellwidth = Math.floor(100 / parseInt(param.f_cols));
+    if (param.fixed)
+      cellwidth = Math.floor(100 / parseInt(param.cols));
     var tbody = doc.createElement("tbody");
     table.appendChild(tbody);
-    for (var i = 0; i < param["f_rows"]; ++i) {
+    for (var i = 0; i < param["rows"]; ++i) {
       var tr = doc.createElement("tr");
       tbody.appendChild(tr);
-      for (var j = 0; j < param["f_cols"]; ++j) {
+      for (var j = 0; j < param["cols"]; ++j) {
         var td = doc.createElement("td");
         if (cellwidth)
@@ -3454 +3544 @@
       editor.insertNodeAtSelection(table);
     }
-    return true;
-  }, null);
+  };
+  
+  this.dialogs.inserttable.show(null, { 'ok': doOK });
 };
 
@@ -3515 +3606 @@
       this._doc.execCommand(cmdID, UI, param);
     break;
-      case "inserttable": this._insertTable(); break;
-      case "insertimage": this._insertImage(); break;
+      case "inserttable":
+        this._insertTable();
+        return false; //don't updateToolbar
+      case "insertimage":
+        this._insertImage();
+        return false; //don't updateToolbar
       case "about"    : this._popupDialog(editor.config.URIs["about"], null, this); break;
       case "showhelp" : this._popupDialog(editor.config.URIs["help"], null, this); break;
@@ -5578 +5673 @@
 };
 
+
+HTMLArea.InsertImageDialog = function(editor)
+{
+    this.editor = editor;
+    this.ready = false;
+    this.html = false;
+    this.dialog = false;
+    
+    this._prepeareDialog();
+}
+
+HTMLArea.InsertImageDialog.prototype._prepeareDialog = function()
+{
+    var editor = this.editor;
+    var lDialog = this;
+    
+    if(this.html == false)
+    {
+        HTMLArea._getback(_editor_url + 'dialogs/insert-image.html', function(txt) { lDialog.html = txt; lDialog._prepeareDialog(); });
+        return;
+    }
+    var html = this.html;
+    
+    var dialog = this.dialog = new HTMLArea.Dialog(editor, this.html, 'HTMLArea', {width: 400, height: 400});
+    
+    this.ready = true;
+}
+
+HTMLArea.InsertImageDialog.prototype._lc = HTMLArea.prototype._lc;
+
+HTMLArea.InsertImageDialog.prototype.show = function(inputs, param)
+{
+  var lDialog = this;
+  if(!this.ready)
+  {
+    window.setTimeout(function() {lDialog.show(inputs,ok,cancel);},100);
+    return;
+  }
+
+  //set refence so we can use it in init
+  this.dialog.iDialog = this;
+
+  this.dialog.show(inputs, param, this.init);
+};
+
+HTMLArea.InsertImageDialog.prototype.init = function(inputs, param, dialog)
+{
+  var iDialog = dialog.iDialog;
+
+  // Connect the OK and Cancel buttons
+  if(param.ok)
+  {
+    dialog.getElementById('ok').onclick = param.ok;
+  }
+  else
+  {
+    dialog.getElementById('ok').onclick = function() {iDialog.hide();};
+  }
+
+  if(param.cancel)
+  {
+    dialog.getElementById('cancel').onclick = param.cancel;
+  }
+  else
+  {
+    dialog.getElementById('cancel').onclick = function() { iDialog.hide()};
+  }
+
+  // Init the sizes
+  dialog.onresize();    
+};
+
+HTMLArea.InsertImageDialog.prototype.hide = function()
+{
+  this.editor.enableToolbar();
+  return this.dialog.hide();
+};
+
+
+HTMLArea.InsertLinkDialog = function(editor)
+{
+    this.editor = editor;
+    this.ready = false;
+    this.html = false;
+    this.dialog = false;
+    
+    this._prepeareDialog();
+}
+
+HTMLArea.InsertLinkDialog.prototype._prepeareDialog = function()
+{
+    var editor = this.editor;
+    var lDialog = this;
+    
+    if(this.html == false)
+    {
+        HTMLArea._getback(_editor_url + 'dialogs/insert-link.html', function(txt) { lDialog.html = txt; lDialog._prepeareDialog(); });
+        return;
+    }
+    var html = this.html;
+    
+    var dialog = this.dialog = new HTMLArea.Dialog(editor, this.html, 'HTMLArea', {width: 400, height: 200});
+
+    this.ready = true;
+}
+
+HTMLArea.InsertLinkDialog.prototype._lc = HTMLArea.prototype._lc;
+
+HTMLArea.InsertLinkDialog.prototype.show = function(inputs, param)
+{
+  if(!this.ready)
+  {
+    window.setTimeout(function() {lDialog.show(inputs,ok,cancel);},100);
+    return;
+  }
+
+  //set refence so we can use it in init
+  this.dialog.lDialog = this;
+
+  this.dialog.show(inputs, param, this.init);
+};
+
+HTMLArea.InsertLinkDialog.prototype.init = function(inputs, param, dialog)
+{
+  var lDialog = dialog.lDialog;
+
+  if(param.ok)
+  {
+    dialog.getElementById('ok').onclick = param.ok;
+  }
+  else
+  {
+    dialog.getElementById('ok').onclick = function() {lDialog.hide();};
+  }
+
+  if(param.cancel)
+  {
+    dialog.getElementById('cancel').onclick = param.cancel;
+  }
+  else
+  {
+    dialog.getElementById('cancel').onclick = function() { lDialog.hide()};
+  }
+
+  if(!dialog.editor.config.makeLinkShowsTarget)
+  {
+    dialog.getElementById('f_target').style.display = 'none';
+  }
+
+  // Init the sizes
+  dialog.onresize();    
+
+};
+
+HTMLArea.InsertLinkDialog.prototype.hide = function()
+{
+  return this.dialog.hide();
+}
+
+
+HTMLArea.InsertTableDialog = function(editor)
+{
+    this.editor = editor;
+    this.ready = false;
+    this.html = false;
+    this.dialog = false;
+    
+    this._prepeareDialog();
+}
+
+HTMLArea.InsertTableDialog.prototype._prepeareDialog = function()
+{
+    var editor = this.editor;
+    var lDialog = this;
+    
+    if(this.html == false)
+    {
+        HTMLArea._getback(_editor_url + 'dialogs/insert-table.html', function(txt) { lDialog.html = txt; lDialog._prepeareDialog(); });
+        return;
+    }
+    var html = this.html;
+    
+    var dialog = this.dialog = new HTMLArea.Dialog(editor, this.html, 'HTMLArea', {width: 400, height: 200});
+    
+    this.ready = true;
+}
+
+HTMLArea.InsertTableDialog.prototype._lc = HTMLArea.prototype._lc;
+
+HTMLArea.InsertTableDialog.prototype.show = function(inputs, param)
+{
+  var lDialog = this;
+  if(!this.ready)
+  {
+    window.setTimeout(function() {lDialog.show(inputs,ok,cancel);},100);
+    return;
+  }
+
+  //set refence so we can use it in init
+  this.dialog.tDialog = this;
+
+  this.dialog.show(inputs, param, this.init);
+};
+
+HTMLArea.InsertTableDialog.prototype.init = function(inputs, param, dialog)
+{
+  var tDialog = dialog.tDialog;
+
+  // Connect the OK and Cancel buttons
+  if(param.ok)
+  {
+    dialog.getElementById('ok').onclick = param.ok;
+  }
+  else
+  {
+    dialog.getElementById('ok').onclick = function() {tDialog.hide();};
+  }
+
+  if(param.cancel)
+  {
+    dialog.getElementById('cancel').onclick = param.cancel;
+  }
+  else
+  {
+    dialog.getElementById('cancel').onclick = function() { tDialog.hide()};
+  }
+
+  // Init the sizes
+  dialog.onresize();    
+}
+
+HTMLArea.InsertTableDialog.prototype.hide = function()
+{
+  return this.dialog.hide();
+}
+
 HTMLArea.init();
 HTMLArea.addDom0Event(window,'unload',HTMLArea.collectGarbageForIE);

branches/new-dialogs/inline-dialog.js

@@ -68 +68 @@
         dialog.rootElem.style.width  = dialog.width  =  dialog.editor._framework.ed_cell.offsetWidth + 'px';
         dialog.rootElem.style.height = dialog.height =  dialog.editor._framework.ed_cell.offsetHeight + 'px';
-        dialog.onresize();
+        dialog.onresize(e, args);
       }
     );
@@ -78 +78 @@
 };
 
-HTMLArea.Dialog.prototype.show = function(values)
+HTMLArea.Dialog.prototype.show = function(values, param, initFunction)
 {
   // We need to preserve the selection for IE
@@ -84 +84 @@
   {
     this._lastRange = this.editor._createRange(this.editor._getSelection());
+  }
+
+  if(initFunction)
+  {
+    initFunction(values, param, this);
   }
 
@@ -95 +100 @@
   this.editor._iframe.style.visibility   = 'hidden';
   this.rootElem.style.display   = '';
+
+  this.editor.disableToolbar();
 };
 
@@ -326 +333 @@
   return this.document.getElementsByName(this.id[name] ? this.id[name] : name);
 };
+
+HTMLArea.Dialog.prototype.getFieldNameByName = function(name)
+{
+  return(this.id[name] ? this.id[name] : name);
+};
+
+HTMLArea.Dialog.prototype.loadStylesheet = function(href)
+{
+    HTMLArea.loadStyle(href);
+};
+
+HTMLArea.Dialog.prototype.loadScript = function(href, callback)
+{
+    HTMLArea._loadback(href, callback);
+
+};

branches/new-dialogs/plugins/Linker/linker.js

@@ -12 +12 @@
 };
 
-HTMLArea.loadStyle('dTree/dtree.css', 'Linker');
-
 HTMLArea.Config.prototype.Linker =
 {
@@ -24 +22 @@
 {
   this.editor  = editor;
-  this.lConfig = editor.config.Linker;
 
   var linker = this;
@@ -42 +39 @@
   // See if we can find 'createlink'
  editor.config.addToolbarElement("createlink", "createlink", 0);
+
+ editor.removeDialog("createlink");
+ editor.addDialog("linker", Linker.Dialog);
 }
 
@@ -150 +150 @@
     var a = linker.a;
 
-    var values = linker._dialog.hide();
+    var values = linker.editor.dialogs.linker.hide();
     var atr =
     {
@@ -201 +201 @@
       if(!atr.href)
       {
-        if(confirm(linker._dialog._lc('Are you sure you wish to remove this link?')))
+        if(confirm(linker._lc('Are you sure you wish to remove this link?')))
         {
           var p = a.parentNode;
@@ -256 +256 @@
   }
 
-  this._dialog.show(inputs, doOK);
+  this.editor.dialogs.linker.show(inputs, {'ok': doOK});
 
 };
@@ -280 +280 @@
 };
 
-Linker.prototype.onGenerate = function()
-{
-  this._dialog = new Linker.Dialog(this);
-};
 // Inline Dialog for Linker
 
@@ -289 +285 @@
 
 
-Linker.Dialog = function (linker)
+Linker.Dialog = function (editor)
 {
   var  lDialog = this;
   this.Dialog_nxtid = 0;
-  this.linker = linker;
+  this.editor = editor;
   this.id = { }; // This will be filled below with a replace, nifty
 
@@ -309 +305 @@
 {
   var lDialog = this;
-  var linker = this.linker;
+  var editor = this.editor;
 
   // We load some stuff up int he background, recalling this function
   // when they have loaded.  This is to keep the editor responsive while
   // we prepare the dialog.
-  if(typeof dTree == 'undefined')
-  {
-    HTMLArea._loadback(_editor_url + 'plugins/Linker/dTree/dtree.js',
-                       function() {lDialog._prepareDialog(); }
-                      );
-    return;
-  }
 
   if(this.files == false)
   {
-    if(linker.lConfig.backend)
-    {
-        //get files from backend
-        HTMLArea._getback(linker.lConfig.backend,
+    if(editor.config.Linker.backend)
+    {
+      //get files from backend
+      HTMLArea._getback(editor.config.Linker.backend,
                           function(txt) {
                             try {
@@ -335 +324 @@
                             }
                             lDialog._prepareDialog(); });
-    }
-    else if(linker.lConfig.files != null)
-    {
-        //get files from plugin-config
-        lDialog.files = linker.lConfig.files;
-        lDialog._prepareDialog();
-    }
-    return;
-  }
-  var files = this.files;
+      return;
+    }
+    else if(editor.config.Linker.files != null)
+    {
+      //get files from plugin-config
+      lDialog.files = editor.config.Linker.files;
+    }
+  }
 
   if(this.html == false)
@@ -351 +338 @@
     return;
   }
-  var html = this.html;
-
-  // Now we have everything we need, so we can build the dialog.
-  var dialog = this.dialog = new HTMLArea.Dialog(linker.editor, this.html, 'Linker');
-  var dTreeName = HTMLArea.uniq('dTree_');
-
-  this.dTree = new dTree(dTreeName, _editor_url + 'plugins/Linker/dTree/');
-  eval(dTreeName + ' = this.dTree');
-
-  this.dTree.add(this.Dialog_nxtid++, -1, document.location.host, null, document.location.host);
-  this.makeNodes(files, 0);
-
-  // Put it in
-  var ddTree = this.dialog.getElementById('dTree');
-  //ddTree.innerHTML = this.dTree.toString();
-  ddTree.innerHTML = '';
-  ddTree.style.position = 'absolute';
-  ddTree.style.left = 1 + 'px';
-  ddTree.style.top =  0 + 'px';
-  ddTree.style.overflow = 'auto';
-  this.ddTree = ddTree;
-  this.dTree._linker_premade = this.dTree.toString();
-
-  var options = this.dialog.getElementById('options');
+  if(this.dialog == false)
+  {
+    // Now we have everything we need, so we can build the dialog.
+    this.dialog = new HTMLArea.Dialog(editor, this.html, 'Linker');
+    this.dialog.loadStylesheet(_editor_url + 'plugins/Linker/dTree/dtree.css');
+    this.dialog.loadScript(_editor_url + 'plugins/Linker/dTree/dtree.js', function() {lDialog._prepareDialog(); });
+  }
+
+
+  var dialog = this.dialog;
+  // Hookup the resizer
+  this.dialog.onresize = function()
+  {
+      var options = dialog.getElementById('options');
+      var ddTree = dialog.getElementById('dTree');
+      options.style.height = ddTree.style.height = (parseInt(dialog.height) - dialog.getElementById('h1').offsetHeight) + 'px';
+      ddTree.style.width  = (parseInt(dialog.width)  - 322 ) + 'px';
+  }
+
+  this.ready = true;
+};
+
+Linker.Dialog.prototype.makeNodes = function(files, parent)
+{
+  for(var i = 0; i < files.length; i++)
+  {
+    if(typeof files[i] == 'string')
+    {
+      this.dTree.add(Linker.nxtid++, parent,
+                     files[i].replace(/^.*\//, ''),
+                     'javascript:document.getElementsByName(\'' + this.dialog.getFieldNameByName('href') + '\')[0].value=decodeURIComponent(\'' + encodeURIComponent(files[i]) + '\');document.getElementsByName(\'' + this.dialog.getFieldNameByName('type') + '\')[0].click();document.getElementsByName(\'' + this.dialog.getFieldNameByName('href') + '\')[0].focus();void(0);',
+                     files[i]);
+    }
+    else if(files[i].length)
+    {
+      var id = this.Dialog_nxtid++;
+      this.dTree.add(id, parent, files[i][0].replace(/^.*\//, ''), null, files[i][0]);
+      this.makeNodes(files[i][1], id);
+    }
+    else if(typeof files[i] == 'object')
+    {
+      if(files[i].children) {
+        var id = this.Dialog_nxtid++;
+      } else {
+        var id = Linker.nxtid++;
+      }
+
+      if(files[i].title) var title = files[i].title;
+      else if(files[i].url) var title = files[i].url.replace(/^.*\//, '');
+      else var title = "no title defined";
+      if(files[i].url) var link = 'javascript:document.getElementsByName(\'' + this.dialog.getFieldNameByName('href') + '\')[0].value=decodeURIComponent(\'' + encodeURIComponent(files[i].url) + '\');document.getElementsByName(\'' + this.dialog.getFieldNameByName('type') + '\')[0].click();document.getElementsByName(\'' + this.dialog.getFieldNameByName('href') + '\')[0].focus();void(0);';
+      else var link = '';
+      
+      this.dTree.add(id, parent, title, link, title);
+      if(files[i].children) {
+        this.makeNodes(files[i].children, id);
+      }
+    }
+  }
+};
+
+Linker.Dialog.prototype._lc = Linker.prototype._lc;
+
+Linker.Dialog.prototype.show = function(inputs, param)
+{
+  if(!this.ready)
+  {
+    var lDialog = this;
+    window.setTimeout(function() {lDialog.show(inputs,param);},100);
+    return;
+  }
+
+  //set refence so we can use it in init
+  this.dialog.lDialog = this;
+
+  this.dialog.show(inputs, param, this.init);
+};
+
+Linker.Dialog.prototype.init = function(inputs, param, dialog)
+{
+  var lDialog = dialog.lDialog;
+
+  if(!lDialog.dTree)
+  {
+    var dTreeName = HTMLArea.uniq('dTree_');
+    lDialog.dTree = new dTree(dTreeName, _editor_url + 'plugins/Linker/dTree/');
+    eval(dTreeName + ' = this.dTree');
+
+    lDialog.dTree.add(lDialog.Dialog_nxtid++, -1, document.location.host, null, document.location.host);
+    lDialog.makeNodes(lDialog.files, 0);
+  }
+
+  var ddTree = dialog.getElementById('dTree');
+  if(ddTree.innerHTML == '(the dTree goes in here)')
+  {
+    // Put it in
+    ddTree.innerHTML = lDialog.dTree.toString();
+    ddTree.style.position = 'absolute';
+    ddTree.style.left = 1 + 'px';
+    ddTree.style.top =  0 + 'px';
+    ddTree.style.overflow = 'auto';
+  }
+
+  var options = dialog.getElementById('options');
   options.style.position = 'absolute';
   options.style.top      = 0   + 'px';
@@ -381 +448 @@
   options.style.overflow = 'auto';
 
-  // Hookup the resizer
-  this.dialog.onresize = function()
-    {
-      options.style.height = ddTree.style.height = (parseInt(dialog.height) - dialog.getElementById('h1').offsetHeight) + 'px';
-      ddTree.style.width  = (parseInt(dialog.width)  - 322 ) + 'px';
-    }
-
-  this.ready = true;
-};
-
-Linker.Dialog.prototype.makeNodes = function(files, parent)
-{
-  for(var i = 0; i < files.length; i++)
-  {
-    if(typeof files[i] == 'string')
-    {
-      this.dTree.add(Linker.nxtid++, parent,
-                     files[i].replace(/^.*\//, ''),
-                     'javascript:document.getElementsByName(\'' + this.dialog.id.href + '\')[0].value=decodeURIComponent(\'' + encodeURIComponent(files[i]) + '\');document.getElementsByName(\'' + this.dialog.id.type + '\')[0].click();document.getElementsByName(\'' + this.dialog.id.href + '\')[0].focus();void(0);',
-                     files[i]);
-    }
-    else if(files[i].length)
-    {
-      var id = this.Dialog_nxtid++;
-      this.dTree.add(id, parent, files[i][0].replace(/^.*\//, ''), null, files[i][0]);
-      this.makeNodes(files[i][1], id);
-    }
-    else if(typeof files[i] == 'object')
-    {
-      if(files[i].children) {
-        var id = this.Dialog_nxtid++;
-      } else {
-        var id = Linker.nxtid++;
-      }
-
-      if(files[i].title) var title = files[i].title;
-      else if(files[i].url) var title = files[i].url.replace(/^.*\//, '');
-      else var title = "no title defined";
-      if(files[i].url) var link = 'javascript:document.getElementsByName(\'' + this.dialog.id.href + '\')[0].value=decodeURIComponent(\'' + encodeURIComponent(files[i].url) + '\');document.getElementsByName(\'' + this.dialog.id.type + '\')[0].click();document.getElementsByName(\'' + this.dialog.id.href + '\')[0].focus();void(0);';
-      else var link = '';
-      
-      this.dTree.add(id, parent, title, link, title);
-      if(files[i].children) {
-        this.makeNodes(files[i].children, id);
-      }
-    }
-  }
-};
-
-Linker.Dialog.prototype._lc = Linker.prototype._lc;
-
-Linker.Dialog.prototype.show = function(inputs, ok, cancel)
-{
-  if(!this.ready)
-  {
-    var lDialog = this;
-    window.setTimeout(function() {lDialog.show(inputs,ok,cancel);},100);
-    return;
-  }
-
-  if(this.ddTree.innerHTML == '')
-  {
-    this.ddTree.innerHTML = this.dTree._linker_premade;
-  }
-
   if(inputs.type=='url')
   {
-    this.dialog.getElementById('urltable').style.display = '';
-    this.dialog.getElementById('mailtable').style.display = 'none';
-    this.dialog.getElementById('anchortable').style.display = 'none';
+    dialog.getElementById('urltable').style.display = '';
+    dialog.getElementById('mailtable').style.display = 'none';
+    dialog.getElementById('anchortable').style.display = 'none';
   }
   else if(inputs.type=='anchor')
   {
-    this.dialog.getElementById('urltable').style.display = 'none';
-    this.dialog.getElementById('mailtable').style.display = 'none';
-    this.dialog.getElementById('anchortable').style.display = '';
+    dialog.getElementById('urltable').style.display = 'none';
+    dialog.getElementById('mailtable').style.display = 'none';
+    dialog.getElementById('anchortable').style.display = '';
   }
   else
   {
-    this.dialog.getElementById('urltable').style.display = 'none';
-    this.dialog.getElementById('mailtable').style.display = '';
-    this.dialog.getElementById('anchortable').style.display = 'none';
+    dialog.getElementById('urltable').style.display = 'none';
+    dialog.getElementById('mailtable').style.display = '';
+    dialog.getElementById('anchortable').style.display = 'none';
   }
 
   if(inputs.target=='popup')
   {
-    this.dialog.getElementById('popuptable').style.display = '';
+    dialog.getElementById('popuptable').style.display = '';
   }
   else
   {
-    this.dialog.getElementById('popuptable').style.display = 'none';
-  }
-
-  var anchor = this.dialog.getElementById('anchor');
+    dialog.getElementById('popuptable').style.display = 'none';
+  }
+
+  var anchor = dialog.getElementById('anchor');
   for(var i=0;i<anchor.childNodes.length;i++) {
     anchor.removeChild(anchor.childNodes[i]);
   }
 
-  var html = this.linker.editor.getHTML();  
+  var html = lDialog.editor.getHTML();  
   var anchors = new Array();
 
@@ -511 +513 @@
   //if no anchors found completely hide Anchor-Link
   if(anchor.childNodes.length==0) {
-    this.dialog.getElementById('anchorfieldset').style.display = "none";
+    dialog.getElementById('anchorfieldset').style.display = "none";
   }
   
 
   // Connect the OK and Cancel buttons
-  var dialog = this.dialog;
-  var lDialog = this;
-  if(ok)
-  {
-    this.dialog.getElementById('ok').onclick = ok;
+  if(param.ok)
+  {
+    dialog.getElementById('ok').onclick = param.ok;
   }
   else
   {
-    this.dialog.getElementById('ok').onclick = function() {lDialog.hide();};
-  }
-
-  if(cancel)
-  {
-    this.dialog.getElementById('cancel').onclick = cancel;
+    dialog.getElementById('ok').onclick = function() {lDialog.hide();};
+  }
+
+  if(param.cancel)
+  {
+    dialog.getElementById('cancel').onclick = param.cancel;
   }
   else
   {
-    this.dialog.getElementById('cancel').onclick = function() { lDialog.hide()};
-  }
-
-  // Show the dialog
-  this.linker.editor.disableToolbar(['fullscreen','linker']);
-
-  this.dialog.show(inputs);
+    dialog.getElementById('cancel').onclick = function() { lDialog.hide()};
+  }
 
   // Init the sizes
-  this.dialog.onresize();
+  dialog.onresize();
 };
 
 Linker.Dialog.prototype.hide = function()
 {
-  this.linker.editor.enableToolbar();
   return this.dialog.hide();
 };

branches/new-dialogs/plugins/SuperClean/super-clean.js

@@ -9 +9 @@
   // See if we can find 'killword' and replace it with superclean
   editor.config.addToolbarElement("superclean", "killword", 0);
+
+  if(editor.config.SuperClean.show_dialog)
+  {
+    editor.addDialog("superclean", SuperClean.Dialog);
+  }
+
 }
 
@@ -37 +43 @@
   var doOK = function()
   {
-    var opts = superclean._dialog.hide();
     var editor = superclean.editor;
+    var opts = editor.dialogs.superclean.hide();
+    
 
     if(opts.word_clean) editor._wordClean();
@@ -68 +75 @@
   {
     var inputs = {};
-    this._dialog.show(inputs, doOK);
+    this.editor.dialogs.superclean.show(inputs, doOK);
   }
   else
@@ -159 +166 @@
 SuperClean.prototype.onGenerate = function()
 {
-  if(this.editor.config.SuperClean.show_dialog && !this._dialog)
-  {
-    this._dialog = new SuperClean.Dialog(this);
-  }
   if(this.editor.config.tidy_handler)
   {
@@ -192 +195 @@
 
 
-SuperClean.Dialog = function (SuperClean)
+SuperClean.Dialog = function (editor)
 {
   var  lDialog = this;
   this.Dialog_nxtid = 0;
-  this.SuperClean = SuperClean;
+  this.editor = editor;
   this.id = { }; // This will be filled below with a replace, nifty
 
@@ -212 +215 @@
 {
   var lDialog = this;
-  var SuperClean = this.SuperClean;
+  var editor = this.editor;
 
   if(this.html == false)
@@ -221 +224 @@
 
   var htmlFilters = "";
-  for(var filter in this.SuperClean.editor.config.SuperClean.filters)
+  for(var filter in editor.config.SuperClean.filters)
   {
     htmlFilters += "    <div>\n";
     htmlFilters += "        <input type=\"checkbox\" name=\"["+filter+"]\" id=\"["+filter+"]\" checked />\n";
-    htmlFilters += "        <label for=\"["+filter+"]\">"+this.SuperClean.editor.config.SuperClean.filters[filter]+"</label>\n";
+    htmlFilters += "        <label for=\"["+filter+"]\">"+editor.config.SuperClean.filters[filter]+"</label>\n";
     htmlFilters += "    </div>\n";
   }
@@ -233 +236 @@
 
   // Now we have everything we need, so we can build the dialog.
-  var dialog = this.dialog = new HTMLArea.Dialog(SuperClean.editor, this.html, 'SuperClean');
+  var dialog = this.dialog = new HTMLArea.Dialog(editor, this.html, 'SuperClean');
 
   this.ready = true;
@@ -271 +274 @@
 
   // Show the dialog
-  this.SuperClean.editor.disableToolbar(['fullscreen','SuperClean']);
+  this.editor.disableToolbar(['fullscreen','SuperClean']);
 
   this.dialog.show(inputs);
@@ -281 +284 @@
 SuperClean.Dialog.prototype.hide = function()
 {
-  this.SuperClean.editor.enableToolbar();
+  this.editor.enableToolbar();
   return this.dialog.hide();
 };