insert link as inline-dialog

niko · 2005-04-15 07:05:35

i did a first implementation of the insert-link-dialog as an inline-dialog. Most of the code was just copied from Linker-plugin - i just wanted to look how to implement this. (all other dialogs should follow too...)

so, gogo (and others?), please have a look at it
- i have added the HTMLArea.InsertLinkDialog at the bottom of htmlarea.js - or should would be an external file?
- the html-code is preloaded - exactly like the linker-plugin does it.
(i did some tests on that, and i found out that i can work with xinha while in the background it still loads the linker-plugin - of course a bit slower - but it should not be a problem)
- the dialog has the whole width of xinha (as it is inline) - doesn't look very good if xinha has a width of 800px or more
(propbably someday we have a iframe-dialog.js so something)

Index: htmlarea.js
===================================================================
--- htmlarea.js    (Revision 71)
+++ htmlarea.js    (Arbeitskopie)
@@ -1522,6 +1522,9 @@
          return editor._editorEvent(HTMLArea.is_ie ? editor._iframe.contentWindow.event : event);
        });
 
+    //load the insert-link dialog (todo: load only when button exists and linker doesn't exist)
+    editor._insertLinkDialog = new HTMLArea.InsertLinkDialog(editor);
+       
     // check if any plugins have registered refresh handlers
     for (var i in editor.plugins) {
       var plugin = editor.plugins[i].instance;
@@ -2805,56 +2808,90 @@
       alert("You need to select some text before creating a link");
       return;
     }
-    outparam = {
+    inputs = {
       f_href : '',
       f_title : '',
-      f_target : '',
-      f_usetarget : editor.config.makeLinkShowsTarget
+      f_target : ''
     };
   } else
-    outparam = {
+    inputs = {
       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
+      f_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;
+    
+  // 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()
+  {
+  alert('ok');
+    var a = editor.a;
+
+    var values = editor._insertLinkDialog.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._insertLinkDialog._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);
         }
       }
-    } catch(e) {}
-    else {
-      var href = param.f_href.trim();
-      editor.selectNodeContents(a);
-      if (href == "") {
-        editor._doc.execCommand("unlink", false, null);
-        editor.updateToolbar();
-        return false;
+      // Update the link
+      for(var i in atr)
+      {
+        a.setAttribute(i, atr[i]);
       }
-      else {
-        a.href = href;
+    }
+    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]);
+          }
+        }
       }
-    }
-    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);
+    }    
+  }
+  this._insertLinkDialog.show(inputs, doOK);
 };
 
 // Called when the user clicks on "InsertImage" button.  If an image is already
@@ -4704,5 +4741,83 @@
     }
   }
 }
+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 + 'popups/link-inline.html', function(txt) { lDialog.html = txt; lDialog._prepeareDialog(); });
+        return;
+    }
+    var html = this.html;
+    
+    var dialog = this.dialog = new HTMLArea.Dialog(editor, this.html, 'HTMLArea');
+    
+    if(!editor.config.makeLinkShowsTarget) {
+        this.dialog.getElementById('f_target').style.display = 'none';
+    }
+    
+    
+    this.ready = true;
+}
+
+HTMLArea.InsertLinkDialog.prototype._lc = HTMLArea.prototype._lc;
+
+HTMLArea.InsertLinkDialog.prototype.show = function(inputs, ok, cancel)
+{
+  var lDialog = this;
+  if(!this.ready)
+  {
+    window.setTimeout(function() {lDialog.show(inputs,ok,cancel);},100);
+    return;
+  }
+  
+  // Connect the OK and Cancel buttons
+  var dialog = this.dialog;
+  if(ok)
+  {
+    this.dialog.getElementById('ok').onclick = ok;
+  }
+  else
+  {
+    this.dialog.getElementById('ok').onclick = function() {lDialog.hide();};
+  }
+
+  if(cancel)
+  {
+    this.dialog.getElementById('cancel').onclick = cancel;
+  }
+  else
+  {
+    this.dialog.getElementById('cancel').onclick = function() { lDialog.hide()};
+  }
+
+  // Show the dialog
+  this.editor.disableToolbar(['fullscreen','insertlink']);
+
+  this.dialog.show(inputs);
+
+  // Init the sizes
+  this.dialog.onresize();    
+}
+
+HTMLArea.InsertLinkDialog.prototype.hide = function()
+{
+  this.editor.enableToolbar();
+  return this.dialog.hide();
+}
+
+
 HTMLArea.init();
\ No newline at end of file
Index: popups/link-inline.html
===================================================================
--- popups/link-inline.html    (Revision 0)
+++ popups/link-inline.html    (Revision 0)
@@ -0,0 +1,28 @@
+<h1 id="[h1]"><l10n>Insert/Modify Link</l10n></h1>
+<table border="0" style="width: 100%;">
+  <tr>
+    <td class="label">URL:</td>
+    <td><input type="text" id="f_href"  name="[href]" style="width: 100%" /></td>
+  </tr>
+  <tr>
+    <td class="label">Title (tooltip):</td>
+    <td><input type="text" id="f_title" name="[title]" style="width: 100%" /></td>
+  </tr>
+  <tr>
+    <td class="label"><span id="f_target_label">Target:</span></td>
+    <td><select id="f_target" name="[target]">
+      <option value="">None (use implicit)</option>
+      <option value="_blank">New window (_blank)</option>
+      <option value="_self">Same frame (_self)</option>
+      <option value="_top">Top frame (_top)</option>
+    </select>
+    <input type="text" name="f_other_target" id="f_other_target" size="10" style="visibility: hidden" />
+    </td>
+  </tr>
+</table>
+
+<div style="text-align:right">
+    <input type="button" id="[ok]"     value="_(OK)"     />
+    <input type="button" id="[clear]"  value="_(REMOVE LINK)" onclick="this.form['[href]'].value='';this.form['[to]'].value='';document.getElementById('[ok]').click();" />
+    <input type="button" id="[cancel]" value="_(CANCEL)" />
+</div>

gogo · 2005-04-15 07:23:46

- i have added the HTMLArea.InsertLinkDialog at the bottom of htmlarea.js - or should would be an external file?

If this is to be the default behaviour then that's OK, otherwise it could be a plugin perhaps. Of course, I'm not sure about making it the default until we have an implementation of a popup dialog working like inline-dialog, otherwise I suspect people might not like the change.

In general, looks like you have got the idea, good work

niko · 2005-04-15 07:55:16

Of course, I'm not sure about making it the default until we have an implementation of a popup dialog working like inline-dialog, otherwise I suspect people might not like the change.

you mean an iframe-popup, don't you?
i will try to create one!

In general, looks like you have got the idea, good work

thanks

one other thing:
wouldn't it be possible to replace HTMLArea.loadScript by HTMLArea._loadback-functions?
i don't know where to start as there is no callback-function.

gogo · 2005-04-15 09:33:38

niko wrote:

wouldn't it be possible to replace HTMLArea.loadScript by HTMLArea._loadback-functions?
i don't know where to start as there is no callback-function.

you could just make the callback optional

if(typeof callback == 'function') callback();

then just not supply it if you don't want a callback.

niko · 2005-04-18 12:10:45

wouldn't it be possible to replace HTMLArea.loadScript by HTMLArea._loadback-functions?
i don't know where to start as there is no callback-function.

plase take a look at this patch:
http://xinha.python-hosting.com/ticket/139

i played around abit with creating iframe-dialogs...
- i could create an iframe exactly the same way the inline-dialog now creates an div inside the editor.
- but there would be a hidden iframe loaded in the background for every dialog! (which could be quite much if all the plugins would use this)
i see now four possibilities:
- load the html-code and the iframe when we display the dialog
- load the html-code in the Dialog-object and write the html-code from the object into one unique iframe (that will be loaded onGenerate) when displaying the dialog
- load all dialogs in separate iframes
- don't use iframes at all - why not a div (exaclty like the inline-dialog) - that we place over the whole site

...please comment my ideas! thanks

gogo · 2005-04-18 12:55:42

don't use iframes at all - why not a div (exaclty like the inline-dialog) - that we place over the whole site

I think the problem there would be the old "form elements show through layers" problem in web browsers where select lists etc are always "on top" and you can't put positioned divs over the top of them.

That said, I havn't actually seen that behaviour that I can remember in quite some time, so maybe MS and MZ finally fixed that particular problem?

Divs would be preferable if it's do-able.

PS: here's a good "drag-drop" library which you might find useful when doing this "fake popups" for making them dragable easily... http://www.walterzorn.com/dragdrop/dragdrop_e.htm

guillaumed · 2005-04-18 13:01:33

Niko,

I don't know the cost of iframes vs div... I think that div should be less expensive, no?

But my suggest is that we should consider dialog as "modal" so there should be only one dialog at a time (disable menu buttons in this mode) and then only one div or iframe for the dialogs..

niko · 2005-04-18 14:33:46

I think the problem there would be the old "form elements show through layers" problem in web browsers where select lists etc are always "on top" and you can't put positioned divs over the top of them.
That said, I havn't actually seen that behaviour that I can remember in quite some time, so maybe MS and MZ finally fixed that particular problem?

Yes, IE has this problem with <select>-boxes - moz doesn't have this problem.
But we can avoid it by hiding all <selects> below the div when opening the dialog
(like mishoo's dhtml-calendar does it: http://www.dynarch.com/demos/jscalendar/)

Divs would be preferable if it's do-able.

yes, i hope it is doable!

PS: here's a good "drag-drop" library which you might find useful when doing this "fake popups" for making them dragable easily...

puh... its getting more and more complex

But my suggest is that we should consider dialog as "modal" so there should be only one dialog at a time (disable menu buttons in this mode) and then only one div or iframe for the dialogs..

yes, the dialog should be really modal. but is diabling the toolbar enough?
i could imagine to have a huge div over the whole document (transparent) that catches all clicks, only the dialog itself is above this.
(don't know if this is possible)

willeffects · 2005-04-18 17:14:33

Do you have an example link of what this looks like?

Thanks,
Will

gogo · 2005-04-18 21:41:02

yes, the dialog should be really modal. but is diabling the toolbar enough?
i could imagine to have a huge div over the whole document (transparent) that catches all clicks, only the dialog itself is above this.
(don't know if this is possible)

The dialog should only really be modal when it needs to be modal for whatever reason, at least that's my view. A div over the editor (perhaps semi-opaque (-moz-opacity and the Alpha() filter for IE)) sounds like a good way of doing the modality though.

Hiding the selects under the div would work OK, but perhaps might be complicated? Don't know, never tried it before.

niko · 2005-04-19 01:54:17

Do you have an example link of what this looks like?

nope i'm just doing some brainstorming here...

Hiding the selects under the div would work OK, but perhaps might be complicated? Don't know, never tried it before.

i might use some code from mishoo's dhtml-calendar...

A div over the editor (perhaps semi-opaque (-moz-opacity and the Alpha() filter for IE)) sounds like a good way of doing the modality though.

good idea!
the div only over the editor? what if the user has several editors on one page? can he open a dialog for every editor?
would be the best solution i think....
but these are the minor details....

guillaumed · 2005-04-19 03:02:19

gogo wrote:

The dialog should only really be modal when it needs to be modal for whatever reason

I cannot imagine a non modal dialog using this feature?? (of course over the editor not the page..). If non modal then is it up to the plugin developper to define it as he like or do you mean we should force to use a conventional interface like the right panel as for Stylist?

gogo wrote:

http://www.walterzorn.com/dragdrop/dragdrop_e.htm

looks quite good... There's no drag&drop features on dTree isn't it? Do you know a tree lib with that?

niko · 2005-04-19 03:10:35

I cannot imagine a non modal dialog using this feature?? (of course over the editor not the page..). If non modal then is it up to the plugin developper to define it as he like or do you mean we should force to use a conventional interface like the right panel as for Stylist?

yes, this might be true!
although it might happen that a dialog opens another dialog (in most cases the 2nd dialog should be modal over the first dialog too) - for example the create-new-folder in the ImageManager.

http://www.walterzorn.com/dragdrop/dragdrop_e.htm

looks good... but has too much features! i only need a simple dragdrop and perhaps a resize. and i don't have to take care about browser-compatibility (at least NS4 or IE4)

niko · 2005-04-19 07:38:24

take a look at this:
http://cms.vivid-planet.com/test/xinha/ … -body.html
and click the Insert-Hyperlink-Button.

(just to get the basic idea, this is not yet finished of course...)

guillaumed · 2005-04-19 10:35:26

Great... Impatient to use it...:D

Two remarks at glance :

What do you think to use css with id on items for foreign langage specific presentation (remember a previous remark on i18n that sentences size may be a problem) ?

The window should stay in the editor...

adamp · 2005-04-19 11:08:35

Looks good niko

niko · 2005-04-20 02:38:06

What do you think to use css with id on items for foreign langage specific presentation (remember a previous remark on i18n that sentences size may be a problem) ?

i understand the problem, but i do not understand what you mean with "css with id on items for foreign langage specific presentation".

The window should stay in the editor...

...if you want to stay the window inside the editor you might use inline-dialog?
(the plan is to make it configurable what dialog-styles you want)

the reason i'm creating this is because some people (including me) might use xinha with only 300px width (eg. the content in the page has exactly this width) - then there is not enough space inside the editor to display large popups like the linker-plugin with a large tree.

niko · 2005-04-20 10:09:37

i improved the dragging a bit, thanks to mishoo from whom's great jscalendar i copied most of the code (its LGPL - so no problem )
the mousemove is now attached to document insead of just the h1.
demo here: http://cms.vivid-planet.com/test/xinha/ … -body.html

code here:
http://cms.vivid-planet.com/test/xinha/iframe-dialog.js

gogo (or others), please take a look at it, i'm no JS-expert:
in line 133 i add the mousemove-event to the document, and i can't call HTMLArea.Dialog.dragIt directly - as i won't have the dialog-object in there. so was my solution to have dialog as the second argument.

is there a better solution for that?

guillaumed · 2005-04-20 12:46:58

niko wrote:

i'm no JS-expert

Great code for a beginner

niko wrote:

i do not understand what you mean with ...

The dialog element should have a specific id (like the label "Title (tooltip):" in your example, which can be created as something shorter like class="inline_dialog_create_link_2") thenwe should be defined longer in a css file. I'm wrong ?

niko wrote:

if you want to stay the window inside the editor you might use inline-dialog?

The first idea was that if you have several editors on the same page, you might not know whose dialog is it.. but that's no important...

gogo · 2005-04-21 06:35:37

It looks real good niko, out of interest, why did you make dragIt() and dragEnd() static methods rather than prototype them into Dialog?

niko · 2005-04-21 07:09:23

out of interest, why did you make dragIt() and dragEnd() static methods rather than prototype them into Dialog?

because the jscalendar had it the same way

The dialog element should have a specific id (like the label "Title (tooltip):" in your example, which can be created as something shorter like class="inline_dialog_create_link_2") thenwe should be defined longer in a css file. I'm wrong ?

imho the html-code should be not with absolute pixel-sizes and so resize the fields dynamically.
if we still get troubles with some languages we can change something....

niko · 2005-05-03 05:16:18

i just updated http://cms.vivid-planet.com/test/xinha/ … -body.html

changed/added:
- hiding the selects in IE when the dialog is moved over them
- 3 dialogs implemented: insert link, insert image and insert table (needs some fine-tuning in IE)
- disableEditor-div now works better
- statusbar correclty hidden

junkwarrior · 2006-06-26 03:28:09

Hi!
Is there any further development on this front?
The links to Niko's site all return a 404.
Thanks.

Xinha Discussion Forum

Announcement

#1 2005-04-15 07:05:35

insert link as inline-dialog

#2 2005-04-15 07:23:46

Re: insert link as inline-dialog

#3 2005-04-15 07:55:16

Re: insert link as inline-dialog

#4 2005-04-15 09:33:38

Re: insert link as inline-dialog

#5 2005-04-18 12:10:45

Re: insert link as inline-dialog

#6 2005-04-18 12:55:42

Re: insert link as inline-dialog

#7 2005-04-18 13:01:33

Re: insert link as inline-dialog

#8 2005-04-18 14:33:46

Re: insert link as inline-dialog

#9 2005-04-18 17:14:33

Re: insert link as inline-dialog

#10 2005-04-18 21:41:02

Re: insert link as inline-dialog

#11 2005-04-19 01:54:17

Re: insert link as inline-dialog

#12 2005-04-19 03:02:19

Re: insert link as inline-dialog

#13 2005-04-19 03:10:35

Re: insert link as inline-dialog

#14 2005-04-19 07:38:24

Re: insert link as inline-dialog

#15 2005-04-19 10:35:26

Re: insert link as inline-dialog

#16 2005-04-19 11:08:35

Re: insert link as inline-dialog

#17 2005-04-20 02:38:06

Re: insert link as inline-dialog

#18 2005-04-20 10:09:37

Re: insert link as inline-dialog

#19 2005-04-20 12:46:58

Re: insert link as inline-dialog

#20 2005-04-21 06:35:37

Re: insert link as inline-dialog

#21 2005-04-21 07:09:23

Re: insert link as inline-dialog

#22 2005-05-03 05:16:18

Re: insert link as inline-dialog

#23 2006-06-26 03:28:09

Re: insert link as inline-dialog

Board footer