Changeset 1097

Timestamp:

10/20/08 15:53:08 (5 years ago)

Author:

nicholasbs

Message:

* Fixes #58 (configuration of allowed target types)
* Fixes #1308 (remove link button doesn't work, switching target types causes JS error)
* Clean up dialog html (remove embedded JavaScript?)

Location:

trunk/plugins/Linker

Files:

• dialog.html (modified) (4 diffs)
• pluginMethods.js (modified) (6 diffs)

trunk/plugins/Linker/dialog.html

@@ -4 +4 @@
 <div id="[options]" >
   <fieldset>
-    <legend><label><input type="radio" name="[type]" id="[type]" value="url" checked="checked" onclick="
-      document.getElementById('[urltable]').style.display=this.checked?'':'none';
-      document.getElementById('[mailtable]').style.display=this.checked?'none':'';
-      document.getElementById('[anchortable]').style.display=this.checked?'none':'';
-    " /> <l10n>URL Link</l10n></label></legend>
+    <legend><label><input type="radio" name="[type]" id="[type_url]" value="url" checked="checked" />
+        <l10n>URL Link</l10n>
+    </label></legend>
     <table id="[urltable]" width="100%">
       <tr>
         <th><label for="[href]"><l10n>URL:</l10n> </label></th>
-        <td><input type="text" name="[href]" style="width:100%" value="http://www.example.com/" onfocus="if (this.value == 'http://www.example.com/') this.value = '';" /></td>
+        <td><input type="text" name="[href]" id="[href]" style="width:100%" value="http://www.example.com/" onfocus="if (this.value == 'http://www.example.com/') this.value = '';" /></td>
       </tr>
-      <tr style="vertical-align: top;">
+      <tr style="vertical-align: top;" id="[target_options]">
         <th><l10n>Target:</l10n></th>
         <td>
-          <div><label><input type="radio" name="[target]" value="" onclick="document.getElementById('[popuptable]').style.display='none';"  checked="checked" /> <l10n>Ordinary Link</l10n></label></div>
-          <div><label><input type="radio" name="[target]" value="_top" onclick="document.getElementById('[popuptable]').style.display='none';"   /> <l10n>Same Window (jump out of frames)</l10n></label></div>
-          <div><label><input type="radio" name="[target]" value="_blank" onclick="document.getElementById('[popuptable]').style.display='none';"/> <l10n>New Window</l10n> </label></div>
-          <div>
-            <label><input type="radio" name="[target]" value="popup"    onclick="document.getElementById('[popuptable]').style.display='';" /> <l10n>Popup Window</l10n> </label>
+          <div id="[noTarget]"><label><input type="radio" name="[target]" id="[noTargetRadio]" value="" /> <l10n>Ordinary Link</l10n></label></div>
+          <div id="[sameWindow]"><label><input type="radio" name="[target]" id="[sameWindowRadio]" value="_top" /> <l10n>Same Window (jump out of frames)</l10n></label></div>
+          <div id="[newWindow]"><label><input type="radio" name="[target]" id="[newWindowRadio]" value="_blank" /> <l10n>New Window</l10n> </label></div>
+          <div id="[popupWindow]">
+            <label><input type="radio" name="[target]" id="[popupWindowRadio]" value="popup" /> <l10n>Popup Window</l10n> </label>
              <div style="padding-left:10px">
               <table id="[popuptable]">
@@ -61 +59 @@
   </fieldset>
   <fieldset id="[mailtofieldset]">
-    <legend><label><input type="radio" name="[type]" value="mailto" onclick="
-      document.getElementById('[mailtable]').style.display=this.checked?'':'none';
-      document.getElementById('[urltable]').style.display=this.checked?'none':'';
-      document.getElementById('[anchortable]').style.display=this.checked?'none':'';
-    "/> <l10n>Email Link</l10n></label></legend>
+    <legend><label><input type="radio" name="[type]" id="[type_mailto]" value="mailto"/>
+        <l10n>Email Link</l10n>
+    </label></legend>
     <table id="[mailtable]" width="100%">
       <tr>
         <th><label for="[to]"><l10n>Email Address:</l10n> </label></th>
-        <td><input type="text" name="[to]" style="width:100%" value="alice@example.com" onfocus="if (this.value == 'alice@example.com') this.value = '';" /></td>
+        <td><input type="text" name="[to]" id="[to]" style="width:100%" value="alice@example.com" onfocus="if (this.value == 'alice@example.com') this.value = '';" /></td>
       </tr>
       <tr>
@@ -83 +79 @@
 
   <fieldset id="[anchorfieldset]">
-    <legend><label><input type="radio" name="[type]" value="anchor" onclick="
-      document.getElementById('[urltable]').style.display=this.checked?'none':'';
-      document.getElementById('[mailtable]').style.display=this.checked?'none':'';
-      document.getElementById('[anchortable]').style.display=this.checked?'':'none';
-    "/> <l10n>Anchor-Link</l10n></label></legend>
+    <legend><label><input type="radio" name="[type]" id="[type_anchor]" value="anchor"/>
+        <l10n>Anchor-Link</l10n>
+    </label></legend>
     <table id="[anchortable]" width="100%">
       <tr>
@@ -101 +95 @@
   <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="[clear]"  value="_(Remove Link)" />
     <input type="button" id="[cancel]" value="_(Cancel)" />
   </div>
 </div>
 </div>
+
+

trunk/plugins/Linker/pluginMethods.js

@@ -269 +269 @@
   var files = this.linker.files;
 
-  var html = Linker.html;
-
   // Now we have everything we need, so we can build the dialog.
   var dialog = this.dialog = new Xinha.Dialog(linker.editor, Linker.html, 'Linker',{width:600,height:400});
@@ -325 +323 @@
       lDialog.ddTree.style.width  = w + 'px';
     }
+
+  // Set the onclick handlers for the link type radio buttons
+  self = this;
+  this.dialog.getElementById('type_url').onclick = function() {
+    self.showOptionsForType('url');
+  };
+  this.dialog.getElementById('type_mailto').onclick = function() {
+    self.showOptionsForType('mailto');
+  };
+  this.dialog.getElementById('type_anchor').onclick = function() {
+    self.showOptionsForType('anchor');
+  };
+
+  var hidePopupOptions = function() {
+    self.showOptionsForTarget('none')
+  };
+  this.dialog.getElementById('noTargetRadio').onclick = hidePopupOptions;
+  this.dialog.getElementById('sameWindowRadio').onclick = hidePopupOptions;
+  this.dialog.getElementById('newWindowRadio').onclick = hidePopupOptions;
+  this.dialog.getElementById('popupWindowRadio').onclick = function() {
+    self.showOptionsForTarget('popup');
+  };
+
   this.ready = true;
   ddTree = null;
@@ -386 +407 @@
   }
 
-  if(inputs.type=='url')
-  {
-    this.dialog.getElementById('urltable').style.display = '';
-    this.dialog.getElementById('mailtable').style.display = 'none';
-    this.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 = '';
-  }
-  else
-  {
-    this.dialog.getElementById('urltable').style.display = 'none';
-    this.dialog.getElementById('mailtable').style.display = '';
-    this.dialog.getElementById('anchortable').style.display = 'none';
-  }
-
-  if(inputs.target=='popup')
-  {
-    this.dialog.getElementById('popuptable').style.display = '';
-  }
-  else
-  {
-    this.dialog.getElementById('popuptable').style.display = 'none';
-  }
+  this.showOptionsForType(inputs.type);
+  this.showOptionsForTarget(inputs.target);
   
   var anchor = this.dialog.getElementById('anchor');
@@ -467 +463 @@
   }
 
-  
+  // Disable link targets (all targets available by default)
+  var disabledTargets = this.linker.lConfig.disableTargetTypes; 
+  if (typeof disabledTargets == 'undefined')
+  {
+    disabledTargets = [];
+  } 
+  else if (typeof disabledTargets == 'string')
+  {
+    disabledTargets = [disabledTargets];
+  }
+  for (var i=0; i<disabledTargets.length; i++)
+  {
+    this.dialog.getElementById(disabledTargets[i]).style.display = "none";
+  }
+  if (disabledTargets.length == 3) // only one target option is visible
+  {
+    if (disabledTargets.contains('popupWindow'))
+    {
+      // There's no need to show anything, so hide the entire div
+      this.dialog.getElementById('target_options').style.display = "none";
+    }
+    else
+    {
+      // Only popups are allowed, hide the radio button
+      this.dialog.getElementById('popupWindowRadio').style.display = "none";
+      this.showOptionsForTarget('popup');
+    }
+  }
+
+  var enabledTargets = new Array();
+  if (!disabledTargets.contains('noTarget'))
+  {
+    enabledTargets.push('noTargetRadio');
+  }
+  if (!disabledTargets.contains('sameWindow'))
+  {
+    enabledTargets.push('sameWindowRadio');
+  }
+  if (!disabledTargets.contains('newWindow'))
+  {
+    enabledTargets.push('newWindowRadio');
+  }
+  if (!disabledTargets.contains('popupWindow'))
+  {
+    enabledTargets.push('popupWindowRadio');
+  }
+
   // if we're not editing an existing link, hide the remove link button
   if (inputs.href == 'http://www.example.com/' && inputs.to == 'alice@example.com') { 
     this.dialog.getElementById('clear').style.display = "none";
   }
-  else {
-    this.dialog.getElementById('clear').style.display = "";
+  else { // 
+    var clearBtn = this.dialog.getElementById('clear');
+    clearBtn.style.display = "";
+    if (ok)
+    {
+      clearBtn.onclick = function() { lDialog.removeLink(ok); };
+    }
   }
   // Connect the OK and Cancel buttons
@@ -501 +548 @@
   this.dialog.show(inputs);
 
+  // If we set the default radio button *before* we call dialog.show()
+  // it doesn' work...
+  var targetSelected = false;
+  for (var i=0; i<enabledTargets.length; i++)
+  {
+    console.log(this.dialog.getElementById(enabledTargets[i]));
+    console.log("is checked: " + this.dialog.getElementById(enabledTargets[i]).checked);
+    if (this.dialog.getElementById(enabledTargets[i]).checked == true)
+    {
+      targetSelected = true;
+      break;
+    }
+  }
+  // If no target is selected, select the first one by default
+  if (!targetSelected && enabledTargets.length > 0)
+  {
+    this.dialog.getElementById(enabledTargets[0]).checked = true;
+  }
+
   // Init the sizes
   this.dialog.onresize();
@@ -510 +576 @@
   return this.dialog.hide();
 };
+
+Linker.Dialog.prototype.removeLink = function(applyFunc)
+{
+  this.dialog.getElementById('href').value = "";
+  this.dialog.getElementById('to').value = "";
+
+  return applyFunc();
+};
+
+Linker.Dialog.prototype.showOptionsForType = function(type)
+{
+  var urlOptions = this.dialog.getElementById('urltable');
+  var mailtoOptions = this.dialog.getElementById('mailtable');
+  var anchorOptions = this.dialog.getElementById('anchortable');
+
+  if (type == 'anchor')
+  {
+    anchorOptions.style.display = '';
+    urlOptions.style.display = 'none';
+    mailtoOptions.style.display = 'none';
+  }
+  else if (type == 'mailto')
+  {
+    mailtoOptions.style.display = '';
+    urlOptions.style.display = 'none';
+    anchorOptions.style.display = 'none';
+  }
+  else 
+  {
+    urlOptions.style.display = '';
+    mailtoOptions.style.display = 'none';
+    anchorOptions.style.display = 'none';
+  }
+};
+
+Linker.Dialog.prototype.showOptionsForTarget = function(target)
+{
+  var popupOptions = this.dialog.getElementById('popuptable');
+  popupOptions.style.display = target == 'popup' ? '' : 'none';
+};